HS_MZAP/src/views/activityMan/securityFacilitiesErr/securityFacilitiesErrView.vue

<template>
  <van-nav-bar
    title="信息上报中心"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="main">
    <p class="title">安防设施异常上报</p>
    <div class="formArea">
      <p class="miniTitle">基础信息</p>
      <van-cell-group>
        <van-field
          v-model="securityFacilitiesErr.siteName.name"
          readonly
          required
          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="securityFacilitiesErr.facilityTypename"
          center
          readonly
          required
          label="设施类型:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showLx = true"
        />
        <van-popup v-model:show="showLx" round position="bottom">
          <van-picker
            title="设施类型选择"
            :columns="facilityTypes"
            @cancel="showLx = false"
            @confirm="getfacilityType"
          />
        </van-popup>
      </van-cell-group>

      <van-cell-group v-if="securityFacilitiesErr.facilityType==''">        
        <van-field
          v-model="securityFacilitiesErr.facilityTypename"
          center
          readonly
          required
          label="位置:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
        />
      </van-cell-group>

      <van-cell-group v-if="securityFacilitiesErr.facilityType=='0'">
        <van-field
          v-model="securityFacilitiesErr.videoAudioPoint.name"
          readonly
          required
          label="音视频点位:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showVideoAudio = true"
        />
        <van-popup v-model:show="showVideoAudio" round position="bottom">
          <van-picker
            title="音视频点位选择"
            :columns="VideoAudios"
            :columns-field-names="customFieldName"
            @cancel="showVideoAudio = false"
            @confirm="setVideoAudios"
          />
        </van-popup>
      </van-cell-group>

      <van-cell-group  v-if="securityFacilitiesErr.facilityType=='1'">
        <van-field
          v-model="securityFacilitiesErr.siteFireProtection.name"
          readonly
          required
          label="消防点位:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showFireStation = true"
        />
        <van-popup v-model:show="showFireStation" round position="bottom">
          <van-picker
            title="消防点位选择"
            :columns="FireStations"
            :columns-field-names="customFieldName"
            @cancel="showFireStation = false"
            @confirm="setFireStations"
          />
        </van-popup>
      </van-cell-group>

      

      <van-cell-group>
        <van-field name="uploader" label="附件:">
          <template #input>
            <van-uploader>
              <van-button icon="plus">上传文件</van-button>
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <div class="rowTextArea">
          <van-field
            v-model="securityFacilitiesErr.abnormalContent"
            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 } from "vue";
import personList from "../personList.vue";
import securityFacilitiesErrService from "@/api/securityFacilitiesErr/securityFacilitiesErrService";
import tools from "@/api/sys/tools";
export default {
  components: { personList },
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    const securityFacilitiesErr = reactive({
      id: "",
      siteName: {
        id: "",
      },
      facilityType: "",
      videoAudioPoint:{
        id: "",
      },
      siteFireProtection:{
        id: "",
      },
      position: "",
      abnormalContent: "",
      //附件
      enclosure: "",
      state: "0",
      assessment: "0",
    });
    // 场所名称
    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 }) => {
      showPlace.value = false;
      securityFacilitiesErr.siteName = selectedOptions[0];
      //场所选择完成后刷新
      getVideoAudioList();
      getFireStationList();
    };
    //选择设施类型
    let showLx = ref(false);
    const facilityTypes = [{text:"监控、音频",value:"0"},{text:"消防设备",value:"1"}];
    const getfacilityType= ({ selectedOptions }) => {      
      securityFacilitiesErr.facilityType = selectedOptions[0].value;
      securityFacilitiesErr.facilityTypename = selectedOptions[0].text;
      getVideoAudioList();
      getFireStationList();
      showLx.value = false;
    };

    //选择视频音频点位
    let showVideoAudio = ref(false);
    let VideoAudios = ref([]);
    //同时选择好场所、设施类型后才获取视频列表
    const getVideoAudioList= () => {    
      if(securityFacilitiesErr.siteName.id!=""&&securityFacilitiesErr.facilityType=="0"){
        new tools()
        .videoPointList({
          current: 1,
          size: 10000,
          siteId: securityFacilitiesErr.siteName.id,
        })
        .then(({ records }) => {
          VideoAudios.value=records;
        });
      }
      
    };
    const setVideoAudios= ({ selectedOptions }) => {      
      securityFacilitiesErr.videoAudioPoint = selectedOptions[0];
      securityFacilitiesErr.position=selectedOptions[0].position;
      showVideoAudio.value = false;
    };
    
    
    //选择消防点位
    let showFireStation = ref(false);
    let FireStations = ref([]);
    //同时选择好场所、设施类型后才获取消防点位列表
    const getFireStationList= () => {    
      if(securityFacilitiesErr.siteName.id!=""&&securityFacilitiesErr.facilityType=="1"){
        new tools()
        .fireStationList({
          current: 1,
          size: 10000,
          siteId: securityFacilitiesErr.siteName.id,
        })
        .then(({ records }) => {
          FireStations.value=records;
        });
      }
      
    };
    const setFireStations= ({ selectedOptions }) => {      
      securityFacilitiesErr.siteFireProtection = selectedOptions[0];
      securityFacilitiesErr.position=selectedOptions[0].position;
      showFireStation.value = false;
    };

    // 提交数据
    const submit = () => {
      //添加保存前判断

      new securityFacilitiesErrService().save(securityFacilitiesErr).then((res) => {
        if(res.data=="保存安防设施异常成功"){
          window.xm.showToast({
             message:"保存成功!"
          })
          history.back();
        }

      });
    };
    return {
      securityFacilitiesErr,
      // 场所
      customFieldName,
      showPlace,
      places,
      getPlace,
      //设施类型选择
      showLx,
      facilityTypes,
      getfacilityType,
      //选择视频音频点位
      showVideoAudio,
      getVideoAudioList,
      VideoAudios,
      setVideoAudios,

      //选择消防点位
      showFireStation,
      getFireStationList,
      FireStations,
      setFireStations,
      
      // 返回
      onClickLeft,
      submit,
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  background: #fff;
}
.main p {
  height: 40px;
  line-height: 40px;
  color: #36a7f3;
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 20px;
  font-weight: 700;
  padding-left: 20px;
}
.miniTitle {
  font-size: 16px;
}
.formArea {
  padding: 0px 20px;
}
.formArea .van-cell-group .van-field__label {
  height: 40px;
}
.formArea .van-cell-group .van-cell {
  line-height: 40px;
}
.van-cell__value .van-field__right-icon .van-icon-location {
  color: #36a7f3 !important;
}
.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;
}
.subbtn {
  margin: 20px;
  text-align: center;
}
.subbtn .van-button {
  width: 40%;
  margin: 5px;
}
.van-uploader .van-button {
  border: none;
  color: #36a7f3;
  top: -4px;
}
.van-dialog {
  width: 80%;
  top: 50%;
}
</style>