|
|
@@ -4,17 +4,28 @@
|
|
|
<div class="search-form">
|
|
|
<el-form :model="queryParams" inline>
|
|
|
<el-form-item label="搜索">
|
|
|
- <el-input v-model="queryParams.search" placeholder="请输入用户名" clearable @keyup.enter="handleQuery" />
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.search"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="角色">
|
|
|
- <el-select v-model="queryParams.role" placeholder="请选择角色" clearable>
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.role"
|
|
|
+ placeholder="请选择角色"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
<el-option label="管理员" value="admin" />
|
|
|
<el-option label="操作员" value="operator" />
|
|
|
<el-option label="观察者" value="viewer" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button type="primary" :icon="Search" @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
@@ -22,8 +33,12 @@
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="table-actions">
|
|
|
- <el-button type="primary" :icon="Plus" @click="handleAdd">新增用户</el-button>
|
|
|
- <el-button type="success" :icon="Refresh" @click="getList">刷新列表</el-button>
|
|
|
+ <el-button type="primary" :icon="Plus" @click="handleAdd"
|
|
|
+ >新增用户</el-button
|
|
|
+ >
|
|
|
+ <el-button type="success" :icon="Refresh" @click="getList"
|
|
|
+ >刷新列表</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
|
|
|
<!-- 数据表格 -->
|
|
|
@@ -32,24 +47,50 @@
|
|
|
<el-table-column prop="username" label="用户名" min-width="150" />
|
|
|
<el-table-column prop="role" label="角色" width="120" align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <el-tag :type="getRoleTagType(row.role)">{{ getRoleLabel(row.role) }}</el-tag>
|
|
|
+ <el-tag :type="getRoleTagType(row.role)">{{
|
|
|
+ getRoleLabel(row.role)
|
|
|
+ }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="createdAt" label="创建时间" width="180" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="createdAt"
|
|
|
+ label="创建时间"
|
|
|
+ width="180"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
<template #default="{ row }">
|
|
|
{{ formatTime(row.createdAt) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="updatedAt" label="更新时间" width="180" align="center">
|
|
|
+ <el-table-column
|
|
|
+ prop="updatedAt"
|
|
|
+ label="更新时间"
|
|
|
+ width="180"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
<template #default="{ row }">
|
|
|
{{ formatTime(row.updatedAt) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" width="220" align="center" fixed="right">
|
|
|
<template #default="{ row }">
|
|
|
- <el-button type="primary" link :icon="Edit" @click="handleEdit(row)">编辑</el-button>
|
|
|
- <el-button type="warning" link :icon="Key" @click="handleResetPassword(row)">重置密码</el-button>
|
|
|
- <el-button type="danger" link :icon="Delete" @click="handleDelete(row)">删除</el-button>
|
|
|
+ <el-button type="primary" link :icon="Edit" @click="handleEdit(row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ link
|
|
|
+ :icon="Key"
|
|
|
+ @click="handleResetPassword(row)"
|
|
|
+ >重置密码</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ link
|
|
|
+ :icon="Delete"
|
|
|
+ @click="handleDelete(row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -67,16 +108,34 @@
|
|
|
/>
|
|
|
|
|
|
<!-- 新增/编辑弹窗 -->
|
|
|
- <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" destroy-on-close>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="dialogTitle"
|
|
|
+ width="500px"
|
|
|
+ destroy-on-close
|
|
|
+ >
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
|
|
<el-form-item label="用户名" prop="username">
|
|
|
- <el-input v-model="form.username" placeholder="请输入用户名" :disabled="isEdit" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ :disabled="isEdit"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="!isEdit" label="密码" prop="password">
|
|
|
- <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
|
|
|
+ <el-input
|
|
|
+ v-model="form.password"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="角色" prop="role">
|
|
|
- <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
|
|
|
+ <el-select
|
|
|
+ v-model="form.role"
|
|
|
+ placeholder="请选择角色"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<el-option label="管理员" value="admin" />
|
|
|
<el-option label="操作员" value="operator" />
|
|
|
<el-option label="观察者" value="viewer" />
|
|
|
@@ -85,245 +144,303 @@
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
|
|
+ <el-button type="primary" :loading="submitLoading" @click="handleSubmit"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 重置密码弹窗 -->
|
|
|
- <el-dialog v-model="resetDialogVisible" title="重置密码" width="400px" destroy-on-close>
|
|
|
- <el-form ref="resetFormRef" :model="resetForm" :rules="resetRules" label-width="80px">
|
|
|
+ <el-dialog
|
|
|
+ v-model="resetDialogVisible"
|
|
|
+ title="重置密码"
|
|
|
+ width="400px"
|
|
|
+ destroy-on-close
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="resetFormRef"
|
|
|
+ :model="resetForm"
|
|
|
+ :rules="resetRules"
|
|
|
+ label-width="80px"
|
|
|
+ >
|
|
|
<el-form-item label="新密码" prop="password">
|
|
|
- <el-input v-model="resetForm.password" type="password" placeholder="请输入新密码" show-password />
|
|
|
+ <el-input
|
|
|
+ v-model="resetForm.password"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入新密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|
|
- <el-input v-model="resetForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
|
|
|
+ <el-input
|
|
|
+ v-model="resetForm.confirmPassword"
|
|
|
+ type="password"
|
|
|
+ placeholder="请再次输入密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<el-button @click="resetDialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" :loading="resetLoading" @click="handleResetSubmit">确定</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :loading="resetLoading"
|
|
|
+ @click="handleResetSubmit"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, computed, onMounted } from 'vue'
|
|
|
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
|
|
-import { Search, Refresh, Plus, Edit, Delete, Key } from '@element-plus/icons-vue'
|
|
|
-import { listUsers, createUser, updateUser, deleteUser, resetPassword, type User, type UserForm } from '@/api/user'
|
|
|
-
|
|
|
-const loading = ref(false)
|
|
|
-const submitLoading = ref(false)
|
|
|
-const resetLoading = ref(false)
|
|
|
-const userList = ref<User[]>([])
|
|
|
-const total = ref(0)
|
|
|
-const dialogVisible = ref(false)
|
|
|
-const resetDialogVisible = ref(false)
|
|
|
-const formRef = ref<FormInstance>()
|
|
|
-const resetFormRef = ref<FormInstance>()
|
|
|
-const currentUserId = ref('')
|
|
|
+import { ref, reactive, computed, onMounted } from "vue";
|
|
|
+import {
|
|
|
+ ElMessage,
|
|
|
+ ElMessageBox,
|
|
|
+ type FormInstance,
|
|
|
+ type FormRules,
|
|
|
+} from "element-plus";
|
|
|
+import {
|
|
|
+ Search,
|
|
|
+ Refresh,
|
|
|
+ Plus,
|
|
|
+ Edit,
|
|
|
+ Delete,
|
|
|
+ Key,
|
|
|
+} from "@element-plus/icons-vue";
|
|
|
+import {
|
|
|
+ listUsers,
|
|
|
+ createUser,
|
|
|
+ updateUser,
|
|
|
+ deleteUser,
|
|
|
+ resetPassword,
|
|
|
+ type User,
|
|
|
+ type UserForm,
|
|
|
+} from "@/api/user";
|
|
|
+
|
|
|
+const loading = ref(false);
|
|
|
+const submitLoading = ref(false);
|
|
|
+const resetLoading = ref(false);
|
|
|
+const userList = ref<User[]>([]);
|
|
|
+const total = ref(0);
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const resetDialogVisible = ref(false);
|
|
|
+const formRef = ref<FormInstance>();
|
|
|
+const resetFormRef = ref<FormInstance>();
|
|
|
+const currentUserId = ref("");
|
|
|
|
|
|
const queryParams = reactive({
|
|
|
page: 1,
|
|
|
pageSize: 10,
|
|
|
- search: '',
|
|
|
- role: '' as '' | 'admin' | 'operator' | 'viewer'
|
|
|
-})
|
|
|
+ search: "",
|
|
|
+ role: "" as "" | "admin" | "operator" | "viewer",
|
|
|
+});
|
|
|
|
|
|
const form = reactive<UserForm & { id?: string }>({
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- role: 'viewer'
|
|
|
-})
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ role: "viewer",
|
|
|
+});
|
|
|
|
|
|
const resetForm = reactive({
|
|
|
- password: '',
|
|
|
- confirmPassword: ''
|
|
|
-})
|
|
|
+ password: "",
|
|
|
+ confirmPassword: "",
|
|
|
+});
|
|
|
|
|
|
-const isEdit = computed(() => !!form.id)
|
|
|
-const dialogTitle = computed(() => isEdit.value ? '编辑用户' : '新增用户')
|
|
|
+const isEdit = computed(() => !!form.id);
|
|
|
+const dialogTitle = computed(() => (isEdit.value ? "编辑用户" : "新增用户"));
|
|
|
|
|
|
const rules: FormRules = {
|
|
|
username: [
|
|
|
- { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
- { min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入用户名", trigger: "blur" },
|
|
|
+ { min: 3, max: 20, message: "用户名长度为3-20个字符", trigger: "blur" },
|
|
|
],
|
|
|
password: [
|
|
|
- { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
- { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
+ { min: 6, max: 20, message: "密码长度为6-20个字符", trigger: "blur" },
|
|
|
],
|
|
|
- role: [{ required: true, message: '请选择角色', trigger: 'change' }]
|
|
|
-}
|
|
|
-
|
|
|
-const validateConfirmPassword = (_rule: any, value: string, callback: Function) => {
|
|
|
+ role: [{ required: true, message: "请选择角色", trigger: "change" }],
|
|
|
+};
|
|
|
+
|
|
|
+const validateConfirmPassword = (
|
|
|
+ _rule: any,
|
|
|
+ value: string,
|
|
|
+ callback: Function
|
|
|
+) => {
|
|
|
if (value !== resetForm.password) {
|
|
|
- callback(new Error('两次输入的密码不一致'))
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
} else {
|
|
|
- callback()
|
|
|
+ callback();
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const resetRules: FormRules = {
|
|
|
password: [
|
|
|
- { required: true, message: '请输入新密码', trigger: 'blur' },
|
|
|
- { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入新密码", trigger: "blur" },
|
|
|
+ { min: 6, max: 20, message: "密码长度为6-20个字符", trigger: "blur" },
|
|
|
],
|
|
|
confirmPassword: [
|
|
|
- { required: true, message: '请再次输入密码', trigger: 'blur' },
|
|
|
- { validator: validateConfirmPassword, trigger: 'blur' }
|
|
|
- ]
|
|
|
-}
|
|
|
+ { required: true, message: "请再次输入密码", trigger: "blur" },
|
|
|
+ { validator: validateConfirmPassword, trigger: "blur" },
|
|
|
+ ],
|
|
|
+};
|
|
|
|
|
|
function getRoleLabel(role: string) {
|
|
|
const map: Record<string, string> = {
|
|
|
- admin: '管理员',
|
|
|
- operator: '操作员',
|
|
|
- viewer: '观察者'
|
|
|
- }
|
|
|
- return map[role] || role
|
|
|
+ admin: "管理员",
|
|
|
+ operator: "操作员",
|
|
|
+ viewer: "观察者",
|
|
|
+ };
|
|
|
+ return map[role] || role;
|
|
|
}
|
|
|
|
|
|
function getRoleTagType(role: string) {
|
|
|
- const map: Record<string, '' | 'success' | 'warning' | 'info' | 'danger'> = {
|
|
|
- admin: 'danger',
|
|
|
- operator: 'warning',
|
|
|
- viewer: 'info'
|
|
|
- }
|
|
|
- return map[role] || 'info'
|
|
|
+ const map: Record<string, "" | "success" | "warning" | "info" | "danger"> = {
|
|
|
+ admin: "danger",
|
|
|
+ operator: "warning",
|
|
|
+ viewer: "info",
|
|
|
+ };
|
|
|
+ return map[role] || "info";
|
|
|
}
|
|
|
|
|
|
function formatTime(time?: string) {
|
|
|
- if (!time) return '-'
|
|
|
- return new Date(time).toLocaleString('zh-CN')
|
|
|
+ if (!time) return "-";
|
|
|
+ return new Date(time).toLocaleString("zh-CN");
|
|
|
}
|
|
|
|
|
|
async function getList() {
|
|
|
- loading.value = true
|
|
|
+ loading.value = true;
|
|
|
try {
|
|
|
// Filter out empty strings to avoid validation errors
|
|
|
const params: any = {
|
|
|
page: queryParams.page,
|
|
|
- pageSize: queryParams.pageSize
|
|
|
- }
|
|
|
- if (queryParams.search) params.search = queryParams.search
|
|
|
- if (queryParams.role) params.role = queryParams.role
|
|
|
+ pageSize: queryParams.pageSize,
|
|
|
+ };
|
|
|
+ if (queryParams.search) params.search = queryParams.search;
|
|
|
+ if (queryParams.role) params.role = queryParams.role;
|
|
|
|
|
|
- const res = await listUsers(params)
|
|
|
+ const res = await listUsers(params);
|
|
|
if (res.code === 200) {
|
|
|
- userList.value = res.data?.rows || res.rows || []
|
|
|
- total.value = res.data?.total || res.total || 0
|
|
|
+ userList.value = res.data?.rows;
|
|
|
+ total.value = res.data?.total;
|
|
|
}
|
|
|
} finally {
|
|
|
- loading.value = false
|
|
|
+ loading.value = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleQuery() {
|
|
|
- queryParams.page = 1
|
|
|
- getList()
|
|
|
+ queryParams.page = 1;
|
|
|
+ getList();
|
|
|
}
|
|
|
|
|
|
function resetQuery() {
|
|
|
- queryParams.page = 1
|
|
|
- queryParams.search = ''
|
|
|
- queryParams.role = ''
|
|
|
- getList()
|
|
|
+ queryParams.page = 1;
|
|
|
+ queryParams.search = "";
|
|
|
+ queryParams.role = "";
|
|
|
+ getList();
|
|
|
}
|
|
|
|
|
|
function handleAdd() {
|
|
|
Object.assign(form, {
|
|
|
id: undefined,
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- role: 'viewer'
|
|
|
- })
|
|
|
- dialogVisible.value = true
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ role: "viewer",
|
|
|
+ });
|
|
|
+ dialogVisible.value = true;
|
|
|
}
|
|
|
|
|
|
function handleEdit(row: User) {
|
|
|
Object.assign(form, {
|
|
|
id: row.id,
|
|
|
username: row.username,
|
|
|
- password: '',
|
|
|
- role: row.role
|
|
|
- })
|
|
|
- dialogVisible.value = true
|
|
|
+ password: "",
|
|
|
+ role: row.role,
|
|
|
+ });
|
|
|
+ dialogVisible.value = true;
|
|
|
}
|
|
|
|
|
|
function handleResetPassword(row: User) {
|
|
|
- currentUserId.value = row.id
|
|
|
- resetForm.password = ''
|
|
|
- resetForm.confirmPassword = ''
|
|
|
- resetDialogVisible.value = true
|
|
|
+ currentUserId.value = row.id;
|
|
|
+ resetForm.password = "";
|
|
|
+ resetForm.confirmPassword = "";
|
|
|
+ resetDialogVisible.value = true;
|
|
|
}
|
|
|
|
|
|
async function handleDelete(row: User) {
|
|
|
try {
|
|
|
- await ElMessageBox.confirm(`确定要删除用户 "${row.username}" 吗？`, '提示', {
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- const res = await deleteUser(row.id)
|
|
|
+ await ElMessageBox.confirm(
|
|
|
+ `确定要删除用户 "${row.username}" 吗？`,
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ type: "warning",
|
|
|
+ }
|
|
|
+ );
|
|
|
+ const res = await deleteUser(row.id);
|
|
|
if (res.code === 200) {
|
|
|
- ElMessage.success('删除成功')
|
|
|
- getList()
|
|
|
+ ElMessage.success("删除成功");
|
|
|
+ getList();
|
|
|
}
|
|
|
} catch (error) {
|
|
|
- if (error !== 'cancel') {
|
|
|
- console.error('删除失败', error)
|
|
|
+ if (error !== "cancel") {
|
|
|
+ console.error("删除失败", error);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function handleSubmit() {
|
|
|
- if (!formRef.value) return
|
|
|
+ if (!formRef.value) return;
|
|
|
|
|
|
await formRef.value.validate(async (valid) => {
|
|
|
if (valid) {
|
|
|
- submitLoading.value = true
|
|
|
+ submitLoading.value = true;
|
|
|
try {
|
|
|
- let res
|
|
|
+ let res;
|
|
|
if (form.id) {
|
|
|
- const { password, ...updateData } = form
|
|
|
- res = await updateUser(form.id, updateData)
|
|
|
+ const { password, ...updateData } = form;
|
|
|
+ res = await updateUser(form.id, updateData);
|
|
|
} else {
|
|
|
- res = await createUser(form)
|
|
|
+ res = await createUser(form);
|
|
|
}
|
|
|
if (res.code === 200) {
|
|
|
- ElMessage.success(form.id ? '修改成功' : '新增成功')
|
|
|
- dialogVisible.value = false
|
|
|
- getList()
|
|
|
+ ElMessage.success(form.id ? "修改成功" : "新增成功");
|
|
|
+ dialogVisible.value = false;
|
|
|
+ getList();
|
|
|
}
|
|
|
} finally {
|
|
|
- submitLoading.value = false
|
|
|
+ submitLoading.value = false;
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
async function handleResetSubmit() {
|
|
|
- if (!resetFormRef.value) return
|
|
|
+ if (!resetFormRef.value) return;
|
|
|
|
|
|
await resetFormRef.value.validate(async (valid) => {
|
|
|
if (valid) {
|
|
|
- resetLoading.value = true
|
|
|
+ resetLoading.value = true;
|
|
|
try {
|
|
|
- const res = await resetPassword(currentUserId.value, resetForm.password)
|
|
|
+ const res = await resetPassword(
|
|
|
+ currentUserId.value,
|
|
|
+ resetForm.password
|
|
|
+ );
|
|
|
if (res.code === 200) {
|
|
|
- ElMessage.success('密码重置成功')
|
|
|
- resetDialogVisible.value = false
|
|
|
+ ElMessage.success("密码重置成功");
|
|
|
+ resetDialogVisible.value = false;
|
|
|
}
|
|
|
} finally {
|
|
|
- resetLoading.value = false
|
|
|
+ resetLoading.value = false;
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- getList()
|
|
|
-})
|
|
|
+ getList();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
yb