From 186a92e834cfd3fbcb0cc02ad785146730ebc720 Mon Sep 17 00:00:00 2001
From: MeSHard <5373476+meshard@user.noreply.gitee.com>
Date: Thu, 20 Nov 2025 18:08:12 +0800
Subject: [PATCH] 1

---
 src/views/reports/yunying_reports.vue |  37 +-
 src/views/system/admin.vue            | 880 +++++++++++++-------------
 2 files changed, 444 insertions(+), 473 deletions(-)

diff --git a/src/views/reports/yunying_reports.vue b/src/views/reports/yunying_reports.vue
index be3d9bc..f52e53d 100644
--- a/src/views/reports/yunying_reports.vue
+++ b/src/views/reports/yunying_reports.vue
@@ -48,47 +48,43 @@
 				ruleInline: {},
 				columns: [{
 						title: '充电站名称',
-						key: 'id',
+						key: 'charge_station_name',
 					},
 					{
 						title: '桩类型',
-						key: 'out_trade_no',
+						key: 'type',
 					},
 					{
 						title: '桩数量',
-						key: 'openid',
+						key: 'pile_num_2',
 					},
 					{
 						title: '枪数量',
-						key: 'total',
+						key: 'pile_num',
 					},
 					{
-						title: '充电次数',
-						key: 'total_used',
+						title: '充电次数(次)',
+						key: 'order_num',
 					},
 					{
 						title: '充电电量(度)',
-						key: 'trade_state',
+						key: 'power',
 					},
 					{
 						title: '充电金额(元)',
-						key: 'success_time',
+						key: 'money',
 					},
 					{
-						title: '电费',
-						key: 'success_time',
+						title: '电费(元)',
+						key: 'elec',
 					},
 					{
-						title: '服务费',
-						key: 'success_time',
+						title: '服务费(元)',
+						key: 'sevice',
 					},
 					{
-						title: '总时长',
-						key: 'success_time',
-					},
-					{
-						title: '尖峰平谷电量',
-						key: 'success_time',
+						title: '总时长(小时)',
+						key: 'length',
 					},
 					{
 						title: '操作',
@@ -121,9 +117,8 @@
 					page: this.page,
 					pageSize: this.pageSize,
 				}).then((res) => {
-					this.total = res.total
-					this.data = res.data
-					this.page = res.current_page
+					this.total = res.data.total
+					this.data = res.data.data
 				})
 			},
 			handleSubmit(name) {
diff --git a/src/views/system/admin.vue b/src/views/system/admin.vue
index b2ee2da..fb57d86 100644
--- a/src/views/system/admin.vue
+++ b/src/views/system/admin.vue
@@ -1,466 +1,442 @@
 <template>
-    <div class="container">
-        <div class="search-area">
-            <Form ref="searchForm" inline :label-width="100" :model="formInline">
-                <FormItem prop="username" label="用户名：">
-                    <Input
-                        v-model="formInline.username"
-                        clearable
-                        placeholder="请输入用户名"
-                        @on-enter="handleSubmit"
-                    />
-                </FormItem>
-                <FormItem>
-                    <Button type="primary" @click="handleSubmit">搜索</Button>
-                    <Button style="margin-left: 8px" @click="resetSearch">重置</Button>
-                </FormItem>
-            </Form>
-        </div>
-        <div class="action-btn">
-            <Button type="primary" @click="handleAdd">添加用户</Button>
-        </div>
-        <div class="table-container">
-            <Table
-                border
-                stripe
-                :loading="tableLoading"
-                :columns="columns"
-                :height="tableHeight"
-                :data="data"
-            >
-                <template #roles="{ row }">
-                    <span>{{ formatRoleLabel(row.roles) }}</span>
-                </template>
-                <template #action="{ row }">
-                    <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row.id)">编辑</Button>
-                    <Button type="error" size="small" @click="handleRemove(row.id)">删除</Button>
-                </template>
-            </Table>
-            <Page
-                :current="page"
-                :page-size="pageSize"
-                :total="total"
-                show-total
-                show-sizer
-                show-elevator
-                class="page"
-                @on-change="onChangePage"
-                @on-page-size-change="onChangePageSize"
-            />
-        </div>
+	<div class="container">
+		<div class="search-area">
+			<Form ref="searchForm" inline :label-width="100" :model="formInline">
+				<FormItem prop="username" label="用户名：">
+					<Input v-model="formInline.username" clearable placeholder="请输入用户名" @on-enter="handleSubmit" />
+				</FormItem>
+				<FormItem>
+					<Button type="primary" @click="handleSubmit">搜索</Button>
+					<Button style="margin-left: 8px" @click="resetSearch">重置</Button>
+				</FormItem>
+			</Form>
+		</div>
+		<div class="action-btn">
+			<Button type="primary" @click="handleAdd">添加用户</Button>
+		</div>
+		<div class="table-container">
+			<Table border stripe :loading="tableLoading" :columns="columns" :height="tableHeight" :data="data">
+				<template #roles="{ row }">
+					<span>{{ formatRoleLabel(row.roles) }}</span>
+				</template>
+				<template #action="{ row }">
+					<Button type="primary" size="small" style="margin-right: 5px"
+						@click="handleEdit(row.id)">编辑</Button>
+					<Button type="error" size="small" @click="handleRemove(row.id)">删除</Button>
+				</template>
+			</Table>
 
