ba_web/src/views/backOfficeSystem/basicsmanage/patrol-qc/components/editAddForm.vue

<!--
 * @Author: your name
 * @Date: 2024-01-25 16:21:46
 * @LastEditTime: 2024-01-26 10:10:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
-->
<template>
    <div class="dialog" v-if="dialogForm">
        <div class="head_box">
          <span class="title">{{ title }}</span>
          <div>
              <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
              <el-button size="small" @click="close">关闭</el-button>
          </div>
        </div>
        <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
          <el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
          <MOSTY.Department
            width="100%"
            clearable
            v-model="listQuery.ssbmdm"
            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
          />
          </el-form-item>
          <el-form-item style="width: 48%" prop="qcmc" label="圈层名称">
            <el-input v-model="listQuery.qcmc" placeholder="请输入圈层名称" style="width: 100%" clearable/>
          </el-form-item>
          <el-form-item style="width: 48%" prop="qclx" label="圈层类型">
            <el-select v-model="listQuery.qclx" placeholder="请选择圈层类型">
              <el-option v-for="dict in props.dic.D_BZ_QCLX" :key="dict.value" :value="dict.value" :label="dict.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 48%" prop="qcjb" label="圈层级别">
            <el-select v-model="listQuery.qcjb" placeholder="请选择圈层级别">
              <el-option v-for="dict in props.dic.D_BZ_QCDJ" :key="dict.value" :value="dict.value" :label="dict.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="width: 100%">
            <el-input v-model="listQuery.bz" placeholder="请输入备注" style="width: 100%"  clearable/>
          </el-form-item>
          <el-form-item label="关联检查站" style="width: 100%" @click="jczVisible = true">
            <el-input
              v-model="listQuery.jczList"
              placeholder="请选择关联检查站"
              style="width: 100%"
              clearable
              readonly
              suffix-icon="ArrowDown"
              v-if="listQuery.jczList == null || listQuery.jczList.length <= 0"
            />
            <MOSTY.GljczTable v-model="listQuery.jczList" v-else/>
          </el-form-item>
          <el-form-item label="圈层颜色" style="width: 10%" prop="qcys">
            <el-color-picker v-model="listQuery.qcys"></el-color-picker>
          </el-form-item>
          <el-form-item style="width: 85%" prop="zbList" label="坐标位置">
            <div class="latlng">
              <el-input v-model="listQuery.zbList" clearable style="width: 90%" @blur="handleBlur" />
              <el-button @click="chackLat">绘制区域</el-button>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%">
            <div class="mapBox"><GdMap/></div>
        </el-form-item>
        </el-form>

      <JczLoad v-model="jczVisible" titleValue="选择检查站" @choosedJcz="choosedJcz" :data="listQuery.jczList" />
    </div>
</template>

<script setup>
import {choseRbgb} from '@/utils/tools.js'
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
import JczLoad from "@/components/MyComponents/ChooseJz/jczLoad.vue";
import { spliceArray, spliceString } from "@/utils/auth.js";
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
import { IdCard } from "@/utils/validate.js";
import Person from "@/assets/images/default_male.png";
import GdMap from "@/components/GdMap/index.vue";
import emitter from "@/utils/eventBus.js";
import { ref,defineExpose, reactive, onMounted,defineEmits,getCurrentInstance } from 'vue';
const props = defineProps({
  dic:Object
})
const { proxy } = getCurrentInstance();
const emit = defineEmits(["updateDate"]);
const dialogForm = ref(false) //弹窗
const  xfzy = ref([])
const listQuery = ref({qcys:'#409eff'}) //表单
const loading = ref(false)
const elform = ref()
const title = ref('')
const jczVisible = ref(false);
const rules = reactive({
  qcmc: [{ required: true, message: "请输入巡防区名称", trigger: "change" }],
})
const mapType = ref(""); //地图绘制对象

onMounted(()=>{
  emitter.on("coordString", (res) => {
    if (res.type === "polygon") listQuery.value.zbList = res.coord[0];
  });
})

// 初始化数据
const init = (type,row)=> {
  dialogForm.value = true
  title.value = row ? '编辑圈层':'新增圈层'
  if(row) getDataById(row)
}
// 根据id查询详情
const getDataById = (row)=>{
  qcckGet({ id: row.id }, "/mosty-jmxf/qc/selectById").then(async (res) => {
    listQuery.value = res;
    if (res.jczList) {
      listQuery.value.jczidList = res.jczList.map((item) => { return item.id; });
      listQuery.value.jczList = res.jczList;
    }
    //如果是自定义绘制的圈层
    if (res.zbList && res.zbList.length > 0) {
      setTimeout(()=>{
       let obj = { position:[res.zbList], text:res.xfqMc, id:res.id }
       let ys = res.qcys ? choseRbgb(res.qcys,0.5) : 'rgba(29,237,245,0.6)' //全部按照类型区分颜色 , 二机撒随机颜色
        emitter.emit("echoPlane", { coords: [obj],color:ys,linecolor:ys, flag: "qc",  type:'polygon' });
        emitter.emit("setMapCenter", { location: res.zbList[0], zoomLevel: 10  });
      },500)
    }
  });
}

// 失去焦點會先
const handleBlur = () =>{
  if(listQuery.value.zbList && !Array.isArray(listQuery.value.zbList)){
    let att = listQuery.value.zbList.split(',')
    let coods = [],newAtt = []
    att.forEach((iv,idx)=>{
      newAtt.push(iv)
      let index = idx + 1
      if(index%2 == 0){
        coods.push(newAtt)
        newAtt = []
      }
    })
    listQuery.value.zbList = coods
    let ys = listQuery.value.qcys ? choseRbgb(listQuery.value.qcys,0.3) : 'rgba(29,237,245,0.3)' //全部按照类型区分颜色 , 二机撒随机颜色
    let obj = { position:[coods], text:'', id:'' }
    emitter.emit("echoPlane", { coords: [obj],color:ys,linecolor:ys, flag: "qc",  type:'polygon' });
    emitter.emit("setMapCenter", { location: coods[0], zoomLevel: 10  });

  }
}

//获取经纬度
const chackLat = (type) => {
  let ys = choseRbgb(listQuery.value.qcys,0.5)
  let linecolor = listQuery.value.qcys
  emitter.emit("drawShape", { type: "polygon", flag: "qc",color:ys,linecolor,isclear:true });
  listQuery.value.zbList = "";
}

// 提交
const submit = ()=>{
  elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    let url = title.value == '新增圈层'? '/mosty-jmxf/qc/addQc':'/mosty-jmxf/qc/updateQc'
    let text =title.value == '新增圈层'? '新增成功':'编辑成功'
    qcckPost(listQuery.value,url).then(() => {
      proxy.$message({ type: "success", message: text });
      close()
      emit("updateDate");
    }).catch(()=>{
      loading.value = false;
    });
  });
}
// 关闭
const close = ()=>{
  listQuery.value = { qcys :'#409eff'}
  dialogForm.value = false;
  loading.value = false;
}
// 选择检查站
const choosedJcz = (arr) => {
  listQuery.value.jczList = arr;
  listQuery.value.jczidList = arr.map((v) => {
    return v.id;
  });
}

defineExpose({init});
</script>

<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.mapBox{
  width: 100%;
  height: 600px;
}

.latlng {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>