376 行
14 KiB
JavaScript
可执行文件
376 行
14 KiB
JavaScript
可执行文件
/**
|
||
* @description 权限组件
|
||
*/
|
||
Vue.component('component-permission', {
|
||
template: `
|
||
<div id="component-permission">
|
||
<el-tree ref="tree" :data="data" show-checkbox node-key="id" :default-checked-keys="checkedKeys" :props="defaultProps" @check-change="handleCheckChange">
|
||
<div class="custom-tree-node" slot-scope="{ node, data }">
|
||
<span>{{ node.label }}</span>
|
||
<el-tooltip class="item" effect="dark" :content="data.tips" placement="top" v-if="data.tips">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
</el-tree>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description 获取已被选中的权限ID数组
|
||
*/
|
||
getCheckedPomission() {
|
||
return this.$refs.tree.getCheckedKeys()
|
||
},
|
||
/**
|
||
* @description 节点被点击事件
|
||
*/
|
||
handleCheckChange(nodeData, isChecked) {
|
||
//商户角色设置需要对门店后台权限进行设置
|
||
//多级监听的原因是element在初始时，默认情况下未展开过的子节点是不会触发此方法的。无法在父节点变化时监听到子节点的变化。
|
||
//而render-after-expand设置false时，是可以初始化监听子节点，但是经过反复测试，在选择时，它的响应速度非常慢，1~2秒的延时。
|
||
//所以不需要为了一个监听事件而使所有使用当前组件的交互效果变差，故采用多级监听的方式。
|
||
//当它的一级父节点164，二级父节点165编号变化时，记得修改此处代码。
|
||
if (['164', '165', '170'].includes(nodeData.id)) {
|
||
this.$emit('check-change', nodeData.id, isChecked)
|
||
}
|
||
}
|
||
},
|
||
props: {
|
||
data: { //权限数据
|
||
type: Array,
|
||
default() {
|
||
return []
|
||
}
|
||
},
|
||
checkedKeys: { //已选择的权限
|
||
type: Array,
|
||
default() {
|
||
return []
|
||
}
|
||
},
|
||
defaultProps: { //默认属性字段名
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
children: 'children',
|
||
label: 'label'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
/**
|
||
* @description 编辑权限
|
||
*/
|
||
Vue.component('edit-next-role', {
|
||
template: `<el-dialog class="component-permission-dialog" title="设置权限" :close-on-click-modal="false" append-to-body
|
||
width="600px" :visible.sync="show" :before-close="permissionDialogClosed">
|
||
<div v-loading="permissionLoading">
|
||
<el-scrollbar class="permission-scrollbar">
|
||
<component-permission ref="component-permission"
|
||
:data="permissionData"
|
||
:checked-keys="permissionCheckedKeys">
|
||
</component-permission>
|
||
</el-scrollbar>
|
||
<div class="permission-footer">
|
||
<div>
|
||
<el-button type="text" size="mini" @click="permissionDialogLogsVisible = true">查看记录</el-button>
|
||
<el-button type="text" size="mini" @click="resetUserRole">重置权限</el-button>
|
||
</div>
|
||
<div class="buttons">
|
||
<el-button @click="permissionDialogClosed">取消</el-button>
|
||
<el-button type="primary" @click="permissionSubmit">确定</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 权限修改记录 -->
|
||
<el-dialog title="权限修改记录" class="component-permission-dialog-logs" :close-on-click-modal="false" append-to-body
|
||
width="700px" :visible.sync="permissionDialogLogsVisible">
|
||
<component-permission-logs :id="id" :type="type" v-if="permissionDialogLogsVisible">
|
||
</component-permission-logs>
|
||
</el-dialog>
|
||
</div>
|
||
</el-dialog>`,
|
||
props: {
|
||
'show': {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
'type': {
|
||
type: Number,
|
||
default: 2,
|
||
},//1合伙人 2用户 3商户 4门店
|
||
'id': {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
permissionData: [], //权限数据
|
||
permissionCheckedKeys: [], //已选择的权限
|
||
permissionLoading: false, //权限提交加载
|
||
permissionDialogLogsVisible: false, //权限记录窗口
|
||
fatherIds: [], //父级ID列表
|
||
roleRequestData: {},
|
||
requestUrl: {
|
||
get: {
|
||
2: '/index.php/Admin/AdminRoles/getAgentRole',
|
||
3: '/index.php/Agent/AgentRoles/getMerchantRole',
|
||
4: '/index.php/Retail/MerchantRoles/getStoreRole',
|
||
},
|
||
set: {
|
||
2: '/index.php/Admin/AdminRoles/setAgentRole',
|
||
3: '/index.php/Agent/AgentRoles/setMerchantRole',
|
||
4: '/index.php/Retail/MerchantRoles/setStoreRole',
|
||
},
|
||
reset: {
|
||
2: '/index.php/Admin/AdminRoles/resetUserRole',
|
||
3: '/index.php/Agent/AgentRoles/resetUserRole',
|
||
4: '/index.php/Retail/MerchantRoles/resetUserRole',
|
||
}
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description 用户权限设置窗口关闭事件
|
||
*/
|
||
permissionDialogClosed() {
|
||
this.$emit('update:show', false)
|
||
},
|
||
|
||
/**
|
||
* @description 获取用户权限
|
||
* @param {Number} agentId 用户ID
|
||
*/
|
||
getPermission() {
|
||
this.permissionLoading = true
|
||
this.sendRequest(this.requestUrl.get[this.type], {
|
||
data: this.roleRequestData,
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
const data = response.data
|
||
this.permissionData = data.list || []
|
||
this.permissionCheckedKeys = data.checkIds || []
|
||
this.saveFatherIds(data.list)
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
this.permissionLoading = false
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* @description 用户权限设置提交
|
||
*/
|
||
permissionSubmit() {
|
||
this.permissionLoading = true
|
||
const checkedPomission = this.$refs['component-permission'].getCheckedPomission()
|
||
const checkIds = this.getArrDifference(checkedPomission, this.fatherIds);
|
||
this.roleRequestData.checkIds = checkIds.join(',')
|
||
this.sendRequest(this.requestUrl.set[this.type], {
|
||
data: this.roleRequestData,
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.$message.success(response.message)
|
||
this.$emit('end')
|
||
this.permissionDialogClosed()
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
this.permissionLoading = false
|
||
}
|
||
});
|
||
},
|
||
getArrDifference(arr1, arr2) {
|
||
return arr1.filter(function (v) {
|
||
return arr2.indexOf(v) == -1;
|
||
});
|
||
},
|
||
saveFatherIds(list) {
|
||
list.forEach((item) => {
|
||
if (item.children) {
|
||
this.fatherIds.push(item.id)
|
||
this.saveFatherIds(item.children)
|
||
}
|
||
})
|
||
},
|
||
//重置权限
|
||
resetUserRole(){
|
||
this.$confirm("您确认将该用户的权限重置为初始状态吗？", "温馨提示", {
|
||
confirmButtonText: '确定',
|
||
type: 'info'
|
||
}).then(() => {
|
||
this.sendRequest(this.requestUrl.reset[this.type], {
|
||
data: this.roleRequestData,
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.$message.success(response.message)
|
||
this.$emit('end')
|
||
this.permissionDialogClosed()
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
this.permissionLoading = false
|
||
}
|
||
});
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
unitData() {
|
||
switch (this.type) {
|
||
case 2:
|
||
this.roleRequestData = {
|
||
agent_id: this.id
|
||
}
|
||
break
|
||
case 3:
|
||
this.roleRequestData = {
|
||
merchant_id: this.id
|
||
}
|
||
break
|
||
case 4:
|
||
this.roleRequestData = {
|
||
store_id: this.id
|
||
}
|
||
break
|
||
default:
|
||
this.$message.error('角色类型错误！')
|
||
return
|
||
}
|
||
|
||
this.getPermission();
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.show) {
|
||
this.unitData()
|
||
}
|
||
},
|
||
watch: {
|
||
show(n) {
|
||
if (n) {
|
||
this.unitData()
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
/**
|
||
* @description 权限修改记录
|
||
*/
|
||
Vue.component('component-permission-logs', {
|
||
template: `
|
||
<div id="component-permission-logs">
|
||
<el-form :inline="true" size="small">
|
||
<el-form-item label="操作人">
|
||
<component-operator :id.sync="operatorId" :type="type-1"></component-operator>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="search">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table :data="logs" border size="small" :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
|
||
<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
|
||
<el-table-column align="center" prop="operator_name" label="操作人" width="140"></el-table-column>
|
||
<el-table-column header-align="center" prop="details" label="操作内容" align="left">
|
||
<template slot-scope="scope">
|
||
<p v-for="detail in scope.row.details">{{detail}}</p>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="add_time" label="操作时间" width="140">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:page-size="limit"
|
||
:current-page.sync="page"
|
||
:total="count"
|
||
@current-change="getLogs">
|
||
</el-pagination>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {
|
||
logs: [], //权限修改记录
|
||
page: 1, //当前页数
|
||
limit: 10, //每页数量
|
||
count: 0, //记录总数
|
||
requestUrl: { //各个角色的记录获取路径
|
||
2: 'Admin/AdminRoles/getRoleRecord',
|
||
3: 'Agent/AgentRoles/getRoleRecord',
|
||
4: 'Retail/MerchantRoles/getRoleRecord'
|
||
},
|
||
roleRequestData: {}, //角色请求特有数据
|
||
operatorId: 0 //操作人ID
|
||
}
|
||
},
|
||
methods: {
|
||
search() {
|
||
this.page = 1
|
||
this.getLogs()
|
||
},
|
||
/**
|
||
* @description 获取记录数据
|
||
*/
|
||
getLogs() {
|
||
const requestData = Object.assign({
|
||
page: this.page,
|
||
limit: this.limit
|
||
}, this.roleRequestData)
|
||
|
||
if (this.operatorId > 0) {
|
||
requestData.operator_id = this.operatorId
|
||
}
|
||
|
||
this.sendRequest(this.requestUrl[this.type], {
|
||
data: requestData,
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
const data = response.data
|
||
this.count = data.count
|
||
this.logs = data.list
|
||
}
|
||
}
|
||
});
|
||
},
|
||
},
|
||
created() {
|
||
if (!this.id) {
|
||
this.$message.error('角色编号错误！')
|
||
return
|
||
}
|
||
|
||
switch (this.type) {
|
||
case 2:
|
||
this.roleRequestData = {
|
||
agent_id: this.id
|
||
}
|
||
break
|
||
case 3:
|
||
this.roleRequestData = {
|
||
merchant_id: this.id
|
||
}
|
||
break
|
||
case 4:
|
||
this.roleRequestData = {
|
||
store_id: this.id
|
||
}
|
||
break
|
||
default:
|
||
this.$message.error('角色类型错误！')
|
||
return
|
||
}
|
||
|
||
this.getLogs()
|
||
},
|
||
//type：角色类型，1合伙人，2用户，3商户 4门店
|
||
//id：各个角色的主键ID
|
||
props: ['type', 'id']
|
||
}) |