'保安项目提交'
This commit is contained in:
esacpe
@ -0,0 +1,637 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2022-11-01 14:39:19
|
||||
* @LastEditTime: 2022-11-01 16:48:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \rsga\src\views\service\shifTscheduling\index\downXlsx.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
title="导出"
|
||||
width="800px"
|
||||
:model-value="modelValue"
|
||||
@close="closed"
|
||||
>
|
||||
<el-form ref="elform" :model="listQuery" :inline="true">
|
||||
<el-form-item prop="ssbmdm" label="单位归属">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="走访民警">
|
||||
<el-input
|
||||
v-model="listQuery.xfmj"
|
||||
placeholder="请输入走访民警"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="起止时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.time"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:shortcuts="shortcuts"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="closed">关闭</el-button>
|
||||
<el-button type="primary" @click="onSearch">导出</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import * as XLSX from "xlsx";
|
||||
import { defineProps, ref, onMounted, reactive, getCurrentInstance } from "vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as Exceljs from "exceljs";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XFLX, D_BZ_RWZT, D_ZFNR_MBLX, D_XFTZ_DWXZ } = proxy.$dict(
|
||||
"D_BZ_XFLX",
|
||||
"D_BZ_RWZT",
|
||||
"D_ZFNR_MBLX",
|
||||
"D_XFTZ_DWXZ"
|
||||
);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
},
|
||||
dic: { type: Object, default: {} }
|
||||
});
|
||||
|
||||
const listQuery = ref({
|
||||
ssbmdm: "",
|
||||
xflx: "",
|
||||
zdmc: "",
|
||||
xfdw: "",
|
||||
xfmj: "",
|
||||
rwzt: "",
|
||||
time: []
|
||||
});
|
||||
const onSearch = (val) => {
|
||||
seletListDC();
|
||||
};
|
||||
const emits = defineEmits(["update:modelValue"]);
|
||||
const closed = () => {
|
||||
listQuery.value = {
|
||||
ssbmdm: "",
|
||||
xflx: "",
|
||||
zdmc: "",
|
||||
xfdw: "",
|
||||
xfmj: "",
|
||||
rwzt: "",
|
||||
time: []
|
||||
};
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const loading = ref(false);
|
||||
const seletListDC = () => {
|
||||
console.log(listQuery.value.time);
|
||||
proxy.$confirm("确定要导出列表数据", "警告", { type: "warning" }).then(() => {
|
||||
let pramas = {
|
||||
ssbmdm: listQuery.value.ssbmdm,
|
||||
xflx: listQuery.value.xflx,
|
||||
zdmc: listQuery.value.zdmc,
|
||||
xfdw: listQuery.value.xfdw,
|
||||
xfmj: listQuery.value.xfmj,
|
||||
rwzt: listQuery.value.rwzt,
|
||||
kssj: listQuery.value.time ? listQuery.value.time[0] : "",
|
||||
jssj: listQuery.value.time ? listQuery.value.time[1] : ""
|
||||
};
|
||||
loading.value = true;
|
||||
pramas.xflx = pramas.xflx ? pramas.xflx[1] : "";
|
||||
delete pramas.daterange;
|
||||
|
||||
ams(pramas);
|
||||
// qcckGet(pramas, "/mosty-jmxf/tbJcglXf/seletList")
|
||||
// .then((res) => {
|
||||
|
||||
// proxy.$message({ type: "success", message: "导出成功" });
|
||||
// closed();
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log(err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
};
|
||||
const ams = async (pramas) => {
|
||||
try {
|
||||
const res = await qcckGet(pramas, "/mosty-jmxf/tbJcglXf/seletList");
|
||||
await Dc(res);
|
||||
} catch {
|
||||
} finally {
|
||||
proxy.$message({ type: "success", message: "导出成功" });
|
||||
closed();
|
||||
}
|
||||
};
|
||||
const urlImg = ref("/mosty-base/minio/image/download/");
|
||||
const showMc = (val, vale) => {
|
||||
const stack = [...val];
|
||||
while (stack.length) {
|
||||
const item = stack.pop();
|
||||
if (item.dm == vale) {
|
||||
return item.label;
|
||||
} else {
|
||||
stack.push(...item.children);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const Dc = async (arr) => {
|
||||
try {
|
||||
const workbook = new Exceljs.Workbook();
|
||||
const sheeh = workbook.addWorksheet("警务协同工作统计表");
|
||||
const ddjb = workbook.addWorksheet("“大队级”巡访工作统计表");
|
||||
const zdjb = workbook.addWorksheet("“中队级、巡组级”巡访工作统计表");
|
||||
|
||||
let tableTitle = [
|
||||
{
|
||||
header: "时间",
|
||||
key: "time",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "大队名称",
|
||||
key: "ddmc",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "走访领导",
|
||||
key: "zfld",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "职务",
|
||||
key: "ldzw",
|
||||
width: 10
|
||||
},
|
||||
{
|
||||
header: "行政辖区",
|
||||
key: "xzxq",
|
||||
width: 25
|
||||
},
|
||||
{
|
||||
header: "巡区网格",
|
||||
key: "xqwg",
|
||||
width: 15
|
||||
},
|
||||
{
|
||||
header: "无警巡访类型",
|
||||
key: "wjxflx",
|
||||
width: 20
|
||||
},
|
||||
{
|
||||
header: "工作对接单位",
|
||||
key: "gzdjdw",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "地址",
|
||||
key: "xfdz",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "隶属单位",
|
||||
key: "lsdw",
|
||||
width: 30
|
||||
},
|
||||
|
||||
{
|
||||
header: "对接工作领导",
|
||||
key: "djld",
|
||||
width: 20
|
||||
},
|
||||
{
|
||||
header: "职务",
|
||||
key: "djldzw",
|
||||
width: 15
|
||||
},
|
||||
{
|
||||
header: "座谈交流内容",
|
||||
key: "ztjlnr",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "落实情况和取得成效",
|
||||
key: "qkcx",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "下步工作计划",
|
||||
key: "xbgzjh",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "其他",
|
||||
key: "qt",
|
||||
width: 60
|
||||
}
|
||||
];
|
||||
let ddtableTitle = [
|
||||
{
|
||||
header: "时间",
|
||||
key: "time",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "大队",
|
||||
key: "ddmc",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "走访领导",
|
||||
key: "zfld",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "职务",
|
||||
key: "ldzw",
|
||||
width: 10
|
||||
},
|
||||
{
|
||||
header: "行政辖区",
|
||||
key: "xzxq",
|
||||
width: 20
|
||||
},
|
||||
{
|
||||
header: "巡区网格",
|
||||
key: "xqwg",
|
||||
width: 15
|
||||
},
|
||||
{
|
||||
header: "走访对象",
|
||||
key: "zfdx",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "地址",
|
||||
key: "xfdz",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "走访对象类别",
|
||||
key: "zfdxlb",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "负责人",
|
||||
key: "fzr",
|
||||
width: 30
|
||||
},
|
||||
|
||||
{
|
||||
header: "联系电话",
|
||||
key: "lxdh",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "座谈交流内容",
|
||||
key: "ztjlnr",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "落实情况和取得成效",
|
||||
key: "qkcx",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "下步工作计划",
|
||||
key: "xbgzjh",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "其他",
|
||||
key: "qt",
|
||||
width: 60
|
||||
}
|
||||
];
|
||||
let zdtableTitle = [
|
||||
{
|
||||
header: "时间",
|
||||
key: "time",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "大队",
|
||||
key: "ddmc",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "巡访民警",
|
||||
key: "xfmj",
|
||||
width: 30
|
||||
},
|
||||
|
||||
{
|
||||
header: "行政辖区",
|
||||
key: "xzxq",
|
||||
width: 20
|
||||
},
|
||||
{
|
||||
header: "巡区网格",
|
||||
key: "xqwg",
|
||||
width: 15
|
||||
},
|
||||
{
|
||||
header: "走访对象",
|
||||
key: "zfdx",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "走访对象类别",
|
||||
key: "zfdxlb",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "地址",
|
||||
key: "xfdz",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "负责人",
|
||||
key: "fzr",
|
||||
width: 30
|
||||
},
|
||||
|
||||
{
|
||||
header: "联系电话",
|
||||
key: "lxdh",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "安保负责人",
|
||||
key: "abfzr",
|
||||
width: 30
|
||||
},
|
||||
|
||||
{
|
||||
header: "联系电话",
|
||||
key: "abfzrlxdh",
|
||||
width: 30
|
||||
},
|
||||
{
|
||||
header: "安保服务来源",
|
||||
key: "abfwly",
|
||||
width: 30
|
||||
},
|
||||
|
||||
{
|
||||
header: "网格员数量/安保数量",
|
||||
key: "absl",
|
||||
width: 15
|
||||
},
|
||||
{
|
||||
header: "走访工作内容",
|
||||
key: "zfnr",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "社情（风险隐患线索信息）",
|
||||
key: "sq",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "民意（人民群众意见建议）",
|
||||
key: "my",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "工作措施",
|
||||
key: "gzcs",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "工作成效",
|
||||
key: "gzcx",
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
header: "回访情况",
|
||||
key: "hfqk",
|
||||
width: 60
|
||||
}
|
||||
];
|
||||
sheeh.columns = tableTitle;
|
||||
ddjb.columns = ddtableTitle;
|
||||
zdjb.columns = zdtableTitle;
|
||||
|
||||
for (const prodec of arr) {
|
||||
let xflxmc = showMc(D_BZ_XFLX.value, prodec.xflx);
|
||||
let listZf = JSON.parse(prodec.xfdw).map((item) => item);
|
||||
let xfzy = JSON.parse(prodec.xfzy).map((item) => item.xm);
|
||||
if (prodec.zfxl && prodec.zfxl.slice(0, 1) == 1) {
|
||||
const row = sheeh.addRow({
|
||||
time: prodec.xfsj,
|
||||
ddmc: prodec.ssbm,
|
||||
zfld: prodec.xfzzXm,
|
||||
ldzw: "",
|
||||
xzxq: listZf.length > 0 ? listZf[0].xzqh : "",
|
||||
xqwg: listZf.length > 0 ? listZf[0].ssxqmc : "",
|
||||
wjxflx: xflxmc,
|
||||
gzdjdw: listZf.length > 0 ? listZf[0].xfbmmc : "",
|
||||
xfdz: listZf.length > 0 ? listZf[0].dwdz : "",
|
||||
lsdw: listZf.length > 0 ? listZf[0].ssbm : "",
|
||||
djld: listZf.length > 0 ? listZf[0].dwfzrxm : "",
|
||||
djldzw: "",
|
||||
ztjlnr: prodec.xtjlnr ? prodec.xtjlnr : prodec.xfgznr,
|
||||
qkcx: prodec.xtqdcx ? prodec.xtqdcx : prodec.sq,
|
||||
xbgzjh: prodec.xbgzjh ? prodec.xbgzjh : prodec.my,
|
||||
qt: prodec.qt ? prodec.qt : prodec.gzcs
|
||||
});
|
||||
// if (img) {
|
||||
// await addImg(workbook, sheeh, urlImg.value + img[0], row.number, 19);
|
||||
// }
|
||||
} else if (prodec.zfxl && prodec.zfxl.slice(0, 2) == 21) {
|
||||
console.log(prodec.zfxl.slice(0, 2));
|
||||
const row = ddjb.addRow({
|
||||
time: prodec.xfsj,
|
||||
ddmc: prodec.ssbm,
|
||||
zfld: prodec.xfzzXm,
|
||||
ldzw: "",
|
||||
xzxq: listZf.length > 0 ? listZf[0].xzqh : "",
|
||||
xqwg: listZf.length > 0 ? listZf[0].ssxqmc : "",
|
||||
zfdx: listZf.length > 0 ? listZf[0].xfbmmc : "",
|
||||
xfdz: listZf.length > 0 ? listZf[0].dwdz : "",
|
||||
zfdxlb: xflxmc,
|
||||
fzr: listZf.length > 0 ? listZf.map((item) => item.dwfzrxm).toString():"",
|
||||
|
||||
lxdh: listZf.length > 0 ? listZf[0].dwfzrlxdh : "",
|
||||
ztjlnr: prodec.xtjlnr ? prodec.xtjlnr : prodec.xfgznr,
|
||||
qkcx: prodec.xtqdcx ? prodec.xtqdcx : prodec.sq,
|
||||
xbgzjh: prodec.xbgzjh ? prodec.xbgzjh : prodec.my,
|
||||
qt: prodec.qt ? prodec.qt : prodec.gzcs
|
||||
});
|
||||
|
||||
// if (img) {
|
||||
// await addImg(workbook, ddjb, urlImg.value + img[0], row.number, 19);
|
||||
// }
|
||||
} else {
|
||||
const row = zdjb.addRow({
|
||||
time: prodec.xfsj,
|
||||
ddmc: prodec.ssbm,
|
||||
xfmj: xfzy.length > 0 ? xfzy.toString() : "",
|
||||
xzxq: listZf.length > 0 ? listZf[0].xzqh : "",
|
||||
xqwg: listZf.length > 0 ? listZf[0].ssxqmc : "",
|
||||
zfdx: listZf.length > 0 ? listZf[0].xfbmmc : "",
|
||||
zfdxlb: xflxmc,
|
||||
xfdz: listZf.length > 0 ? listZf[0].dwdz : "",
|
||||
fzr: prodec.fzrxm,
|
||||
lxdh: prodec.fzrdh,
|
||||
abfzr: prodec.abfzrxm,
|
||||
abfzrlxdh: prodec.abfzrdh,
|
||||
abfwly: prodec.abfwly,
|
||||
absl: listZf.length > 0 ? listZf[0].bars : 0,
|
||||
zfnr: prodec.xfgznr,
|
||||
sq: prodec.sq,
|
||||
my: prodec.my,
|
||||
gzcs: prodec.gzcs,
|
||||
gzcx: "",
|
||||
hfqk: ""
|
||||
});
|
||||
// if (img) {
|
||||
// await addImg(workbook, zdjb, urlImg.value + img[0], row.number, 21);
|
||||
// }
|
||||
}
|
||||
}
|
||||
styles(sheeh);
|
||||
styles(ddjb);
|
||||
styles(zdjb);
|
||||
const buffer = await workbook.xlsx.writeBuffer();
|
||||
const blob = new Blob([buffer], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
});
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = "巡访任务管理.xlsx";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
setTimeout(()=>{
|
||||
document.body.removeChild(link)
|
||||
URL.revokeObjectURL(link.href)
|
||||
},100)
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
const styles = (sheeh) => {
|
||||
const headerRow = sheeh.getRow(1);
|
||||
sheeh.eachRow((row, rowNumbr) => {
|
||||
console.log(row, rowNumbr);
|
||||
row.font = { size: 16 };
|
||||
row.alignment = { vertical: "middle", horizontal: "center" };
|
||||
row.height=50
|
||||
});
|
||||
headerRow.eachCell((cell) => {
|
||||
(cell.fill = {
|
||||
type: "pattern"
|
||||
}),
|
||||
(cell.font = {
|
||||
bold: true,
|
||||
size: 16
|
||||
}),
|
||||
(cell.alignment = { vertical: "middle", horizontal: "center" });
|
||||
});
|
||||
sheeh.eachRow((row) => {
|
||||
if (row.number > 1) {
|
||||
row.height = 150;
|
||||
}
|
||||
});
|
||||
};
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "今天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
||||
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "最近7天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "最近30天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "最近90天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 下载图片
|
||||
const addImg = async (wokbook, woksheet, imageUrl, rowNumbr, colNumber) => {
|
||||
try {
|
||||
const response = await fetch(imageUrl);
|
||||
const blob = await response.blob();
|
||||
const arrayBuffer = await new Response(blob).arrayBuffer();
|
||||
|
||||
const imageId = wokbook.addImage({
|
||||
buffer: arrayBuffer,
|
||||
extension: extensions(blob.type)
|
||||
});
|
||||
woksheet.addImage(imageId, {
|
||||
tl: { col: colNumber - 1, row: rowNumbr - 1, offset: 2 },
|
||||
br: { col: colNumber, row: rowNumbr, offset: -2 },
|
||||
editAs: "onCell"
|
||||
});
|
||||
// console.log(response);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
const extensions = (mime) => {
|
||||
const extensName = {
|
||||
"/image/jpeg": "jpeg",
|
||||
"/image/png": "png",
|
||||
"/image/gif": "gif",
|
||||
"/image/bmp": "bmp"
|
||||
};
|
||||
return extensName[mime] || "jpeg";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
@ -0,0 +1,691 @@
|
||||
<!--
|
||||
* @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
|
||||
:inline="true"
|
||||
ref="elform"
|
||||
:model="listQuery"
|
||||
:rules="rules"
|
||||
: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="xflx" label="走访类型">
|
||||
<el-cascader
|
||||
v-model="listQuery.xflx"
|
||||
@change="changeca"
|
||||
:props="xflxprops"
|
||||
:show-all-levels="false"
|
||||
:options="props.dic.D_BZ_XFLX"
|
||||
:placeholder="'请选择走访类型'"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="xfzzXm" label="巡访组长">
|
||||
<el-input
|
||||
@click="chooseUserVisible = true"
|
||||
v-model="listQuery.xfzzXm"
|
||||
placeholder="请选择组长"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xfzzSfzh" label="巡访组长身份证号">
|
||||
<el-input
|
||||
v-model="listQuery.xfzzSfzh"
|
||||
placeholder="请选择巡访组长身份证号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="lxdh" label="巡访时间">
|
||||
<el-date-picker
|
||||
v-model="listQuery.xfsj"
|
||||
type="datetime"
|
||||
placeholder="请选择巡访时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="disabledFoem" label="寻访对象">
|
||||
<el-input v-model="xfdx"></el-input>
|
||||
</el-form-item>
|
||||
<!-- 商铺 -->
|
||||
<div
|
||||
style="width: 100%"
|
||||
class="formline"
|
||||
v-if="listQuery.xflx == '2201000'"
|
||||
>
|
||||
<el-form-item prop="fzrxm" label="商铺负责人" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.fzrxm"
|
||||
placeholder="请输入商铺负责人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrdh" label="负责人联系方式" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.fzrdh"
|
||||
placeholder="请输入负责人联系方式"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 群众 -->
|
||||
<div
|
||||
style="width: 100%"
|
||||
class="formline"
|
||||
v-if="listQuery.xflx == '2203000'"
|
||||
>
|
||||
<el-form-item prop="qzxm" label="姓名" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.qzxm"
|
||||
placeholder="请输入姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="qzlxfs" label="联系方式" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.qzlxfs"
|
||||
placeholder="请输入联系方式"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xfdz" label="地址" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.xfdz"
|
||||
placeholder="请输入地址"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 小区 -->
|
||||
<div
|
||||
style="width: 100%"
|
||||
class="formline"
|
||||
v-if="listQuery.xflx == '2202000' || abshow"
|
||||
>
|
||||
<el-form-item prop="fzrxm" label="小区物业负责人" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.fzrxm"
|
||||
placeholder="请输入小区物业负责人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="fzrdh" label="负责人联系方式" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.fzrdh"
|
||||
placeholder="请输入负责人联系方式"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="abfwly" label="安保服务来源" class="iptwidth">
|
||||
<el-input
|
||||
v-model="listQuery.abfwly"
|
||||
placeholder="请输入安保服务来源"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="abfzrxm" label="安保负责人姓名" class="abfzrxm">
|
||||
<el-input
|
||||
v-model="listQuery.abfzrxm"
|
||||
placeholder="请输入安保负责人姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="abfzrdh"
|
||||
label="安保负责人联系方式"
|
||||
class="iptwidth"
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.abfzrdh"
|
||||
placeholder="请输入安保负责人联系方式"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="abrs" label="保安人数" class="iptwidth">
|
||||
<el-input-number
|
||||
v-model="listQuery.abrs"
|
||||
:min="0"
|
||||
placeholder="请输入保安人数"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item prop="xfzy" label="巡访组员" style="width: 100%">
|
||||
<div class="ipt" @click="chooseZY">
|
||||
<span
|
||||
v-show="listQuery.xfzy.length == 0"
|
||||
style="color: #e5e5e5; padding-left: 10px"
|
||||
>请选择组员</span
|
||||
>
|
||||
<el-tag
|
||||
v-for="(tag, index) in listQuery.xfzy"
|
||||
:key="tag.id"
|
||||
:closable="!disabledFoem"
|
||||
:type="tag.type"
|
||||
@close.stop="handleClose(index)"
|
||||
>
|
||||
{{ tag.xm }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div
|
||||
v-if="listQuery.xflx && (show || listQuery.xflx == '1200000')"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-form-item prop="xfgznr" style="width: 100%">
|
||||
<template #label
|
||||
>巡访工作内容
|
||||
<el-button type="pramary" @click="openMb('05')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.xfgznr"
|
||||
placeholder="请输入巡访工作内容"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sq" style="width: 100%">
|
||||
<template #label
|
||||
>社情（风险隐患线索信息）
|
||||
<el-button type="pramary" @click="openMb('06')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.sq"
|
||||
placeholder="请输入社情（风险隐患线索信息）"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="my" style="width: 100%">
|
||||
<template #label
|
||||
>民意（人民群众意见建议）
|
||||
<el-button type="pramary" @click="openMb('07')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.my"
|
||||
placeholder="请输入民意（人民群众意见建议）"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="gzcs" style="width: 100%">
|
||||
<template #label
|
||||
>工作措施或落实情况
|
||||
<el-button type="pramary" @click="openMb('08')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.gzcs"
|
||||
placeholder="请输入工作措施或落实情况"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-else style="width: 100%">
|
||||
<el-form-item prop="xtjlnr" style="width: 100%">
|
||||
<template #label
|
||||
>座谈交流内容
|
||||
<el-button type="pramary" @click="openMb('01')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.xtjlnr"
|
||||
placeholder="请输入座谈交流内容"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xtqdcx" style="width: 100%">
|
||||
<template #label
|
||||
>座谈情况和取得成效
|
||||
<el-button type="pramary" @click="openMb('02')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.xtqdcx"
|
||||
placeholder="请输入座谈情况和取得成效"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="xbgzjh" style="width: 100%">
|
||||
<template #label
|
||||
>下步工作计划
|
||||
<el-button type="pramary" @click="openMb('03')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.xbgzjh"
|
||||
placeholder="请输入下步工作计划"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="qt" style="width: 100%">
|
||||
<template #label
|
||||
>其它<el-button type="pramary" @click="openMb('04')"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-input
|
||||
v-model="listQuery.qt"
|
||||
placeholder="请输入其它"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="xfdw" style="width: 100%">
|
||||
<template #label
|
||||
>走访单位
|
||||
<el-button type="pramary" @click="showDialog = true"
|
||||
>选择模板</el-button
|
||||
></template
|
||||
>
|
||||
<el-table :data="listQuery.xfdw" border style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
align="center"
|
||||
width="60px"
|
||||
label="序号"
|
||||
/>
|
||||
<el-table-column prop="ssbm" align="center" label="单位名称" />
|
||||
<el-table-column prop="dwfzrxm" align="center" label="负责人姓名" />
|
||||
<el-table-column prop="xqldzw" align="center" label="负责人职务" />
|
||||
<el-table-column
|
||||
prop="dwdz"
|
||||
align="center"
|
||||
label="地址"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡访照片" style="width: 100%">
|
||||
<el-upload
|
||||
action="/mosty-base/minio/image/upload/id"
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="upImg"
|
||||
>
|
||||
<el-icon><Plus></Plus></el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡访地址" style="width: 100%">
|
||||
<div class="mapBox"><GdMap /></div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<ChooseUser
|
||||
v-if="chooseUserVisible"
|
||||
v-model="chooseUserVisible"
|
||||
titleValue="选择负责人"
|
||||
:roleIds="hasChooseFzr"
|
||||
@choosedUsers="hanlderChoose"
|
||||
></ChooseUser>
|
||||
<!-- 下发单位 -->
|
||||
<XfdwDialog
|
||||
v-if="showDialog"
|
||||
v-model="showDialog"
|
||||
@choosedList="choosedList"
|
||||
:roleIds="chooseIds"
|
||||
/>
|
||||
<!-- 走访内容 -->
|
||||
<XfnrDialog
|
||||
v-if="showNrDialog"
|
||||
:Single="true"
|
||||
v-model="showNrDialog"
|
||||
@choosedList="choosedNrList"
|
||||
:roleIds="chooseIds"
|
||||
:type="mblx"
|
||||
/>
|
||||
<!-- 选择人员 -->
|
||||
<Ryload
|
||||
v-if="peoDialog"
|
||||
v-model:modelValue="peoDialog"
|
||||
@choosedUsers="hanlderChooseRy"
|
||||
:roleIds="roleIdsPeo"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import ChooseUser from "@/components/MyComponents/ChooseUser";
|
||||
import XfdwDialog from "./xfdwDialog.vue";
|
||||
import XfnrDialog from "./xfnrDialog.vue";
|
||||
import Ryload from "@/components/MyComponents/ChooseJz/ryload.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } 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 {
|
||||
ref,
|
||||
defineExpose,
|
||||
reactive,
|
||||
defineProps,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const props = defineProps({
|
||||
dic: { type: Object, default: {} }
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emits = defineEmits(["updateDate"]);
|
||||
const peoDialog = ref(false);
|
||||
const mblx = ref("");
|
||||
const showDialog = ref(false); //弹窗
|
||||
const chooseIds = ref([]); //ids
|
||||
const showNrDialog = ref(false);
|
||||
const chooseNrIds = ref([]); //ids
|
||||
const xflxprops = ref({
|
||||
label: "zdmc",
|
||||
value: "dm",
|
||||
children: "itemList"
|
||||
});
|
||||
const chooseUserVisible = ref(false); //负责人弹窗
|
||||
const hasChooseFzr = ref([]); //已经选胡负责人
|
||||
const hasChooseMj = ref([]); //已经选胡民警
|
||||
import people from "@/assets/images/peo.png";
|
||||
const title = ref("新增巡访任务管理");
|
||||
const disabledFoem = ref(false); //表单禁用
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const listQuery = ref({
|
||||
sfzh: "",
|
||||
xfdw: [],
|
||||
xfzy: []
|
||||
}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const rules = reactive({
|
||||
ssbmdm: [{ required: true, message: "请选择单位归属", trigger: "change" }],
|
||||
xflx: [{ required: true, message: "请选择走访类型", trigger: "change" }],
|
||||
xfzzXm: [
|
||||
{ required: true, message: "请选择组长", trigger: ["change", "blur"] }
|
||||
],
|
||||
xfzy: [{ required: true, message: "请选择组员", trigger: ["change", "blur"] }]
|
||||
});
|
||||
const roleIdsPeo = ref([]);
|
||||
|
||||
const imgList = ref([]);
|
||||
const urlImg = ref("/mosty-base/minio/image/download/");
|
||||
const fileList = ref([]);
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, id) => {
|
||||
dialogForm.value = true;
|
||||
disabledFoem.value = type == "detail" ? true : false;
|
||||
if (id) {
|
||||
title.value = type == "edit" ? "修改巡访任务管理" : "巡访任务管理详情";
|
||||
getDataById(id); //根据id查询详情
|
||||
} else {
|
||||
title.value = "新增巡访任务管理";
|
||||
}
|
||||
};
|
||||
// 根据id查询详情
|
||||
const xfdx = ref();
|
||||
const getDataById = (id) => {
|
||||
qcckGet({}, "/mosty-jmxf/tbJcglXf/" + id).then((res) => {
|
||||
listQuery.value = res;
|
||||
listQuery.value.xfdw = res.xfdw ? JSON.parse(res.xfdw) : [];
|
||||
console.log( listQuery.value.xfdw);
|
||||
if (listQuery.value.xfdw.length > 0) {
|
||||
xfdx.value = listQuery.value.xfdw[0].xfbmmc;
|
||||
}
|
||||
listQuery.value.xfzy = res.xfzy ? JSON.parse(res.xfzy) : [];
|
||||
roleIdsPeo.value = listQuery.value.xfzy.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
emitter.emit("deletePointArea", "zfry");
|
||||
let ids = res.xfzp.split(",");
|
||||
fileList.value = [];
|
||||
ids.forEach((element) => {
|
||||
let obj = { name: element, url: urlImg.value + element };
|
||||
fileList.value.push(obj);
|
||||
});
|
||||
if (listQuery.value.xfdw.length == 0) return false;
|
||||
let list = listQuery.value.xfdw;
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [list[0].jd, list[0].wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
emitter.emit("addPointArea", {
|
||||
coords: list,
|
||||
icon: require("@/assets/point/jz.png"),
|
||||
flag: "zfry"
|
||||
});
|
||||
});
|
||||
};
|
||||
const show = ref(true);
|
||||
const abshow = ref(false);
|
||||
function changeca(val) {
|
||||
console.log(val);
|
||||
if (val.length > 2) {
|
||||
console.log();
|
||||
const str = val[2].slice(0, 2);
|
||||
if (str == 22) {
|
||||
show.value = true;
|
||||
abshow.value = false;
|
||||
} else {
|
||||
show.value = false;
|
||||
abshow.value = true;
|
||||
}
|
||||
listQuery.value.xflx = val[2];
|
||||
} else {
|
||||
abshow.value = false;
|
||||
if (val[1] == "1200000") {
|
||||
show.value = true;
|
||||
} else {
|
||||
show.value = false;
|
||||
}
|
||||
listQuery.value.xflx = val[1];
|
||||
}
|
||||
}
|
||||
//打开内容模板
|
||||
function openMb(type) {
|
||||
mblx.value = type;
|
||||
showNrDialog.value = true;
|
||||
}
|
||||
// 移除
|
||||
function handleRemove(val) {
|
||||
imgList.value = imgList.value.filter((item) => {
|
||||
return item.uuid != val.uuid;
|
||||
});
|
||||
fileList.value = fileList.value.filter((item) => {
|
||||
return item.name != val.name;
|
||||
});
|
||||
}
|
||||
// 上传
|
||||
function upImg(row, file) {
|
||||
file.data = row.data;
|
||||
imgList.value.push(file);
|
||||
}
|
||||
|
||||
// 选择人员
|
||||
const hanlderChooseRy = (val) => {
|
||||
listQuery.value.xfzy = val;
|
||||
roleIdsPeo.value = val.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
};
|
||||
// 删除
|
||||
const handleClose = (index) => {
|
||||
listQuery.value.xfzy.splice(index, 1);
|
||||
roleIdsPeo.value.splice(index, 1);
|
||||
};
|
||||
// 选择组员
|
||||
const chooseZY = () => {
|
||||
if (disabledFoem.value) return false;
|
||||
peoDialog.value = true;
|
||||
};
|
||||
|
||||
//选择用户负责人
|
||||
const hanlderChoose = (users) => {
|
||||
const user = users[0];
|
||||
hasChooseFzr.value = [user.id];
|
||||
listQuery.value.xfzzXm = user.userName;
|
||||
listQuery.value.xfzzSfzh = user.idEntityCard;
|
||||
};
|
||||
// 选择人员
|
||||
const choosedList = (val) => {
|
||||
emitter.emit("deletePointArea", "zfry");
|
||||
listQuery.value.xfdw = val;
|
||||
chooseIds.value = val.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
showDialog.value = false;
|
||||
let list = val.filter((item) => {
|
||||
return item.jd && item.wd;
|
||||
});
|
||||
if (list.length == 0) return false;
|
||||
emitter.emit("setMapCenter", {
|
||||
location: [list[0].jd, list[0].wd],
|
||||
zoomLevel: 10
|
||||
});
|
||||
emitter.emit("addPointArea", {
|
||||
coords: list,
|
||||
icon: require("@/assets/point/jz.png"),
|
||||
flag: "zfry"
|
||||
});
|
||||
};
|
||||
// 选择内容
|
||||
const choosedNrList = (val) => {
|
||||
showNrDialog.value = false;
|
||||
chooseNrIds.value = val.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
switch (mblx.value) {
|
||||
case "01":
|
||||
listQuery.value.xtjlnr = val[0].nr;
|
||||
break;
|
||||
case "02":
|
||||
listQuery.value.xtqdcx = val[0].nr;
|
||||
break;
|
||||
case "03":
|
||||
listQuery.value.xbgzjh = val[0].nr;
|
||||
break;
|
||||
case "04":
|
||||
listQuery.value.qt = val[0].nr;
|
||||
break;
|
||||
case "05":
|
||||
listQuery.value.xfgznr = val[0].nr;
|
||||
break;
|
||||
case "06":
|
||||
listQuery.value.sq = val[0].nr;
|
||||
break;
|
||||
case "07":
|
||||
listQuery.value.my = val[0].nr;
|
||||
break;
|
||||
case "08":
|
||||
listQuery.value.gzcs = val[0].nr;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
let pramas = { ...listQuery.value };
|
||||
pramas.xfzy = JSON.stringify(pramas.xfzy);
|
||||
pramas.xfdw = JSON.stringify(pramas.xfdw);
|
||||
pramas.zfxl = pramas.xflx;
|
||||
let ids1 = imgList.value.map((item) => {
|
||||
return item.data;
|
||||
});
|
||||
let ids2 = fileList.value.map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
let ids = [...ids1, ...ids2];
|
||||
pramas.xfzp = ids.join(",");
|
||||
if (title.value == "新增巡访任务管理") {
|
||||
qcckPost(pramas, "/mosty-jmxf/tbJcglXf")
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
close();
|
||||
emits("updateDate");
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
qcckPut(pramas, "/mosty-jmxf/tbJcglXf")
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: "新增成功" });
|
||||
close();
|
||||
emits("updateDate");
|
||||
loading.value = false;
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = { xfdw: [], xfzy: [] };
|
||||
dialogForm.value = false;
|
||||
imgList.value = [];
|
||||
fileList.value = [];
|
||||
};
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.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;
|
||||
}
|
||||
.iptwidth {
|
||||
width: 100%;
|
||||
}
|
||||
.formline {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<el-dialog title="巡防部门" width="1400px" v-model="modelValue" append-to-body @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="所属部门">
|
||||
<MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡防部门">
|
||||
<el-input v-model="listQuery.xfbmmc" placeholder="请输入巡防部门" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡区领导姓名">
|
||||
<el-input v-model="listQuery.xqldxm" placeholder="请输入巡区领导姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属巡区名称">
|
||||
<el-input v-model="listQuery.ssxqmc" placeholder="请输入所属巡区名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
|
||||
<el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" :row-key="keyid" border style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="80"/>
|
||||
<el-table-column prop="ssbm" align="center" label="所属部门"/>
|
||||
<el-table-column prop="ssxqid" align="center" label="所属巡区">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :value="row.ssxqid" :options="D_XFTZ_XQLX" :tag="false"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="xqldxm" align="center" label="巡区领导姓名"/>
|
||||
<el-table-column prop="dwfzrxm" align="center" label="负责人姓名"/>
|
||||
<el-table-column prop="xqldzw" align="center" label="负责人职务"/>
|
||||
<el-table-column prop="dwdz" align="center" label="单位地址"/>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" >
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, nextTick,getCurrentInstance } from "vue";
|
||||
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_XFTZ_XQLX,D_XFTZ_XZXQ,D_XFTZ_DWXZ } = proxy.$dict("D_XFTZ_XQLX","D_XFTZ_XZXQ","D_XFTZ_DWXZ");
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},// 回显
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const form = ref({});
|
||||
const tableData = ref([]);
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
onMounted(()=>{
|
||||
handleFilter();
|
||||
})
|
||||
|
||||
// 分页
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getListData = async () => {
|
||||
const params = listQuery.value;
|
||||
qcckGet(params,'/mosty-jmxf/xftz/selectPageList').then(res=>{
|
||||
tableData.value = res?.records;
|
||||
total.value = res.total
|
||||
multipleUser()
|
||||
})
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach(item=>{
|
||||
if(props.roleIds.some(id=>id == item.id)){
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
if(props.Single){
|
||||
if(val.length>1){
|
||||
let del_row = val.shift()
|
||||
multipleUserRef.value.toggleRowSelection(del_row,false)
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
}else{
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "02" };
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value
|
||||
let list = []
|
||||
let listId = []
|
||||
userList.forEach(val=>{
|
||||
if(listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
})
|
||||
emits("choosedList", list);
|
||||
closed();
|
||||
};
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner{
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="巡防内容" width="1400px" v-model="modelValue" append-to-body @close="closed">
|
||||
<div v-if="modelValue">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="搜索关键字">
|
||||
<el-input v-model="listQuery.key" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="resetModel"> 重置 </el-button>
|
||||
<el-button type="success" @click="modelValueAdd = true">新增模板</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
|
||||
<el-table
|
||||
ref="multipleUserRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
:row-key="keyid"
|
||||
border
|
||||
style="width: 100%"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column prop="nr" label="内容" />
|
||||
<el-table-column label="操作" width="70">
|
||||
<template #default="{ row }">
|
||||
<el-icon style="margin:0 4px;" @click="editForm(row)"><Document/></el-icon>
|
||||
<el-icon @click="deleteForm([row.id])"><Delete/></el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" >
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div style="text-align:center;">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新增模板 -->
|
||||
<el-dialog
|
||||
:title="mbTitle"
|
||||
width="500px"
|
||||
:destroy-on-close="true"
|
||||
v-model="modelValueAdd"
|
||||
append-to-body
|
||||
@close="closeAddModel">
|
||||
<el-form ref="elformAdd" :model="addForm" :rules="rules" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item prop="type" label="模板类型" style="width:100%">
|
||||
<el-select v-model="addForm.type" style="width:100%">
|
||||
<el-option
|
||||
v-for="item in D_ZFNR_MBLX"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" style="width:100%" prop="nr">
|
||||
<el-input v-model="addForm.nr" style="width:100%" type="textarea" placeholder="请输入内容" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: center;">
|
||||
<el-button @click="closeAddModel">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirmAdd">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { defineProps, watch, ref, onMounted, getCurrentInstance, reactive } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_ZFNR_MBLX } = proxy.$dict("D_ZFNR_MBLX");
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},// 回显
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//模板类型
|
||||
type:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const mbTitle =ref('新增模板')
|
||||
const modelValueAdd = ref(false)
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
const form = ref({});
|
||||
const tableData = ref([]); //数据
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const elformAdd = ref()
|
||||
const addForm = ref({ nr:''})
|
||||
const rules = reactive({
|
||||
type: [{ required: true, message: "请选择模板类型", trigger: "blur" }],
|
||||
nr: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
})
|
||||
onMounted(()=>{
|
||||
handleFilter();
|
||||
})
|
||||
|
||||
// 取消新增模板
|
||||
const closeAddModel = ()=>{
|
||||
modelValueAdd.value = false;
|
||||
addForm.value.nr = '';
|
||||
mbTitle.value = '新增模板'
|
||||
}
|
||||
// 编辑
|
||||
const editForm = (row)=>{
|
||||
modelValueAdd.value = true
|
||||
mbTitle.value = '编辑模板'
|
||||
addForm.value = {...row}
|
||||
}
|
||||
|
||||
// 删除模板
|
||||
const deleteForm = (row)=>{
|
||||
proxy.$confirm("确定要删除模板", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(row,'/mosty-jmxf/tbJcglXfNrmb/bacth').then(() => {
|
||||
proxy.$message({type: "success", message: "删除成功" });
|
||||
listQuery.value.pageCurrent = 1;
|
||||
handleFilter();
|
||||
});
|
||||
}).catch(() => {
|
||||
proxy.$message.info("已取消");
|
||||
});
|
||||
}
|
||||
|
||||
// 提交新增模板
|
||||
const onComfirmAdd = ()=>{
|
||||
elformAdd.value.validate((valid)=>{
|
||||
if(!valid) return false;
|
||||
if(mbTitle.value == '新增模板'){
|
||||
qcckPost(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
||||
closeAddModel()
|
||||
handleFilter();
|
||||
proxy.$message({type: "success", message: "新增成功"});
|
||||
})
|
||||
}else{
|
||||
qcckPut(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
||||
closeAddModel()
|
||||
handleFilter();
|
||||
proxy.$message({type: "success", message: "编辑成功"});
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getListData = async () => {
|
||||
let params = {
|
||||
pageCurrent:listQuery.value.pageCurrent,
|
||||
pageSize:listQuery.value.pageSize,
|
||||
nr:listQuery.value.key,
|
||||
type:props.type
|
||||
}
|
||||
qcckGet(params,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
multipleUser()
|
||||
})
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach(item=>{
|
||||
if(props.roleIds.some(id=>id == item.id)){
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
if(props.Single){
|
||||
if(val.length>1){
|
||||
let del_row = val.shift()
|
||||
multipleUserRef.value.toggleRowSelection(del_row,false)
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
}else{
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetModel = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value
|
||||
let list = []
|
||||
let listId = []
|
||||
userList.forEach(val=>{
|
||||
if(listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
})
|
||||
emits("choosedList", list);
|
||||
closed();
|
||||
};
|
||||
// pageSize 改变触发
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
// 页码改变触发
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner{
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user