export default defineComponent({
setup() {
const loading = ref(false);
const expandflag = ref(false);
const showLine = ref(true);
const treedetail = ref([]);
const formRef = ref();
const tree = ref([]);
const selectDepartment= ref([]);
const departmenttree = ref([]);
const reportIdList = ref([]);
const currentselect=ref(’’);
const visible = ref(false);
const modalTitle = ref(“添加/编辑部门”);
const operate = ref("");
const formState = ref({
subjectName: “”,
parentId: null,
id: “”,
childList: null,
});
const rules = {
subjectName: [
{
required: true,
message: “请输入主题名称”,
trigger: “blur”,
},
],
};
const addAttr = (data) => {
for (var j = 0; j < data.length; j++) {
data[j][“scopedSlots”] = { title: “custom” }; //添加title属性
data[j][“title”] = data[j].displayName;
data[j][“key”] = data[j].id;
data[j][“value”] = data[j].id;
data[j][“children”] = data[j].children||[];
if (Array.isArray(data[j].children) && data[j].children.length > 0) {
addAttr(data[j].children);
}
}
return data;
};
const addDepartmentAttr = (data) => {
for (var j = 0; j < data.length; j++) {
data[j]["scopedSlots"] = { title: "custom" }; //添加title属性
data[j]["title"] = data[j].departmentName;
data[j]["key"] = data[j].departmentCode;
data[j]["value"] = data[j].departmentCode;
data[j]["children"] = data[j].children;
if (Array.isArray(data[j].children) && data[j].children.length > 0) {
addDepartmentAttr(data[j].children);
}
}
return data;
};
const gettree = () => {
loading.value = true;
getDirTree()
.then((res) => {
let result = res.data;
if (result.code === HTTP_ENUM.SUCCESS) {
loading.value = false;
tree.value = addAttr(result.data);
generateList(tree.value)
if (Array.isArray(result?.data) && result?.data?.length > 0) {
reportIdList.value =findIds(result.data[0].id, tree.value)
currentselect.value= result.data[0].id
treedetails(currentselect.value);
}
}
})
.catch((err) => {});
};
const showModal = (operatename, record) => {
visible.value = true;
operate.value = operatename;
};
const getdepartmenttree = () => {
loading.value = true;
getDepartmentTree()
.then((res) => {
let result = res.data;
if (result.code === HTTP_ENUM.SUCCESS) {
loading.value = false;
// tree.value = res.data;
departmenttree.value = addDepartmentAttr(result.data);
}
})
.catch((err) => {});
};
const resetForm = () => {
visible.value = false;
treedetails(currentselect.value)
};
const handleOk = () => {
loading.value = true;
operateTree({ “departmentCodeList”: selectDepartment.value,
“reportIdList”: reportIdList.value })
.then((res) => {
let result = res.data;
if (result.code === HTTP_ENUM.SUCCESS) {
loading.value = false;
visible.value = false;
treedetails(currentselect.value)
}
})
.catch((err) => {});
};
const treedetails = (id) => {
loading.value = true;
getPermissionDetail({ reportId: id })
.then((res) => {
let result = res.data;
if (result.code === HTTP_ENUM.SUCCESS) {
loading.value = false;
treedetail.value = result.data;
selectDepartment.value = treedetail.value.map(item=>{
return item.departmentCode
})
}
})
.catch((err) => {});
};
gettree();
getdepartmenttree();
//展开的key
const expandedKeys = ref([]);
//搜索关键字
const searchValue = ref("");
//是否展开树
const autoExpandParent = ref(true);
// 展开收起触发
const onExpand = (keys) => {
expandedKeys.value = keys;
autoExpandParent.value = false;
};
//处理数据,拿到 提取 key title 格式为 :{key:key,title: node.title } Antd组件方法
const dataList = [];
const generateList = (data) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.id;
console.log("node", node);
dataList.push({
key,
title: node.title,
});
if (node.children) {
generateList(node.children);
}
}
};
const onSelect = (selectedKeys, _e) => {
if (Array.isArray(selectedKeys) && selectedKeys.length > 0) {
currentselect.value=selectedKeys[0]
reportIdList.value =findIds(selectedKeys[0], tree.value)
treedetails(selectedKeys[0]);
}
};
//andt 组件方法 获取父级节点key
const getParentKey = (key, tree) => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some((item) => item.id === key)) {
parentKey = node.id;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey;
};
const findIds= (id, data)=> {
for (let node of data) {
if (node.id === id) {
let ids = [node.id];
if (node.children) {
for (let child of node.children) {
ids = […ids, …findIds(child.id, node.children)];
}
}
return ids;
} else if (node.children) {
let ids = findIds(id, node.children);
if (ids.length > 0) {
return ids;
}
}
}
return [];
}
const sercharchange =(e)=>{
if(e==’’){
expandflag.value = false
}else{
nextTick(()=>{
expandflag.value = true
})
}
}
//搜索事件
watch(searchValue, (value) => {
if (!value) return (autoExpandParent.value = false);
const expanded = dataList
.map((item) => {
if (item?.title.indexOf(value) > -1) {
return getParentKey(item.key, tree.value);
}
return null;
})
.filter((item, i, self) => item && self.indexOf(item) === i);
expandedKeys.value = expanded;
searchValue.value = value;
autoExpandParent.value = true;
});
return {
gettree,
treedetails,
loading,
tree,
departmenttree,
treedetail,
formRef,
expandedKeys,
searchValue,
autoExpandParent,
onExpand,
generateList,
getParentKey,
dataList,
showLine,
onSelect,
visible,
modalTitle,
formState,
rules,
showModal,
resetForm,
handleOk,
operate,
getdepartmenttree,
selectDepartment,
reportIdList,
findIds,
currentselect,
expandflag,
sercharchange
};
},
});