444 lines
15 KiB
Vue
444 lines
15 KiB
Vue
<template>
|
|
<d2-container>
|
|
<template #header>
|
|
<div class="search-bar">
|
|
<el-form :inline="true" size="mini">
|
|
<el-form-item :label="$t(key('username'))">
|
|
<el-input
|
|
v-model="search.username"
|
|
:placeholder="$t(key('enter_username'))"
|
|
clearable
|
|
style="width:200px"
|
|
@keyup.enter.native="onSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t(key('full_name'))">
|
|
<el-input
|
|
v-model="search.nickname"
|
|
:placeholder="$t(key('enter_name'))"
|
|
clearable
|
|
style="width:200px"
|
|
@keyup.enter.native="onSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">
|
|
{{ $t(key('search')) }}
|
|
</el-button>
|
|
<el-button icon="el-icon-refresh" @click="onReset">
|
|
{{ $t(key('reset')) }}
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<page-table
|
|
ref="pageTable"
|
|
:columns="columns"
|
|
:data="tableData"
|
|
:loading="loading"
|
|
:toolbar-buttons="toolbarButtons"
|
|
:row-buttons="rowButtons"
|
|
:pagination="pagination"
|
|
auto-height
|
|
@page-change="onPageChange"
|
|
@selection-change="onSelect"
|
|
>
|
|
<template #col-status="{ row }">
|
|
<span v-if="row.status === 1" style="color: #67c23a;">
|
|
<i class="el-icon-circle-check" />
|
|
{{ $t(key('enable')) }}
|
|
</span>
|
|
<span v-else style="color: #909399;">
|
|
<i class="el-icon-circle-close" />
|
|
{{ $t(key('disable')) }}
|
|
</span>
|
|
</template>
|
|
</page-table>
|
|
|
|
<page-dialog-form
|
|
ref="dialogForm"
|
|
:visible.sync="dialogVisible"
|
|
:title="dialogTitle"
|
|
width="35%"
|
|
:form-cols="dialogFormCols"
|
|
:form-data="formData"
|
|
:rules="dialogRules"
|
|
label-width="100px"
|
|
:submitting="submitting"
|
|
:confirm-text="key('confirm')"
|
|
:cancel-text="key('cancel')"
|
|
@submit="onDialogSubmit"
|
|
@close="onDialogClose"
|
|
/>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { useTableColumns } from '@/composables/useTableColumns'
|
|
import { useTableButtons } from '@/composables/useTableButtons'
|
|
import { i18nMixin } from '@/composables/useI18n'
|
|
import { confirmMixin } from '@/composables/useConfirmHandle'
|
|
import { getRoleAll } from '@/api/system-administration/role'
|
|
import {
|
|
getUserList,
|
|
createUser,
|
|
editUser,
|
|
deleteUser,
|
|
batchDeleteUser,
|
|
enableUser,
|
|
disableUser,
|
|
resetUserPwd
|
|
} from '@/api/system-administration/user'
|
|
import PageTable from '@/components/page-table'
|
|
import PageDialogForm from '@/components/page-dialog-form'
|
|
|
|
const ownUserId = () => localStorage.getItem('user_id')
|
|
|
|
export default {
|
|
name: 'system-administration-user',
|
|
components: { PageTable, PageDialogForm },
|
|
mixins: [i18nMixin('page.system_administration.user_management.user'), confirmMixin],
|
|
data () {
|
|
const key = this.key.bind(this)
|
|
const $t = this.$t.bind(this)
|
|
return {
|
|
loading: false,
|
|
submitting: false,
|
|
tableData: [],
|
|
selectedRows: [],
|
|
dialogVisible: false,
|
|
dialogTitle: '',
|
|
editId: '',
|
|
handleType: 'create',
|
|
search: { username: '', nickname: '' },
|
|
pagination: { current: 1, size: 10, total: 0 },
|
|
roleOptions: [],
|
|
columns: [],
|
|
toolbarButtons: [],
|
|
rowButtons: [],
|
|
baseFormCols: {
|
|
create: [
|
|
[{ type: 'input', prop: 'username', label: key('username'), placeholder: key('enter_username'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'password', inputType: 'password', label: key('password'), placeholder: key('enter_password'), clearable: true, showPassword: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'password_confirm', inputType: 'password', label: key('confirm_password'), placeholder: key('enter_confirm_password'), clearable: true, showPassword: true, style: { width: '90%' } }],
|
|
[{ type: 'select', prop: 'role_id', label: key('user_group'), placeholder: key('select_user_group'), clearable: true, style: { width: '90%' }, options: [] }],
|
|
[{ type: 'input', prop: 'nickname', label: key('full_name'), placeholder: key('enter_name'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'pass_number', label: key('pass_number'), placeholder: key('enter_pass_number'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'select', prop: 'status', label: key('status'), clearable: false, style: { width: '90%' }, options: [{ value: '1', label: $t(key('enable')) }, { value: '0', label: $t(key('disable')) }] }]
|
|
],
|
|
edit: [
|
|
[{ type: 'input', prop: 'username', label: key('username'), placeholder: key('enter_username'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'select', prop: 'role_id', label: key('user_group'), placeholder: key('select_user_group'), clearable: true, style: { width: '90%' }, options: [] }],
|
|
[{ type: 'input', prop: 'nickname', label: key('full_name'), placeholder: key('enter_name'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'pass_number', label: key('pass_number'), placeholder: key('enter_pass_number'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'select', prop: 'status', label: key('status'), clearable: false, style: { width: '90%' }, options: [{ value: '1', label: $t(key('enable')) }, { value: '0', label: $t(key('disable')) }] }]
|
|
]
|
|
},
|
|
baseRules: {
|
|
username: [
|
|
{ required: true, message: key('enter_username'), trigger: 'blur' },
|
|
{ min: 3, max: 20, message: key('username_length'), trigger: 'blur' }
|
|
],
|
|
password: [
|
|
{ required: true, message: key('enter_password'), trigger: 'blur' },
|
|
{ min: 6, max: 64, message: key('password_length'), trigger: 'blur' }
|
|
],
|
|
password_confirm: [
|
|
{ required: true, message: key('enter_confirm_password'), trigger: 'blur' },
|
|
{ min: 6, max: 64, message: key('password_length'), trigger: 'blur' }
|
|
],
|
|
role_id: [
|
|
{ required: true, message: key('select_user_group'), trigger: 'change' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
dialogFormCols () {
|
|
const cols = this.baseFormCols[this.handleType] || this.baseFormCols.create
|
|
const roleIdx = this.handleType === 'create' ? 3 : 1
|
|
if (cols[roleIdx] && cols[roleIdx][0]) {
|
|
cols[roleIdx][0].options = this.roleOptions
|
|
}
|
|
return cols
|
|
},
|
|
dialogRules () {
|
|
if (this.handleType === 'edit') {
|
|
return {
|
|
username: this.baseRules.username,
|
|
role_id: this.baseRules.role_id
|
|
}
|
|
}
|
|
return this.baseRules
|
|
}
|
|
},
|
|
created () {
|
|
this.initRoleOptions()
|
|
this.columns = useTableColumns([
|
|
{ prop: 'sort', label: this.key('index'), width: 80 },
|
|
{ prop: 'username', label: this.key('username'), minWidth: 120 },
|
|
{ prop: 'nickname', label: this.key('full_name'), minWidth: 100 },
|
|
{ prop: 'pass_number', label: this.key('pass_number'), minWidth: 120 },
|
|
{ prop: 'status', label: this.key('status'), slot: 'status', width: 100 },
|
|
{ prop: 'role_name', label: this.key('user_group'), minWidth: 100 },
|
|
{ prop: 'last_ip', label: this.key('login_ip'), width: 130 },
|
|
{ prop: 'create_time', label: this.key('last_login_time'), width: 160 },
|
|
{ prop: '_actions', label: this.key('actions'), width: 240, fixed: 'right' }
|
|
])
|
|
const btns = useTableButtons({
|
|
toolbar: [
|
|
{
|
|
key: 'add',
|
|
label: this.key('add'),
|
|
icon: 'el-icon-plus',
|
|
type: 'primary',
|
|
auth: '/system_settings/user_management/member/create',
|
|
onClick: this.openAdd
|
|
},
|
|
{
|
|
key: 'enable',
|
|
label: this.key('enable'),
|
|
icon: 'el-icon-check',
|
|
type: 'success',
|
|
auth: '/system_settings/user_management/member/enable',
|
|
onClick: () => this.batchUpdateStatus(1)
|
|
},
|
|
{
|
|
key: 'disable',
|
|
label: this.key('disable'),
|
|
icon: 'el-icon-close',
|
|
type: 'warning',
|
|
auth: '/system_settings/user_management/member/disable',
|
|
onClick: () => this.batchUpdateStatus(0)
|
|
},
|
|
{
|
|
key: 'batch_delete',
|
|
label: this.key('batch_delete'),
|
|
icon: 'el-icon-delete',
|
|
type: 'danger',
|
|
auth: '/system_settings/user_management/member/batch-delete',
|
|
onClick: this.handleBatchDelete
|
|
}
|
|
],
|
|
row: [
|
|
{
|
|
key: 'edit',
|
|
label: this.key('edit'),
|
|
icon: 'el-icon-edit',
|
|
auth: '/system_settings/user_management/member/edit',
|
|
onClick: this.openEdit
|
|
},
|
|
{
|
|
key: 'reset_pwd',
|
|
label: this.key('reset_password'),
|
|
icon: 'el-icon-refresh',
|
|
auth: '/system_settings/user_management/member/reset-pwd',
|
|
onClick: this.handleResetPwd
|
|
},
|
|
{
|
|
key: 'delete',
|
|
label: this.key('delete'),
|
|
icon: 'el-icon-delete',
|
|
color: 'danger',
|
|
auth: '/system_settings/user_management/member/delete',
|
|
onClick: this.handleDelete
|
|
}
|
|
]
|
|
}, this.$permission)
|
|
this.toolbarButtons = btns.toolbarButtons
|
|
this.rowButtons = btns.rowButtons
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
async initRoleOptions () {
|
|
try {
|
|
const res = await getRoleAll()
|
|
const data = Array.isArray(res) ? res : (res.data || [])
|
|
this.roleOptions = data.map(item => ({ value: item.id, label: item.name }))
|
|
} catch { /* 忽略 */ }
|
|
},
|
|
async fetchData () {
|
|
this.loading = true
|
|
try {
|
|
const res = await getUserList({
|
|
...this.search,
|
|
page_no: this.pagination.current,
|
|
page_size: this.pagination.size
|
|
})
|
|
const list = Array.isArray(res) ? res : (res.data || [])
|
|
const total = Array.isArray(res) ? res.length : (res.count || 0)
|
|
this.tableData = list
|
|
this.pagination.total = total
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
onSearch () {
|
|
this.pagination.current = 1
|
|
this.fetchData()
|
|
},
|
|
onReset () {
|
|
this.search = { username: '', nickname: '' }
|
|
this.pagination.current = 1
|
|
this.fetchData()
|
|
},
|
|
onPageChange (page) {
|
|
this.pagination.current = page.current
|
|
this.pagination.size = page.size
|
|
this.fetchData()
|
|
},
|
|
onSelect (rows) {
|
|
this.selectedRows = rows
|
|
},
|
|
resetForm () {
|
|
this.formData = {
|
|
username: '',
|
|
password: '',
|
|
password_confirm: '',
|
|
role_id: '',
|
|
nickname: '',
|
|
pass_number: '',
|
|
status: '1'
|
|
}
|
|
this.editId = ''
|
|
},
|
|
openAdd () {
|
|
this.handleType = 'create'
|
|
this.dialogTitle = this.key('add_title')
|
|
this.$nextTick(() => {
|
|
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
|
this.resetForm()
|
|
this.dialogVisible = true
|
|
})
|
|
},
|
|
openEdit (row) {
|
|
this.handleType = 'edit'
|
|
this.dialogTitle = this.key('edit_title')
|
|
this.editId = row.user_id
|
|
this.formData = {
|
|
username: row.username,
|
|
role_id: row.role_id,
|
|
nickname: row.nickname || '',
|
|
pass_number: row.pass_number || '',
|
|
status: String(row.status)
|
|
}
|
|
this.dialogVisible = true
|
|
},
|
|
async onDialogSubmit () {
|
|
this.submitting = true
|
|
try {
|
|
if (this.handleType === 'create') {
|
|
if (this.formData.password !== this.formData.password_confirm) {
|
|
this.$message.error(this.$t(this.key('password_not_match')))
|
|
return
|
|
}
|
|
await createUser(this.formData)
|
|
} else {
|
|
await editUser({ ...this.formData, id: this.editId })
|
|
}
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.dialogVisible = false
|
|
this.fetchData()
|
|
} finally {
|
|
this.submitting = false
|
|
}
|
|
},
|
|
onDialogClose () {
|
|
this.resetForm()
|
|
},
|
|
batchUpdateStatus (status) {
|
|
const uid = ownUserId()
|
|
const rows = this.selectedRows.filter(row => String(row.user_id) !== uid)
|
|
if (rows.length === 0 && this.selectedRows.length > 0) {
|
|
this.$message.warning(this.$t(this.key('cannot_operate_self')))
|
|
return
|
|
}
|
|
if (rows.length === 0) {
|
|
this.$message.warning(this.$t(this.key('select_rows_first')))
|
|
return
|
|
}
|
|
const ids = rows.map(row => row.user_id)
|
|
this.$confirm(
|
|
this.$t(this.key('confirm_execute')),
|
|
this.$t(this.key('prompt')),
|
|
{
|
|
confirmButtonText: this.$t(this.key('confirm')),
|
|
cancelButtonText: this.$t(this.key('cancel')),
|
|
type: 'warning',
|
|
closeOnClickModal: false
|
|
}
|
|
).then(async () => {
|
|
try {
|
|
await (status === 1 ? enableUser({ id: ids, status }) : disableUser({ id: ids, status: 0 }))
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.fetchData()
|
|
} catch { /* 拦截器已处理 */ }
|
|
}).catch(() => {})
|
|
},
|
|
async handleDelete (row) {
|
|
if (String(row.user_id) === ownUserId()) {
|
|
this.$message.warning(this.$t(this.key('cannot_delete_self')))
|
|
return
|
|
}
|
|
const cancelled = await this.$confirmAction(
|
|
{ message: this.key('confirm_delete'), title: this.key('prompt') },
|
|
() => deleteUser({ id: [row.user_id] })
|
|
)
|
|
if (cancelled) return
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.pagination.current = Math.min(
|
|
this.pagination.current,
|
|
Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1
|
|
)
|
|
this.fetchData()
|
|
},
|
|
async handleBatchDelete () {
|
|
const uid = ownUserId()
|
|
const rows = this.selectedRows.filter(row => String(row.user_id) !== uid)
|
|
if (rows.length === 0 && this.selectedRows.length > 0) {
|
|
this.$message.warning(this.$t(this.key('cannot_delete_self')))
|
|
return
|
|
}
|
|
if (rows.length === 0) {
|
|
this.$message.warning(this.$t(this.key('select_rows_first')))
|
|
return
|
|
}
|
|
const cancelled = await this.$confirmAction(
|
|
{ message: this.key('confirm_batch_delete'), title: this.key('prompt') },
|
|
() => batchDeleteUser({ id: rows.map(row => row.user_id) })
|
|
)
|
|
if (cancelled) return
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.fetchData()
|
|
},
|
|
async handleResetPwd (row) {
|
|
try {
|
|
await this.$confirm(
|
|
this.$t(this.key('confirm_reset_pwd')),
|
|
this.$t(this.key('prompt')),
|
|
{
|
|
confirmButtonText: this.$t(this.key('confirm')),
|
|
cancelButtonText: this.$t(this.key('cancel')),
|
|
type: 'warning',
|
|
closeOnClickModal: false
|
|
}
|
|
)
|
|
await resetUserPwd({ id: row.user_id })
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
} catch { /* 取消或失败 */ }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-bar {
|
|
padding: 10px 0;
|
|
}
|
|
/deep/ .el-form-item--mini.el-form-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|