HS_MZAP/src/views/activityMan/siteInspection/siteInspectionView.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="formArea">
      <!-- <p class="miniTitle">基础信息</p> -->
      <van-cell-group>
        <van-field
          v-model="siteInspection.siteName.name"
          readonly
          required
          center
          label="场所名称:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showPlace = true"
        />
        <van-popup v-model:show="showPlace" round position="bottom">
          <van-picker
            title="场所选择"
            :columns="places"
            :columns-field-names="customFieldName"
            @cancel="showPlace = false"
            @confirm="getPlace"
          />
        </van-popup>
      </van-cell-group>

      <van-cell-group>
        <van-field
          v-model="siteInspection.place"
          center
          readonly
          label="地点:"
          placeholder="请填写地点"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model:show="showArea" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="showArea = false"
            @finish="onFinish"
            :field-names="fieldNames"
          />
        </van-popup>
      </van-cell-group>

      <!-- <van-cell-group>
        <van-field
          v-model="siteInspection.placeDel"
          center
          label="详细地点:"
          placeholder="请填写详细地点"
          input-align="right"
          right-icon="location"
        />
      </van-cell-group> -->
	  
	  <van-cell-group>
	    <van-field v-model="siteInspection.placeDel" center label="详细地址:" placeholder="请填写具体地址" input-align="right">
	      <template #right-icon>
	        <van-icon name="location" @click="getLocation" />
	      </template>
	    </van-field>
	  </van-cell-group>
	  
      <van-cell-group>
        <van-field
          v-model="siteInspection.supervisionTime"
          center
          readonly
          label="督查时间:"
          placeholder="请选择督查时间"
          input-align="right"
          right-icon="arrow-down"
          @click="showAct = true"
        />
        <van-popup v-model:show="showAct" round position="bottom">
          <van-picker-group
            title="督查时间"
            :tabs="['选择日期', '选择时间']"
            next-step-text="下一步"
            @confirm="getTime"
            @cancel="showAct = false"
          >
            <van-date-picker v-model="currentDate" />
            <van-time-picker v-model="currentTime" :columns-type="columnsType" />
          </van-picker-group>
        </van-popup>
      </van-cell-group>

      <van-cell-group>
        <van-field name="uploader" label="附件:">
          <template #input>

            <!-- <van-uploader
              :after-read="afterRead"
              v-model="fileList"
              :max-count="6"
              capture="camera"
              accept=""
              :before-delete="fjdelete"
            >
              <van-button icon="plus">上传文件</van-button>
            </van-uploader> -->

            <van-uploader readonly v-model="fileList" :max-count="5" accept="" :preview-full-image="false"
              :before-delete="deleteRead" @click-upload="chooseImg">
              <van-button>上传文件</van-button>
            </van-uploader>


          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group>
        <div class="rowTextArea">
          <van-field
            v-model="siteInspection.supervisionContent"
            center
            rows="2"
            type="textarea"
            label="督查内容:"
            label-align="top"
          />
        </div>
      </van-cell-group>
    </div>
    <div class="subbtn">
      <van-button type="primary" @click="submit">提交</van-button>
      <van-button type="default" hairline>取消</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, ref , onMounted} from "vue";
