4 changed files with 484 additions and 61 deletions
@ -0,0 +1,279 @@ |
|||||||
|
<template> |
||||||
|
<div class="flex gap"> |
||||||
|
<!-- <el-tag type="info" effect="plain" closable v-for="(item, index) in modelValue" :key="item" @close="handleRemove(index)">{{ item.name }}</el-tag>--> |
||||||
|
<el-button type="primary" plain @click="show = true"> |
||||||
|
<template #icon> |
||||||
|
<icon name="el-icon-Plus" style="width: 8px" /> |
||||||
|
</template> |
||||||
|
补充抽检人员 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<el-dialog title="选择警员" v-model="show" width="60vw" top="5vh"> |
||||||
|
<div style="min-height: 70vh"> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-scrollbar max-height="70vh"> |
||||||
|
<el-tree |
||||||
|
:data="treeData" |
||||||
|
:props="{ label: 'shortName', value: 'id' }" |
||||||
|
:default-expanded-keys="['12630']" |
||||||
|
node-key="id" |
||||||
|
@node-click="handleSelectDepart" |
||||||
|
/> |
||||||
|
</el-scrollbar> |
||||||
|
</el-col> |
||||||
|
<el-col :span="18"> |
||||||
|
<header class="flex between mb-20"> |
||||||
|
<el-form class="flex gap wrap"> |
||||||
|
<el-input |
||||||
|
placeholder="警员姓名" |
||||||
|
v-model="query.name" |
||||||
|
clearable |
||||||
|
style="width: 190px" |
||||||
|
/> |
||||||
|
<el-input |
||||||
|
placeholder="请输入" |
||||||
|
v-model="query.empNo" |
||||||
|
clearable |
||||||
|
style="width: 190px" |
||||||
|
/> |
||||||
|
<el-input |
||||||
|
placeholder="身份证号码" |
||||||
|
v-model="query.idCode" |
||||||
|
clearable |
||||||
|
style="width: 190px" |
||||||
|
/> |
||||||
|
</el-form> |
||||||
|
<el-button type="primary" @click="getList">查询</el-button> |
||||||
|
</header> |
||||||
|
<div class="table-container"> |
||||||
|
<el-table |
||||||
|
ref="ableRef" |
||||||
|
:data="polices" |
||||||
|
row-key="id" |
||||||
|
max-height="890px" |
||||||
|
@selection-change="selectionChange" |
||||||
|
v-loading="loading" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="55" /> |
||||||
|
<el-table-column |
||||||
|
label="姓名" |
||||||
|
prop="name" |
||||||
|
width="90" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="警号" |
||||||
|
prop="empNo" |
||||||
|
width="100" |
||||||
|
show-overflow-tooltip |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="人员属性" |
||||||
|
width="120" |
||||||
|
align="center" |
||||||
|
> |
||||||
|
<template #default="{ row }"> |
||||||
|
<span>{{ |
||||||
|
getDictLable( |
||||||
|
dict.personType, |
||||||
|
row.personType |
||||||
|
) |
||||||
|
}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
label="职位" |
||||||
|
width="120" |
||||||
|
align="center" |
||||||
|
> |
||||||
|
<template #default="{ row }"> |
||||||
|
<span v-if="row.position"> |
||||||
|
<span v-if="row.level === 0" |
||||||
|
>局领导{{ row.position }}</span |
||||||
|
> |
||||||
|
<span v-if="row.level === 2" |
||||||
|
>二级机构{{ row.position }}</span |
||||||
|
> |
||||||
|
<span v-if="row.level === 3" |
||||||
|
>三机机构{{ row.position }}</span |
||||||
|
> |
||||||
|
<span v-if="row.level === 4" |
||||||
|
>四机机构{{ row.position }}</span |
||||||
|
> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
label="机构名称" |
||||||
|
prop="departShortName" |
||||||
|
width="200" |
||||||
|
/> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<div class="flex end mt-8"> |
||||||
|
<el-pagination |
||||||
|
@size-change="getList" |
||||||
|
@current-change="getList" |
||||||
|
:page-sizes="[10, 20]" |
||||||
|
v-model:page-size="query.size" |
||||||
|
v-model:current-page="query.current" |
||||||
|
layout="total, sizes, prev, pager, next" |
||||||
|
:total="total" |
||||||
|
> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
<div class="flex gap mt-10 wrap v-center"> |
||||||
|
<span>已选警员：</span> |
||||||
|
<el-tag |
||||||
|
v-for="(item, index) in checkPolices" |
||||||
|
:key="item" |
||||||
|
closable |
||||||
|
@close="handleRemove(index)" |
||||||
|
>{{ item.name }}</el-tag |
||||||
|
> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<footer class="flex end"> |
||||||
|
<el-button @click="show = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="submit">确定</el-button> |
||||||
|
</footer> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import { departTreeList } from "@/api/system/depart"; |
||||||
|
import { listPolice } from "@/api/system/police"; |
||||||
|
import useCatchStore from "@/stores/modules/catch"; |
||||||
|
import { getDictLable } from "@/utils/util"; |
||||||
|
import feedback from "@/utils/feedback"; |
||||||
|
|
||||||
|
const catchSotre = useCatchStore(); |
||||||
|
const dict = catchSotre.getDicts(["personType"]); |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
modelValue: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
}, |
||||||
|
departId: { |
||||||
|
type: String |
||||||
|
}, |
||||||
|
samplingNum:{ |
||||||
|
type:Number, |
||||||
|
default:10 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const show = ref(false); |
||||||
|
const query = ref({ |
||||||
|
current:1, |
||||||
|
departBranch: true |
||||||
|
|
||||||
|
}); |
||||||
|
watch(() => props.departId, (val) => { |
||||||
|
query.value.departId = val; |
||||||
|
getList() |
||||||
|
}) |
||||||
|
const total = ref(0); |
||||||
|
const ableRef =ref(null) |
||||||
|
const treeData = catchSotre.getDepartsAll(); |
||||||
|
const polices = ref([]); |
||||||
|
const loading = ref(false) |
||||||
|
function getList() { |
||||||
|
loading.value = true |
||||||
|
listPolice(query.value).then((data) => { |
||||||
|
polices.value = data.records; |
||||||
|
console.log('polices',polices) |
||||||
|
setCheckFun(data.records) |
||||||
|
total.value = data.total; |
||||||
|
loading.value = false |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const setCheckFun =(row)=>{ |
||||||
|
console.log('checkPolices.value',checkPolices.value) |
||||||
|
row.forEach((s)=>{ |
||||||
|
let data =checkPolices.value.find(x=> |
||||||
|
x.empNo === s.empNo |
||||||
|
) |
||||||
|
if(data){ |
||||||
|
nextTick(()=>{ |
||||||
|
ableRef.value.toggleRowSelection(s, true); |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const checkPolices = ref([]); |
||||||
|
const checkPolicesMap =ref([]) |
||||||
|
function selectionChange(selectionRows) { |
||||||
|
|
||||||
|
|
||||||
|
if( checkPolicesMap.value['key'+query.value.current]){ |
||||||
|
let data = checkPolicesMap.value['key'+query.value.current]; |
||||||
|
checkPolicesMap.value['key'+query.value.current]=getCheckData(data,selectionRows); |
||||||
|
}else{ |
||||||
|
checkPolicesMap.value['key'+query.value.current] =getCheckData([],selectionRows); |
||||||
|
} |
||||||
|
checkPolices.value=[] |
||||||
|
for (let key in checkPolicesMap.value){ |
||||||
|
checkPolices.value=checkPolices.value.concat(checkPolicesMap.value[key]) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const getCheckData = (data,selectionRows) =>{ |
||||||
|
selectionRows.forEach(item => { |
||||||
|
|
||||||
|
if (data.findIndex(o => o.empNo === item.empNo) === -1) { |
||||||
|
data.push({ |
||||||
|
name: item.name, |
||||||
|
empNo: item.empNo, |
||||||
|
idCode: item.idCode, |
||||||
|
isLeader:item.position, |
||||||
|
deptId :item.orgId |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
data.forEach((s,i)=>{ |
||||||
|
if (selectionRows.findIndex(o => o.empNo === s.empNo) === -1){ |
||||||
|
data.splice(i,1) |
||||||
|
} |
||||||
|
}) |
||||||
|
return data; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function handleSelectDepart(node) { |
||||||
|
query.value.departId = node.id; |
||||||
|
getList(); |
||||||
|
} |
||||||
|
|
||||||
|
function handleRemove(index) { |
||||||
|
checkPolices.value.splice(index, 1) |
||||||
|
emit('update:modelValue', checkPolices.value) |
||||||
|
} |
||||||
|
|
||||||
|
function submit() { |
||||||
|
emit('update:modelValue', checkPolices.value) |
||||||
|
show.value = false |
||||||
|
} |
||||||
|
watch(()=>props.modelValue,()=>{ |
||||||
|
checkPolices.value=props.modelValue |
||||||
|
},{deep:true,immediate:true}) |
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<style lang="scss"> |
||||||
|
.el-tree-node.is-current > .el-tree-node__content { |
||||||
|
background-color: #e8e9f3; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue