cnbg_web/src/views/serviceManagement/servicesToBeReviewed/components/TaskDetail.vue

<template>
  <div class="task-box">
    <!-- 分享的图片展示 -->

    <el-image v-if="showImg" style="width: 100px; height: 100px" :src="taskInfo.shareImgUrl" :preview-src-list="[taskInfo.shareImgUrl]"> </el-image>
    <template v-if="configList && configList.length > 0">
      <div style="max-height: 270px; overflow: auto">
        <div v-for="item in configList" :key="item.id" class="field-box">
          <template v-if="item.taskFiledType == 'domain' || item.taskFiledType == 'select' || item.taskFiledType == 'tree'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value" v-show="!(item.taskTypeId == '19' && item.taskFiledKey == 'temp3')">
              {{ getDesc(item) }}
            </div>
          </template>
          <!-- 城市选择 -->
          <template v-if="item.taskFiledType === 'area'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ getAddress(item) }}
            </div>
          </template>
          <!-- 文字输入 -->
          <template v-if="item.taskFiledType == 'text' || item.taskFiledType == 'inputautoselect' || item.taskFiledType == 'map' || item.taskFiledType == 'mapwithimg'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
            <!-- 用temp17存储打卡图片 -->
            <div v-if="item.taskFiledType == 'mapwithimg' && !!wmTaskContent['temp17']" class="location-img">
              <div class="field-text">位置打卡图片</div>
              <div class="img-box">
                <el-image class="img-item" :src="baseUrl + wmTaskContent['temp17']" :preview-src-list="getPreviewList([baseUrl + wmTaskContent['temp17']], 0)"> </el-image>
              </div>
            </div>
          </template>
          <!-- 时间 -->
          <template v-if="item.taskFiledType == 'datetime'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 日期范围 -->
          <template v-if="item.taskFiledType == 'datatimerange'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] }}
            </div>
          </template>
          <!-- 签名 -->
          <div v-if="item.taskFiledType == 'sign'" class="divline" style="width: 100%; height: 15px; background-color: #e9e9e9; margin-bottom: 5px"></div>
          <template v-if="item.taskFiledType == 'sign'">
            <div class="upload-field">
              <div class="field-text" :class="{ required: item.isMustfill == '1' }">{{ item.taskFiledValue }}：</div>
              <!-- 上传组件 -->
              <div class="img-box">
                <el-image
                  :key="index"
                  class="img-item"
                  :src="baseUrl + wmTaskContent[item.taskFiledKey]"
                  :preview-src-list="getPreviewList([baseUrl + wmTaskContent[item.taskFiledKey]], 0)"
                >
                </el-image>
              </div>
            </div>
          </template>
          <!-- 图片上传 -->
          <div v-if="item.taskFiledType == 'img'" class="divline" style="width: 100%; height: 15px; background-color: #e9e9e9; margin-bottom: 5px"></div>
          <template v-if="item.taskFiledType == 'img'">
            <div class="upload-field">
              <div class="field-text" :class="{ required: item.isMustfill == '1' }">
                {{ item.taskFiledValue }}：
                <!-- {{ getImgList(wmTaskContent[item.taskFiledKey], item) }} -->
              </div>
              <!-- 上传组件 -->
              <div class="img-box" v-if="item.imgList">
                <div v-for="(iItem, index) in item.imgList" :key="index" class="img-box-content">
                  <span class="type">{{ iItem.type }}</span>
                  <el-image class="img-item" lazy :src="iItem.url" :preview-src-list="getPreviewList(item.previewList, index)" />
                </div>
              </div>
            </div>
          </template>
          <!-- 文件类型 -->
          <template v-if="item.taskFiledType === 'fileurl'">
            <div class="upload-field">
              <div class="field-text" :class="{ required: item.isMustfill == '1' }">
                {{ item.taskFiledValue }}：
                {{ getFileList(wmTaskContent[item.taskFiledKey], item) }}
              </div>
              <div v-if="item.fileList" class="pl60 pr60">
                <!-- 图片文件 -->
                <div class="img-box">
                  <template v-for="(iItem, index) in item.fileList">
                    <el-image
                      v-if="imgTypeList.includes(iItem.url.split('.')[1])"
                      :key="index"
                      class="img-item"
                      :src="iItem.url"
                      :preview-src-list="
                        getPreviewList(
                          item.fileList.map((ele) => ele.url),
                          index
                        )
                      "
                    >
                    </el-image>
                  </template>
                </div>
                <!-- 其他文件 -->
                <div class="file-box">
                  <template v-for="(iItem, index) in item.fileList">
                    <div v-if="!imgTypeList.includes(iItem.url.split('.')[1])" :key="index" class="df_sb file-item">
                      <span>{{ iItem.fileName }}</span>
                      <span @click="downloadFn(iItem)">下载</span>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
          <!-- 金额 -->
          <template v-if="item.taskFiledType == 'money'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 数字 -->
          <template v-if="item.taskFiledType == 'number'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 长文本 -->
          <template v-if="item.taskFiledType == 'longtext'">
            <div class="longtext-box">
              <div class="field-text" :class="{ required: item.isMustfill == '1' }">{{ item.taskFiledValue }}：</div>
              <textarea class="textarea-box" :disabled="true" :value="wmTaskContent[item.taskFiledKey] || '--'" :maxlength="item.taskFiledMaxsize" />
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import taskApi from '@/api/taskDetail/task';
import commonApi from '@/api/taskDetail/common';
import provinces from '@/util/lib/province';
import citys from '@/util/lib/city';
import areas from '@/util/lib/area';
import request from '@/router/axios';

