266 lines
6.5 KiB
Vue
266 lines
6.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div flex style="height: 100%;">
|
||
|
|
<base-layout title="菜单树" style="width:260px;" :bottonShow="false" :isPage="false" :mainColor="mainColor"
|
||
|
|
ref="treeLayout" :operateButtonSwitch="false">
|
||
|
|
<div slot="main">
|
||
|
|
<base-tree ref="baseTree" @handleNodeClick="handleNodeClick" :menuData="menuData"></base-tree>
|
||
|
|
</div>
|
||
|
|
</base-layout>
|
||
|
|
<div style="flex:1;">
|
||
|
|
<!-- <div style="">
|
||
|
|
<p>标准按钮</p>
|
||
|
|
<div flex-wrap="cross:centet;height: 100px;overflow: auto;">
|
||
|
|
<el-button v-for="(item,index) in standardList" :type="item.type?item.type:'primary'"
|
||
|
|
size="small" style="margin-left: 5px;margin-bottom: 10px;" @click="funNewClick(item)"
|
||
|
|
:key="index">
|
||
|
|
{{item.menuName}}
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<base-layout title="按钮权限" ref="buttonLayout" :isPage="true" @onFuncBtn="getFuncBtn"
|
||
|
|
@pageChange="pageChange">
|
||
|
|
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
|
||
|
|
<base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
|
||
|
|
:tableHeight="tableHeight" :tableData="tableData" @radioChange="radioChange" :slotrow="true"
|
||
|
|
:tableColumn="tableColumn">
|
||
|
|
</base-table>
|
||
|
|
</div>
|
||
|
|
</base-layout>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 按钮权限弹窗 -->
|
||
|
|
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingsDialog"
|
||
|
|
class="userDialog" title="按钮权限" width="700px" top="10vh">
|
||
|
|
<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" :formdata="formdata" @onSubmit="getSubmit">
|
||
|
|
</base-form>
|
||
|
|
</base-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import baseTable from "@/components/base/baseTable";
|
||
|
|
import baseLayout from "@/components/base/baseLayout";
|
||
|
|
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
|
||
|
|
import baseTree from "@/components/base/BaseMenuTree/index.vue";
|
||
|
|
import baseForm from "@/components/base/baseNewForm/index.vue";
|
||
|
|
import configData from "./configData";
|
||
|
|
import {
|
||
|
|
GetMenuTree,
|
||
|
|
} from '@/api/apis/menuManage'
|
||
|
|
import {
|
||
|
|
buttonGetMenBillList,
|
||
|
|
buttonGetBillList,
|
||
|
|
buttonSaveData,
|
||
|
|
buttonDelData
|
||
|
|
} from '@/api/apis/buttonList'
|
||
|
|
export default {
|
||
|
|
name: "review",
|
||
|
|
components: {
|
||
|
|
baseLayout,
|
||
|
|
baseTable,
|
||
|
|
baseDialog,
|
||
|
|
baseTree,
|
||
|
|
baseForm
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
radioIndex: false,
|
||
|
|
radioID: false,
|
||
|
|
mainColor: '#f8f8f8',
|
||
|
|
tabLoading: false,
|
||
|
|
standardList: [{
|
||
|
|
icon: 'el-icon-search',
|
||
|
|
menuName: '新增'
|
||
|
|
},],
|
||
|
|
tableData: [],
|
||
|
|
settingsDialog: false,
|
||
|
|
settingCenter: "left",
|
||
|
|
isFunBtn: true,
|
||
|
|
formRow: configData.formRow,
|
||
|
|
// buttonList: [{
|
||
|
|
// 'menuName': '新增',
|
||
|
|
// icon: 'el-icon-plus'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// 'menuName': '编辑',
|
||
|
|
// icon: 'el-icon-edit'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// 'menuName': '删除',
|
||
|
|
// icon: 'el-icon-delete',
|
||
|
|
// type: 'danger'
|
||
|
|
// },
|
||
|
|
// ],
|
||
|
|
btnEvenName: '',
|
||
|
|
menuData: [],
|
||
|
|
formdata: {},
|
||
|
|
pageModel: {
|
||
|
|
limit: 20,
|
||
|
|
menuId: '',
|
||
|
|
page: 1,
|
||
|
|
Sequence: "",
|
||
|
|
SequenceName: ""
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 表头配置
|
||
|
|
tableColumn() {
|
||
|
|
return configData.tableColumnJson
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initPage()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initPage() {
|
||
|
|
this.getMenuData()
|
||
|
|
this.getTableData()
|
||
|
|
},
|
||
|
|
async getMenuData() {
|
||
|
|
let res = await GetMenuTree({})
|
||
|
|
if (res.code == 1) {
|
||
|
|
let arr = JSON.parse(res.data[0])
|
||
|
|
this.menuData = JSON.parse(res.data[0])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 树状图点击事件
|
||
|
|
handleNodeClick(data) {
|
||
|
|
this.pageModel.menuId = data.id
|
||
|
|
this.pageModel.page = 1
|
||
|
|
this.RefreshTable()
|
||
|
|
},
|
||
|
|
// 刷新table
|
||
|
|
RefreshTable() {
|
||
|
|
this.radioID = false
|
||
|
|
this.radioIndex = false
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.buttonLayout.pageClear()
|
||
|
|
this.$refs.customtable.clearRadioIndex()
|
||
|
|
})
|
||
|
|
this.getTableData()
|
||
|
|
},
|
||
|
|
pageChange(model) {
|
||
|
|
this.pageModel.page = model.page
|
||
|
|
this.pageModel.limit = model.limit
|
||
|
|
this.getTableData()
|
||
|
|
},
|
||
|
|
// 单选
|
||
|
|
radioChange(val) {
|
||
|
|
this.radioIndex = val.index
|
||
|
|
this.radioID = val.id
|
||
|
|
},
|
||
|
|
getTableData() {
|
||
|
|
this.tabLoading = true
|
||
|
|
let params = {
|
||
|
|
...this.pageModel
|
||
|
|
}
|
||
|
|
this.tabLoading = true
|
||
|
|
this.tableData = []
|
||
|
|
buttonGetBillList(params).then(res => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
this.tableData = res.data[1]
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.buttonLayout.setPageTotal(res.data[0])
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.tabLoading = false
|
||
|
|
})
|
||
|
|
this.tabLoading = false
|
||
|
|
},
|
||
|
|
btnadd() {
|
||
|
|
console.log("添加")
|
||
|
|
},
|
||
|
|
test() {
|
||
|
|
console.log("测试")
|
||
|
|
},
|
||
|
|
|
||
|
|
// 按钮点击事件
|
||
|
|
getFuncBtn(btnEven) {
|
||
|
|
this.btnEvenName = btnEven.menuName
|
||
|
|
// let ftnFunction = 'test'
|
||
|
|
// this[ftnFunction]()
|
||
|
|
if (btnEven.menuName == '新增') {
|
||
|
|
if (!this.pageModel.menuId) {
|
||
|
|
this.$vmNews('请选择菜单')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// this.$refs.customForm.resetForm()
|
||
|
|
this.settingsDialog = true
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.customForm.choiceAssignment({})
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
if (btnEven.menuName == "编辑") {
|
||
|
|
if (this.radioID === false) {
|
||
|
|
this.$vmNews('请选择一条数据')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.settingsDialog = true
|
||
|
|
this.formdata = this.tableData[this.radioIndex]
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.customForm.choiceAssignment(this.tableData[this.radioIndex])
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (btnEven.menuName == '删除') {
|
||
|
|
if (this.radioID === false) {
|
||
|
|
this.$vmNews('请选择一条数据')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$confirm('确定删除吗？', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
let params = {
|
||
|
|
id: this.radioID
|
||
|
|
}
|
||
|
|
buttonDelData(params).then(res => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
this.$vmNews("删除成功", 'success')
|
||
|
|
this.pageModel.page = 1
|
||
|
|
this.RefreshTable()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(() => { });
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
//表单提交
|
||
|
|
getSubmit(data) {
|
||
|
|
let params = {
|
||
|
|
...data
|
||
|
|
}
|
||
|
|
if (this.btnEvenName == '编辑') {
|
||
|
|
delete params.createTime
|
||
|
|
delete params.index
|
||
|
|
} else {
|
||
|
|
params.id = 0
|
||
|
|
params.MenuID = this.pageModel.menuId
|
||
|
|
}
|
||
|
|
buttonSaveData({
|
||
|
|
dataMain: params
|
||
|
|
}).then(res => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
this.$vmNews("保存成功", 'success')
|
||
|
|
this.pageModel.page = 1
|
||
|
|
this.RefreshTable()
|
||
|
|
this.settingsDialog = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
funNewClick(item) {
|
||
|
|
// this.$emit('onFuncBtn', item);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|