herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'qin_v20'

han_v1
herenshan112 8 months ago
parent
a45b7157cf cace8b1fff
commit
4f3646555d
1 changed files with 253 additions and 223 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 284
      src/views/hr/orgUserRole/org.vue

284
src/views/hr/orgUserRole/org.vue
View File

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

Write Preview
Loading…
Cancel
Save