|
|
@@ -1,39 +1,70 @@
|
|
|
<template>
|
|
|
- <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
|
|
|
- <template slot-scope="{activeKey, data}">
|
|
|
- <div :style="{
|
|
|
- width: '100%',
|
|
|
- height: activeKey == 'list' ? '100%' : '0px',
|
|
|
- overflow: 'hidden'
|
|
|
- }">
|
|
|
+ <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
|
|
|
+ <template slot-scope="{ activeKey, data }">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ width: '100%',
|
|
|
+ height: activeKey == 'list' ? '100%' : '0px',
|
|
|
+ overflow: 'hidden'
|
|
|
+ }"
|
|
|
+ >
|
|
|
<div class="app-container">
|
|
|
<div class="setting_title">权限管理</div>
|
|
|
<el-divider></el-divider>
|
|
|
<div class="mymain-container">
|
|
|
<div class="btn-group clearfix">
|
|
|
<div class="fl">
|
|
|
- <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')">新增角色</el-button>
|
|
|
+ <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')"
|
|
|
+ >新增角色</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="fr">
|
|
|
- <el-input placeholder="商户名称" v-model="screenForm.companyWechatName" size="small" style="width: 300px;">
|
|
|
+ <el-input
|
|
|
+ placeholder="商户名称"
|
|
|
+ v-model="screenForm.companyWechatName"
|
|
|
+ size="small"
|
|
|
+ style="width: 300px"
|
|
|
+ >
|
|
|
<el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
|
|
|
</el-input>
|
|
|
- <el-button size="small" @click="screenForm.companyWechatName = '';getListByScreen()">清空</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="
|
|
|
+ screenForm.companyWechatName = ''
|
|
|
+ getListByScreen()
|
|
|
+ "
|
|
|
+ >清空</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
- <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit
|
|
|
- highlight-current-row stripe>
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ stripe
|
|
|
+ >
|
|
|
<el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
|
|
|
- <el-table-column align="center" label="商户" prop="companyName"></el-table-column>
|
|
|
+ <el-table-column align="center" label="商户" prop="companyName"></el-table-column>
|
|
|
<el-table-column align="center" label="角色" prop="name"></el-table-column>
|
|
|
<el-table-column align="center" label="操作" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="text" @click="setMenuRole(scope.row.adminRoleId)">设置权限</el-button>
|
|
|
- <el-button type="text" @click="addOrEdit('edit', scope.row.adminRoleId)"
|
|
|
- v-if="scope.row.adminRoleId != 1">编辑</el-button>
|
|
|
- <el-popconfirm style="margin-left: 10px;" title="确定删除吗？"
|
|
|
- @confirm="handleDelete(scope.row.adminRoleId)" v-if="scope.row.adminRoleId != 1">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click="addOrEdit('edit', scope.row.adminRoleId)"
|
|
|
+ v-if="scope.row.adminRoleId != 1"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-popconfirm
|
|
|
+ style="margin-left: 10px"
|
|
|
+ title="确定删除吗？"
|
|
|
+ @confirm="handleDelete(scope.row.adminRoleId)"
|
|
|
+ v-if="scope.row.adminRoleId != 1"
|
|
|
+ >
|
|
|
<el-button slot="reference" type="text">删除</el-button>
|
|
|
</el-popconfirm>
|
|
|
</template>
|
|
|
@@ -42,33 +73,48 @@
|
|
|
</div>
|
|
|
<div class="pagination clearfix">
|
|
|
<div class="fr">
|
|
|
- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
- :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
|
|
|
- layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="listTotal"
|
|
|
+ >
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
|
|
|
+ <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
|
|
|
<el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="100px">
|
|
|
<el-form-item label="角色名" prop="name">
|
|
|
<el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
+ <div slot="footer" class="dialog-footer" style="text-align: right">
|
|
|
<el-button size="mini" @click="data.removeTab()">取 消</el-button>
|
|
|
<el-button size="mini" type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
|
|
|
- <zj-tree :data="menuRoleList" show-checkbox :default-expand-all="true" node-key="moduleId" ref="tree"
|
|
|
- highlight-current :props="defaultProps">
|
|
|
+ <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
|
|
|
+ <zj-tree
|
|
|
+ :data="menuRoleList"
|
|
|
+ show-checkbox
|
|
|
+ :default-expand-all="true"
|
|
|
+ node-key="moduleId"
|
|
|
+ ref="tree"
|
|
|
+ highlight-current
|
|
|
+ :props="defaultProps"
|
|
|
+ >
|
|
|
</zj-tree>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
+ <div slot="footer" class="dialog-footer" style="text-align: right">
|
|
|
<el-button size="mini" @click="data.removeTab()">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
|
|
|
- <el-button size="mini" type="primary" @click="submitRoleForm(data.removeTab)" v-if="editId != 1">确 定</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="submitRoleForm(data.removeTab)" v-if="editId != 1"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -77,7 +123,16 @@
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from 'vuex'
|
|
|
-import { getRoleList, addRole, editRole, getRoleDetail, deleteRole, getMenuList, getMenuRoleIds, setMenuRole } from '@/api/setting'
|
|
|
+import {
|
|
|
+ getRoleList,
|
|
|
+ addRole,
|
|
|
+ editRole,
|
|
|
+ getRoleDetail,
|
|
|
+ deleteRole,
|
|
|
+ getMenuList,
|
|
|
+ getMenuRoleIds,
|
|
|
+ setMenuRole
|
|
|
+} from '@/api/setting'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -90,16 +145,14 @@ export default {
|
|
|
listTotal: 0, // 列表总数
|
|
|
editId: null,
|
|
|
addFormType: 'add',
|
|
|
- screenForm: {
|
|
|
- companyWechatName: ''
|
|
|
- },
|
|
|
+ screenForm: {
|
|
|
+ companyWechatName: ''
|
|
|
+ },
|
|
|
addForm: {
|
|
|
- name: '', // 角色名
|
|
|
+ name: '' // 角色名
|
|
|
},
|
|
|
addFormRules: {
|
|
|
- name: [
|
|
|
- { required: true, message: '请输入角色名', trigger: 'blur' }
|
|
|
- ],
|
|
|
+ name: [{ required: true, message: '请输入角色名', trigger: 'blur' }]
|
|
|
},
|
|
|
menuRoleList: [],
|
|
|
defaultProps: {
|
|
|
@@ -109,53 +162,50 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'userid',
|
|
|
- 'name'
|
|
|
- ])
|
|
|
+ ...mapGetters(['userid', 'name'])
|
|
|
},
|
|
|
created() {
|
|
|
- this.getList();
|
|
|
+ this.getList()
|
|
|
},
|
|
|
methods: {
|
|
|
getList() {
|
|
|
- this.listLoading = true;
|
|
|
+ this.listLoading = true
|
|
|
let params = {
|
|
|
pageNum: this.currentPage,
|
|
|
pageSize: this.pageSize,
|
|
|
- companyWechatName: this.screenForm.companyWechatName
|
|
|
- };
|
|
|
+ companyWechatName: this.screenForm.companyWechatName
|
|
|
+ }
|
|
|
getRoleList(params).then(res => {
|
|
|
- this.dataList = res.data.records;
|
|
|
- this.listTotal = res.data.total;
|
|
|
- this.listLoading = false;
|
|
|
+ this.dataList = res.data.records
|
|
|
+ this.listTotal = res.data.total
|
|
|
+ this.listLoading = false
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
- // 筛选后重新获取列表
|
|
|
- getListByScreen() {
|
|
|
- this.currentPage = 1;
|
|
|
- this.getList();
|
|
|
- },
|
|
|
+
|
|
|
+ // 筛选后重新获取列表
|
|
|
+ getListByScreen() {
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
|
|
|
// 更改每页数量
|
|
|
handleSizeChange(val) {
|
|
|
- this.pageSize = val;
|
|
|
- this.currentPage = 1;
|
|
|
- this.getList();
|
|
|
+ this.pageSize = val
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getList()
|
|
|
},
|
|
|
|
|
|
// 更改当前页
|
|
|
handleCurrentChange(val) {
|
|
|
- this.currentPage = val;
|
|
|
- this.getList();
|
|
|
+ this.currentPage = val
|
|
|
+ this.getList()
|
|
|
},
|
|
|
|
|
|
// 操作 - 删除
|
|
|
handleDelete(id) {
|
|
|
deleteRole({ adminRoleId: id }).then(res => {
|
|
|
- this.getList();
|
|
|
- this.$successMsg();
|
|
|
+ this.getList()
|
|
|
+ this.$successMsg()
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -164,13 +214,13 @@ export default {
|
|
|
this.$refs.tabPage.addTab({
|
|
|
activeKey: type,
|
|
|
key: type,
|
|
|
- label: ({ add: "新增", edit: "编辑" })[type],
|
|
|
+ label: { add: '新增', edit: '编辑' }[type],
|
|
|
triggerEvent: () => {
|
|
|
- this.$refs?.addForm?.resetFields();
|
|
|
+ this.$refs?.addForm?.resetFields()
|
|
|
this.$data.addForm = this.$options.data().addForm
|
|
|
- this.addFormType = type;
|
|
|
+ this.addFormType = type
|
|
|
if (type == 'edit') {
|
|
|
- this.editId = id;
|
|
|
+ this.editId = id
|
|
|
getRoleDetail({ adminRoleId: id }).then(res => {
|
|
|
this.addForm = {
|
|
|
name: res.data.name
|
|
|
@@ -178,30 +228,29 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- closeEvent: () => {
|
|
|
- }
|
|
|
+ closeEvent: () => {}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
// 提交 新增编辑
|
|
|
submitAddForm(removeTab) {
|
|
|
- this.$refs.addForm.validate((valid) => {
|
|
|
+ this.$refs.addForm.validate(valid => {
|
|
|
if (valid) {
|
|
|
let params = {
|
|
|
name: this.addForm.name
|
|
|
}
|
|
|
if (this.addFormType == 'edit') {
|
|
|
- params.adminRoleId = this.editId;
|
|
|
+ params.adminRoleId = this.editId
|
|
|
editRole(params).then(res => {
|
|
|
- removeTab('list');
|
|
|
- this.getList();
|
|
|
- this.$successMsg('编辑成功');
|
|
|
+ removeTab('list')
|
|
|
+ this.getList()
|
|
|
+ this.$successMsg('编辑成功')
|
|
|
})
|
|
|
} else {
|
|
|
addRole(params).then(res => {
|
|
|
- removeTab('list');
|
|
|
- this.getList();
|
|
|
- this.$successMsg('新增成功');
|
|
|
+ removeTab('list')
|
|
|
+ this.getList()
|
|
|
+ this.$successMsg('新增成功')
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -211,12 +260,12 @@ export default {
|
|
|
// 设置权限 - 获取列表
|
|
|
setMenuRole(id) {
|
|
|
this.$refs.tabPage.addTab({
|
|
|
- activeKey: "detail",
|
|
|
- key: "detail",
|
|
|
- label: "设置权限",
|
|
|
+ activeKey: 'detail',
|
|
|
+ key: 'detail',
|
|
|
+ label: '设置权限',
|
|
|
triggerEvent: () => {
|
|
|
this.$nextTick(() => {
|
|
|
- this.editId = id;
|
|
|
+ this.editId = id
|
|
|
function aaa(list) {
|
|
|
for (var item of list) {
|
|
|
if (item.type == 3) {
|
|
|
@@ -229,16 +278,15 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
getMenuList({ adminUserId: this.userid }).then(res => {
|
|
|
- aaa(res.data);
|
|
|
+ aaa(res.data)
|
|
|
this.menuRoleList = res.data
|
|
|
})
|
|
|
getMenuRoleIds({ adminRoleId: id }).then(res => {
|
|
|
- this.$refs.tree.setCheckedKeys(res.data);
|
|
|
+ this.$refs.tree.setCheckedKeys(res.data)
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- closeEvent: () => {
|
|
|
- }
|
|
|
+ closeEvent: () => {}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -247,15 +295,14 @@ export default {
|
|
|
let params = {
|
|
|
adminModuleIds: this.$refs.tree.getCheckedKeys(),
|
|
|
adminModuleIds2: this.$refs.tree.getHalfCheckedKeys(),
|
|
|
- adminRoleId: this.editId,
|
|
|
+ adminRoleId: this.editId
|
|
|
}
|
|
|
setMenuRole(params).then(res => {
|
|
|
removeTab('list')
|
|
|
- this.getList();
|
|
|
- this.$successMsg();
|
|
|
+ this.getList()
|
|
|
+ this.$successMsg()
|
|
|
})
|
|
|
- },
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -270,7 +317,7 @@ export default {
|
|
|
overflow-y: scroll;
|
|
|
padding: 0 30px;
|
|
|
|
|
|
- >.el-tree-node {
|
|
|
+ > .el-tree-node {
|
|
|
padding: 15px 0;
|
|
|
border: 1px dashed #ddd;
|
|
|
margin-bottom: 15px;
|
|
|
@@ -279,4 +326,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
linwenxin