bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

This commit is contained in:
hayu 2025-09-15 19:17:41 +08:00
parent 6869c3a1a8
commit b57a8e9df4
1 changed files with 223 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

309
src/views/material/materialStation/authorize/index.vue
View File

@ -154,27 +154,32 @@
</el-form-item> </el-form-item>
<el-form-item label="授权委托书：" prop="authorizationFile" required> <el-form-item label="授权委托书：" prop="authorizationFile" required>
<el-upload <div style="display: inline-flex; align-items: center; gap: 10px;">
:action="upload.url" <el-upload
:headers="upload.headers" :action="uploadParseUrl"
:file-list="fileList" :headers="upload.headers"
:on-success="handleSuccess" :file-list="fileList"
:on-error="handleError" :on-success="handleParseSuccess"
:on-remove="handleFileRemove" :on-error="handleError"
accept=".pdf,image/*" :on-remove="handleFileRemove"
:disabled="isEditMode" accept=".docx"
> :disabled="isEditMode"
<el-button size="small" type="primary" :disabled="isEditMode">点击上传</el-button> style="margin-right: 10px"
</el-upload> >
<el-button <el-button size="small" type="primary" :disabled="isEditMode">点击上传</el-button>
v-if="fileList.length > 0 && isEditMode" </el-upload>
size="small"
type="text"
@click="previewFile(authForm.authorizationFile)" <el-button v-if="dialogTitle!='编辑授权'" size="small" type="warning" @click="downloadTemplate">下载委托书模版</el-button>
style="margin-left: 10px"
> <el-button
预览委托书 v-if="fileList.length > 0 && isEditMode"
</el-button> size="small"
type="text"
@click="previewFile(authForm.authorizationFile)"
>
</el-button>
</div>
</el-form-item> </el-form-item>
<el-form-item label="领料人信息：" required> <el-form-item label="领料人信息：" required>
@ -202,7 +207,7 @@
<el-table-column label="手机号" prop="phone" align="center"> <el-table-column label="手机号" prop="phone" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="display: flex"> <div style="display: flex">
<span style="color: red">*</span> <!-- <span style="color: red">*</span>-->
<el-input <el-input
v-model="scope.row.phone" v-model="scope.row.phone"
placeholder="请输入手机号" placeholder="请输入手机号"
@ -212,46 +217,93 @@
</div> </div>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<div class="id-photo-upload"> <div style="display:flex; align-items:center; justify-content:center; gap:10px">
<div class="upload-item"> <!-- 正面 -->
<el-upload <el-upload
:action="uploadUrl" :action="uploadUrl"
:headers="uploadHeaders" :headers="uploadHeaders"
:data="{ type: 1 }" :data="{ type: 1 }"
:on-success="(response, file) => handleIdPhotoSuccess(response, file, scope.$index, 'front')" :show-file-list="false"
:on-error="handleUploadError" accept="image/*"
:before-upload="beforeIdPhotoUpload" :on-success="(res, file) => handleIdPhotoSuccess(res, file, scope.$index, 'front')"
:show-file-list="false" >
accept="image/*" <img
> v-if="scope.row.idFrontPhoto"
<el-button size="mini" :loading="scope.row.frontUploading"> :src="scope.row.idFrontPhoto"
{{ scope.row.frontUploading ? '识别中...' : '头像面' }} style="width:120px; height:80px; cursor:pointer; border:1px solid #eee; border-radius:4px; object-fit:cover"
</el-button> />
</el-upload> <div v-else style="width:120px; height:80px; border:1px dashed #d9d9d9; display:flex; justify-content:center; align-items:center; cursor:pointer">
<span v-if="scope.row.idFrontPhoto" class="upload-status">✓</span> <i class="el-icon-plus"></i>
</div> </div>
<div class="upload-item"> </el-upload>
<el-upload
:action="uploadUrl" <!-- 背面 -->
:headers="uploadHeaders" <el-upload
:data="{ type: 2 }" :action="uploadUrl"
:on-success="(response, file) => handleIdPhotoSuccess(response, file, scope.$index, 'back')" :headers="uploadHeaders"
:on-error="handleUploadError" :data="{ type: 2 }"
:before-upload="beforeIdPhotoUpload" :show-file-list="false"
:show-file-list="false" accept="image/*"
accept="image/*" :on-success="(res, file) => handleIdPhotoSuccess(res, file, scope.$index, 'back')"
> >
<el-button size="mini" :loading="scope.row.backUploading"> <img
{{ scope.row.backUploading ? '识别中...' : '国徽面' }} v-if="scope.row.idBackPhoto"
</el-button> :src="scope.row.idBackPhoto"
</el-upload> style="width:120px; height:80px; cursor:pointer; border:1px solid #eee; border-radius:4px; object-fit:cover"
<span v-if="scope.row.idBackPhoto" class="upload-status">✓</span> />
</div> <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> </div>
</template> </template>
</el-table-column> </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"> <el-table-column label="操作" width="80" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="danger" @click="removeReceiver(scope.$index)">删除</el-button> <el-button size="mini" type="danger" @click="removeReceiver(scope.$index)">删除</el-button>
@ -520,7 +572,8 @@ export default {
treeProps: { treeProps: {
label: 'name', label: 'name',
children: 'children' children: 'children'
} },
uploadParseUrl: process.env.VUE_APP_BASE_API + '/material/authorize/parseWord',
} }
}, },
created() { created() {
@ -865,16 +918,6 @@ export default {
this.$message.error(response.msg || '文件上传失败') 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() { addReceiver() {
@ -979,22 +1022,22 @@ export default {
}, },
// 预览文件 // 预览文件
previewFile(file) { previewFile(file) {
if (!file || !file.url) return // if (!file || !file.url) return
//
const ext = file.name.split('.').pop().toLowerCase() // const ext = file.name.split('.').pop().toLowerCase()
console.log(ext) // console.log(ext)
//
if (ext === 'pdf') { // if (ext === 'pdf') {
this.previewPDF(file.url) // this.previewPDF(file.url)
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) { // } else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
// 图片直接使用el-image预览 // // 图片直接使用el-image预览
this.$alert(`<img src="${file.url}" style="max-width:100%;"/>`, file.name, { // this.$alert(`<img src="${file.url}" style="max-width:100%;"/>`, file.name, {
dangerouslyUseHTMLString: true, // dangerouslyUseHTMLString: true,
customClass: 'image-preview-modal' // customClass: 'image-preview-modal'
}) // })
} else { // } else {
this.$message.warning('不支持预览此文件类型') // this.$message.warning('不支持预览此文件类型')
} // }
}, },
// 预览PDF文件 // 预览PDF文件
previewPDF(url) { previewPDF(url) {
@ -1182,7 +1225,101 @@ export default {
} finally { } finally {
this.$loading().close() 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> </script>