Browse Source

选择用户,性能优化

lwx_v12
liwenxuan 1 month ago
parent
commit
e3237ef606
  1. 28
      src/components/formTable/index.vue
  2. 592
      src/components/lowCode/assistant/rangedUserTree.vue

28
src/components/formTable/index.vue

@ -618,12 +618,31 @@ onBeforeRouteLeave(() => {
unWatch1() //
unWatch2() //
})
function checkRangedUserTreesAndGet(){
setTimeout(() => {
if(rangedUserTrees.length>0){
//alert(1)
getTree1()
}else{
checkRangedUserTreesAndGet()
}
}, 100);
}
onMounted(() => {
getAsfs()
checkRangedUserTreesAndGet()
getInitModel()
nextTick(() => {
appendRemoveStyle(true)
})
getAsfs()
})
onUnmounted(() => {
if (eventName) {
@ -1889,10 +1908,11 @@ watch(
{ deep: true }
);
onBeforeMount(() => {
/* onBeforeMount(() => {
getAsfs()
getTree1()
})
}) */
const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree'
const orgAndManTree = ref()
function getOrgAndManTree() {

592
src/components/lowCode/assistant/rangedUserTree.vue

@ -31,7 +31,6 @@ const emits = defineEmits<{
}>()
const value = ref([])
const loading = ref(true)
watch(value,(newValue)=>{
if(newValue.length > 0){
let str = ""
@ -55,6 +54,8 @@ watch(value,(newValue)=>{
}
},{ deep: true })
function parseStringToArray(str:string) {
try {
// JSON
@ -72,24 +73,14 @@ function parseStringToArray(str:string) {
}
}
onBeforeMount(() => {
//
checkReady()
//getTree()
checkorgAndManTree()
setTimeout(()=>{
value.value = parseStringToArray(props.modelValue)
},500 )
})
onMounted(()=>{
setTimeout(()=>{
getManConts()
},300)
})
const url = "/javasys/lowCode/manCont/getManContsByKeys"
//console.log(attrs.value)
const keys = computed(()=>{
if(attrs.queryBy == 'role'){
return attrs.roleRange
@ -97,389 +88,272 @@ const keys = computed(()=>{
return attrs.orgRange
}
})
/* function getManContsByKeys() {
//console.log(11111)
return request({
url: url,
method: "post",
data: {
keys: keys.value,
},
});
} */
const options = ref([])
const convertToAFormatComplate = ref(false)
function convertToAFormat(bTree, idArray) {
const nodeMap = {};
//
function collectNodes(node, level = 0) {
if (!node) {
//console.log(`: ${node}`);
return;
}
// 便
//console.log(` [${level}]: id=${node.id}, label=${node.label}`);
// id
if (node.id !== undefined && node.id !== null) {
nodeMap[node.id] = node;
} else {
//console.warn(`id:`, node);
}
//
if (Array.isArray(node.children)) {
node.children.forEach((child, index) => {
collectNodes(child, level + 1); // +1便
});
} else if (node.children !== null && node.children !== undefined) {
//console.warn(`children:`, node.children);
}
}
//
if (Array.isArray(bTree)) {
//console.log(`bTree${bTree.length}`);
bTree.forEach((root, index) => {
//console.log(`${index + 1}`);
collectNodes(root);
});
} else {
//console.log(`bTree`);
collectNodes(bTree);
}
// id
//console.log(`id:`, Object.keys(nodeMap));
// idArray
const result = idArray.map(id => {
// idnodeMap
//console.log(`id: ${id}: ${id in nodeMap}`);
const targetNode = nodeMap[id];
if (!targetNode) return null;
return {
id: targetNode.id,
number: targetNode.value ?? '', // null/undefined
name: targetNode.label ?? '',
icon: null,
key: String(targetNode.id), // keya
role: '',
deparment: '',
parentId: targetNode.parentId ?? ''
};
}).filter(Boolean);
//console.log(`:`, result);
convertToAFormatComplate.value = true
return result;
}
function getManConts(){
let data = convertToAFormat(props.orgAndManTree,keys.value)
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
/* 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("、")
}
}
let resData = ref([])
const userList = computed({
get() {
/* return [{
id: '全选',
label: '全选',
children: [...resData.value]
}] */
return resData.value
},
set() {
// 使
const treeData = {
"id": "102",
"label": "企管部",
"parentId": "309",
"children": [
{
"id": "284148167597887488",
"label": "荣潇亭",
"parentId": "102",
"children": null,
"value": "303086",
"treeAttrs": null,
"disabled": null,
"type": null
},
{
"id": "272",
"label": "企管",
"parentId": "102",
"children": [
{
"id": "284148287831805952",
"label": "吴可楠",
"parentId": "272",
"children": null,
"value": "303122",
"treeAttrs": null,
"disabled": null,
"type": null
}
],
"value": null,
"treeAttrs": null,
"disabled": null,
"type": null
}
],
"value": null,
"treeAttrs": null,
"disabled": null,
"type": null
};
const idList = ["284148167597887488", "284148287831805952"];
const resData = ref()
const checkorgAndManTree = (()=>{
if(props.orgAndManTree&&props.orgAndManTree.children&&props.orgAndManTree.children.length>0){
//alert(1)
let arr = []
arr.push(modifyTreeData(props.orgAndManTree,keys.value))
resData.value = arr
}else{
setTimeout(()=>{
checkorgAndManTree()
},100)
}
})
/**
* 根据列表数据过滤树形数据保留value值在列表number中匹配的节点及其祖先
* @param {Array} treeData - 树形数据
* @param {Array} listData - 列表数据
* @returns {Array} 过滤后的树形数据
*/
function filterTreeByList(treeData: string | any[], listData: any[]) {
// number
const numberSet = new Set();
listData.forEach((item: { number: unknown; }) => {
numberSet.add(item.number);
});
// 访
const visitedNodes = new Set();
//
function processNode(node: { id: any; value: unknown; children: string | any[] | null; }) {
// 使id
const nodeId = node.id;
if (visitedNodes.has(nodeId)) {
return false; // 访false
const resultExample = [{
"id": "102",
"label": "企管部",
"parentId": "309",
"children": [
{
"id": "284148167597887488",
"label": "荣潇亭(303086)",
"parentId": "102",
"children": null,
"value": "303086",
"treeAttrs": null,
"disabled": null,
"type": null,
"number": "荣潇亭(303086)"
},
{
"id": "272",
"label": "企管",
"parentId": "102",
"children": [
{
"id": "284148287831805952",
"label": "吴可楠(303122)",
"parentId": "272",
"children": null,
"value": "303122",
"treeAttrs": null,
"disabled": null,
"type": null,
"number": "吴可楠(303122)"
}
],
"value": null,
"treeAttrs": null,
"disabled": null,
"type": null
}
],
"value": null,
"treeAttrs": null,
"disabled": null,
"type": null
}]
// 访
visitedNodes.add(nodeId);
//
const isDirectMatch = node.value && numberSet.has(node.value);
// childrennull
if (!node.children || node.children === null) {
return isDirectMatch;
}
//
const childrenToKeep = [];
//
for (let i = 0; i < node.children.length; i++) {
const child = node.children[i];
//
if (processNode(child)) {
// childrenToKeep
childrenToKeep.push(child);
function modifyTreeData(treeData, idList) {
//
const newTreeData = JSON.parse(JSON.stringify(treeData));
// idList
const idArray = Array.isArray(idList) ? idList : [idList];
if (idArray.length === 0) return Array.isArray(newTreeData) ? [] : null;
// 1. ididid
const nodeMap = new Map(); // id
const parentMap = new Map(); // id id
const multiParentIds = new Set(); // id
function collectNodes(node, parentId) {
if (!node || typeof node !== 'object' || !node.id) return; //
//
if (!nodeMap.has(node.id)) {
nodeMap.set(node.id, node);
}
//
if (parentMap.has(node.id)) {
//
if (parentMap.get(node.id) !== parentId) {
multiParentIds.add(node.id);
}
} else {
parentMap.set(node.id, parentId); //
}
// children
node.children = childrenToKeep;
//
return isDirectMatch || childrenToKeep.length > 0;
}
//
const result = [];
for (let i = 0; i < treeData.length; i++) {
//
const nodeCopy = JSON.parse(JSON.stringify(treeData[i]));
if (processNode(nodeCopy)) {
result.push(nodeCopy);
// idid
if (node.children && Array.isArray(node.children)) {
node.children.forEach(child => collectNodes(child, node.id));
}
}
return result;
}
/**
* a 类型员工数据映射到树形结构中为匹配的节点添加 numberroledeparmentempType 属性
* @param {Array} employees - a 类型员工数组每个元素包含 number, name, role, deparment, empType, key 等字段
* @param {Array} treeData - 树形结构数据可能包含嵌套的 children
* @returns {Array} - 更新后的树形结构
*/
function enrichTreeWithEmployeeInfo(employees: any[], treeData: string | any[]) {
// value key 便
const employeeMap = new Map();
employees.forEach((emp: { number: any; }) => {
employeeMap.set(emp.number, emp); // value a number
});
//
function traverse(nodes: any[]) {
if (!Array.isArray(nodes)) return;
nodes.forEach(node => {
// value
if (node.value !== null && node.value !== undefined) {
const emp = employeeMap.get(node.value);
if (emp) {
// a
node.label = node.label + "(" + emp.number + ")";
node.number = node.label
node.role = emp.role;
node.deparment = emp.deparment;
node.empType = emp.empType;
// namekey
// node.name = emp.name;
// node.key = emp.key;
}
}
//
if (Array.isArray(node.children)) {
traverse(node.children);
}
});
//
if (Array.isArray(newTreeData)) {
newTreeData.forEach(root => collectNodes(root, null)); // idnull
} else {
collectNodes(newTreeData, null);
}
// ""
if (treeData && treeData.length > 0) {
traverse(treeData);
//
if (multiParentIds.size > 0) {
console.warn(`以下节点存在多个父节点,可能导致重复:${Array.from(multiParentIds).join(', ')}`);
}
return treeData;
}
function processTreeData(node: any) {
// id4
function hasLongIdNode(node: { id: string | any[]; children: string | any[]; }) {
// id
if (node.id && node.id.length > 4) {
return true;
}
// childrennull
if (node.children && Array.isArray(node.children) && node.children.length > 0) {
for (const child of node.children) {
if (hasLongIdNode(child)) {
return true;
}
}
// 2. ID+parentMap
const keepIds = new Set();
idArray.forEach(targetId => {
let currentId = targetId;
// parentIdnull
while (currentId !== null && nodeMap.has(currentId)) {
keepIds.add(currentId);
currentId = parentMap.get(currentId); //
}
return false;
}
//
function processNode(node: any) {
// id
if (!hasLongIdNode(node)) {
});
// 3. keepIdsparentId
function filterTree(node) {
if (!node || typeof node !== 'object' || !keepIds.has(node.id)) {
return null;
}
//
const newNode = { ...node };
//
if (newNode.children && Array.isArray(newNode.children) && newNode.children.length > 0) {
//
newNode.children = newNode.children
.map((child: any) => processNode(child))
.filter((child: null) => child !== null);
// childrennull
if (newNode.children.length === 0) {
newNode.children = null;
//
const filteredNode = { ...node };
// keepIdsparentIdid
if (filteredNode.children && Array.isArray(filteredNode.children)) {
//
const validChildren = new Map(); // id
filteredNode.children.forEach(child => {
// keepIdsidid
if (child && typeof child === 'object' && child.id &&
keepIds.has(child.id) && parentMap.get(child.id) === filteredNode.id) {
const filteredChild = filterTree(child);
if (filteredChild) {
validChildren.set(filteredChild.id, filteredChild); // id
}
}
});
// null
filteredNode.children = Array.from(validChildren.values());
if (filteredNode.children.length === 0) {
filteredNode.children = null;
}
}
return newNode;
}
return processNode(node);
}
/*
watch(props.orgAndManTree,(newValue)=>{
alert(1)
getTree()
},{ deep: true })
*/
const checkReady = () => {
if (props.orgAndManTree&&convertToAFormatComplate.value&&props.orgAndManTree.children.length>0) {//
getTree()
} else {
// 100ms
setTimeout(checkReady, 100)
filteredNode.children = null;
}
return filteredNode;
}
function getTree() {
//
let filteredTree;
if (Array.isArray(newTreeData)) {
// keepIdsnull
filteredTree = newTreeData
.map(root => {
if (root && keepIds.has(root.id) && parentMap.get(root.id) === null) {
return filterTree(root);
}
return null;
})
.filter(Boolean);
} else {
filteredTree = (keepIds.has(newTreeData.id) && parentMap.get(newTreeData.id) === null)
? filterTree(newTreeData)
: null;
}
// 4. labelnumber
function modifyLabels(node) {
if (!node || typeof node !== 'object') return;
if(props.orgAndManTree){
//alert(1)
let data1 = processTreeData(props.orgAndManTree)
//console.log(data1)
let data2 = filterTreeByList(data1.children, options.value)
data1.children = data2
resData.value = data1.children
/* userList.value = [{
id: '全选',
label: '全选',
children: [...resData.value]
}] */
userList.value = resData.value
enrichTreeWithEmployeeInfo(options.value, userList.value)
loading.value = false
if (idArray.includes(node.id)) {
const newLabel = `${node.label}(${node.value || ''})`;
node.label = newLabel;
node.number = newLabel;
}
if (node.children && Array.isArray(node.children)) {
node.children.forEach(child => modifyLabels(child));
}
}
//
if (Array.isArray(filteredTree)) {
filteredTree.forEach(root => modifyLabels(root));
} else {
modifyLabels(filteredTree);
}
return filteredTree;
}
const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree'
function getOrgAndManTree() {
return request({
url: treeUrl,
method: 'post',
});
const valPrint = (val:any) => {
if(Array.isArray(val)){
return val.join("、")
}
}
</script>
<template>
<div></div>
<el-tree-select v-if="props.types!=3" node-key="number" v-model="value" :data="userList" multiple :render-after-expand="false"
<el-tree-select v-if="props.types!=3" node-key="number" v-model="value" :data="resData" multiple :render-after-expand="false"
show-checkbox clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="1" filterable />
<el-text v-else class="wordColor">{{valPrint(value)}}</el-text>
</template>

Loading…
Cancel
Save