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

Compare commits

base: ClientApps:f9c826ffea42a7b2069fa08d654941cc8be28584
Branches Tags
ClientApps:main
ClientApps:2026-06 ClientApps:2026-05 ClientApps:2026-04
..
compare: ClientApps:b1cbc3d3045af9dbb0cbccf6e06c6ca9084df87d
Branches Tags
ClientApps:main
ClientApps:2026-06 ClientApps:2026-05 ClientApps:2026-04

2 Commits
f9c826ffea ... b1cbc3d304

Author SHA1 Message Date
dk
b1cbc3d304 Merge remote-tracking branch 'origin/main' 
# Conflicts:
#	frontend/src/api/aireport/testReport/index.ts
#	frontend/src/api/aireport/testReport/interface/index.ts
#	frontend/src/views/aireport/testReport/components/ReportTaskFormDialog.vue
#	frontend/src/views/aireport/testReport/components/ReportTaskLedgerImportPanel.vue
#	frontend/src/views/aireport/testReport/contracts/check-test-report-page-contract.mjs
#	frontend/src/views/aireport/testReport/index.vue
 2026-07-13 22:04:52 +08:00
dk
08fd57ada1 refactor(testReport): 重构台账导入功能为校验模式，优化布局。 
feat(user): 增加用户签名管理功能。
 2026-07-13 22:04:10 +08:00
9 changed files with 1377 additions and 700 deletions
Expand all files Collapse all files

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

