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