|
@@ -1,161 +1,163 @@
|
|
|
-<template>
|
|
|
- <div class="hui-flex">
|
|
|
- <div class="hui-flex-box hui-flex hui-table">
|
|
|
- <div class="hui-content-insert">
|
|
|
- <el-button type="primary" size="medium" @click="insert(-1)">新增主菜单</el-button>
|
|
|
- </div>
|
|
|
- <div class="hui-flex-box">
|
|
|
- <el-table :data="tableData" row-key="id" border height="100%">
|
|
|
- <el-table-column prop="title" label="菜单名称" width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="iconClass" label="菜单图标" width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="index" label="菜单URL">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="180">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="hui-table-operation">
|
|
|
- <span class="table-operation" @click="insert(scope.row.id)">新增</span>
|
|
|
- <span class="table-operation" @click="update(scope.row)">编辑</span>
|
|
|
- <span class="table-operation" @click="deleteItem(scope.row.id)">删除</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <template slot="empty">
|
|
|
- <empty description="暂无数据"></empty>
|
|
|
- </template>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-dialog :close-on-click-modal="false" title="菜单" :visible.sync="dialogVisible" width="900px" :append-to-body="true">
|
|
|
- <edit v-if="dialogVisible" :updateData="updateData" ref="mainForm" @callback="dialogVisible = false"
|
|
|
- @sure="sure">
|
|
|
- </edit>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- getMenuList,
|
|
|
- insertMenu,
|
|
|
- updateMenu
|
|
|
- } from '@/httpApi/system'
|
|
|
- import edit from '@/components/system/main/edit'
|
|
|
- import {
|
|
|
- setComment
|
|
|
- } from '@/uitls/auth';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: [],
|
|
|
- comment: [],
|
|
|
- dialogVisible: false,
|
|
|
- tableId: 1,
|
|
|
- nowDataId: -1,
|
|
|
- updateData: {},
|
|
|
- menuData: {},
|
|
|
- type: ''
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init(type) {
|
|
|
- getMenuList().then(res => {
|
|
|
- if (res.state) {
|
|
|
- if (!res.data || res.data.length === 0) return;
|
|
|
- this.menuData = res.data[0];
|
|
|
- this.tableData = JSON.parse(this.menuData.data);
|
|
|
- this.comment = [];
|
|
|
- this.testIndex(this.tableData);
|
|
|
- this.testComment(this.tableData);
|
|
|
- if (type === 'reload') {
|
|
|
- this.$store.dispatch('app/changeMenuData', this.tableData);
|
|
|
- setComment(JSON.stringify(this.comment));
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- testIndex(tableData) {
|
|
|
- for (let i = 0; i < tableData.length; i++) {
|
|
|
- if (tableData[i].id + 1 > this.tableId) this.tableId = tableData[i].id + 1;
|
|
|
- if (tableData[i].children) this.testIndex(tableData[i].children);
|
|
|
- }
|
|
|
- },
|
|
|
- testComment(item, id, form) {
|
|
|
- if (id == -1) return item.push(form);
|
|
|
- if (this.type == 'delete') {
|
|
|
- let index = item.findIndex(node => node.id == id);
|
|
|
- if (index > -1) item.splice(index, 1);
|
|
|
- }
|
|
|
- for (let i = 0; i < item.length; i++) {
|
|
|
- if (item[i].id == id) {
|
|
|
- if (this.type == 'insert') {
|
|
|
- if (!item[i].children) item[i].children = [];
|
|
|
- item[i].children.push(form);
|
|
|
- } else if (this.type == 'update') {
|
|
|
- item[i] = form;
|
|
|
- }
|
|
|
- }
|
|
|
- if (item[i].index && this.comment.filter(node => node == item[i].index).length == 0) this.comment.push(
|
|
|
- item[i].index);
|
|
|
- if (item[i].children) this.testComment(item[i].children, id, form);
|
|
|
- }
|
|
|
- },
|
|
|
- insert(id) {
|
|
|
- this.type = 'insert';
|
|
|
- this.nowDataId = id;
|
|
|
- this.updateData = {};
|
|
|
- this.dialogVisible = true;
|
|
|
- },
|
|
|
- update(item) {
|
|
|
- this.type = 'update';
|
|
|
- this.nowDataId = item.id;
|
|
|
- this.updateData = JSON.parse(JSON.stringify(item));
|
|
|
- this.dialogVisible = true;
|
|
|
- },
|
|
|
- deleteItem(id) {
|
|
|
- this.type = 'delete';
|
|
|
- this.nowDataId = id;
|
|
|
- this.updateData = {};
|
|
|
- this.sure();
|
|
|
- },
|
|
|
- sure() {
|
|
|
- let obj = JSON.parse(JSON.stringify(this.tableData));
|
|
|
- this.comment = [];
|
|
|
- this.testComment(obj, this.nowDataId, this.returnForm());
|
|
|
- this.menuData.id ? updateMenu({
|
|
|
- id: this.menuData.id,
|
|
|
- data: JSON.stringify(obj),
|
|
|
- comment: JSON.stringify(this.comment)
|
|
|
- }).then(this.successFunc) : insertMenu({
|
|
|
- data: JSON.stringify(obj),
|
|
|
- comment: JSON.stringify(this.comment)
|
|
|
- }).then(this.successFunc);
|
|
|
- },
|
|
|
- returnForm() {
|
|
|
- if (this.type == 'delete') return {};
|
|
|
- let form = this.$refs.mainForm.sureIncrease();
|
|
|
- if (this.type == 'insert') form['id'] = this.tableId;
|
|
|
- return form;
|
|
|
- },
|
|
|
- successFunc(res) {
|
|
|
- if (res.state) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '操作成功'
|
|
|
- })
|
|
|
- this.init('reload');
|
|
|
- this.dialogVisible = false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- edit
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
+<template>
|
|
|
+ <div class="hui-flex">
|
|
|
+ <div class="hui-flex-box hui-flex hui-table">
|
|
|
+ <div class="hui-content-insert">
|
|
|
+ <el-button type="primary" size="medium" @click="insert(-1)">新增主菜单</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <el-table :data="tableData" row-key="id" border height="100%">
|
|
|
+ <el-table-column prop="title" label="菜单名称" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="iconClass" label="菜单图标" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="index" label="菜单URL">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="hui-table-operation">
|
|
|
+ <span class="table-operation" v-if="scope.row.isMenu === '1'"
|
|
|
+ @click="insert(scope.row.id)">新增</span>
|
|
|
+ <span class="table-operation" @click="update(scope.row)">编辑</span>
|
|
|
+ <span class="table-operation" @click="deleteItem(scope.row.id)">删除</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template slot="empty">
|
|
|
+ <empty description="暂无数据"></empty>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :close-on-click-modal="false" title="菜单" :visible.sync="dialogVisible" width="900px"
|
|
|
+ :append-to-body="true">
|
|
|
+ <edit v-if="dialogVisible" :updateData="updateData" ref="mainForm" @callback="dialogVisible = false"
|
|
|
+ @sure="sure">
|
|
|
+ </edit>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getMenuList,
|
|
|
+ insertMenu,
|
|
|
+ updateMenu
|
|
|
+ } from '@/httpApi/system'
|
|
|
+ import edit from '@/components/system/main/edit'
|
|
|
+ import {
|
|
|
+ setComment
|
|
|
+ } from '@/uitls/auth';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ comment: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ tableId: 1,
|
|
|
+ nowDataId: -1,
|
|
|
+ updateData: {},
|
|
|
+ menuData: {},
|
|
|
+ type: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(type) {
|
|
|
+ getMenuList().then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ if (!res.data || res.data.length === 0) return;
|
|
|
+ this.menuData = res.data[0];
|
|
|
+ this.tableData = JSON.parse(this.menuData.data);
|
|
|
+ this.comment = [];
|
|
|
+ this.testIndex(this.tableData);
|
|
|
+ this.testComment(this.tableData);
|
|
|
+ if (type === 'reload') {
|
|
|
+ this.$store.dispatch('app/changeMenuData', this.tableData);
|
|
|
+ setComment(JSON.stringify(this.comment));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ testIndex(tableData) {
|
|
|
+ for (let i = 0; i < tableData.length; i++) {
|
|
|
+ if (tableData[i].id + 1 > this.tableId) this.tableId = tableData[i].id + 1;
|
|
|
+ if (tableData[i].children) this.testIndex(tableData[i].children);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ testComment(item, id, form) {
|
|
|
+ if (id == -1) return item.push(form);
|
|
|
+ if (this.type == 'delete') {
|
|
|
+ let index = item.findIndex(node => node.id == id);
|
|
|
+ if (index > -1) item.splice(index, 1);
|
|
|
+ }
|
|
|
+ for (let i = 0; i < item.length; i++) {
|
|
|
+ if (item[i].id == id) {
|
|
|
+ if (this.type == 'insert') {
|
|
|
+ if (!item[i].children) item[i].children = [];
|
|
|
+ item[i].children.push(form);
|
|
|
+ } else if (this.type == 'update') {
|
|
|
+ item[i] = form;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item[i].index && this.comment.filter(node => node == item[i].index).length == 0) this.comment.push(
|
|
|
+ item[i].index);
|
|
|
+ if (item[i].children) this.testComment(item[i].children, id, form);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ insert(id) {
|
|
|
+ this.type = 'insert';
|
|
|
+ this.nowDataId = id;
|
|
|
+ this.updateData = {};
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ update(item) {
|
|
|
+ this.type = 'update';
|
|
|
+ this.nowDataId = item.id;
|
|
|
+ this.updateData = JSON.parse(JSON.stringify(item));
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ deleteItem(id) {
|
|
|
+ this.type = 'delete';
|
|
|
+ this.nowDataId = id;
|
|
|
+ this.updateData = {};
|
|
|
+ this.sure();
|
|
|
+ },
|
|
|
+ sure() {
|
|
|
+ let obj = JSON.parse(JSON.stringify(this.tableData));
|
|
|
+ this.comment = [];
|
|
|
+ this.testComment(obj, this.nowDataId, this.returnForm());
|
|
|
+ this.menuData.id ? updateMenu({
|
|
|
+ id: this.menuData.id,
|
|
|
+ data: JSON.stringify(obj),
|
|
|
+ comment: JSON.stringify(this.comment)
|
|
|
+ }).then(this.successFunc) : insertMenu({
|
|
|
+ data: JSON.stringify(obj),
|
|
|
+ comment: JSON.stringify(this.comment)
|
|
|
+ }).then(this.successFunc);
|
|
|
+ },
|
|
|
+ returnForm() {
|
|
|
+ if (this.type == 'delete') return {};
|
|
|
+ let form = this.$refs.mainForm.sureIncrease();
|
|
|
+ if (this.type == 'insert') form['id'] = this.tableId;
|
|
|
+ return form;
|
|
|
+ },
|
|
|
+ successFunc(res) {
|
|
|
+ if (res.state) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '操作成功'
|
|
|
+ })
|
|
|
+ this.init('reload');
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ edit
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
<style lang="scss"></style>
|