ba_web/src/views/Training/SecurityTrainingVideo/components/detailForm.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">巡逻路线{{ title }}</span>
      <div>
        <el-button size="small" v-if="openType != 'detail'" @click="save" type="primary"  :loading="loading">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <FormMessage ref="FormRef" v-model="listQuery" :disabled="openType == 'detail'" :rules="rules" :formList="formList">
        <template #jwd>
          <div class="flex align-center ww100">
            <el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度"/>
            <el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度"/>
            <el-button type="primary" @click="changePoint">选择点位</el-button>
          </div>
        </template>
      </FormMessage>
      <div class="mapBox relative">
        <GdMap></GdMap>
      </div>
    </div>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/GdMap/index.vue";
import { qcckPost , qcckGet} from "@/api/qcckApi.js";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ref,defineProps, reactive,defineEmits,getCurrentInstance, onMounted } from 'vue';
import { color } from "echarts";
const emit = defineEmits(["refresh"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  dic: {
    type: Object,
    default: () => ({})
  }
});
const dialogForm = ref(false);
const title = ref('');
const FormRef = ref();
const loading = ref(false);
const listQuery = ref({});
const openType = ref("")
const rules = reactive({
  zsdMc: [{ required: true, message: "请输入值守点名称", trigger: "blur" }],
});
const formList = reactive([
  [
    { label: "值守点名称", prop: "zsdMc", type: "input" },
    { label: "所属辖区", prop: "ssbmdm", type: "department" },
  ],
  [
    { label: "地址", prop: "xxdz", type: "input"},
  ],
  [
    { label: "选择点位", prop: "jwd", type: "slot"},
  ],
])

// 获取数据
onMounted(()=>{
  emitter.on("coordString", (res => {
    if(res.type == 'point') {
      listQuery.value.jd = res.coord[0];
      listQuery.value.wd = res.coord[1];
      let icon = require('@/assets/point/zsd1.png');
      emitter.emit("showPoint", { coords: [{jd:res.coord[0],wd:res.coord[1]}], icon, flag: 'bxd'});
    }
  }))
})

// 初始化数据
const init = (type, id,) => {
  dialogForm.value = true;
   openType.value = type;
  title.value = type == "add" ? "新增" : "编辑";
  if(id) getDateById(id)
};

// 根据id获取数据
const getDateById = (id) =>{
  emitter.emit("deletePointArea", 'bxd');
  qcckGet({id}, `/mosty-jbld/jbldzsd/selectByid`).then((res) => {
    listQuery.value = res || {};
    if(res.jd && res.wd){
      let icon = require('@/assets/point/zsd1.png');
      emitter.emit("showPoint", { coords: [{jd:res.jd,wd:res.wd}], icon, flag: 'bxd'});
      emitter.emit("setMapCenter", { location: [res.jd,res.wd], zoomLevel:12});
    }
  })
}

// 选择点位
const changePoint = () =>{
  listQuery.value.jd = ''
  listQuery.value.wd = ''
  emitter.emit("removePlot", 'point');
  emitter.emit("deletePointArea", 'bxd');
  emitter.emit("drawShape", { type: 'point', flag: 'point'});
}

const save = () => {
  FormRef.value.submit(()=>{
    loading.value = true;
    let url = title.value == '新增' ? `/mosty-jbld/jbldzsd/add` : `/mosty-jbld/jbldzsd/update`;
    qcckPost(listQuery.value, url).then(() => {
      loading.value = false;
      proxy.$message.success("保存成功");
      emit("refresh");
      close();
    }).catch(() => {
      loading.value = false;
    })
  });
}

const close = () => {
  dialogForm.value = false;
  FormRef.value.reset()
};;

defineExpose({init})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
.mapBox{
  width: calc(100% - 24rem);
  height:500px;
  overflow: hidden;
  margin: 0 12rem;
}
</style>