This commit is contained in:
parent
6869c3a1a8
commit
b57a8e9df4
|
|
@ -154,27 +154,32 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-form-item label="授权委托书：" prop="authorizationFile" required>
|
||||
<el-upload
|
||||
:action="upload.url"
|
||||
:headers="upload.headers"
|
||||
:file-list="fileList"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-remove="handleFileRemove"
|
||||
accept=".pdf,image/*"
|
||||
:disabled="isEditMode"
|
||||
>
|
||||
<el-button size="small" type="primary" :disabled="isEditMode">点击上传</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
v-if="fileList.length > 0 && isEditMode"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="previewFile(authForm.authorizationFile)"
|
||||
style="margin-left: 10px"
|
||||
>
|
||||
预览委托书
|
||||
</el-button>
|
||||
<div style="display: inline-flex; align-items: center; gap: 10px;">
|
||||
<el-upload
|
||||
:action="uploadParseUrl"
|
||||
:headers="upload.headers"
|
||||
:file-list="fileList"
|
||||
:on-success="handleParseSuccess"
|
||||
:on-error="handleError"
|
||||
:on-remove="handleFileRemove"
|
||||
accept=".docx"
|
||||
:disabled="isEditMode"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<el-button size="small" type="primary" :disabled="isEditMode">点击上传</el-button>
|
||||
</el-upload>
|
||||
|
||||
|
||||
<el-button v-if="dialogTitle!='编辑授权'" size="small" type="warning" @click="downloadTemplate">下载委托书模版</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="fileList.length > 0 && isEditMode"
|
||||
size="small"
|
||||
type="text"
|
||||
@click="previewFile(authForm.authorizationFile)"
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="领料人信息：" required>
|
||||
|
|
@ -202,7 +207,7 @@
|
|||
<el-table-column label="手机号" prop="phone" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div style="display: flex">
|
||||
<span style="color: red">*</span>
|
||||
<!-- <span style="color: red">*</span>-->
|
||||
<el-input
|
||||
v-model="scope.row.phone"
|
||||
placeholder="请输入手机号"
|
||||
|
|
@ -212,46 +217,93 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="身份证照片" prop="idPhotos" align="center" width="200">
|
||||
<el-table-column label="身份证照片" prop="idPhotos" align="center" width="280">
|
||||
<template slot-scope="scope">
|
||||
<div class="id-photo-upload">
|
||||
<div class="upload-item">
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:data="{ type: 1 }"
|
||||
:on-success="(response, file) => handleIdPhotoSuccess(response, file, scope.$index, 'front')"
|
||||
:on-error="handleUploadError"
|
||||
:before-upload="beforeIdPhotoUpload"
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
>
|
||||
<el-button size="mini" :loading="scope.row.frontUploading">
|
||||
{{ scope.row.frontUploading ? '识别中...' : '头像面' }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<span v-if="scope.row.idFrontPhoto" class="upload-status">✓</span>
|
||||
</div>
|
||||
<div class="upload-item">
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:data="{ type: 2 }"
|
||||
:on-success="(response, file) => handleIdPhotoSuccess(response, file, scope.$index, 'back')"
|
||||
:on-error="handleUploadError"
|
||||
:before-upload="beforeIdPhotoUpload"
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
>
|
||||
<el-button size="mini" :loading="scope.row.backUploading">
|
||||
{{ scope.row.backUploading ? '识别中...' : '国徽面' }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<span v-if="scope.row.idBackPhoto" class="upload-status">✓</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; justify-content:center; gap:10px">
|
||||
<!-- 正面 -->
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:data="{ type: 1 }"
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:on-success="(res, file) => handleIdPhotoSuccess(res, file, scope.$index, 'front')"
|
||||
>
|
||||
<img
|
||||
v-if="scope.row.idFrontPhoto"
|
||||
:src="scope.row.idFrontPhoto"
|
||||
style="width:120px; height:80px; cursor:pointer; border:1px solid #eee; border-radius:4px; object-fit:cover"
|
||||
/>
|
||||
<div v-else style="width:120px; height:80px; border:1px dashed #d9d9d9; display:flex; justify-content:center; align-items:center; cursor:pointer">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<!-- 背面 -->
|
||||
<el-upload
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:data="{ type: 2 }"
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:on-success="(res, file) => handleIdPhotoSuccess(res, file, scope.$index, 'back')"
|
||||
>
|
||||
<img
|
||||
v-if="scope.row.idBackPhoto"
|
||||
:src="scope.row.idBackPhoto"
|
||||
style="width:120px; height:80px; cursor:pointer; border:1px solid #eee; border-radius:4px; object-fit:cover"
|
||||
/>
|
||||
<div v-else style="width:120px; height:80px; border:1px dashed #d9d9d9; display:flex; justify-content:center; align-items:center; cursor:pointer">
|
||||
<i class="el-icon-plus"></i>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <el-table-column label="身份证照片" prop="idPhotos" align="center" width="200">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <div class="id-photo-upload">-->
|
||||
<!-- <div class="upload-item">-->
|
||||
<!-- <el-upload-->
|
||||
<!-- :action="uploadUrl"-->
|
||||
<!-- :headers="uploadHeaders"-->
|
||||
<!-- :data="{ type: 1 }"-->
|
||||
<!-- :on-success="(response, file) => handleIdPhotoSuccess(response, file, scope.$index, 'front')"-->
|
||||
<!-- :on-error="handleUploadError"-->
|
||||
<!-- :before-upload="beforeIdPhotoUpload"-->
|
||||
<!-- :show-file-list="false"-->
|
||||
<!-- accept="image/*"-->
|
||||
<!-- >-->
|
||||
<!-- <el-button size="mini" :loading="scope.row.frontUploading">-->
|
||||
<!-- {{ scope.row.frontUploading ? '识别中...' : '头像面' }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-upload>-->
|
||||
<!-- <span v-if="scope.row.idFrontPhoto" class="upload-status">✓</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="upload-item">-->
|
||||
<!-- <el-upload-->
|
||||
<!-- :action="uploadUrl"-->
|
||||
<!-- :headers="uploadHeaders"-->
|
||||
<!-- :data="{ type: 2 }"-->
|
||||
<!-- :on-success="(response, file) => handleIdPhotoSuccess(response, file, scope.$index, 'back')"-->
|
||||
<!-- :on-error="handleUploadError"-->
|
||||
<!-- :before-upload="beforeIdPhotoUpload"-->
|
||||
<!-- :show-file-list="false"-->
|
||||
<!-- accept=".doc,.docx"-->
|
||||
<!-- >-->
|
||||
<!-- <el-button size="mini" :loading="scope.row.backUploading">-->
|
||||
<!-- {{ scope.row.backUploading ? '识别中...' : '国徽面' }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-upload>-->
|
||||
<!-- <span v-if="scope.row.idBackPhoto" class="upload-status">✓</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column label="操作" width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="danger" @click="removeReceiver(scope.$index)">删除</el-button>
|
||||
|
|
@ -520,7 +572,8 @@ export default {
|
|||
treeProps: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
},
|
||||
uploadParseUrl: process.env.VUE_APP_BASE_API + '/material/authorize/parseWord',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -865,16 +918,6 @@ export default {
|
|||
this.$message.error(response.msg || '文件上传失败')
|
||||
}
|
||||
},
|
||||
// 文件上传删除处理
|
||||
handleFileRemove(file, fileList) {
|
||||
this.url = null
|
||||
this.fileList = fileList
|
||||
},
|
||||
//文件上传失败
|
||||
handleError(err, file, fileList) {
|
||||
console.error('Error while uploading file:', err)
|
||||
this.url = null
|
||||
},
|
||||
|
||||
// 新增领料人
|
||||
addReceiver() {
|
||||
|
|
@ -979,22 +1022,22 @@ export default {
|
|||
},
|
||||
// 预览文件
|
||||
previewFile(file) {
|
||||
if (!file || !file.url) return
|
||||
|
||||
const ext = file.name.split('.').pop().toLowerCase()
|
||||
console.log(ext)
|
||||
|
||||
if (ext === 'pdf') {
|
||||
this.previewPDF(file.url)
|
||||
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
|
||||
// 图片直接使用el-image预览
|
||||
this.$alert(`<img src="${file.url}" style="max-width:100%;"/>`, file.name, {
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'image-preview-modal'
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('不支持预览此文件类型')
|
||||
}
|
||||
// if (!file || !file.url) return
|
||||
//
|
||||
// const ext = file.name.split('.').pop().toLowerCase()
|
||||
// console.log(ext)
|
||||
//
|
||||
// if (ext === 'pdf') {
|
||||
// this.previewPDF(file.url)
|
||||
// } else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
|
||||
// // 图片直接使用el-image预览
|
||||
// this.$alert(`<img src="${file.url}" style="max-width:100%;"/>`, file.name, {
|
||||
// dangerouslyUseHTMLString: true,
|
||||
// customClass: 'image-preview-modal'
|
||||
// })
|
||||
// } else {
|
||||
// this.$message.warning('不支持预览此文件类型')
|
||||
// }
|
||||
},
|
||||
// 预览PDF文件
|
||||
previewPDF(url) {
|
||||
|
|
@ -1182,7 +1225,101 @@ export default {
|
|||
} finally {
|
||||
this.$loading().close()
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 下载模板方法 */
|
||||
async downloadTemplate() {
|
||||
try {
|
||||
// 使用统一的下载方法，确保路径正确
|
||||
await this.download("/material/authorize/downLoad", {}, "授权委托书模板.doc");
|
||||
this.$message.success("模板下载成功");
|
||||
} catch (error) {
|
||||
console.error("模板下载失败:", error);
|
||||
this.$message.error("模板下载失败，请稍后重试");
|
||||
} finally {
|
||||
}
|
||||
},
|
||||
// 上传并解析成功
|
||||
// handleParseSuccess(response, file, fileList) {
|
||||
// // 兼容你的 AjaxResult 结构：{ code:200, data: [...] }
|
||||
// const list = (response && response.code === 200) ? response.data : (Array.isArray(response) ? response : null);
|
||||
//
|
||||
// if (!list || list.length === 0) {
|
||||
// this.$message.warning('未识别到委托人信息，请手动填写');
|
||||
// // 设置 fileList 显示上传的文件名
|
||||
// this.fileList = [{ name: file.name, url: '' }];
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// // 直接把识别到的结果赋值给 materialReceivers（并保证字段名一致）
|
||||
// this.materialReceivers = list.map(item => ({
|
||||
// name: item.name || '',
|
||||
// idNumber: item.idNumber || '',
|
||||
// phone: item.phone || '',
|
||||
// idFrontPhoto: item.frontUrl || item.idFrontPhoto || item.fronturl || null,
|
||||
// idBackPhoto: item.backUrl || item.idBackPhoto || item.backurl || null,
|
||||
// frontUploading: false,
|
||||
// backUploading: false
|
||||
// }));
|
||||
//
|
||||
// // 同步到 authForm
|
||||
// this.authForm.materialReceivers = [...this.materialReceivers];
|
||||
//
|
||||
// // 更新 fileList 显示
|
||||
// this.fileList = [{ name: file.name, url: '' }];
|
||||
//
|
||||
// this.$message.success(`识别成功，共提取 ${this.materialReceivers.length} 个委托人`);
|
||||
// },
|
||||
handleParseSuccess(response, file, fileList) {
|
||||
// 后端返回结构：{ code:200, data: { receivers: [...], filePath: "xxx" } }
|
||||
const data = (response && response.code === 200) ? response.data : null;
|
||||
const list = data ? data.receivers : null;
|
||||
|
||||
if (!list || list.length === 0) {
|
||||
this.$message.warning('未识别到委托人信息，请手动填写');
|
||||
// 设置 fileList 显示上传的文件名
|
||||
this.fileList = [{ name: file.name, url: data ? data.filePath : '' }];
|
||||
// 同时保存文件路径（即使没有识别成功）
|
||||
this.authForm.filePath = data ? data.filePath : '';
|
||||
this.url=data ? data.filePath : '';
|
||||
this.fileName=data ? data.fileName : '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 把识别到的结果赋值给 materialReceivers
|
||||
this.materialReceivers = list.map(item => ({
|
||||
name: item.name || '',
|
||||
idNumber: item.idNumber || '',
|
||||
phone: item.phone || '',
|
||||
idFrontPhoto: item.frontUrl || item.idFrontPhoto || item.fronturl || null,
|
||||
idBackPhoto: item.backUrl || item.idBackPhoto || item.backurl || null,
|
||||
frontUploading: false,
|
||||
backUploading: false
|
||||
}));
|
||||
|
||||
// 同步到表单
|
||||
this.authForm.materialReceivers = [...this.materialReceivers];
|
||||
// 保存文件路径
|
||||
this.authForm.filePath = data.filePath;
|
||||
|
||||
// 更新 fileList 显示
|
||||
this.fileList = [{ name: file.name, url: data.filePath }];
|
||||
this.url=data.filePath;
|
||||
this.fileName=data.fileName;
|
||||
|
||||
this.$message.success(`识别成功，共提取 ${this.materialReceivers.length} 个委托人`);
|
||||
},
|
||||
|
||||
|
||||
handleError(err) {
|
||||
console.error('上传/解析失败', err);
|
||||
this.$message.error('文件上传或解析失败');
|
||||
},
|
||||
|
||||
handleFileRemove(file, fileList) {
|
||||
this.fileList = fileList;
|
||||
// 清空识别结果（可选）
|
||||
// this.materialReceivers = [];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue