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;

123
src/views/workflow/process/common/UserPicker.vue
View File

@@ -4,19 +4,18 @@
:destroy-on-close="true">
<div class="picker">
<div class="candidate" v-loading="loading">
<el-input v-model="filterText" @change="getList(1)"
<el-input v-model="filterText" @change="getList"
clearable placeholder="输入昵称进行搜索">
<template #append>
<el-button @click="getList(1)">搜索</el-button>
<el-button @click="getList">搜索</el-button>
</template>
</el-input>
<!-- 人员选择 -->
<el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
<el-scrollbar style="height:90%;">
<div class="tree">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" default-expand-all accordion
@node-click="handleChange" @node-expand="handleChange">
:default-expanded-keys="expandedKeys" lazy :load="loadNode" accordion
@node-click="handleClick">
<template #default="{ node, data }">
<div class="tree-node">
<div v-if="data.type === 0" style="display: flex;align-items: center;padding: 3px 0">
@@ -100,12 +99,10 @@ const props = defineProps({
}
});
const radio = ref(0);
const chooseId = ref(0);
let selectItem = reactive({
type: -1,
value: "0"
});
const activeNames = ref(["1"]);
const visible = ref(false);
const loading = ref(false);
const title = ref("请选择");
@@ -140,56 +137,15 @@ watch(() => filterText.value, (newVal) => {
filterText.value = newVal
});
const getList = (flag) => {
let params = {}
if (flag === 1) {
isSearch.value = true;
params = {
chooseId: 0,
chooseName: filterText.value
}
selectItem = {
type: -1,
value: "0"
};
} else {
params = {
chooseId: radio.value,
chooseName: filterText.value
}
const getList = () => {
let params = {
chooseId: 0,
chooseName: filterText.value
}
getMosrUser(params).then(res => {
// if (res.data) {
if (selectItem.type === -1) {
dataList.value = res.data;
} else if (selectItem.type === 1) {
selectItem.children = res.data;
if (res.data.length === 0) {
selectItem.children = [{
type: 1,
name: '暂无数据'
}]
}
} else if (selectItem.type === 2) {
selectItem.children = res.data;
}
// }
dataList.value = res.data;
});
};
const setData = (source) => {
// for (let item of source) {
// this.$set(item, "value", selectItem.value + "-" + item.id)
// }
return source;
};
//通过关键字过滤树节点
// filterNode(value, data) {
// if (!value) return true;
// return data.name.indexOf(value) !== -1;
// },
//用于用户选择
const showUserPicker = () => {
selectItem = {
@@ -197,26 +153,41 @@ const showUserPicker = () => {
value: "0"
};
dataList.value = [];
// console.log('_value.value',_value.value)
// if(props.setNullToSelectList){
// selectList.value = []
// }else {
selectList.value =_value.value
// }
chooseId.value = 0;
selectList.value = _value.value
radio.value = 0;
visible.value = true;
expandedKeys.value = [];
filterText.value = ''
getList();
};
const handleChange = (item, data) => {
async function loadNode(node, resolve) {
let data = node.data
let params = {}
if (data.id) {
params = {
chooseId: data.id
}
} else {
params = {
chooseId: 0
}
}
let result = await getMosrUser(params).then(res => {
if (res.data.length === 0) {
return []
} else {
return res.data
}
})
resolve(result)
}
const handleClick = (item, data) => {
selectItem = item;
if (isSearch.value && item.type !== 0) {
filterText.value = ""
radio.value = item.id;
getList();
return;
} else if (!isSearch.value) {
//渲染子节点用户或部门及用户数据
@@ -225,25 +196,12 @@ const handleChange = (item, data) => {
expandedKeys.value.push(item.value);
if (item.type !== 0) {
radio.value = item.id;
getList();
return;
}
}
}
}
// if(expandedKeys.value.indexOf(item.value)==-1){
// expandedKeys.value.push(item.value);
// }else {
// if (data.expanded === true) {
// if (item.type !== 0) {
// chooseId.value = item.id;
// getList();
// return;
// }
// }
// }
//仅选择用户
if (item.type === 0) {
if (props.multiple) {
@@ -259,7 +217,6 @@ const handleChange = (item, data) => {
selectList.value = [item];
}
}
// _value = selectList.value
};
const noSelected = (selectItem) => {
@@ -284,22 +241,22 @@ const clearSelected = () => {
};
const selectConfirm = () => {
//确定按钮
if (props.checkMatrix){
checkMatrix(selectList.value[0].id).then(res=>{
if (props.checkMatrix) {
checkMatrix(selectList.value[0].id).then(res => {
console.log(res)
if (res.code === 2000){
if (res.code === 2000) {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
})
}else {
} else {
emit("ok", selectList.value);
dataList.value = []
visible.value = false;
}
})
}else {
} else {
emit("ok", selectList.value);
dataList.value = []
visible.value = false;