1154 lines
33 KiB
Vue
1154 lines
33 KiB
Vue
<template>
|
|
<div>
|
|
<div class="titleBox">
|
|
<div class="title">巡防民警</div>
|
|
<div class="btnBox">
|
|
<el-button type="primary" @click="add">
|
|
<el-icon style="vertical-align: middle">
|
|
<CirclePlus />
|
|
</el-icon>
|
|
<span style="vertical-align: middle">新增</span>
|
|
</el-button>
|
|
<el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
|
|
<el-icon style="vertical-align: middle">
|
|
<Delete />
|
|
</el-icon>
|
|
<span style="vertical-align: middle">批量删除</span>
|
|
</el-button>
|
|
</div>
|
|
</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.mjName" 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 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" width="130" show-overflow-tooltip align="center" label="民警姓名">
|
|
</el-table-column>
|
|
<el-table-column prop="sfzh" width="200" show-overflow-tooltip align="center" label="身份证号码">
|
|
</el-table-column>
|
|
<el-table-column prop="ssbm" label="所属部门" show-overflow-tooltip align="center"></el-table-column>
|
|
<el-table-column prop="jh" label="警号" width="120" 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="(dialogFormVisible = false), (isDisabled = false)">关闭</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="xm">
|
|
<el-input v-model="addForm.xm" placeholder="请输入民警姓名" clearable style="width: 100%" />
|
|
</el-form-item>
|
|
<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="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="ssbmid">
|
|
<MOSTY.Department :placeholder="addForm.ssbm" style="width: 100%" ref="cascader" clearable filterable
|
|
:options="depList" :props="props" @getDepValue="handleChange" v-model="addForm.ssbmdm" />
|
|
</el-form-item>
|
|
<el-form-item label="人员类别" prop="lx">
|
|
<el-select clearable v-model="addForm.lx" placeholder="请选择" style="width: 100%">
|
|
<el-option v-for="(item, index) in D_BZ_RYLB" :key="index" :label="item.label"
|
|
:value="item.value"></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>
|
|
<div class="dialog" v-if="chooseUserVisible">
|
|
<div class="head_box">
|
|
<span class="title">选择用户</span>
|
|
<div>
|
|
<el-button v-if="chooseUserVisible" type="primary" size="small" @click="plADD">保存</el-button>
|
|
<el-button v-else type="primary" size="small" @click="chooseUserVisible = false">保存</el-button>
|
|
<el-button size="small" @click="chooseUserVisible = false">关闭</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="my_transfer">
|
|
<div class="tree">
|
|
<MOSTY.DepartmentTree width="300px" placeholder="管理部门ID" clearable filterable :isBmId="true"
|
|
v-model="userQuery.deptId" />
|
|
</div>
|
|
<div class="left">
|
|
<div class="serch">
|
|
<el-form :model="userQuery" :inline="true">
|
|
<el-form-item label="用户名">
|
|
<el-input placeholder="请输入用户名" v-model="userQuery.loginName" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话号码">
|
|
<el-input placeholder="请输入电话" v-model="userQuery.phone" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号码">
|
|
<el-input v-model="userQuery.idEntityCard" placeholder="请输入身份证号码" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="是否包含下级">
|
|
<el-select v-model="userQuery.isChild">
|
|
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
|
}}</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="success" @click="getListLeftData">查询</el-button>
|
|
<el-button type="info" @click="resetLeftdata()">
|
|
重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="tableBox" :style="{ height: tableHeight1 + 'px' }" style="border: 1px solid #07376d">
|
|
<el-table :data="tableLeftData" border row-key="id" height="100%" style="width:100%"
|
|
@selection-change="handleSelectionChangeLeft">
|
|
<el-table-column type="selection" width="40" align="center" />
|
|
<el-table-column prop="deptName" label="所属部门" align="center" />
|
|
<el-table-column prop="userName" label="用户姓名" align="center" />
|
|
<el-table-column prop="idEntityCard" label="身份证号" align="center" />
|
|
<el-table-column prop="mobile" label="电话号码" align="center" />
|
|
<el-table-column prop="inDustRialId" label="警号" align="center" />
|
|
</el-table>
|
|
<div>
|
|
<el-pagination class="pagination" @size-change="handleSizeChangeUser"
|
|
@current-change="handleCurrentChangeUser" :current-page="userQuery.current"
|
|
:page-sizes="[10, 20, 50, 100]" :page-size="userQuery.size"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="totalUser">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn">
|
|
<el-button :icon="Back" circle @click="upLeft" />
|
|
<el-button :icon="Right" circle @click="upRight" />
|
|
</div>
|
|
<div class="right" style="height: 700px; border: 1px solid #07376d">
|
|
<el-table :data="tableRightData" ref="multipleTableRef" border row-key="id" height="100%"
|
|
@selection-change="handleSelectionChangeRight">
|
|
<el-table-column type="selection" width="40" align="center" />
|
|
<el-table-column prop="deptName" label="所属部门" align="center"></el-table-column>
|
|
<el-table-column prop="userName" label="用户姓名" align="center"></el-table-column>
|
|
<el-table-column prop="inDustRialId" label="警号" align="center"></el-table-column>
|
|
</el-table>
|
|
</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 PersonnelDialog from "./personnelProfile.vue";
|
|
import ZbCalendar from "@/components/ZbCalendar/index";
|
|
import { Right, Back } from "@element-plus/icons-vue";
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import Person from "@/assets/images/default_male.png";
|
|
import { selectDeptPage, selectUserDeptPage } from "@/api/user-manage";
|
|
import {
|
|
getTbJcglXfll,
|
|
deleteTbJcglXfll,
|
|
getTbJcglXfllInfo,
|
|
updateTbJcglXfll,
|
|
addTbJcglXfll,
|
|
getTbJcglBq,
|
|
getCountBqsl,
|
|
batchDeleteList,
|
|
getSfhList,
|
|
ryLz
|
|
} from "@/api/xfll";
|
|
import { getSysUserList } from "@/api/user-manage";
|
|
import { ElMessage } from "element-plus";
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
computed,
|
|
getCurrentInstance,
|
|
onUnmounted,
|
|
toRaw,
|
|
watch
|
|
} from "vue";
|
|
const multipleTableRef = ref(null);
|
|
const tableLeftData = ref([]);
|
|
//左边选中数据
|
|
const leftdata = ref([]);
|
|
//右边选中数据
|
|
const rightData = ref([]);
|
|
const urlImg = ref("/mosty-base/minio/image/download/");
|
|
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 personDialog = ref(null);
|
|
|
|
const tableRightData = ref([]);
|
|
const treeRef = ref(null);
|
|
const defaultProps = {
|
|
children: "children",
|
|
label: "label"
|
|
};
|
|
const data = ref([]);
|
|
//用户穿梭框搜索数据
|
|
const userQuery = ref({
|
|
current: 1,
|
|
size: 20,
|
|
deptId: "",
|
|
loginName: "",
|
|
phone: "",
|
|
isChild: "1",
|
|
idEntityCard: ""
|
|
});
|
|
const imgUrl = ref("");
|
|
function resetLeftdata() {
|
|
userQuery.value = {
|
|
current: 1,
|
|
size: 20
|
|
};
|
|
getListLeftData();
|
|
}
|
|
const value = ref([]);
|
|
const searchBox = ref(null); // 搜索盒子
|
|
const tableHeight = ref(); // 表格高度
|
|
const title = ref("新增巡逻民警信息");
|
|
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 upRight() {
|
|
let num = leftdata.value.length;
|
|
leftdata.value.forEach((v) => {
|
|
const index = tableRightData.value.indexOf(v);
|
|
const i = tableLeftData.value.indexOf(v);
|
|
if (index == -1 && idEntityList.value.indexOf(v.idEntityCard) == -1) {
|
|
tableRightData.value.push(v);
|
|
multipleTableRef.value.toggleRowSelection(v, true);
|
|
tableLeftData.value.splice(i, 1);
|
|
num--;
|
|
}
|
|
});
|
|
if (num != 0) {
|
|
ElMessage({ message: "请勿重复添加", type: "warning" });
|
|
}
|
|
}
|
|
// 人员档案
|
|
function getDocument(row) {
|
|
personDialog.value.init(row);
|
|
}
|
|
function upLeft() {
|
|
rightData.value.forEach((v) => {
|
|
const index = tableLeftData.value.indexOf(v);
|
|
const i = tableRightData.value.indexOf(v);
|
|
if (index == -1) {
|
|
tableLeftData.value.push(v);
|
|
tableRightData.value.splice(i, 1);
|
|
}
|
|
});
|
|
}
|
|
//级联选择器配置
|
|
const props = {
|
|
expandTrigger: "children",
|
|
children: "childDeptList",
|
|
label: "orgName",
|
|
value: "id",
|
|
checkStrictly: true
|
|
// emitPath: false
|
|
};
|
|
//获取字典数据
|
|
const { proxy } = getCurrentInstance();
|
|
const {
|
|
D_BZ_XB,
|
|
D_BZ_WHCD,
|
|
D_BZ_ZZMM,
|
|
D_BZ_HYZK,
|
|
D_BZ_MZ,
|
|
D_BZ_RYLB,
|
|
D_BZ_SF,
|
|
D_BZ_XLCJ,
|
|
D_BZ_XFXLLX,
|
|
D_BZ_SFLZ
|
|
} = proxy.$dict(
|
|
"D_BZ_XB",
|
|
"D_BZ_WHCD",
|
|
"D_BZ_ZZMM",
|
|
"D_BZ_HYZK",
|
|
"D_BZ_MZ",
|
|
"D_BZ_RYLB",
|
|
"D_BZ_SF",
|
|
"D_BZ_XLCJ",
|
|
"D_BZ_XFXLLX",
|
|
"D_BZ_SFLZ"
|
|
);
|
|
|
|
const lxList = reactive([]); //搜索框标签选择数据
|
|
//筛选条件参数
|
|
const form = ref({
|
|
current: 1,
|
|
size: 20,
|
|
mjName: "",
|
|
sfzh: "",
|
|
ssbmdm: JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode,
|
|
bqId: "",
|
|
bqlx: "",
|
|
xtSjzt: "1"
|
|
});
|
|
//筛选条件参数执勤记录
|
|
const formzq = ref({
|
|
current: 1,
|
|
size: 20
|
|
});
|
|
const chooseUserVisible = ref(false); //是否显示选择用户弹窗
|
|
const tableData = ref([]); //表单数据
|
|
const total = ref(0); //总数据
|
|
//执勤记录弹窗
|
|
const zqjl = ref(false);
|
|
const mapActive = ref(false);
|
|
const totalzq = ref(0);
|
|
const dialogFormVisible = ref(false); //是否显示弹窗
|
|
const elform = ref(null); //表单对象
|
|
const loadingTable = ref(true);
|
|
const cascader = ref(null); //级联选择器
|
|
const depList = ref([]); //部门数据
|
|
const bqList = ref([]); //标签数据
|
|
const tableHeight1 = ref(0);
|
|
const bqIdList = ref([]); // 选中的
|
|
const isDisabled = ref(false); //是否警用保存按钮
|
|
const ssbmIds = ref([]); //级联选择器回显ID
|
|
const ids = ref([]); //批量删除的ID
|
|
const chackipt = ref(false);
|
|
const keyCount = ref(0); //tabel组件刷新值
|
|
//列表身份证集合，穿梭框去重
|
|
const idEntityList = ref([]);
|
|
//新增表单参数
|
|
const loading = ref(false); //是否显示按钮加载
|
|
const listQuery = ref({
|
|
current: 1,
|
|
size: 20,
|
|
loginName: "",
|
|
phone: "",
|
|
isChild: "1"
|
|
});
|
|
const addForm = ref({
|
|
id: "",
|
|
fl: "01",
|
|
xm: "",
|
|
sfzh: "",
|
|
xbdm: "",
|
|
mzdm: "",
|
|
zzmm: "",
|
|
hyzk: "",
|
|
whcddm: "",
|
|
jh: "",
|
|
jx: "",
|
|
lx: "",
|
|
lxdh: "",
|
|
sklList: [],
|
|
bz: "",
|
|
ssbm: "",
|
|
ssbmid: ssbmIds.value[ssbmIds.value - 1]
|
|
});
|
|
//新增表单验证数据
|
|
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: "请选择学历"
|
|
}
|
|
],
|
|
jh: [
|
|
{
|
|
required: true,
|
|
message: "请输入民警编号"
|
|
}
|
|
],
|
|
lxdh: [
|
|
{
|
|
required: true,
|
|
message: "请输入联系电话"
|
|
}
|
|
],
|
|
jx: [
|
|
{
|
|
required: true,
|
|
message: "请选择警衔"
|
|
}
|
|
],
|
|
bqId: [
|
|
{
|
|
required: true,
|
|
message: "请选择技能"
|
|
}
|
|
]
|
|
});
|
|
function chackZqjl(item) {
|
|
zqjl.value = true;
|
|
}
|
|
function setBm() {
|
|
if (ssbmIds.value.length > 1) {
|
|
const info = cascader.value.getCheckedNodes()[0];
|
|
addForm.value.ssxgaj = info.label;
|
|
addForm.value.ssxgajdm = info.value;
|
|
}
|
|
}
|
|
const filterNode = (value, data) => {
|
|
if (!value) return true;
|
|
return data.label.includes(value);
|
|
};
|
|
onMounted(() => {
|
|
let deopt = JSON.parse(localStorage.getItem("deptId"));
|
|
userQuery.value.deptId = deopt[0].deptId;
|
|
getLeftdata();
|
|
//获取搜索栏标签选择数据
|
|
getCountBqsl().then((res) => {
|
|
res.forEach((item) => {
|
|
lxList.push(item);
|
|
});
|
|
});
|
|
|
|
getListData();
|
|
//获取部门信息
|
|
selectDeptPage({}).then((res) => {
|
|
depList.value = res.records;
|
|
});
|
|
//获取新增标签数据
|
|
let data = {
|
|
pageSize: 5000,
|
|
pageCurrent: 1,
|
|
xtSjzt: "1",
|
|
bqlx: "SKL"
|
|
};
|
|
getTbJcglBq(data).then((res) => {
|
|
bqList.value = res.records.filter((item) => {
|
|
return item.xtSjzt == "1";
|
|
});
|
|
});
|
|
tabHeightFn();
|
|
window.onresize = function () {
|
|
tabHeightFn();
|
|
};
|
|
proxy.mittBus.on("mittFn", (data) => {
|
|
keyCount.value = data;
|
|
});
|
|
getListLeftData();
|
|
});
|
|
function add() {
|
|
tableRightData.value = [];
|
|
title.value = "新增巡逻民警信息";
|
|
chooseUserVisible.value = true;
|
|
ssbmIds.value = [];
|
|
addForm.value = {
|
|
id: "",
|
|
fl: "01",
|
|
xm: "",
|
|
sfzh: "",
|
|
xbdm: "",
|
|
mzdm: "",
|
|
zzmm: "",
|
|
hyzk: "",
|
|
whcddm: "",
|
|
jh: "",
|
|
jx: "",
|
|
lx: "",
|
|
lxdh: "",
|
|
sklList: [],
|
|
bz: "",
|
|
ssbm: "",
|
|
ssbmid: "",
|
|
ssbmdm: JSON.parse(window.localStorage.getItem("deptId"))[0].deptCode
|
|
};
|
|
getLeftdata();
|
|
}
|
|
onUnmounted(() => {
|
|
proxy.mittBus.off("mittFn");
|
|
});
|
|
//批量数据
|
|
const handleSelectionChange = (val) => {
|
|
ids.value = [];
|
|
if (val) {
|
|
val.forEach((item) => {
|
|
ids.value.push(item.id);
|
|
});
|
|
}
|
|
};
|
|
function handleSelectionChangeLeft(val) {
|
|
leftdata.value = val;
|
|
}
|
|
function handleSelectionChangeRight(val) {
|
|
rightData.value = val;
|
|
}
|
|
watch(
|
|
() => userQuery.value.deptId,
|
|
(newVal) => {
|
|
getListLeftData();
|
|
}
|
|
);
|
|
function getLeftdata() {
|
|
// selectUserDeptPage(userQuery.value).then((res) => {
|
|
// tableLeftData.value = [];
|
|
// let rightIds = tableRightData.value.map((item) => item.id);
|
|
// res.records.forEach((v) => {
|
|
// if (rightIds.indexOf(v.id) == -1) {
|
|
// tableLeftData.value.push(v);
|
|
// }
|
|
// });
|
|
// totalUser.value = res.total;
|
|
// });
|
|
}
|
|
|
|
// 获取数据的方法
|
|
const getListLeftData = async () => {
|
|
const res = await getSysUserList(userQuery.value);
|
|
tableLeftData.value = res?.records;
|
|
totalUser.value = res.total;
|
|
};
|
|
//批量删除数据
|
|
const batchDelete = () => {
|
|
proxy
|
|
.$confirm("确定要删除", "警告", {
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
batchDeleteList(ids.value).then((res) => {
|
|
ElMessage({
|
|
message: "删除成功",
|
|
type: "success"
|
|
});
|
|
getListData();
|
|
});
|
|
})
|
|
.catch(() => {
|
|
proxy.$message.info("已取消");
|
|
});
|
|
};
|
|
// 用户穿梭框相关
|
|
const totalUser = ref(0);
|
|
function handleSizeChangeUser(e) {
|
|
userQuery.value.size = e;
|
|
getListLeftData();
|
|
}
|
|
function handleCurrentChangeUser(e) {
|
|
userQuery.value.current = e;
|
|
getListLeftData();
|
|
}
|
|
//更改查询条数
|
|
function handleSizeChangezq(e) {
|
|
formzq.value.size = e;
|
|
formzq.value.current = 1;
|
|
getListData();
|
|
}
|
|
//分页查询
|
|
function handleCurrentChangezq(e) {
|
|
formzq.value.current = e;
|
|
getListData();
|
|
}
|
|
//更改查询条数
|
|
function handleSizeChange(e) {
|
|
form.value.size = e;
|
|
form.value.current = 1;
|
|
getListData();
|
|
}
|
|
//分页查询
|
|
function handleCurrentChange(e) {
|
|
form.value.current = e;
|
|
getListData();
|
|
}
|
|
//新增选择部门
|
|
function addHandleChange(e) {
|
|
const info = cascader.value.getCheckedNodes()[0];
|
|
addForm.value.ssbm = info.label;
|
|
addForm.value.ssbmid = info.value;
|
|
}
|
|
//选择标签
|
|
function onChangeBQ(e) {
|
|
addForm.value.bqId = JSON.parse(JSON.stringify(e));
|
|
}
|
|
//查询条件选择部门
|
|
function handleChange(e) {
|
|
addForm.value.ssbmid = e ? e.id : ''
|
|
addForm.value.ssbm = e ? e.orgName : ''
|
|
}
|
|
//新增提交
|
|
function submit() {
|
|
elform.value.validate((valid) => {
|
|
if (valid) {
|
|
loading.value = true;
|
|
let data = addForm.value;
|
|
if (data.id) {
|
|
updateTbJcglXfll(data)
|
|
.then((res) => {
|
|
ElMessage({
|
|
message: "修改成功",
|
|
type: "success"
|
|
});
|
|
dialogFormVisible.value = false;
|
|
loading.value = false;
|
|
form.value.current = 1;
|
|
getListData();
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
} else {
|
|
addTbJcglXfll(data)
|
|
.then((res) => {
|
|
ElMessage({
|
|
message: "添加成功",
|
|
type: "success"
|
|
});
|
|
dialogFormVisible.value = false;
|
|
loading.value = false;
|
|
form.value.current = 1;
|
|
getListData();
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
//批量新增
|
|
function plADD() {
|
|
const allData = tableRightData.value.map((item) => {
|
|
const itemForm = {
|
|
ryid: item.id,
|
|
ssbmid: item.deptId,
|
|
ssbm: item.deptName,
|
|
ssbmdm: item.deptCode,
|
|
lxdh: item.mobile,
|
|
xm: item.userName,
|
|
sfzh: item.idEntityCard,
|
|
whcddm: item.whcd,
|
|
fl: "01",
|
|
jh: item.inDustRialId,
|
|
zzmm: item.politic,
|
|
hyzk: item.marital,
|
|
lx: item.type,
|
|
xbdm: item.sex,
|
|
mzdm: item.nation
|
|
};
|
|
return addTbJcglXfll(itemForm);
|
|
});
|
|
Promise.all(allData).then((res) => {
|
|
ElMessage({
|
|
message: "添加成功",
|
|
type: "success"
|
|
});
|
|
chooseUserVisible.value = false;
|
|
dialogFormVisible.value = false;
|
|
getListData();
|
|
});
|
|
}
|
|
|
|
//点击标签功能
|
|
function chackJn(item) {
|
|
form.value.current = 1;
|
|
form.value.bqId = item.id;
|
|
form.value.bqlx = item.bqlx;
|
|
getListData();
|
|
}
|
|
//重置搜索
|
|
function reset() {
|
|
form.value = {
|
|
current: 1,
|
|
size: 20,
|
|
mjName: "",
|
|
sfzh: "",
|
|
ssbmdm: "",
|
|
bqId: "",
|
|
bqlx: "",
|
|
xtSjzt: "1"
|
|
};
|
|
getListData();
|
|
}
|
|
//点击查询
|
|
const handleFilter = () => {
|
|
form.value.current = 1;
|
|
getListData();
|
|
};
|
|
//获取数据
|
|
const getListData = () => {
|
|
loadingTable.value = true;
|
|
console.log(form.value.ssbmdm, 'form.value.ssbmdm++++++++++');
|
|
let data = {
|
|
fl: "01",
|
|
sfzh: form.value.sfzh,
|
|
xm: form.value.mjName,
|
|
pageSize: form.value.size,
|
|
pageCurrent: form.value.current,
|
|
bqId: form.value.bqId,
|
|
bqlx: form.value.bqlx,
|
|
ssbmdm: form.value.ssbmdm,
|
|
xtSjzt: form.value.xtSjzt
|
|
};
|
|
getTbJcglXfll(data)
|
|
.then((res) => {
|
|
if (res.records.length > 0) {
|
|
res.records.forEach((item) => {
|
|
if (item.sklTag) {
|
|
item.jnbqList = item.sklTag.split(",");
|
|
}
|
|
if (item.expTag) {
|
|
item.jybqList = item.expTag.split(",").splice(2);
|
|
}
|
|
});
|
|
}
|
|
tableData.value = res.records;
|
|
total.value = res.total;
|
|
loadingTable.value = false;
|
|
})
|
|
.catch(() => {
|
|
loadingTable.value = false;
|
|
});
|
|
// 获取身份证数据
|
|
getSfhList().then((res) => {
|
|
idEntityList.value = res;
|
|
});
|
|
};
|
|
//设置详情
|
|
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;
|
|
dialogFormVisible.value = true;
|
|
});
|
|
}
|
|
//点击修改打开弹窗
|
|
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;
|
|
addForm.value.ssbmid = addForm.value.ssbmid * 1;
|
|
addForm.value.ssbmid = addForm.value.ssbmid * 1;
|
|
addForm.value.sklList = res.sklList.map((item) => item.id);
|
|
dialogFormVisible.value = true;
|
|
imgUrl.value = res.tpid ? urlImg.value + res.tpid : "";
|
|
});
|
|
}
|
|
//删除人员
|
|
function delDictItem(e) {
|
|
proxy
|
|
.$confirm("确定要删除", "警告", {
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
batchDeleteList([e.id]).then((res) => {
|
|
ElMessage({
|
|
message: "删除成功",
|
|
type: "success"
|
|
});
|
|
getListData();
|
|
});
|
|
})
|
|
.catch(() => {
|
|
proxy.$message.info("已取消");
|
|
});
|
|
}
|
|
|
|
//人员离职
|
|
function lzList(e) {
|
|
proxy
|
|
.$confirm("确定要离职", "警告", {
|
|
type: "warning"
|
|
})
|
|
.then(() => {
|
|
ryLz([e.id]).then((res) => {
|
|
ElMessage({
|
|
message: "成功",
|
|
type: "success"
|
|
});
|
|
getListData();
|
|
});
|
|
})
|
|
.catch(() => {
|
|
proxy.$message.info("已取消");
|
|
});
|
|
}
|
|
|
|
// 表格高度计算
|
|
const tabHeightFn = () => {
|
|
tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 274;
|
|
tableHeight1.value = window.innerHeight - 340;
|
|
};
|
|
</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;
|
|
}
|
|
|
|
.jnbq {
|
|
margin-left: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
|
|
>.el-button.on {
|
|
background: #046ce4;
|
|
}
|
|
}
|
|
|
|
.head_box {
|
|
// width: 300px;
|
|
width: 97%;
|
|
}
|
|
|
|
.my_transfer {
|
|
height: calc(100% - 50px);
|
|
display: flex;
|
|
|
|
.btn {
|
|
width: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.left {
|
|
margin: 12px;
|
|
flex: 1;
|
|
position: relative;
|
|
|
|
.tableBox {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.serch {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 96px;
|
|
|
|
>.el-form--inline {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
>.el-form-item--default {
|
|
width: 31%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tableBox {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 380px;
|
|
margin: 12px;
|
|
}
|
|
}
|
|
|
|
.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>
|