-        <Modal
-            v-model="showModal"
-            :title="modalTitle"
-            :mask-closable="false"
-            @on-cancel="cancel"
-        >
-            <Form ref="formValidate" :model="formValidate" :rules="formRules" :label-width="100">
-                <FormItem label="用户名" prop="username" :required="true">
-                    <Input v-model="formValidate.username" placeholder="请输入用户名" />
-                </FormItem>
-                <FormItem label="姓名" prop="nickname" :required="true">
-                    <Input v-model="formValidate.nickname" placeholder="请输入姓名" />
-                </FormItem>
-                <FormItem label="登录密码" prop="password" :required="!isEdit">
-                    <Input
-                        type="password"
-                        password
-                        v-model="formValidate.password"
-                        :placeholder="isEdit ? '不修改可留空' : '请输入登录密码'"
-                    />
-                </FormItem>
-                <FormItem label="手机号" prop="phone" :required="true">
-                    <Input v-model="formValidate.phone" placeholder="请输入11位手机号" />
-                </FormItem>
-                <FormItem label="邮箱" prop="email">
-                    <Input v-model="formValidate.email" placeholder="选填，需符合邮箱格式" />
-                </FormItem>
-                <FormItem label="角色" prop="roles" :required="true">
-                    <Select v-model="formValidate.roles" placeholder="请选择角色">
-                        <Option v-for="item in roleOptions" :value="item.id" :key="item.id">{{ item.name }}</Option>
-                    </Select>
-                </FormItem>
-            </Form>
-            <div slot="footer">
-                <Button type="text" @click="cancel">取消</Button>
-                <Button type="primary" :loading="submitLoading" @click="ok">确定</Button>
-            </div>
-        </Modal>
-    </div>
+			<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
+				@on-page-size-change="onChangePageSize" />
+		</div>
+
+		<Modal v-model="showModal" :title="modalTitle" :mask-closable="false" @on-cancel="cancel">
+			<Form ref="formValidate" :model="formValidate" :rules="formRules" :label-width="100">
+				<FormItem label="用户名" prop="username" :required="true">
+					<Input v-model="formValidate.username" placeholder="请输入用户名" />
+				</FormItem>
+				<FormItem label="姓名" prop="nickname" :required="true">
+					<Input v-model="formValidate.nickname" placeholder="请输入姓名" />
+				</FormItem>
+				<FormItem label="登录密码" prop="password" :required="!isEdit">
+					<Input type="password" password v-model="formValidate.password"
+						:placeholder="isEdit ? '不修改可留空' : '请输入登录密码'" />
+				</FormItem>
+				<FormItem label="手机号" prop="phone" :required="true">
+					<Input v-model="formValidate.phone" placeholder="请输入11位手机号" />
+				</FormItem>
+				<FormItem label="邮箱" prop="email">
+					<Input v-model="formValidate.email" placeholder="选填，需符合邮箱格式" />
+				</FormItem>
+				<FormItem label="角色" prop="roles" :required="true">
+					<Select v-model="formValidate.roles" placeholder="请选择角色">
+						<Option v-for="item in roleOptions" :value="item.id" :key="item.id">{{ item.name }}</Option>
+					</Select>
+				</FormItem>
+			</Form>
+			<div slot="footer">
+				<Button type="text" @click="cancel">取消</Button>
+				<Button type="primary" :loading="submitLoading" @click="ok">确定</Button>
+			</div>
+		</Modal>
+	</div>
 </template>
 
 <script>
