HS_MZAP/src/views/activityMan/siteInspection/siteInspectionInfo.vue

<template>
  <van-nav-bar
    fixed
    title="场所检查情况"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <van-loading size="16px" v-show="isLoading">加载中...</van-loading>

  <div class="main" v-show="!isLoading">
    <div class="banner">
      <img src="../../../../public/loginbg/banner.jpg" alt="" />
    </div>
    <div class="info">
      <p class="miniTitle">详细信息</p>
      
      <van-cell-group>
        <van-field
          v-model="info.siteName.name"
          readonly
          label="场所名称:"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="info.place"
          center
          readonly
          label="地点:"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="info.placeDel"
          center
          readonly
          clearable
          label="详细地址:"
          input-align="right"
        />
        <template #right-icon>
          <van-icon name="location" />
        </template>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="info.supervisionTime"
          center
          readonly
          label="督查时间:"
          input-align="right"
        />
      </van-cell-group>     
      <van-cell-group>
        <van-field
          name="uploader"
          readonly
          label="附件:"
          input-align="right"
        >
          <template #input>
            <span v-show="fileList.length == 0">无</span>
            <van-uploader
              v-show="fileList.length != 0"
              v-model="fileList"
              :max-count="fileList.length"
              capture="camera"
              accept=""
              @click-preview="downHandle"
            >
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="info.supervisionContent"
          center
          readonly
          label="督查内容:"
          input-align="right"
        />
      </van-cell-group>  
    </div>
    <van-button
      v-if="info.assessment == 0"
      type="primary"
      class="btn-sub"
      @click="update"
      >审核</van-button
    >
  </div>    
  </template>
    
    <script>
  import { ref, onMounted } from "vue";
  import siteInspectionService from "@/api/siteInspection/siteInspectionService";
  import UserManage from "@/api/user/UserManage";
  import { useRoute } from "vue-router";
  import $base from "@/utils/config";
  export default {
    setup() {
      // 导航栏颜色
      const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
      const onClickLeft = () => {
        history.back();
      };
      // 加载
      let isLoading = ref(true);
      // 活动信息
      const info = ref({     
        siteName:{id:'',name:""}
      });
      // 文件
      let fileList = ref([]);
      let route = useRoute();
      onMounted(() => {
        new siteInspectionService().queryById(route.query.id).then((data) => {
          info.value = data;

          info.value.enclosure.split("|").forEach((item) => {
            console.log(item);
            if (item.trim().length > 0) {
              // fileList.value.push({
              //   name: decodeURIComponent(
              //     item.substring(item.lastIndexOf("/") + 1)
              //   ),
              //   url: $base + item.replace('程序附件//','程序附件/'),
              // });


              fileList.value.push({
                file: {
                  name: decodeURIComponent(
                    item.substring(item.lastIndexOf("/") + 1)
                  ),
                },
                url: $base + item.replace("程序附件//", "程序附件/"),
              });

            }
          });
          isLoading.value = false;
        });
      });

      /**
     * 下载文件 网页端可用
     */
    const downHandle = (fileObj) => {
      if(!(fileObj.file.name.includes(".jpg")||fileObj.file.name.includes(".jpeg")||fileObj.file.name.includes(".png"))){
        // 声明a标签
        const aEle = document.createElement("a");
        // 设置下载文件名
        aEle.download = fileObj.file.name;
        // 下载地址
        aEle.href = fileObj.url;
        // 调用下载
        aEle.click();
      }
      
    };
      
      // 审核通过
      const update = () => {
        isLoading.value = true;
        info.value.assessment = 1;
        new siteInspectionService().save(info.value).then((res) => {

          isLoading.value = false;
          window.xm.showToast({
             message:"审核成功!"
          })
          history.back();
        });
      };
      return {
        // 导航栏颜色
        selectColor,
        onClickLeft,
        info,
        fileList,
        downHandle,
        isLoading,
        update,
      };
    },
  };
  </script>
    
  <style lang="less">
  .van-cell__value .van-field__right-icon .van-icon-location {
    color: #36a7f3 !important;
  }
  .btn-sub {
    width: 90%;
    border-radius: 20px;
    margin-left: 5%;
    margin-bottom: 40px;
    margin-top: -100px;
  }
  .van-loading {
    text-align: center;
    margin-top: 80px;
  }
  .van-popup--center {
    width: 98% !important;
  }
  </style>