odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 人员组件和组织结构组件改为懒加载模式

Browse Source
This commit is contained in:
odjbin
2024-07-16 21:56:39 +08:00
parent a934176986
commit ad4f2f5ba9
2 changed files with 86 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/system/organizationalStructure/index.vue
View File

@@ -2,27 +2,29 @@
<div class="organization-layout">
<div class="layout-left">
<div class="candidate" v-loading="loading">
<el-form :model="queryType" @submit.prevent="getList(1)">
<el-form :model="queryType" @submit.prevent="getList">
<el-form-item prop="dictName">
<el-input v-model="queryType.chooseName" @change="getList(1)"
<el-input v-model="queryType.chooseName" @change="getList"
clearable placeholder="输入公司或部门名称进行搜索">
<template #append>
<el-button @click="getList(1)">搜索</el-button>
<el-button @click="getList">搜索</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar>
<div class="tree scrollbar-dict">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" default-expand-all
@node-click="handleClick" @node-expand="handleClick">
:default-expanded-keys="expandedKeys" :lazy="true" :load="handleLoad"
@node-expand="handleNodeExpand" @node-click="handleClick"
>
<template #default="{ node, data }">
<div class="tree-node">
<div style="display: flex;align-items: center;padding: 3px 0;" :class="data.value === selectNodeKey ? 'highlight': ''">
<div style="display: flex;align-items: center;padding: 3px 0;"
:class="data.value === selectNodeKey ? 'highlight': ''">
<svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
<el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'" style="margin-right: 4px;">
<el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'"
style="margin-right: 4px;">
<FolderOpened/>
</el-icon>
{{ data.organizationalStructureName }}
@@ -36,7 +38,7 @@
</div>
<div class="layout-right">
<depart-component v-if="showDept" v-model:value="deptId"/>
<company-detail v-if="showCompany" v-model:value="companyId"></company-detail>
<company-detail v-if="showCompany" v-model:value="companyId"></company-detail>
<!-- <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
</div>
</div>
@@ -53,12 +55,10 @@ import CompanyDetail from "@/components/organizationalStructure/CompanyDetail.vu
const queryType = reactive({
chooseName: ""
});
const chooseId = ref(0);
const deptId = ref(0);
const companyId = ref(0);
const showDept = ref(false);
const showCompany = ref(false);
const organizationStructureType = ref(0);
let selectItem = reactive({
type: -1,
value: "0"
@@ -67,16 +67,12 @@ const loading = ref(false);
const dataList = ref([]);
const tree = ref([]);
const selectNodeKey = ref("")
const isSearch = ref(false);
const expandedKeys = ref([]);
const defaultProps = {
value: "value",
label: "organizationalStructureName",
children: "children",
isLeaf: (data) => {
// if (data.isLeaf) {
// return true
// }
}
};
const emit = defineEmits();
@@ -90,39 +86,18 @@ const _value = computed({
}
});
const getList = (flag, type) => {
let params = {}
if (flag === 1) {
isSearch.value = true;
params = {
chooseId: 0,
type: 0,
chooseName: queryType.chooseName
}
selectItem = {
type: -1,
value: "0"
};
} else {
params = {
chooseId: chooseId.value,
type: organizationStructureType.value,
chooseName: queryType.chooseName
}
const getList = () => {
let params = {
chooseId: 0,
type: 0,
chooseName: queryType.chooseName
}
selectItem = {
type: -1,
value: "0"
};
getOrganizationStructure(params).then(res => {
if (selectItem.type === -1) {
dataList.value = res.data;
} else if (type === 2) {
selectItem.children = [...res.data]
if (res.data.length === 0) {
selectItem.isLeaf = true
// selectItem.children = [{
// type: 2
// }
}
}
console.log(selectItem.children,"selectItem.children")
dataList.value = res.data;
});
};
const init = () => {
@@ -131,11 +106,30 @@ const init = () => {
value: "0"
};
dataList.value = [];
chooseId.value = 0;
expandedKeys.value = [];
queryType.chooseName = ""
getList();
};
async function handleLoad(node, resolve, reject) {
let data = node.data
let params
if (data.organizationalStructureId) {
params = {
chooseId: data.organizationalStructureId,
type: data.type
}
} else {
params = {
chooseId: 0,
type: 0,
}
}
let result = await getOrganizationStructure(params).then(res => {
return res.data
})
resolve(result)
}
const handleClick = (item, data) => {
selectNodeKey.value = item.value
if (item.type === 1) {
@@ -145,41 +139,25 @@ const handleClick = (item, data) => {
showDept.value = true
})
deptId.value = item.organizationalStructureId
}else{
} else {
showDept.value = false
showCompany.value = false
nextTick(() => {
showCompany.value = true
})
companyId.value=item.organizationalStructureId
companyId.value = item.organizationalStructureId
}
selectItem = item;
if (isSearch.value) {
queryType.chooseName = ""
chooseId.value = item.organizationalStructureId;
getList('', 2);
return;
} else {
//渲染子节点用户或部门及用户数据
if (data.expanded) {
if (expandedKeys.value.indexOf(item.value) === -1) {
expandedKeys.value.push(item.value);
organizationStructureType.value = item.type
chooseId.value = item.organizationalStructureId;
getList('', 2);
return;
}
}
}
};
init()
</script>
<style lang="scss" scoped>
.highlight{
.highlight {
color: black; //节点的字体颜色
font-weight: bold;
}
$containWidth: 550px;
.organization-layout {
display: flex;