feat：部门管理重构
This commit is contained in:
sheng
251
web/src/views/system/dept/components/TreeCom.vue
Normal file
251
web/src/views/system/dept/components/TreeCom.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入部门名称" />
|
||||
<div class="tree-com">
|
||||
<div class="tc-head">
|
||||
<el-icon size="16" color="#606266" class="tc-head-icon">
|
||||
<HomeFilled />
|
||||
</el-icon>
|
||||
<span class="tc-head-txt">部门架构</span>
|
||||
<el-icon size="16" color="#606266" @click="() => showTotalNum = !showTotalNum" class="tc-head-icon">
|
||||
<View v-show="!showTotalNum" />
|
||||
<Hide v-show="showTotalNum" />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<el-tree ref="treeRef" :data="treeData" :props="treeProps" :filter-node-method="handleFilterTreeNode"
|
||||
:load="handleLoadNode" lazy :indent="38" @node-click="handleNodeClick" highlight-current default-expand-all>
|
||||
<template #default="{ node, data }">
|
||||
<element-tree-line :node="node" :showLabelLine="false" :indent="32">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon name="iconfont icon-shouye" /> {{ node.label }}
|
||||
<span v-show="showTotalNum">（10人）</span>
|
||||
</span>
|
||||
<span v-else class="text-center font-black font-normal text-red-700">
|
||||
<SvgIcon name="iconfont icon-shouye" /> {{ node.label }}
|
||||
</span>
|
||||
</element-tree-line>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
<div class="tree-tags">
|
||||
<el-tooltip effect="dark" content="新增">
|
||||
<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="编辑">
|
||||
<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="上移">
|
||||
<el-icon size="16" @click="handleSort('up')" class="mlt-icon">
|
||||
<Top />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="下移">
|
||||
<el-icon size="16" @click="handleSort('down')" class="mlt-icon">
|
||||
<Bottom />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" content="删除">
|
||||
<el-icon size="16" @click="handleDeleteDept" class="mlt-icon">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, toRaw, h } from 'vue';
|
||||
import { ElTree } from 'element-plus';
|
||||
import { getElementLabelLine } from "element-tree-line";
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { lazyLoadDept } from '../api';
|
||||
import { warningMessage } from '../../../../utils/message';
|
||||
import { TreeItemType, APIResponseData } from '../types';
|
||||
import type Node from 'element-plus/es/components/tree/src/model/node';
|
||||
|
||||
interface IProps {
|
||||
treeData: TreeItemType[];
|
||||
}
|
||||
|
||||
const ElementTreeLine = getElementLabelLine(h);
|
||||
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
};
|
||||
|
||||
withDefaults(defineProps<IProps>(), {
|
||||
treeData: () => [],
|
||||
})
|
||||
const emit = defineEmits(['setFormInitData', 'deleteDept', 'updateDept'])
|
||||
|
||||
let filterVal = ref('');
|
||||
let showTotalNum = ref(false)
|
||||
let treeSelectDept = ref<TreeItemType>({})
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
watch(filterVal, (val) => {
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
const handleFilterTreeNode = (value: string, data: TreeItemType) => {
|
||||
if (!value) return true;
|
||||
return toRaw(data).name?.indexOf(value) !== -1;
|
||||
};
|
||||
|
||||
const handleLoadNode = (node: Node, resolve: Function) => {
|
||||
if (node.level !== 0) {
|
||||
lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => {
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleNodeClick = (data: TreeItemType) => {
|
||||
treeSelectDept.value = data
|
||||
emit('setFormInitData', data)
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增 or 编辑 操作
|
||||
*/
|
||||
const handleUpdateMenu = (type: string) => {
|
||||
if (type === 'update') {
|
||||
if (!treeSelectDept.value.id) {
|
||||
warningMessage('请选择菜单！')
|
||||
return
|
||||
}
|
||||
emit('updateDept', type, treeSelectDept.value)
|
||||
} else {
|
||||
emit('updateDept', type);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除部门
|
||||
*/
|
||||
const handleDeleteDept = () => {
|
||||
if (!treeSelectDept.value.id) {
|
||||
warningMessage('请选择菜单！')
|
||||
return
|
||||
}
|
||||
emit('deleteDept', treeSelectDept.value.id, () => {
|
||||
treeSelectDept.value = {}
|
||||
})
|
||||
};
|
||||
|
||||
/**
|
||||
* 部门上下移动操作
|
||||
*/
|
||||
const handleSort = (type: string) => { }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -8px;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
|
||||
.tc-head-txt {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.tc-head-icon {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-tags {
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mlt-icon {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.tree-com {
|
||||
height: calc(100% - 60px);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon svg {
|
||||
display: none !important;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-tree-node__content>.el-tree-node__expand-icon {
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin-right: 5px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.is-leaf {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon:before {
|
||||
background: url("../../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .el-tree-node__expand-icon.expanded:before {
|
||||
background: url("../../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.el-tree .is-leaf.el-tree-node__expand-icon::before {
|
||||
display: block;
|
||||
background: none !important;
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user