-import {
-    getAdminList,
-    addAdmin,
-    getAdmin,
-    getAdminUpdate,
-    getAdminDelete,
-    getRoleList,
-} from '@/api'
+	import {
+		getAdminList,
+		addAdmin,
+		getAdmin,
+		getAdminUpdate,
+		getAdminDelete,
+		getRoleList,
+	} from '@/api'
 
-const createDefaultForm = () => ({
-    id: '',
-    username: '',
-    nickname: '',
-    password: '',
-    email: '',
-    phone: '',
-    roles: '',
-})
+	const createDefaultForm = () => ({
+		id: '',
+		username: '',
+		nickname: '',
+		password: '',
+		email: '',
+		phone: '',
+		roles: '',
+	})
 
-export default {
-    name: 'system_admin',
-    data() {
-        return {
-            showModal: false,
-            tableHeight: 500,
-            tableLoading: false,
-            submitLoading: false,
-            page: 1,
-            pageSize: 10,
-            total: 0,
-            formInline: {
-                username: '',
-            },
-            // 表格列的结构描述，保持字段展示的一致性
-            columns: [
-                {
-                    title: 'ID',
-                    key: 'id',
-                    minWidth: 80,
-                },
-                {
-                    title: '用户名',
-                    key: 'username',
-                    minWidth: 140,
-                },
-                {
-                    title: '姓名',
-                    key: 'nickname',
-                    minWidth: 120,
-                },
-                {
-                    title: '手机号',
-                    key: 'phone',
-                    minWidth: 140,
-                },
-                {
-                    title: '邮箱',
-                    key: 'email',
-                    minWidth: 180,
-                },
-                {
-                    title: '角色',
-                    slot: 'roles',
-                    minWidth: 120,
-                },
-                {
-                    title: '操作',
-                    slot: 'action',
-                    width: 150,
-                    align: 'center',
-                },
-            ],
-            data: [], // 系统用户表格数据
-            roleOptions: [], // 角色下拉选项
-            formValidate: createDefaultForm(), // 弹窗表单数据
-        }
-    },
-    computed: {
-        isEdit() {
-            return Boolean(this.formValidate.id)
-        },
-        modalTitle() {
-            return this.isEdit ? '编辑系统用户' : '新增系统用户'
-        },
-        formRules() {
-            return {
-                username: [
-                    { required: true, message: '请输入用户名', trigger: 'blur' },
-                ],
-                nickname: [
-                    { required: true, message: '请输入姓名', trigger: 'blur' },
-                ],
-                password: [
-                    { validator: this.validatePassword, trigger: 'blur' },
-                ],
-                phone: [
-                    { validator: this.validatePhone, trigger: 'blur' },
-                ],
-                email: [
-                    { validator: this.validateEmail, trigger: 'blur' },
-                ],
-                roles: [
-                    { validator: this.validateRoles, trigger: 'change' },
-                ],
-            }
-        },
-    },
-    mounted() {
-        this.getList()
-        this.fetchRoles()
-        this.calculateTableHeight()
-        window.addEventListener('resize', this.calculateTableHeight)
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.calculateTableHeight)
-    },
-    methods: {
-        // 统一创建弹窗表单的初始值，方便新增/编辑时复用
-        getDefaultForm() {
-            return createDefaultForm()
-        },
-        calculateTableHeight() {
-            // 根据浏览器高度动态计算表格剩余空间，保证页面结构自适应
-            const searchArea = document.querySelector('.search-area')
-            const actionArea = document.querySelector('.action-btn')
-            const searchHeight = searchArea ? searchArea.offsetHeight : 0
-            const actionHeight = actionArea ? actionArea.offsetHeight : 0
-            const pageHeight = 70
-            const basePadding = 80
-            const height = window.innerHeight - searchHeight - actionHeight - pageHeight - basePadding
-            this.tableHeight = height > 320 ? height : 320
-        },
-        async fetchRoles() {
-            // 角色列表仅需偶尔变动，进入页面时加载一次即可
-            try {
-                const res = await getRoleList()
-                const list = res.data || res
-                this.roleOptions = Array.isArray(list) ? list : []
-            } catch (error) {
-                this.roleOptions = []
-            }
-        },
-        async getList() {
-            // 列表查询会根据分页与搜索条件拼接参数，接口结果兼容 data/list 两种结构
-            this.tableLoading = true
-            try {
-                const res = await getAdminList({
-                    page: this.page,
-                    pageSize: this.pageSize,
-                    ...this.formInline,
-                })
-                const responseData = res.data || {}
-                const list = responseData.data || responseData.list || []
-                this.data = Array.isArray(list) ? list : []
-                this.total = typeof responseData.total === 'number' ? responseData.total : (res.total || 0)
-            } finally {
-                this.tableLoading = false
-            }
-        },
-        handleSubmit() {
-            this.page = 1
-            this.getList()
-        },
-        resetSearch() {
-            this.formInline.username = ''
-            this.handleSubmit()
-        },
-        handleAdd() {
-            this.formValidate = this.getDefaultForm()
-            this.showModal = true
-        },
-        async handleEdit(id) {
-            // 编辑前需要获取详情，避免列表中数据字段不完整
-            try {
-                const res = await getAdmin({ id })
-                const detail = res.data || {}
-                this.formValidate = {
-                    id: detail.id,
-                    username: detail.username || '',
-                    nickname: detail.nickname || '',
-                    password: detail.password || '',
-                    email: detail.email || '',
-                    phone: detail.phone || '',
-                    roles: detail.roles === 0 || detail.roles ? Number(detail.roles) : '',
-                }
-                this.showModal = true
-            } catch (error) {
-                this.$Message.error('获取用户信息失败')
-            }
-        },
-        async handleRemove(id) {
-            // 删除需二次确认，避免误操作
-            const confirm = await new Promise(resolve => {
-                this.$Modal.confirm({
-                    title: '删除确认',
-                    content: '删除后不可恢复，是否继续？',
-                    onOk: () => resolve(true),
-                    onCancel: () => resolve(false),
-                })
-            })
-            if (!confirm) {
-                return
-            }
-            try {
-                await getAdminDelete({ id })
-                this.$Message.success('删除成功')
-                if (this.data.length === 1 && this.page > 1) {
-                    this.page -= 1
-                }
-                this.getList()
-            } catch (error) {
-                this.$Message.error('删除失败，请稍后重试')
-            }
-        },
-        validatePhone(rule, value, callback) {
-            // 手机号验证：要求以 1 开头且总长 11 位，避免明显输入错误
-            const phonePattern = /^1[3-9]\d{9}$/
-            if (!value) {
-                callback(new Error('请输入手机号'))
-                return
-            }
-            if (!phonePattern.test(value)) {
-                callback(new Error('手机号格式不正确'))
-                return
-            }
-            callback()
-        },
-        validateEmail(rule, value, callback) {
-            // 邮箱验证：允许省略，填写时需符合基础格式，连字符放在末尾避免正则范围冲突
-            if (!value) {
-                callback()
-                return
-            }
-            const emailPattern = /^[\w.-]+@[\w-]+(\.[\w-]+)+$/
-            if (!emailPattern.test(value)) {
-                callback(new Error('邮箱格式不正确'))
-                return
-            }
-            callback()
-        },
-        validatePassword(rule, value, callback) {
-            // 密码验证：编辑时可留空，新建或主动修改时必须至少 6 位
-            if (this.isEdit && !value) {
-                callback()
-                return
-            }
-            if (!value) {
-                callback(new Error('请输入登录密码'))
-                return
-            }
-            if (value.length < 6) {
-                callback(new Error('密码至少6位'))
-                return
-            }
-            callback()
-        },
-        validateRoles(rule, value, callback) {
-            // 角色校验：接口允许 0 作为合法角色 ID，因此判空时需单独处理
-            if (value === 0 || value === '0') {
-                callback()
-                return
-            }
-            if (!value) {
-                callback(new Error('请选择角色'))
-                return
-            }
-            callback()
-        },
-        formatRoleLabel(value) {
-            // 将角色 ID 转为人类可读名称，兼容数组或单个值
-            if (Array.isArray(value)) {
-                return value.map(item => this.formatRoleLabel(item)).join('、')
-            }
-            const target = this.roleOptions.find(item => String(item.id) === String(value))
-            return target ? target.name : value || '--'
-        },
-        async ok() {
-            const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
-            if (!valid) {
-                this.$Message.error('请正确填写表单')
-                return
-            }
-            const payload = {
-                ...this.formValidate,
-            }
-            if (this.isEdit) {
-                if (!payload.password) {
-                    delete payload.password
-                }
-            } else {
-                delete payload.id
-            }
-            this.submitLoading = true
-            try {
-                if (this.isEdit) {
-                    await getAdminUpdate(payload)
-                    this.$Message.success('更新成功')
-                } else {
-                    await addAdmin(payload)
-                    this.$Message.success('新增成功')
-                }
-                this.cancel()
-                this.getList()
-            } finally {
-                this.submitLoading = false
-            }
-        },
-        cancel() {
-            this.showModal = false
-            this.formValidate = this.getDefaultForm()
-            this.$nextTick(() => {
-                if (this.$refs.formValidate) {
-                    this.$refs.formValidate.resetFields()
-                }
-            })
-        },
-        onChangePage(page) {
-            if (this.page !== page) {
-                this.page = page
-                this.getList()
-            }
-        },
-        onChangePageSize(size) {
-            if (this.pageSize !== size) {
-                this.page = 1
-                this.pageSize = size
-                this.getList()
-            }
-        },
-    },
-}
+	export default {
+		name: 'system_admin',
+		data() {
+			return {
+				showModal: false,
+				tableHeight: 500,
+				tableLoading: false,
+				submitLoading: false,
+				page: 1,
+				pageSize: 10,
+				total: 0,
+				formInline: {
+					username: '',
+				},
+				// 表格列的结构描述，保持字段展示的一致性
+				columns: [{
+						title: 'ID',
+						key: 'id',
+						minWidth: 80,
+					},
+					{
+						title: '用户名',
+						key: 'username',
+						minWidth: 140,
+					},
+					{
+						title: '姓名',
+						key: 'nickname',
+						minWidth: 120,
+					},
+					{
+						title: '手机号',
+						key: 'phone',
+						minWidth: 140,
+					},
+					{
+						title: '邮箱',
+						key: 'email',
+						minWidth: 180,
+					},
+					{
+						title: '角色',
+						slot: 'roles',
+						minWidth: 120,
+					},
+					{
+						title: '操作',
+						slot: 'action',
+						width: 150,
+						align: 'center',
+					},
+				],
+				data: [], // 系统用户表格数据
+				roleOptions: [], // 角色下拉选项
+				formValidate: createDefaultForm(), // 弹窗表单数据
+			}
+		},
+		computed: {
+			isEdit() {
+				return Boolean(this.formValidate.id)
+			},
+			modalTitle() {
+				return this.isEdit ? '编辑系统用户' : '新增系统用户'
+			},
+			formRules() {
+				return {
+					username: [{
+						required: true,
+						message: '请输入用户名',
+						trigger: 'blur',
+					}],
+					nickname: [{
+						required: true,
+						message: '请输入姓名',
+						trigger: 'blur',
+					}],
+					password: [{
+						validator: this.validatePassword,
+						trigger: 'blur',
+					}],
+					phone: [{
+						validator: this.validatePhone,
+						trigger: 'blur',
+					}],
+					email: [{
+						validator: this.validateEmail,
+						trigger: 'blur',
+					}],
+					roles: [{
+						validator: this.validateRoles,
+						trigger: 'change',
+					}],
+				}
+			},
+		},
+		mounted() {
+			this.getList()
+			this.fetchRoles()
+			this.calculateTableHeight()
+			window.addEventListener('resize', this.calculateTableHeight)
+		},
+		beforeDestroy() {
+			window.removeEventListener('resize', this.calculateTableHeight)
+		},
+		methods: {
+			// 统一创建弹窗表单的初始值，方便新增/编辑时复用
+			getDefaultForm() {
+				return createDefaultForm()
+			},
+			calculateTableHeight() {
+				const searchHeight = document.querySelector('.search-area').offsetHeight
+				const pageHeight = 32 // 分页组件大约高度
+				const margins = 40 // 上下边距总和
+				this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 230
+				console.log(this.tableHeight)
+			},
+			async fetchRoles() {
+				// 角色列表仅需偶尔变动，进入页面时加载一次即可
+				try {
+					const res = await getRoleList()
+					const list = res.data || res
+					this.roleOptions = Array.isArray(list) ? list : []
+				} catch (error) {
+					this.roleOptions = []
+				}
+			},
+			async getList() {
+				this.tableLoading = true
+				try {
+					const res = await getAdminList({
+						page: this.page,
+						pageSize: this.pageSize,
+						...this.formInline,
+					})
+					this.data = res.data.data
+					this.total = res.data.total
+				} finally {
+					this.tableLoading = false
+				}
+			},
+			handleSubmit() {
+				this.page = 1
+				this.getList()
+			},
+			resetSearch() {
+				this.formInline.username = ''
+				this.handleSubmit()
+			},
+			handleAdd() {
+				this.formValidate = this.getDefaultForm()
+				this.showModal = true
+			},
+			async handleEdit(id) {
+				// 编辑前需要获取详情，避免列表中数据字段不完整
+				try {
+					const res = await getAdmin({
+						id,
+					})
+					const detail = res.data || {}
+					this.formValidate = {
+						id: detail.id,
+						username: detail.username || '',
+						nickname: detail.nickname || '',
+						password: detail.password || '',
+						email: detail.email || '',
+						phone: detail.phone || '',
+						roles: detail.roles === 0 || detail.roles ? Number(detail.roles) : '',
+					}
+					this.showModal = true
+				} catch (error) {
+					this.$Message.error('获取用户信息失败')
+				}
+			},
+			async handleRemove(id) {
+				// 删除需二次确认，避免误操作
+				const confirm = await new Promise(resolve => {
+					this.$Modal.confirm({
+						title: '删除确认',
+						content: '删除后不可恢复，是否继续？',
+						onOk: () => resolve(true),
+						onCancel: () => resolve(false),
+					})
+				})
+				if (!confirm) {
+					return
+				}
+				try {
+					await getAdminDelete({
+						id,
+					})
+					this.$Message.success('删除成功')
+					if (this.data.length === 1 && this.page > 1) {
+						this.page -= 1
+					}
+					this.getList()
+				} catch (error) {
+					this.$Message.error('删除失败，请稍后重试')
+				}
+			},
+			validatePhone(rule, value, callback) {
+				// 手机号验证：要求以 1 开头且总长 11 位，避免明显输入错误
+				const phonePattern = /^1[3-9]\d{9}$/
+				if (!value) {
+					callback(new Error('请输入手机号'))
+					return
+				}
+				if (!phonePattern.test(value)) {
+					callback(new Error('手机号格式不正确'))
+					return
+				}
+				callback()
+			},
+			validateEmail(rule, value, callback) {
+				// 邮箱验证：允许省略，填写时需符合基础格式，连字符放在末尾避免正则范围冲突
+				if (!value) {
+					callback()
+					return
+				}
+				const emailPattern = /^[\w.-]+@[\w-]+(\.[\w-]+)+$/
+				if (!emailPattern.test(value)) {
+					callback(new Error('邮箱格式不正确'))
+					return
+				}
+				callback()
+			},
+			validatePassword(rule, value, callback) {
+				// 密码验证：编辑时可留空，新建或主动修改时必须至少 6 位
+				if (this.isEdit && !value) {
+					callback()
+					return
+				}
+				if (!value) {
+					callback(new Error('请输入登录密码'))
+					return
+				}
+				if (value.length < 6) {
+					callback(new Error('密码至少6位'))
+					return
+				}
+				callback()
+			},
+			validateRoles(rule, value, callback) {
+				// 角色校验：接口允许 0 作为合法角色 ID，因此判空时需单独处理
+				if (value === 0 || value === '0') {
+					callback()
+					return
+				}
+				if (!value) {
+					callback(new Error('请选择角色'))
+					return
+				}
+				callback()
+			},
+			formatRoleLabel(value) {
+				// 将角色 ID 转为人类可读名称，兼容数组或单个值
+				if (Array.isArray(value)) {
+					return value.map(item => this.formatRoleLabel(item)).join('、')
+				}
+				const target = this.roleOptions.find(item => String(item.id) === String(value))
+				return target ? target.name : value || '--'
+			},
+			async ok() {
+				const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
+				if (!valid) {
+					this.$Message.error('请正确填写表单')
+					return
+				}
+				const payload = {
+					...this.formValidate,
+				}
+				if (this.isEdit) {
+					if (!payload.password) {
+						delete payload.password
+					}
+				} else {
+					delete payload.id
+				}
+				this.submitLoading = true
+				try {
+					if (this.isEdit) {
+						await getAdminUpdate(payload)
+						this.$Message.success('更新成功')
+					} else {
+						await addAdmin(payload)
+						this.$Message.success('新增成功')
+					}
+					this.cancel()
+					this.getList()
+				} finally {
+					this.submitLoading = false
+				}
+			},
+			cancel() {
+				this.showModal = false
+				this.formValidate = this.getDefaultForm()
+				this.$nextTick(() => {
+					if (this.$refs.formValidate) {
+						this.$refs.formValidate.resetFields()
+					}
+				})
+			},
+			onChangePage(page) {
+				if (this.page !== page) {
+					this.page = page
+					this.getList()
+				}
+			},
+			onChangePageSize(size) {
+				if (this.pageSize !== size) {
+					this.page = 1
+					this.pageSize = size
+					this.getList()
+				}
+			},
+		},
+	}
 </script>
 <style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    padding: 20px;
-    box-sizing: border-box;
-}
+	.container {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		padding: 20px;
+		box-sizing: border-box;
+	}
 
-.action-btn {
-    margin: 20px 0;
-    background-color: white;
-    padding: 20px;
-    border: 1px solid #F3F7FD;
-    border-radius: 15px;
-    display: flex;
-    align-items: center;
-}
+	.action-btn {
+		margin: 20px 0;
+		background-color: white;
+		padding: 20px;
+		border: 1px solid #F3F7FD;
+		border-radius: 15px;
+		display: flex;
+		align-items: center;
+	}
 
-.action-btn button {
-    margin-right: 20px;
-}
+	.action-btn button {
+		margin-right: 20px;
+	}
 
-.table-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
+	.table-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
 
-.page {
-    margin-top: 10px;
-    text-align: right;
-}
+	.page {
+		margin-top: 10px;
+		text-align: right;
+	}
 
-.search-area {
-    background-color: white;
-    padding: 20px;
-    border: 1px solid #F3F7FD;
-    border-radius: 15px;
-}
-</style>
+	.search-area {
+		background-color: white;
+		padding: 20px;
+		border: 1px solid #F3F7FD;
+		border-radius: 15px;
+	}
+</style>
\ No newline at end of file