720 lines
24 KiB
Vue
720 lines
24 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 调试信息 -->
|
||
<div style="margin-bottom: 20px; padding: 15px; background: #f5f7fa; border-radius: 8px;">
|
||
<el-button size="small" @click="showDebugInfo">查看调试信息</el-button>
|
||
<el-button size="small" @click="showRawData">查看原始数据</el-button>
|
||
<el-button size="small" type="primary" @click="testTreeStructure">测试树形结构</el-button>
|
||
<el-button size="small" type="success" @click="getCategories">重新加载数据</el-button>
|
||
<span style="margin-left: 20px; color: #666;">
|
||
数据总数: {{ tableData.length }} |
|
||
树形层级: {{ getMaxLevel() }}级
|
||
</span>
|
||
</div>
|
||
|
||
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border v-loading="loading"
|
||
element-loading-text="加载中..." element-loading-spinner="el-icon-loading"
|
||
:tree-props="{ children: 'children' }" :default-expand-all="false" :expand-on-click-node="false">
|
||
<el-table-column prop="name" label="名称" min-width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="id" label="id" min-width="200">
|
||
</el-table-column>
|
||
<el-table-column prop="level" label="层级" min-width="120">
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="280" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" @click="addNode(scope.row, 'sibling')">新增同级</el-button>
|
||
<el-button type="text" size="small" @click="addNode(scope.row, 'child')">新增子级</el-button>
|
||
<el-button type="text" size="small" @click="editNode(scope.row)">编辑</el-button>
|
||
<el-button type="text" size="small" @click="deleteNode(scope.row)"
|
||
style="color: #F56C6C;">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
|
||
<el-drawer title="菜单管理" :visible.sync="drawer" :direction="direction">
|
||
|
||
<div style="margin: 20px;"></div>
|
||
<el-form style="margin: 10px;" :label-position="labelPosition" label-width="100px" :model="formLabelAlign" :rules="formRules" ref="menuForm">
|
||
<el-form-item label="菜单名称" prop="name">
|
||
<el-input v-model="formLabelAlign.name" placeholder="请输入菜单名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="!formLabelAlign.parentid" label="菜单图标" prop="icon">
|
||
<div class="icon-upload-container">
|
||
<!-- 图片预览区域 -->
|
||
<div v-if="formLabelAlign.icon" class="icon-preview">
|
||
<div class="preview-wrapper">
|
||
<!-- SVG图片显示 -->
|
||
<img v-if="isSvgImage(formLabelAlign.icon)"
|
||
:src="formLabelAlign.icon"
|
||
class="preview-image svg-image"
|
||
alt="菜单图标">
|
||
<!-- 普通图片显示 -->
|
||
<img v-else
|
||
:src="formLabelAlign.icon"
|
||
class="preview-image"
|
||
alt="菜单图标">
|
||
<div class="preview-actions">
|
||
<el-button type="text" size="mini" @click="removeIcon" icon="el-icon-delete" style="color: #F56C6C;">删除</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上传组件 -->
|
||
<el-upload
|
||
v-if="!formLabelAlign.icon"
|
||
class="icon-uploader"
|
||
action="#"
|
||
:http-request="handleIconUpload"
|
||
:show-file-list="false"
|
||
:before-upload="beforeIconUpload"
|
||
accept=".svg,.png,.jpg"
|
||
drag>
|
||
<i class="el-icon-plus uploader-icon"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<!-- <div class="el-upload__tip" slot="tip">
|
||
<i class="el-icon-info"></i>
|
||
支持 SVG、PNG、JPG格式，文件大小不超过 5MB
|
||
</div> -->
|
||
</el-upload>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="菜单排序" style="margin-top: 10px!important;" prop="poriority">
|
||
<el-input-number :controls="false" v-model="formLabelAlign.poriority" :step="1" :min="0" :max="100" placeholder="请输入排序值"></el-input-number>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="菜单来源" prop="source">
|
||
<el-input v-model="formLabelAlign.source" placeholder="请输入菜单来源"></el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 操作按钮 -->
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitForm">保存</el-button>
|
||
<el-button @click="resetForm">重置</el-button>
|
||
<el-button @click="drawer = false">取消</el-button>
|
||
</el-form-item>
|
||
|
||
|
||
</el-form>
|
||
</el-drawer>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { reqNcMatchMenu,reqAddProductMenu } from '@/api/ncmatch';
|
||
export default {
|
||
name: 'menuMangement',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
categories: [],
|
||
tableData: [], // 移除硬编码的测试数据
|
||
drawer: false,
|
||
direction: 'rtl',
|
||
labelPosition: 'right',
|
||
|
||
formLabelAlign: {
|
||
name: '',
|
||
icon: '',
|
||
iconFile: null, // 存储二进制文件对象
|
||
url_link: '',
|
||
parentid: '',
|
||
poriority: '',
|
||
source: '',
|
||
},
|
||
formRules: {
|
||
name: [
|
||
{ required: true, message: '请输入菜单名称', trigger: 'blur' }
|
||
],
|
||
poriority: [
|
||
{ required: true, message: '请输入菜单排序', trigger: 'blur' }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getCategories();
|
||
},
|
||
methods: {
|
||
// 处理图标上传
|
||
handleIconUpload(options) {
|
||
const file = options.file;
|
||
console.log('上传文件:', file);
|
||
|
||
// 创建本地预览URL
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
this.formLabelAlign.icon = e.target.result;
|
||
this.$message.success('图片上传成功！');
|
||
};
|
||
reader.readAsDataURL(file);
|
||
|
||
// 保存文件对象到表单数据中，用于后续提交
|
||
this.formLabelAlign.iconFile = file;
|
||
},
|
||
|
||
// 上传前验证
|
||
beforeIconUpload(file) {
|
||
// 检查文件类型
|
||
const isValidType = this.isValidImageType(file.type);
|
||
if (!isValidType) {
|
||
this.$message.error('只支持 SVG、PNG、JPG格式的图片！');
|
||
return false;
|
||
}
|
||
|
||
// 检查文件大小 (5MB)
|
||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||
if (!isLt5M) {
|
||
this.$message.error('图片大小不能超过 5MB！');
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
// 验证图片类型
|
||
isValidImageType(type) {
|
||
const validTypes = [
|
||
'image/svg+xml',
|
||
'image/png',
|
||
'image/jpeg',
|
||
'image/jpg',
|
||
'image/gif',
|
||
'image/webp'
|
||
];
|
||
return validTypes.includes(type);
|
||
},
|
||
|
||
// 判断是否为SVG图片
|
||
isSvgImage(src) {
|
||
return src && (src.includes('.svg') || src.startsWith('data:image/svg+xml'));
|
||
},
|
||
|
||
// 删除图标
|
||
removeIcon() {
|
||
this.$confirm('确定要删除这个图标吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.formLabelAlign.icon = '';
|
||
this.formLabelAlign.iconFile = null;
|
||
this.$message.success('图标已删除');
|
||
}).catch(() => {});
|
||
},
|
||
|
||
// 提交表单
|
||
submitForm() {
|
||
this.$refs.menuForm.validate((valid) => {
|
||
if (valid) {
|
||
// 创建FormData对象
|
||
const formData = new FormData();
|
||
|
||
// 添加基本表单数据
|
||
formData.append('name', this.formLabelAlign.name);
|
||
formData.append('poriority', this.formLabelAlign.poriority);
|
||
formData.append('source', this.formLabelAlign.source);
|
||
formData.append('url_link', window.location.href);
|
||
|
||
// 只有当parentid为null时才传递图片
|
||
if (!this.formLabelAlign.parentid || this.formLabelAlign.parentid === '' || this.formLabelAlign.parentid === '0') {
|
||
if (this.formLabelAlign.iconFile) {
|
||
formData.append('icon', this.formLabelAlign.iconFile);
|
||
console.log('包含图片上传');
|
||
} else if (this.formLabelAlign.icon) {
|
||
// 如果有现有图片URL，也传递
|
||
formData.append('iconUrl', this.formLabelAlign.icon);
|
||
console.log('包含现有图片URL');
|
||
}
|
||
} else {
|
||
console.log('跳过图片上传，parentid不为null');
|
||
}
|
||
|
||
// 添加parentid
|
||
if (this.formLabelAlign.parentid) {
|
||
formData.append('parentid', this.formLabelAlign.parentid);
|
||
}
|
||
|
||
// 打印FormData内容（调试用）
|
||
for (let [key, value] of formData.entries()) {
|
||
console.log(`${key}:`, value);
|
||
}
|
||
|
||
// 这里调用API保存数据
|
||
this.saveMenuData(formData);
|
||
} else {
|
||
this.$message.error('请检查表单信息！');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 保存菜单数据
|
||
saveMenuData(formData) {
|
||
// 这里添加实际的API调用
|
||
// 例如：
|
||
reqAddProductMenu(formData).then(res => {
|
||
if (res.status) {
|
||
this.$message.success('保存成功！');
|
||
this.drawer = false;
|
||
this.getCategories(); // 刷新数据
|
||
}else{
|
||
this.$message.error(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
this.$message.error('保存失败：' + error.message);
|
||
});
|
||
|
||
// // 临时模拟成功
|
||
// this.$message.success('保存成功！');
|
||
// this.drawer = false;
|
||
// console.log('FormData数据已准备就绪，可以发送到服务器');
|
||
},
|
||
|
||
// 重置表单
|
||
resetForm() {
|
||
this.$refs.menuForm.resetFields();
|
||
this.formLabelAlign.icon = '';
|
||
this.formLabelAlign.iconFile = null;
|
||
},
|
||
addNode(row, type) {
|
||
this.drawer = true;
|
||
this.resetForm();
|
||
if (type === 'child') {
|
||
this.formLabelAlign.parentid = row.id;
|
||
} else if (type === 'sibling') {
|
||
this.formLabelAlign.parentid = row.parentid;
|
||
}
|
||
console.log('新增节点:', row, '类型:', type);
|
||
},
|
||
getCategories() {
|
||
this.loading = true;
|
||
reqNcMatchMenu({ url_link: window.location.href }).then(res => {
|
||
this.loading = false;
|
||
if (res.status) {
|
||
this.categories = this.buildSimpleTree(res.data);
|
||
this.tableData = this.categories; // 使用精简的树形结构
|
||
console.log("构建的精简树结构:", this.categories);
|
||
}
|
||
}).catch(error => {
|
||
this.loading = false;
|
||
console.error('获取菜单数据失败:', error);
|
||
});
|
||
},
|
||
editNode(row) {
|
||
this.drawer = true;
|
||
this.formLabelAlign = { ...row };
|
||
// 编辑时清除iconFile，避免重复上传
|
||
this.formLabelAlign.iconFile = null;
|
||
console.log('编辑节点:', row);
|
||
},
|
||
deleteNode(row) {
|
||
this.$confirm('确定要删除这个菜单吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
console.log('删除节点:', row);
|
||
this.$message.success('删除成功！');
|
||
}).catch(() => {});
|
||
},
|
||
buildTree(data, parentId = null) {
|
||
if (!Array.isArray(data)) {
|
||
console.log('数据不是数组:', data);
|
||
return [];
|
||
}
|
||
|
||
console.log('构建树结构，当前parentId:', parentId, '数据长度:', data.length);
|
||
|
||
// 找出当前层级的节点
|
||
const currentNodes = data.filter(item => {
|
||
// 处理顶级节点（parentid 为 null 或空字符串）
|
||
if (parentId === null) {
|
||
return !item.parentid || item.parentid === '' || item.parentid === '0';
|
||
}
|
||
return item.parentid === parentId;
|
||
});
|
||
|
||
console.log('当前层级节点数量:', currentNodes.length, '节点:', currentNodes);
|
||
|
||
if (currentNodes.length === 0) return [];
|
||
|
||
// 处理每个节点
|
||
return currentNodes.map(node => {
|
||
const resultNode = {
|
||
id: node.id,
|
||
name: node.name || '未命名',
|
||
parentid: node.parentid
|
||
};
|
||
|
||
// 递归处理子节点
|
||
const children = this.buildSimpleTree(data, node.id);
|
||
|
||
// 只有当有子节点时才添加 children 字段
|
||
if (children && children.length > 0) {
|
||
resultNode.children = children;
|
||
}
|
||
|
||
return resultNode;
|
||
});
|
||
},
|
||
|
||
// 精简的树形结构构建方法
|
||
buildSimpleTree(data, parentId = null) {
|
||
if (!Array.isArray(data)) {
|
||
return [];
|
||
}
|
||
|
||
// 找出当前层级的节点
|
||
const currentNodes = data.filter(item => {
|
||
if (parentId === null) {
|
||
return !item.parentid || item.parentid === '' || item.parentid === '0';
|
||
}
|
||
return item.parentid === parentId;
|
||
});
|
||
|
||
if (currentNodes.length === 0) return [];
|
||
|
||
// 处理每个节点，只保留必要字段
|
||
return currentNodes.map(node => {
|
||
const resultNode = {
|
||
id: node.id,
|
||
name: node.name || '未命名',
|
||
parentid: node.parentid
|
||
};
|
||
|
||
// 递归处理子节点
|
||
const children = this.buildSimpleTree(data, node.id);
|
||
|
||
// 只有当有子节点时才添加 children 字段
|
||
if (children && children.length > 0) {
|
||
resultNode.children = children;
|
||
}
|
||
|
||
return resultNode;
|
||
});
|
||
},
|
||
|
||
// 计算节点层级
|
||
calculateLevel(data, nodeId) {
|
||
let level = 1;
|
||
let currentId = nodeId;
|
||
|
||
while (true) {
|
||
const parent = data.find(item => item.id === currentId);
|
||
if (!parent || !parent.parentid || parent.parentid === '' || parent.parentid === '0') {
|
||
break;
|
||
}
|
||
level++;
|
||
currentId = parent.parentid;
|
||
}
|
||
|
||
return level;
|
||
},
|
||
showDebugInfo() {
|
||
console.log("当前 tableData 的结构:", this.tableData);
|
||
console.log("当前 tableData 的层级分布:", this.getLevelDistribution());
|
||
console.log("当前 tableData 的最大层级:", this.getMaxLevel());
|
||
|
||
// 检查树形结构
|
||
this.checkTreeStructure(this.tableData);
|
||
},
|
||
|
||
// 检查树形结构
|
||
checkTreeStructure(nodes, level = 0) {
|
||
if (!Array.isArray(nodes)) return;
|
||
|
||
nodes.forEach(node => {
|
||
const indent = ' '.repeat(level);
|
||
console.log(`${indent}📁 ${node.name} (ID: ${node.id})`);
|
||
console.log(`${indent} - hasChildren: ${node.hasChildren}`);
|
||
console.log(`${indent} - children.length: ${node.children ? node.children.length : 'undefined'}`);
|
||
console.log(`${indent} - level: ${node.level}`);
|
||
|
||
if (node.children && node.children.length > 0) {
|
||
this.checkTreeStructure(node.children, level + 1);
|
||
}
|
||
});
|
||
},
|
||
showRawData() {
|
||
console.log("原始数据:", this.categories);
|
||
},
|
||
|
||
// 测试树形结构
|
||
testTreeStructure() {
|
||
const testData = [
|
||
{
|
||
id: 1,
|
||
name: '一级菜单1',
|
||
parentid: null
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '一级菜单2',
|
||
parentid: null
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '一级菜单3',
|
||
parentid: null,
|
||
children: [
|
||
{
|
||
id: 31,
|
||
name: '二级菜单3-1',
|
||
parentid: 3
|
||
},
|
||
{
|
||
id: 32,
|
||
name: '二级菜单3-2',
|
||
parentid: 3,
|
||
children: [
|
||
{
|
||
id: 321,
|
||
name: '三级菜单3-2-1',
|
||
parentid: 32
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
console.log("精简测试数据:", testData);
|
||
this.tableData = testData;
|
||
},
|
||
getLevelDistribution() {
|
||
const levels = {};
|
||
this.tableData.forEach(node => {
|
||
const level = node.level;
|
||
if (levels[level]) {
|
||
levels[level]++;
|
||
} else {
|
||
levels[level] = 1;
|
||
}
|
||
});
|
||
return levels;
|
||
},
|
||
getMaxLevel() {
|
||
let maxLevel = 0;
|
||
this.tableData.forEach(node => {
|
||
if (node.level > maxLevel) {
|
||
maxLevel = node.level;
|
||
}
|
||
});
|
||
return maxLevel;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.el-table {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.el-table th {
|
||
background-color: #f5f7fa;
|
||
color: #606266;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.el-table td {
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.el-button--text {
|
||
padding: 4px 8px;
|
||
margin: 0 2px;
|
||
}
|
||
|
||
.el-button--text:hover {
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.el-tag {
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 树形表格的缩进样式 */
|
||
.el-table__expand-icon {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* 加载状态样式 */
|
||
.el-loading-mask {
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
|
||
.license-uploader {
|
||
border: 2px dashed #d1d9e0;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width:150px;
|
||
height: 150px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:hover {
|
||
border-color: #667eea;
|
||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
|
||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
|
||
}
|
||
|
||
.license-uploader-icon {
|
||
font-size: 28px;
|
||
color: #667eea;
|
||
width: 100%;
|
||
height: 160px;
|
||
line-height: 160px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.license-image {
|
||
width: 100%;
|
||
height: 160px;
|
||
display: block;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
/* 图标上传容器样式 */
|
||
.icon-upload-container {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 图标预览样式 */
|
||
.icon-preview {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.preview-wrapper {
|
||
position: relative;
|
||
display: inline-block;
|
||
border: 2px dashed #d9d9d9;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
background: #fafafa;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.preview-wrapper:hover {
|
||
border-color: #409eff;
|
||
background: #f0f9ff;
|
||
}
|
||
|
||
.preview-image {
|
||
max-width: 120px;
|
||
max-height: 120px;
|
||
object-fit: contain;
|
||
border-radius: 4px;
|
||
display: block;
|
||
}
|
||
|
||
.svg-image {
|
||
background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
|
||
linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
|
||
linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
|
||
linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
|
||
background-size: 20px 20px;
|
||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||
}
|
||
|
||
.preview-actions {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.preview-actions .el-button {
|
||
margin: 0 5px;
|
||
}
|
||
|
||
/* 上传组件样式 */
|
||
.icon-uploader {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
.icon-uploader .el-upload {
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep .icon-uploader .el-upload-dragger {
|
||
width: 150px!important;
|
||
height: 150px!important;
|
||
border: 2px dashed #d9d9d9;
|
||
border-radius: 8px;
|
||
background: #fafafa;
|
||
transition: all 0.3s;
|
||
display: flex ;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content:center;
|
||
}
|
||
|
||
.icon-uploader .el-upload-dragger:hover {
|
||
border-color: #409eff;
|
||
background: #f0f9ff;
|
||
}
|
||
|
||
.uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-upload__text {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.el-upload__text em {
|
||
color: #409eff;
|
||
font-style: normal;
|
||
}
|
||
|
||
.el-upload__tip {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
|
||
|
||
/* 表单样式优化 */
|
||
.el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.el-form-item__label {
|
||
font-weight: 500;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.preview-image {
|
||
max-width: 80px;
|
||
max-height: 80px;
|
||
}
|
||
|
||
.icon-uploader .el-upload-dragger {
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
</style> |