From cace8b1fff6dbf3c5117a13f6c861bdf75b1bf30 Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Mon, 14 Apr 2025 11:12:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hr/orgUserRole/org.vue | 476 ++++++++++++++++---------------
 1 file changed, 253 insertions(+), 223 deletions(-)

diff --git a/src/views/hr/orgUserRole/org.vue b/src/views/hr/orgUserRole/org.vue
index ed5aa06..2a2334e 100644
--- a/src/views/hr/orgUserRole/org.vue
+++ b/src/views/hr/orgUserRole/org.vue
@@ -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;
-		
-		.el-text{
-			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;
+    }
+  }
 }
-.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>