根据角色筛选效果实现

src/components/lowCode/assistant/rangedUser.vue

@@ -0,0 +1,157 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-11-14 13:16:43
+@ 备注: 选择用户
+-->
+<script lang='ts' setup>
+import { criteriaForPeopleList } from '@/api/hr/org/type'
+import SvgIcon from '@/components/svgIcon/index.vue'
+import { useAttrs,computed, onMounted, nextTick,ref,watch } from 'vue'
+import request from '@/utils/axios/index'
+const attrs = useAttrs()
+const props = withDefaults(
+    defineProps<{
+		modelValue?: string
+		disabled?: boolean
+		types?:number
+        control?:any
+    }>(),
+    {}
+)
+interface User {
+  id: number
+  name: string
+  number: string
+  key: string
+  icon: string
+  department: string
+  role: string
+  label: string
+  value: string
+}
+const emits = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+}>()
+
+const value = ref([])
+
+watch(value,(newValue)=>{
+	if(newValue.length > 0){
+		let str = ""
+		
+		let userAry = new Array
+		
+		newValue.forEach(item =>{
+			console.log(item)
+			userAry.push(item)
+			
+		})
+		str = userAry.join(',')
+		console.log(str)
+		emits('update:modelValue', str)
+		// userlist.value = userAry.join(',')
+		// 
+	}else{
+		let str = ""
+		console.log(str)
+		emits('update:modelValue', str)
+	}
+},{ deep: true })
+
+function parseStringToArray(str:string) {
+    try {
+        // 尝试解析JSON格式字符串
+        const result = JSON.parse(str);
+        // 验证解析结果是否为数组
+        if (Array.isArray(result)) {
+            return result;
+        } else {
+            //console.error("解析结果不是数组");
+            return [];
+        }
+    } catch (error) {
+        //console.error("字符串格式错误，无法解析为数组：", error.message);
+        return [];
+    }
+}
+onMounted(() => {
+	getManConts()
+	setTimeout(()=>{
+		value.value = parseStringToArray(props.modelValue)
+	},500 )
+})
+
+const url = "/javasys/lowCode/manCont/getManContsByKeys"
+//console.log(attrs.value)
+const keys = computed(()=>{
+	if(attrs.queryBy == 'role'){
+		return attrs.roleRange
+	}else{
+		return attrs.orgRange
+	}
+})
+function getManContsByKeys() {
+    //console.log(11111)
+    
+        return request({
+            url: url,
+            method: "post",
+			data: {
+				keys: keys.value,
+			},
+        });
+    
+}
+const options = ref([])
+
+function getManConts(){
+	getManContsByKeys().then(({data})=>{
+		data.forEach((element: any) => {
+			element.icon = element.name+"("+element.number+")"
+			element.deparment = ""+element.deparment+">"+element.icon
+			element.label = element.deparment
+			element.value = element.icon
+		});
+		options.value = data
+		//console.log(options.value)
+		
+	})
+}
+
+/**
+@ 作者: 秦东
+@ 时间: 2025-06-10 11:13:06
+@ 功能: 输出结果
+*/
+const valPrint = (val:any) => {
+	
+		if(Array.isArray(val)){
+			return val.join("、")
+		}
+	
+}
+
+</script>
+<template>
+	<div></div>
+    <el-select-v2
+		v-if="props.types!=3"
+		placeholder="请选择用户"
+		v-model="value"
+		node-key="key"
+		:options="options"
+		filterable
+		:render-after-expand="false"
+		multiple
+		clearable
+		collapse-tags
+		collapse-tags-tooltip
+		:max-collapse-tags="1"
+	/>
+	<el-text v-else class="wordColor">{{valPrint(value)}}</el-text>
+</template>
+<style  lang='scss' scoped>
+.wordColor{
+	color:#000000;
+}  
+</style>

src/components/lowCode/newFormItem.vue

@@ -41,7 +41,7 @@ import ColorPickerPage from '@/components/lowCode/assistant/colorPickerPage.vue'
 import TreeSelectPage from '@/components/lowCode/assistant/treeSelectPage.vue' 
 import AssociatedForms from '@/components/lowCode/assistant/associatedForms.vue' 
 import SerialNumber from '@/components/lowCode/assistant/serialNumber.vue' 
-import ExpandUser from '@/components/lowCode/assistant/user.vue'
+import ExpandUser from '@/components/lowCode/assistant/rangedUser.vue'
 import OrgCentent from '@/components/lowCode/assistant/org.vue' 
 import FounderForm from '@/components/lowCode/assistant/founder.vue'
 import FounderTime from '@/components/lowCode/assistant/founderTime.vue'