fix : 组织机构样式修改
This commit is contained in:
@@ -415,7 +415,13 @@ html, body, #app, .el-container, .el-aside, .el-main {
|
||||
overflow: hidden;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.oran-icon{
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
vertical-align: -0.21em;
|
||||
|
||||
}
|
||||
.svg-icon {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
1
src/assets/svg/oran.svg
Normal file
1
src/assets/svg/oran.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720946136639" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4221" xmlns:xlink="http://www.w3.org/1999/xlink" width="128.125" height="128"><path d="M992.090881 443.129l-388.66-404.16C579.320881 13.934 546.998881 0.023 512.424881 0.023s-66.896 13.776-91.006 38.946L32.889881 443.129c-40.138 41.728-34.972 77.759-28.348 92.86 4.769 10.731 20.665 40.005 66.63 40.005l56.961 0 0 310.902c0 70.604 50.736 137.104 122.797 137.104l165.454 0L416.383881 694.949c0-35.236-5.298-54.974 30.733-54.974l130.745 0c36.031 0 30.733 19.605 30.733 54.974L608.594881 1024l165.321 0c72.063 0 122.797-66.499 122.797-137.104L896.712881 575.994l56.961 0c45.966 0 61.862-29.407 66.63-40.005C1026.927881 520.888 1032.094881 484.856 992.090881 443.129L992.090881 443.129zM953.676881 512.013 832.601881 512.013l0 374.884c0 35.237-22.784 72.99-58.815 72.99L672.446881 959.887 672.446881 694.949c0-70.604-22.652-118.956-94.717-118.956L446.985881 575.993c-72.063 0-94.717 48.352-94.717 118.956l0 265.069L250.929881 960.018c-36.031 0-58.816-37.754-58.816-72.99L192.113881 512.145 71.038881 512.145c-1.191 0-2.118-4.371-3.047-4.503 2.253-3.843 6.094-13.646 12.452-20.269l388.66-403.895c11.525-12.187 27.95-19.473 43.848-19.34 15.895-0.132 31.262 7.285 42.919 19.34L944.398881 487.24c6.358 6.623 10.199 16.426 12.32 20.269-0.796 0.132-1.856 4.503-3.047 4.503L953.676881 512.013z" fill="#909399" p-id="4222"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user