210 lines
6.4 KiB
HTML
210 lines
6.4 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style scoped>
|
|
.custom-tree {
|
|
background: transparent;
|
|
padding: 8px;
|
|
}
|
|
|
|
/* 节点行高调整 */
|
|
.custom-tree .el-tree-node {
|
|
margin: 2px 0;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
|
|
/* 选中状态 */
|
|
.custom-tree .el-tree-node.is-current > .el-tree-node__content {
|
|
background: #e8f4ff;
|
|
border-left: 3px solid #409eff;
|
|
}
|
|
|
|
/* 节点内容区域 */
|
|
.custom-tree .el-tree-node__content {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
padding: 0 8px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* 自定义节点内容 */
|
|
.custom-tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 8px;
|
|
}
|
|
|
|
|
|
/* 文件夹图标颜色优化 */
|
|
.el-icon-folder {
|
|
color: #909399;
|
|
}
|
|
.el-icon-folder-opened {
|
|
color: #409eff;
|
|
}
|
|
|
|
/* 展开时图标旋转动画 */
|
|
.custom-tree .el-tree-node__expand-icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.custom-tree .el-tree-node__expand-icon.expanded {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* 节点标签 */
|
|
.node-label {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
color: #303133;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 禁用展开图标（当无子节点时） */
|
|
.custom-tree .el-tree-node__expand-icon.is-leaf {
|
|
color: transparent;
|
|
cursor: default;
|
|
}
|
|
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<el-row type="flex" :gutter="20" style="height: calc(100vh - 126px)">
|
|
<el-col :span="5">
|
|
<el-card shadow="never">
|
|
<el-input placeholder="输入关键字进行查找" v-model="filterText" clearable></el-input>
|
|
<div style="max-height: calc(100vh - 200px); overflow-y: auto">
|
|
<el-tree
|
|
:data="treeData"
|
|
ref="treeRef"
|
|
:expand-on-click-node="false"
|
|
:props="{ children: 'children', label: 'name' }"
|
|
node-key="id"
|
|
:default-expanded-keys="defaultExpandedKeys"
|
|
@node-click="treeNodeClick"
|
|
:filter-node-method="filterNode"
|
|
highlight-current
|
|
class="custom-tree"
|
|
>
|
|
<template slot-scope="{ node, data }">
|
|
<span class="custom-tree-node">
|
|
<i class="el-icon-folder-opened" v-if="node.level===1"></i>
|
|
<i class="el-icon-folder" v-else></i>
|
|
<span class="node-label">{{ node.label }}</span>
|
|
</span>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="19">
|
|
<el-card v-if="currentTreeData && currentTreeData.unitTypeCode==0" shadow="never">
|
|
<unit-manage
|
|
:current-Node="currentTreeNode?.level"
|
|
:current-data="currentTreeData"
|
|
:unit-level="2"
|
|
@refresh="getTreeData()"
|
|
ref="bzlRef"
|
|
></unit-manage>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" v-if="currentTreeData && currentTreeData.unitTypeCode==1">
|
|
<el-tabs v-model="unitTabActive" type="card">
|
|
<el-tab-pane name="threeUnitManage">
|
|
<span slot="label">
|
|
<i class="el-icon-school"></i>
|
|
下设单位
|
|
</span>
|
|
<unit-manage
|
|
:current-data="currentTreeData"
|
|
:unit-level="3"
|
|
:current-Node="currentTreeNode?.level"
|
|
@refresh="getTreeData()"
|
|
style="margin-top: 10px"
|
|
ref="bmlRef"
|
|
></unit-manage>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="unitUserManage">
|
|
<span slot="label">
|
|
<i class="el-icon-school"></i>
|
|
单位人员
|
|
</span>
|
|
<unit-user ref="userRef" :current-data="currentTreeData"></unit-user>
|
|
</el-tab-pane>
|
|
<el-tab-pane class="tab" name="unitLeaderManage">
|
|
<span slot="label">
|
|
<i class="el-icon-school"></i>
|
|
单位干部
|
|
</span>
|
|
<unit-leader-manage ref="leaderRef" :current-data="currentTreeData"></unit-leader-manage>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<script nonce="${cspNonce!}">
|
|
<!--#include("unitUser.js"){}#-->
|
|
<!--#include("unitManage.js"){}#-->
|
|
<!--#include("unitLeader.js"){}#-->
|
|
new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
unitTabActive: "threeUnitManage",
|
|
filterText: null,
|
|
currentTreeNode: null,
|
|
currentTreeData: null,
|
|
defaultExpandedKeys: [],
|
|
treeData: []
|
|
}
|
|
},
|
|
components: {
|
|
"unit-manage": UNIT_MANAGE_TEMPLATE,
|
|
"unit-user": UNIT_USER_MANAGE_TEMPLATE,
|
|
"unit-leader-manage": UNIT_LEADER_MANAGE_TEMPLATE
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.treeRef.filter(val)
|
|
}
|
|
},
|
|
methods: {
|
|
getTreeData() {
|
|
this.$axios.post(loc() + "/tree").then((res) => {
|
|
this.treeData = res.data
|
|
if (this.treeData) {
|
|
this.currentTreeData = this.treeData[0]
|
|
this.defaultExpandedKeys = this.treeData.length > 0 ? [this.treeData[0].id] : []
|
|
}
|
|
})
|
|
},
|
|
treeNodeClick(data, node) {
|
|
this.currentTreeData = data
|
|
this.currentTreeNode = node
|
|
this.$nextTick(()=>{
|
|
if (data.unitTypeCode==1) {
|
|
this.$refs.bmlRef.pageData()
|
|
this.$refs.userRef.pageData()
|
|
this.$refs.leaderRef.pageData()
|
|
} else {
|
|
this.$refs.bzlRef.pageData()
|
|
}
|
|
})
|
|
},
|
|
filterNode(value, data, node) {
|
|
if (!value) return true
|
|
return data.name.indexOf(value) !== -1
|
|
}
|
|
},
|
|
created() {
|
|
this.getTreeData()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|