feat(后勤模块): 新增树形层级管理和建档审核中心功能
添加后勤模块相关路由配置 实现树形层级管理页面，包含树形结构展示和操作功能 实现建档审核中心页面，包含组织架构树和账户管理功能
This commit is contained in:
parent
88a4983b44
commit
8ee7c82eee
|
|
@ -276,6 +276,38 @@ export const constantRoutes = [
|
|||
|
||||
// 业主模块END
|
||||
|
||||
// 后勤模块START
|
||||
{
|
||||
path: "",
|
||||
component: Layout,
|
||||
redirect: "/index",
|
||||
children: [
|
||||
{
|
||||
path: "/logistics/TreeRatingManagement",
|
||||
component: () =>
|
||||
import("@/views/Logistics/TreeRatingManagement/index.vue"),
|
||||
name: "TreeRatingManagement",
|
||||
meta: { title: "树形层级管理", icon: "table" },
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: "",
|
||||
component: Layout,
|
||||
redirect: "/index",
|
||||
children: [
|
||||
{
|
||||
path: "/logistics/FilingReview",
|
||||
component: () =>
|
||||
import("@/views/Logistics/FilingReview/index.vue"),
|
||||
name: "FilingReview",
|
||||
meta: { title: "建档审核中心", icon: "table" },
|
||||
},
|
||||
]
|
||||
},
|
||||
// 后勤模块END
|
||||
|
||||
|
||||
{
|
||||
path: "/user",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,267 @@
|
|||
<!-- 后勤模块 - 建档审核中心 - 单位建档 -->
|
||||
|
||||
<template>
|
||||
<div class="MainBox">
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧树形结构 -->
|
||||
<el-col :span="8">
|
||||
<div class="CardBox">
|
||||
<div class="LeftTitle">组织架构树</div>
|
||||
<div class="TreeBox">
|
||||
<el-tree :data="treeData" :props="treeProps" show-line default-expand-all highlight-current
|
||||
@current-change="handleTreeChange" />
|
||||
</div>
|
||||
<div class="tree-actions">
|
||||
<el-button type="primary" icon="Plus">新增节点</el-button>
|
||||
<el-button icon="Edit">编辑节点</el-button>
|
||||
<el-button icon="Delete">删除节点</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧节点详情 -->
|
||||
<el-col :span="16">
|
||||
<el-card class="detail-card" shadow="hover">
|
||||
<template #header>
|
||||
<span>节点详情</span>
|
||||
</template>
|
||||
<el-form :model="formData" label-width="120px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="节点名称">
|
||||
<el-input v-model="formData.nodeName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="节点编码">
|
||||
<el-input v-model="formData.nodeCode" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上级节点">
|
||||
<el-input v-model="formData.parentNode" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="创建时间">
|
||||
<el-input v-model="formData.createTime" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 关联账户 -->
|
||||
<el-card class="account-card" shadow="hover" style="margin-top: 20px;">
|
||||
<template #header>
|
||||
<span>关联账户</span>
|
||||
</template>
|
||||
<el-table :data="accountList" border>
|
||||
<el-table-column prop="accountName" label="账户名" />
|
||||
<el-table-column prop="realName" label="姓名" />
|
||||
<el-table-column prop="unit" label="所属单位" />
|
||||
<el-table-column prop="phone" label="联系电话" />
|
||||
<el-table-column prop="role" label="角色" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination layout="prev, pager, next" :total="25" :page-size="10" :current-page="1"
|
||||
class="float-right" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 账户列表 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card class="account-card" shadow="hover" style="margin-top: 20px;">
|
||||
<template #header>
|
||||
<span>账户列表</span>
|
||||
<el-button type="primary" icon="Plus" class="float-right" size="mini">新建账户</el-button>
|
||||
</template>
|
||||
<el-table :data="accountList" border>
|
||||
<el-table-column prop="accountName" label="账户名" />
|
||||
<el-table-column prop="realName" label="姓名" />
|
||||
<el-table-column prop="unit" label="所属单位" />
|
||||
<el-table-column prop="phone" label="联系电话" />
|
||||
<el-table-column prop="role" label="角色" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="text" icon="Edit">编辑</el-button>
|
||||
<el-button type="text" icon="Delete">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination layout="prev, pager, next" :total="25" :page-size="10" :current-page="1"
|
||||
class="float-right" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 树形结构数据
|
||||
const treeData = ref([
|
||||
{
|
||||
label: '江苏省电力公司',
|
||||
children: [
|
||||
{
|
||||
label: '南京市供电公司',
|
||||
children: [
|
||||
{
|
||||
label: '城东片区',
|
||||
children: [
|
||||
{ label: 'A办公楼' },
|
||||
{ label: 'B办公楼' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '城西片区',
|
||||
children: [
|
||||
{ label: 'C办公楼' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// 树形结构配置
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
nodeName: '江苏省电力公司',
|
||||
nodeCode: 'JS001',
|
||||
parentNode: '-',
|
||||
createTime: '2023-05-15'
|
||||
})
|
||||
|
||||
// 关联账户数据
|
||||
const relatedAccounts = ref([
|
||||
{
|
||||
accountName: 'NJGD_ZH',
|
||||
realName: '赵华',
|
||||
phone: '138****1234',
|
||||
role: '项目经理',
|
||||
status: '已生效'
|
||||
},
|
||||
{
|
||||
accountName: 'NJGD_LW',
|
||||
realName: '李伟',
|
||||
phone: '139****5678',
|
||||
role: '审核人',
|
||||
status: '待审核'
|
||||
}
|
||||
])
|
||||
|
||||
// 账户列表数据
|
||||
const accountList = ref([
|
||||
{
|
||||
accountName: 'NJGD_ZH',
|
||||
realName: '赵华',
|
||||
unit: '南京市供电公司 - 城东片区 - A办公楼',
|
||||
phone: '138****1234',
|
||||
role: '项目经理',
|
||||
status: '已生效'
|
||||
},
|
||||
{
|
||||
accountName: 'NJGD_LW',
|
||||
realName: '李伟',
|
||||
unit: '南京市供电公司 - 城西片区 - C办公楼',
|
||||
phone: '139****5678',
|
||||
role: '审核人',
|
||||
status: '待审核'
|
||||
},
|
||||
{
|
||||
accountName: 'SZDL_WX',
|
||||
realName: '王霞',
|
||||
unit: '苏州市供电公司 - 城南片区 - B办公楼',
|
||||
phone: '137****9876',
|
||||
role: '物业管理员',
|
||||
status: '已禁用'
|
||||
}
|
||||
])
|
||||
|
||||
// 树形结构点击事件
|
||||
const handleTreeChange = (data) => {
|
||||
console.log('Current tree node:', data)
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
if (status === '已生效') return 'success'
|
||||
if (status === '待审核') return 'warning'
|
||||
if (status === '已禁用') return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.MainBox {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.CardBox {
|
||||
height: 570px;
|
||||
display: flex;
|
||||
padding: 0px 26px;
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
|
||||
.LeftTitle {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
}
|
||||
|
||||
.TreeBox {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #E4E7ED;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.account-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!-- 后勤模块 - 树形层级管理 -->
|
||||
|
||||
<template>
|
||||
<div class="MainBox">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="top-bar">
|
||||
<el-button type="primary" icon="Plus">新增层级节点</el-button>
|
||||
<el-button icon="Upload">批量导入层级</el-button>
|
||||
<el-button icon="Download">导出层级结构</el-button>
|
||||
<el-button icon="Setting">配置层级规则</el-button>
|
||||
<el-input placeholder="按地市公司名称搜索..." prefix-icon="Search" class="search-input" />
|
||||
</div>
|
||||
|
||||
<!-- 树形结构卡片 -->
|
||||
<el-card class="tree-card" shadow="hover">
|
||||
<template #header>
|
||||
<span>单位 / 楼宇树形层级管理</span>
|
||||
</template>
|
||||
<el-tree :data="treeData" :props="treeProps" default-expand-all show-line>
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node-content">
|
||||
<span class="node-icon">
|
||||
<el-icon>
|
||||
<School v-if="data.type === '楼宇'" />
|
||||
<Guide v-if="data.type === '区域'" />
|
||||
<OfficeBuilding v-if="data.type === '单位'" />
|
||||
</el-icon>
|
||||
|
||||
</span>
|
||||
<span class="node-label">{{ data.label }}</span>
|
||||
<span class="node-type">({{ data.type }})</span>
|
||||
<el-tag :type="getStatusTagType(data.status)" size="small">
|
||||
{{ data.status }}
|
||||
</el-tag>
|
||||
<span class="node-projects">关联项目: {{ data.projects }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
|
||||
|
||||
// 树形结构数据
|
||||
const treeData = ref([
|
||||
{
|
||||
label: '南京市供电公司',
|
||||
type: '单位',
|
||||
status: '已生效',
|
||||
projects: 12,
|
||||
children: [
|
||||
{
|
||||
label: '城东片区',
|
||||
type: '区域',
|
||||
status: '已生效',
|
||||
projects: 5,
|
||||
children: [
|
||||
{
|
||||
label: 'A 办公楼',
|
||||
type: '楼宇',
|
||||
status: '待审核',
|
||||
projects: 2
|
||||
},
|
||||
{
|
||||
label: 'B 产业园',
|
||||
type: '楼宇',
|
||||
status: '已生效',
|
||||
projects: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '城西片区',
|
||||
type: '区域',
|
||||
status: '已生效',
|
||||
projects: 7,
|
||||
children: [
|
||||
{
|
||||
label: 'C 写字楼',
|
||||
type: '楼宇',
|
||||
status: '已禁用',
|
||||
projects: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '苏州市供电公司',
|
||||
type: '单位',
|
||||
status: '已生效',
|
||||
projects: 8
|
||||
}
|
||||
])
|
||||
|
||||
// 树形结构配置
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusTagType = (status) => {
|
||||
if (status === '已生效') return 'success'
|
||||
if (status === '待审核') return 'warning'
|
||||
if (status === '已禁用') return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.MainBox {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.search-input {
|
||||
margin-left: auto;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-card {
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-node-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
|
||||
.node-icon {
|
||||
color: #409eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 500;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.node-type {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.node-projects {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue