|
|
|
@ -3,275 +3,305 @@ |
|
|
|
@ 时间: 2024-05-24 13:36:49 |
|
|
|
@ 备注: 只有行政组织的选项列 |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import { Search,ArrowRight } from '@element-plus/icons-vue' //搜索图标 |
|
|
|
import { userOrgRole,crumb } from '@/api/hr/search/types' |
|
|
|
<script lang="ts" setup> |
|
|
|
import { Search, ArrowRight } from "@element-plus/icons-vue"; //搜索图标 |
|
|
|
import { userOrgRole, crumb } from "@/api/hr/search/types"; |
|
|
|
|
|
|
|
import { gainSunOrgAndUser,searchOrgUser } from '@/api/hr/people/index' |
|
|
|
import { gainSunOrgAndUser, searchOrgUser } from "@/api/hr/people/index"; |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
pickList:{ |
|
|
|
type:Object, |
|
|
|
default(){ |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
orgTrue:{ |
|
|
|
type:Number, |
|
|
|
default:1 |
|
|
|
} |
|
|
|
}) |
|
|
|
pickList: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
orgTrue: { |
|
|
|
type: Number, |
|
|
|
default: 1, |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
const emits = defineEmits(["update:pickList","updataPickLog"]); |
|
|
|
const emits = defineEmits(["update:pickList", "updataPickLog"]); |
|
|
|
|
|
|
|
const loading = ref(false) |
|
|
|
const crumbList = ref<crumb[]>([]) //面包屑 |
|
|
|
const listAry = ref<userOrgRole[]>([]) //待选择数据 |
|
|
|
const pickLists = ref<userOrgRole[]>([]) //待选择数据 |
|
|
|
const loading = ref(false); |
|
|
|
const crumbList = ref<crumb[]>([]); //面包屑 |
|
|
|
const listAry = ref<userOrgRole[]>([]); //待选择数据 |
|
|
|
const pickLists = ref<userOrgRole[]>([]); //待选择数据 |
|
|
|
|
|
|
|
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png') |
|
|
|
const circleUrl = ref( |
|
|
|
"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" |
|
|
|
); |
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-24 13:17:30 |
|
|
|
@ 功能: 已选择的数据 |
|
|
|
*/ |
|
|
|
const pickList = computed({ |
|
|
|
get() { |
|
|
|
return props.pickList |
|
|
|
}, |
|
|
|
set(val: any) { |
|
|
|
emits('update:pickList', val) |
|
|
|
} |
|
|
|
const pickList = computed({ |
|
|
|
get() { |
|
|
|
return props.pickList; |
|
|
|
}, |
|
|
|
set(val: any) { |
|
|
|
emits("update:pickList", val); |
|
|
|
}, |
|
|
|
}); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-24 14:53:08 |
|
|
|
@ 功能: 加载数据 |
|
|
|
*/ |
|
|
|
const dataLoading = (orgId?:string) => { |
|
|
|
loading.value = true; |
|
|
|
gainSunOrgAndUser({id:orgId}) |
|
|
|
.then((data) =>{ |
|
|
|
crumbList.value = data.data.orgList |
|
|
|
listAry.value = data.data.orgUserList |
|
|
|
}) |
|
|
|
.finally(() =>{ |
|
|
|
loading.value = false; |
|
|
|
if(pickLists.value.length > 0){ |
|
|
|
listAry.value.forEach((item:userOrgRole)=>{ |
|
|
|
let isTrue = true |
|
|
|
pickLists.value.forEach((itemVal:userOrgRole)=>{ |
|
|
|
if(item.id == itemVal.id){ |
|
|
|
item.isPick = 1; |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}) |
|
|
|
if(isTrue){ |
|
|
|
item.isPick = 2; |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const dataLoading = (orgId?: string) => { |
|
|
|
loading.value = true; |
|
|
|
gainSunOrgAndUser({ id: orgId }) |
|
|
|
.then((data) => { |
|
|
|
crumbList.value = data.data.orgList; |
|
|
|
listAry.value = data.data.orgUserList; |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
loading.value = false; |
|
|
|
if (pickLists.value.length > 0) { |
|
|
|
listAry.value.forEach((item: userOrgRole) => { |
|
|
|
let isTrue = true; |
|
|
|
pickLists.value.forEach((itemVal: userOrgRole) => { |
|
|
|
if (item.id == itemVal.id) { |
|
|
|
item.isPick = 1; |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if (isTrue) { |
|
|
|
item.isPick = 2; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
//初始加载 |
|
|
|
onMounted(()=>{ |
|
|
|
if(props.pickList.value.length > 0){ |
|
|
|
pickLists.value = props.pickList.value |
|
|
|
nextTick(() => { |
|
|
|
dataLoading() |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
dataLoading() |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
onMounted(() => { |
|
|
|
if (props.pickList.value.length > 0) { |
|
|
|
pickLists.value = props.pickList.value; |
|
|
|
nextTick(() => { |
|
|
|
dataLoading(); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
dataLoading(); |
|
|
|
} |
|
|
|
}); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-24 15:04:01 |
|
|
|
@ 功能: 选择项目 |
|
|
|
*/ |
|
|
|
const pickCont = (val:userOrgRole) => { |
|
|
|
if(val.isPick != 1){ |
|
|
|
val.isPick = 1 |
|
|
|
if(pickLists.value.length > 0){ |
|
|
|
let isTrue = true |
|
|
|
pickLists.value.forEach((item:userOrgRole)=>{ |
|
|
|
if(item.id == val.id){ |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}) |
|
|
|
if(isTrue){ |
|
|
|
pickLists.value.push(val) |
|
|
|
} |
|
|
|
}else{ |
|
|
|
pickLists.value.push(val) |
|
|
|
} |
|
|
|
}else{ |
|
|
|
val.isPick = 2 |
|
|
|
if(pickLists.value.length > 0){ |
|
|
|
pickLists.value.forEach((item:userOrgRole,index:number)=>{ |
|
|
|
if(item.id == val.id){ |
|
|
|
pickLists.value.splice(index,1) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
// emits('update:pickList', pickLists) |
|
|
|
// console.log("选择项目-------->",pickLists.value) |
|
|
|
emits('updataPickLog', pickLists.value) |
|
|
|
} |
|
|
|
const pickCont = (val: userOrgRole) => { |
|
|
|
if (val.isPick != 1) { |
|
|
|
val.isPick = 1; |
|
|
|
if (pickLists.value.length > 0) { |
|
|
|
let isTrue = true; |
|
|
|
pickLists.value.forEach((item: userOrgRole) => { |
|
|
|
if (item.id == val.id) { |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if (isTrue) { |
|
|
|
pickLists.value.push(val); |
|
|
|
} |
|
|
|
} else { |
|
|
|
pickLists.value.push(val); |
|
|
|
} |
|
|
|
} else { |
|
|
|
val.isPick = 2; |
|
|
|
if (pickLists.value.length > 0) { |
|
|
|
pickLists.value.forEach((item: userOrgRole, index: number) => { |
|
|
|
if (item.id == val.id) { |
|
|
|
pickLists.value.splice(index, 1); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
// emits('update:pickList', pickLists) |
|
|
|
// console.log("选择项目-------->",pickLists.value) |
|
|
|
emits("updataPickLog", pickLists.value); |
|
|
|
}; |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-24 15:25:58 |
|
|
|
@ 功能: 监听已选择的选项 |
|
|
|
*/ |
|
|
|
watch(() => props.pickList, (val:userOrgRole[])=>{ |
|
|
|
// console.log("监听已选择的选项-------->",val) |
|
|
|
pickLists.value = val |
|
|
|
listAry.value.forEach((item)=>{ |
|
|
|
let isTrue = true |
|
|
|
val.forEach((itemVal:userOrgRole)=>{ |
|
|
|
if(item.id == itemVal.id){ |
|
|
|
item.isPick = 1; |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}) |
|
|
|
if(isTrue){ |
|
|
|
item.isPick = 2; |
|
|
|
} |
|
|
|
}) |
|
|
|
},{ |
|
|
|
deep: true |
|
|
|
}) |
|
|
|
watch( |
|
|
|
() => props.pickList, |
|
|
|
(val: userOrgRole[]) => { |
|
|
|
// console.log("监听已选择的选项-------->",val) |
|
|
|
pickLists.value = val; |
|
|
|
listAry.value.forEach((item) => { |
|
|
|
let isTrue = true; |
|
|
|
val.forEach((itemVal: userOrgRole) => { |
|
|
|
if (item.id == itemVal.id) { |
|
|
|
item.isPick = 1; |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if (isTrue) { |
|
|
|
item.isPick = 2; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
{ |
|
|
|
deep: true, |
|
|
|
} |
|
|
|
); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-24 15:43:27 |
|
|
|
@ 功能: 选择下一级 |
|
|
|
*/ |
|
|
|
const pickSunCont = (orgId?:string) => { |
|
|
|
// console.log("选择下一级-------->",orgId) |
|
|
|
dataLoading(orgId) |
|
|
|
} |
|
|
|
const pickSunCont = (orgId?: string) => { |
|
|
|
// console.log("选择下一级-------->",orgId) |
|
|
|
dataLoading(orgId); |
|
|
|
}; |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-27 15:14:57 |
|
|
|
@ 功能: 搜索组织和人员 |
|
|
|
*/ |
|
|
|
const searchOrgUs = (val:any) => { |
|
|
|
searchOrgUser({name:val}) |
|
|
|
.then((data) =>{ |
|
|
|
// console.log("搜索组织和人员",data) |
|
|
|
listAry.value = data.data.orgUserList |
|
|
|
// console.log("获取角色",listRoleAry) |
|
|
|
}) |
|
|
|
} |
|
|
|
const searchOrgUs = (val: any) => { |
|
|
|
searchOrgUser({ name: val }).then((data) => { |
|
|
|
// console.log("搜索组织和人员",data) |
|
|
|
listAry.value = data.data.orgUserList; |
|
|
|
// console.log("获取角色",listRoleAry) |
|
|
|
}); |
|
|
|
}; |
|
|
|
defineExpose({ |
|
|
|
searchOrgUs |
|
|
|
}) |
|
|
|
searchOrgUs, |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<el-breadcrumb v-loading="loading" :separator-icon="ArrowRight" class="mianbaoxue"> |
|
|
|
<el-breadcrumb-item @click="pickSunCont()">首页</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item v-for="item in crumbList" :key="item.id" @click="pickSunCont(item.id)">{{ item.title }}</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
<el-scrollbar v-loading="loading" class="contentBox"> |
|
|
|
<ul> |
|
|
|
<li v-for="item in listAry" :key="item.id" :class="item.isPick==1?'active':''"> |
|
|
|
<el-space v-if="orgTrue!=1&&item.types!=2" wrap @click="pickCont(item)"> |
|
|
|
<i v-if="item.isPick==1" class="fa fa-check-square-o"></i><i v-else class="fa fa-square-o"></i> |
|
|
|
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> |
|
|
|
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> |
|
|
|
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> |
|
|
|
<el-text>{{ item.title }}</el-text> |
|
|
|
</el-space> |
|
|
|
<el-space v-if="orgTrue!=1&&item.types==2" wrap> |
|
|
|
<i class="fa fa-minus-square-o"></i> |
|
|
|
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> |
|
|
|
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> |
|
|
|
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> |
|
|
|
<el-text>{{ item.title }}</el-text> |
|
|
|
</el-space> |
|
|
|
<el-space v-if="orgTrue==1" wrap @click="pickCont(item)"> |
|
|
|
<i v-if="item.isPick==1" class="fa fa-check-square-o"></i><i v-else class="fa fa-square-o"></i> |
|
|
|
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> |
|
|
|
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> |
|
|
|
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> |
|
|
|
<el-text>{{ item.title }}</el-text> |
|
|
|
</el-space> |
|
|
|
<div v-if="item.types==2" class="contentLiLeft"> |
|
|
|
<svg-icon icon-class="cascader" /> |
|
|
|
<el-text @click="pickSunCont(item.id)">下级</el-text> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</el-scrollbar> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-breadcrumb v-loading="loading" :separator-icon="ArrowRight" class="mianbaoxue"> |
|
|
|
<el-breadcrumb-item @click="pickSunCont()">首页</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item |
|
|
|
v-for="item in crumbList" |
|
|
|
:key="item.id" |
|
|
|
@click="pickSunCont(item.id)" |
|
|
|
>{{ item.title }}</el-breadcrumb-item |
|
|
|
> |
|
|
|
</el-breadcrumb> |
|
|
|
<el-scrollbar v-loading="loading" class="contentBox"> |
|
|
|
<ul> |
|
|
|
<li |
|
|
|
v-for="item in listAry" |
|
|
|
:key="item.id" |
|
|
|
:class="item.isPick == 1 ? 'active' : ''" |
|
|
|
> |
|
|
|
<el-space v-if="orgTrue != 1 && item.types != 2" wrap @click="pickCont(item)"> |
|
|
|
<i v-if="item.isPick == 1" class="fa fa-check-square-o"></i |
|
|
|
><i v-else class="fa fa-square-o"></i> |
|
|
|
<svg-icon v-if="item.types == 2" icon-class="fenZhu" :size="20" /> |
|
|
|
<svg-icon v-if="item.types == 3" icon-class="tasp" :size="20" /> |
|
|
|
<el-avatar |
|
|
|
v-if="item.types == 1" |
|
|
|
shape="square" |
|
|
|
:size="20" |
|
|
|
:src="circleUrl" |
|
|
|
/> |
|
|
|
<el-text>{{ item.title }}</el-text> |
|
|
|
</el-space> |
|
|
|
<el-space v-if="orgTrue != 1 && item.types == 2" wrap> |
|
|
|
<i class="fa fa-minus-square-o"></i> |
|
|
|
<svg-icon v-if="item.types == 2" icon-class="fenZhu" :size="20" /> |
|
|
|
<svg-icon v-if="item.types == 3" icon-class="tasp" :size="20" /> |
|
|
|
<el-avatar |
|
|
|
v-if="item.types == 1" |
|
|
|
shape="square" |
|
|
|
:size="20" |
|
|
|
:src="circleUrl" |
|
|
|
/> |
|
|
|
<el-text>{{ item.title }}</el-text> |
|
|
|
</el-space> |
|
|
|
<el-space v-if="orgTrue == 1" wrap @click="pickCont(item)"> |
|
|
|
<i v-if="item.isPick == 1" class="fa fa-check-square-o"></i |
|
|
|
><i v-else class="fa fa-square-o"></i> |
|
|
|
<svg-icon v-if="item.types == 2" icon-class="fenZhu" :size="20" /> |
|
|
|
<svg-icon v-if="item.types == 3" icon-class="tasp" :size="20" /> |
|
|
|
<el-avatar |
|
|
|
v-if="item.types == 1" |
|
|
|
shape="square" |
|
|
|
:size="20" |
|
|
|
:src="circleUrl" |
|
|
|
/> |
|
|
|
<el-text>{{ item.title }}</el-text> |
|
|
|
</el-space> |
|
|
|
<div v-if="item.types == 2" class="contentLiLeft"> |
|
|
|
<svg-icon icon-class="cascader" /> |
|
|
|
<el-text @click="pickSunCont(item.id)">下级</el-text> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</el-scrollbar> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
.mianbaoxue{ |
|
|
|
display: flex; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 10px 5px; |
|
|
|
overflow: auto; |
|
|
|
cursor: pointer; |
|
|
|
<style lang="scss" scoped> |
|
|
|
.mianbaoxue { |
|
|
|
display: flex; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 10px 5px; |
|
|
|
overflow: auto; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.contentBox{ |
|
|
|
height: 400px; |
|
|
|
padding: 0 5px; |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
padding: 5px 5px; |
|
|
|
cursor: pointer; |
|
|
|
i { |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
li:hover { |
|
|
|
background-color: #EBEEF5; |
|
|
|
color: #409EFF; |
|
|
|
.el-text{ |
|
|
|
color: #409EFF; |
|
|
|
} |
|
|
|
} |
|
|
|
li.active{ |
|
|
|
background-color: #EBEDF0; |
|
|
|
color: #409EFF; |
|
|
|
.contentBox { |
|
|
|
height: 400px; |
|
|
|
padding: 0 5px; |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
padding: 5px 5px; |
|
|
|
cursor: pointer; |
|
|
|
i { |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
li:hover { |
|
|
|
background-color: #ebeef5; |
|
|
|
color: #409eff; |
|
|
|
.el-text { |
|
|
|
color: #409eff; |
|
|
|
} |
|
|
|
} |
|
|
|
li.active { |
|
|
|
background-color: #ebedf0; |
|
|
|
color: #409eff; |
|
|
|
|
|
|
|
.el-text{ |
|
|
|
color: #409EFF; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-text { |
|
|
|
color: #409eff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.contentLiLeft{ |
|
|
|
border-left: 1px dashed #909399; |
|
|
|
padding-left: 10px; |
|
|
|
.contentLiLeft { |
|
|
|
border-left: 1px dashed #909399; |
|
|
|
padding-left: 10px; |
|
|
|
} |
|
|
|
.pickBox{ |
|
|
|
height: 420px; |
|
|
|
padding: 10px 0px 0px 0px; |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
padding: 5px 5px; |
|
|
|
cursor: pointer; |
|
|
|
i { |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
li:hover { |
|
|
|
background-color: #F56C6C; |
|
|
|
color: #FFFFFF; |
|
|
|
.el-text{ |
|
|
|
color: #FFFFFF; |
|
|
|
} |
|
|
|
} |
|
|
|
.pickBox { |
|
|
|
height: 420px; |
|
|
|
padding: 10px 0px 0px 0px; |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
padding: 5px 5px; |
|
|
|
cursor: pointer; |
|
|
|
i { |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
li:hover { |
|
|
|
background-color: #f56c6c; |
|
|
|
color: #ffffff; |
|
|
|
.el-text { |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
herenshan112
7 months ago