Compare commits

..

2 Commits

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

View File

@@ -37,15 +37,11 @@ export const downloadReportTaskLedgerTemplateApi = (): Promise<AxiosResponse<Blo
}) as unknown as Promise<AxiosResponse<Blob>> }) as unknown as Promise<AxiosResponse<Blob>>
export const validateReportTaskLedgerApi = (id: string, formData: FormData) => { 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' } 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) => { export const listReportTaskGroupReportsApi = (id: string) => {
return http.get<ReportTask.ReportTaskGroupReportRecord[]>(`${REPORT_TASK_BASE_URL}/${id}/group-report/list`) return http.get<ReportTask.ReportTaskGroupReportRecord[]>(`${REPORT_TASK_BASE_URL}/${id}/group-report/list`)
} }

View File

@@ -1,11 +1,9 @@
export namespace ReportTask { 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 ReportTaskGroupReportGenerateState = 0 | 1 | 2 | 3
export type ReportTaskLedgerImportStage = export type ReportTaskLedgerImportStage =
| '选择文件' | '选择文件'
| '校验文件' | '校验文件'
| '文件导入' | '文件上传'
| '基础资料维护' | '基础资料维护'
| '完成' | '完成'
@@ -25,11 +23,10 @@ export namespace ReportTask {
checkerName?: string | null checkerName?: string | null
checkTime?: string | null checkTime?: string | null
checkResult?: string | null checkResult?: string | null
state?: ReportTaskState | null
status?: number status?: number
pointCount?: number | null pointCount?: number | null
groupCount?: number | null groupCount?: number | null
reportGenerateState?: ReportTaskGenerateState | null reportGenerateState?: number | null
createBy?: string | null createBy?: string | null
createByName?: string | null createByName?: string | null
createTime?: string | null createTime?: string | null
@@ -43,7 +40,6 @@ export namespace ReportTask {
keyword?: string keyword?: string
searchBeginTime?: string searchBeginTime?: string
searchEndTime?: string searchEndTime?: string
state?: ReportTaskState | ''
timeRange?: string[] timeRange?: string[]
pageNum?: number pageNum?: number
pageSize?: number pageSize?: number
@@ -58,6 +54,7 @@ export namespace ReportTask {
contractNumber: string contractNumber: string
standard: string[] standard: string[]
data: string data: string
batchId?: string
phonenumber?: string phonenumber?: string
} }
@@ -98,57 +95,12 @@ export namespace ReportTask {
} | null } | 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 { export interface ReportTaskLedgerImportResult {
batchId?: string | null batchId?: string | null
currentStage?: ReportTaskLedgerImportStage | string | null currentStage?: ReportTaskLedgerImportStage | string | null
success?: boolean | null success?: boolean | null
summaryFileName?: string | null summaryFileName?: string | null
tempStoragePath?: string | null
totalFileCount?: number totalFileCount?: number
uploadedFileCount?: number
pointCount?: number pointCount?: number
excelAttachmentCount?: number excelAttachmentCount?: number
wordAttachmentCount?: number wordAttachmentCount?: number
@@ -161,10 +113,6 @@ export namespace ReportTask {
stages?: ReportTaskLedgerImportStageRecord[] | null stages?: ReportTaskLedgerImportStageRecord[] | null
} }
export interface ReportTaskLedgerImportRequest {
batchId: string
}
export interface ReportTaskPointRecord { export interface ReportTaskPointRecord {
id?: string id?: string
groupNo?: number | null groupNo?: number | null
@@ -204,12 +152,10 @@ export namespace ReportTask {
export interface ReportTaskLedgerPreparedState { export interface ReportTaskLedgerPreparedState {
draftId: string draftId: string
validateSessionId: string batchId: string
validateResult: ReportTaskLedgerValidateResult | null
latestImportResult: ReportTaskLedgerImportResult | null latestImportResult: ReportTaskLedgerImportResult | null
snapshot: ReportTaskLedgerImportSnapshot | null snapshot: ReportTaskLedgerImportSnapshot | null
hasImported: boolean hasImported: boolean
validatedBatchId: string pendingReimport: boolean
pendingRevalidate: 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,15 +24,18 @@ 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' }
})
} }
// 删除用户 // 删除用户
@@ -26,7 +43,6 @@ 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`)
@@ -41,3 +57,9 @@ export const updatePassWord = (params: User.ResPassWordUser) => {
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

@@ -6,17 +6,17 @@
append-to-body append-to-body
destroy-on-close destroy-on-close
class="report-task-flow-dialog" class="report-task-flow-dialog"
@closed="resetFlow" @closed="resetForm"
> >
<div class="report-task-form-dialog"> <div class="report-task-form-dialog">
<div class="flow-nav"> <div class="flow-nav">
<button <button
v-for="step in REPORT_TASK_FLOW_STEPS" v-for="step in REPORT_TASK_FORM_STEPS"
:key="step.value" :key="step.value"
type="button" type="button"
class="flow-step" class="flow-step"
:class="[`is-${resolveFlowStepStatus(step.value, currentStep, ledgerPreparedState)}`, { 'is-clickable': canReachFlowStep(step.value, ledgerPreparedState, currentStep) }]" :class="[`is-${resolveStepStatus(step.value)}`, { 'is-clickable': canSwitchStep(step.value) }]"
:disabled="!canReachFlowStep(step.value, ledgerPreparedState, currentStep)" :disabled="!canSwitchStep(step.value)"
@click="handleStepClick(step.value)" @click="handleStepClick(step.value)"
> >
<span class="flow-step-index">{{ step.index }}</span> <span class="flow-step-index">{{ step.index }}</span>
@@ -27,65 +27,149 @@
</button> </button>
</div> </div>
<div class="report-task-form-body">
<div class="flow-main"> <div class="flow-main">
<ReportTaskPrepareStep <div v-if="currentStep === 'import'" class="flow-panel">
v-if="currentStep === 'prepare'" <ReportTaskLedgerImportPanel
:draft-id="activeDraftId" :draft-id="activeDraftId"
:disabled="saving" :disabled="saving"
:prepared-state="ledgerPreparedState" :prepared-state="ledgerPreparedState"
:snapshot="ledgerSnapshot"
@change="handleLedgerPreparedChange" @change="handleLedgerPreparedChange"
@log="handleLog" @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> </div>
<aside class="log-floating-panel" :class="{ 'is-collapsed': !logPanelExpanded }"> <div v-else-if="currentStep === 'form'" class="flow-panel">
<el-button <div class="form-panel">
class="log-panel-collapse-toggle" <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="108px" class="report-task-form">
type="primary" <el-row :gutter="16">
:icon="logPanelExpanded ? ArrowRight : ArrowLeft" <el-col :xs="24" :sm="12">
circle <el-form-item label="报告编号" prop="no">
@click="logPanelExpanded = !logPanelExpanded" <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="summary-strip">
<div class="log-panel"> <div class="summary-item">
<div class="log-panel-header"> <span class="summary-label">导入状态</span>
<div class="log-title">异常日志</div> <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>
<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 class="log-popover-body">
<div v-if="logEntries.length" class="log-list"> <div v-if="logEntries.length" class="log-list">
<div v-for="entry in logEntries" :key="entry.id" class="log-item"> <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> <el-tag size="small" :type="resolveLogTagType(entry.type)">{{ resolveLogTypeText(entry.type) }}</el-tag>
<span class="log-time">{{ entry.time }}</span> <span class="log-time">{{ entry.time }}</span>
</div> </div>
<el-tooltip :content="entry.message" placement="top-start">
<div class="log-message">{{ entry.message }}</div> <div class="log-message">{{ entry.message }}</div>
</el-tooltip>
</div> </div>
</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>
</div> </div>
</div> </div>
</aside>
</div>
</div>
<template #footer> <template #footer>
<el-button :disabled="saving" @click="visibleProxy = false">{{ currentStep === 'done' ? '关闭' : '取消' }}</el-button> <el-button :disabled="saving" @click="visibleProxy = false">{{ currentStep === 'done' ? '关闭' : '取消' }}</el-button>
<template v-if="currentStep === 'prepare'"> <template v-if="currentStep === 'import'">
<el-button type="primary" :disabled="!canGoToImport" @click="goToImportStep">下一步</el-button> <el-button type="primary" :disabled="!canSubmit" @click="goToFormStep">下一步</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> </template>
<template v-else-if="currentStep === 'form'"> <template v-else-if="currentStep === 'form'">
@@ -128,32 +202,52 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue' import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ElMessage, type FormInstance } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue' import { computed, reactive, ref, watch } from 'vue'
import type { ReportTask } from '@/api/aireport/testReport/interface' import type { ReportTask } from '@/api/aireport/testReport/interface'
import ReportTaskBaseInfoStep from './ReportTaskBaseInfoStep.vue' import { generateUUID } from '@/utils'
import ReportTaskCompleteStep from './ReportTaskCompleteStep.vue' import ReportTaskLedgerImportPanel from './ReportTaskLedgerImportPanel.vue'
import ReportTaskImportStep from './ReportTaskImportStep.vue'
import ReportTaskPrepareStep from './ReportTaskPrepareStep.vue'
import { import {
REPORT_TASK_FLOW_STEPS, checkReportTaskLedgerPrepared,
canReachFlowStep, getReportTaskErrorMessage,
createEmptyLedgerPreparedState, normalizeReportTaskLedgerSnapshot,
hasValidatedLedgerBatch, parseReportTaskStandardIds,
resolveFlowStepStatus, stringifyReportTaskStandardIds
resolveInitialFlowStep, } from '../utils/testReport'
type ReportTaskFlowStep
} from '../utils/reportTaskFlow'
import { buildReportTaskFormContext, buildReportTaskSavePayload, createDefaultReportTaskFormModel } from '../utils/testReportForm'
import { checkReportTaskLedgerPrepared, getReportTaskErrorMessage } from '../utils/testReport'
defineOptions({ defineOptions({
name: 'ReportTaskFormDialog' name: 'ReportTaskFormDialog'
}) })
type ReportTaskFormStep = 'import' | 'form' | 'done'
type ReportTaskLogType = 'info' | 'success' | 'warning' | 'error' 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<{ const props = defineProps<{
visible: boolean visible: boolean
mode: 'create' | 'edit' mode: 'create' | 'edit'
@@ -169,29 +263,91 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'update:visible', value: boolean): void (event: 'update:visible', value: boolean): void
(event: 'submit', value: ReportTask.ReportTaskSaveRequest): void (event: 'submit', value: ReportTask.ReportTaskSaveRequest): void
(event: 'refresh-options'): void
}>() }>()
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const activeDraftId = ref('') const activeDraftId = ref('')
const currentStep = ref<ReportTaskFlowStep>('prepare') const currentStep = ref<ReportTaskFormStep>('import')
const logPanelExpanded = ref(false) 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 = reactive(createEmptyLedgerPreparedState()) const ledgerPreparedState = ref<ReportTask.ReportTaskLedgerPreparedState>({
const formModel = reactive(createDefaultReportTaskFormModel()) draftId: '',
batchId: '',
latestImportResult: null,
snapshot: null,
hasImported: false,
pendingReimport: false
})
const lastHandledSaveSuccessVersion = ref(0) 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({ const visibleProxy = computed({
get: () => props.visible, get: () => props.visible,
set: value => emit('update:visible', value) set: value => emit('update:visible', value)
}) })
const canGoToImport = computed(() => hasValidatedLedgerBatch(ledgerPreparedState)) const ledgerSnapshot = computed(() => ledgerPreparedState.value.snapshot)
const canVisitImport = computed(() => canGoToImport.value || ledgerPreparedState.hasImported || Boolean(ledgerPreparedState.snapshot)) const canSubmit = computed(() => !props.saving && checkReportTaskLedgerPrepared(ledgerPreparedState.value))
const canGoToForm = computed(() => checkReportTaskLedgerPrepared(ledgerPreparedState)) const importSummary = computed(() => {
const canSubmit = computed(() => !props.saving && checkReportTaskLedgerPrepared(ledgerPreparedState)) 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) => { const pushLog = (type: ReportTaskLogType, message: string) => {
logEntries.value.push({ logEntries.value.push({
@@ -206,13 +362,8 @@ const handleLog = (payload: { type: ReportTaskLogType; message: string }) => {
pushLog(payload.type, payload.message) pushLog(payload.type, payload.message)
} }
const handleRegisterForm = (value: FormInstance | undefined) => { const resolveCurrentOptionLabel = (options: Array<{ label: string; value: string }>, value: string) =>
formRef.value = value options.find(option => option.value === value)?.label || value || '-'
}
const handleFormModelChange = (value: typeof formModel) => {
Object.assign(formModel, value)
}
const resolveLogTagType = (type: ReportTaskLogType) => { const resolveLogTagType = (type: ReportTaskLogType) => {
if (type === 'success') return 'success' if (type === 'success') return 'success'
@@ -228,102 +379,124 @@ const resolveLogTypeText = (type: ReportTaskLogType) => {
return '信息' return '信息'
} }
const resetFlow = () => { const resetForm = () => {
formRef.value?.clearValidate() 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 = '' activeDraftId.value = ''
currentStep.value = 'prepare' currentStep.value = 'import'
logPanelExpanded.value = false logPanelExpanded.value = true
logEntries.value = [] logEntries.value = []
Object.assign(ledgerPreparedState, createEmptyLedgerPreparedState()) ledgerPreparedState.value = {
} draftId: '',
batchId: '',
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,
latestImportResult: null, latestImportResult: null,
snapshot: context.snapshot, snapshot: null,
hasImported: context.hasPreparedImport, hasImported: false,
validatedBatchId: '', pendingReimport: false
pendingRevalidate: false }
})
currentStep.value = resolveInitialFlowStep(props.mode, ledgerPreparedState)
if (currentStep.value === 'form') {
pushLog('info', '编辑场景检测到已有导入结果,默认进入基础信息维护步骤')
} else {
pushLog('info', '已进入文件选择与校验步骤,请先完成文件准备')
} }
if (context.snapshot) { const buildDraftId = () => {
pushLog('info', `已加载最近一次导入快照:${context.snapshot.summaryFileName || '未命名汇总文件'}`) 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) { } catch (error) {
const message = getReportTaskErrorMessage(error, '报告任务初始化失败') const message = getReportTaskErrorMessage(error, '报告任务台账快照加载失败')
ElMessage.error(message) ElMessage.error(message)
pushLog('error', message) pushLog('error', message)
} }
} }
const goToPrepareStep = () => { const goToFormStep = () => {
currentStep.value = 'prepare' if (!canSubmit.value) {
pushLog('info', '已返回文件选择与校验步骤') pushLog('warning', '当前校验尚未完成,不能进入基础信息填写步骤')
return
}
currentStep.value = 'form'
pushLog('info', '已切换到基础信息填写步骤')
} }
const goToImportStep = () => { const goToImportStep = () => {
if (!canVisitImport.value) {
pushLog('warning', '当前文件校验尚未通过,不能进入正式导入步骤')
return
}
currentStep.value = 'import' currentStep.value = 'import'
pushLog('info', '已切换到文件导入步骤') pushLog('info', '已返回数据导入步骤,可继续沿用当前结果或重新校验台账')
}
const goToFormStep = () => {
if (!canGoToForm.value) {
pushLog('warning', '当前正式导入尚未完成,不能进入基础信息维护步骤')
return
}
currentStep.value = 'form'
pushLog('info', '已切换到基础信息维护步骤')
} }
const handleLedgerPreparedChange = (value: ReportTask.ReportTaskLedgerPreparedState) => { const handleLedgerPreparedChange = (value: ReportTask.ReportTaskLedgerPreparedState) => {
const wasReadyForImport = hasValidatedLedgerBatch(ledgerPreparedState) const wasPrepared = checkReportTaskLedgerPrepared(ledgerPreparedState.value)
const wasReadyForSubmit = checkReportTaskLedgerPrepared(ledgerPreparedState) const nextState = {
Object.assign(ledgerPreparedState, {
...value, ...value,
draftId: activeDraftId.value draftId: activeDraftId.value
})
if (!wasReadyForImport && hasValidatedLedgerBatch(ledgerPreparedState) && currentStep.value === 'prepare') {
currentStep.value = 'import'
pushLog('success', '文件校验已通过,已自动进入正式导入步骤')
return
} }
if (!wasReadyForSubmit && checkReportTaskLedgerPrepared(ledgerPreparedState)) { ledgerPreparedState.value = nextState
emit('refresh-options')
if (!wasPrepared && checkReportTaskLedgerPrepared(nextState) && currentStep.value === 'import') {
currentStep.value = 'form' currentStep.value = 'form'
pushLog('success', '正式导入已完成,已自动进入基础信息维护步骤') pushLog('success', '台账校验已完成,已自动进入基础信息填写步骤')
} }
} }
const handleStepClick = (step: ReportTaskFlowStep) => { const canSwitchStep = (step: ReportTaskFormStep) => {
if (!canReachFlowStep(step, ledgerPreparedState, currentStep.value)) return if (step === 'import') return true
if (step === 'prepare') { if (step === 'form') return canSubmit.value || currentStep.value === 'form' || currentStep.value === 'done'
goToPrepareStep() return currentStep.value === 'done'
return
} }
const handleStepClick = (step: ReportTaskFormStep) => {
if (!canSwitchStep(step)) return
if (step === 'import') { if (step === 'import') {
goToImportStep() goToImportStep()
return 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( watch(
() => [props.visible, props.mode, props.record?.id], () => [props.visible, props.mode, props.record?.id],
async ([visible]) => { async ([visible]) => {
if (!visible) return if (!visible) return
resetFlow() resetForm()
await fillFlowContext() await fillForm()
}, },
{ immediate: true } { immediate: true }
) )
@@ -361,34 +541,42 @@ const submitForm = async () => {
return return
} }
if (!checkReportTaskLedgerPrepared(ledgerPreparedState)) { if (!checkReportTaskLedgerPrepared(ledgerPreparedState.value)) {
const message = '请先完成正式导入后再提交基础信息' const message = '请先完成台账校验后再提交基础信息'
ElMessage.warning(message) ElMessage.warning(message)
pushLog('warning', message) pushLog('warning', message)
return return
} }
// 关键业务节点:当前弹窗只接受已完成 ledger/validate -> ledger/import 的任务,再执行最终 add/update 保存基础信息。 pushLog('info', props.mode === 'create' ? '开始提交新增任务基础信息并写入台账数据' : '开始提交编辑后的任务基础信息并更新台账数据')
pushLog('info', props.mode === 'create' ? '开始提交新增任务基础信息' : '开始提交编辑后的任务基础信息') emit('submit', {
emit('submit', buildReportTaskSavePayload(activeDraftId.value, formModel)) 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> </script>
<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;
height: 560px;
min-height: 0; min-height: 0;
} }
.flow-nav { .flow-nav {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0; gap: 0;
padding: 16px 18px 12px; padding: 22px 18px 18px;
border: 1px solid #d9ebe7; border: 1px solid #d9ebe7;
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
@@ -399,8 +587,8 @@ const submitForm = async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 6px; gap: 10px;
padding: 0 12px 10px; padding: 0 12px 18px;
border: none; border: none;
background: transparent; background: transparent;
text-align: center; text-align: center;
@@ -497,83 +685,92 @@ const submitForm = async () => {
color: #b9bfc9; color: #b9bfc9;
} }
.report-task-form-body { .flow-main {
position: relative;
display: flex;
flex-direction: column;
min-height: 0; min-height: 0;
flex: 1; flex: 1;
padding-bottom: 0;
overflow: hidden; overflow: hidden;
} }
.flow-main { .flow-panel {
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;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; gap: 16px;
width: 300px;
min-height: 0; min-height: 0;
transition: width 0.2s ease;
} }
.log-floating-panel.is-collapsed { .form-panel {
width: 0; border: 1px solid var(--el-border-color-light);
border-radius: 12px;
padding: 18px;
background: var(--el-fill-color-blank);
} }
.log-panel-collapse-toggle { .summary-strip {
position: absolute; display: grid;
top: 12px; grid-template-columns: repeat(4, minmax(0, 1fr));
left: -28px; gap: 12px;
flex-shrink: 0; margin-top: 8px;
z-index: 4001;
} }
.log-panel-body-wrapper { .summary-item {
position: relative; padding: 12px 14px;
flex: 1; border-radius: 10px;
min-height: 0; background: var(--el-fill-color-light);
width: 100%;
z-index: 4000;
isolation: isolate;
} }
.log-floating-panel.is-collapsed .log-panel-body-wrapper { .summary-label {
display: none; 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 { .log-panel {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
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: var(--el-box-shadow-light); flex: 0 0 auto;
} }
.log-panel-header { .log-panel-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
width: 100%; width: 100%;
min-height: 46px; min-height: 44px;
padding: 0 16px; padding: 0 16px;
border: none;
background: linear-gradient(180deg, #eef3ff 0%, #e6ecff 100%); 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 { .log-title {
@@ -581,26 +778,20 @@ 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 {
position: relative;
display: flex;
flex: 1;
min-height: 0;
border-top: 1px solid #d9e3ff; border-top: 1px solid #d9e3ff;
background: #fff; background: #fff;
z-index: 1;
} }
.log-popover-body { .log-popover-body {
position: relative; max-height: 160px;
flex: 1;
min-height: 0;
overflow: auto; overflow: auto;
padding: 0; padding: 0;
background: #fff; background: #fff;
z-index: 1;
} }
.log-list { .log-list {
@@ -610,7 +801,7 @@ const submitForm = async () => {
.log-item { .log-item {
display: grid; 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); border-top: 1px solid var(--el-border-color-lighter);
} }
@@ -620,27 +811,27 @@ const submitForm = async () => {
.log-meta, .log-meta,
.log-message { .log-message {
padding: 8px 10px; padding: 10px 14px;
} }
.log-meta { .log-meta {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 10px;
border-right: 1px solid var(--el-border-color-lighter); border-right: 1px solid var(--el-border-color-lighter);
background: #f6f8ff; background: #f6f8ff;
white-space: nowrap; white-space: nowrap;
} }
.log-time { .log-time {
font-size: 11px; font-size: 12px;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
line-height: 1; line-height: 1;
} }
.log-message { .log-message {
font-size: 12px; font-size: 13px;
line-height: 1.2; line-height: 1.3;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@@ -648,41 +839,25 @@ const submitForm = async () => {
} }
.log-empty { .log-empty {
display: flex; padding: 18px 0;
align-items: center;
justify-content: center;
height: 100%;
min-height: 180px;
} }
:deep(.report-task-flow-dialog .el-dialog__body) { :deep(.report-task-flow-dialog .el-dialog__body) {
display: flex;
min-height: 0;
overflow: hidden; overflow: hidden;
} }
:deep(.report-task-flow-dialog .el-dialog) { :deep(.el-select),
display: flex; :deep(.el-input) {
flex-direction: column; width: 100%;
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;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.flow-nav { .flow-nav,
.summary-strip {
grid-template-columns: 1fr; grid-template-columns: 1fr;
}
.flow-nav {
gap: 14px; gap: 14px;
padding: 16px; padding: 16px;
} }
@@ -704,23 +879,6 @@ const submitForm = async () => {
align-items: flex-start; 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 { .log-panel-header {
padding: 0 14px; padding: 0 14px;
} }
@@ -733,5 +891,6 @@ const submitForm = async () => {
border-right: none; border-right: none;
border-bottom: 1px solid var(--el-border-color-lighter); border-bottom: 1px solid var(--el-border-color-lighter);
} }
} }
</style> </style>

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>

View File

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

View File

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

@@ -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> <script lang="ts" setup>
import { ref,computed, type Ref } from 'vue' import { computed, reactive, ref, type Ref } from 'vue'
import {dialogSmall} from '@/utils/elementBind'
import { ElMessage, type FormInstance, type FormItemRule } from 'element-plus' import { ElMessage, type FormInstance, type FormItemRule } from 'element-plus'
import { import { dialogSmall } from '@/utils/elementBind'
addUser, import { addUser, previewUserSignature, updateUser } from '@/api/user/user'
updateUser, import type { Role } from '@/api/user/interface/role'
} from '@/api/user/user' import type { User } from '@/api/user/interface/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 }
}
const { dialogVisible, titleType, formContent } = useMetaInfo() defineOptions({
// 清空formContent name: 'UserPopup'
const resetFormContent = () => {
formContent.value = {
id: '', //用户ID作为唯一标识
name: '', //用户名(别名)
loginName: '',//登录名
password: '',//密码
phone: '', //手机号
email: '', //邮箱
loginTime: '',//最后一次登录时间
loginErrorTimes: 0,//登录错误次数
lockTime: '', //用户密码错误锁定时间
state: 1, //
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增用户' : '编辑用户'
}) })
const SIGNATURE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'bmp', 'webp']
//定义规则 type UserPopupMode = 'add' | 'edit'
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' }],
})
interface UserFormModel {
// 关闭弹窗 id: string
const close = () => { name: string
dialogVisible.value = false loginName: string
// 清空dialogForm中的值 password: string
resetFormContent() phone: string
// 重置表单 email: string
dialogFormRef.value?.resetFields() 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<{ 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> </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>