jszjdy-regulatory-app/pages/disaster_prevention/task_view.vue

<template>
  <view class="container">
    <u-divider
      text="防灾减灾专项行动"
      text-position="left"
      text-color="rgb(42, 86, 247)"
      line-color="rgb(42, 86, 247)"
      dashed
    />
    <u-cell-group>
      <u-cell title="防灾减灾专项行动名称">
        <template #label>{{ info.ACTIVITY_TASK_NAME }}</template>
      </u-cell>
      <u-cell title="防灾减灾类型" :value="info.ACTIVITY_TASK_TYPE_NAME" />
      <u-cell title="工作任务">
        <!--        <template #label>{{ info.ACTIVITY_TASK }}</template>-->
        <template #label>
          <view class="ql-editor">
            <u-parse :content="info.ACTIVITY_TASK"></u-parse>
          </view>
        </template>
      </u-cell>
      <u-cell
        title="工作周期"
        :value="info.ACTIVITY_TIME_BEGIN + '至' + info.ACTIVITY_TIME_END"
      />
      <u-cell title="附件">
        <template #label>
          <u-row v-for="(item, i) in info.filesList" :key="item.FILEPATH">
            <view @click="showFile(item)">{{ i + 1 + "." + item.NAME }}</view>
          </u-row>
        </template>
      </u-cell>
    </u-cell-group>
    <u-divider
      text="责任单位"
      text-position="left"
      text-color="rgb(42, 86, 247)"
      line-color="rgb(42, 86, 247)"
      dashed
    />
    <u-cell-group v-for="(item, index) in info.deptList" :key="index">
      <u-cell title="单位名称" :value="item.DEPARTMENT_NAME" />
      <u-cell title="联系人" :value="item.LEADER_NAME" />
      <u-cell title="上报次数" :value="item.countReport"> </u-cell>
    </u-cell-group>
    <u-divider
      text="上报情况"
      text-position="left"
      text-color="rgb(42, 86, 247)"
      line-color="rgb(42, 86, 247)"
      dashed
    />
    <u-cell-group v-for="(item, index) in info.contentList" :key="index">
      <u-cell title="上报时间" :value="item.CREATTIME" />
      <u-cell title="上报单位" :value="item.DEPARTMENT_NAME" />
      <u-cell title="上报人" :value="item.CREATOR" />
      <u-cell title="上报照片">
        <template #label>
          <div class="img-wrap">
            <div
              v-for="item1 in item.children"
              :key="item1.DISASTER_PREVENTION_FILES_ID"
            >
              <u--image
                :show-loading="true"
                :src="item1.FILEPATH"
                width="80px"
                height="80px"
                @click="fnPreview(item1.FILEPATH)"
              />
            </div>
          </div>
        </template>
      </u-cell>
      <u-cell title="上报内容" :value="item.INSPECT_CONTENT" />
    </u-cell-group>
  </view>
</template>

<script>
import { getDisasterPreventionTaskView } from "@/api";

export default {
  data() {
    return {
      info: {
        filesList: [],
      },
    };
  },
  onLoad(query) {
    this.fnGetData(query.DISASTER_PREVENTION_ACTIVITY_TASK_ID);
  },
  methods: {
    async fnGetData(DISASTER_PREVENTION_ACTIVITY_TASK_ID) {
      const resData = await getDisasterPreventionTaskView({
        DISASTER_PREVENTION_ACTIVITY_TASK_ID,
      });
      for (let i = 0; i < resData.pd.filesList.length; i++) {
        resData.pd.filesList[i].FILEPATH =
          this.$filePath + resData.pd.filesList[i].FILEPATH;
      }
      this.info.imgsList = resData.pd.contentList.children;
      for (let i = 0; i < resData.pd.contentList.length; i++) {
        if (resData.pd.contentList[i].children) {
          for (let j = 0; j < resData.pd.contentList[i].children.length; j++) {
            resData.pd.contentList[i].children[j].FILEPATH =
              this.$filePath + resData.pd.contentList[i].children[j].FILEPATH;
          }
        }
      }
      this.info = resData.pd;
    },
    showFile(item) {
      uni.showLoading({
        title: "加载中...",
      }); // 加载中动画
      uni.downloadFile({
        url: item.FILEPATH,
        success: (res) => {
          uni.hideLoading(); // 结束加载中动画
          uni.openDocument({
            filePath: res.tempFilePath,
            success: function () {},
          });
        },
      });
    },
    fnPreview(current) {
      uni.previewImage({
        current,
        urls: [current],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 20upx;
}
.u-icon {
  justify-content: center;
}
titleStyle {
  font-weight: bold;
}
.cell_tit {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-wrap {
  display: flex;
  flex-wrap: wrap;
  > div {
    margin: 15upx;
  }
}
</style>