You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
348 lines
8.7 KiB
348 lines
8.7 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-11-22 08:16:12
|
|
@ 备注: 全部行政组织
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { getOrgFormTree,getOrgFormUserList,searchUserCustomerFormList } from '@/api/hr/org/index'
|
|
import { orgform,criteriaForPeopleList } from '@/api/hr/org/type'
|
|
import UserRole from '@/assets/icons/user.svg'
|
|
|
|
import { searchUserList,gainFlowPeople } from '@/api/DesignForm/requestapi'
|
|
|
|
const props = defineProps({
|
|
openclosebox:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
selectedPeople: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
const emits = defineEmits(["update:openclosebox","updateNode"]);
|
|
const isOpen = computed({
|
|
get: () => props.openclosebox,
|
|
set: (val) => {
|
|
emits("update:openclosebox", val);
|
|
},
|
|
});
|
|
const defaultProps ={
|
|
children: 'children',
|
|
label: 'name',
|
|
}
|
|
const orgLoading = ref(false)
|
|
const userLoading = ref(false)
|
|
// 侧栏处理
|
|
const treeEl = ref(null)
|
|
const treeData = ref<orgform[]>([])
|
|
const department = ref<any>()
|
|
const userName = ref<any>()
|
|
const tableData = ref<criteriaForPeopleList[]>();
|
|
const page = reactive({
|
|
total: 0,
|
|
current: 1,
|
|
pageSize: 11
|
|
})
|
|
//行政组织树单击事件
|
|
const handleNodeClick = (data: any) => {
|
|
department.value = data.id
|
|
getUserList()
|
|
}
|
|
//重置搜索
|
|
const resetClick = () => {
|
|
userName.value = ''
|
|
department.value = ''
|
|
treeEl.value.setCurrentKey(null)
|
|
getUserList()
|
|
}
|
|
//获取行政组织
|
|
const getTreeData = () => {
|
|
orgLoading.value = true
|
|
getOrgFormTree()
|
|
.then(({ data }) => {
|
|
// console.log(data)
|
|
treeData.value = data.list
|
|
}).finally(()=>{
|
|
orgLoading.value = false
|
|
})
|
|
}
|
|
//获取人员列表信息
|
|
const getUserList = () => {
|
|
userLoading.value = true
|
|
const params = {
|
|
page: page.current,
|
|
pagesize: page.pageSize,
|
|
name: userName.value,
|
|
department: department.value
|
|
}
|
|
searchUserList(params)
|
|
.then(({ data })=>{
|
|
tableData.value = data.list
|
|
page.total = data.total
|
|
userLoading.value = false
|
|
})
|
|
.finally(()=>{
|
|
userLoading.value = false
|
|
})
|
|
}
|
|
//翻页
|
|
const currentChange = (current: number) => {
|
|
page.current = current
|
|
getUserList()
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
// 可根据实际情况放在点击打开弹窗后加载，会出现loading
|
|
getTreeData()
|
|
getUserList()
|
|
backfillData()
|
|
})
|
|
})
|
|
//已选择内容
|
|
const checkDataList = reactive<criteriaForPeopleList[]>([]);
|
|
const tableRowClick = (row: any) => {
|
|
if(checkDataList.length > 0){
|
|
let isIn = true
|
|
checkDataList.forEach(item =>{
|
|
if(item.id == row.id){
|
|
isIn = false
|
|
}
|
|
})
|
|
if(isIn){
|
|
checkDataList.push(row)
|
|
}
|
|
}else{
|
|
checkDataList.push(row)
|
|
}
|
|
// console.log("checkDataList",checkDataList,row)
|
|
}
|
|
//删除单一选择
|
|
const delRowClick = (row: criteriaForPeopleList) => {
|
|
// console.log("checkDataList",row)
|
|
if(checkDataList &&checkDataList.length > 0) {
|
|
checkDataList.forEach((item:criteriaForPeopleList,index:number) => {
|
|
if(item.id == row.id){
|
|
if(!item.noedit){
|
|
checkDataList.splice(index,1)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//清除所有的选择
|
|
const delAllClick = () => {
|
|
// checkDataList.splice(0,checkDataList.length)
|
|
checkDataList.forEach((item:criteriaForPeopleList,index:number) => {
|
|
if(!item.noedit){
|
|
checkDataList.splice(index,1)
|
|
}
|
|
})
|
|
}
|
|
|
|
//关闭弹窗
|
|
const clostBox = () =>{
|
|
emits("update:openclosebox", false);
|
|
}
|
|
//提交选择
|
|
const confirmChoices = () => {
|
|
// console.log("confirmChoices",checkDataList)
|
|
emits('updateNode', checkDataList)
|
|
clostBox()
|
|
}
|
|
//回填已经选中得内容
|
|
const backfillData = () => {
|
|
if(props.selectedPeople && props.selectedPeople.length > 0){
|
|
checkDataList.splice(0,checkDataList.length)
|
|
props.selectedPeople.forEach((item:any)=>{
|
|
checkDataList.push(item)
|
|
})
|
|
}
|
|
// console.log("props.selectedPeople",props.selectedPeople,checkDataList)
|
|
}
|
|
</script>
|
|
<template>
|
|
<el-dialog
|
|
v-model="isOpen"
|
|
title="选择人员"
|
|
:append-to-body="true"
|
|
:props="defaultProps "
|
|
width="80%"
|
|
top="2vh"
|
|
draggable
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6" style="padding:0">
|
|
<div class="sidebar_tree">
|
|
<el-text class="orgTitle" size="large">行政组织</el-text>
|
|
<el-tree
|
|
v-loading="orgLoading"
|
|
element-loading-text="Loading..."
|
|
ref="treeEl"
|
|
:data="treeData"
|
|
node-key="id"
|
|
@node-click="handleNodeClick"
|
|
:props="defaultProps "
|
|
highlight-current
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="search">
|
|
<el-input placeholder="请输入用户名" v-model="userName" />
|
|
<el-button type="primary" @click="getUserList">查询</el-button>
|
|
<el-button @click="resetClick">重置</el-button>
|
|
</div>
|
|
<div class="list">
|
|
<el-table v-loading="userLoading" element-loading-text="Loading..." :data="tableData" style="width: 100%; height:660px">
|
|
<el-table-column fixed prop="userName" label="照片" width="60px" align="center">
|
|
<template #default="scope">
|
|
<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
|
|
<el-avatar v-else shape="square" :size="30" :src="UserRole" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed prop="name" label="姓名" width="150px" align="left">
|
|
<template #default="scope">
|
|
{{ scope.row.name }}({{ scope.row.number }})
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="tel" label="联系方式" width="120px" align="left" />
|
|
<el-table-column prop="nickName" label="归属行政组织" width="500px" align="left">
|
|
<template #default="{ row }">
|
|
{{ row.companyName }}<span v-if="row.departmentname!=''"> / {{ row.departmentname }}</span><span v-if="row.postname!=''"> / {{ row.postname }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="60px">
|
|
<template #default="{ row }">
|
|
<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="page">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next, jumper"
|
|
small
|
|
hide-on-single-page
|
|
:current-page="page.current"
|
|
:total="page.total"
|
|
:page-size="page.pageSize"
|
|
@current-change="currentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="has_select">
|
|
<div class="total">
|
|
<div>已选择：{{ checkDataList.length }}</div>
|
|
<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button>
|
|
</div>
|
|
{{ checkDataList }}
|
|
<el-table :data="checkDataList" style="height:680px">
|
|
<el-table-column prop="userName" label="照片" width="60px" align="center">
|
|
<template #default="scope">
|
|
<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
|
|
<el-avatar v-else shape="square" :size="30" :src="UserRole" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="姓名" align="left">
|
|
<template #default="scope">
|
|
{{ scope.row.name }}({{ scope.row.number }})
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="60px">
|
|
<template #default="{ row }">
|
|
<el-button v-if="!row.noedit" size="small" type="danger" @click="delRowClick(row)">移除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<template #footer>
|
|
<div>
|
|
<el-button @click="clostBox">取消</el-button>
|
|
<el-button type="primary" @click="confirmChoices"> 确定 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.orgTitle{
|
|
padding: 0 0 0 5px;
|
|
}
|
|
.sidebar_tree {
|
|
width: 100%;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 3px;
|
|
padding: 10px 0;
|
|
margin-right: 10px;
|
|
height: 750px;
|
|
overflow-y: auto;
|
|
}
|
|
.has_select {
|
|
width: 100%;
|
|
|
|
.total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.search {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
.el-input {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.page {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content:space-between;
|
|
}
|
|
.expand-user-dialog {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.sidebar-tree {
|
|
width: 180px;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 3px;
|
|
padding: 10px 0;
|
|
margin-right: 10px;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
.table-list {
|
|
|
|
}
|
|
.search {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
.el-input {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.page {
|
|
padding-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.has-select {
|
|
width: 200px;
|
|
margin-left: 20px;
|
|
.total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|