<template>
|
<main class="visitor-page visitor-list-page">
|
<section class="visitor-card">
|
<header class="visitor-header">
|
<h1>平台管理员</h1>
|
</header>
|
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" class="visitor-query">
|
<el-form-item label="姓名" prop="nickName">
|
<el-input v-model="queryParams.nickName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="手机号" prop="phonenumber">
|
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="角色" prop="roleId">
|
<el-select v-model="queryParams.roleId" placeholder="请选择角色" clearable>
|
<el-option v-for="role in roles" :key="role.roleId" :label="role.roleName" :value="role.roleId" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="queryParams.status" placeholder="请选择" clearable>
|
<el-option label="启用" value="0" />
|
<el-option label="禁用" value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col v-hasPermi="['visitor:platform-admin:add']" :span="1.5">
|
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
</el-col>
|
<el-col v-hasPermi="['visitor:platform-admin:edit']" :span="1.5">
|
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate()">编辑</el-button>
|
</el-col>
|
<el-col v-hasPermi="['visitor:platform-admin:remove']" :span="1.5">
|
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete()">删除</el-button>
|
</el-col>
|
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
|
</el-row>
|
|
<el-table v-loading="loading" class="visitor-table" :data="adminList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="姓名" prop="nickName" min-width="120" />
|
<el-table-column label="账号" prop="userName" min-width="140" show-overflow-tooltip />
|
<el-table-column label="手机号" prop="phonenumber" min-width="130" />
|
<el-table-column label="角色" prop="roleName" min-width="140" show-overflow-tooltip />
|
<el-table-column label="状态" align="center" width="100">
|
<template slot-scope="scope">
|
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" :disabled="isSuperAdminUser(scope.row) || !$auth.hasPermi('visitor:platform-admin:status')" @change="handleStatusChange(scope.row)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" align="center" prop="createTime" width="170">
|
<template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
|
</el-table-column>
|
<el-table-column v-if="$auth.hasPermi('visitor:platform-admin:edit') || $auth.hasPermi('visitor:platform-admin:reset-password') || $auth.hasPermi('visitor:platform-admin:remove')" label="操作" align="center" width="230" fixed="right" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button v-if="!isSuperAdminUser(scope.row)" v-hasPermi="['visitor:platform-admin:edit']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
|
<el-button v-if="!isMiddlePlatformMode && !isSuperAdminUser(scope.row)" v-hasPermi="['visitor:platform-admin:reset-password']" size="mini" type="text" icon="el-icon-key" @click="handleResetPassword(scope.row)">重置密码</el-button>
|
<el-button v-if="!isSuperAdminUser(scope.row)" v-hasPermi="['visitor:platform-admin:remove']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
</section>
|
|
<el-dialog :title="title" :visible.sync="open" width="620px" append-to-body>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="姓名" prop="nickName">
|
<el-input v-model="form.nickName" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item label="账号" prop="userName">
|
<el-input v-model="form.userName" placeholder="请输入账号" :disabled="Boolean(form.userId)" />
|
</el-form-item>
|
<el-form-item label="手机号" prop="phonenumber">
|
<el-input v-model="form.phonenumber" placeholder="请输入手机号" />
|
</el-form-item>
|
<el-form-item label="角色" prop="roleId">
|
<el-select v-model="form.roleId" placeholder="请选择角色">
|
<el-option v-for="role in roles" :key="role.roleId" :label="role.roleName" :value="role.roleId" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="!form.userId" label="密码" prop="password">
|
<el-input v-model="form.password" type="password" show-password placeholder="请输入密码" />
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio label="0">启用</el-radio>
|
<el-radio label="1">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
<el-button @click="open = false">取消</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog v-if="!isMiddlePlatformMode" title="重置密码" :visible.sync="passwordOpen" width="480px" append-to-body>
|
<el-form ref="passwordForm" :model="passwordForm" :rules="passwordRules" label-width="100px">
|
<el-form-item label="新密码" prop="password">
|
<el-input v-model="passwordForm.password" type="password" show-password placeholder="请输入新密码" />
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitPassword">确定</el-button>
|
<el-button @click="passwordOpen = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</main>
|
</template>
|
|
<script>
|
import { listPlatformAdmin, getPlatformAdmin, addPlatformAdmin, updatePlatformAdmin, changePlatformAdminStatus, resetPlatformAdminPassword, delPlatformAdmin, roleOptions } from '@/api/visitor-admin/account'
|
import { getResponseData, getPageRows, getPageTotal, toIdArray } from '@/utils/visitor-admin'
|
|
export default {
|
name: 'VisitorPlatformAdmin',
|
// 目的：初始化管理员列表、查询条件、编辑表单和重置密码表单状态。
|
data() {
|
const strongPasswordMessage = '密码至少12位，且包含大小写字母和特殊字符'
|
const validateStrongPassword = (rule, value, callback) => {
|
if (!value || (value.length >= 12 && /[A-Z]/.test(value) && /[a-z]/.test(value) && /[^A-Za-z0-9]/.test(value))) {
|
callback()
|
return
|
}
|
callback(new Error(strongPasswordMessage))
|
}
|
return {
|
loading: false,
|
showSearch: true,
|
open: false,
|
passwordOpen: false,
|
title: '',
|
ids: [],
|
single: true,
|
multiple: true,
|
total: 0,
|
roles: [],
|
adminList: [],
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
nickName: '',
|
phonenumber: '',
|
roleId: undefined,
|
status: ''
|
},
|
form: {},
|
passwordForm: {},
|
rules: {
|
nickName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
phonenumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
|
password: [
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
{ validator: validateStrongPassword, trigger: 'blur' }
|
]
|
},
|
passwordRules: {
|
password: [
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
{ validator: validateStrongPassword, trigger: 'blur' }
|
]
|
}
|
}
|
},
|
// 目的：页面初始化时加载角色下拉和管理员列表。
|
created() {
|
this.getRoleOptions()
|
this.getList()
|
},
|
methods: {
|
// 目的：加载角色下拉选项，供管理员新增和编辑使用。
|
getRoleOptions() {
|
roleOptions().then(res => {
|
this.roles = getResponseData(res) || []
|
})
|
},
|
// 目的：按当前查询条件加载平台管理员分页数据。
|
getList() {
|
this.loading = true
|
listPlatformAdmin(this.queryParams).then(res => {
|
this.adminList = getPageRows(res)
|
this.total = getPageTotal(res)
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
// 目的：从第一页重新执行管理员查询。
|
handleQuery() {
|
this.queryParams.pageNum = 1
|
this.getList()
|
},
|
// 目的：清空筛选条件并刷新管理员列表。
|
resetQuery() {
|
this.resetForm('queryForm')
|
this.handleQuery()
|
},
|
// 目的：同步表格勾选状态，控制批量操作按钮可用性。
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.userId)
|
this.single = selection.length !== 1 || this.isSuperAdminUser(selection[0])
|
this.multiple = !selection.length || selection.some(item => this.isSuperAdminUser(item))
|
},
|
isSuperAdminUser(row) {
|
return row && (row.userId === 1 || row.roleId === 1)
|
},
|
// 目的：打开新增管理员弹窗并初始化默认状态。
|
handleAdd() {
|
this.title = '新增管理员'
|
this.form = { status: '0' }
|
this.open = true
|
},
|
// 目的：加载管理员详情并打开编辑弹窗。
|
handleUpdate(row) {
|
if (this.isSuperAdminUser(row)) {
|
return
|
}
|
const userId = row ? row.userId : this.ids[0]
|
getPlatformAdmin(userId).then(res => {
|
this.title = '编辑管理员'
|
this.form = getResponseData(res) || {}
|
this.open = true
|
})
|
},
|
// 目的：校验并提交管理员新增或编辑表单。
|
submitForm() {
|
this.$refs.form.validate(valid => {
|
if (!valid) {
|
return
|
}
|
const request = this.form.userId ? updatePlatformAdmin : addPlatformAdmin
|
request(this.form).then(() => {
|
this.$modal.msgSuccess('保存成功')
|
this.open = false
|
this.getList()
|
})
|
})
|
},
|
// 目的：切换管理员启停状态，失败时恢复原状态。
|
handleStatusChange(row) {
|
if (this.isSuperAdminUser(row)) {
|
return
|
}
|
changePlatformAdminStatus(row.userId, row.status).then(() => {
|
this.$modal.msgSuccess('状态已更新')
|
}).catch(() => {
|
row.status = row.status === '0' ? '1' : '0'
|
})
|
},
|
// 目的：打开重置密码弹窗；中台模式下按业务要求禁止入口和调用。
|
handleResetPassword(row) {
|
if (this.isSuperAdminUser(row)) {
|
return
|
}
|
// 账号管理是本地白名单，但中台模式业务要求不显示、不允许调用重置密码。
|
if (this.isMiddlePlatformMode) {
|
this.passwordOpen = false
|
this.denyMiddlePlatformWrite('集群版对接中台时，不支持重置密码')
|
return
|
}
|
this.passwordForm = { userId: row.userId, password: '' }
|
this.passwordOpen = true
|
},
|
// 目的：提交管理员重置密码请求，并在中台模式下做二次兜底拦截。
|
submitPassword() {
|
// 防止通过控制台或旧弹窗状态绕过按钮隐藏直接提交重置密码。
|
if (this.isMiddlePlatformMode) {
|
this.passwordOpen = false
|
this.denyMiddlePlatformWrite('集群版对接中台时，不支持重置密码')
|
return
|
}
|
this.$refs.passwordForm.validate(valid => {
|
if (!valid) {
|
return
|
}
|
resetPlatformAdminPassword(this.passwordForm.userId, this.passwordForm.password).then(() => {
|
this.$modal.msgSuccess('密码已重置')
|
this.passwordOpen = false
|
})
|
})
|
},
|
// 目的：删除选中的管理员账号并刷新列表。
|
handleDelete(row) {
|
if (this.isSuperAdminUser(row)) {
|
return
|
}
|
const ids = row ? [row.userId] : toIdArray(this.ids)
|
this.$modal.confirm('是否确认删除选中的管理员？').then(() => delPlatformAdmin(ids)).then(() => {
|
this.$modal.msgSuccess('删除成功')
|
this.getList()
|
})
|
}
|
}
|
}
|
</script>
|