import personList from "../personList.vue";
import siteInspectionService from "@/api/siteInspection/siteInspectionService";
import { useRoute } from "vue-router";
import tools from "@/api/sys/tools";
// 图片路径
import $base from "@/utils/config";
export default {
  components: { personList },
  setup() {
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    const onClickLeft = () => {
      history.back();
    };
    const siteInspection = ref({
      id: "",
      siteName: {
        id: "",
      },
      place: "",
      placeDel: "",
      supervisionTime: "",
      supervisionContent: "",
      //附件
      enclosure: "",
      state: "0",
      assessment: "0",
    });

    // 根据路由初始化
    let route = useRoute();
    onMounted(() => {
      if (route.query.id) {
        new siteInspectionService().queryById(route.query.id).then((data) => {
          siteInspection.value = data;    
          //附件处理      
          siteInspection.value.enclosure.split("|").forEach((item) => {
            if (item.trim().length > 0) {
              fileList.value.push({
                name: decodeURIComponent(
                  item.substring(item.lastIndexOf("/") + 1)
                ),
                url: $base + item.replace('程序附件//','程序附件/'),
              });
              fileupList.value.push({
                name: decodeURIComponent(
                  item.substring(item.lastIndexOf("/") + 1)
                ),
                url: item,
              });
            }
          });

        });
      }
    });

    // 场所名称
    let places = ref([]);
    const customFieldName = {
      text: "name",
      value: "id",
    };
    new tools()
      .placeList({
        current: 1,
        size: 10000,
      })
      .then(({ records }) => {
        places.value.push(...records);
      });
    let showPlace = ref(false);
    const getPlace = ({ selectedOptions }) => {
      if(selectedOptions[0]!=undefined&&selectedOptions[0]!=null){ 
        showPlace.value = false;
        siteInspection.value.siteName = selectedOptions[0];
        siteInspection.value.place = selectedOptions[0].placeSelectName
      }
    };
    // 获取督查时间
    let showAct = ref(false);
    let currentDate = ref(["" + new Date().getFullYear(), "01", "01"]);
    let currentTime = ref(["00", "00"]);
    const columnsType = ['hour', 'minute', 'second'];
    const getTime = () => {
      showAct.value = false;
      siteInspection.value.supervisionTime = `${currentDate.value.join(
        "-"
      )} ${currentTime.value.join(":")}`;
    };
    let list = {
      value: [],
      type: "",
    };

    // 地区选择
    let showArea = ref(false);
    const cascaderValue = ref("");
    const fieldNames = {
      text: "name",
      value: "code",
      children: "children",
    };
    // 选项列表，children 代表子选项，支持多级嵌套
    let options = ref([]);
    new tools().treeData().then((res) => {
      options.value.push(res[0]);
    });
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      if(selectedOptions[0]!=undefined&&selectedOptions[0]!=null){ 
        showArea.value = false;
        siteInspection.value.place = selectedOptions
          .map((option) => option.name)
          .join("/");
      }
    };
    // 文件上传
    let fileList = ref([]);
    let fileupList = ref([]);
    const chooseImg = () => {
      xm.chooseFile({
        count: 1,
        name: "file",
        url: $base + `/sys/file/webupload/upload?uploadPath=csjcqk/siteInspection`,
        headers: { 'Content-Type': 'multipart/form-data', "token": window.localStorage.getItem('MZ_TOKEN') },
      }).then(res => {
        let data = res[0].data
        data.name = decodeURIComponent(
          data.id.substring(data.url.lastIndexOf("/") + 1)
        );
        data.url = $base + data.url;
        fileupList.value.push(data);
        fileList.value.push(data)
      })
    }

    // const afterRead = (file) => {
    //   // 此时可以自行将文件上传至服务器
    //   new tools()
    //     .uploadFile(file, `csjcqk/siteInspection`)
    //     .then(({ data }) => {
    //       console.log(data);
    //       data.name = decodeURIComponent(
    //         data.url.substring(
    //           data.url.lastIndexOf("/") + 1
    //         )
    //       );

    //       //data.url = `${$base}` + data.url;    
    //       fileupList.value.push(data);

    //     });
    // };

    // 删除文件
    const deleteRead = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if (file.id == fileList.value[index].id) {
          fileList.value.splice(index, 1);
          if (fileupList.value[index]) {
            let delurl = fileupList.value[index].url;
            new tools().uploadFiledelete("", delurl).then(({ data }) => { });
            fileupList.value.splice(index, 1);
          }
        }
      }
    };

    // const fjdelete = (file) => {
    //   //删除文件操作
    //   for (let index = 0; index < fileList.value.length; index++) {
    //     if(file.file==fileList.value[index].file){
    //       let delurl=fileupList.value[index].url;                   
    //       new tools()
    //         .uploadFiledelete("", delurl)
    //         .then(({ data }) => {
    //       });
    //       fileupList.value.splice(index,1);
    //       fileList.value.splice(index,1); 
    //     }        
    //   }      
    // };
    
	const getLocation = () => {
	  xm.getLocation().then(data => {
	    siteInspection.value.placeDel = data.POIName;
	  })
	}
	
    // 提交数据
    const submit = () => {
      //添加保存前判断
      if(siteInspection.value.siteName.id==""){
        window.xm.showToast({
          message:"请先选择场所信息!"
        })
      }else{

        //保存前附件处理
        siteInspection.value.enclosure = fileupList.value.map((option) => option.id).join("|");
        new siteInspectionService().save(siteInspection.value).then((res) => {
          if(res.data=="保存场所检查情况成功"){
            window.xm.showToast({
              message:"保存成功!"
            })
            history.back();
          }
        });

      }
      
    };
    return {
      // 导航栏颜色
      selectColor,
      siteInspection,
      // 场所
      customFieldName,
      showPlace,
      places,
      getPlace,
      // 时间
      showAct,
      currentDate,
      currentTime,
      columnsType,
      getTime,
      // 返回
      onClickLeft,
      // 地区选择
      showArea,
      fieldNames,
      options,
      onFinish,
      cascaderValue,
	  
	  getLocation,
      // 文件上传
      chooseImg,
      fileList,
      fileupList,
      deleteRead,
      submit,
    };
  },
};
</script>

<style scoped>
.van-cell__value .van-field__right-icon .van-icon-location {
  color: #36a7f3 !important;
}
.van-uploader .van-button {
  border: none;
  color: #36a7f3;
  top: -4px;
}
.van-dialog {
  width: 80%;
  top: 50%;
}
.van-loading {
  text-align: center;
  margin-top: 80px;
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}


.rowTextArea::v-deep .van-field__value {
  width: 94%;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}
.rowTextArea::v-deep .van-cell {
  display: flow-root;
}
</style>