hxgksystemapp/src/components/workflow/dialog/employeesDialog.vue

<!--
@ 作者: 秦东
@ 时间: 2023-10-11 09:47:32
@ 备注: 人员选择
-->
<script lang='ts' setup>
import { departments, getDepartmentList,searchVal } from '@/components/workflow/dialog/common'
import $func from '@/utils/workflow/index'
//引入样式
import '@/styles/workflowcss/dialog.scss'
//引入页面
import selectBox from '@/components/workflow/selectBox.vue'
import selectResult from '@/components/workflow/selectResult.vue'

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data:{
    type: Array,
    default: ()=> []
  },
  isdepartment: {
    type: Boolean,
    default: false
  },
});
let emits = defineEmits(['update:visible', 'change'])
let visibleDialog = computed({
  get(){
    return props.visible
  },
  set(){
    closeDialog()
  }
});
let checkedDepartmentList = ref([])
let checkedEmployessList = ref<any>([])
//被选择项列表
let list = computed(()=> {
  return [{
    isDepartment: props.isDepartment,
    type: 'department', 
    data: departments.value.childDepartments, 
    isActive: (item)=> $func.toggleClass(checkedDepartmentList.value, item),
    change: (item)=> $func.toChecked(checkedDepartmentList.value, item),
    next: (item)=> getDepartmentList(item.id)
  },{
    type: 'employee', 
    data: departments.value.employees, 
    isActive: (item)=> $func.toggleClass(checkedEmployessList.value, item),
    change: (item)=> $func.toChecked(checkedEmployessList.value, item),
  }]
})
let resList = computed(()=>{
  let data = [{
    type: 'employee', 
    data: checkedEmployessList.value, 
    cancel: (item)=> $func.removeEle(checkedEmployessList.value, item)
  }]
  if(props.isDepartment){
    data.unshift({
      type: 'department',
      data: checkedDepartmentList.value,
      cancel: (item)=> $func.removeEle(checkedDepartmentList.value, item)
    })
  }
  return data
})

let saveDialog = ()=> {
	let checkedList = [
    ...checkedDepartmentList.value,
    ...checkedEmployessList.value
  ].map(item=>({
    type: item.employeeName ? 1: 3,
    targetId: item.id,
    name: item.employeeName || item.departmentName
  }))
  emits('change',checkedList)
}
const closeDialog = ()=> {
  emits('update:visible', false)
}

watch(()=> props.visible, (val)=>{
  if(val){
    getDepartmentList();
    searchVal.value = "";
		console.log("props.data:",props.data)
		if(props.data){
			checkedEmployessList.value = props.data.filter(item=>item.type===1).map(({name,targetId})=>({
				employeeName: name,
				id: targetId
			}));
			checkedDepartmentList.value = props.data.filter(item=>item.type===3).map(({name,targetId})=>({
				departmentName: name,
				id: targetId
			}));
		}
    
  }
})
onMounted(()=> {
	getDepartmentList();
})
let total = computed(()=> checkedDepartmentList.value.length + checkedEmployessList.value.length)
const delList = ()=> {
  checkedDepartmentList.value = [];
  checkedEmployessList.value = []
}
</script>
<template>
	<el-dialog v-model="visibleDialog" title="选择成员" :width="600" append-to-body class="promoter_person">
		<div class="person_body clear">
			
			<el-row>
				<el-col :span="12">
					<div class="person_tree l">
						<input v-model="searchVal"  type="text" placeholder="搜索成员" @input="getDebounceData($event)">
						<p v-if="!searchVal" class="ellipsis tree_nav">
							<span class="ellipsis" @click="getDepartmentList(0)">全部</span>
							<span v-for="(item,index) in departments.titleDepartments" :key="index+'a'" class="ellipsis" @click="getDepartmentList(item.id)">{{item.departmentName}}</span>   
						</p>
						<selectBox :list="list"/>
					</div>
				</el-col>
				<el-col :span="12">
					<selectResult :list="resList" :total="total" @del="delList"/>
				</el-col>
			</el-row>
			
			
		</div>
		<template #footer>
      <el-button @click="$emit('update:visible',false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </template>    
	</el-dialog>
</template>
<style  lang='scss' scoped>

</style>