You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
9.3 KiB
312 lines
9.3 KiB
<template> |
|
<el-dialog ref="wf-dialog" |
|
custom-class="wf-dialog" |
|
:visible.sync="visible" |
|
title="权限配置" |
|
width="60%" |
|
:before-close="handleClose" |
|
append-to-body> |
|
<p v-if="all" style="padding: 0 20px;">不限制权限，所有人均可发起：<el-switch v-model="switchAll"></el-switch>（平台需单独配置）</p> |
|
<el-table v-if="visible" |
|
class="avue-crud" |
|
:data="data" |
|
border |
|
size="mini"> |
|
<el-table-column align="center" |
|
header-align="center" |
|
width="80"> |
|
<template #header> |
|
<el-button circle |
|
type="primary" |
|
size="mini" |
|
icon="el-icon-plus" |
|
@click="data.push({})"></el-button> |
|
</template> |
|
<template #default="{$index}"> |
|
<el-button circle |
|
type="danger" |
|
size="mini" |
|
icon="el-icon-delete" |
|
@click="data.splice($index, 1)"></el-button> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="类型" |
|
prop="type" |
|
align="center" |
|
header-align="center"> |
|
<template #default="{row, $index}"> |
|
<el-select v-model="row.type" |
|
size="mini" |
|
placeholder="类型" |
|
@change="handleTypeChange($index)"> |
|
<el-option v-for="item in typeList" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
:disabled="Boolean(data.find(d => d.type == item.value)) || (switchAll && !['platform'].includes(item.value))"></el-option> |
|
</el-select> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="值" |
|
prop="text" |
|
align="center" |
|
header-align="center"> |
|
<template #default="{row, $index}"> |
|
<template v-if="row.type == 'user'"> |
|
<el-input v-model="row.text" |
|
size="mini" |
|
placeholder="用户" |
|
readonly |
|
@click.native="handleSelect($index, 'user-select')"> |
|
<template #append> |
|
<el-button icon="el-icon-plus"></el-button> |
|
</template> |
|
</el-input> |
|
</template> |
|
<template v-else-if="row.type == 'role'"> |
|
<avue-input-tree :ref="`role_${$index}`" |
|
v-model="row.value" |
|
size="mini" |
|
dataType="string" |
|
multiple |
|
clearable |
|
placeholder="角色" |
|
:dic="roleList" |
|
:props="roleProps || {label: 'roleName', value: 'id'}" |
|
@change="handleChange($index, `role_${$index}`)"> |
|
</avue-input-tree> |
|
</template> |
|
<template v-else-if="row.type == 'dept'"> |
|
<avue-input-tree :ref="`dept_${$index}`" |
|
v-model="row.value" |
|
size="mini" |
|
dataType="string" |
|
multiple |
|
clearable |
|
placeholder="部门" |
|
:dic="deptList" |
|
:props="deptProps || {label: 'deptName', value: 'id'}" |
|
@change="handleChange($index, `dept_${$index}`)"> |
|
</avue-input-tree> |
|
</template> |
|
<template v-else-if="row.type == 'post'"> |
|
<avue-input-tree :ref="`post_${$index}`" |
|
v-model="row.value" |
|
size="mini" |
|
dataType="string" |
|
multiple |
|
clearable |
|
placeholder="职位" |
|
:dic="postList" |
|
:props="postProps || {label: 'postName', value: 'id'}" |
|
@change="handleChange($index, `post_${$index}`)"> |
|
</avue-input-tree> |
|
</template> |
|
<template v-else-if="row.type == 'platform'"> |
|
<avue-input-tree :ref="`platform_${$index}`" |
|
v-model="row.value" |
|
size="mini" |
|
dataType="string" |
|
multiple |
|
clearable |
|
placeholder="平台" |
|
:dic="platformList" |
|
@change="handleChange($index, `platform_${$index}`)"> |
|
</avue-input-tree> |
|
</template> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<template #footer> |
|
<el-button @click="handleClose" |
|
size="mini">取消</el-button> |
|
<el-button type="primary" |
|
@click="handleSubmit" |
|
size="mini">确定</el-button> |
|
</template> |
|
|
|
<user-select ref="user-select" |
|
check-type="checkbox" |
|
:user-url="userUrl" |
|
:custom-option="customOption" |
|
:default-checked="defaultChecked" |
|
@onConfirm="handleSelectConfirm"></user-select> |
|
</el-dialog> |
|
</template> |
|
<script> |
|
import UserSelect from './user-select.vue' |
|
|
|
export default { |
|
props: { |
|
userOption: Object, |
|
all: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
components: { |
|
UserSelect, |
|
}, |
|
computed: { |
|
userUrl() { |
|
return this.userOption.userUrl |
|
}, |
|
roleUrl() { |
|
return this.userOption.roleUrl |
|
}, |
|
deptUrl() { |
|
return this.userOption.deptUrl |
|
}, |
|
postUrl() { |
|
return this.userOption.postUrl |
|
}, |
|
customUrl() { |
|
return this.userOption.customUrl |
|
}, |
|
customOption() { |
|
return this.userOption.customOption |
|
}, |
|
roleProps() { |
|
return this.customOption ? this.customOption.roleProps : null |
|
}, |
|
deptProps() { |
|
return this.customOption ? this.customOption.deptProps : null |
|
}, |
|
postProps() { |
|
return this.customOption ? this.customOption.postProps : null |
|
} |
|
}, |
|
watch: { |
|
visible(val) { |
|
if (!this.init) { |
|
this.getRoleList() |
|
this.getDeptList() |
|
this.getPostList() |
|
this.init = true |
|
} |
|
if (val && this.userOption && this.userOption.data) this.$set(this, 'data', JSON.parse(JSON.stringify(this.userOption.data))) |
|
}, |
|
}, |
|
data() { |
|
return { |
|
switchAll: false, |
|
init: false, |
|
visible: false, |
|
data: [], |
|
roleList: [], |
|
deptList: [], |
|
postList: [], |
|
selectIndex: 0, |
|
defaultChecked: '', |
|
typeList: [{ |
|
label: '用户', |
|
value: 'user' |
|
}, { |
|
label: '角色', |
|
value: 'role' |
|
}, { |
|
label: '部门', |
|
value: 'dept' |
|
}, { |
|
label: '职位', |
|
value: 'post' |
|
}, { |
|
label: '平台', |
|
value: 'platform' |
|
}], |
|
typeDic: { |
|
user: '用户', |
|
role: '角色', |
|
dept: '部门', |
|
post: '职位', |
|
platform: '平台' |
|
}, |
|
platformList: [ |
|
// { |
|
// label: 'PC', |
|
// value: 'pc' |
|
// }, |
|
{ |
|
label: '移动端H5', |
|
value: 'h5' |
|
}, { |
|
label: '微信小程序', |
|
value: 'mp-wx' |
|
}, { |
|
label: 'IOS', |
|
value: 'ios' |
|
}, { |
|
label: '安卓', |
|
value: 'android' |
|
}] |
|
} |
|
}, |
|
methods: { |
|
handleSelect(index, ref) { |
|
this.selectIndex = index |
|
this.defaultChecked = this.data[index].value |
|
this.$refs[ref].visible = true |
|
}, |
|
handleSelectConfirm(id, name) { |
|
this.$set(this.data[this.selectIndex], 'value', id) |
|
this.$set(this.data[this.selectIndex], 'text', name) |
|
}, |
|
handleTypeChange(index) { |
|
this.$set(this.data, index, { |
|
type: this.data[index].type |
|
}) |
|
}, |
|
handleChange(index, ref) { |
|
this.$nextTick(() => { |
|
const text = this.$refs[ref].labelShow.join(',') |
|
if (text) this.$set(this.data[index], 'text', text) |
|
}) |
|
}, |
|
getRoleList() { |
|
this.$axios.get(this.roleUrl).then(res => { |
|
this.roleList = res.data.data |
|
}) |
|
}, |
|
getDeptList() { |
|
this.$axios.get(this.deptUrl).then(res => { |
|
this.deptList = res.data.data |
|
}) |
|
}, |
|
getPostList() { |
|
this.$axios.get(this.postUrl, { current: 1, size: 999 }).then(res => { |
|
this.postList = res.data.data.records |
|
}) |
|
}, |
|
handleSubmit() { |
|
this.$emit('submit', this.data.filter(d => d.type && d.value), this.switchAll) |
|
this.visible = false |
|
}, |
|
handleClose(done) { |
|
this.visible = false |
|
if (done && typeof done == 'function') done() |
|
} |
|
} |
|
} |
|
</script> |
|
<style lang="scss"> |
|
.wf-dialog { |
|
display: flex; |
|
flex-direction: column; |
|
margin: 0 !important; |
|
position: absolute; |
|
top: 40%; |
|
left: 50%; |
|
transform: translate(-50%, -40%); |
|
max-height: calc(100% - 30px); |
|
max-width: calc(100% - 30px); |
|
|
|
.el-dialog__body { |
|
flex: 1; |
|
overflow: auto; |
|
} |
|
|
|
.el-select { |
|
width: 100%; |
|
} |
|
} |
|
</style> |