maojiacai/ba_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'保安项目提交'

Browse Source
This commit is contained in:
esacpe
2025-09-22 09:01:41 +08:00
commit 21e2a12e3c
1439 changed files with 336271 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
src/views/backOfficeSystem/basicsmanage/turnoutArea/index.vue Normal file
View File

@ -0,0 +1,481 @@
<template>
<div>
<div class="titleBox">
<div class="title">重点人员管理</div>
<div class="btnBox" style="display: flex">
<el-button type="primary" style="margin-left: 10px" @click="dialogFormVisible = true;">
<el-icon><CirclePlus /></el-icon>
<span>新增</span>
</el-button>
</div>
</div>
<div class="searchBox" ref="searchBox">
<el-form :model="listQuery" :inline="true">
<el-form-item label="姓名">
<el-input placeholder="请输入重点人员姓名" v-model="listQuery.xm" clearable />
</el-form-item>
<el-form-item label="日期">
<el-date-picker unlink-panels v-model="listQuery.gkkssj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" />
</el-form-item>
<el-form-item label="责任区">
<el-select v-model="listQuery.xfqid" placeholder="请选择责任区" filterable>
<el-option v-for="item in zrqList" :key="item.id" :label="item.xfqMc" :value="item.id"/>
</el-select>
</el-form-item>
<el-form-item label="管控状态">
<el-select v-model="listQuery.gkzt" placeholder="请选择管控状态" >
<el-option v-for="item in D_ZDRGK_GKZT" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-select v-model="listQuery.gkbq" placeholder="请选择管控状态" filterable>
<el-option v-for="item in D_ZDRGK_GKBQ" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleFilter">查询</el-button>
<el-button @click="reset"> 重置 </el-button>
</el-form-item>
</el-form>
</div>
<div class="tabBox">
<el-table :data="tableData" border row-key="orgCode" style="width: 100%" :key="keyCount" :height="tableHeight">
<el-table-column prop="sfzh" label="身份证号码" show-overflow-tooltip align="center" width="200"/>
<el-table-column prop="xm" label="姓名" show-overflow-tooltip width="120"/>
<el-table-column label="性别" show-overflow-tooltip width="80">
<template #default="{ row }">
<dict-tag :options="D_BZ_XB" :value="row.xbdm" :tag="false" />
</template>
</el-table-column>
<el-table-column label="图片" align="center" width="150">
<template #default="{ row }">
<el-image
style="width=80px;height:90px"
:preview-src-list="[`/mosty-base/minio/image/download/${row.fjdz}`]"
v-if="row.fjdz"
hide-on-click-modal
preview-teleported
fit="cover"
:src="`/mosty-base/minio/image/download/${row.fjdz}`"/>
</template>
</el-table-column>
<el-table-column label="民族" align="center" width="80" >
<template #default="{ row }">
<dict-tag :options="D_BZ_MZ" :value="row.mz" :tag="false" />
</template>
</el-table-column>
<!-- <el-table-column prop="jzdz" label="居住地" show-overflow-tooltip align="center" width="320"/>
<el-table-column prop="lxfs" label="联系方式" show-overflow-tooltip align="center" width="180"/> -->
<el-table-column label="紧急联系人及方式" show-overflow-tooltip align="center" width="180" >
<template #default="{ row }">
<span>{{ row.jjlxr }}({{ row.jjlxrLxfs }})</span>
</template>
</el-table-column>
<el-table-column label="标签" show-overflow-tooltip align="center" width="200">
<template #default="{ row }">
<div class="rybq_box">
<dict-tag v-for="item in row.gkbq" :key="item" :options="D_ZDRGK_GKBQ" :value="item" :tag="true"/>
</div>
</template>
</el-table-column>
<el-table-column prop="linkMan" label="等级" show-overflow-tooltip align="center" width="100">
<template #default="{ row }">
<dict-tag :options="D_ZDRGK_GKDJ" :value="row.gkdj" :tag="false" />
</template>
</el-table-column>
<el-table-column prop="linkMan" label="管控状态" show-overflow-tooltip align="center" width="100">
<template #default="{ row }">
<dict-tag :options="D_ZDRGK_GKZT" :value="row.gkzt" :tag="false" />
</template>
</el-table-column>
<el-table-column prop="xtCjsj" label="创建时间" show-overflow-tooltip align="center" width="150"/>
<!-- <el-table-column prop="gksj" label="最近管控时间" show-overflow-tooltip align="center" width="150"/>
<el-table-column prop="linkMan" label="管控次数" show-overflow-tooltip align="center" width="100">
<template #default="{ row }">
<span>{{ row.gkjlList?.length }}</span>
</template>
</el-table-column> -->
<el-table-column prop="gkyy" label="管控原因" show-overflow-tooltip align="center" width="200"/>
<el-table-column prop="czfs" label="处置方式" show-overflow-tooltip align="center" width="100"/>
<el-table-column label="操作" align="center" fixed="right" width="230">
<template #default="{ row }">
<el-button @click="lookGj(row)" size="small">预警轨迹</el-button>
<el-button @click="update(row)" size="small">编辑</el-button>
<el-popconfirm @confirm="delDictItem(row)" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?">
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div class="fenye" :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.pageCurrent"
:page-sizes="[10, 20, 30, 50]"
:page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
/>
</div>
</div>
<div v-if="dialogFormVisible" class="dialog">
<div class="head_box">
<span class="title">{{ isUpdate ? "修改" : "新增" }}</span>
<div>
<!-- 修改 -->
<el-button v-if="isUpdate" type="primary" size="small" @click="onSave" :loading="buttonLoading" >修改</el-button>
<!-- 新增 -->
<el-button v-else type="primary" size="small" @click="onAdd" :loading="buttonLoading" >保存</el-button>
<el-button size="small" @click="closeDialog">关闭</el-button>
</div>
</div>
<el-form class="mosty-from-wrap" ref="editRef" label-width="140px" :rules="rules" :inline="true" label-position="top" :model="dialogForm">
<el-form-item label="身份证号码" show-word-limit prop="sfzh" required >
<el-input placeholder="请填写身份证号码" v-model="dialogForm.sfzh" />
</el-form-item>
<el-form-item label="姓名" prop="xm">
<el-input placeholder="请填写重点人员姓名" v-model="dialogForm.xm" show-word-limit/>
</el-form-item>
<el-form-item label="性别" required>
<el-select v-model="dialogForm.xbdm" placeholder="请选择性别">
<el-option v-for="item in D_BZ_XB" :key="item" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="民族">
<MOSTY.PackageSelect width="280px" v-model="dialogForm.mz" dictEnum="NATION" clearable filterable/>
</el-form-item>
<el-form-item label="居住地" >
<el-input show-word-limit placeholder="请填写详细居住地" v-model="dialogForm.jzdz" />
</el-form-item>
<el-form-item label="联系方式" >
<el-input placeholder="请填写联系方式" show-word-limit v-model="dialogForm.lxfs" />
</el-form-item>
<el-form-item label="责任社区民警" >
<el-input placeholder="请填写责任社区民警" show-word-limit v-model="dialogForm.jjlxr" />
</el-form-item>
<el-form-item label="责任社区民警电话" >
<el-input placeholder="请填写责任社区民警电话" show-word-limit v-model="dialogForm.jjlxrLxfs" />
</el-form-item>
<el-form-item label="标签" prop="gkbq" >
<el-select v-model="dialogForm.gkbq" multiple placeholder="请选择标签">
<el-option v-for="item in D_ZDRGK_GKBQ" :key="item" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="等级" prop="gkdj" >
<el-select v-model="dialogForm.gkdj" placeholder="请选择等级">
<el-option
v-for="item in D_ZDRGK_GKDJ"
:key="item"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="管控状态" prop="gkzt">
<el-select v-model="dialogForm.gkzt" placeholder="请选择管控状态">
<el-option
v-for="item in D_ZDRGK_GKZT"
:key="item"
:label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item style="width: 100%" label="所属责任区" prop="xfqid" @click.stop="modelValue = true" >
<el-input v-model="dialogForm.xfqid" placeholder="请选择所属责任区" style="width: 100%" clearable readonly suffix-icon="ArrowDown" v-if="dialogForm.xfqList.length <= 0" />
<template v-else>
<el-tag @close.stop="handleClose(tag, 'zrq')" v-for="tag in dialogForm.xfqList" :key="tag.id" class="mx-1" closable :type="tag.type">
{{ tag.xfqMc }}
</el-tag>
</template>
</el-form-item>
<el-form-item label="管控原因" style="width: 100%">
<el-input placeholder="请填写管控原因" type="textarea" show-word-limit v-model="dialogForm.gkyy" />
</el-form-item>
<el-form-item label="处置方式" style="width: 100%">
<el-radio-group v-model="dialogForm.czfs">
<el-radio label="留置盘问"></el-radio>
<el-radio label="核实后放行"></el-radio>
<el-radio label="不处理"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<MOSTY.Upload v-model="dialogForm.fjdz" :limit="1"></MOSTY.Upload>
</el-form-item>
</el-form>
</div>
<!-- 请选择责任区 -->
<ZrxLoad v-model="modelValue" v-if="modelValue" :roleIds="dialogForm.xfqid" @choosedUsers="hanlderChooseZrq" />
<!-- 轨迹 -->
<Route ref="dialogRout" />
</div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
import { useStore } from "vuex";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import ZrxLoad from "./zrxLoad.vue";
import Route from "./route.vue";
const store = useStore();
const modelValue = ref(false)
const { proxy } = getCurrentInstance();
const { D_BZ_XB, D_ZDRGK_GKZT, D_ZDRGK_GKBQ, D_ZDRGK_GKDJ, D_ZDRGK_GKLX ,D_BZ_MZ} = proxy.$dict( "D_BZ_XB", "D_ZDRGK_GKZT", "D_ZDRGK_GKBQ", "D_ZDRGK_GKDJ", "D_ZDRGK_GKLX","D_BZ_MZ");
const zdryDetail = ref({});
const dialogRout = ref();
const keyCount = ref(0); //tabel组件刷新值
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
//查询参数
const total = ref(0);
const listQuery = ref({
pageSize: 20,
pageCurrent: 1,
});
const buttonLoading = ref(false);
const dialogFormDefault = ref({});
const dialogForm = ref({
xfqid: [],
xfqList: [],
});
// 数据相关
const tableData = ref([]);
const dialogFormVisible = ref(false);
const zrqList = ref([]); //责任区数据
const isUpdate = ref(false);
const rules = reactive({
xm:[{ required: true, message: '请填写姓名' ,trigger:'blur'}],
xbdm:[{ required: true, message: '请选择性别',trigger:'change' }],
mz:[{ required: true, message: '请选择民族' ,trigger:'blur'}],
jzdz:[{ required: true, message: '请填写详细居住地' ,trigger:'blur'}],
lxfs:[{ required: true, message: '请填写联系方式' ,trigger:'blur'}],
jjlxr:[{ required: true, message: '请填写责任社区民警' ,trigger:'blur'}],
jjlxrLxfs:[{ required: true, message: '责任社区民警电话' ,trigger:'change'}],
gkdj:[{ required: true, message: '请选择等级' ,trigger:'change'}],
gkzt:[{ required: true, message: '请选择管控状态' ,trigger:'change'}],
xfqid:[{ required: true, message: '请选择所属责任区' ,trigger:'change'}],
})
onMounted(() => {
dialogFormDefault.value = JSON.parse(JSON.stringify(dialogForm.value));
tabHeightFn();
_getXfqData();
getListData();
});
//编辑
const update = (item) => {
item.fjdz = [item.fjdz];
dialogForm.value = item;
dialogForm.value.xfqid = dialogForm.value.xfqList.map(v=>{return v.xfqId})
dialogFormVisible.value = true;
isUpdate.value = true;
};
// 查看轨迹
const lookGj = (row) => {
dialogRout.value.innit(row)
}
// 获取数据的方法
const getListData = async () => {
// listQuery.value.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode;
qcckGet(listQuery.value, "/mosty-jmxf/tbJcglZdrgk/queryList").then((res) => {
if (!res) return false;
for (let i = 0; i < res.records.length; i++) {
res.records[i].gkbq = res.records[i].gkbq.split(",");
}
tableData.value = res.records;
total.value = res.total;
});
};
//获取巡防区并绘制
const _getXfqData = () => {
let data = {
pageCurrent: 1,
pageSize: 20,
ssbmdm: JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
};
qcckGet(data, "/mosty-jmxf/tbJcglXfqy/queryList").then((res) => {
zrqList.value = res.records || [];
});
};
// 处理删除tag
function handleClose(tag, type) {
dialogForm.value.xfqList.splice(dialogForm.value.xfqList.indexOf(tag), 1);
dialogForm.value.xfqid.splice(dialogForm.value.xfqid.indexOf(tag.id), 1);
}
const reset = () => {
tableData.value = [];
dialogForm.value = {};
listQuery.value = { pageSize: 20, pageCurrent: 1, gkbq: "", gkzt: "" };
getListData();
};
const handleFilter = () => {
listQuery.value.gkjssj = listQuery.value.gkkssj;
listQuery.value.pageCurrent = 1;
getListData();
};
//选择
function hanlderChooseZrq(arr) {
dialogForm.value.xfqid = arr.map((v) => { return v.id; });
dialogForm.value.xfqList = arr.map(item=>{return {xfqId:item.id ,xfqMc:item.xfqMc}})
}
// 分页相关
/**
* size 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.pageSize = currentSize;
getListData();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.pageCurrent = currentPage;
getListData();
};
const onSave = () => {
editRef.value.validate((valid) => {
if (!valid) return ElMessage.error("请填写完必填项!");
buttonLoading.value = true;
dialogForm.value.gkbq = dialogForm.value.gkbq.join(",");
if (dialogForm.value.fjdz instanceof Array) dialogForm.value.fjdz = dialogForm.value.fjdz.join(",");
qcckPost(dialogForm.value, "/mosty-jmxf/tbJcglZdrgk/updateZdr").then((res) => {
ElMessage.success("修改成功");
dialogFormVisible.value = false;
buttonLoading.value = false;
isUpdate.value = false;
closeDialog();
handleFilter();
}).catch(() => {
buttonLoading.value = false;
});
});
};
const editRef = ref(null);
//新增
const onAdd = () => {
editRef.value.validate((valid) => {
if (!valid) return ElMessage.error("请填写完必填项!");
buttonLoading.value = true;
let params = { ...dialogForm.value }
params.xfqid = params.xfqid ? params.xfqid.join(',') :'';
params.gkbq = params.gkbq ? params.gkbq.join(",") : ''
params.fjdz = params.fjdz ? params.fjdz.join(",") : ''
params.ssbmdm = JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
qcckPost(params, "/mosty-jmxf/tbJcglZdrgk/saveZdr").then((res) => {
ElMessage.success("新增成功");
buttonLoading.value = false;
dialogFormVisible.value = false;
closeDialog();
handleFilter();
}).catch(() => {
buttonLoading.value = false;
});
});
};
const delDictItem = (row) => {
qcckPost([row.id], "/mosty-jmxf/tbJcglZdrgk/deleteBatch").then((res) => {
ElMessage.success("删除成功");
reset();
});
};
const closeDialog = () => {
dialogFormVisible.value = false;
isUpdate.value = false;
dialogForm.value = JSON.parse(JSON.stringify(dialogFormDefault.value));
};
// 表格高度计算
const tabHeightFn = () => {
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
window.onresize = function () {
tabHeightFn();
};
};
onUnmounted(() => {
proxy.mittBus.off("mittFn");
});
</script>
<style >
.el-input-group__prepend {
background-color: #062a48;
border: 1px solid #114260;
color: #fff;
}
</style>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
.user-manage-container {
.table-header-wrap {
margin-bottom: 22px;
}
::v-deep .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
::v-deep .el-tag {
margin-right: 6px;
}
.pagination {
margin-top: 20px;
}
.twoLine {
display: flex;
align-items: flex-start;
flex-flow: wrap;
.el-form-item {
width: 380px;
}
}
}
.zdy_tag {
color: #999;
border: 1px solid #999;
display: inline-block;
padding: 0px 10px;
border-radius: 3px;
line-height: 22px;
margin-left: 10px;
font-size: 12px;
margin-bottom: 10px;
}
.active_tag {
color: #fff;
border: 1px solid #409eff;
background: #409eff;
}
.rybq_box {
display: flex;
}
</style>