opms_wechat/pages/schedule/supervise/components/progress.vue

<template>
  <view>
    <view class="info-item">
      <u-row justify="space-between" gutter="10">
        <u-col span="12">
          <view class="flex_l">
            <view class="label">进展情况</view>
            <u-icon
              name="plus-circle"
              color="#2979ff"
              size="28"
              @click="addProgress()"
              v-if="details.taskStatus === '20' && details.step === 20 && type == 1"></u-icon>
          </view>
        </u-col>
      </u-row>
    </view>
    <!-- 进展列表 -->
    <view class="evolve-wrap" v-if="details.taskStatus === '20' && details.step === 20 && type == 1">
      <view class="evolve-item" v-for="(v, i) in progressList" :key="i">
        <view class="evolve-row split-line">
          <view class="no mb12">{{ i + 1 }}</view>
          <u-row justify="space-between" gutter="10">
            <u-col span="3">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="时间"></u-text>
            </u-col>
            <u-col span="9" @click="openCalendar(i)">
              <!-- <u-text :bold="true" customStyle="margin-bottom:12rpx" text="2022-11-11"></u-text> -->
              <u-input :readonly="true" v-model="v.progDate"></u-input>
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row split-line">
          <u-row gutter="10">
            <u-col span="12">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="进展描述"></u-text>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <!-- <view class="desc mb12">2022-11-11</view> -->
              <u-input v-model="v.progDesc"></u-input>
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row split-line">
          <u-row gutter="10">
            <u-col span="12">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="附件"></u-text>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <uni-file-picker file-mediatype="all" mode="grid" @select="select($event, i)" ref="upload" limit="1">
                <view class="upload-btn">
                  <u-icon name="plus-circle-fill" color="blue" size="28"></u-icon>
                </view>
              </uni-file-picker>
              <!-- <view class="file mb12">测试啥.ppt</view> -->
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row split-line">
          <u-row gutter="10">
            <u-col span="12">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="备注"></u-text>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <!-- <view class="file">备注备注备注备注备注备注备注</view> -->
              <u-input v-model="v.remark"></u-input>
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row" @click="handleDel()">
          <u-text color="#2979ff" text="删除"></u-text>
        </view>
      </view>
    </view>
    <view class="evolve-wrap" v-else>
      <view class="evolve-item" v-for="(v, i) in progressList" :key="i">
        <view class="evolve-row split-line">
          <view class="no mb12">{{ i + 1 }}</view>
          <u-row justify="space-between" gutter="10">
            <u-col span="3">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="时间"></u-text>
            </u-col>
            <u-col span="9">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" :text="v.progDate"></u-text>
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row split-line">
          <u-row gutter="10">
            <u-col span="12">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="进展描述"></u-text>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <view class="desc mb12">{{ v.progDesc }}</view>
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row split-line">
          <u-row gutter="10">
            <u-col span="12">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="附件"></u-text>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <view class="file mb12">{{ v.progFile }}</view>
            </u-col>
          </u-row>
        </view>
        <view class="evolve-row split-line">
          <u-row gutter="10">
            <u-col span="12">
              <u-text :bold="true" customStyle="margin-bottom:12rpx" text="备注"></u-text>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12">
              <view class="file">{{ v.remark }}</view>
            </u-col>
          </u-row>
        </view>
      </view>
    </view>
    <!-- 提示 -->
    <u-toast ref="uToast"></u-toast>
    <!-- 日历 -->
    <u-calendar :show="showCalendar" @confirm="confirmCalendar" @close="showCalendar = false"></u-calendar>
  </view>
</template>

<script>
  import taskApi from '@/api/task'
  export default {
    props: {
      details: {
        type: Object,
        default: {},
      },
      type: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        curCalendarIndex: 0,
        progressList: [],
        showCalendar: false,
      }
    },
    mounted() {
      this.getProgressList()
    },
    methods: {
      // 获取进展信息
      getProgressList() {
        this.progressList = []
        taskApi
          .getTaskProgressList({ taskId: this.details.id + '' })
          .then((res) => {
            if (res.data.list) {
              this.progressList = res.data.list
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      // 添加进展
      addProgress() {
        this.progressList.push({ progDesc: '', progDate: '', progFile: '', remark: '' })
      },
      // 删除进展
      handleDel(index) {
        this.progressList.splice(index, 1)
      },
      openCalendar(index) {
        this.showCalendar = true
        this.curCalendarIndex = index
      },
      confirmCalendar(val) {
        this.progressList[this.curCalendarIndex].progDate = val[0]
        this.showCalendar = false
      },
      // // 选择上传触发函数
      select(e, index) {
        let url = process.uniEnv.VUE_APP_UPLOAD_WEED
        uni.request({
          url, //仅为示例，并非真实接口地址。
          success: (res) => {
            this.uploadFiles(e, res.data, index)
          },
        })
      },
      // 上传函数
      async uploadFiles(e, res, index) {
        let action = process.uniEnv.VUE_APP_PROTOCOL + res.publicUrl + '/' + res.fid
        uni.uploadFile({
          url: action,
          filePath: e.tempFilePaths[0],
          name: 'file',
          formData: {
            file: e.tempFiles[0].file,
          },
          success: (res) => {
            this.$refs.uToast.show({
              type: 'success',
              message: '附件上传成功',
            })
            this.progressList[index].progFile = action
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .info-item {
    padding: 20rpx;
    .label {
      color: #646464;
      font-size: 26rpx;
    }
    .desc {
      font-size: 26rpx;
      text-indent: 20rpx;
    }
  }
  .evolve-wrap {
    .evolve-item {
      margin-bottom: 20rpx;
      .evolve-row {
        padding: 20rpx;
      }
      .split-line {
        border-bottom: 1px solid #e6e6e6;
      }
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      .no {
        width: 50rpx;
        height: 50rpx;
        background: #78b0ed;
        border-radius: 50%;
        text-align: center;
        line-height: 50rpx;
        color: #fff;
      }
    }
  }
</style>