You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
8.5 KiB
263 lines
8.5 KiB
2 years ago
|
<template>
|
||
|
|
<div class="appMainPage" v-loading="loading">
|
||
|
|
<div class="main">
|
||
|
|
<tableTree
|
||
|
|
style="height:calc(100% - 100px)"
|
||
|
|
:treeData="tableData"
|
||
|
|
:treeColumn="treeColumn"
|
||
|
|
:needFormatData="true"
|
||
|
|
@freshTreeData="pageList"
|
||
|
|
:treeEditData="formData"
|
||
|
|
:treeEditRules="rules"
|
||
|
|
:treeEditForm="formList"
|
||
|
|
:treeEditSubmit="submitForm"
|
||
|
|
:treeEditBefore="editBefore"
|
||
|
|
@treeEditDelete="Delete"
|
||
|
|
@freshTreeEditForm="freshFormList"
|
||
|
|
:treeButtons="treeButtons"
|
||
|
|
></tableTree>
|
||
|
|
<!-- 示例 -->
|
||
|
|
<!--
|
||
|
|
:treeButtons="treeButtons"
|
||
|
|
:queryLeftButtons="queryLeftButtons"
|
||
|
|
:queryHeaderBtn="queryHeaderBtn"
|
||
|
|
:queryButtonsHandle="queryButtonsHandle"
|
||
|
|
-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { postCreateMenu, postUpdateMenu, postDeleteMenu, menuPermissions, getDetailedMenu } from "@/api/wms-auth";
|
||
|
|
import tableTree from "@/components/tableTree"
|
||
|
|
import { treeDefalutButton,queryDefalutButtons } from "@/utils/tableTree"
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
tableTree
|
||
|
|
},
|
||
|
|
name:"pcMenu",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// table按钮
|
||
|
|
treeButtons:[
|
||
|
|
...treeDefalutButton(function(row){
|
||
|
|
return !(String(row.sort).length < 5)
|
||
|
|
})
|
||
|
|
],
|
||
|
|
// 示例
|
||
|
|
// queryHeaderBtn:['addFirst','fresh','search','reset','test'],
|
||
|
|
// queryLeftButtons:[
|
||
|
|
// ...queryDefalutButtons("left"),
|
||
|
|
// {
|
||
|
|
// type: 'warning',
|
||
|
|
// icon: 'el-icon-edit',
|
||
|
|
// label: '测试-left',
|
||
|
|
// name: "test",
|
||
|
|
// permission:"['Auth.Menu.Update']",
|
||
|
|
// size: 'mini'
|
||
|
|
// },
|
||
|
|
// ],
|
||
|
|
loading:false,
|
||
|
|
// 新增/编辑数据
|
||
|
|
formData:{
|
||
|
|
name:"",//菜单名称
|
||
|
|
icon:"",//图标名称
|
||
|
|
code:"",//编码
|
||
|
|
parentCode:"",//父级编码
|
||
|
|
component:"",//项目地址
|
||
|
|
permission:"",//权限
|
||
|
|
route: "",//路由
|
||
|
|
sort:null,//排序
|
||
|
|
status:1,//状态
|
||
|
|
description: "",//描述
|
||
|
|
portal:0,//0:pc 1:pda
|
||
|
|
company: localStorage.getItem('company'),
|
||
|
|
},
|
||
|
|
// 新增/编辑显示
|
||
|
|
formList:[
|
||
|
|
{ type: "input", label: "菜单名称", prop: "name",placeholder:"例：按序收货"},
|
||
|
|
{ type: "input", label: "图标名称", prop: "icon",placeholder:"例：按序收货"},
|
||
|
|
{ type: "input", label: "编码", prop: "code",placeholder:"例：sortReceipt"},
|
||
|
|
{ type: "input", label: "父级编码", prop: "parentCode",placeholder:"例：sortReceipt"},
|
||
|
|
{ type: "input", label: "项目地址", prop: "component",placeholder:"例：basicData/ItemsManage/ItemBasic"},
|
||
|
|
{ type: "input", label: "权限", prop: "permission",placeholder:"例：base.info"},
|
||
|
|
{ type: "input", label: "路由", prop: "route",placeholder:"例：sortReceipt"},
|
||
|
|
{ type: "input", type:"number",valueType:Number,label: "排序", prop: "sort",},
|
||
|
|
{ type: "select", label: "状态", prop: "status", options: "enableOrStop"},
|
||
|
|
{ type: "input", label: "描述", prop: "description",},
|
||
|
|
],
|
||
|
|
//table渲染
|
||
|
|
tableData: [],
|
||
|
|
// tree配置
|
||
|
|
treeColumn:[
|
||
|
|
{ label: "菜单名称", prop: "name",width:"250"},
|
||
|
|
{ label: "图标名称", prop: "icon",},
|
||
|
|
{ label: "编码", prop: "code",},
|
||
|
|
{ label: "父级编码", prop: "parentCode",},
|
||
|
|
{ label: "项目地址", prop: "component",},
|
||
|
|
{ label: "权限", prop: "permission",},
|
||
|
|
{ label: "路由", prop: "route",},
|
||
|
|
{ label: "排序", prop: "sort"},
|
||
|
|
{ type: "filter", label: "状态", prop: "status", filters: {"1":"启用","0":"停用"},align:'center',headerAlign:"center" },
|
||
|
|
{ label: "描述", prop: "description"},
|
||
|
|
],
|
||
|
|
rules: {
|
||
|
|
name: [ { required: true, trigger: "blur", message: "请输入菜单名称" }, ],
|
||
|
|
icon: [ { required: true, trigger: "blur", message: "请输入图标名称" }, ],
|
||
|
|
code: [ { required: true, trigger: "blur", message: "请输入编码" }, ],
|
||
|
|
permission: [ { required: true, trigger: "blur", message: "请输入权限" }, ],
|
||
|
|
route: [ { required: true, trigger: "blur", message: "请输入路由" }, ],
|
||
|
|
sort: [ { required: true, trigger: "change", message: "请输入排序" }, ],
|
||
|
|
status: [ { required: true, trigger: "change", message: "请选择状态" }, ],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.pageList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 示例
|
||
|
|
// treeButtonsHandle(item,searchValue){
|
||
|
|
// return true //return true 可以继续进行组件内的其他操作
|
||
|
|
// return false //return false 原组件内按钮操作不在进行，可自定义操作
|
||
|
|
// },
|
||
|
|
// queryButtonsHandle(item,searchValue){
|
||
|
|
// return true //return true 可以继续进行组件内的其他操作
|
||
|
|
// // return false //return false 原组件内按钮操作不在进行，可自定义操作
|
||
|
|
// },
|
||
|
|
//请求数据渲染table
|
||
|
|
pageList() {
|
||
|
|
this.tableData=[];
|
||
|
|
this.loading = true
|
||
|
|
let filters = []
|
||
|
|
filters.push({
|
||
|
|
logic: "And",
|
||
|
|
column: "portal",
|
||
|
|
action: "==",
|
||
|
|
value: "0"
|
||
|
|
})
|
||
|
|
const data = {
|
||
|
|
condition: {
|
||
|
|
filters: filters
|
||
|
|
},
|
||
|
|
Sorting: "",
|
||
|
|
SkipCount: 0,
|
||
|
|
MaxResultCount: 1000,
|
||
|
|
};
|
||
|
|
menuPermissions(data).then((res) => {
|
||
|
|
this.tableData = res.items
|
||
|
|
this.loading = false
|
||
|
|
}).catch(()=>{
|
||
|
|
this.loading = false
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 控制编辑菜单disabled处理
|
||
|
|
freshFormList(item,row){
|
||
|
|
// 创建第一级/创建子菜单，父级不让填写
|
||
|
|
if(item.name == "addFirst" || item.name == "add"){
|
||
|
|
if(item.name == "add"){
|
||
|
|
this.formData.parentCode = row.code
|
||
|
|
}
|
||
|
|
this.formList.forEach(column=>{
|
||
|
|
if(column.prop == 'parentCode'){
|
||
|
|
column.disabled = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 编辑菜单，如果不是第一级，父级打开填写
|
||
|
|
else if(item.name == "edit"){
|
||
|
|
if(Number(row.sort) > 100){
|
||
|
|
this.formList.forEach(column=>{
|
||
|
|
column.disabled = false
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
this.formList.forEach(column=>{
|
||
|
|
if(column.prop == 'parentCode'){
|
||
|
|
column.disabled = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//编辑默认参数
|
||
|
|
editBefore(row) {
|
||
|
|
if (row) {
|
||
|
|
return new Promise((resolve,reject) => {
|
||
|
|
getDetailedMenu(row.id).then(res=>{
|
||
|
|
// let _res = JSON.parse(JSON.stringify(res));
|
||
|
|
// Object.keys(this.formData).forEach(key=>{
|
||
|
|
// // if(_res[key] !== undefined)_res[key] = this.formData[key] ? this.formData[key] : _res[key]
|
||
|
|
// if(_res[key] !== undefined)_res[key] = this.formData[key] ? this.formData[key] : _res[key]
|
||
|
|
// })
|
||
|
|
resolve(res)
|
||
|
|
}).catch(()=>{
|
||
|
|
resolve()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//删除
|
||
|
|
Delete(row) {
|
||
|
|
if(row.children && row.children.length > 0){
|
||
|
|
this.$alert("此菜单存在子菜单，请先删除子菜单信息。", "提示", {
|
||
|
|
type: "warning",
|
||
|
|
});
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
|
||
|
|
confirmButtonText: "确定",
|
||
|
|
cancelButtonText: "取消",
|
||
|
|
type: "warning",
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.loading = true
|
||
|
|
postDeleteMenu(row.id).then((res) => {
|
||
|
|
this.loading = false
|
||
|
|
this.$successMsg("删除成功！");
|
||
|
|
this.pageList();
|
||
|
|
}).catch((res) => {
|
||
|
|
this.loading = false
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
},
|
||
|
|
//新建与编辑交互
|
||
|
|
submitForm(isEdit,data,val) {
|
||
|
|
data.portal = 0
|
||
|
|
return new Promise((resolve,reject) => {
|
||
|
|
if(!isEdit){
|
||
|
|
// 新增
|
||
|
|
postCreateMenu(data)
|
||
|
|
.then((res) => {
|
||
|
|
this.$successMsg("创建成功！");
|
||
|
|
this.pageList();
|
||
|
|
resolve()
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
resolve()
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
//编辑
|
||
|
|
postUpdateMenu(data, data.id)
|
||
|
|
.then((res) => {
|
||
|
|
this.$successMsg("编辑成功！");
|
||
|
|
this.pageList();
|
||
|
|
resolve()
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
resolve()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.appMainPage {
|
||
|
|
.main {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|