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.
138 lines
3.2 KiB
138 lines
3.2 KiB
<template>
|
|
<div>
|
|
<vxe-modal
|
|
:value="isShow"
|
|
show-footer
|
|
title="绑定角色"
|
|
show-confirm-button
|
|
:width="600"
|
|
:height="600"
|
|
esc-closable
|
|
@input="e => $emit('update:isShow',e)"
|
|
>
|
|
<template>
|
|
<vxe-table
|
|
ref="table"
|
|
stripe
|
|
style="margin-top: 10px;"
|
|
keep-source
|
|
show-overflow
|
|
:column-config="{ resizable: true }"
|
|
:checkbox-config="{ trigger: 'row', highlight: true }"
|
|
:data="tableData"
|
|
>
|
|
<vxe-column type="checkbox" width="60" fixed="left" />
|
|
<vxe-column type="seq" width="58" align="center" />
|
|
<vxe-column field="name" width="160" title="角色" />
|
|
<vxe-column field="permissions" title="权限菜单" min-width="200" show-overflow="tooltip">
|
|
<template #default="{ row }">
|
|
<div>
|
|
<el-tag v-for="item in row.permissions" :key="item.id">{{ item.name }}</el-tag>
|
|
</div>
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column field="sortnumber" width="80" title="排序" align="center" />
|
|
</vxe-table>
|
|
<p class="total" type="primary">共 {{ total }} 条数据</p>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
|
|
</template>
|
|
</vxe-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { setRoles, getRoles } from '@/api/user'
|
|
export default {
|
|
props: {
|
|
isShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
|
|
tableData: [],
|
|
total: 0,
|
|
form: {
|
|
id: '',
|
|
role_id: []
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
'form.role_id': function(val, oldVal) {
|
|
this.setSelectRow()
|
|
}
|
|
},
|
|
created() {
|
|
this.getRoles()
|
|
},
|
|
methods: {
|
|
/**
|
|
* @param {array[string]} keys
|
|
* @param {array[all]} values
|
|
* @returns {void}
|
|
*/
|
|
setForm(keys = [], values = []) {
|
|
keys.forEach((key, index) => {
|
|
this.form[key] = values[index]
|
|
})
|
|
},
|
|
|
|
setSelectRow() {
|
|
this.$nextTick(() => {
|
|
if (this.$refs['table']) {
|
|
this.$refs['table'].clearCheckboxRow()
|
|
this.$refs['table'].setCheckboxRow(
|
|
this.tableData.filter(row => this.form.role_id.findIndex(j => j === row.id) !== -1),
|
|
true
|
|
)
|
|
}
|
|
})
|
|
},
|
|
|
|
async getRoles() {
|
|
const res = await getRoles()
|
|
this.tableData = res
|
|
this.total = res.length
|
|
},
|
|
|
|
async submit() {
|
|
if (this.$refs['table']) {
|
|
this.loading = true
|
|
const selectRecords = this.$refs['table'].getCheckboxRecords()
|
|
try {
|
|
setRoles({
|
|
id: this.form.id,
|
|
role_id: selectRecords.map(row => row.id)
|
|
})
|
|
// 接口中角色信息有延迟
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
this.$emit('update:isShow', false)
|
|
this.$emit('refresh')
|
|
}, 500)
|
|
} catch (err) {
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.total {
|
|
color: #666;
|
|
text-align: right;
|
|
line-height: 3;
|
|
}
|
|
</style>
|