|
|
<template>
|
|
|
<div class="rightContainer">
|
|
|
<a-breadcrumb class="newBreadcrumb mt0 mb16">
|
|
|
<a-breadcrumb-item href>
|
|
|
<router-link :to="{name:'merchantBack'}">
|
|
|
<a-icon type="home" />
|
|
|
</router-link>
|
|
|
</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item>
|
|
|
<span @click="cancelAdd" v-if="secondBreadcrumb" style="cursor:pointer">角色管理</span>
|
|
|
<span v-else>角色管理</span>
|
|
|
</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item v-if="secondBreadcrumb">{{secondBreadcrumb}}</a-breadcrumb-item>
|
|
|
</a-breadcrumb>
|
|
|
|
|
|
<div class="contentbody bodyContainer">
|
|
|
<div class="fsa pb16" v-if="secondBreadcrumb == ''">
|
|
|
<div class="f20 fw500">{{secondBreadcrumb || '角色管理'}}</div>
|
|
|
<a-button class="addmemeber f14" @click="addRole('add')">
|
|
|
<i class="iconfont icon-fangda mr4"></i> 添加角色
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<div v-if="secondBreadcrumb == ''">
|
|
|
<a-table :columns="columns" :data-source="roleList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id">
|
|
|
<!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
|
|
|
<div slot="setting" class="setting" slot-scope="text, record" style="color: #1890FF">
|
|
|
<a @click="showDetail(record)">详情</a>
|
|
|
<a :class="record.roleType == 1 ?'':'unclick'" class="delete" @click="record.roleType == 1 ? addRole('edit',record):''">编辑</a>
|
|
|
<a :class="record.roleType == 1 ?'':'unclick'" @click="record.roleType == 1 ? delRole(record):''">删除</a>
|
|
|
</div>
|
|
|
</a-table>
|
|
|
<div class="pagecontainer mt16 fss dn">
|
|
|
<a-pagination :current="pagination.pageNum" :default-current="1" :defaultPageSize="20" :show-total="total => `共${total}条`" :total="pagination.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getRoleListApi, addRoleApi, updateRoleApi, delRoleApi } from '../../api/merchantConfig'
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: 'RoleManagement',
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
tablenodata: {
|
|
|
// 空状态文本内容
|
|
|
emptyText: () => (
|
|
|
<div>
|
|
|
<div>
|
|
|
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
|
|
|
</div>
|
|
|
<div style="marginBottom:20px">暂无数据</div>
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
secondBreadcrumb: '',
|
|
|
roleList: [1, 2, 3, 4],
|
|
|
|
|
|
pagination: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 20,
|
|
|
total: 3, //分页配置
|
|
|
status: 0,
|
|
|
keys: null,
|
|
|
size: 'small',
|
|
|
showTotal: function (total, range) {
|
|
|
return `共${total}条`
|
|
|
},
|
|
|
pageSizeOptions: ['25', '50', '100'],
|
|
|
showSizeChanger: true,
|
|
|
// searchTag: 1,
|
|
|
},
|
|
|
isspinning: false,
|
|
|
roleList: [],
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
columns() {
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '排序',
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
customRender: (text, row, index) => {
|
|
|
if (row.children) {
|
|
|
return ''
|
|
|
} else {
|
|
|
return index + 1
|
|
|
}
|
|
|
},
|
|
|
// ellipsis: true,
|
|
|
width: 60,
|
|
|
},
|
|
|
{
|
|
|
title: '角色',
|
|
|
dataIndex: 'roleName',
|
|
|
key: 'roleName',
|
|
|
scopedSlots: { customRender: 'roleName' },
|
|
|
ellipsis: true,
|
|
|
width: 150,
|
|
|
},
|
|
|
// {
|
|
|
// title: '角色',
|
|
|
// dataIndex: 'role',
|
|
|
// key: 'role',
|
|
|
// width: 100,
|
|
|
// ellipsis: true,
|
|
|
// },
|
|
|
{
|
|
|
title: '角色备注',
|
|
|
dataIndex: 'desp',
|
|
|
key: 'desp',
|
|
|
// width: 100,
|
|
|
// filters: this.groupList,
|
|
|
// customRender: (text, row, index) => {
|
|
|
// let text1
|
|
|
// this.groupList.forEach((item) => {
|
|
|
// if (item.id == text) {
|
|
|
// text1 = item.teamName
|
|
|
// }
|
|
|
// })
|
|
|
// return text1
|
|
|
// },
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
// {
|
|
|
// title: '权限',
|
|
|
// dataIndex: 'permission',
|
|
|
// key: 'permission',
|
|
|
// ellipsis: true,
|
|
|
// },
|
|
|
{
|
|
|
title: '操作',
|
|
|
dataIndex: 'setting',
|
|
|
key: 'setting',
|
|
|
// sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
|
|
|
scopedSlots: { customRender: 'setting' },
|
|
|
ellipsis: true,
|
|
|
|
|
|
// sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
|
|
|
// ellipsis: true,
|
|
|
width: 140,
|
|
|
},
|
|
|
]
|
|
|
return columns
|
|
|
},
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
beforeCreate() {},
|
|
|
created() {
|
|
|
this.$emit('setTitle', '角色管理')
|
|
|
this.getRoleList()
|
|
|
console.log(this.middleauthor)
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
checkboxChange(e, key, index) {
|
|
|
// console.log(e)
|
|
|
// console.log(key)
|
|
|
// console.log(index)
|
|
|
// console.log(this.authorityList[key]);
|
|
|
// console.log(this.authorityList[key][index]);
|
|
|
if (e.children) {
|
|
|
this.authorityList[key].checked = !this.authorityList[key].checked
|
|
|
} else {
|
|
|
this.authorityList[key].children[index].checked = !this.authorityList[key].children[index].checked
|
|
|
}
|
|
|
console.log(this.authorityList)
|
|
|
},
|
|
|
inputpageChange(e) {
|
|
|
const pagenumcount = this.pagination.total / this.pagination.pageSize
|
|
|
console.log(pagenumcount)
|
|
|
if (e.target.value) {
|
|
|
if (e.target.value > pagenumcount) {
|
|
|
this.pagination.pageNum = Math.ceil(pagenumcount)
|
|
|
} else {
|
|
|
this.pagination.pageNum = e.target.value
|
|
|
}
|
|
|
} else {
|
|
|
this.pagination.pageNum = 1
|
|
|
}
|
|
|
// this.getJobList();
|
|
|
this.getMemberList()
|
|
|
console.log(e)
|
|
|
},
|
|
|
choiceGroup() {},
|
|
|
onChange(e, e1, e2) {
|
|
|
console.log(e)
|
|
|
console.log(e1)
|
|
|
console.log(e2)
|
|
|
if (typeof e == 'number') {
|
|
|
this.pagination.pageNum = e
|
|
|
this.getMemberList()
|
|
|
}
|
|
|
},
|
|
|
showDetail(val) {
|
|
|
let that = this
|
|
|
this.secondBreadcrumb = '角色详情'
|
|
|
console.log(val)
|
|
|
that.$router.push({
|
|
|
name: 'RoleManagementDetail',
|
|
|
query: {
|
|
|
item: JSON.stringify(val),
|
|
|
},
|
|
|
})
|
|
|
},
|
|
|
addRole(type, val) {
|
|
|
let that = this
|
|
|
this.currentRole = val
|
|
|
if (type == 'add') {
|
|
|
this.$confirm({
|
|
|
title: '添加角色',
|
|
|
content: '【添加角色】属高敏感权限，基于账户安全考虑，请再次确认是否创建',
|
|
|
onOk() {
|
|
|
that.$router.push({
|
|
|
name: 'AddRoleManagement',
|
|
|
query: {
|
|
|
// item: val,
|
|
|
type: 'add',
|
|
|
roleList: JSON.stringify(that.roleList),
|
|
|
},
|
|
|
})
|
|
|
},
|
|
|
onCancel() {},
|
|
|
})
|
|
|
// this.secondBreadcrumb = '添加角色'
|
|
|
} else {
|
|
|
this.$router.push({
|
|
|
name: 'AddRoleManagement',
|
|
|
query: {
|
|
|
item: JSON.stringify(val),
|
|
|
roleList: JSON.stringify(this.roleList),
|
|
|
},
|
|
|
})
|
|
|
// this.secondBreadcrumb = '编辑角色'
|
|
|
// setTimeout(() => {
|
|
|
// this.roleForm.setFieldsValue({
|
|
|
// roleName: val.roleName,
|
|
|
// desp: val.desp,
|
|
|
// })
|
|
|
// }, 10)
|
|
|
}
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
delRole(val) {
|
|
|
let that = this
|
|
|
that.$confirm({
|
|
|
title: '删除',
|
|
|
content: '确定要删除该角色吗？',
|
|
|
centered: true,
|
|
|
onOk(e1, e2) {
|
|
|
console.log(e1)
|
|
|
console.log(e2)
|
|
|
that.delSubmit(val)
|
|
|
return new Promise((res) => {
|
|
|
setTimeout(() => {
|
|
|
res()
|
|
|
}, 2000)
|
|
|
})
|
|
|
},
|
|
|
onCancel() {},
|
|
|
})
|
|
|
},
|
|
|
getRoleList() {
|
|
|
getRoleListApi().then(({ data }) => {
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
this.roleList = data.data.list
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 删除角色信息表单提交
|
|
|
*/
|
|
|
delSubmit(val) {
|
|
|
console.log(val)
|
|
|
delRoleApi(val.id).then(({ data }) => {
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
this.secondBreadcrumb = ''
|
|
|
this.$message.success('删除成功')
|
|
|
this.getRoleList()
|
|
|
} else {
|
|
|
this.$message.fail('删除失败')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 取消编辑或者新增角色
|
|
|
*/
|
|
|
cancelAdd() {
|
|
|
this.secondBreadcrumb = ''
|
|
|
|
|
|
// this.authorityList = JSON.parse(JSON.stringify(this.middleauthor))
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.addmemeber {
|
|
|
border: 0;
|
|
|
padding: 0 12px;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
color: #fff;
|
|
|
background: #1890ff;
|
|
|
border-radius: 4px;
|
|
|
i {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
&:hover {
|
|
|
background: #40a9ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-divider {
|
|
|
margin: 16px 0 22px 0;
|
|
|
}
|
|
|
.delete {
|
|
|
border-left: 1px solid #979797;
|
|
|
border-right: 1px solid #979797;
|
|
|
padding: 0 9px;
|
|
|
margin: 0 9px;
|
|
|
}
|
|
|
/deep/.ant-table {
|
|
|
.ant-table-content {
|
|
|
.ant-table-body {
|
|
|
.ant-table-thead {
|
|
|
th {
|
|
|
padding: 12px 0;
|
|
|
div {
|
|
|
padding: 0px 8px;
|
|
|
}
|
|
|
&:not(:first-child) {
|
|
|
> span {
|
|
|
// line-height: 22px;
|
|
|
> div {
|
|
|
// line-height: 1;
|
|
|
border-left: 1px solid #ddd;
|
|
|
padding-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
font-size: 14px !important;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
font-size: 14px !important;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-tbody {
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
font-size: 14px !important;
|
|
|
padding: 12px 14px;
|
|
|
}
|
|
|
.ant-table-row-expand-icon {
|
|
|
// color: #000;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.ant-table-row-indent {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.unclick {
|
|
|
color: #ccc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
</style>
|