@@ -37,15 +37,11 @@ export const downloadReportTaskLedgerTemplateApi = (): Promise<AxiosResponse<Blo
}) as unknown as Promise<AxiosResponse<Blob>>
export const validateReportTaskLedgerApi = (id: string, formData: FormData) => {
return http.post<ReportTask.ReportTaskLedgerValidateResult>(`${REPORT_TASK_BASE_URL}/${id}/ledger/validate`, formData, {
return http.post<ReportTask.ReportTaskLedgerImportResult>(`${REPORT_TASK_BASE_URL}/${id}/ledger/validate`, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
export const importReportTaskLedgerApi = (id: string, params: ReportTask.ReportTaskLedgerImportRequest) => {
return http.post<ReportTask.ReportTaskLedgerImportResult>(`${REPORT_TASK_BASE_URL}/${id}/ledger/import`, params)
}
export const listReportTaskGroupReportsApi = (id: string) => {
return http.get<ReportTask.ReportTaskGroupReportRecord[]>(`${REPORT_TASK_BASE_URL}/${id}/group-report/list`)
}

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

@@ -1,11 +1,9 @@
export namespace ReportTask {
export type ReportTaskState = '01' | '02' | '03' | '04' | '05'
export type ReportTaskGenerateState = 0 | 1 | 2
export type ReportTaskGroupReportGenerateState = 0 | 1 | 2 | 3
export type ReportTaskLedgerImportStage =
| '选择文件'
| '校验文件'
| '文件导入'
| '文件上传'
| '基础资料维护'
| '完成'
@@ -25,11 +23,10 @@ export namespace ReportTask {
checkerName?: string | null
checkTime?: string | null
checkResult?: string | null
state?: ReportTaskState | null
status?: number
pointCount?: number | null
groupCount?: number | null
reportGenerateState?: ReportTaskGenerateState | null
reportGenerateState?: number | null
createBy?: string | null
createByName?: string | null
createTime?: string | null
@@ -43,7 +40,6 @@ export namespace ReportTask {
keyword?: string
searchBeginTime?: string
searchEndTime?: string
state?: ReportTaskState | ''
timeRange?: string[]
pageNum?: number
pageSize?: number
@@ -58,6 +54,7 @@ export namespace ReportTask {
contractNumber: string
standard: string[]
data: string
batchId?: string
phonenumber?: string
}
@@ -98,57 +95,12 @@ export namespace ReportTask {
} | null
}
export interface ReportTaskLedgerValidateAttachment {
attachmentName?: string | null
attachmentType?: string | null
referenced?: boolean | null
uploaded?: boolean | null
missing?: boolean | null
reuploadAllowed?: boolean | null
message?: string | null
}
export interface ReportTaskLedgerValidatePoint {
rowNo?: number | null
pointKey?: string | null
substationName?: string | null
pointName?: string | null
complete?: boolean | null
missingAttachmentCount?: number | null
testDeviceNoValid?: boolean | null
testDeviceNoMessage?: string | null
clientUnitNameValid?: boolean | null
clientUnitNameMessage?: string | null
attachments?: ReportTaskLedgerValidateAttachment[] | null
}
export interface ReportTaskLedgerValidateResult {
sessionId?: string | null
batchId?: string | null
success?: boolean | null
summaryFileName?: string | null
summaryFilePresent?: boolean | null
tempStoragePath?: string | null
uploadedFileCount?: number | null
pointCount?: number | null
missingAttachmentCount?: number | null
canContinueUpload?: boolean | null
requiredSheets?: string[] | null
existingSheets?: string[] | null
missingSheets?: string[] | null
orphanAttachmentNames?: string[] | null
failReasons?: string[] | null
points?: ReportTaskLedgerValidatePoint[] | null
}
export interface ReportTaskLedgerImportResult {
batchId?: string | null
currentStage?: ReportTaskLedgerImportStage | string | null
success?: boolean | null
summaryFileName?: string | null
tempStoragePath?: string | null
totalFileCount?: number
uploadedFileCount?: number
pointCount?: number
excelAttachmentCount?: number
wordAttachmentCount?: number
@@ -161,10 +113,6 @@ export namespace ReportTask {
stages?: ReportTaskLedgerImportStageRecord[] | null
}
export interface ReportTaskLedgerImportRequest {
batchId: string
}
export interface ReportTaskPointRecord {
id?: string
groupNo?: number | null
@@ -204,12 +152,10 @@ export namespace ReportTask {
export interface ReportTaskLedgerPreparedState {
draftId: string
validateSessionId: string
validateResult: ReportTaskLedgerValidateResult | null
batchId: string
latestImportResult: ReportTaskLedgerImportResult | null
snapshot: ReportTaskLedgerImportSnapshot | null
hasImported: boolean
validatedBatchId: string
pendingRevalidate: boolean
pendingReimport: 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>
>
}

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

@@ -6,17 +6,17 @@
append-to-body
destroy-on-close
class="report-task-flow-dialog"
@closed="resetFlow"
@closed="resetForm"
>
<div class="report-task-form-dialog">
<div class="flow-nav">
<button
v-for="step in REPORT_TASK_FLOW_STEPS"
v-for="step in REPORT_TASK_FORM_STEPS"
:key="step.value"
type="button"
class="flow-step"
:class="[`is-${resolveFlowStepStatus(step.value, currentStep, ledgerPreparedState)}`, { 'is-clickable': canReachFlowStep(step.value, ledgerPreparedState, currentStep) }]"
:disabled="!canReachFlowStep(step.value, ledgerPreparedState, currentStep)"
:class="[`is-${resolveStepStatus(step.value)}`, { 'is-clickable': canSwitchStep(step.value) }]"
:disabled="!canSwitchStep(step.value)"
@click="handleStepClick(step.value)"
>
<span class="flow-step-index">{{ step.index }}</span>
@@ -27,65 +27,149 @@
</button>
</div>
<div class="report-task-form-body">
<div class="flow-main">
<ReportTaskPrepareStep
v-if="currentStep === 'prepare'"
<div v-if="currentStep === 'import'" class="flow-panel">
<ReportTaskLedgerImportPanel
:draft-id="activeDraftId"
:disabled="saving"
:prepared-state="ledgerPreparedState"
:snapshot="ledgerSnapshot"
@change="handleLedgerPreparedChange"
@log="handleLog"
/>
<ReportTaskImportStep
v-else-if="currentStep === 'import'"
:disabled="saving"
:prepared-state="ledgerPreparedState"
:snapshot="ledgerPreparedState.snapshot"
@change="handleLedgerPreparedChange"
@log="handleLog"
/>
<ReportTaskBaseInfoStep
v-else-if="currentStep === 'form'"
:form-model="formModel"
:record="record"
:client-unit-options="clientUnitOptions"
:report-model-options="reportModelOptions"
:company-options="companyOptions"
:standard-options="standardOptions"
:prepared-state="ledgerPreparedState"
@register-form="handleRegisterForm"
@update:form-model="handleFormModelChange"
/>
<ReportTaskCompleteStep
v-else
:mode="mode"
:form-model="formModel"
:prepared-state="ledgerPreparedState"
:client-unit-options="clientUnitOptions"
:company-options="companyOptions"
/>
</div>
<aside class="log-floating-panel" :class="{ 'is-collapsed': !logPanelExpanded }">
<el-button
class="log-panel-collapse-toggle"
type="primary"
:icon="logPanelExpanded ? ArrowRight : ArrowLeft"
circle
@click="logPanelExpanded = !logPanelExpanded"
<div v-else-if="currentStep === 'form'" class="flow-panel">
<div class="form-panel">
<el-form ref="formRef" :model="formModel" :rules="formRules" label-width="108px" class="report-task-form">
<el-row :gutter="16">
<el-col :xs="24" :sm="12">
<el-form-item label="报告编号" prop="no">
<el-input v-model="formModel.no" maxlength="32" clearable placeholder="请输入报告编号" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="委托单位" prop="clientUnitId">
<el-select v-model="formModel.clientUnitId" filterable clearable placeholder="请选择委托单位">
<el-option
v-for="option in clientUnitSelectOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="报告模板" prop="reportModelId">
<el-select v-model="formModel.reportModelId" filterable clearable placeholder="请选择报告模板">
<el-option
v-for="option in reportModelSelectOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="检测公司" prop="createUnit">
<el-select v-model="formModel.createUnit" filterable clearable placeholder="请选择检测公司">
<el-option
v-for="option in companySelectOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="合同编号" prop="contractNumber">
<el-input v-model="formModel.contractNumber" maxlength="32" clearable placeholder="请输入合同编号" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="测试依据" prop="standardIds">
<el-select
v-model="formModel.standardIds"
multiple
filterable
clearable
collapse-tags
placeholder="请选择测试依据"
>
<el-option
v-for="option in standardSelectOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12">
<el-form-item label="联系电话" prop="phonenumber">
<el-input v-model="formModel.phonenumber" maxlength="32" clearable placeholder="请输入联系电话" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-show="logPanelExpanded" class="log-panel-body-wrapper">
<div class="log-panel">
<div class="log-panel-header">
<div class="log-title">异常日志</div>
<div class="summary-strip">
<div class="summary-item">
<span class="summary-label">导入状态</span>
<el-tag :type="canSubmit ? 'success' : 'warning'">
{{ canSubmit ? '已准备提交' : '待完成台账校验' }}
</el-tag>
</div>
<div class="summary-item">
<span class="summary-label">监测点数</span>
<span class="summary-value">{{ importSummary.pointCount }}</span>
</div>
<div class="summary-item">
<span class="summary-label">分组数</span>
<span class="summary-value">{{ importSummary.groupCount }}</span>
</div>
<div class="summary-item">
<span class="summary-label">汇总文件</span>
<span class="summary-value">{{ importSummary.summaryFileName }}</span>
</div>
</div>
</div>
</div>
<div class="log-panel-body">
<div v-else class="flow-panel">
<div class="complete-panel">
<el-result
icon="success"
:title="mode === 'create' ? '报告任务新增完成' : '报告任务编辑完成'"
sub-title="台账校验与基础信息保存均已完成，本次结果已同步刷新到列表。"
/>
<el-descriptions :column="2" border>
<el-descriptions-item label="报告编号">{{ formModel.no || '-' }}</el-descriptions-item>
<el-descriptions-item label="委托单位">
{{ resolveCurrentOptionLabel(clientUnitSelectOptions, formModel.clientUnitId) }}
</el-descriptions-item>
<el-descriptions-item label="检测公司">
{{ resolveCurrentOptionLabel(companySelectOptions, formModel.createUnit) }}
</el-descriptions-item>
<el-descriptions-item label="监测点数">{{ importSummary.pointCount }}</el-descriptions-item>
<el-descriptions-item label="分组数">{{ importSummary.groupCount }}</el-descriptions-item>
<el-descriptions-item label="汇总文件">{{ importSummary.summaryFileName }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
</div>
<div class="log-panel" :class="{ 'is-collapsed': !logPanelExpanded }">
<button type="button" class="log-panel-header" @click="logPanelExpanded = !logPanelExpanded">
<span class="log-panel-toggle" :class="{ 'is-collapsed': !logPanelExpanded }" aria-hidden="true"></span>
<div class="log-title">日志信息</div>
</button>
<div v-show="logPanelExpanded" class="log-panel-body">
<div class="log-popover-body">
<div v-if="logEntries.length" class="log-list">
<div v-for="entry in logEntries" :key="entry.id" class="log-item">
@@ -93,30 +177,20 @@
<el-tag size="small" :type="resolveLogTagType(entry.type)">{{ resolveLogTypeText(entry.type) }}</el-tag>
<span class="log-time">{{ entry.time }}</span>
</div>
<el-tooltip :content="entry.message" placement="top-start">
<div class="log-message">{{ entry.message }}</div>
</el-tooltip>
</div>
</div>
<el-empty v-else description="当前暂无日志输出" :image-size="60" class="log-empty" />
<el-empty v-else description="当前暂无日志输出" :image-size="60" />
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
<template #footer>
<el-button :disabled="saving" @click="visibleProxy = false">{{ currentStep === 'done' ? '关闭' : '取消' }}</el-button>
<template v-if="currentStep === 'prepare'">
<el-button type="primary" :disabled="!canGoToImport" @click="goToImportStep">下一步</el-button>
</template>
<template v-else-if="currentStep === 'import'">
<el-button type="primary" plain :disabled="saving" @click="goToPrepareStep">上一步</el-button>
<el-button type="primary" :disabled="!canGoToForm" @click="goToFormStep">下一步</el-button>
<template v-if="currentStep === 'import'">
<el-button type="primary" :disabled="!canSubmit" @click="goToFormStep">下一步</el-button>
</template>
<template v-else-if="currentStep === 'form'">
@@ -128,32 +202,52 @@
</template>
<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue'
import type { ReportTask } from '@/api/aireport/testReport/interface'
import ReportTaskBaseInfoStep from './ReportTaskBaseInfoStep.vue'
import ReportTaskCompleteStep from './ReportTaskCompleteStep.vue'
import ReportTaskImportStep from './ReportTaskImportStep.vue'
import ReportTaskPrepareStep from './ReportTaskPrepareStep.vue'
import { generateUUID } from '@/utils'
import ReportTaskLedgerImportPanel from './ReportTaskLedgerImportPanel.vue'
import {
REPORT_TASK_FLOW_STEPS,
canReachFlowStep,
createEmptyLedgerPreparedState,
hasValidatedLedgerBatch,
resolveFlowStepStatus,
resolveInitialFlowStep,
type ReportTaskFlowStep
} from '../utils/reportTaskFlow'
import { buildReportTaskFormContext, buildReportTaskSavePayload, createDefaultReportTaskFormModel } from '../utils/testReportForm'
import { checkReportTaskLedgerPrepared, getReportTaskErrorMessage } from '../utils/testReport'
checkReportTaskLedgerPrepared,
getReportTaskErrorMessage,
normalizeReportTaskLedgerSnapshot,
parseReportTaskStandardIds,
stringifyReportTaskStandardIds
} from '../utils/testReport'
defineOptions({
name: 'ReportTaskFormDialog'
})
type ReportTaskFormStep = 'import' | 'form' | 'done'
type ReportTaskLogType = 'info' | 'success' | 'warning' | 'error'
const REPORT_TASK_FORM_STEPS: Array<{
index: number
value: ReportTaskFormStep
title: string
description: string
}> = [
{
index: 1,
value: 'import',
title: '数据导入',
description: '先完成台账与附件校验'
},
{
index: 2,
value: 'form',
title: '基础信息填写',
description: '填写并确认任务基础信息'
},
{
index: 3,
value: 'done',
title: '完成',
description: '查看结果并结束本次流程'
}
]
const props = defineProps<{
visible: boolean
mode: 'create' | 'edit'
@@ -169,29 +263,91 @@ const props = defineProps<{
const emit = defineEmits<{
(event: 'update:visible', value: boolean): void
(event: 'submit', value: ReportTask.ReportTaskSaveRequest): void
(event: 'refresh-options'): void
}>()
const formRef = ref<FormInstance>()
const activeDraftId = ref('')
const currentStep = ref<ReportTaskFlowStep>('prepare')
const logPanelExpanded = ref(false)
const currentStep = ref<ReportTaskFormStep>('import')
const logPanelExpanded = ref(true)
const logEntries = ref<Array<{ id: string; type: ReportTaskLogType; time: string; message: string }>>([])
const ledgerPreparedState = reactive(createEmptyLedgerPreparedState())
const formModel = reactive(createDefaultReportTaskFormModel())
const ledgerPreparedState = ref<ReportTask.ReportTaskLedgerPreparedState>({
draftId: '',
batchId: '',
latestImportResult: null,
snapshot: null,
hasImported: false,
pendingReimport: false
})
const lastHandledSaveSuccessVersion = ref(0)
const formModel = reactive({
id: '',
no: '',
clientUnitId: '',
reportModelId: '',
createUnit: '',
contractNumber: '',
standardIds: [] as string[],
data: '',
phonenumber: ''
})
const formRules: FormRules = {
no: [{ required: true, message: '请输入报告编号', trigger: 'blur' }],
clientUnitId: [{ required: true, message: '请选择委托单位', trigger: 'change' }],
reportModelId: [{ required: true, message: '请选择报告模板', trigger: 'change' }],
createUnit: [{ required: true, message: '请选择检测公司', trigger: 'change' }],
contractNumber: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
standardIds: [{ required: true, message: '请选择测试依据', trigger: 'change' }]
}
const visibleProxy = computed({
get: () => props.visible,
set: value => emit('update:visible', value)
})
const canGoToImport = computed(() => hasValidatedLedgerBatch(ledgerPreparedState))
const canVisitImport = computed(() => canGoToImport.value || ledgerPreparedState.hasImported || Boolean(ledgerPreparedState.snapshot))
const canGoToForm = computed(() => checkReportTaskLedgerPrepared(ledgerPreparedState))
const canSubmit = computed(() => !props.saving && checkReportTaskLedgerPrepared(ledgerPreparedState))
const ledgerSnapshot = computed(() => ledgerPreparedState.value.snapshot)
const canSubmit = computed(() => !props.saving && checkReportTaskLedgerPrepared(ledgerPreparedState.value))
const importSummary = computed(() => {
const importResult = ledgerPreparedState.value.latestImportResult
const snapshot = ledgerPreparedState.value.snapshot
const buildLogId = () => window.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`
return {
pointCount: String(importResult?.pointCount ?? snapshot?.rowCount ?? '-'),
groupCount: String(importResult?.groupCount ?? snapshot?.groupSummary?.length ?? '-'),
summaryFileName: importResult?.summaryFileName || snapshot?.summaryFileName || '-'
}
})
const ensureCurrentOption = (
options: Array<{ label: string; value: string }>,
value: string,
fallbackLabel: string
) => {
if (!value || options.some(option => option.value === value)) return options
return [...options, { label: fallbackLabel || value, value }]
}
const clientUnitSelectOptions = computed(() =>
ensureCurrentOption(props.clientUnitOptions, formModel.clientUnitId, props.record?.clientUnitName || '')
)
const reportModelSelectOptions = computed(() =>
ensureCurrentOption(props.reportModelOptions, formModel.reportModelId, props.record?.reportModelName || '')
)
const companySelectOptions = computed(() =>
ensureCurrentOption(props.companyOptions, formModel.createUnit, props.record?.createUnit || '')
)
const standardSelectOptions = computed(() => {
const optionMap = new Map(props.standardOptions.map(option => [option.value, option]))
const extraOptions = formModel.standardIds
.filter(item => !optionMap.has(item))
.map(item => ({ label: item, value: item }))
return [...props.standardOptions, ...extraOptions]
})
const buildLogId = () => window.crypto?.randomUUID?.() || generateUUID()
const pushLog = (type: ReportTaskLogType, message: string) => {
logEntries.value.push({
@@ -206,13 +362,8 @@ const handleLog = (payload: { type: ReportTaskLogType; message: string }) => {
pushLog(payload.type, payload.message)
}
const handleRegisterForm = (value: FormInstance | undefined) => {
formRef.value = value
}
const handleFormModelChange = (value: typeof formModel) => {
Object.assign(formModel, value)
}
const resolveCurrentOptionLabel = (options: Array<{ label: string; value: string }>, value: string) =>
options.find(option => option.value === value)?.label || value || '-'
const resolveLogTagType = (type: ReportTaskLogType) => {
if (type === 'success') return 'success'
@@ -228,102 +379,124 @@ const resolveLogTypeText = (type: ReportTaskLogType) => {
return '信息'
}
const resetFlow = () => {
const resetForm = () => {
formRef.value?.clearValidate()
Object.assign(formModel, createDefaultReportTaskFormModel())
formModel.id = ''
formModel.no = ''
formModel.clientUnitId = ''
formModel.reportModelId = ''
formModel.createUnit = ''
formModel.contractNumber = ''
formModel.standardIds = []
formModel.data = ''
formModel.phonenumber = ''
activeDraftId.value = ''
currentStep.value = 'prepare'
logPanelExpanded.value = false
currentStep.value = 'import'
logPanelExpanded.value = true
logEntries.value = []
Object.assign(ledgerPreparedState, createEmptyLedgerPreparedState())
}
const fillFlowContext = async () => {
try {
const context = buildReportTaskFormContext(props.mode, props.record)
Object.assign(formModel, context.formModel)
activeDraftId.value = context.draftId
Object.assign(ledgerPreparedState, {
draftId: context.draftId,
validateSessionId: '',
validateResult: null,
ledgerPreparedState.value = {
draftId: '',
batchId: '',
latestImportResult: null,
snapshot: context.snapshot,
hasImported: context.hasPreparedImport,
validatedBatchId: '',
pendingRevalidate: false
})
currentStep.value = resolveInitialFlowStep(props.mode, ledgerPreparedState)
if (currentStep.value === 'form') {
pushLog('info', '编辑场景检测到已有导入结果，默认进入基础信息维护步骤')
} else {
pushLog('info', '已进入文件选择与校验步骤，请先完成文件准备')
snapshot: null,
hasImported: false,
pendingReimport: false
}
}
if (context.snapshot) {
pushLog('info', `已加载最近一次导入快照：${context.snapshot.summaryFileName || '未命名汇总文件'}`)
const buildDraftId = () => {
if (props.mode === 'edit') {
return String(props.record?.id || '').trim()
}
return window.crypto?.randomUUID?.() || generateUUID()
}
const applyInitialStep = (hasPreparedLedger: boolean) => {
if (props.mode === 'edit' && hasPreparedLedger) {
currentStep.value = 'form'
pushLog('info', '编辑场景检测到已有导入结果，默认进入基础信息填写步骤')
return
}
currentStep.value = 'import'
pushLog('info', '已进入数据导入步骤，请先完成台账校验')
}
const fillForm = async () => {
try {
const record = props.record
const snapshot = normalizeReportTaskLedgerSnapshot(record?.data)
formModel.id = record?.id || ''
formModel.no = record?.no || ''
formModel.clientUnitId = record?.clientUnitId || ''
formModel.reportModelId = record?.reportModelId || ''
formModel.createUnit = record?.createUnit || ''
formModel.contractNumber = record?.contractNumber || ''
formModel.standardIds = parseReportTaskStandardIds(record?.standard)
formModel.data = record?.data || ''
formModel.phonenumber = record?.phonenumber || ''
activeDraftId.value = buildDraftId()
ledgerPreparedState.value = {
draftId: activeDraftId.value,
batchId: '',
latestImportResult: null,
snapshot,
hasImported: Boolean(snapshot || Number(record?.pointCount) > 0),
pendingReimport: false
}
applyInitialStep(Boolean(snapshot || Number(record?.pointCount) > 0))
if (snapshot) {
pushLog('info', `已加载最近一次导入快照：${snapshot.summaryFileName || '未命名汇总文件'}`)
}
} catch (error) {
const message = getReportTaskErrorMessage(error, '报告任务初始化失败')
const message = getReportTaskErrorMessage(error, '报告任务台账快照加载失败')
ElMessage.error(message)
pushLog('error', message)
}
}
const goToPrepareStep = () => {
currentStep.value = 'prepare'
pushLog('info', '已返回文件选择与校验步骤')
const goToFormStep = () => {
if (!canSubmit.value) {
pushLog('warning', '当前校验尚未完成，不能进入基础信息填写步骤')
return
}
currentStep.value = 'form'
pushLog('info', '已切换到基础信息填写步骤')
}
const goToImportStep = () => {
if (!canVisitImport.value) {
pushLog('warning', '当前文件校验尚未通过，不能进入正式导入步骤')
return
}
currentStep.value = 'import'
pushLog('info', '已切换到文件导入步骤')
}
const goToFormStep = () => {
if (!canGoToForm.value) {
pushLog('warning', '当前正式导入尚未完成，不能进入基础信息维护步骤')
return
}
currentStep.value = 'form'
pushLog('info', '已切换到基础信息维护步骤')
pushLog('info', '已返回数据导入步骤，可继续沿用当前结果或重新校验台账')
}
const handleLedgerPreparedChange = (value: ReportTask.ReportTaskLedgerPreparedState) => {
const wasReadyForImport = hasValidatedLedgerBatch(ledgerPreparedState)
const wasReadyForSubmit = checkReportTaskLedgerPrepared(ledgerPreparedState)
Object.assign(ledgerPreparedState, {
const wasPrepared = checkReportTaskLedgerPrepared(ledgerPreparedState.value)
const nextState = {
...value,
draftId: activeDraftId.value
})
if (!wasReadyForImport && hasValidatedLedgerBatch(ledgerPreparedState) && currentStep.value === 'prepare') {
currentStep.value = 'import'
pushLog('success', '文件校验已通过，已自动进入正式导入步骤')
return
}
if (!wasReadyForSubmit && checkReportTaskLedgerPrepared(ledgerPreparedState)) {
emit('refresh-options')
ledgerPreparedState.value = nextState
if (!wasPrepared && checkReportTaskLedgerPrepared(nextState) && currentStep.value === 'import') {
currentStep.value = 'form'
pushLog('success', '正式导入已完成，已自动进入基础信息维护步骤')
pushLog('success', '台账校验已完成，已自动进入基础信息填写步骤')
}
}
const handleStepClick = (step: ReportTaskFlowStep) => {
if (!canReachFlowStep(step, ledgerPreparedState, currentStep.value)) return
if (step === 'prepare') {
goToPrepareStep()
return
const canSwitchStep = (step: ReportTaskFormStep) => {
if (step === 'import') return true
if (step === 'form') return canSubmit.value || currentStep.value === 'form' || currentStep.value === 'done'
return currentStep.value === 'done'
}
const handleStepClick = (step: ReportTaskFormStep) => {
if (!canSwitchStep(step)) return
if (step === 'import') {
goToImportStep()
return
@@ -333,12 +506,19 @@ const handleStepClick = (step: ReportTaskFlowStep) => {
}
}
const resolveStepStatus = (step: ReportTaskFormStep) => {
if (currentStep.value === step) return 'active'
if (step === 'import' && (currentStep.value === 'form' || currentStep.value === 'done')) return 'done'
if (step === 'form' && currentStep.value === 'done') return 'done'
return 'pending'
}
watch(
() => [props.visible, props.mode, props.record?.id],
async ([visible]) => {
if (!visible) return
resetFlow()
await fillFlowContext()
resetForm()
await fillForm()
},
{ immediate: true }
)
@@ -361,34 +541,42 @@ const submitForm = async () => {
return
}
if (!checkReportTaskLedgerPrepared(ledgerPreparedState)) {
const message = '请先完成正式导入后再提交基础信息'
if (!checkReportTaskLedgerPrepared(ledgerPreparedState.value)) {
const message = '请先完成台账校验后再提交基础信息'
ElMessage.warning(message)
pushLog('warning', message)
return
}
// 关键业务节点：当前弹窗只接受已完成 ledger/validate -> ledger/import 的任务，再执行最终 add/update 保存基础信息。
pushLog('info', props.mode === 'create' ? '开始提交新增任务基础信息' : '开始提交编辑后的任务基础信息')
emit('submit', buildReportTaskSavePayload(activeDraftId.value, formModel))
pushLog('info', props.mode === 'create' ? '开始提交新增任务基础信息并写入台账数据' : '开始提交编辑后的任务基础信息并更新台账数据')
emit('submit', {
id: activeDraftId.value || formModel.id || undefined,
no: formModel.no.trim(),
clientUnitId: formModel.clientUnitId,
reportModelId: formModel.reportModelId,
createUnit: formModel.createUnit,
contractNumber: formModel.contractNumber.trim(),
standard: stringifyReportTaskStandardIds(formModel.standardIds),
data: formModel.data.trim(),
batchId: ledgerPreparedState.value.batchId || undefined,
phonenumber: formModel.phonenumber.trim() || undefined
})
}
</script>
<style scoped lang="scss">
.report-task-form-dialog {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
height: 560px;
min-height: 0;
}
.flow-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 16px 18px 12px;
padding: 22px 18px 18px;
border: 1px solid #d9ebe7;
border-radius: 10px;
background: #fff;
@@ -399,8 +587,8 @@ const submitForm = async () => {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 0 12px 10px;
gap: 10px;
padding: 0 12px 18px;
border: none;
background: transparent;
text-align: center;
@@ -497,83 +685,92 @@ const submitForm = async () => {
color: #b9bfc9;
}
.report-task-form-body {
position: relative;
display: flex;
flex-direction: column;
.flow-main {
min-height: 0;
flex: 1;
padding-bottom: 0;
overflow: hidden;
}
.flow-main {
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
overflow: auto;
}
.log-floating-panel {
position: absolute;
top: 12px;
right: 12px;
bottom: 12px;
z-index: 4000;
.flow-panel {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 300px;
gap: 16px;
min-height: 0;
transition: width 0.2s ease;
}
.log-floating-panel.is-collapsed {
width: 0;
.form-panel {
border: 1px solid var(--el-border-color-light);
border-radius: 12px;
padding: 18px;
background: var(--el-fill-color-blank);
}
.log-panel-collapse-toggle {
position: absolute;
top: 12px;
left: -28px;
flex-shrink: 0;
z-index: 4001;
.summary-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 8px;
}
.log-panel-body-wrapper {
position: relative;
flex: 1;
min-height: 0;
width: 100%;
z-index: 4000;
isolation: isolate;
.summary-item {
padding: 12px 14px;
border-radius: 10px;
background: var(--el-fill-color-light);
}
.log-floating-panel.is-collapsed .log-panel-body-wrapper {
display: none;
.summary-label {
display: block;
margin-bottom: 6px;
font-size: 12px;
color: var(--el-text-color-secondary);
}
.summary-value {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.complete-panel {
border: 1px solid var(--el-border-color-light);
border-radius: 12px;
padding: 18px;
background: var(--el-fill-color-blank);
}
.log-panel {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid var(--el-border-color-light);
border-radius: 12px;
background: var(--el-fill-color-blank);
overflow: hidden;
box-shadow: var(--el-box-shadow-light);
flex: 0 0 auto;
}
.log-panel-header {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
min-height: 44px;
padding: 0 16px;
border: none;
background: linear-gradient(180deg, #eef3ff 0%, #e6ecff 100%);
cursor: pointer;
}
.log-panel-toggle {
width: 10px;
height: 10px;
margin-right: 10px;
border-right: 2px solid #2f4fb7;
border-bottom: 2px solid #2f4fb7;
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.log-panel-toggle.is-collapsed {
transform: rotate(-45deg);
}
.log-title {
@@ -581,26 +778,20 @@ const submitForm = async () => {
font-size: 15px;
font-weight: 600;
color: #2f4fb7;
text-align: center;
padding-right: 20px;
}
.log-panel-body {
position: relative;
display: flex;
flex: 1;
min-height: 0;
border-top: 1px solid #d9e3ff;
background: #fff;
z-index: 1;
}
.log-popover-body {
position: relative;
flex: 1;
min-height: 0;
max-height: 160px;
overflow: auto;
padding: 0;
background: #fff;
z-index: 1;
}
.log-list {
@@ -610,7 +801,7 @@ const submitForm = async () => {
.log-item {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
grid-template-columns: 180px minmax(0, 1fr);
border-top: 1px solid var(--el-border-color-lighter);
}
@@ -620,27 +811,27 @@ const submitForm = async () => {
.log-meta,
.log-message {
padding: 8px 10px;
padding: 10px 14px;
}
.log-meta {
display: flex;
align-items: center;
gap: 6px;
gap: 10px;
border-right: 1px solid var(--el-border-color-lighter);
background: #f6f8ff;
white-space: nowrap;
}
.log-time {
font-size: 11px;
font-size: 12px;
color: var(--el-text-color-secondary);
line-height: 1;
}
.log-message {
font-size: 12px;
line-height: 1.2;
font-size: 13px;
line-height: 1.3;
color: var(--el-text-color-primary);
overflow: hidden;
white-space: nowrap;
@@ -648,41 +839,25 @@ const submitForm = async () => {
}
.log-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 180px;
padding: 18px 0;
}
:deep(.report-task-flow-dialog .el-dialog__body) {
display: flex;
min-height: 0;
overflow: hidden;
}
:deep(.report-task-flow-dialog .el-dialog) {
display: flex;
flex-direction: column;
max-height: calc(100vh - 40px);
}
:deep(.report-task-flow-dialog .el-table__fixed),
:deep(.report-task-flow-dialog .el-table__fixed-right),
:deep(.report-task-flow-dialog .el-table__fixed-right-patch) {
z-index: 1;
}
:deep(.report-task-flow-dialog .el-table__body-wrapper),
:deep(.report-task-flow-dialog .el-scrollbar),
:deep(.report-task-flow-dialog .el-scrollbar__bar),
:deep(.report-task-flow-dialog .el-scrollbar__thumb) {
z-index: 1 !important;
:deep(.el-select),
:deep(.el-input) {
width: 100%;
}
@media (max-width: 900px) {
.flow-nav {
.flow-nav,
.summary-strip {
grid-template-columns: 1fr;
}
.flow-nav {
gap: 14px;
padding: 16px;
}
@@ -704,23 +879,6 @@ const submitForm = async () => {
align-items: flex-start;
}
.log-floating-panel {
position: static;
align-items: stretch;
width: 100%;
min-height: 220px;
}
.log-floating-panel.is-collapsed {
width: 100%;
min-height: 0;
}
.log-panel-collapse-toggle {
position: static;
align-self: flex-end;
}
.log-panel-header {
padding: 0 14px;
}
@@ -733,5 +891,6 @@ const submitForm = async () => {
border-right: none;
border-bottom: 1px solid var(--el-border-color-lighter);
}
}
</style>

434
frontend/src/views/aireport/testReport/components/ReportTaskLedgerImportPanel.vue Normal file
View File

@@ -0,0 +1,434 @@
<template>
<div class="ledger-import-panel">
<div class="panel-block">
<div class="section-header">
<div class="section-title">数据导入</div>
</div>
<el-alert
v-if="preparedState.pendingReimport"
title="已重新选择文件，当前校验结果已失效，请重新执行台账校验。"
type="warning"
:closable="false"
show-icon
class="section-alert"
/>
<div class="toolbar">
<div class="toolbar-actions">
<el-upload
:auto-upload="false"
:show-file-list="false"
multiple
accept=".xls,.xlsx,.doc,.docx"
:disabled="disabled || importing"
@change="handleFileChange"
@remove="handleFileRemove"
>
<template #trigger>
<el-button type="primary" plain :icon="FolderOpened" :disabled="disabled || importing">选择文件</el-button>
</template>
</el-upload>
<el-button type="primary" :icon="UploadFilled" :loading="importing" :disabled="disabled" @click="handleImportFiles">
执行校验
</el-button>
</div>
<el-button class="toolbar-download" type="primary" plain :icon="Download" :disabled="disabled || importing" @click="handleDownloadTemplate">
下载模板
</el-button>
</div>
<el-table v-if="selectedFiles.length" :data="selectedFiles" border size="small" max-height="260" class="file-table">
<el-table-column type="index" label="序号" width="68" />
<el-table-column prop="name" label="文件名称" min-width="280" show-overflow-tooltip />
<el-table-column label="文件大小" width="140">
<template #default="{ row }">{{ formatFileSize(row.size) }}</template>
</el-table-column>
<el-table-column label="文件类型" width="120">
<template #default="{ row }">{{ resolveFileTypeText(row.name) }}</template>
</el-table-column>
<el-table-column label="操作" width="100" fixed="right">
<template #default="{ $index }">
<el-button link type="danger" :disabled="disabled || importing" @click="removeSelectedFile($index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-else description="尚未选择待导入文件" :image-size="88" />
</div>
<div v-if="latestImportResult" class="panel-block">
<div class="section-header">
<div class="section-title">导入结果</div>
<div class="section-desc">以后端返回的阶段结果和汇总统计为准。</div>
</div>
<el-descriptions :column="3" border>
<el-descriptions-item label="当前阶段">{{ resolveReportTaskText(latestImportResult.currentStage) }}</el-descriptions-item>
<el-descriptions-item label="导入状态">
<el-tag :type="latestImportResult.success ? 'success' : 'warning'">
{{ latestImportResult.success ? '成功' : '未完成' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="汇总文件">{{ resolveReportTaskText(latestImportResult.summaryFileName) }}</el-descriptions-item>
<el-descriptions-item label="总文件数">{{ resolveReportTaskText(latestImportResult.totalFileCount) }}</el-descriptions-item>
<el-descriptions-item label="监测点数">{{ resolveReportTaskText(latestImportResult.pointCount) }}</el-descriptions-item>
<el-descriptions-item label="分组数">{{ resolveReportTaskText(latestImportResult.groupCount) }}</el-descriptions-item>
<el-descriptions-item label="Excel 附件数">
{{ resolveReportTaskText(latestImportResult.excelAttachmentCount) }}
</el-descriptions-item>
<el-descriptions-item label="Word 附件数">
{{ resolveReportTaskText(latestImportResult.wordAttachmentCount) }}
</el-descriptions-item>
<el-descriptions-item label="设备新增 / 复用">
{{ `${latestImportResult.deviceAddedCount || 0} / ${latestImportResult.deviceReuseCount || 0}` }}
</el-descriptions-item>
<el-descriptions-item label="委托单位新增 / 复用" :span="2">
{{ `${latestImportResult.clientAddedCount || 0} / ${latestImportResult.clientReuseCount || 0}` }}
</el-descriptions-item>
</el-descriptions>
<el-alert
v-if="latestImportResult.failReasons?.length"
:title="`存在 ${latestImportResult.failReasons.length} 条失败提示`"
type="warning"
:closable="false"
show-icon
class="section-alert"
>
<template #default>
<div v-for="reason in latestImportResult.failReasons" :key="reason" class="fail-reason">{{ reason }}</div>
</template>
</el-alert>
<el-table
v-if="orderedStages.length"
:data="orderedStages"
border
size="small"
max-height="240"
class="stage-table"
>
<el-table-column prop="stage" label="阶段" width="150" />
<el-table-column label="结果" width="120">
<template #default="{ row }">
<el-tag :type="row.success ? 'success' : 'warning'">{{ row.success ? '成功' : '未通过' }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="message" label="说明" min-width="280" show-overflow-tooltip />
</el-table>
</div>
<div v-if="snapshot" class="panel-block">
<div class="section-header">
<div class="section-title">已保存快照</div>
<div class="section-desc">编辑场景下展示当前任务最近一次已保存的台账处理摘要。</div>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item label="汇总文件">{{ resolveReportTaskText(snapshot.summaryFileName) }}</el-descriptions-item>
<el-descriptions-item label="导入模式">{{ resolveReportTaskText(snapshot.importMode) }}</el-descriptions-item>
<el-descriptions-item label="监测点 Sheet">
{{ resolveReportTaskText(snapshot.sheetSummary?.pointSheet) }}
</el-descriptions-item>
<el-descriptions-item label="监测点行数">{{ resolveReportTaskText(snapshot.rowCount) }}</el-descriptions-item>
<el-descriptions-item label="设备 Sheet">
{{ snapshot.sheetSummary?.deviceSheetPresent ? '存在' : '不存在' }}
</el-descriptions-item>
<el-descriptions-item label="委托单位 Sheet">
{{ snapshot.sheetSummary?.clientSheetPresent ? '存在' : '不存在' }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script setup lang="ts">
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, validateReportTaskLedgerApi } from '@/api/aireport/testReport'
import type { ReportTask } from '@/api/aireport/testReport/interface'
import { useDownloadWithServerFileName } from '@/hooks/useDownload'
import {
TEST_REPORT_LEDGER_IMPORT_STAGE_ORDER,
checkReportTaskLedgerPrepared,
getReportTaskErrorMessage,
isReportTaskLedgerAttachmentFileName,
normalizeReportTaskLedgerImportResult,
resolveReportTaskText
} from '../utils/testReport'
defineOptions({
name: 'ReportTaskLedgerImportPanel'
})
type ReportTaskLogType = 'info' | 'success' | 'warning' | 'error'
const props = defineProps<{
draftId: string
disabled?: boolean
preparedState: ReportTask.ReportTaskLedgerPreparedState
snapshot: ReportTask.ReportTaskLedgerImportSnapshot | null
}>()
const emit = defineEmits<{
(event: 'change', value: ReportTask.ReportTaskLedgerPreparedState): void
(event: 'log', payload: { type: ReportTaskLogType; message: string }): void
}>()
const importing = ref(false)
const selectedFiles = ref<UploadFile[]>([])
const latestImportResult = ref<ReportTask.ReportTaskLedgerImportResult | null>(null)
const orderedStages = computed(() => {
const stageMap = new Map((latestImportResult.value?.stages || []).map(stage => [stage.stage, stage]))
return TEST_REPORT_LEDGER_IMPORT_STAGE_ORDER.map(stage => {
const currentStage = stageMap.get(stage)
return {
stage,
success: currentStage?.success ?? false,
message: currentStage?.message || ''
}
}).filter(stage => stage.message || latestImportResult.value?.currentStage === stage.stage || stage.success)
})
const pushLog = (type: ReportTaskLogType, message: string) => {
emit('log', {
type,
message
})
}
const updatePreparedState = (patch: Partial<ReportTask.ReportTaskLedgerPreparedState>) => {
emit('change', {
...props.preparedState,
...patch
})
}
watch(
() => props.preparedState,
value => {
latestImportResult.value = value.latestImportResult
},
{ immediate: true, deep: true }
)
const formatFileSize = (size?: number) => {
if (!size) return '0 B'
if (size < 1024) return `${size} B`
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
return `${(size / (1024 * 1024)).toFixed(1)} MB`
}
const resolveFileTypeText = (fileName: string) => {
const normalizedName = String(fileName || '').trim().toLowerCase()
if (normalizedName === '台账信息汇总.xlsx') return '汇总台账'
if (normalizedName.endsWith('.doc') || normalizedName.endsWith('.docx')) return 'Word 附件'
if (normalizedName.endsWith('.xls') || normalizedName.endsWith('.xlsx')) return 'Excel 附件'
return '未知'
}
const handleFileChange = (_file: UploadFile, files: UploadFiles) => {
selectedFiles.value = [...files]
pushLog('info', `已选择 ${selectedFiles.value.length} 个待导入文件`)
if (props.preparedState.hasImported) {
updatePreparedState({
batchId: '',
pendingReimport: true
})
pushLog('warning', '已更换导入文件，需重新执行台账校验后才能继续保存')
}
}
const handleFileRemove = (_file: UploadFile, files: UploadFiles) => {
selectedFiles.value = [...files]
pushLog('info', `已更新待导入文件列表，当前剩余 ${selectedFiles.value.length} 个文件`)
if (props.preparedState.hasImported) {
updatePreparedState({
batchId: '',
pendingReimport: true
})
pushLog('warning', '导入文件已发生变化，之前的导入结果已标记为失效')
}
}
const removeSelectedFile = (index: number) => {
selectedFiles.value.splice(index, 1)
pushLog('info', `已删除第 ${index + 1} 个待导入文件`)
if (props.preparedState.hasImported) {
updatePreparedState({
batchId: '',
pendingReimport: true
})
pushLog('warning', '导入文件已发生变化，之前的导入结果已标记为失效')
}
}
const handleDownloadTemplate = async () => {
try {
await useDownloadWithServerFileName(downloadReportTaskLedgerTemplateApi, '台账信息汇总', undefined, false, '.xlsx')
pushLog('success', '台账导入模板下载成功')
} catch (error) {
const message = getReportTaskErrorMessage(error, '台账模板下载失败')
ElMessage.error(message)
pushLog('error', message)
}
}
const handleImportFiles = async () => {
if (importing.value) return
if (!props.draftId) {
const message = '报告任务 ID 缺失，无法执行台账校验'
ElMessage.error(message)
pushLog('error', message)
return
}
if (!selectedFiles.value.length) {
const message = '请先选择待校验的台账汇总与附件文件'
ElMessage.warning(message)
pushLog('warning', message)
return
}
const invalidFile = selectedFiles.value.find(file => !isReportTaskLedgerAttachmentFileName(file.name))
if (invalidFile) {
const message = '仅支持导入 .xls、.xlsx、.doc、.docx 文件'
ElMessage.warning(message)
pushLog('warning', `${message}，异常文件：${invalidFile.name}`)
return
}
const formData = new FormData()
selectedFiles.value.forEach(file => {
if (file.raw) {
formData.append('files', file.raw)
}
})
if (!formData.getAll('files').length) {
const message = '未检测到可上传的文件内容'
ElMessage.warning(message)
pushLog('warning', message)
return
}
importing.value = true
pushLog('info', `开始校验台账和附件文件，本次共上传 ${selectedFiles.value.length} 个文件`)
try {
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
})
if (
!checkReportTaskLedgerPrepared({
...props.preparedState,
batchId: normalizedResult.batchId || '',
latestImportResult: normalizedResult,
hasImported: Boolean(normalizedResult.success),
pendingReimport: false
})
) {
const message = '台账校验未通过，请根据阶段结果修正后重新校验'
ElMessage.warning(message)
pushLog('warning', message)
normalizedResult.failReasons?.forEach(reason => pushLog('warning', reason))
return
}
ElMessage.success('台账校验通过')
pushLog('success', '台账校验通过，可以继续填写基础信息')
} catch (error) {
updatePreparedState({
batchId: '',
hasImported: false
})
const message = getReportTaskErrorMessage(error, '台账校验失败')
ElMessage.error(message)
pushLog('error', message)
} finally {
importing.value = false
}
}
</script>
<style scoped lang="scss">
.ledger-import-panel {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
}
.panel-block {
border: 1px solid var(--el-border-color-light);
border-radius: 12px;
padding: 16px;
background: var(--el-fill-color-blank);
}
.panel-block:first-child {
flex: 1;
display: flex;
flex-direction: column;
}
.section-header {
margin-bottom: 14px;
}
.section-title {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.section-alert,
.file-table,
.stage-table,
.fail-reason + .fail-reason {
margin-top: 12px;
}
.toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: space-between;
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.toolbar-download {
margin-left: auto;
}
:deep(.el-empty) {
flex: 1;
}
</style>

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

@@ -21,97 +21,104 @@ assertFileIncludes(path.join(srcDir, 'constants/dictCodes.ts'), ['TEST_REPORT_CO
assertFileIncludes(path.join(apiDir, 'index.ts'), [
"const REPORT_TASK_BASE_URL = '/api/test-report'",
'validateReportTaskLedgerApi',
'listReportTasksApi',
'createReportTaskApi',
'updateReportTaskApi',
'deleteReportTasksApi',
'getReportTaskDetailApi',
'exportReportTasksApi',
'submitReportTaskAuditApi',
'downloadReportTaskLedgerTemplateApi',
'importReportTaskLedgerApi',
'downloadReportTaskLedgerTemplateApi'
'listReportTaskGroupReportsApi'
])
assertFileIncludes(path.join(apiDir, 'interface/index.ts'), [
'ReportTaskLedgerValidateResult',
'ReportTaskLedgerImportRequest',
'validateSessionId',
'validateResult',
'validatedBatchId',
'pendingRevalidate'
'export namespace ReportTask',
'ReportTaskRecord',
'ReportTaskListParams',
'ReportTaskAddParam',
'ReportTaskSaveRequest',
'ReportTaskAuditRequest',
'ReportTaskLedgerImportResult',
'ReportTaskLedgerImportStageRecord',
'ReportTaskLedgerImportSnapshot',
'ReportTaskGroupReportRecord',
'ReportTaskLedgerPreparedState'
])
assertFileIncludes(path.join(pageDir, 'utils/reportTaskFlow.ts'), [
'REPORT_TASK_FLOW_STEPS',
'createEmptyLedgerPreparedState',
'hasValidatedLedgerBatch',
'resolveInitialFlowStep',
'canReachFlowStep',
'resolveFlowStepStatus'
assertFileIncludes(path.join(pageDir, 'utils/testReport.ts'), [
'TEST_REPORT_EXCEL_EXTENSIONS',
'REPORT_TASK_GROUP_REPORT_GENERATE_STATUS_TEXT_MAP',
'isReportTaskExcelFileName',
'TEST_REPORT_LEDGER_IMPORT_STAGE_ORDER',
'normalizeReportTaskLedgerImportResult',
'normalizeReportTaskLedgerSnapshot',
'checkReportTaskLedgerPrepared',
'resolveReportTaskGroupReportGenerateStateText',
'resolveReportTaskGroupReportGenerateStateTagType'
])
assertFileIncludes(path.join(pageDir, 'utils/testReportForm.ts'), [
'createDefaultReportTaskFormModel',
'buildReportTaskFormContext',
'buildReportTaskSavePayload'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskPrepareStep.vue'), [
"name: 'ReportTaskPrepareStep'",
'validateReportTaskLedgerApi',
assertFileIncludes(path.join(pageDir, 'components/ReportTaskLedgerImportPanel.vue'), [
"name: 'ReportTaskLedgerImportPanel'",
'downloadReportTaskLedgerTemplateApi',
'selectedFiles',
'validateResult',
'sessionId',
'canContinueUpload',
'points',
'attachments',
'执行校验'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskImportStep.vue'), [
"name: 'ReportTaskImportStep'",
'importReportTaskLedgerApi',
'validatedBatchId',
'执行导入',
'ledger/validate -> ledger/import'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskBaseInfoStep.vue'), [
"name: 'ReportTaskBaseInfoStep'",
'register-form',
'formRules',
'summary-strip'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskCompleteStep.vue'), [
"name: 'ReportTaskCompleteStep'",
'报告任务新增完成',
'报告任务编辑完成'
'selectedFiles',
'latestImportResult',
'handleImportFiles',
'toolbar-actions',
'toolbar-download'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskFormDialog.vue'), [
"name: 'ReportTaskFormDialog'",
'ReportTaskPrepareStep',
'ReportTaskImportStep',
'ReportTaskBaseInfoStep',
'ReportTaskCompleteStep',
'REPORT_TASK_FLOW_STEPS',
'createEmptyLedgerPreparedState',
'buildReportTaskFormContext',
'buildReportTaskSavePayload',
'ledger/validate -> ledger/import',
'log-floating-panel',
'el-tooltip',
'ReportTaskLedgerImportPanel',
'REPORT_TASK_FORM_STEPS',
'currentStep',
'logEntries',
'logPanelExpanded',
'goToImportStep',
'handleLedgerPreparedChange',
'ledgerPreparedState',
'activeDraftId',
'checkReportTaskLedgerPrepared',
'log-panel-header',
'log-panel-body',
'log-panel-toggle',
'white-space: nowrap',
'text-overflow: ellipsis',
'height: 560px',
'max-height: calc(100vh - 40px)',
'display: flex',
'padding: 16px 18px 12px',
'gap: 6px',
'padding: 0 12px 10px',
'.flow-main {\n display: flex;\n flex: 1;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n}'
'log-empty'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskDetailDialog.vue'), [
"name: 'ReportTaskDetailDialog'",
'groupReports',
'generateState',
'group-report-title',
'resolveReportTaskGroupReportGenerateStateText'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskAuditDialog.vue'), [
"name: 'ReportTaskAuditDialog'",
'checkResult'
])
assertFileIncludes(path.join(pageDir, 'index.vue'), [
"name: 'ReportTaskPage'",
'<ProTable',
'ReportTaskFormDialog',
'@refresh-options',
'ledger/validate -> ledger/import -> add/update'
'ReportTaskDetailDialog',
'ReportTaskAuditDialog',
'listReportTaskGroupReportsApi',
'detailGroupReports',
'ledger/import -> add/update'
])
assertFileIncludes(path.join(pageDir, 'components/ReportTaskLedgerImportPanel.vue'), [
'min-height: 0',
'flex: 1',
'display: flex',
'flex-direction: column'
])
console.log('testReport page contract passed')

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

@@ -40,7 +40,6 @@
:report-model-options="reportModelOptions"
:company-options="companyOptions"
:standard-options="standardOptions"
@refresh-options="refreshFormOptions"
@submit="handleSaveReportTask"
/>
@@ -93,11 +92,6 @@ import {
buildDictSelectOptions,
buildOptionLabelMap,
getReportTaskErrorMessage,
getReportTaskGenerateStateTagType,
getReportTaskGenerateStateText,
getReportTaskStateTagType,
getReportTaskStateText,
REPORT_TASK_STATE_OPTIONS,
normalizeReportTaskGroupReportList,
normalizeReportTaskListParams,
normalizeReportTaskPage,
@@ -130,7 +124,6 @@ const reportModelOptions = ref<Array<{ label: string; value: string }>>([])
const companyOptions = computed(() => buildDictSelectOptions(dictStore.getDictData(DICT_CODES.TEST_REPORT_COMPANY)))
const standardOptions = computed(() => buildDictSelectOptions(dictStore.getDictData(DICT_CODES.TEST_REPORT_STANDARD)))
const stateOptions = REPORT_TASK_STATE_OPTIONS
const companyLabelMap = computed(() => buildOptionLabelMap(companyOptions.value))
const standardLabelMap = computed(() => buildOptionLabelMap(standardOptions.value))
const requiredDictCodes = [DICT_CODES.TEST_REPORT_COMPANY, DICT_CODES.TEST_REPORT_STANDARD]
@@ -171,25 +164,6 @@ const columns = reactive<ColumnProps<ReportTask.ReportTaskRecord>[]>([
}
}
},
{
prop: 'state',
label: '报告状态',
minWidth: 120,
enum: stateOptions,
search: {
el: 'select',
order: 3,
props: {
clearable: true,
placeholder: '请选择报告状态'
}
},
render: ({ row }) => (
<el-tag type={getReportTaskStateTagType(row.state)} effect="light">
{getReportTaskStateText(row.state)}
</el-tag>
)
},
{ prop: 'no', label: '报告编号', minWidth: 180, fixed: 'left', render: ({ row }) => resolveReportTaskText(row.no) },
{ prop: 'clientUnitName', label: '委托单位', minWidth: 160, render: ({ row }) => resolveReportTaskText(row.clientUnitName) },
{ prop: 'reportModelName', label: '报告模板', minWidth: 160, render: ({ row }) => resolveReportTaskText(row.reportModelName) },
@@ -207,16 +181,6 @@ const columns = reactive<ColumnProps<ReportTask.ReportTaskRecord>[]>([
showOverflowTooltip: true,
render: ({ row }) => resolveReportTaskStandardText(row.standard, standardLabelMap.value)
},
{
prop: 'reportGenerateState',
label: '生成状态',
minWidth: 120,
render: ({ row }) => (
<el-tag type={getReportTaskGenerateStateTagType(row.reportGenerateState)} effect="light">
{getReportTaskGenerateStateText(row.reportGenerateState)}
</el-tag>
)
},
{ prop: 'pointCount', label: '监测点数', minWidth: 100, render: ({ row }) => resolveReportTaskText(row.pointCount) },
{ prop: 'groupCount', label: '分组数', minWidth: 100, render: ({ row }) => resolveReportTaskText(row.groupCount) },
{ prop: 'phonenumber', label: '联系电话', minWidth: 140, render: ({ row }) => resolveReportTaskText(row.phonenumber) },
@@ -287,10 +251,6 @@ const ensureFormOptionsReady = async () => {
}
}
const refreshFormOptions = async () => {
await ensureFormOptionsReady()
}
const getTableList = async (params: ReportTask.ReportTaskListParams = {}) => {
const response = await listReportTasksApi(normalizeReportTaskListParams(params))
const pageData = normalizeReportTaskPage<ReportTask.ReportTaskRecord>(
@@ -377,15 +337,13 @@ const handleSaveReportTask = async (params: ReportTask.ReportTaskSaveRequest) =>
formSaving.value = true
try {
// 关键业务节点：文件校验与正式导入已在弹窗内完成，页面层这里只执行最终 add/update，整体顺序为 ledger/validate -> 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) {

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>