392 lines
11 KiB
Vue
392 lines
11 KiB
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"
|
|
v-show="!disabledFoem"
|
|
>保存</el-button
|
|
>
|
|
<el-button size="small" @click="close">关闭</el-button>
|
|
</div>
|
|
</div>
|
|
<el-form
|
|
ref="elform"
|
|
:model="listQuery"
|
|
:rules="rules"
|
|
:inline="true"
|
|
:disabled="disabledFoem"
|
|
label-position="top"
|
|
>
|
|
<el-form-item prop="ssbmdm" label="所属部门">
|
|
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
|
</el-form-item>
|
|
<el-form-item prop="ssxqid" label="所属巡区">
|
|
<el-select v-model="listQuery.ssxqid">
|
|
<el-option
|
|
v-for="item in props.dic.D_XFTZ_XQLX"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="xfbmmc" label="走访对象">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.xfbmmc"
|
|
placeholder="请填写走访对象"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="xzqhdm" label="行政辖区">
|
|
<el-select v-model="listQuery.xzqhdm">
|
|
<el-option
|
|
v-for="item in props.dic.D_XFTZ_XZXQ"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="ssjdb" label="街道办">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.ssjdb"
|
|
placeholder="请填写街道办"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="sssq" label="社区">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.sssq"
|
|
placeholder="请填写社区"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="dwxz" label="走访对象类型">
|
|
<el-select v-model="listQuery.dwxz">
|
|
<el-option
|
|
v-for="item in props.dic.D_XFTZ_DWXZ"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="dwfzrxm" label="负责人姓名">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.dwfzrxm"
|
|
placeholder="请填写负责人姓名"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="dwfzrlxdh" label="负责人联系电话">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.dwfzrlxdh"
|
|
placeholder="请填写负责人联系电话"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="zbfwly" label="安保服务来源">
|
|
<el-select v-model="listQuery.zbfwly">
|
|
<el-option
|
|
v-for="item in props.dic.D_DWGL_ABFWLY"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="abfzrzxm" label="安保负责人姓名">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.abfzrzxm"
|
|
placeholder="请填写安保负责人姓名"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="abfzrzdh" label="安保负责人电话">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.abfzrzdh"
|
|
placeholder="请填写安保负责人电话"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="bars" label="网格员/保安人数">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
type="number"
|
|
v-model="listQuery.bars"
|
|
placeholder="请填写网格员/保安人数"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="dwdz" label="地址">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
v-model="listQuery.dwdz"
|
|
placeholder="请填写详细地址：区、街道、路、门牌号"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="jd" label="经度">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
type="number"
|
|
v-model="listQuery.jd"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="wd" label="纬度">
|
|
<el-input
|
|
style="width: 100%"
|
|
clearable
|
|
type="number"
|
|
v-model="listQuery.wd"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="width: 100%">
|
|
<template #label>
|
|
经纬度
|
|
<el-button type="pramary" @click="chackLat">坐标</el-button></template
|
|
>
|
|
</el-form-item>
|
|
|
|
<div style="width: 35%; height: 360px"><GdMap /></div>
|
|
<el-form-item label="走访照片" style="width: 100%">
|
|
<MOSTY.Upload
|
|
width="800px"
|
|
:limit="3"
|
|
v-model="listQuery.xfzp"
|
|
></MOSTY.Upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<ChooseUser
|
|
v-if="chooseUserVisible"
|
|
v-model="chooseUserVisible"
|
|
titleValue="选择负责人"
|
|
:roleIds="hasChooseFzr"
|
|
@choosedUsers="hanlderChoose"
|
|
></ChooseUser>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
|
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,
|
|
defineProps,
|
|
getCurrentInstance
|
|
} from "vue";
|
|
const { proxy } = getCurrentInstance();
|
|
const emits = defineEmits(["updateChange"]);
|
|
const imgList = ref([]);
|
|
const urlImg = ref("/bagl/mosty-base/minio/image/download/");
|
|
const props = defineProps({
|
|
dic: { type: Object, default: {} }
|
|
});
|
|
const fileList = ref([]);
|
|
const xflxList = ref([
|
|
{ label: "巡访类型1", value: "01" },
|
|
{ label: "巡访类型2", value: "02" }
|
|
]);
|
|
const chooseUserVisible = ref(false); //负责人弹窗
|
|
const hasChooseFzr = ref([]); //已经选胡负责人
|
|
const hasChooseMj = ref([]); //已经选胡民警
|
|
|
|
const title = ref("新增巡访台账");
|
|
const disabledFoem = ref(false); //表单禁用
|
|
const dialogForm = ref(false); //弹窗
|
|
const xfzy = ref([]);
|
|
const listQuery = ref({}); //表单
|
|
const loading = ref(false);
|
|
const elform = ref();
|
|
const rules = reactive({
|
|
ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
|
|
dwxz: [{ required: true, message: "请选择单位性质", trigger: "change" }],
|
|
dwfzrxm: [{ required: true, message: "请输入负责人姓名", trigger: "change" }],
|
|
dwfzrlxdh: [
|
|
{ required: true, message: "请输入负责人联系电话", trigger: "change" }
|
|
],
|
|
abfzrzxm: [
|
|
{ required: true, message: "请输入安保负责人姓名", trigger: "change" }
|
|
],
|
|
abfzrzdh: [
|
|
{ required: true, message: "请输入安保负责人电话", trigger: "change" }
|
|
],
|
|
bars: [
|
|
{ required: true, message: "请输入网格员/保安人数", trigger: "change" }
|
|
],
|
|
ssxqid: [{ required: true, message: "请输入所属巡区", trigger: "change" }],
|
|
xfbmmc: [{ required: true, message: "请输入巡防部门", trigger: "change" }],
|
|
xzqhdm: [{ required: true, message: "请选择行政辖区", trigger: "change" }],
|
|
dwdz: [{ required: true, message: "请输入地址", trigger: "change" }]
|
|
});
|
|
|
|
//选择用户负责人
|
|
const hanlderChoose = (users) => {
|
|
const user = users[0];
|
|
hasChooseFzr.value = [user.id];
|
|
listQuery.value.xfzz = user.userName;
|
|
};
|
|
onMounted(() => {
|
|
emitter.on("coordString", (res) => {
|
|
if (res.type === "point") {
|
|
listQuery.value.jd = res.coord[0];
|
|
listQuery.value.wd = res.coord[1];
|
|
}
|
|
});
|
|
});
|
|
|
|
// 初始化数据
|
|
const init = (type, id) => {
|
|
dialogForm.value = true;
|
|
listQuery.value.xfzp = [];
|
|
if (type == "add") {
|
|
disabledFoem.value = false;
|
|
title.value = "新增巡访台账";
|
|
} else if (type == "edit") {
|
|
disabledFoem.value = false;
|
|
title.value = "修改巡访台账";
|
|
} else {
|
|
disabledFoem.value = true;
|
|
title.value = "巡访台账详情";
|
|
}
|
|
if (id) {
|
|
getDataById(id); //根据id查询详情
|
|
}
|
|
};
|
|
// 根据id查询详情
|
|
const getDataById = (id) => {
|
|
qcckGet({ id }, "/mosty-jmxf/xftz/selectById").then((res) => {
|
|
listQuery.value = JSON.parse(JSON.stringify(res));
|
|
listQuery.value.xfzp = listQuery.value.xfzp
|
|
? listQuery.value.xfzp.split(",")
|
|
: [];
|
|
});
|
|
};
|
|
|
|
//获取经纬度
|
|
function chackLat(type) {
|
|
emitter.emit("drawShape", { type: "point", flag: "point", isclear: true });
|
|
listQuery.value.jd = "";
|
|
listQuery.value.wd = "";
|
|
}
|
|
// 提交
|
|
const submit = () => {
|
|
elform.value.validate((valid) => {
|
|
if (!valid) return false;
|
|
if (valid) {
|
|
loading.value = true;
|
|
if (listQuery.value.xfzp && Array.isArray(listQuery.value.xfzp))
|
|
listQuery.value.xfzp = listQuery.value.xfzp.join(",");
|
|
if (listQuery.value.id) {
|
|
qcckPost(listQuery.value, "/mosty-jmxf/xftz/updateEntity")
|
|
.then((res) => {
|
|
proxy.$message({
|
|
type: "success",
|
|
message: "修改成功"
|
|
});
|
|
dialogForm.value = false;
|
|
emits("updateChange");
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
} else {
|
|
qcckPost(listQuery.value, "/mosty-jmxf/xftz/addEntity")
|
|
.then((res) => {
|
|
proxy.$message({
|
|
type: "success",
|
|
message: "新增成功"
|
|
});
|
|
dialogForm.value = false;
|
|
emits("updateChange");
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
// 关闭
|
|
const close = () => {
|
|
listQuery.value = { sfzh: "" };
|
|
dialogForm.value = false;
|
|
};
|
|
defineExpose({ init });
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
@import "~@/assets/css/layout.scss";
|
|
@import "~@/assets/css/element-plus.scss";
|
|
.photosBox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.photosItem {
|
|
width: 98px;
|
|
height: 130px;
|
|
margin-right: 10px;
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.dzBox {
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
.dzItem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
.text {
|
|
width: 45%;
|
|
}
|
|
}
|
|
}
|
|
.mapBox {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
.ipt {
|
|
border: 1px solid rgb(7, 85, 188);
|
|
width: 100%;
|
|
line-height: 32px;
|
|
min-height: 32px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
background: #001238;
|
|
}
|
|
</style>
|