Files
ba_web/src/views/backOfficeSystem/basicsmanage/watchman-ll/auxiliary-police/policeF.vue
2025-09-22 09:01:41 +08:00

1066 lines
26 KiB
Vue

<template>
<div>
<div class="searchBox" ref="searchBox">
<el-form :model="form" :inline="true">
<el-form-item label="所属部门">
<MOSTY.Department width="100%" clearable v-model="form.ssbmdm" />
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.fjName" placeholder="请输入姓名" clearable />
</el-form-item>
<el-form-item label="身份证号码">
<el-input
v-model="form.sfzh"
placeholder="请输入身份证号码"
clearable
/>
</el-form-item>
<el-form-item label="是否离职">
<el-select
clearableupdate
v-model="form.xtSjzt"
placeholder="请选择状态"
>
<el-option
v-for="item in D_BZ_SFLZ"
:label="item.label"
:key="item.value"
:value="item.value"
/>
</el-select>
</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>
<div class="total">
<span> 辅警总数 {{ total }} </span>
<div class="jnbq">
<el-button
v-for="item in lxList"
:key="item.id"
:class="form.bqId === item.id ? 'on' : ''"
@click="chackJn(item)"
size="small"
>{{ item.bqmc }}</el-button
>
</div>
</div>
<div class="tabBox">
<el-table
:data="tableData"
border
ref="dataTreeList"
row-key="id"
:tree-props="{ children: 'itemList', hasChildren: true }"
style="width: 100%"
@selection-change="handleSelectionChange"
:height="tableHeight"
:key="keyCount"
v-loading="loadingTable"
element-loading-background="rgba(0,0,0,0.3)"
element-loading-text="数据加载中"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="序号" type="index" align="center" width="80" />
<el-table-column width="120" align="center" label="图片">
<template #default="{ row }">
<div class="phone">
<el-image
v-if="row.tpid"
:src="urlImg + row.tpid"
fit="cover"
lazy
/>
<el-image v-else :src="Person" fit="cover" lazy />
</div>
</template>
</el-table-column>
<el-table-column
prop="xm"
show-overflow-tooltip
align="center"
label="辅警姓名"
>
</el-table-column>
<el-table-column
prop="sfzh"
show-overflow-tooltip
align="center"
label="身份证号码"
>
</el-table-column>
<el-table-column
prop="ssbm"
label="所属部门"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="jh"
label="警号"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="zyjn"
show-overflow-tooltip
label="专业技能"
align="center"
>
<template #default="{ row }">
<el-tag
class="ml-2"
v-for="(it, index) in row.sklList"
:key="index"
>{{ it.bqmc }}</el-tag
>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="370px"
fixed="right"
>
<template #default="{ row }">
<el-button @click="onClickUpdate(row)" size="small">修改</el-button>
<el-button plain @click="chackZqjl(row)" size="small"
>执勤记录</el-button
>
<el-button plain size="small" @click="getDocument(row)"
>人员档案</el-button
>
<el-button
v-if="row.xtSjzt != 0"
@click="lzList(row)"
type="warning"
size="small"
>离职</el-button
>
<el-button @click="delDictItem(row)" type="danger" size="small"
>删除</el-button
>
</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="form.current"
:page-sizes="[10, 20, 50]"
:page-size="form.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
<div v-if="dialogFormVisible" class="dialog">
<div class="head_box">
<span class="title">{{ title }}</span>
<div>
<el-button
type="primary"
size="small"
@click="submit"
v-if="!isDisabled"
:loading="loading"
>保存</el-button
>
<el-button size="small" @click="closeDialog">关闭</el-button>
</div>
</div>
<el-form
ref="elform"
:model="addForm"
:rules="rules"
:inline="true"
label-position="top"
>
<div style=" width: 25%; display: flex; justify-content: center;margin-bottom: 10px;">
<div style="position: relative; width: 90px; height: 100px">
<el-upload
action="/mosty-base/minio/image/upload/id"
:on-change="upImgFile"
:on-success="upImg"
:show-file-list="false"
>
<el-image v-if="imgUrl" :src="imgUrl" fit="cover" />
<el-icon v-else><Plus></Plus></el-icon>
<span
v-if="imgUrl"
style="position: absolute; top: -52px; right: -20px"
>
<el-icon size="20" @click.stop="deletImg"><Close /></el-icon>
</span>
</el-upload>
</div>
</div>
<el-form-item label="身份证号码" prop="sfzh">
<el-input
v-model="addForm.sfzh"
placeholder="请输入身份证号码"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item label="辅警姓名" prop="xm">
<el-input
v-model="addForm.xm"
placeholder="请输入辅警姓名"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item label="性别" prop="xbdm">
<el-select
clearable
v-model="addForm.xbdm"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(item, index) in D_BZ_XB"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="民族" prop="mzdm">
<el-select
clearable
v-model="addForm.mzdm"
placeholder="请选择民族"
style="width: 100%"
>
<el-option
v-for="(item, index) in D_BZ_MZ"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="政治面貌" prop="zzmm">
<el-select
clearable
v-model="addForm.zzmm"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(item, index) in D_BZ_ZZMM"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="婚姻状况" prop="hyzk">
<el-select
clearable
v-model="addForm.hyzk"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(item, index) in D_BZ_HYZK"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="学历" prop="whcddm">
<el-select
clearable
v-model="addForm.whcddm"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(item, index) in D_BZ_WHCD"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="辅警编号" prop="jh">
<el-input
v-model="addForm.jh"
placeholder="请输入辅警编号"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item label="联系电话" prop="lxdh">
<el-input
v-model="addForm.lxdh"
placeholder="请输入联系电话"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item
label="所属部门"
prop="ssbmdm"
:rules="{ required: true, message: '请选择部门' }"
>
<MOSTY.Department
:placeholder="addForm.ssbm"
width="100%"
clearable
v-model="addForm.ssbmdm"
/>
</el-form-item>
<el-form-item label="人员类别" prop="lx">
<el-select
clearable
v-model="addForm.lx"
placeholder="请选择"
style="width: 100%"
disabled
>
<el-option value="02" label="辅警"></el-option>
</el-select>
</el-form-item>
<el-form-item
style="width: 100%"
label="专业技能"
prop="sklList"
@change="selectJnbq"
>
<el-select
v-model="addForm.sklList"
multiple
placeholder="请选择"
style="width: 100%"
@change="onChangeBQ"
>
<el-option
v-for="item in bqList"
:key="item.id"
:label="item.bqmc"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="备注" style="width: 100%">
<el-input
v-model="addForm.bz"
placeholder="请输入关键字"
show-word-limit
type="textarea"
/>
</el-form-item>
</el-form>
</div>
<!-- 执勤记录 -->
<div v-if="zqjl" class="dialog">
<div class="head_box">
<div class="title">巡防辅警执勤记录</div>
<div>
<el-button
v-if="mapActive"
type="primary"
size="small"
@click="mapActive = false"
>关闭日历模式</el-button
>
<el-button
v-else
type="primary"
size="small"
@click="mapActive = true"
>日历模式</el-button
>
<el-button size="small" @click="zqjl = false">关闭</el-button>
</div>
</div>
<div v-if="mapActive" class="txmap">
<ZbCalendar />
</div>
<div v-else>
<el-table
:data="zqjlData"
border
ref="dataTreeList"
row-key="id"
:tree-props="{ children: 'itemList', hasChildren: true }"
style="width: 100%"
@selection-change="handleSelectionChange"
:height="tableHeight1"
:key="keyCount"
v-loading="loadingTable"
element-loading-background="rgba(0,0,0,0.3)"
element-loading-text="数据加载中"
>
<el-table-column
prop="zqbm"
show-overflow-tooltip
align="center"
width="150px"
label="执勤部门"
>
</el-table-column>
<el-table-column
prop="jzcy"
show-overflow-tooltip
align="center"
width="200"
label="警组成员"
>
</el-table-column>
<el-table-column
prop="sc"
label="时长"
align="center"
width="150"
></el-table-column>
<el-table-column
prop="lc"
label="里程"
width="100px"
align="center"
></el-table-column>
<el-table-column
prop="jqczsl"
show-overflow-tooltip
label="警情处置数量"
align="center"
>
</el-table-column>
<el-table-column
prop="xctjs"
show-overflow-tooltip
label="现场调解数"
align="center"
>
</el-table-column>
<el-table-column
prop="tjl"
show-overflow-tooltip
label="调解率"
align="center"
>
</el-table-column>
<el-table-column
prop="yjzlczsl"
show-overflow-tooltip
label="预警指令处置数量"
align="center"
>
</el-table-column>
<el-table-column
prop="ryyjsl"
show-overflow-tooltip
label="人员移交数量"
align="center"
>
</el-table-column>
<el-table-column
prop="pccls"
show-overflow-tooltip
label="盘查车辆数量"
align="center"
>
</el-table-column>
<el-table-column
prop="clyjsl"
show-overflow-tooltip
label="移交数量"
align="center"
>
</el-table-column>
</el-table>
<div class="fenye" :style="{ top: tableHeight1 + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChangezq"
@current-change="handleCurrentChangezq"
:current-page="formzq.current"
:page-sizes="[10, 20, 50]"
:page-size="form.size"
layout="total, sizes, prev, pager, next, jumper"
:total="totalzq"
>
</el-pagination>
</div>
</div>
</div>
<!-- 人员档案弹窗 -->
<PersonnelDialog
:D_BZ_XB="D_BZ_XB"
:D_BZ_MZ="D_BZ_MZ"
:D_BZ_XLCJ="D_BZ_XLCJ"
:D_BZ_XFXLLX="D_BZ_XFXLLX"
ref="personDialog"
/>
</div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import ZbCalendar from "@/components/ZbCalendar/index";
import PersonnelDialog from "../patrol-police/personnelProfile.vue";
import { selectDeptPage, getUserInfoToId } from "@/api/user-manage";
import Person from "@/assets/images/default_male.png";
import {
getTbJcglXfll,
deleteTbJcglXfll,
getTbJcglXfllInfo,
updateTbJcglXfll,
getTbJcglBq,
addTbJcglXfll,
getCountBqsl,
batchDeleteList,
ryLz
} from "@/api/xfll";
import { ElMessage } from "element-plus";
import {
ref,
reactive,
onMounted,
computed,
getCurrentInstance,
onUnmounted,
defineExpose,
defineEmits
} from "vue";
const urlImg = ref("/mosty-base/minio/image/download/");
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
const tableHeight1 = ref(); // 表格高度
const title = ref("新增巡逻辅警信息");
const chackipt = ref(false);
const totalzq = ref(0);
const loadingTable = ref(true);
const emit = defineEmits(["deleteMore"]);
const props = {
expandTrigger: "children",
children: "childDeptList",
label: "orgName",
value: "orgCode",
checkStrictly: true,
emitPath: false
};
const zqjlData = ref([
{
zqbm: "xxx部门",
jzcy: "张三、李四、王五...",
sc: "8小时",
jqczsl: "13件",
yjzls: "21",
xctjs: "16件",
tjl: "30%",
pcrysl: 13,
ryyjsl: 2,
lc: "123KM",
pccls: 4,
clyjsl: 1,
createtime: "2022-06-01 11:42"
},
{
zqbm: "xxx部门",
jzcy: "张三、李四、王五...",
sc: "8小时",
jqczsl: "13件",
xctjs: "16件",
tjl: "30%",
lc: "123KM",
yjzls: "21",
pcrysl: 13,
ryyjsl: 2,
pccls: 4,
clyjsl: 1,
createtime: "2022-06-02 14:44"
}
]);
//获取字典数据
const { proxy } = getCurrentInstance();
const {
D_BZ_XB,
D_BZ_WHCD,
D_BZ_ZZMM,
D_BZ_HYZK,
D_BZ_MZ,
D_BZ_XFXLLX,
D_BZ_XLCJ,
D_BZ_SFLZ
} = proxy.$dict(
"D_BZ_XB",
"D_BZ_WHCD",
"D_BZ_ZZMM",
"D_BZ_HYZK",
"D_BZ_MZ",
"D_BZ_XFXLLX",
"D_BZ_XLCJ",
"D_BZ_SFLZ"
);
const bqList = ref([]); //标签数据
const lxList = reactive([]); //搜索框标签选择数据
//筛选条件参数
const form = ref({
current: 1,
size: 20,
fjName: "",
sfzh: "",
ssbmdm: "",
xtSjzt: "1"
});
//筛选条件参数执勤
const formzq = ref({
current: 1,
size: 20
});
const tableData = ref([]); //表单数据
const total = ref(0); //总数据
//执勤记录弹窗
const zqjl = ref(false);
const mapActive = ref(false);
const dialogFormVisible = ref(false); //是否显示弹窗
const elform = ref(null); //表单对象
const depList = ref([]); //部门数据
const cascader = ref(null); //级联选择器
const isDisabled = ref(false); //是否警用保存按钮
const loading = ref(false); //按钮是否显示加载
const ssbmIds = ref([]); //级联选择器回显ID
const ids = ref([]); //批量删除的ID
const keyCount = ref(0); //tabel组件刷新值
//新增表单参数
const addFormDefault = ref({});
const addForm = ref({
id: "",
fl: "02",
xm: "",
sfzh: "",
xbdm: "",
mzdm: "",
zzmm: "",
hyzk: "",
whcddm: "",
jh: "",
lx: "02",
lxdh: "",
bz: "",
ssbm: "",
ssbmdm: ssbmIds.value[ssbmIds.value - 1]
});
const imgUrl = ref("");
//新增表单验证数据
const rules = reactive({
xm: [
{
required: true,
message: "请输入辅警姓名"
}
],
sfzh: [
{
required: true,
message: "请输入身份证号码"
}
],
xbdm: [
{
required: true,
message: "请选择性别",
trigger: "change"
}
],
mzdm: [
{
required: true,
message: "请选择民族"
}
],
zzmm: [
{
required: true,
message: "请选择政治面貌"
}
],
hyzk: [
{
required: true,
message: "请选择婚姻状况"
}
],
whcddm: [
{
required: true,
message: "请选择学历"
}
],
lxdh: [
{
required: true,
message: "请输入联系电话"
}
],
lx: [
{
required: true,
message: "请选择人员类别"
}
]
});
function chackZqjl(item) {
zqjl.value = true;
}
function upImgFile(row) {}
function upImg(row) {
addForm.value.tpid = row.data;
imgUrl.value = urlImg.value + row.data;
}
function deletImg() {
imgUrl.value = "";
addForm.value.tpid = "";
}
function closeDialog() {
dialogFormVisible.value = false;
isDisabled.value = false;
imgUrl.value = "";
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
}
function setBm() {
if (ssbmIds.value.length >= 1) {
const info = cascader.value.getCheckedNodes()[0];
addForm.value.ssbm = info.label;
addForm.value.ssbmdm = info.value;
}
}
onMounted(() => {
addFormDefault.value = JSON.parse(JSON.stringify(addForm.value));
//获取搜索栏标签选择数据
getCountBqsl().then((res) => {
res.forEach((item) => {
lxList.push(item);
});
});
getListData();
//获取部门信息
selectDeptPage({}).then((res) => {
depList.value = res.records;
});
tabHeightFn();
window.onresize = function () {
tabHeightFn();
};
//获取新增标签数据
let data = {
pageSize: 5000,
pageCurrent: 1,
bqlx: "SKL"
};
getTbJcglBq(data).then((res) => {
bqList.value = res.records.filter((item) => {
return item.xtSjzt == "1";
});
});
proxy.mittBus.on("mittFn", (data) => {
keyCount.value = data;
});
});
onUnmounted(() => {
proxy.mittBus.off("mittFn");
});
//批量数据
const handleSelectionChange = (val) => {
ids.value = val.map((item) => {
return item.id;
});
emit("deleteMore", ids.value);
};
//点击标签功能
function chackJn(item) {
form.value.current = 1;
form.value.bqId = item.id;
form.value.bqlx = item.bqlx;
getListData();
}
//批量删除数据
const batchDelete = () => {
proxy
.$confirm("确定要删除", "警告", {
type: "warning"
})
.then(() => {
batchDeleteList(ids.value).then((res) => {
ElMessage({
message: "删除成功",
type: "success"
});
getListData();
});
})
.catch(() => {
proxy.$message.info("已取消");
});
};
//设置详情
function setInfo(e) {
title.value = "巡逻辅警详情";
getTbJcglXfllInfo(e.id).then((res) => {
ssbmIds.value = [];
proxy.$set(res.ssbmdm, depList.value, "childDeptList", (res) => {
ssbmIds.value.push(res);
});
addForm.value = res;
// form.value.ssbmdm = ssbmIds.value[ssbmIds.value.length - 1];
addForm.value = res;
dialogFormVisible.value = true;
isDisabled.value = true;
});
}
//更改查询条数
function handleSizeChange(e) {
form.value.size = e;
form.value.current = 1;
getListData();
}
//分页查询
function handleCurrentChange(e) {
form.value.current = e;
getListData();
}
//更改查询条数
function handleSizeChangezq(e) {
formzq.value.size = e;
formzq.value.current = 1;
getListData();
}
//分页查询
function handleCurrentChangezq(e) {
formzq.value.current = e;
getListData();
}
//查询条件选择部门
function handleChange(e) {
const ids = JSON.parse(JSON.stringify(e));
}
//新增提交
function submit() {
elform.value.validate((valid) => {
if (valid) {
loading.value = true;
let data = addForm.value;
data.bqId = addForm.value.sklList;
if (data.id) {
updateTbJcglXfll(data)
.then((res) => {
ElMessage({ message: "修改成功", type: "success" });
closeDialog();
handleFilter();
loading.value = false;
})
.catch(() => {
loading.value = false;
});
} else {
addTbJcglXfll(data)
.then((res) => {
ElMessage({ message: "添加成功", type: "success" });
closeDialog();
handleFilter();
loading.value = false;
})
.catch(() => {
loading.value = false;
});
}
}
});
}
//重置搜索
function reset() {
form.value = {
current: 1,
size: 20,
fjName: "",
sfzh: "",
ssbmdm: "",
xtSjzt: "1"
};
getListData();
}
//点击查询
const handleFilter = () => {
form.value.current = 1;
getListData();
};
//获取数据
const getListData = () => {
loadingTable.value = true;
let data = {
fl: "02",
sfzh: form.value.sfzh,
xm: form.value.fjName,
pageSize: form.value.size,
pageCurrent: form.value.current,
bqId: form.value.bqId,
bqlx: form.value.bqlx,
ssbmdm: form.value.ssbmdm
};
getTbJcglXfll(data)
.then((res) => {
loadingTable.value = false;
tableData.value = res.records;
total.value = res.total;
})
.catch(() => {
loadingTable.value = false;
});
};
function add() {
chackipt.value = false;
title.value = "新增巡逻辅警信息";
dialogFormVisible.value = true;
ssbmIds.value = [];
addForm.value = JSON.parse(JSON.stringify(addFormDefault.value));
imgUrl.value = "";
}
//点击修改打开弹窗
function onClickUpdate(e) {
chackipt.value = true;
title.value = "修改巡逻辅警信息";
getTbJcglXfllInfo(e.id).then((res) => {
ssbmIds.value = [];
proxy.$set(res.ssbmdm, depList.value, "childDeptList", (res) => {
ssbmIds.value.push(res);
});
addForm.value = res;
imgUrl.value = res.tpid ? urlImg.value + res.tpid : "";
addForm.value.sklList = res.sklList.map((item) => item.id);
dialogFormVisible.value = true;
});
}
//删除人员
function delDictItem(e) {
proxy
.$confirm("确定要删除", "警告", {
type: "warning"
})
.then(() => {
batchDeleteList([e.id]).then((res) => {
ElMessage({
message: "删除成功",
type: "success"
});
getListData();
});
})
.catch(() => {
proxy.$message.info("已取消");
});
}
// 表格高度计算
const tabHeightFn = () => {
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 276;
tableHeight1.value = window.innerHeight - 57 - 20 - 200;
};
// 人员档案
const personDialog = ref(null);
function getDocument(row) {
personDialog.value.init(row);
}
defineExpose({
add,
batchDelete,
handleFilter
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
.dialog {
.mj_box {
display: flex;
padding: 3rem;
.item {
height: 40rem;
width: 20rem;
}
.leftAndRiight {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
width: 10rem;
}
}
}
.treeLeft,
.checkedRight {
padding: 1.5rem;
border: 1px solid #07376d;
}
.total {
display: flex;
// align-items: center;
}
.jnbq {
margin-left: 1rem;
margin-bottom: 0.5rem;
> .el-button.on {
background: #046ce4;
}
}
::v-deep .el-input.is-disabled .el-input__inner {
border-color: var(--el-disabled-border-color);
color: var(--el-disabled-text-color);
cursor: not-allowed;
}
::v-deep .el-select .el-input.is-disabled .el-input__inner:hover,
::v-deep .el-select .el-input.is-disabled .el-input__inner {
border-color: #09317f;
}
.phone {
width: 95px;
height: 120px;
.el-image {
width: 95px;
max-height: 120px;
}
}
::v-deep .el-upload {
width: 90px;
height: 100px;
border: 1px dashed #e0e0e0;
margin-bottom: 14px;
.el-icon {
margin-top: 34px;
font-size: 26px;
}
.el-image {
width: 100%;
height: 100%;
}
}
</style>