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

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

View File

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

View File

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

View File

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

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 { Role } from '@/api/user/interface/role'
import type { User } from '@/api/user/interface/user' 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 用户管理模块 * @name 用户管理模块
@@ -10,34 +24,42 @@ export const getUserList = (params: User.ReqUserParams) => {
return http.post(`/sysUser/list`, params) return http.post(`/sysUser/list`, params)
} }
// 新增用户 // 新增用户
export const addUser = (params: User.ResUser) => { export const addUser = (request: User.UserSaveRequest, signatureFile?: File | null) => {
return http.post(`/sysUser/add`, params) return http.post(`/sysUser/add`, buildUserFormData(request, signatureFile), {
headers: { 'Content-Type': 'multipart/form-data' }
})
} }
// 编辑用户 // 编辑用户
export const updateUser = (params: User.ResUser) => { export const updateUser = (request: User.UserSaveRequest, signatureFile?: File | null) => {
return http.post(`/sysUser/update`, params) return http.post(`/sysUser/update`, buildUserFormData(request, signatureFile), {
headers: { 'Content-Type': 'multipart/form-data' }
})
} }
// 删除用户 // 删除用户
export const deleteUser = (params: string[] ) => { export const deleteUser = (params: string[]) => {
return http.post(`/sysUser/delete`, params) return http.post(`/sysUser/delete`, params)
} }
// 获取角色列表 // 获取角色列表
export const getRoleList = () => { export const getRoleList = () => {
return http.get<Role.RoleBO>(`/sysRole/simpleList`) return http.get<Role.RoleBO>(`/sysRole/simpleList`)
} }
//修改密码 // 修改密码
export const updatePassWord = (params: User.ResPassWordUser) => { export const updatePassWord = (params: User.ResPassWordUser) => {
return http.post(`/sysUser/updatePassword`,params) return http.post(`/sysUser/updatePassword`, params)
} }
// 获取所有用户 // 获取所有用户
export const getAllUser= () => { export const getAllUser = () => {
return http.get(`/sysUser/getAll`) 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>
>
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,180 +1,328 @@
<template> <template>
<!-- 基础信息弹出框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
<el-dialog v-model='dialogVisible' :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center> <el-form ref="dialogFormRef" :model="formContent" :rules="rules">
<div> <el-form-item label="用户名" prop="name" :label-width="100">
<el-form :model="formContent" <el-input
ref='dialogFormRef' v-model="formContent.name"
:rules='rules' placeholder="请输入用户名"
> autocomplete="off"
<el-form-item label="用户名" prop='name' :label-width="100"> maxlength="32"
<el-input v-model="formContent.name" placeholder="请输入用户名" autocomplete="off" maxlength="32" show-word-limit/> 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-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-select>
</el-form-item> </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-input v-model="formContent.phone" placeholder="请输入手机号码" autocomplete="off" />
</el-form-item> </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-input v-model="formContent.email" placeholder="请输入邮箱地址" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="用户签名" :label-width="100">
</el-form> <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>
<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> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="close()">取消</el-button> <el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()"> <el-button type="primary" @click="save()">保存</el-button>
保存
</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template>
</template> <script lang="ts" setup>
import { computed, reactive, ref, type Ref } from 'vue'
import { ElMessage, type FormInstance, type FormItemRule } from 'element-plus'
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'
<script lang="ts" setup> defineOptions({
import { ref,computed, type Ref } from 'vue' name: 'UserPopup'
import {dialogSmall} from '@/utils/elementBind' })
import { ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
import { const SIGNATURE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'bmp', 'webp']
addUser,
updateUser, type UserPopupMode = 'add' | 'edit'
} from '@/api/user/user'
// 使用 dayjs 库格式化 interface UserFormModel {
import dayjs from 'dayjs'; id: string
import { type User } from '@/api/user/interface/user'; name: string
import { useDictStore } from '@/stores/modules/dict' loginName: string
import { type Role } from '@/api/user/interface/role'; password: string
const dictStore = useDictStore() phone: string
// 定义弹出组件元信息 email: string
const dialogFormRef = ref() roleIds: string[]
const IsPasswordShow = ref(false) signatureFileId: string
const roleList = ref<Role.RoleBO[]>([]) signatureFileName: string
const LoginNameIsShow = ref(false) }
function useMetaInfo() {
const dialogVisible = ref(false) const props = defineProps<{
const titleType = ref('add') refreshTable: (() => Promise<void>) | undefined
const formContent = ref<User.ResUser>({ }>()
id: '', //用户ID作为唯一标识
name: '', //用户名(别名) const dialogFormRef = ref<FormInstance>()
loginName: '',//登录名 const fileInputRef = ref<HTMLInputElement | null>(null)
password: '',//密码 const dialogVisible = ref(false)
phone: '', //手机号 const titleType = ref<UserPopupMode>('add')
email: '', //邮箱 const roleList = ref<Role.RoleBO[]>([])
loginTime: '',//最后一次登录时间 const selectedSignatureFile = ref<File | null>(null)
loginErrorTimes: 0,//登录错误次数 const existingSignatureFileName = ref('')
lockTime: '', //用户密码错误锁定时间 const formContent = reactive<UserFormModel>({
state: 1, // id: '',
}) name: '',
return { dialogVisible, titleType, formContent } 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 { dialogVisible, titleType, formContent } = useMetaInfo() const resetFormContent = () => {
// 清空formContent formContent.id = ''
const resetFormContent = () => { formContent.name = ''
formContent.value = { formContent.loginName = ''
id: '', //用户ID作为唯一标识 formContent.password = ''
name: '', //用户名(别名) formContent.phone = ''
loginName: '',//登录名 formContent.email = ''
password: '',//密码 formContent.roleIds = []
phone: '', //手机号 formContent.signatureFileId = ''
email: '', //邮箱 formContent.signatureFileName = ''
loginTime: '',//最后一次登录时间 }
loginErrorTimes: 0,//登录错误次数
lockTime: '', //用户密码错误锁定时间 const resetSignatureState = () => {
state: 1, // selectedSignatureFile.value = null
} existingSignatureFileName.value = ''
if (fileInputRef.value) {
fileInputRef.value.value = ''
} }
}
let dialogTitle = computed(() => { const resetPopupState = () => {
return titleType.value === 'add' ? '新增用户' : '编辑用户'
})
//定义规则
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' }],
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent() resetFormContent()
// 重置表单 resetSignatureState()
dialogFormRef.value?.resetFields() 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 save = () => { }
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 { try {
dialogFormRef.value?.validate(async (valid: boolean) => { if (selectedSignatureFile.value) {
if (valid) { openBlobPreview(selectedSignatureFile.value)
if (formContent.value.id) { return
await updateUser(formContent.value);
} else {
await addUser(formContent.value);
} }
ElMessage.success({ message: `${dialogTitle.value}成功!` })
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() close()
// 刷新表格 await props.refreshTable?.()
await props.refreshTable!() } catch (error) {
} if (error instanceof Error) {
}) return
} catch (err) {
console.error('验证过程中出现错误', err)
} }
} }
}
// 打开弹窗,可能是新增,也可能是编辑 const open = async (sign: string, data: Partial<User.ResUser> = {}, roleParams: Role.RoleBO[]) => {
const open = async (sign: string, data: User.ResUser,roleParams: Role.RoleBO[]) => { resetPopupState()
// 重置表单
dialogFormRef.value?.resetFields()
// 获取角色列表
roleList.value = roleParams roleList.value = roleParams
titleType.value = sign titleType.value = sign === 'edit' ? 'edit' : 'add'
dialogVisible.value = true dialogVisible.value = true
if (data.id) { if (data.id) {
IsPasswordShow.value = false formContent.id = data.id
LoginNameIsShow.value = true formContent.name = data.name || ''
formContent.value = { ...data } formContent.loginName = data.loginName || ''
formContent.password = ''
formContent.phone = data.phone || ''
} else { formContent.email = data.email || ''
IsPasswordShow.value = true formContent.roleIds = Array.isArray(data.roleIds) ? [...data.roleIds] : []
LoginNameIsShow.value = false formContent.signatureFileId = data.signatureFileId || ''
resetFormContent() formContent.signatureFileName = data.signatureFileName || ''
} existingSignatureFileName.value = data.signatureFileName || ''
} }
}
// 对外映射 defineExpose({ open })
defineExpose({ open }) </script>
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
<style scoped lang="scss">
.signature-upload {
display: flex;
flex-direction: column;
width: 100%;
gap: 8px;
}
</script> .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>