<!--
* @Description :菜单管理
* @Autor : miaofang
* @LastEditTime : 2023-05-18 13:27:41
-->
<template>
<!-- 菜单管理 -->
<div class="from-clues">
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
<el-col :span="4">
<el-form-item label="菜单名称" prop="menuName">
<el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="20" class="btnColRight">
<btn nativeType="cx" @click="searchQuery">查询</btn>
<btn nativeType="cx" @click="handleAdd()">新增菜单</btn>
</el-col>
</el-row>
</el-form>
</div>
<div class="from-clues-content">
<lb-table :pagination="false" :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tablelistData" row-key="id"
default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
</lb-table>
</div>
<edit-dialog ref="dialogForm" v-model="isDialog" :product-id="productId" :resource-category-id="resourceCategoryId"
@ok="reloadTableData" />
</div>
</template>
<script>
import data from "./data";
import { deleteAction, getAction, api, httpAction } from "@/api/manageApi";
import EditDialog from "./edit-dialog.vue";
import { mapGetters } from "vuex";
import { getMenuInfo } from "@/api/user";
import { updateOrder } from "@/api/orders"
import { judgeSort } from "@/utils/operation";
export default {
name: "menus",
components: {
EditDialog,
},
data () {
return {
isDialog: false,
tablelistData: [],//菜单数据
listData: [],
resourceCategoryId: "",
form: {
menuName: "",
},
title: "",//标题
// 表格数据
tableData: {
columns: []
.concat(data.columns())
.concat([
{
label: "排序",
width: 300,
render: (h, scope) => {
return (
<div>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isTop}
onClick={() => {
this.moveUp(scope.row, 'TOP')
}}
>
置顶
</el-button>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isTop}
onClick={() => {
this.moveUp(scope.row, 'UP');
}}
>
上移
</el-button>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isBottom}
onClick={() => {
this.moveDown(scope.row, 'DOWN');
}}
>
下移
</el-button>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isBottom}
onClick={() => {
this.moveDown(scope.row, 'BOTTOM');
}}
>
置底
</el-button>
</div>
);
},
},
]).concat([
{
label: "操作",
width: 380,
render: (h, scope) => {
return (
<div>
<el-button
type="text"
class='successColor'
onClick={() => {
this.handleEdit(scope.row);
}}
>
修改
</el-button>
<el-button
type="text"
class='delColor'
onClick={() => {
this.handleDelete(scope.row.id, scope.row.name);
}}
>
删除
</el-button>
</div>
);
},
},
]),
data: [],
},
tableUrl: api.menus, // 菜单接口地址
meumurlid: api.subsystem,// 项目id接口地址
productId: "",//项目id
};
},
created () {
this.getTableList();
},
computed: {
...mapGetters(["products"])
},
methods: {
//查询
/**
* @description: 查询
* @author: renchao
*/
searchQuery () {
if (this.form.menuName) {
this.tablelistData = this.childrenFn(this.listData, this.form.menuName);
} else {
this.getTableList()
}
},
// 数据处理方法
/**
* @description: 数据处理方法
* @param {*} arr
* @param {*} key
* @author: renchao
*/
childrenFn (arr, key) {
const that = this;
let searchTree = [];
arr.forEach((item, index) => {
if (item.children != undefined && item.children.length != 0) {
let leaf = that.childrenFn(item.children, key);
if (leaf != undefined) {
let { name, code, resourceCategoryId, id, iproductId, operations, metadata } = item;
let parentObj = {
code, name, resourceCategoryId, id, iproductId, operations, metadata, children: leaf
};
searchTree.push(parentObj);
} else {
if (item.name.indexOf(key) != -1) {
searchTree.push(item);
}
}
} else {
if (item.name.indexOf(key) != -1) {
searchTree.push(item);
}
}
});
if (searchTree != undefined && searchTree.length != 0) {
return searchTree;
}
},
// 加载表格数据
/**
* @description: 加载表格数据
* @author: renchao
*/
getTableList () {
getMenuInfo(this.BASE_API.CODE).then((res) => {
if (res.code === 200) {
this.tablelistData = judgeSort(res.result)
this.listData = this.tablelistData
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
const queryOptionsid = {
conditionGroup: {
queryRelation: "AND",
conditions: [
{
property: "code",
value: this.BASE_API.CODE,
operator: "EQ",
},
],
},
};
const params = {
queryOptions: queryOptionsid,
};
// 获取系统id
getAction(this.meumurlid, params)
.then((res) => {
this.productId = res.content[0].id;
// this.selectedSubsystemCode = res.content[0].code
})
.catch((error) => {
console.log("er", error);
})
},
// 新增菜单
/**
* @description: 新增菜单
* @author: renchao
*/
handleAdd () {
this.isDialog = true
this.$refs.dialogForm.add();
this.$refs.dialogForm.title = "新增";
},
// 修改
/**
* @description: 修改
* @param {*} record
* @author: renchao
*/
handleEdit (record) {
this.isDialog = true
this.$refs.dialogForm.edit(record);
this.$refs.dialogForm.title = "修改";
},
// 删除
/**
* @description: 删除
* @param {*} id
* @param {*} content
* @author: renchao
*/
handleDelete (id, content) {
this.$confirm(
`<div class="customer-message-wrapper">
<h5 class="title">您确认要执行该操作用于以下信息:</h5>
<p class="content" aria-controls="${content}">${content}
</p>
<p class="result">执行后，数据将
<span >无法恢复</span>
</p>
</div>`,
'执行确认',
{
dangerouslyUseHTMLString: true,
customClass: 'customer-delete',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
if (!this.tableUrl) {
this.$message.error({
message: '请设置tableUrl属性为接口地址!',
showClose: true
})
return
}
const url = this.tableUrl + '/' + id
deleteAction(url).then(res => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true })
this.reloadTableData()
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
})
.catch(() => { })
},
// 新增、编辑回显
/**
* @description: 获新增、编辑回显
* @author: renchao
*/
reloadTableData () {
this.getTableList()
},
// 排序
/**
* @description: 排序
* @param {*} row
* @param {*} operate
* @author: renchao
*/
moveUp (row, operate) {
if (row.isTop) {
return;
} else {
this.realMove(row, operate);
}
},
/**
* @description: moveDown
* @param {*} row
* @param {*} operate
* @author: renchao
*/
moveDown (row, operate) {
if (row.isBottom) {
return;
} else {
this.realMove(row, operate);
}
},
//树形表格移动
/**
* @description: 树形表格移动
* @param {*} row
* @param {*} operate
* @author: renchao
*/
realMove (row, operate) {
function tarverse (nodes, id) {
let result;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].children && nodes[i].children.length > 0) {
result = tarverse(nodes[i].children, id);
}
if (nodes[i].id == id) {
if (operate === 'UP') {
result = nodes[i - 1].id;
} else if (operate === 'DOWN') {
result = nodes[i + 1].id;
}
return result;
}
if (result) return result;
}
return result
}
this.$nextTick(() => {
updateOrder('/rest/menus', row, operate, tarverse(this.tablelistData, row.id)).then(res => {
if (res.status === 1) {
this.getTableList()
this.$message.success({ message: res.message, showClose: true })
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
this.tablelistData = judgeSort(this.tablelistData || []);
})
// this.tablelistData = changeSort(this.tablelistData, row.id);
// function changeSort (arr, id) {
// if (arr.length) {
// let flag = false;
// for (let i in arr) {
// if (arr[i].id == id) {
// if (operate === "UP") {
// arr[i] = arr.splice(i - 1, 1, arr[i])[0];
// } else if (operate === "DOWN") {
// let temp = arr.splice(i - 0 + 1, 1, arr[i])
// arr[i] = temp[0];
// } else if (operate === "TOP") {
// arr.unshift(arr.splice(i, 1)[0]);
// } else if (operate === "BOTTOM") {
// arr.push(arr.splice(i, 1)[0]);
// }
// flag = true;
// break;
// }
// if (!flag && arr[i].children && arr[i].children.length) {
// arr[i].children = changeSort(arr[i].children, id);
// }
// }
// }
// return arr;
// }
}
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
// @import "~@/styles/public.scss";
</style>