|
|
@@ -23,59 +23,91 @@
|
|
|
</div>
|
|
|
<div class="conent-box" >
|
|
|
<!--表格内容栏-->
|
|
|
- <kt-table
|
|
|
- :height="500"
|
|
|
- permsEdit="sys:role:edit"
|
|
|
- permsDelete="sys:role:delete"
|
|
|
- :highlightCurrentRow="true"
|
|
|
- :stripe="false"
|
|
|
- :data="pageResult"
|
|
|
- :columns="columns"
|
|
|
- :showBatchDelete="false"
|
|
|
- @handleCurrentChange="handleRoleSelectChange"
|
|
|
- @findPage="findPage"
|
|
|
- @handleEdit="handleEdit"
|
|
|
- @handleDelete="handleDelete"
|
|
|
+ <el-table
|
|
|
+ :data="pageResult.content"
|
|
|
+ border
|
|
|
+ style="width: 100%; "
|
|
|
+ height="600"
|
|
|
>
|
|
|
- </kt-table>
|
|
|
+ <el-table-column
|
|
|
+ v-for="column in columns"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ :prop="column.prop"
|
|
|
+ :label="column.label"
|
|
|
+ :width="column.width"
|
|
|
+ :min-width="column.minWidth"
|
|
|
+ :fixed="column.fixed"
|
|
|
+ :key="column.prop"
|
|
|
+ :type="column.type"
|
|
|
+ :formatter="column.formatter"
|
|
|
+ :sortable="column.sortable == null ? true : column.sortable"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('action.operation')"
|
|
|
+ width="185"
|
|
|
+ fixed="right"
|
|
|
+
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <kt-button
|
|
|
+
|
|
|
+ label="菜单配置"
|
|
|
+ :perms="''"
|
|
|
+ :size="size"
|
|
|
+ @click="handleEdit( scope.row)"
|
|
|
+ />
|
|
|
+ <!-- <kt-button
|
|
|
+ icon="fa fa-trash"
|
|
|
+ :label="$t('action.delete')"
|
|
|
+ :perms="permsDelete"
|
|
|
+ :size="size"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ /> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
|
|
|
-
|
|
|
</div>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="pageRequest.pageNum"
|
|
|
+ :page-sizes="[10, 20, 30, 40]"
|
|
|
+ :page-size="pageRequest.pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pageRequest.total">
|
|
|
+ </el-pagination>
|
|
|
|
|
|
<!-- </el-col> -->
|
|
|
<!--新增编辑界面-->
|
|
|
<el-dialog
|
|
|
v-dialogDrag
|
|
|
- :title="operation ? '新增' : '编辑'"
|
|
|
+ :title="'菜单配置'"
|
|
|
width="40%"
|
|
|
:visible.sync="dialogVisible"
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
|
- <el-form
|
|
|
- :model="dataForm"
|
|
|
- label-width="80px"
|
|
|
- :rules="dataFormRules"
|
|
|
- ref="dataForm"
|
|
|
- :size="size"
|
|
|
+ <el-tree
|
|
|
+ :data="menuData"
|
|
|
+ size="mini"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id"
|
|
|
+ :props="defaultProps"
|
|
|
+ ref="menuTree"
|
|
|
+ :default-checked-keys="checkedKeys"
|
|
|
+
|
|
|
+ v-loading="menuLoading"
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ @check="handleMenuCheckChange"
|
|
|
+ @node-click="treeClick"
|
|
|
>
|
|
|
- <el-form-item label="ID" prop="id" v-if="false">
|
|
|
- <el-input
|
|
|
- v-model="dataForm.id"
|
|
|
- :disabled="true"
|
|
|
- auto-complete="off"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="角色名" prop="name">
|
|
|
- <el-input v-model="dataForm.name" auto-complete="off"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注 " prop="remark">
|
|
|
- <el-input
|
|
|
- v-model="dataForm.remark"
|
|
|
- auto-complete="off"
|
|
|
- type="textarea"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-tree>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button :size="size" @click.native="dialogVisible = false">{{
|
|
|
$t("action.cancel")
|
|
|
@@ -89,6 +121,28 @@
|
|
|
>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <el-drawer
|
|
|
+ title="数据规则/按钮权限配置"
|
|
|
+ :visible.sync="drawer"
|
|
|
+ :direction="'rtl'"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <el-tree
|
|
|
+ :data="messageList"
|
|
|
+ size="mini"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id"
|
|
|
+ :props="ruleProps"
|
|
|
+ ref="perMisseionTree"
|
|
|
+ :default-checked-keys="perCheckedKeys"
|
|
|
+
|
|
|
+
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ @check="handlePerCheckChange"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ <el-button style="margin-left: 20px;" type="primary" @click="submitPer">保存</el-button>
|
|
|
+ <!-- v-loading="menuLoading" -->
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -97,6 +151,8 @@
|
|
|
import KtButton from "@/views/Core/KtButton";
|
|
|
import TableTreeColumn from "@/views/Core/TableTreeColumn";
|
|
|
import { format } from "@/utils/datetime";
|
|
|
+
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
KtTable,
|
|
|
@@ -105,6 +161,8 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ messageList:[],
|
|
|
+ drawer:false,
|
|
|
size: "small",
|
|
|
filters: {
|
|
|
name: "",
|
|
|
@@ -123,7 +181,7 @@
|
|
|
// {prop:"lastUpdateBy", label:"更新人", minWidth:100},
|
|
|
// {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
|
|
|
],
|
|
|
- pageRequest: { pageNum: 1, pageSize: 10 },
|
|
|
+ pageRequest: { pageNum: 1, pageSize: 10,total:0 },
|
|
|
pageResult: {},
|
|
|
|
|
|
operation: false, // true:新增, false:编辑
|
|
|
@@ -149,75 +207,121 @@
|
|
|
children: "children",
|
|
|
label: "name",
|
|
|
},
|
|
|
+ ruleProps:{
|
|
|
+ children: "children",
|
|
|
+ label: "ruleName",
|
|
|
+ },
|
|
|
leveData: [],
|
|
|
+ checkedKeys:[],
|
|
|
+ roleId:"",
|
|
|
+ clickMenuId:"",
|
|
|
+ perCheckedKeys:[]
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.getLeveData();
|
|
|
+ this.findPage({});
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.pageRequest.pageSize=val
|
|
|
+ this.findPage({});
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.pageRequest.pageNum=val
|
|
|
+ this.findPage({});
|
|
|
+
|
|
|
+ },
|
|
|
getLeveData() {},
|
|
|
// 获取分页数据
|
|
|
findPage: function (data) {
|
|
|
- if (data !== null) {
|
|
|
- this.pageRequest = data.pageRequest;
|
|
|
- }
|
|
|
+ // if (data !== null) {
|
|
|
+ // this.pageRequest = data.pageRequest;
|
|
|
+ // }
|
|
|
this.pageRequest.columnFilters = {
|
|
|
name: { name: "name", value: this.filters.name },
|
|
|
};
|
|
|
this.$api.role
|
|
|
.findPage(this.pageRequest)
|
|
|
- .then((res) => {
|
|
|
+ .then((res) => {
|
|
|
this.pageResult = res.data;
|
|
|
+ this.pageRequest.total=res.data.totalSize
|
|
|
this.findTreeData();
|
|
|
})
|
|
|
.then(data != null ? data.callback : "");
|
|
|
},
|
|
|
- // 批量删除
|
|
|
- handleDelete: function (data) {
|
|
|
- this.$api.role.batchDelete(data.params).then(data.callback);
|
|
|
- },
|
|
|
- // 显示新增界面
|
|
|
- handleAdd: function () {
|
|
|
- this.dialogVisible = true;
|
|
|
- this.operation = true;
|
|
|
- this.dataForm = {
|
|
|
- id: 0,
|
|
|
- name: "",
|
|
|
- remark: "",
|
|
|
- };
|
|
|
- },
|
|
|
+
|
|
|
+
|
|
|
// 显示编辑界面
|
|
|
handleEdit: function (params) {
|
|
|
+ this.checkedKeys=[]
|
|
|
this.dialogVisible = true;
|
|
|
this.operation = false;
|
|
|
- this.dataForm = Object.assign({}, params.row);
|
|
|
+ // console.log(params)
|
|
|
+ this.roleId=params.id
|
|
|
+ // this.dataForm = Object.assign({}, params.row);
|
|
|
+ this.$api.sys.getInsRoleMenuPermissions({
|
|
|
+ roleId:params.id
|
|
|
+ }).then(res=>{
|
|
|
+ // console.log(res)
|
|
|
+ if(res.code===200){
|
|
|
+
|
|
|
+ if(res.data.length>0){
|
|
|
+ this.checkedKeys=res.data.map((v)=>{
|
|
|
+ return v.menuId
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$refs.menuTree.setCheckedKeys([],false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- // 编辑
|
|
|
+ // 保存角色关联菜单
|
|
|
submitForm: function () {
|
|
|
- this.$refs.dataForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.$confirm("确认提交吗？", "提示", {}).then(() => {
|
|
|
- this.editLoading = true;
|
|
|
- // let params = Object.assign({}, this.dataForm);
|
|
|
- this.$api.role.save(this.dataForm).then((res) => {
|
|
|
- this.editLoading = false;
|
|
|
- if (res.code == 200) {
|
|
|
- this.$message({ message: "操作成功", type: "success" });
|
|
|
- this.dialogVisible = false;
|
|
|
- this.$refs["dataForm"].resetFields();
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
+
|
|
|
+ this.$api.sys.saveAndUpdateRuleMenu({
|
|
|
+ menuIdList:this.checkedKeys,
|
|
|
+ roleId:this.roleId
|
|
|
+ }).then((res) => {
|
|
|
+ this.editLoading = false;
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({ message: "操作成功", type: "success" });
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.checkedKeys=[]
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
message: "操作失败, " + res.msg,
|
|
|
type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- this.findPage(null);
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // this.findPage(null);
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
+ // 保存角色-菜单-关联权限规则
|
|
|
+ submitPer(){
|
|
|
+ this.$api.sys.roleMenuPerSaveAndUpdate({
|
|
|
+ permissionsIdList:this.perCheckedKeys,
|
|
|
+ roleId:this.roleId,
|
|
|
+ menuId:this.clickMenuId
|
|
|
+ }).then((res) => {
|
|
|
+ this.editLoading = false;
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({ message: "操作成功", type: "success" });
|
|
|
+ this.drawer = false;
|
|
|
+ this.perCheckedKeys=[]
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "操作失败, " + res.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // this.findPage(null);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
// 获取数据
|
|
|
findTreeData: function () {
|
|
|
this.menuLoading = true;
|
|
|
@@ -254,29 +358,60 @@
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- // 树节点选择监听
|
|
|
+ //树节点选择监听
|
|
|
handleMenuCheckChange(data, check, subCheck) {
|
|
|
- let checkNode = this.$refs.menuTree.getCheckedKeys();
|
|
|
- console.log(checkNode.length);
|
|
|
- let checked = checkNode.length;
|
|
|
- if (checked !== 188) {
|
|
|
- this.checkAll = false;
|
|
|
- } else {
|
|
|
- this.checkAll = true;
|
|
|
- }
|
|
|
- // this.$api.menu.findMenuTree().then((res) => {
|
|
|
- // let array = res.data;
|
|
|
- // function treeForeach(array, fun) {
|
|
|
- // array.forEach((data) => {
|
|
|
- // fun(data);
|
|
|
- // data.children && treeForeach(data.children, fun); // 遍历子树
|
|
|
- // });
|
|
|
- // }
|
|
|
- // treeForeach(array, (node) => {
|
|
|
- // console.log(node);
|
|
|
- // });
|
|
|
- // });
|
|
|
+ this.checkedKeys=[...check.checkedKeys]
|
|
|
},
|
|
|
+ //规则树几点选中
|
|
|
+ handlePerCheckChange(data, check, subCheck) {
|
|
|
+ this.perCheckedKeys=[...check.checkedKeys]
|
|
|
+ },
|
|
|
+ //树节点点击
|
|
|
+ async treeClick(node){
|
|
|
+ // console.log(node)
|
|
|
+ this.clickMenuId=node.id
|
|
|
+ this.drawer=true
|
|
|
+ await this.getMessageList()
|
|
|
+ await this.getInsRolePermissionsDtoList()
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭？')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => {});
|
|
|
+ },
|
|
|
+ //获取菜单下的规则列表
|
|
|
+ async getMessageList(){
|
|
|
+ this.$api.sys.getMenuRelaPerqueryList({
|
|
|
+ menuId:this.clickMenuId,
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+
|
|
|
+ this.messageList=[...res.data]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取角色关联菜单 关联的规则数据
|
|
|
+ async getInsRolePermissionsDtoList(){
|
|
|
+ this.$api.sys.getInsRolePermissionsDtoList({
|
|
|
+ menuId:this.clickMenuId,
|
|
|
+ roleId:this.roleId
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+
|
|
|
+ console.log(res.data)
|
|
|
+ if(res.data.length>0){
|
|
|
+ this.perCheckedKeys=res.data.map((v)=>{
|
|
|
+ return v.permissionsId
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$refs.perMisseionTree.setCheckedKeys([],false);
|
|
|
+ }
|
|
|
+ // this.messageList=[...res.data]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 重置选择
|
|
|
resetSelection() {
|
|
|
this.checkAll = false;
|
|
|
@@ -327,31 +462,15 @@
|
|
|
this.authLoading = false;
|
|
|
});
|
|
|
},
|
|
|
- renderContent(h, { node, data, store }) {
|
|
|
- return (
|
|
|
- <div class="column-container">
|
|
|
- <span style="text-algin:center;margin-right:80px;">{data.name}</span>
|
|
|
- <span style="text-algin:center;margin-right:80px;">
|
|
|
- <el-tag
|
|
|
- type={data.type === 0 ? "" : data.type === 1 ? "success" : "info"}
|
|
|
- size="small"
|
|
|
- >
|
|
|
- {data.type === 0 ? "目录" : data.type === 1 ? "菜单" : "按钮"}
|
|
|
- </el-tag>
|
|
|
- </span>
|
|
|
- <span style="text-algin:center;margin-right:80px;">
|
|
|
- {" "}
|
|
|
- <i class={data.icon}></i>
|
|
|
- </span>
|
|
|
- <span style="text-algin:center;margin-right:80px;">
|
|
|
- {data.parentName ? data.parentName : "顶级菜单"}
|
|
|
- </span>
|
|
|
- <span style="text-algin:center;margin-right:80px;">
|
|
|
- {data.url ? data.url : "\t"}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
+ // renderContent(h, { node, data, store }) {
|
|
|
+ // return (
|
|
|
+ // <div class="column-container">
|
|
|
+ // <div style="text-algin:center;margin-right:80px;">{data.name}</div>
|
|
|
+
|
|
|
+
|
|
|
+ // </div>
|
|
|
+ // );
|
|
|
+ // },
|
|
|
// 时间格式化
|
|
|
dateFormat: function (row, column, cellValue, index) {
|
|
|
return format(row[column.property]);
|
|
|
@@ -383,12 +502,12 @@
|
|
|
max-height: 500px !important;
|
|
|
}
|
|
|
.el-tree {
|
|
|
- width: 800px;
|
|
|
+ // width: 800px;
|
|
|
height: 500px;
|
|
|
overflow-x: auto;
|
|
|
}
|
|
|
/deep/ .el-tree > .el-tree-node {
|
|
|
- display: inline-block !important;
|
|
|
+ // display: inline-block !important;
|
|
|
}
|
|
|
.btn-box {
|
|
|
padding-right: 100px;
|
刘恒