<template>
|
<div class="add-role-permission">
|
<el-dialog
|
:title="editCommonConfig.title"
|
:visible.sync="editConfig.visible"
|
:width="dialogWidth"
|
:before-close="handleClose"
|
>
|
<el-form
|
ref="form"
|
:model="editConfig.infomation"
|
:rules="rules"
|
label-position="right"
|
label-width="200px"
|
size="mini"
|
>
|
<!-- 信息 -->
|
<div class="basic-info">
|
<!-- 基本信息 -->
|
<div class="basic-info-title">基本信息</div>
|
<div class="basic-info-view">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="权限名称" prop="authorityName">
|
<el-input v-model="editConfig.infomation.authorityName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="备注" prop="notes">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 1, maxRows: 4 }"
|
placeholder="请输入内容"
|
v-model="editConfig.infomation.notes"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 模块选择 -->
|
<div class="module-select">
|
<el-button type="text" @click="moduleSelectClick('all')" :class="isActive ? 'selBtn' : ''">全部</el-button>
|
<el-button type="text" @click="moduleSelectClick('custom')">客户管理</el-button>
|
<el-button type="text" @click="moduleSelectClick('sales')">销售管理</el-button>
|
<el-button type="text" @click="moduleSelectClick('service')">服务管理</el-button>
|
<el-button type="text" @click="moduleSelectClick('background')">后台设置</el-button>
|
<div class="title">{{ moduleSelTitle }}</div>
|
</div>
|
</div>
|
<div>
|
<el-table :show-header="false" :data="tableData" border style="width: 100%">
|
<el-table-column prop="date" label="" width="180">
|
<template slot-scope="scope">
|
<el-checkbox v-model="scope.row.checked" @change="selAllChange(scope.row)">{{
|
scope.row.name
|
}}</el-checkbox>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="">
|
<template slot-scope="scope">
|
<el-checkbox-group
|
v-model="scope.row.checkedList"
|
@change="
|
(value) => {
|
handleCheckedChange(value, scope.row)
|
}
|
"
|
>
|
<el-checkbox v-for="item in scope.row.detailsList" :label="item.name" :key="item.id">{{
|
item.name
|
}}</el-checkbox>
|
</el-checkbox-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<div class="left">
|
<el-checkbox v-model="allChecked" @change="allChange">全选</el-checkbox>
|
<div class="globalAuth">
|
<span>全局快速授权</span>
|
<el-select v-model="value" size="mini" placeholder="请选择">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
</el-select>
|
</div>
|
<div class="radio">
|
<el-radio v-model="radio" label="1">授权</el-radio>
|
<el-radio v-model="radio" label="2">取消授权</el-radio>
|
</div>
|
</div>
|
<div class="btn">
|
<el-button type="primary" size="small" @click="saveClick('form')">保 存</el-button>
|
<el-button size="small" @click="editConfig.visible = false">取 消</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { addAuthority } from "@/api/backgroundConfig/rolePermssion" // setMenuAuthority
|
export default {
|
name: "AddRolePermissionDialog",
|
props: {
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: "新建",
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: {},
|
computed: {},
|
data() {
|
const commonList = [
|
{ id: 1, name: "查看" },
|
{ id: 2, name: "新建" },
|
{ id: 3, name: "编辑" },
|
{ id: 4, name: "删除" },
|
{ id: 5, name: "复制" },
|
{ id: 6, name: "分配" },
|
{ id: 7, name: "共享" },
|
{ id: 8, name: "导入" },
|
{ id: 9, name: "导出" },
|
{ id: 10, name: "更改创建人" },
|
{ id: 11, name: "查询分类设置" },
|
{ id: 12, name: "推进" },
|
{ id: 13, name: "下载" },
|
{ id: 14, name: "预览" },
|
{ id: 15, name: "下载和预览次数" },
|
{ id: 16, name: "下载全部附件" }
|
]
|
return {
|
dialogWidth: "60%",
|
editConfig: this.editCommonConfig,
|
rules: {
|
authorityName: [{ required: true, message: "请输入", trigger: "blur" }]
|
},
|
moduleSelTitle: "全部",
|
tableData: [],
|
btnCommonList: commonList,
|
allChecked: false,
|
radio: "",
|
value: "",
|
options: [{ value: "1", label: "删除" }],
|
isActive: false
|
}
|
},
|
created() {
|
this.isActive = true
|
},
|
methods: {
|
handleClose() {
|
this.editConfig.visible = false
|
},
|
saveClick(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
console.log(this.editConfig.infomation)
|
if (this.editConfig.title === "新建") {
|
addAuthority({
|
authorityName: this.editConfig.infomation.authorityName,
|
casbinInfos: []
|
})
|
.then((res) => {
|
console.log(res)
|
this.editConfig.visible = false
|
if (res.code === 200) {
|
this.$message({
|
message: "添加成功",
|
type: "success"
|
})
|
this.$parent.getData()
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
} else {
|
// getUpdateClient(params)
|
// .then((res) => {
|
// console.log(res)
|
// this.editConfig.visible = false
|
// if (res.code === 200) {
|
// this.$message({
|
// message: "编辑成功",
|
// type: "success"
|
// })
|
// this.$parent.getData()
|
// }
|
// })
|
// .catch((err) => {
|
// console.log(err)
|
// })
|
}
|
} else {
|
console.log("error submit")
|
return false
|
}
|
})
|
},
|
// 模块选择
|
moduleSelectClick(value) {
|
this.isActive = false
|
if (value === "all") {
|
this.moduleSelTitle = "全部"
|
this.tableData = []
|
} else if (value === "custom") {
|
this.moduleSelTitle = "客户管理"
|
this.tableData = [
|
{
|
name: "销售线索",
|
checked: false,
|
checkedList: ["查看"],
|
detailsList: this.btnCommonList
|
},
|
{
|
name: "客户管理",
|
checked: false,
|
checkedList: [],
|
detailsList: this.btnCommonList
|
},
|
{
|
name: "联系人",
|
checked: false,
|
checkedList: [],
|
detailsList: this.btnCommonList
|
},
|
{
|
name: "跟进记录",
|
checked: false,
|
checkedList: [],
|
detailsList: this.btnCommonList
|
}
|
]
|
} else if (value === "sales") {
|
this.selectA = false
|
this.selectB = true
|
this.moduleSelTitle = "销售管理"
|
this.tableData = []
|
} else if (value === "service") {
|
this.moduleSelTitle = "服务管理"
|
this.tableData = []
|
} else if (value === "background") {
|
this.moduleSelTitle = "后台设置"
|
this.tableData = []
|
}
|
},
|
// 模块全选 / 取消全选
|
selAllChange(row) {
|
if (row.checked) {
|
let arr = []
|
row.detailsList.forEach((ele) => {
|
arr.push(ele.name)
|
})
|
row.checkedList = arr
|
} else {
|
row.checkedList = []
|
}
|
},
|
handleCheckedChange(value, row) {
|
if (value.length === row.detailsList.length) {
|
row.checked = true
|
} else {
|
row.checked = false
|
}
|
row.checkedList = value
|
},
|
// 全选
|
allChange() {
|
this.allChecked != this.allChecked
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.add-role-permission {
|
.basic-info {
|
.basic-info-title {
|
background-color: #f4f8fe;
|
padding-left: 10px;
|
font-size: 15px;
|
font-weight: bold;
|
color: #666;
|
height: 42px;
|
line-height: 42px;
|
}
|
.basic-info-view {
|
margin-top: 10px;
|
padding-right: 40px;
|
.custom-name {
|
display: flex;
|
.common-select-btn {
|
margin-left: 5px;
|
font-size: 16px;
|
}
|
}
|
}
|
.module-select {
|
background-color: $color-text-placehoder;
|
padding: 20px;
|
.el-button {
|
background-color: #fff;
|
padding: 10px;
|
color: $color-text-main;
|
&:hover,
|
&:active,
|
&:focus {
|
background-color: $color-primary;
|
color: #fff;
|
}
|
}
|
.selBtn {
|
background-color: $color-primary;
|
color: #fff;
|
}
|
.title {
|
margin-top: 20px;
|
color: black;
|
font-weight: bold;
|
}
|
}
|
}
|
.dialog-footer {
|
background-color: #f5f5f5;
|
height: 55px;
|
line-height: 55px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
.left {
|
position: absolute;
|
left: 10px;
|
display: flex;
|
align-items: center;
|
.globalAuth {
|
font-size: 14px;
|
color: #606266;
|
margin-left: 10px;
|
.el-select {
|
width: 90px;
|
margin-left: 5px;
|
}
|
}
|
.radio {
|
margin-left: 10px;
|
.el-radio {
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
