449 lines
17 KiB
Vue
449 lines
17 KiB
Vue
<template>
|
||
<el-card class="hl-card">
|
||
<template #header>
|
||
<span><span v-html="dialogTitle"></span>页</span>
|
||
</template>
|
||
<el-form ref="formRef" label-width="140px" :rules="formRules" :model="formData" v-loading="formLoading">
|
||
<!-- 基础信息 横向布局 -->
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
|
||
</template>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="项目编号" prop="projectCode">
|
||
<el-input class="!w-260px" v-model="formData.projectCode" :disabled="true" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="项目名称" prop="projectName">
|
||
<el-input class="!w-260px" v-model="formData.projectName" :disabled="true" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="子项目编号" prop="projectSubCode">
|
||
<el-input class="!w-260px" v-model="formData.projectSubCode" :disabled="true" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="子项目名称" prop="projectSubName">
|
||
<el-input class="!w-260px" v-model="formData.projectSubName" :disabled="true" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="客户名称" prop="customerName">
|
||
<el-input class="!w-260px" v-model="formData.customerName" :disabled="true" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- 表格类信息 -->
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">检验报告</span>
|
||
</template>
|
||
<el-row>
|
||
<el-col>
|
||
<el-card class="hl-incard">
|
||
<el-col v-if="active != 'detail'">
|
||
<el-upload
|
||
ref="compositionUploadRef" :file-list="compositionUploadFiles" multiple :action="uploadUrl" :headers="{
|
||
Authorization: 'Bearer ' + getAccessToken(),
|
||
'tenant-id': getTenantId()
|
||
}" name="files" :show-file-list="false" :auto-upload="false" :data="compositionUploadData" :on-change="compositionUploadChange" :on-error="handleError" :on-success="handleSuccess" :before-upload="before" class="upload-file-uploader">
|
||
<el-button type="primary">
|
||
<Icon icon="ep:upload-filled" />上传材质报告
|
||
</el-button>
|
||
</el-upload>
|
||
<el-upload
|
||
ref="heatUploadRef" :file-list="heatUploadFiles" multiple :action="uploadUrl" :headers="{
|
||
Authorization: 'Bearer ' + getAccessToken(),
|
||
'tenant-id': getTenantId()
|
||
}" name="files" :show-file-list="false" :auto-upload="false" :data="heatUploadData" :on-change="heatUploadChange" :on-error="handleError" :on-success="handleSuccess" :before-upload="before" class="upload-file-uploader">
|
||
<el-button type="primary">
|
||
<Icon icon="ep:upload-filled" />上传热处理报告
|
||
</el-button>
|
||
</el-upload>
|
||
<el-upload
|
||
ref="scanUploadRef" :file-list="scanUploadFiles" multiple :action="uploadUrl" :headers="{
|
||
Authorization: 'Bearer ' + getAccessToken(),
|
||
'tenant-id': getTenantId()
|
||
}" name="files" :show-file-list="false" :auto-upload="false" :data="scanUploadData" :on-change="scanUploadChange" :on-error="handleError" :on-success="handleSuccess" :before-upload="before" class="upload-file-uploader">
|
||
<el-button type="primary">
|
||
<Icon icon="ep:upload-filled" />上传扫描报告
|
||
</el-button>
|
||
</el-upload>
|
||
<el-upload
|
||
ref="triUploadRef" :file-list="triUploadFiles" multiple :action="uploadUrl" :headers="{
|
||
Authorization: 'Bearer ' + getAccessToken(),
|
||
'tenant-id': getTenantId()
|
||
}" name="files" :show-file-list="false" :auto-upload="false" :data="triUploadData" :on-change="triUploadChange" :on-error="handleError" :on-success="handleSuccess" :before-upload="before" class="upload-file-uploader">
|
||
<el-button type="primary">
|
||
<Icon icon="ep:upload-filled" />上传三坐标检测报告
|
||
</el-button>
|
||
</el-upload>
|
||
<el-upload
|
||
ref="certificateUploadRef" :file-list="certificateUploadFiles" multiple :action="uploadUrl" :headers="{
|
||
Authorization: 'Bearer ' + getAccessToken(),
|
||
'tenant-id': getTenantId()
|
||
}" name="files" :show-file-list="false" :auto-upload="false" :data="certificateUploadData" :on-change="certificateUploadChange" :on-error="handleError" :on-success="handleSuccess" :before-upload="before" class="upload-file-uploader">
|
||
<el-button type="primary">
|
||
<Icon icon="ep:upload-filled" />上传合格证
|
||
</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
<el-table :data="formData.attachments" v-loading.fullscreen.lock="uploading" element-loading-text="附件上传中..." element-loading-background="rgba(122, 122, 122, 0.6)" class="hl-table">
|
||
<el-table-column fixed type="index" width="100" label="序号" align="center" />
|
||
<el-table-column prop="name" label="文件名称" align="center" />
|
||
<el-table-column prop="businessFileType" label="文件类型" align="center">
|
||
<template #default="scope">
|
||
{{
|
||
getDictLabel(DICT_TYPE.HELI_BUSINESS_FILE_TYPE, scope.row.businessFileType)
|
||
}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createTime" align="center" label="上传时间" :formatter="dateFormatter" />
|
||
<el-table-column label="操作" align="center">
|
||
<template #default="scope">
|
||
<el-button v-if="active != 'detail'" link type="danger" size="small" @click="handleDeleteAttachment(scope.$index, scope.row.businessFileType)">
|
||
删除
|
||
</el-button>
|
||
<el-button v-if="!!scope.row.id" link type="primary" size="small" @click="downloadAttachment(scope.row.name, scope.row.url)">
|
||
下载
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
</el-form>
|
||
<div class="hl-footer text-center">
|
||
<el-button @click="goback" size="large">取 消</el-button>
|
||
<el-button v-if="active != 'detail'" @click="submitForm('SAVE')" type="primary" :disabled="formLoading" size="large">保 存</el-button>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import * as InspectionReportApi from '@/api/heli/inspectionreport'
|
||
import { inject } from 'vue'
|
||
import { useUserStore } from '@/store/modules/user'
|
||
import { useCommonStore } from '@/store/modules/common'
|
||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
||
import { dateFormatter } from '@/utils/formatTime'
|
||
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
|
||
import { UploadUserFile } from 'element-plus'
|
||
import { deleteFileLogic, downloadFile, getFilePage } from '@/api/infra/file'
|
||
import download from '@/utils/download'
|
||
|
||
defineOptions({ name: 'InspectionReportDetail' })
|
||
|
||
const reload: any = inject('reload')
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
const commonStore = useCommonStore()
|
||
const userStore = useUserStore()
|
||
const router = useRouter()
|
||
|
||
const active = toRef(commonStore.getStore('active'))
|
||
const currentId = toRef(commonStore.getStore('id'))
|
||
|
||
const formLoading = ref(false)
|
||
const dialogTitle = ref('')
|
||
const detailDisabled = ref(false)
|
||
const businessType = 'INSPECTION_REPORT'
|
||
|
||
const formData: any = ref({
|
||
projectId: undefined,
|
||
projectSubId: undefined,
|
||
attachments: []
|
||
})
|
||
|
||
const formRef = ref() // 表单 Ref
|
||
const subFormRef = ref()
|
||
const formRules = reactive({})
|
||
|
||
/** 重置表单 */
|
||
const resetForm = () => {
|
||
formData.value = {
|
||
projectId: undefined,
|
||
projectSubId: undefined,
|
||
attachments: []
|
||
}
|
||
formRef.value?.resetFields()
|
||
}
|
||
const subFormLoading = ref(false) // 子表单的加载中
|
||
const subFormRules = reactive({})
|
||
|
||
const queryData = async (id?: number) => {
|
||
resetForm()
|
||
// 修改时，设置数据
|
||
if (id) {
|
||
formLoading.value = true
|
||
try {
|
||
formData.value = await InspectionReportApi.getInspectionReport(id)
|
||
// 附件信息
|
||
let attParams = {
|
||
pageNo: 1,
|
||
pageSize: 99,
|
||
businessId: id,
|
||
businessType: businessType
|
||
}
|
||
formData.value.attachments = (await getFilePage(attParams)).list
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
}
|
||
|
||
const submitForm = async (operate) => {
|
||
// 提交请求
|
||
formLoading.value = true
|
||
try {
|
||
// 上传附件
|
||
if (compositionUploadFiles.value.length > 0) {
|
||
compositionUploadData.value.businessId = formData.value.projectSubId
|
||
await compositionUploadRef.value!.submit()
|
||
}
|
||
if (heatUploadFiles.value.length > 0) {
|
||
heatUploadData.value.businessId = formData.value.projectSubId
|
||
await heatUploadRef.value!.submit()
|
||
}
|
||
if (scanUploadFiles.value.length > 0) {
|
||
scanUploadData.value.businessId = formData.value.projectSubId
|
||
await scanUploadRef.value!.submit()
|
||
}
|
||
if (triUploadFiles.value.length > 0) {
|
||
triUploadData.value.businessId = formData.value.projectSubId
|
||
await triUploadRef.value!.submit()
|
||
}
|
||
if (certificateUploadFiles.value.length > 0) {
|
||
certificateUploadData.value.businessId = formData.value.projectSubId
|
||
await certificateUploadRef.value!.submit()
|
||
}
|
||
message.success(t('common.operationSuccess'))
|
||
reload()
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
|
||
const goback = () => {
|
||
router.back()
|
||
}
|
||
|
||
// ====================附件信息 开始=======================================
|
||
const uploading = ref(false)
|
||
const uploadUrl = ref(import.meta.env.VITE_UPLOAD_BATCH_URL)
|
||
const compositionUploadRef = ref()
|
||
const compositionUploadFiles = ref<UploadUserFile[]>([])
|
||
const compositionUploadData = ref({
|
||
businessType: businessType,
|
||
businessId: formData.value.projectSubId,
|
||
businessFileType: 'COMPOSITION_REPORT'
|
||
})
|
||
|
||
const heatUploadRef = ref()
|
||
const heatUploadFiles = ref<UploadUserFile[]>([])
|
||
const heatUploadData = ref({
|
||
businessType: businessType,
|
||
businessId: formData.value.projectSubId,
|
||
businessFileType: 'HEAT_TREATMENT_REPORT'
|
||
})
|
||
|
||
const scanUploadRef = ref()
|
||
const scanUploadFiles = ref<UploadUserFile[]>([])
|
||
const scanUploadData = ref({
|
||
businessType: businessType,
|
||
businessId: formData.value.projectSubId,
|
||
businessFileType: 'SCAN_REPORT'
|
||
})
|
||
|
||
const triUploadRef = ref()
|
||
const triUploadFiles = ref<UploadUserFile[]>([])
|
||
const triUploadData = ref({
|
||
businessType: businessType,
|
||
businessId: formData.value.projectSubId,
|
||
businessFileType: 'TRI_LINEAR_COORDINATES_MEASURING'
|
||
})
|
||
|
||
const certificateUploadRef = ref()
|
||
const certificateUploadFiles = ref<UploadUserFile[]>([])
|
||
const certificateUploadData = ref({
|
||
businessType: businessType,
|
||
businessId: formData.value.projectSubId,
|
||
businessFileType: 'CERTIFICATE_OF_QUALIFICATION'
|
||
})
|
||
|
||
const compositionUploadChange = (file, files) => {
|
||
compositionUploadFiles.value = files
|
||
refreshAttachments(files, 'COMPOSITION_REPORT')
|
||
}
|
||
|
||
const heatUploadChange = (file, files) => {
|
||
heatUploadFiles.value = files
|
||
refreshAttachments(files, 'HEAT_TREATMENT_REPORT')
|
||
}
|
||
|
||
const scanUploadChange = (file, files) => {
|
||
scanUploadFiles.value = files
|
||
refreshAttachments(files, 'SCAN_REPORT')
|
||
}
|
||
|
||
const triUploadChange = (file, files) => {
|
||
triUploadFiles.value = files
|
||
refreshAttachments(files, 'TRI_LINEAR_COORDINATES_MEASURING')
|
||
}
|
||
|
||
const certificateUploadChange = (file, files) => {
|
||
certificateUploadFiles.value = files
|
||
refreshAttachments(files, 'CERTIFICATE_OF_QUALIFICATION')
|
||
}
|
||
|
||
// 记录待上传、成功上传及失败上传的文件数量
|
||
const sumbefore = ref(0)
|
||
const successfulUploadsCount = ref(0)
|
||
const failedUploadsCount = ref(0)
|
||
const failedAttachments = ref<UploadUserFile[]>([])
|
||
const failedAttachmentsName = ref()
|
||
// 处理单个文件上传成功的情况
|
||
const handleSuccess = (response: any, file: UploadUserFile) => {
|
||
successfulUploadsCount.value++
|
||
}
|
||
|
||
// 处理单个文件上传失败的情况
|
||
const handleError = (error: Error, file: UploadUserFile) => {
|
||
failedUploadsCount.value++
|
||
if (failedUploadsCount.value > 0) {
|
||
// 当有上传错误时
|
||
// 将失败的附件添加到failedAttachments.value数组中
|
||
failedAttachments.value.push(file)
|
||
failedAttachmentsName.value = failedAttachments.value.map((value) => value.name)
|
||
}
|
||
}
|
||
|
||
// 储存已上传文件的名称唯一标识
|
||
const uploadedFiles = ref([]);
|
||
// 文件上传前的钩子用于检查文件是否已存在
|
||
const before = (file) => {
|
||
// console.log('文件名', file.name);
|
||
const fileName: any = file.name;
|
||
// 检查文件名是否存在并确保操作的原子性
|
||
if (!uploadedFiles.value.includes(fileName)) {
|
||
uploadedFiles.value.push(fileName);
|
||
sumbefore.value++
|
||
return true; // 允许上传
|
||
}
|
||
// console.log('文件已存在！');
|
||
return false; // 阻止上传
|
||
}
|
||
|
||
const newfiless: any = ref([])
|
||
const filess: any = ref([])
|
||
const refreshAttachments = (files, type) => {
|
||
files.forEach((file) => {
|
||
const hasDuplicate = newfiless.value.filter((item) => {
|
||
return file.name == item.name
|
||
})
|
||
if (hasDuplicate.length > 0) {
|
||
// console.log('重复文件', hasDuplicate)
|
||
} else {
|
||
newfiless.value.push(file)
|
||
formData.value.attachments = [
|
||
...formData.value.attachments,
|
||
{ ...file, businessFileType: type, createTime: new Date() }
|
||
]
|
||
}
|
||
})
|
||
|
||
|
||
// 排序
|
||
formData.value.attachments.sort((v1, v2) => v1.createTime - v2.createTime)
|
||
|
||
// 文件上传一遍 上传总数等于要上传文件时 刷新页面
|
||
const sum = successfulUploadsCount.value + failedUploadsCount.value
|
||
// console.log('上传总数', sum)
|
||
// console.log('要上传文件数量', sumbefore.value)
|
||
if (sumbefore.value !== sum && sumbefore.value !== 0 && sum !== 0) {
|
||
// console.log('要上传文件数量不等于上传总数时等待',uploading.value)
|
||
uploading.value = true
|
||
} else if (sum == sumbefore.value && sumbefore.value > 0 && sum > 0) {
|
||
// console.log('要上传文件数量等于上传总数 刷新页面并给出提示')
|
||
if (failedUploadsCount.value > 0) {
|
||
ElMessageBox.alert(
|
||
// 使用错误信息作为提示内容
|
||
`文件名为：${failedAttachmentsName.value.join(' / ')}上传失败`,
|
||
`文件格式不正确或网络问题 请您稍后再试`,
|
||
{
|
||
dangerouslyUseHTMLString: false, // 由于我们不是使用HTML字符串，所以这里设置为false
|
||
confirmButtonText: '知道了',
|
||
center: true
|
||
}
|
||
)
|
||
}
|
||
reload()
|
||
uploading.value = false
|
||
}
|
||
}
|
||
|
||
// 删除附件
|
||
const handleDeleteAttachment = async (index, type) => {
|
||
const deletedAttachments = formData.value.attachments.splice(index, 1)
|
||
for (let i = 0; i < deletedAttachments.length; i++) {
|
||
const attachment = deletedAttachments[i]
|
||
if (attachment.id) {
|
||
// 清理已上传文件
|
||
await deleteFileLogic(attachment.id)
|
||
}
|
||
// 清理待上传文件
|
||
compositionUploadFiles.value = compositionUploadFiles.value.filter((file1) => {
|
||
return file1.name != attachment.name || file1.businessFileType != type
|
||
})
|
||
|
||
heatUploadFiles.value = heatUploadFiles.value.filter((file2) => {
|
||
return file2.name != attachment.name || file2.businessFileType != type
|
||
})
|
||
|
||
scanUploadFiles.value = scanUploadFiles.value.filter((file3) => {
|
||
return file3.name != attachment.name || file3.businessFileType != type
|
||
})
|
||
|
||
triUploadFiles.value = triUploadFiles.value.filter((file4) => {
|
||
return file4.name != attachment.name || file4.businessFileType != type
|
||
})
|
||
|
||
certificateUploadFiles.value = certificateUploadFiles.value.filter((file5) => {
|
||
return file5.name != attachment.name || file5.businessFileType != type
|
||
})
|
||
}
|
||
}
|
||
|
||
// 下载文件
|
||
const downloadAttachment = async (name, url) => {
|
||
const baseUrl = import.meta.env.VITE_BASE_URL;
|
||
url =baseUrl+'/admin-api/'+ url.split('/admin-api/')[1]; const data = await downloadFile(url)
|
||
download.any(data, name)
|
||
}
|
||
|
||
onMounted(() => {
|
||
dialogTitle.value = t('action.' + active.value)
|
||
if ('detail' == active.value) {
|
||
detailDisabled.value = true
|
||
}
|
||
queryData(currentId.value)
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
.upload-file-uploader {
|
||
margin-bottom: 10px;
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
}
|
||
</style>
|