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.
135 lines
3.3 KiB
135 lines
3.3 KiB
2 years ago
|
<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
|
||
|
|
stripe
|
||
|
|
style="margin-top: 10px;"
|
||
|
|
ref="table"
|
||
|
|
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>
|
||
|
|
<vxe-column type="seq" width="58" align="center"></vxe-column>
|
||
|
|
<vxe-column field="name" width="160" title="角色"></vxe-column>
|
||
|
|
<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-column>
|
||
|
|
</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: []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
watch: {
|
||
|
|
"form.role_id": function(val, oldVal) {
|
||
|
|
this.setSelectRow()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getRoles()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.total {
|
||
|
|
color: #666;
|
||
|
|
text-align: right;
|
||
|
|
line-height: 3;
|
||
|
|
}
|
||
|
|
</style>
|