346 lines
8.2 KiB
Vue
346 lines
8.2 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-row style="margin-bottom: 24px;">
|
|
<el-col :span="12" :offset="2">
|
|
<el-button
|
|
type="primary"
|
|
v-loading="loading"
|
|
@click="saveVal"
|
|
>
|
|
保存
|
|
</el-button>
|
|
<el-button @click="onCancel">
|
|
取消
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12" :offset="2">
|
|
<el-tree
|
|
:data="typeOptions"
|
|
accordion
|
|
node-key="id"
|
|
ref="tree"
|
|
highlight-current
|
|
default-expand-all
|
|
:expand-on-click-node="false"
|
|
>
|
|
<template #default="{ node, data }">
|
|
<span class="custom-tree-node">
|
|
<span>{{ node.label }}</span>
|
|
<span class="action">
|
|
<a v-if="node.level === 1"
|
|
@click="append(data)">
|
|
增加
|
|
</a>
|
|
<a v-if="node.level !== 1 && node.level !== 3"
|
|
@click="edit(node, data)">
|
|
修改
|
|
</a>
|
|
<a v-if="node.level !== 1"
|
|
@click="remove(node, data)">
|
|
删除
|
|
</a>
|
|
</span>
|
|
</span>
|
|
</template>
|
|
</el-tree>
|
|
</el-col>
|
|
</el-row>
|
|
<el-dialog
|
|
:visible.sync="dialogVisible"
|
|
:title="dialogType==='edit'?'编辑权限':'添加权限'"
|
|
>
|
|
<el-form
|
|
:model="record"
|
|
ref="modalForm"
|
|
:rules="modalRules"
|
|
label-width="80px"
|
|
label-position="left"
|
|
>
|
|
<el-form-item label="权限id" prop="id">
|
|
<el-input
|
|
v-model="record.id"
|
|
placeholder="权限id"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="权限名" prop="label">
|
|
<el-input
|
|
v-model="record.label"
|
|
placeholder="权限名"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="操作名" prop="actions">
|
|
<el-select
|
|
v-model="record.actions"
|
|
multiple
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
style="width: 100%"
|
|
placeholder="请选择或输入操作">
|
|
<el-option
|
|
v-for="item in actions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="danger"
|
|
@click="closeModal"
|
|
>
|
|
取消
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="savePermission"
|
|
>
|
|
确定
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
|
import { getGames, IGameData } from '@/api/game'
|
|
import Sticky from '@/components/Sticky/index.vue'
|
|
import {
|
|
getShopGameInfo,
|
|
getShops,
|
|
saveShopGameInfo,
|
|
updateShopQtypes
|
|
} from '@/api/shop'
|
|
import { getAllCategory } from '@/api/question'
|
|
import { getPermissions, savePermission } from '@/api/permissions'
|
|
import { Form } from 'element-ui'
|
|
|
|
@Component({
|
|
name: 'PermissionSetting',
|
|
components: {
|
|
Sticky
|
|
},
|
|
filters: {
|
|
parseGameType: (type: number) => {
|
|
return type === 0 ? '微信小游戏' : '网页版'
|
|
}
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
private loading = true
|
|
private shop = ''
|
|
private dialogType = 'new'
|
|
private dialogVisible = false
|
|
private record = {actions: []}
|
|
private actions = [
|
|
'read', 'edit', 'delete'
|
|
]
|
|
|
|
|
|
private typeSelected = []
|
|
private typeOptions: {id: string, label: string, children?: any[]}[] = []
|
|
private initAdmin() {
|
|
return {
|
|
id: '',
|
|
label: '',
|
|
actions: []
|
|
}
|
|
}
|
|
private modalRules = {
|
|
id: [{ required: true, message: '请输入权限id', trigger: 'blur' },
|
|
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
pattern: /^[a-zA-Z]+$/,
|
|
message: '权限只支持英文字母',
|
|
trigger: 'blur'
|
|
}],
|
|
|
|
label: [{ required: true, message: '请输入权限名', trigger: 'blur' },
|
|
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
|
|
{
|
|
required: true,
|
|
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
|
|
message: '权限名不支持特殊字符',
|
|
trigger: 'blur'
|
|
}],
|
|
|
|
}
|
|
async created() {
|
|
await this.getRemoteCategory()
|
|
this.loading = false
|
|
}
|
|
|
|
|
|
private async onCancel() {
|
|
try {
|
|
await this.$confirm('确认不保存当前信息?', 'Warning', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
this.$store.dispatch('delView', this.$route)
|
|
this.$router.go(-1)
|
|
} catch (err) {
|
|
|
|
}
|
|
}
|
|
|
|
private append(data) {
|
|
this.record = this.initAdmin()
|
|
this.dialogType = 'new'
|
|
this.dialogVisible = true
|
|
this.record.actions = this.actions
|
|
this.record.parent = data
|
|
}
|
|
private edit(node, data) {
|
|
console.log(data)
|
|
this.record = this.initAdmin()
|
|
this.record.idx = node.parent.data.children.indexOf(data)
|
|
this.record.actions = data.children.map(o=>o.label)
|
|
this.record.parent = node.parent.data
|
|
this.dialogType = 'edit'
|
|
this.dialogVisible = true
|
|
this.record.id = data.id
|
|
this.record.label = data.label
|
|
}
|
|
private async remove(node, data) {
|
|
const parent = node.parent.data;
|
|
const children = parent.children || parent.data;
|
|
const index = children.findIndex(d => d.id === data.id);
|
|
console.log(node, data)
|
|
try {
|
|
await this.$confirm('确认删除此权限?', 'Warning', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
children.splice(index, 1);
|
|
} catch(err) {
|
|
|
|
}
|
|
|
|
}
|
|
private async saveVal() {
|
|
try {
|
|
let records = []
|
|
for (let data of this.typeOptions[0].children) {
|
|
records.push({
|
|
_id: data.id,
|
|
name: data.label,
|
|
actions: data.children.map(o => o.label)
|
|
})
|
|
}
|
|
await savePermission({datas: records})
|
|
console.log(records)
|
|
this.$notify({
|
|
title: 'Success',
|
|
message: '更新权限列表成功',
|
|
type: 'success',
|
|
duration: 2000
|
|
})
|
|
} catch (err) {
|
|
console.log('save permission error', err)
|
|
}
|
|
}
|
|
|
|
private async getRemoteCategory() {
|
|
const { data } = await getPermissions()
|
|
|
|
this.typeOptions.push({
|
|
id: 'root',
|
|
label: 'Root',
|
|
children: data
|
|
})
|
|
}
|
|
private closeModal() {
|
|
this.dialogVisible = false
|
|
this.$refs.modalForm.clearValidate()
|
|
}
|
|
private async savePermission() {
|
|
const form = <Form>this.$refs.modalForm
|
|
try {
|
|
await form.validate()
|
|
const subArr = []
|
|
for (const s of this.record.actions) {
|
|
subArr.push({
|
|
id: `${this.record.id}:${s}`,
|
|
label: s
|
|
})
|
|
}
|
|
let data = {
|
|
id: this.record.id,
|
|
label: this.record.label,
|
|
children: subArr
|
|
}
|
|
if (this.dialogType == 'new') {
|
|
this.record.parent.children.push(data)
|
|
} else {
|
|
this.record.parent.children.splice(this.record.idx, 1, data)
|
|
}
|
|
|
|
this.dialogVisible = false
|
|
this.$refs.modalForm.clearValidate()
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bottom {
|
|
margin-top: 13px;
|
|
line-height: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.bottom span{
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
|
|
.button {
|
|
padding: 0;
|
|
min-height: auto;
|
|
float: right;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.one-block{
|
|
border: 1px solid #ebebeb;
|
|
border-radius: 3px;
|
|
transition: .2s;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
}
|
|
|
|
.custom-tree-node {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
padding-right: 8px;
|
|
|
|
}
|
|
.custom-tree-node .action{
|
|
color: #409eff;
|
|
}
|
|
|
|
</style>
|