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-14 16:43:14 +08:00
parent 88ab0d3526
commit 8791d220e6
3 changed files with 106 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
<template>
<div class="layout">
<div class="layout-left" style="width: 40%">
<div class="organization-layout">
<div class="layout-left">
<div class="candidate" v-loading="loading">
<el-form :model="queryType" @submit.prevent="getList(1)">
<el-form-item prop="dictName">
@@ -17,15 +16,13 @@
<el-scrollbar>
<div class="tree scrollbar-dict">
<el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
:default-expanded-keys="expandedKeys" lazy accordion
:default-expanded-keys="expandedKeys" lazy
@node-click="handleChange" @node-expand="handleChange">
<template #default="{ node, data }">
<div class="tree-node">
<div style="display: flex;align-items: center;padding: 3px 0">
<el-icon v-if="data.type===0">
<House/>
</el-icon>
<el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'">
<div style="display: flex;align-items: center;padding: 3px 0">
<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;">
<FolderOpened/>
</el-icon>
{{ data.organizationalStructureName }}
@@ -38,15 +35,16 @@
</div>
</div>
<div class="layout-right" style="margin-top: 15px;width:65%;margin-left: 0">
<div class="layout-right">
<depart-component v-if="showDept" v-model:value="deptId"/>
<!-- <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
<!-- <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
</div>
</div>
</template>
<script setup>
import SvgIcon from '@/components/svgIcon/index.vue'
import {ElNotification} from "element-plus";
import {getOrganizationStructure} from "@/api/workflow/process-user";
import DepartComponent from "@/components/organizationalStructure/Department.vue";
@@ -88,7 +86,7 @@ const _value = computed({
}
});
const getList = (flag,type) => {
const getList = (flag, type) => {
let params = {}
if (flag === 1) {
isSearch.value = true;
@@ -111,13 +109,13 @@ const getList = (flag,type) => {
getOrganizationStructure(params).then(res => {
if (selectItem.type === -1) {
dataList.value = res.data;
} else if (type=== 2) {
} else if (type === 2) {
selectItem.children = res.data;
if (res.data.length === 0) {
selectItem.isLeaf = true
// selectItem.children = [{
// type: 2
// }
// selectItem.children = [{
// type: 2
// }
}
}
});
@@ -130,31 +128,32 @@ const init = () => {
dataList.value = [];
chooseId.value = 0;
expandedKeys.value = [];
queryType.chooseName = ""
queryType.chooseName = ""
getList();
};
const handleChange = (item, data) => {
if(item.type===1){
showDept.value=false
nextTick(()=>{
showDept.value=true
console.log('expandedKeys.value',expandedKeys.value)
if (item.type === 1) {
showDept.value = false
nextTick(() => {
showDept.value = true
})
deptId.value=item.organizationalStructureId
deptId.value = item.organizationalStructureId
}
selectItem = item;
if (isSearch.value) {
queryType.chooseName = ""
chooseId.value = item.organizationalStructureId;
getList('',2);
getList('', 2);
return;
} else {
//渲染子节点用户或部门及用户数据
if (data.expanded) {
if (expandedKeys.value.indexOf(item.value) === -1) {
expandedKeys.value.push(item.value);
organizationStructureType.value=item.type
organizationStructureType.value = item.type
chooseId.value = item.organizationalStructureId;
getList('',2);
getList('', 2);
return;
}
}
@@ -165,7 +164,81 @@ init()
</script>
<style lang="scss" scoped>
$containWidth: 480px;
$containWidth: 550px;
.organization-layout {
display: flex;
justify-content: space-between;
.layout-left {
width: $containWidth;
//border: 1px solid #ebeef5;
padding: 10px;
margin-top: 5px;
.candidate {
position: absolute;
display: inline-block;
width: $containWidth;
//height: 80%;
//border: 1px solid #e8e8e8;
:deep(.el-input) {
height: 40px;
.el-input__inner, .el-input-group__append {
font-size: 16px;
}
}
.scrollbar-dict {
border: 1px solid #ebeef5;
//min-height: 30vh;
//height: 60vh;
height: calc(100vh - 250px);
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
// 滚动条轨道
&::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
border-radius: 2px;
}
// 小滑块
&::-webkit-scrollbar-thumb {
background: rgba(80, 81, 82, 0.29);
border-radius: 10px;
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色
color: #409eff; // 节点的字体颜色
font-weight: bold; // 字体加粗
}
}
}
}
.layout-right {
flex: 1;
//width: 70%;
//border: 1px solid #ebeef5;
margin-left: 30px;
padding: 0 10px;
border: none;
}
}
:deep(.tree) {
.el-tree-node__content {
height: 34px;
@@ -174,37 +247,6 @@ $containWidth: 480px;
font-size: 18px;
}
}
//.el-tree-node {
// .is-leaf + .el-checkbox .el-checkbox__inner {
// display: inline-block;
// }
//
// .el-checkbox .el-checkbox__inner {
// display: none;
// }
//}
}
.footer {
float: right;
}
.candidate {
position: absolute;
display: inline-block;
width: $containWidth;
//height: 80%;
//border: 1px solid #e8e8e8;
:deep(.el-input) {
height: 40px;
.el-input__inner, .el-input-group__append {
font-size: 16px;
}
}
}