export default {
  name: 'index',
  data() {
    return {
      baseUrl: process.env.VUE_APP_URL,
      showImg: false, // 是否显示只展示图片，分享用到
      taskInfo: {},
      wmTaskContent: {},
      taskTypeId: 0, // 任务类型id
      configList: [], // 配置列表
      dictList: [], //字典
      imgTypeList: ['jpeg', 'jpg', 'png', 'git', 'bmp'] // 能查看的文件类型
    };
  },
  props: {
    id: {
      type: String
    }
  },

  methods: {
    // 获取地址
    getAddress(item) {
      if (item.taskFiledType == 'area') {
        let e = this.wmTaskContent[item.taskFiledKey];
        if (!e) return '--';
        let arr = e.split(',');
        let provincesName = '';
        let provincesIndex = '';
        let cityName = '';
        let cityIndex = '';
        let areasName = '';
        // 如果为数字，方形，不为数组则展示
        var n = parseInt(arr[0]);
        // 如果不为数字，则返回
        if (isNaN(n)) {
          return arr[0];
        }
        if (arr[0]) {
          provinces.map((v, k) => {
            if (v.value + '0000' == arr[0]) {
              provincesName = v.label;
              provincesIndex = k;
            }
          });
        }
        if (arr[1]) {
          citys[provincesIndex].map((v, k) => {
            if (v.value + '00' == arr[1]) {
              cityName = v.label;
              cityIndex = k;
            }
          });
        }
        if (arr[2]) {
          areas[provincesIndex][cityIndex].map((v, k) => {
            if (v.value == arr[2]) {
              areasName = v.label;
            }
          });
        }
        return `${provincesName}-${cityName}-${areasName}`;
      }
    },
    // 获取详情
    getDesc(item) {
      // 拜访类任务
      const arr = ['51', '52', '53'];
      if (arr.includes(item.taskTypeId) && item.taskFiledKey === 'temp24') {
        return this.wmTaskContent['temp24label'];
      }
      // 获取需要转换的字符串（例如 '1,2,3'）
      const contentValue = this.wmTaskContent[item.taskFiledKey];
      if (!contentValue) return '--';
      // 获取字典表对应数组
      const itemList = this.dictList[item.dictGroupName] || [];
      // 按逗号拆分成数组
      const valueArray = contentValue.split(',');
      // 将每个拆分值找到对应的 label
      const result = valueArray.map((val) => {
        const foundItem = itemList.find((dictItem) => dictItem.value === val);
        return foundItem ? foundItem.label : null;
      });
      // 如果有任意一个值无法找到对应的 label，则直接返回 '--'
      if (result.some((label) => label === null)) {
        return '--';
      }
      // 否则，使用逗号拼接并返回
      return result.join(',');
    },

    // 得出图片
    // 得出图片
    getImgList(urlStr, item) {
      // 如果字段类型不是图片或没有 urlStr，则直接返回空数组
      if (item.taskFiledType !== 'img' || !urlStr) return [[], []];

      // 将字符串按逗号拆分为数组
      const urlArr = urlStr.split(',');
      // 如果拆分后为空，也返回空数组
      if (!urlArr.length) return [[], []];

      // 使用 reduce 一次性构建 imgList 和 previewList
      const [imgList, previewList] = urlArr.reduce(
        (acc, curUrl) => {
          let [imgListAcc, previewListAcc] = acc;
          let type = '无';
          let newUrl = curUrl;

          if (curUrl.includes(';1')) {
            type = '拍照';
            newUrl = curUrl.replace(';1', '');
          } else if (curUrl.includes(';2')) {
            type = '相册';
            newUrl = curUrl.replace(';2', '');
          }

          const fullUrl = process.env.VUE_APP_URL + newUrl;
          imgListAcc.push({ type, url: fullUrl });
          previewListAcc.push(fullUrl);

          return [imgListAcc, previewListAcc];
        },
        [[], []]
      );

      return [imgList, previewList];
    },

    // 得出文件 jsonStr: temp字符串
    getFileList(jsonStr, item) {
      if (item.taskFiledType !== 'fileurl') return '';
      if (!jsonStr) return '';
      const parseFileList = JSON.parse(jsonStr);
      if (!parseFileList) return '';
      let fileList = [];
      parseFileList.forEach((fileItem) => {
        fileList.push({
          fileName: fileItem.fileName,
          url: process.env.VUE_APP_URL + fileItem.url
        });
      });
      item.fileList = parseFileList;
      return '';
    },
    // 下载文件
    downloadFn(item) {
      request({
        url: item.url,
        method: 'get',
        responseType: 'blob'
      }).then((response) => {
        // 处理返回的文件流
        const blob = response.data;
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = item.fileName;
        document.body.appendChild(link);
        link.click();
        window.setTimeout(function () {
          URL.revokeObjectURL(blob);
          document.body.removeChild(link);
        }, 0);
      });
    },
    // 获取任务详情
    async getTaskInfoById(id) {
      try {
        const res = await taskApi.getTaskInfoById(id);
        const { data } = res.data;
        this.wmTaskContent = data.wmTaskContent;
        this.taskInfo = data.taskInfo;
        this.taskTypeId = data.taskType;
        this.getTaskContentConfigByTaskTypeId(data.taskType);
      } catch (e) {
        console.log(e);
      }
    },
    // 获取配置
    async getTaskContentConfigByTaskTypeId(value) {
      try {
        let res = await commonApi.getTaskContentConfigByTaskTypeId(value);
        let { config, dict } = res.data.data;
        this.configList = config;
        this.dictList = dict;
        this.configList.forEach((item) => {
          item.taskFiledType = item.taskFiledType.trim();
          if (item.taskFiledType == 'img') {
            let imgArr = this.getImgList(this.wmTaskContent[item.taskFiledKey], item);
            item.imgList = imgArr[0];
            item.previewList = imgArr[1];
          }
        });
      } catch (e) {
        console.log(e);
      }
      this.getMapAddress();
      // uni.hideLoading();
    },
    getPreviewList(imgList, index) {
      // 解决el-image大图预览定位图片不准确的问题
      return imgList.slice(index).concat(imgList.slice(0, index));
    }
  },
  mounted() {
    this.getTaskInfoById(this.id);
  }
};
</script>

<style lang="scss" scoped>
.field-box {
  //display: flex;
  padding: 0 20px 10px;
  overflow: hidden;
  .title-value {
    //width: 50%;
    float: left;
  }
  .desc-value {
    float: left;
  }
  .upload-field {
    .img-box {
      padding-top: 10px;
      display: flex;
      flex-wrap: wrap;
    }
    .file-box {
      .file-item {
        padding: 2px 8px;
        cursor: pointer;
        &:hover {
          background-color: #f5f7fa;
          color: #2d8cf0;
        }
      }
    }
  }
  .img-box-content {
    padding-top: 15px;
    position: relative;

    .type {
      font-size: 12px;
      position: absolute;
      top: -3px;
    }
  }
  .img-item {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
  .longtext-box {
    width: 50%;
    .textarea-box {
      margin-top: 10px !important;
      width: 100%;
    }
  }
}

.sign-in-box {
  padding: 10px 20px;
}

.detail-info {
  ul {
    list-style: none;
    li {
      span {
        min-width: 80px;
      }
      display: flex;
      margin-bottom: 5px;
    }
  }
}
</style>