125 lines
2.6 KiB
Vue
125 lines
2.6 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-if="visible"
|
|
:visible.sync="visible"
|
|
v-dialogDrag
|
|
width="540px"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
append-to-body
|
|
:title="$t('toggleRole:tip:title')"
|
|
center
|
|
top="30vh"
|
|
:show-close="false"
|
|
:before-close="cancel"
|
|
>
|
|
<template v-if="hasRole">
|
|
<el-radio-group v-model="form.userRoleId" class="roles">
|
|
<el-radio
|
|
v-for="item in roles"
|
|
:key="item.Id"
|
|
:label="item.Id"
|
|
:disabled="item.IsUserRoleDisabled"
|
|
style="margin-bottom: 10px"
|
|
>
|
|
{{ item.UserTypeShortName }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</template>
|
|
|
|
<div v-else style="text-align: center">
|
|
{{ $t('toggleRole:tip:noRole') }}
|
|
</div>
|
|
<div slot="footer">
|
|
<!-- 取消 -->
|
|
<el-button size="small" @click="cancel()">
|
|
{{ $t('common:button:cancel') }}
|
|
</el-button>
|
|
<!-- 保存 -->
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="save"
|
|
:disabled="saveDisabled"
|
|
:loading="loading"
|
|
v-if="hasRole"
|
|
>
|
|
{{ $t('common:button:confirm') }}
|
|
</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'toggleRole',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
userRoleId: null,
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.form.userRoleId = zzSessionStorage.getItem('userId')
|
|
},
|
|
computed: {
|
|
roles() {
|
|
return this.$store.state.user.roles
|
|
},
|
|
hasRole() {
|
|
return this.roles && this.roles.length > 0
|
|
},
|
|
saveDisabled() {
|
|
return this.form.userRoleId === zzSessionStorage.getItem('userId')
|
|
},
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.$emit('update:visible', false)
|
|
this.$emit('cancel')
|
|
},
|
|
async save() {
|
|
try {
|
|
if (!this.form.userRoleId)
|
|
return this.$message.warning(this.$t('toggleRole:ruleMessage:select'))
|
|
this.$emit('save', this.form.userRoleId)
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.roles {
|
|
max-width: 365px;
|
|
width: fit-content;
|
|
display: flex;
|
|
align-content: center;
|
|
// justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin: auto;
|
|
}
|
|
|
|
/deep/ .el-radio__original {
|
|
display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
|
|
}
|
|
|
|
/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
|
|
.el-radio__inner {
|
|
box-shadow: none !important;
|
|
}
|
|
.el-radio {
|
|
width: 60px;
|
|
}
|
|
</style> |