'保安项目提交'
This commit is contained in:
esacpe
@ -0,0 +1,211 @@
|
||||
<!--
|
||||
* @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>
|
||||
Reference in New Issue
Block a user