liangbin
/
JSDW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2026-01-14 13:16:05 +08:00
parent 16350b70db
commit f04d63451d
2 changed files with 612 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/api/treeRatingManagement.js Normal file
View File

@ -0,0 +1,52 @@
import request from '@/utils/request'
// 查询部门列表
export function listDept(query) {
return request({
url: '/system/dept/list',
method: 'get',
params: query
})
}
// 查询部门列表（排除节点）
export function listDeptExcludeChild(deptId) {
return request({
url: '/system/dept/list/exclude/' + deptId,
method: 'get'
})
}
// 查询部门详细
export function getDept(deptId) {
return request({
url: '/system/dept/' + deptId,
method: 'get'
})
}
// 新增部门
export function addDept(data) {
return request({
url: '/system/dept',
method: 'post',
data: data
})
}
// 修改部门
export function updateDept(data) {
return request({
url: '/system/dept',
method: 'put',
data: data
})
}
// 删除部门
export function delDept(deptId) {
return request({
url: '/system/dept/' + deptId,
method: 'delete'
})
}

627
src/views/Logistics/TreeRatingManagement/index.vue
View File

@ -4,11 +4,20 @@
<div class="MainBox">
<!-- 顶部操作栏 -->
<div class="top-bar">
<el-button type="primary" icon="Plus">新增层级节点</el-button>
<el-button type="primary" icon="Plus" @click="handleAdd">新增层级节点</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" />
<el-input
v-model="queryParams.deptName"
placeholder="按地市公司名称搜索..."
prefix-icon="Search"
class="search-input"
clearable
@keyup.enter="handleQuery"
/>
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</div>
<!-- 树形结构卡片 -->
@ -16,7 +25,7 @@
<template #header>
<span>单位 / 楼宇树形层级管理</span>
</template>
<el-tree :data="treeData" :props="treeProps" default-expand-all show-line>
<el-tree ref="treeRef" v-loading="loading" :data="treeData" :props="treeProps" default-expand-all show-line>
<template #default="{ node, data }">
<div class="tree-node-content">
<span class="node-icon">
@ -33,69 +42,99 @@
{{ data.status }}
</el-tag>
<span class="node-projects">关联项目: {{ data.projects }}</span>
<span class="node-actions" v-if="data.originalData" @click.stop>
<el-button link type="primary" icon="Edit" @click.stop="handleUpdate(data.originalData)" v-hasPermi="['system:dept:edit']">修改</el-button>
<el-button link type="primary" icon="Plus" @click.stop="handleAdd(data.originalData)" v-hasPermi="['system:dept:add']">新增</el-button>
<el-button v-if="data.originalData.parentId != 0" link type="primary" icon="Delete" @click.stop="handleDelete(data.originalData)" v-hasPermi="['system:dept:remove']">删除</el-button>
</span>
</div>
</template>
</el-tree>
</el-card>
<!-- 添加或修改层级节点对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级部门" prop="parentId">
<el-tree-select
v-model="form.parentId"
:data="deptOptions"
:props="{ value: 'deptId', label: 'deptName', children: 'children' }"
value-key="deptId"
placeholder="选择上级部门"
check-strictly
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in sys_normal_disable"
:key="dict.value"
:value="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ref, onMounted, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/treeRatingManagement'
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")
// 树形组件引用
const treeRef = ref(null)
// 加载状态
const loading = ref(false)
// 搜索参数
const queryParams = ref({
deptName: undefined
})
// 树形结构数据
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 treeData = ref([])
// 树形结构配置
const treeProps = {
@ -103,6 +142,25 @@ const treeProps = {
label: 'label'
}
// 弹窗相关
const open = ref(false)
const title = ref("")
const deptOptions = ref([])
// 表单数据
const data = reactive({
form: {},
rules: {
parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
},
})
const { form, rules } = toRefs(data)
// 获取状态标签类型
const getStatusTagType = (status) => {
if (status === '已生效') return 'success'
@ -110,58 +168,493 @@ const getStatusTagType = (status) => {
if (status === '已禁用') return 'danger'
return 'info'
}
/** 查询树形层级列表 */
function getList() {
loading.value = true
listDept(queryParams.value).then(response => {
// 获取原始数据
let rawData = []
if (response.data && Array.isArray(response.data)) {
rawData = response.data
} else if (Array.isArray(response)) {
rawData = response
}
// 如果数据是扁平结构（有 parentId），使用 handleTree 转换为树形结构
// 如果数据已经是树形结构（有 children），直接使用
let treeStructure = []
if (rawData.length > 0 && rawData[0].parentId !== undefined) {
// 扁平结构，需要转换
treeStructure = proxy.handleTree(rawData, "deptId", "parentId", "children")
} else {
// 已经是树形结构
treeStructure = rawData
}
// 转换为组件需要的格式
treeData.value = convertToTreeData(treeStructure)
loading.value = false
// 确保树保持展开状态
nextTick(() => {
expandAllNodes()
})
}).catch(() => {
loading.value = false
})
}
/** 展开所有节点 */
function expandAllNodes() {
if (treeRef.value) {
const nodes = treeRef.value.store.nodesMap
for (let key in nodes) {
nodes[key].expanded = true
}
}
}
/** 将接口数据转换为树形结构格式 */
function convertToTreeData(data) {
if (!Array.isArray(data)) return []
return data.map(item => ({
label: item.deptName || item.name || item.label,
type: item.type || '单位',
status: item.status === '0' ? '已生效' : item.status === '1' ? '已禁用' : (item.status || '已生效'),
projects: item.projects || 0,
originalData: item, // 保留原始数据，用于编辑和删除操作
children: item.children && item.children.length > 0 ? convertToTreeData(item.children) : undefined
}))
}
/** 取消按钮 */
function cancel() {
open.value = false
reset()
}
/** 表单重置 */
function reset() {
form.value = {
deptId: undefined,
parentId: undefined,
deptName: undefined,
orderNum: 0,
leader: undefined,
phone: undefined,
email: undefined,
status: "0"
}
proxy.resetForm("deptRef")
}
/** 新增按钮操作 */
function handleAdd(row) {
reset()
listDept().then(response => {
deptOptions.value = proxy.handleTree(response.data, "deptId")
})
if (row != undefined) {
form.value.parentId = row.deptId
}
open.value = true
title.value = "添加层级节点"
}
/** 修改按钮操作 */
function handleUpdate(row) {
if (!row || !row.deptId) {
proxy.$modal.msgError("数据错误，无法编辑")
return
}
reset()
listDeptExcludeChild(row.deptId).then(response => {
deptOptions.value = proxy.handleTree(response.data, "deptId")
})
getDept(row.deptId).then(response => {
form.value = response.data
open.value = true
title.value = "修改层级节点"
})
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["deptRef"].validate(valid => {
if (valid) {
if (form.value.deptId != undefined) {
updateDept(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功")
open.value = false
getList()
})
} else {
addDept(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功")
open.value = false
getList()
})
}
}
})
}
/** 删除按钮操作 */
function handleDelete(row) {
if (!row || !row.deptId) {
proxy.$modal.msgError("数据错误，无法删除")
return
}
proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
return delDept(row.deptId)
}).then(() => {
proxy.$modal.msgSuccess("删除成功")
getList()
}).catch(() => {})
}
/** 搜索按钮操作 */
function handleQuery() {
getList()
}
/** 重置按钮操作 */
function resetQuery() {
queryParams.value = {
deptName: undefined
}
handleQuery()
}
// 组件挂载时获取数据
onMounted(() => {
getList()
})
</script>
<style scoped lang="scss">
.MainBox {
padding: 20px;
padding: 24px;
height: 100%;
background: #F9FAFB;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: calc(100vh - 84px);
}
.top-bar {
display: flex;
gap: 10px;
margin-bottom: 20px;
gap: 12px;
margin-bottom: 24px;
align-items: center;
flex-wrap: wrap;
padding: 16px 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.search-input {
margin-left: auto;
width: 300px;
width: 320px;
border-radius: 6px;
transition: all 0.3s ease;
:deep(.el-input__wrapper) {
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
&:hover {
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}
}
}
.el-button {
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}
}
}
.tree-card {
height: calc(100vh - 200px);
height: calc(100vh - 240px);
overflow-y: auto;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
background: #ffffff;
&:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
:deep(.el-card__header) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
font-weight: 600;
font-size: 16px;
padding: 16px 20px;
border-radius: 12px 12px 0 0;
}
:deep(.el-card__body) {
padding: 20px;
}
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 4px;
}
}
.tree-node-content {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
gap: 12px;
padding: 10px 12px;
border-radius: 6px;
transition: all 0.3s ease;
flex: 1;
min-width: 0;
&:hover {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
transform: translateX(4px);
}
.node-icon {
color: #409eff;
font-size: 16px;
color: #667eea;
font-size: 18px;
flex-shrink: 0;
transition: all 0.3s ease;
.el-icon {
filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
}
}
.node-label {
font-weight: 500;
font-weight: 600;
min-width: 150px;
color: #303133;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.node-type {
color: #666;
color: #909399;
font-size: 12px;
background: #f0f2f5;
padding: 2px 8px;
border-radius: 4px;
flex-shrink: 0;
}
:deep(.el-tag) {
border-radius: 4px;
font-weight: 500;
padding: 2px 10px;
font-size: 12px;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.node-projects {
color: #999;
color: #909399;
font-size: 12px;
margin-left: auto;
background: #f5f7fa;
padding: 4px 10px;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.node-actions {
margin-left: 12px;
display: flex;
gap: 4px;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.3s ease;
.tree-node-content:hover & {
opacity: 1;
}
.el-button {
padding: 4px 8px;
font-size: 12px;
border-radius: 4px;
transition: all 0.3s ease;
&:hover {
background: rgba(64, 158, 255, 0.1);
transform: scale(1.05);
}
}
}
}
// 优化树形组件样式
:deep(.el-tree) {
.el-tree-node {
.el-tree-node__content {
height: auto;
min-height: 40px;
padding: 4px 0;
transition: all 0.3s ease;
&:hover {
background: transparent;
}
}
.el-tree-node__expand-icon {
color: #667eea;
font-size: 16px;
transition: all 0.3s ease;
&:hover {
color: #764ba2;
transform: scale(1.1);
}
}
&.is-current > .el-tree-node__content {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
border-radius: 6px;
}
}
.el-tree-node__children {
padding-left: 20px;
}
}
// 优化对话框样式
:deep(.el-dialog) {
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
.el-dialog__header {
//background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
padding: 20px 24px;
border-radius: 12px 12px 0 0;
margin-right: 0;
.el-dialog__title {
font-weight: 600;
font-size: 18px;
}
.el-dialog__headerbtn {
.el-dialog__close {
color: #ffffff;
font-size: 20px;
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
}
.el-dialog__body {
padding: 24px;
}
.el-form-item__label {
font-weight: 500;
color: #606266;
}
.el-input, .el-input-number, .el-tree-select {
border-radius: 6px;
:deep(.el-input__wrapper) {
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}
}
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 20px;
.el-button {
border-radius: 6px;
padding: 10px 24px;
font-weight: 500;
transition: all 0.3s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
}
}
// 响应式设计
@media (max-width: 768px) {
.MainBox {
padding: 16px;
}
.top-bar {
flex-direction: column;
align-items: stretch;
.search-input {
margin-left: 0;
width: 100%;
}
}
.tree-card {
height: calc(100vh - 300px);
}
.tree-node-content {
flex-wrap: wrap;
gap: 8px;
.node-label {
min-width: 100%;
}
.node-projects {
margin-left: 0;
}
}
}
</style>