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

设置权限

qin_v20
herenshan112 7 months ago
parent
3d83e5ad10
commit
cace8b1fff
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. 476
      src/views/hr/orgUserRole/org.vue

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

@ -3,275 +3,305 @@
@ 时间: 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:{ orgTrue: {
type:Number, type: Number,
default:1 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"
);
/** /**
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2024-04-24 13:17:30 @ 时间: 2024-04-24 13:17:30
@ 功能: 已选择的数据 @ 功能: 已选择的数据
*/ */
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(
// console.log("监听已选择的选项-------->",val) () => props.pickList,
pickLists.value = val (val: userOrgRole[]) => {
listAry.value.forEach((item)=>{ // console.log("监听已选择的选项-------->",val)
let isTrue = true pickLists.value = val;
val.forEach((itemVal:userOrgRole)=>{ listAry.value.forEach((item) => {
if(item.id == itemVal.id){ let isTrue = true;
item.isPick = 1; val.forEach((itemVal: userOrgRole) => {
isTrue = false; if (item.id == itemVal.id) {
} item.isPick = 1;
}) isTrue = false;
if(isTrue){ }
item.isPick = 2; });
} if (isTrue) {
}) 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
</el-breadcrumb> v-for="item in crumbList"
<el-scrollbar v-loading="loading" class="contentBox"> :key="item.id"
<ul> @click="pickSunCont(item.id)"
<li v-for="item in listAry" :key="item.id" :class="item.isPick==1?'active':''"> >{{ item.title }}</el-breadcrumb-item
<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> </el-breadcrumb>
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> <el-scrollbar v-loading="loading" class="contentBox">
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> <ul>
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> <li
<el-text>{{ item.title }}</el-text> v-for="item in listAry"
</el-space> :key="item.id"
<el-space v-if="orgTrue!=1&&item.types==2" wrap> :class="item.isPick == 1 ? 'active' : ''"
<i class="fa fa-minus-square-o"></i> >
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> <el-space v-if="orgTrue != 1 && item.types != 2" wrap @click="pickCont(item)">
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> <i v-if="item.isPick == 1" class="fa fa-check-square-o"></i
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> ><i v-else class="fa fa-square-o"></i>
<el-text>{{ item.title }}</el-text> <svg-icon v-if="item.types == 2" icon-class="fenZhu" :size="20" />
</el-space> <svg-icon v-if="item.types == 3" icon-class="tasp" :size="20" />
<el-space v-if="orgTrue==1" wrap @click="pickCont(item)"> <el-avatar
<i v-if="item.isPick==1" class="fa fa-check-square-o"></i><i v-else class="fa fa-square-o"></i> v-if="item.types == 1"
<svg-icon v-if="item.types==2" icon-class="fenZhu" :size="20" /> shape="square"
<svg-icon v-if="item.types==3" icon-class="tasp" :size="20" /> :size="20"
<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" /> :src="circleUrl"
<el-text>{{ item.title }}</el-text> />
</el-space> <el-text>{{ item.title }}</el-text>
<div v-if="item.types==2" class="contentLiLeft"> </el-space>
<svg-icon icon-class="cascader" /> <el-space v-if="orgTrue != 1 && item.types == 2" wrap>
<el-text @click="pickSunCont(item.id)">下级</el-text> <i class="fa fa-minus-square-o"></i>
</div> <svg-icon v-if="item.types == 2" icon-class="fenZhu" :size="20" />
</li> <svg-icon v-if="item.types == 3" icon-class="tasp" :size="20" />
</ul> <el-avatar
</el-scrollbar> v-if="item.types == 1"
</div> 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> </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 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 5px 5px; padding: 5px 5px;
cursor: pointer; cursor: pointer;
i { i {
font-size: 15px; font-size: 15px;
} }
} }
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 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 5px 5px; padding: 5px 5px;
cursor: pointer; cursor: pointer;
i { i {
font-size: 15px; font-size: 15px;
} }
} }
li:hover { li:hover {
background-color: #F56C6C; background-color: #f56c6c;
color: #FFFFFF; color: #ffffff;
.el-text{ .el-text {
color: #FFFFFF; color: #ffffff;
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save