ClientApps/CN_Tool_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(testReport): 重构台账导入功能为校验模式，优化布局。

Browse Source 
feat(user): 增加用户签名管理功能。
This commit is contained in:
dk
2026-07-13 22:04:10 +08:00
parent 55fd3df55d
commit 08fd57ada1
10 changed files with 455 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/api/aireport/testReport/index.ts
View File

@@ -36,8 +36,8 @@ export const downloadReportTaskLedgerTemplateApi = (): Promise<AxiosResponse<Blo
responseType: 'blob'
}) as unknown as Promise<AxiosResponse<Blob>>
export const importReportTaskLedgerApi = (id: string, formData: FormData) => {
return http.post<ReportTask.ReportTaskLedgerImportResult>(`${REPORT_TASK_BASE_URL}/${id}/ledger/import`, formData, {
export const validateReportTaskLedgerApi = (id: string, formData: FormData) => {
return http.post<ReportTask.ReportTaskLedgerImportResult>(`${REPORT_TASK_BASE_URL}/${id}/ledger/validate`, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
}

3
frontend/src/api/aireport/testReport/interface/index.ts
View File

@@ -54,6 +54,7 @@ export namespace ReportTask {
contractNumber: string
standard: string[]
data: string
batchId?: string
phonenumber?: string
}
@@ -95,6 +96,7 @@ export namespace ReportTask {
}
export interface ReportTaskLedgerImportResult {
batchId?: string | null
currentStage?: ReportTaskLedgerImportStage | string | null
success?: boolean | null
summaryFileName?: string | null
@@ -150,6 +152,7 @@ export namespace ReportTask {
export interface ReportTaskLedgerPreparedState {
draftId: string
batchId: string
latestImportResult: ReportTaskLedgerImportResult | null
snapshot: ReportTaskLedgerImportSnapshot | null
hasImported: boolean

73
frontend/src/api/user/interface/user.ts
View File

@@ -20,60 +20,67 @@ export namespace Login {
}
}
// 用户管理模块
export namespace User {
/**
* 用户数据表格分页查询参数
*/
export interface ReqUserParams extends ReqPage {
id: string; // 装置序号用户ID 必填
name?: string; //用户名(别名)
loginTime?: string;//最后一次登录时间
id: string // 装置序号用户ID 必填
name?: string //用户名(别名)
loginTime?: string //最后一次登录时间
}
// 用户接口
export interface ResUser {
id: string; //用户ID，作为唯一标识
name: string; //用户名(别名)
loginName: string;//登录名
deptId?: number;//部门ID
password: string; //密码
phone?: string; //手机号
email?: string; //邮箱
loginTime?: string;//最后一次登录时间
loginErrorTimes: number;//登录错误次数
lockTime?: string; //用户密码错误锁定时间
state:number;//0-删除;1-正常;2-锁定;3-待审核;4-休眠;5-密码过期
createBy?: string;//创建用户
createTime?: string;//创建时间
updateBy?: string;//更新用户
updateTime?: string;//更新时间
roleIds?: string[]; //
roleNames?:string[]; //
roleCodes?:string[]; //
disabled?: boolean;
id: string //用户ID，作为唯一标识
name: string //用户名(别名)
loginName: string //登录名
deptId?: number //部门ID
password: string //密码
phone?: string //手机号
email?: string //邮箱
loginTime?: string //最后一次登录时间
loginErrorTimes: number //登录错误次数
lockTime?: string //用户密码错误锁定时间
state: number //0-删除;1-正常;2-锁定;3-待审核;4-休眠;5-密码过期
createBy?: string //创建用户
createTime?: string //创建时间
updateBy?: string //更新用户
updateTime?: string //更新时间
roleIds?: string[]
roleNames?: string[]
roleCodes?: string[]
signatureFileId?: string
signatureFileName?: string
disabled?: boolean
}
export interface UserSaveRequest {
id?: string
name: string
loginName?: string
password?: string
deptId?: string | number
phone?: string
email?: string
roleIds?: string[]
}
// 用户接口
export interface ResPassWordUser {
id: string; //用户ID，作为唯一标识
oldPassword: string; //密码
newPassword: string; //新密码
surePassword:string;
id: string //用户ID，作为唯一标识
oldPassword: string //密码
newPassword: string //新密码
surePassword: string
}
/**
* 用户表格查询分页返回的对象；
*/
export interface ResUserPage extends ResPage<ResUser> {
}
export interface ResUserPage extends ResPage<ResUser> {}
// // 用户+分页
// export interface ReqUserParams extends ReqPage,UserBO {
// }
}

36
frontend/src/api/user/user/index.ts
View File

@@ -1,6 +1,20 @@
import type { AxiosResponse } from 'axios'
import http from '@/api'
import type { Role } from '@/api/user/interface/role'
import type { User } from '@/api/user/interface/user'
import http from '@/api'
const buildUserFormData = (request: User.UserSaveRequest, signatureFile?: File | null) => {
const formData = new FormData()
// 关键业务节点：新增和编辑用户都按 request JSON Part + signatureFile 文件分段提交，字段名必须与后端 @RequestPart 保持一致。
formData.append('request', new Blob([JSON.stringify(request)], { type: 'application/json' }))
if (signatureFile) {
formData.append('signatureFile', signatureFile)
}
return formData
}
/**
* @name 用户管理模块
@@ -10,15 +24,18 @@ export const getUserList = (params: User.ReqUserParams) => {
return http.post(`/sysUser/list`, params)
}
// 新增用户
export const addUser = (params: User.ResUser) => {
return http.post(`/sysUser/add`, params)
export const addUser = (request: User.UserSaveRequest, signatureFile?: File | null) => {
return http.post(`/sysUser/add`, buildUserFormData(request, signatureFile), {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
// 编辑用户
export const updateUser = (params: User.ResUser) => {
return http.post(`/sysUser/update`, params)
export const updateUser = (request: User.UserSaveRequest, signatureFile?: File | null) => {
return http.post(`/sysUser/update`, buildUserFormData(request, signatureFile), {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
// 删除用户
@@ -26,7 +43,6 @@ export const deleteUser = (params: string[] ) => {
return http.post(`/sysUser/delete`, params)
}
// 获取角色列表
export const getRoleList = () => {
return http.get<Role.RoleBO>(`/sysRole/simpleList`)
@@ -41,3 +57,9 @@ export const updatePassWord = (params: User.ResPassWordUser) => {
export const getAllUser = () => {
return http.get(`/sysUser/getAll`)
}
export const previewUserSignature = (id: string): Promise<AxiosResponse<Blob>> => {
return http.get(`/sysUser/${id}/signature`, undefined, { responseType: 'blob' }) as unknown as Promise<
AxiosResponse<Blob>
>
}

38
frontend/src/views/aireport/testReport/components/ReportTaskFormDialog.vue
View File

@@ -120,7 +120,7 @@
<div class="summary-item">
<span class="summary-label">导入状态</span>
<el-tag :type="canSubmit ? 'success' : 'warning'">
{{ canSubmit ? '已准备提交' : '待完成台账导入' }}
{{ canSubmit ? '已准备提交' : '待完成台账校验' }}
</el-tag>
</div>
<div class="summary-item">
@@ -144,7 +144,7 @@
<el-result
icon="success"
:title="mode === 'create' ? '报告任务新增完成' : '报告任务编辑完成'"
sub-title="台账导入与基础信息保存均已完成，本次结果已同步刷新到列表。"
sub-title="台账校验与基础信息保存均已完成，本次结果已同步刷新到列表。"
/>
<el-descriptions :column="2" border>
@@ -232,7 +232,7 @@ const REPORT_TASK_FORM_STEPS: Array<{
index: 1,
value: 'import',
title: '数据导入',
description: '先完成台账与附件导入'
description: '先完成台账与附件校验'
},
{
index: 2,
@@ -272,6 +272,7 @@ const logPanelExpanded = ref(true)
const logEntries = ref<Array<{ id: string; type: ReportTaskLogType; time: string; message: string }>>([])
const ledgerPreparedState = ref<ReportTask.ReportTaskLedgerPreparedState>({
draftId: '',
batchId: '',
latestImportResult: null,
snapshot: null,
hasImported: false,
@@ -395,6 +396,7 @@ const resetForm = () => {
logEntries.value = []
ledgerPreparedState.value = {
draftId: '',
batchId: '',
latestImportResult: null,
snapshot: null,
hasImported: false,
@@ -418,7 +420,7 @@ const applyInitialStep = (hasPreparedLedger: boolean) => {
}
currentStep.value = 'import'
pushLog('info', '已进入数据导入步骤，请先完成台账导入')
pushLog('info', '已进入数据导入步骤，请先完成台账校验')
}
const fillForm = async () => {
@@ -439,6 +441,7 @@ const fillForm = async () => {
activeDraftId.value = buildDraftId()
ledgerPreparedState.value = {
draftId: activeDraftId.value,
batchId: '',
latestImportResult: null,
snapshot,
hasImported: Boolean(snapshot || Number(record?.pointCount) > 0),
@@ -458,7 +461,7 @@ const fillForm = async () => {
const goToFormStep = () => {
if (!canSubmit.value) {
pushLog('warning', '当前导入尚未完成，不能进入基础信息填写步骤')
pushLog('warning', '当前校验尚未完成，不能进入基础信息填写步骤')
return
}
@@ -468,7 +471,7 @@ const goToFormStep = () => {
const goToImportStep = () => {
currentStep.value = 'import'
pushLog('info', '已返回数据导入步骤，可继续沿用当前结果或重新导入台账')
pushLog('info', '已返回数据导入步骤，可继续沿用当前结果或重新校验台账')
}
const handleLedgerPreparedChange = (value: ReportTask.ReportTaskLedgerPreparedState) => {
@@ -482,7 +485,7 @@ const handleLedgerPreparedChange = (value: ReportTask.ReportTaskLedgerPreparedSt
if (!wasPrepared && checkReportTaskLedgerPrepared(nextState) && currentStep.value === 'import') {
currentStep.value = 'form'
pushLog('success', '台账导入已完成，已自动进入基础信息填写步骤')
pushLog('success', '台账校验已完成，已自动进入基础信息填写步骤')
}
}
@@ -539,14 +542,13 @@ const submitForm = async () => {
}
if (!checkReportTaskLedgerPrepared(ledgerPreparedState.value)) {
const message = '请先完成台账导入后再提交基础信息'
const message = '请先完成台账校验后再提交基础信息'
ElMessage.warning(message)
pushLog('warning', message)
return
}
// 关键业务节点：当前弹窗只接受已完成 ledger/import 的任务，再执行最终 add/update 保存基础信息。
pushLog('info', props.mode === 'create' ? '开始提交新增任务基础信息' : '开始提交编辑后的任务基础信息')
pushLog('info', props.mode === 'create' ? '开始提交新增任务基础信息并写入台账数据' : '开始提交编辑后的任务基础信息并更新台账数据')
emit('submit', {
id: activeDraftId.value || formModel.id || undefined,
no: formModel.no.trim(),
@@ -556,6 +558,7 @@ const submitForm = async () => {
contractNumber: formModel.contractNumber.trim(),
standard: stringifyReportTaskStandardIds(formModel.standardIds),
data: formModel.data.trim(),
batchId: ledgerPreparedState.value.batchId || undefined,
phonenumber: formModel.phonenumber.trim() || undefined
})
}
@@ -563,12 +566,10 @@ const submitForm = async () => {
<style scoped lang="scss">
.report-task-form-dialog {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
padding-bottom: 24px;
}
.flow-nav {
@@ -739,16 +740,11 @@ const submitForm = async () => {
}
.log-panel {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
z-index: 3;
border: 1px solid var(--el-border-color-light);
border-radius: 12px;
background: var(--el-fill-color-blank);
overflow: hidden;
box-shadow: 0 12px 28px rgba(47, 79, 183, 0.12);
flex: 0 0 auto;
}
.log-panel-header {
@@ -782,6 +778,8 @@ const submitForm = async () => {
font-size: 15px;
font-weight: 600;
color: #2f4fb7;
text-align: center;
padding-right: 20px;
}
.log-panel-body {
@@ -844,10 +842,6 @@ const submitForm = async () => {
padding: 18px 0;
}
:deep(.report-task-form .el-form-item) {
margin-bottom: 18px;
}
:deep(.report-task-flow-dialog .el-dialog__body) {
overflow: hidden;
}

36
frontend/src/views/aireport/testReport/components/ReportTaskLedgerImportPanel.vue
View File

@@ -7,7 +7,7 @@
<el-alert
v-if="preparedState.pendingReimport"
title="已重新选择文件，当前导入结果已失效，请重新执行台账导入。"
title="已重新选择文件，当前校验结果已失效，请重新执行台账校验。"
type="warning"
:closable="false"
show-icon
@@ -31,7 +31,7 @@
</el-upload>
<el-button type="primary" :icon="UploadFilled" :loading="importing" :disabled="disabled" @click="handleImportFiles">
执行导入
执行校验
</el-button>
</div>
@@ -126,7 +126,7 @@
<div v-if="snapshot" class="panel-block">
<div class="section-header">
<div class="section-title">已保存快照</div>
<div class="section-desc">编辑场景下展示当前任务最近一次已保存的台账导入摘要。</div>
<div class="section-desc">编辑场景下展示当前任务最近一次已保存的台账处理摘要。</div>
</div>
<el-descriptions :column="2" border>
@@ -151,7 +151,7 @@
import { Download, FolderOpened, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, type UploadFile, type UploadFiles } from 'element-plus'
import { computed, ref, watch } from 'vue'
import { downloadReportTaskLedgerTemplateApi, importReportTaskLedgerApi } from '@/api/aireport/testReport'
import { downloadReportTaskLedgerTemplateApi, validateReportTaskLedgerApi } from '@/api/aireport/testReport'
import type { ReportTask } from '@/api/aireport/testReport/interface'
import { useDownloadWithServerFileName } from '@/hooks/useDownload'
import {
@@ -241,9 +241,10 @@ const handleFileChange = (_file: UploadFile, files: UploadFiles) => {
if (props.preparedState.hasImported) {
updatePreparedState({
batchId: '',
pendingReimport: true
})
pushLog('warning', '已更换导入文件，需重新执行台账导入后才能继续保存')
pushLog('warning', '已更换导入文件，需重新执行台账校验后才能继续保存')
}
}
@@ -253,6 +254,7 @@ const handleFileRemove = (_file: UploadFile, files: UploadFiles) => {
if (props.preparedState.hasImported) {
updatePreparedState({
batchId: '',
pendingReimport: true
})
pushLog('warning', '导入文件已发生变化，之前的导入结果已标记为失效')
@@ -265,6 +267,7 @@ const removeSelectedFile = (index: number) => {
if (props.preparedState.hasImported) {
updatePreparedState({
batchId: '',
pendingReimport: true
})
pushLog('warning', '导入文件已发生变化，之前的导入结果已标记为失效')
@@ -286,14 +289,14 @@ const handleImportFiles = async () => {
if (importing.value) return
if (!props.draftId) {
const message = '报告任务 ID 缺失，无法执行台账导入'
const message = '报告任务 ID 缺失，无法执行台账校验'
ElMessage.error(message)
pushLog('error', message)
return
}
if (!selectedFiles.value.length) {
const message = '请先选择待导入的台账汇总与附件文件'
const message = '请先选择待校验的台账汇总与附件文件'
ElMessage.warning(message)
pushLog('warning', message)
return
@@ -322,15 +325,15 @@ const handleImportFiles = async () => {
}
importing.value = true
pushLog('info', `开始执行台账导入，本次共上传 ${selectedFiles.value.length} 个文件`)
pushLog('info', `开始校验台账和附件文件，本次共上传 ${selectedFiles.value.length} 个文件`)
try {
// 关键业务节点：创建和编辑都统一使用 ledger/import，只有台账导入成功后才允许继续执行 add/update。
const response = await importReportTaskLedgerApi(props.draftId, formData)
const response = await validateReportTaskLedgerApi(props.draftId, formData)
const normalizedResult = normalizeReportTaskLedgerImportResult(response)
latestImportResult.value = normalizedResult
updatePreparedState({
batchId: normalizedResult.batchId || '',
latestImportResult: normalizedResult,
hasImported: Boolean(normalizedResult.success),
pendingReimport: false
@@ -339,22 +342,27 @@ const handleImportFiles = async () => {
if (
!checkReportTaskLedgerPrepared({
...props.preparedState,
batchId: normalizedResult.batchId || '',
latestImportResult: normalizedResult,
hasImported: Boolean(normalizedResult.success),
pendingReimport: false
})
) {
const message = '台账导入未完成，请根据阶段结果修正后重新导入'
const message = '台账校验未通过，请根据阶段结果修正后重新校验'
ElMessage.warning(message)
pushLog('warning', message)
normalizedResult.failReasons?.forEach(reason => pushLog('warning', reason))
return
}
ElMessage.success('台账导入成功')
pushLog('success', '台账导入成功，可以继续填写基础信息')
ElMessage.success('台账校验通过')
pushLog('success', '台账校验通过，可以继续填写基础信息')
} catch (error) {
const message = getReportTaskErrorMessage(error, '台账导入失败')
updatePreparedState({
batchId: '',
hasImported: false
})
const message = getReportTaskErrorMessage(error, '台账校验失败')
ElMessage.error(message)
pushLog('error', message)
} finally {

3
frontend/src/views/aireport/testReport/contracts/check-test-report-page-contract.mjs
View File

@@ -82,9 +82,6 @@ assertFileIncludes(path.join(pageDir, 'components/ReportTaskFormDialog.vue'), [
'ledgerPreparedState',
'activeDraftId',
'checkReportTaskLedgerPrepared',
'padding-bottom: 24px',
'position: absolute',
'z-index: 3',
'log-panel-header',
'log-panel-body',
'log-panel-toggle',

4
frontend/src/views/aireport/testReport/index.vue
View File

@@ -337,15 +337,13 @@ const handleSaveReportTask = async (params: ReportTask.ReportTaskSaveRequest) =>
formSaving.value = true
try {
// 关键业务节点：台账导入已在弹窗内完成，页面层这里只执行最终 add/update，整体顺序为 ledger/import -> add/update。
if (formMode.value === 'create') {
await createReportTaskApi(params)
ElMessage.success('报告任务新增成功')
} else {
await updateReportTaskApi(params)
ElMessage.success('报告任务编辑成功')
}
ElMessage.success(formMode.value === 'create' ? '报告任务新增成功' : '报告任务编辑成功')
formSaveSuccessVersion.value += 1
refreshReportTasks()
} catch (error) {

1
frontend/src/views/aireport/testReport/utils/testReport.ts
View File

@@ -115,6 +115,7 @@ export const normalizeReportTaskLedgerImportResult = (
const stageList = Array.isArray(payload?.stages) ? payload.stages : []
return {
batchId: payload?.batchId || undefined,
currentStage: payload?.currentStage || undefined,
success: payload?.success ?? false,
summaryFileName: payload?.summaryFileName || undefined,

446
frontend/src/views/authority/user/components/userPopup.vue
View File

@@ -1,180 +1,328 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog v-model='dialogVisible' :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
<div>
<el-form :model="formContent"
ref='dialogFormRef'
:rules='rules'
>
<el-form-item label="用户名" prop='name' :label-width="100">
<el-input v-model="formContent.name" placeholder="请输入用户名" autocomplete="off" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="登录名" prop='loginName' :label-width="100" >
<el-input v-model="formContent.loginName" placeholder="请输入登录名" autocomplete="off" :disabled="LoginNameIsShow" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="密码" prop='password' :label-width="100" v-if="IsPasswordShow">
<el-input type="password" v-model="formContent.password" show-password placeholder="请输入密码" autocomplete="off" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label='角色' :label-width='100' prop='roles'>
<el-select v-model="formContent.roleIds" multiple placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.id"
:label="item.name"
:value="item.id"
<el-dialog v-model="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
<el-form ref="dialogFormRef" :model="formContent" :rules="rules">
<el-form-item label="用户名" prop="name" :label-width="100">
<el-input
v-model="formContent.name"
placeholder="请输入用户名"
autocomplete="off"
maxlength="32"
show-word-limit
/>
</el-form-item>
<el-form-item label="登录名" prop="loginName" :label-width="100">
<el-input
v-model="formContent.loginName"
placeholder="请输入登录名"
autocomplete="off"
:disabled="loginNameDisabled"
maxlength="32"
show-word-limit
/>
</el-form-item>
<el-form-item v-if="isPasswordShow" label="密码" prop="password" :label-width="100">
<el-input
v-model="formContent.password"
type="password"
show-password
placeholder="请输入密码"
autocomplete="off"
maxlength="32"
show-word-limit
/>
</el-form-item>
<el-form-item label="角色" prop="roleIds" :label-width="100">
<el-select v-model="formContent.roleIds" multiple placeholder="请选择角色">
<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="手机号码" prop='phone' :label-width="100">
<el-form-item label="手机号码" prop="phone" :label-width="100">
<el-input v-model="formContent.phone" placeholder="请输入手机号码" autocomplete="off" />
</el-form-item>
<el-form-item label="邮箱地址" prop='email' :label-width="100">
<el-form-item label="邮箱地址" prop="email" :label-width="100">
<el-input v-model="formContent.email" placeholder="请输入邮箱地址" autocomplete="off" />
</el-form-item>
</el-form>
<el-form-item label="用户签名" :label-width="100">
<div class="signature-upload">
<el-input :model-value="signatureDisplayName" readonly placeholder="请选择签名文件" />
<div class="signature-upload__actions">
<el-button type="primary" plain @click="openFilePicker">选择文件</el-button>
<el-button
type="primary"
plain
:disabled="!canPreviewSignature"
@click="handlePreviewSignature"
>
预览签名
</el-button>
</div>
<div class="signature-upload__tip">支持 png/jpg/jpeg/bmp/webp</div>
<input
ref="fileInputRef"
class="hidden-file-input"
type="file"
accept=".png,.jpg,.jpeg,.bmp,.webp"
@change="handleSignatureFileChange"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">
保存
</el-button>
<el-button type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref,computed, type Ref } from 'vue'
import {dialogSmall} from '@/utils/elementBind'
import { computed, reactive, ref, type Ref } from 'vue'
import { ElMessage, type FormInstance, type FormItemRule } from 'element-plus'
import {
addUser,
updateUser,
} from '@/api/user/user'
// 使用 dayjs 库格式化
import dayjs from 'dayjs';
import { type User } from '@/api/user/interface/user';
import { useDictStore } from '@/stores/modules/dict'
import { type Role } from '@/api/user/interface/role';
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const IsPasswordShow = ref(false)
const roleList = ref<Role.RoleBO[]>([])
const LoginNameIsShow = ref(false)
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<User.ResUser>({
id: '', //用户ID，作为唯一标识
name: '', //用户名(别名)
loginName: '',//登录名
password: '',//密码
phone: '', //手机号
email: '', //邮箱
loginTime: '',//最后一次登录时间
loginErrorTimes: 0,//登录错误次数
lockTime: '', //用户密码错误锁定时间
state: 1, //
})
return { dialogVisible, titleType, formContent }
}
import { dialogSmall } from '@/utils/elementBind'
import { addUser, previewUserSignature, updateUser } from '@/api/user/user'
import type { Role } from '@/api/user/interface/role'
import type { User } from '@/api/user/interface/user'
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '', //用户ID，作为唯一标识
name: '', //用户名(别名)
loginName: '',//登录名
password: '',//密码
phone: '', //手机号
email: '', //邮箱
loginTime: '',//最后一次登录时间
loginErrorTimes: 0,//登录错误次数
lockTime: '', //用户密码错误锁定时间
state: 1, //
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增用户' : '编辑用户'
defineOptions({
name: 'UserPopup'
})
const SIGNATURE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'bmp', 'webp']
//定义规则
const formRuleRef = ref<FormInstance>()
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '名称必填！', trigger: 'blur' },
// 指定正则，此处是数字正则
{ pattern: /^[A-Za-z\u4e00-\u9fa5]{1,16}$/, message: '名称需1~16位的英文或汉字', trigger: 'blur' }],
loginName: [{ required: true, message: '登录名必填！', trigger: 'blur' },
{ pattern: /^[a-zA-Z]{1}[a-zA-Z0-9]{2,15}$/, message: '格式错误，需以字母开头，长度为3-16位的字母或数字', trigger: 'blur' }],
password: [{ required: true, message: '密码必填！', trigger: 'blur' },
{ pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/, message: '密码长度为8-16，需包含特殊字符', trigger: 'blur' }],
})
type UserPopupMode = 'add' | 'edit'
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
interface UserFormModel {
id: string
name: string
loginName: string
password: string
phone: string
email: string
roleIds: string[]
signatureFileId: string
signatureFileName: string
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateUser(formContent.value);
} else {
await addUser(formContent.value);
}
ElMessage.success({ message: `${dialogTitle.value}成功！` })
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: User.ResUser,roleParams: Role.RoleBO[]) => {
// 重置表单
dialogFormRef.value?.resetFields()
// 获取角色列表
roleList.value = roleParams
titleType.value = sign
dialogVisible.value = true
if (data.id) {
IsPasswordShow.value = false
LoginNameIsShow.value = true
formContent.value = { ...data }
} else {
IsPasswordShow.value = true
LoginNameIsShow.value = false
resetFormContent()
}
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
const dialogFormRef = ref<FormInstance>()
const fileInputRef = ref<HTMLInputElement | null>(null)
const dialogVisible = ref(false)
const titleType = ref<UserPopupMode>('add')
const roleList = ref<Role.RoleBO[]>([])
const selectedSignatureFile = ref<File | null>(null)
const existingSignatureFileName = ref('')
const formContent = reactive<UserFormModel>({
id: '',
name: '',
loginName: '',
password: '',
phone: '',
email: '',
roleIds: [],
signatureFileId: '',
signatureFileName: ''
})
const dialogTitle = computed(() => (titleType.value === 'add' ? '新增用户' : '编辑用户'))
const isPasswordShow = computed(() => titleType.value === 'add')
const loginNameDisabled = computed(() => titleType.value === 'edit')
const signatureDisplayName = computed(() => selectedSignatureFile.value?.name || existingSignatureFileName.value || '')
const canPreviewSignature = computed(() =>
Boolean(selectedSignatureFile.value || (formContent.id && existingSignatureFileName.value))
)
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [
{ required: true, message: '名称必填', trigger: 'blur' },
{ pattern: /^[A-Za-z\u4e00-\u9fa5]{1,16}$/, message: '名称需1~16位的英文或汉字', trigger: 'blur' }
],
loginName: [
{ required: true, message: '登录名必填', trigger: 'blur' },
{ pattern: /^[a-zA-Z]{1}[a-zA-Z0-9]{2,15}$/, message: '需以字母开头，长度为3-16位字母或数字', trigger: 'blur' }
],
password: [
{ required: true, message: '密码必填', trigger: 'blur' },
{
pattern: /^(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,16}$/,
message: '密码长度为8-16，需包含特殊字符',
trigger: 'blur'
}
]
})
const resetFormContent = () => {
formContent.id = ''
formContent.name = ''
formContent.loginName = ''
formContent.password = ''
formContent.phone = ''
formContent.email = ''
formContent.roleIds = []
formContent.signatureFileId = ''
formContent.signatureFileName = ''
}
const resetSignatureState = () => {
selectedSignatureFile.value = null
existingSignatureFileName.value = ''
if (fileInputRef.value) {
fileInputRef.value.value = ''
}
}
const resetPopupState = () => {
resetFormContent()
resetSignatureState()
dialogFormRef.value?.clearValidate()
}
const validateSignatureFile = (file: File) => {
const fileName = file.name || ''
const extension = fileName.includes('.') ? fileName.split('.').pop()?.toLowerCase() : ''
if (!extension || !SIGNATURE_EXTENSIONS.includes(extension)) {
return '签名文件仅支持 png、jpg、jpeg、bmp、webp'
}
return ''
}
const buildSaveRequest = (): User.UserSaveRequest => ({
id: formContent.id || undefined,
name: formContent.name.trim(),
loginName: titleType.value === 'add' ? formContent.loginName.trim() : undefined,
password: titleType.value === 'add' ? formContent.password : undefined,
phone: formContent.phone.trim() || undefined,
email: formContent.email.trim() || undefined,
roleIds: formContent.roleIds
})
const openBlobPreview = (blob: Blob) => {
const previewUrl = URL.createObjectURL(blob)
window.open(previewUrl, '_blank')
window.setTimeout(() => URL.revokeObjectURL(previewUrl), 60 * 1000)
}
const openFilePicker = () => {
fileInputRef.value?.click()
}
const handleSignatureFileChange = (event: Event) => {
const input = event.target as HTMLInputElement
const file = input.files?.[0] || null
input.value = ''
if (!file) return
const validationMessage = validateSignatureFile(file)
if (validationMessage) {
ElMessage.warning(validationMessage)
return
}
selectedSignatureFile.value = file
}
const handlePreviewSignature = async () => {
try {
if (selectedSignatureFile.value) {
openBlobPreview(selectedSignatureFile.value)
return
}
if (!formContent.id || !existingSignatureFileName.value) {
ElMessage.warning('当前用户暂无可预览的签名')
return
}
const response = await previewUserSignature(formContent.id)
openBlobPreview(response.data)
} catch {
ElMessage.error('用户签名预览失败')
}
}
const close = () => {
dialogVisible.value = false
resetPopupState()
}
const save = async () => {
try {
await dialogFormRef.value?.validate()
// 关键业务节点：编辑用户时如果未重新选择签名文件，则只提交 request，后端会保留原签名；选了新文件才会触发替换。
if (formContent.id) {
await updateUser(buildSaveRequest(), selectedSignatureFile.value)
} else {
await addUser(buildSaveRequest(), selectedSignatureFile.value)
}
ElMessage.success({ message: `${dialogTitle.value}成功` })
close()
await props.refreshTable?.()
} catch (error) {
if (error instanceof Error) {
return
}
}
}
const open = async (sign: string, data: Partial<User.ResUser> = {}, roleParams: Role.RoleBO[]) => {
resetPopupState()
roleList.value = roleParams
titleType.value = sign === 'edit' ? 'edit' : 'add'
dialogVisible.value = true
if (data.id) {
formContent.id = data.id
formContent.name = data.name || ''
formContent.loginName = data.loginName || ''
formContent.password = ''
formContent.phone = data.phone || ''
formContent.email = data.email || ''
formContent.roleIds = Array.isArray(data.roleIds) ? [...data.roleIds] : []
formContent.signatureFileId = data.signatureFileId || ''
formContent.signatureFileName = data.signatureFileName || ''
existingSignatureFileName.value = data.signatureFileName || ''
}
}
defineExpose({ open })
</script>
<style scoped lang="scss">
.signature-upload {
display: flex;
flex-direction: column;
width: 100%;
gap: 8px;
}
.signature-upload__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.signature-upload__tip {
color: #909399;
font-size: 12px;
line-height: 1.4;
}
.hidden-file-input {
display: none;
}
:deep(.el-select),
:deep(.el-input) {
width: 100%;
}
</style>