LQOCR
/
lq-Ocr-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(report): 优化智能填单页面布局和功能

Browse Source 
- 调整页面布局，优化标题样式
- 增加表单验证提示
- 完善材料清单内容
- 修复文件上传和预览功能
master
Tuzki 7 months ago
parent 44db39c613
commit 2760b1f231
3 changed files with 245 additions and 244 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/report/eventList/EventForm.vue
  2. 4
      src/views/report/eventList/index.vue
  3. 481
      src/views/report/eventList/uploadFile.vue

4
src/views/report/eventList/EventForm.vue
Unescape View File

@ -85,12 +85,12 @@ export default {
try {
const res = await TicketSortApi.getTicketSort(id)
this.formData = res.data
this.dialogTitle = '编辑门票分类'
this.dialogTitle = '编辑事项'
} finally {
this.formLoading = false
}
} else {
this.dialogTitle = '新增门票分类'
this.dialogTitle = '新增事项'
}
},
/** 提交按钮 */

4
src/views/report/eventList/index.vue
Unescape View File

@ -13,7 +13,7 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<!-- <el-button type="primary" icon="el-icon-plus" @click="openForm(undefined)" -->
<el-button type="primary" icon="el-icon-plus" @click="goUploadFile"
<el-button type="primary" icon="el-icon-plus" @click="openForm(undefined)"
v-hasPermi="['event:event-list:create']"
>新增事项清单
</el-button>
@ -33,7 +33,7 @@
<div class="enent-name">{{ item.name }}</div>
</div>
<div class="event-history-item-right">
<el-button @click="">智能填单</el-button>
<el-button @click="goUploadFile">智能填单</el-button>
</div>
</div>
</template>

481
src/views/report/eventList/uploadFile.vue
Unescape View File

@ -1,267 +1,268 @@
<template>
<div class="smart-form-container">
<h1 class="form-title">智能填单</h1>
<!-- 登记类别选择 -->
<el-form ref="form" :model="formData" label-width="120px">
<el-form-item label="*登记类别" prop="category" required>
<el-radio-group v-model="formData.category">
<el-radio-button label="首次启用"></el-radio-button>
<el-radio-button label="过户"></el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 设备基本情况上传 -->
<div class="upload-section">
<div class="upload-header">
<span class="required-mark">*</span>
<span>上传材料 - 设备基本情况</span>
<span class="hint-text">请上传右侧所需材料</span>
<div class="smart-form-container ">
<!-- 页面 标题 -->
<div class="m-pages-title"><span class="inner">智能填单</span></div>
<div class="page-data">
<!-- 登记类别选择 -->
<el-form ref="form" style="width: 60%;" :model="formData">
<el-form-item label="登记类别" prop="category" required>
<el-radio-group v-model="formData.category">
<el-radio-button label="首次启用"></el-radio-button>
<el-radio-button label="过户"></el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 设备基本情况上传 -->
<div class="upload-box">
<div class="upload-header">
<span class="required-mark">*</span>
<span>上传材料 - 设备基本情况</span>
<span class="hint-text">*请上传右侧所需材料</span>
</div>
<div class="upload-section">
<el-upload class="upload-area" action="#" :multiple="true" :file-list="basicFiles"
:before-upload="beforeUpload" :on-remove="handleRemoveBasic" :http-request="handleUpload">
<el-button type="primary">选择文件</el-button>
</el-upload>
</div>
</div>
<el-upload
class="upload-area"
action="#"
:multiple="true"
:file-list="basicFiles"
:before-upload="beforeUpload"
:on-remove="handleRemoveBasic"
:http-request="handleUpload"
>
<el-button type="primary">选择文件</el-button>
</el-upload>
</div>
<!-- 设备使用情况上传 -->
<div class="upload-section">
<div class="upload-header">
<span class="required-mark">*</span>
<span>上传材料 - 设备使用情况</span>
<span class="hint-text">请上传右侧所需材料</span>
<!-- 设备使用情况上传 -->
<div class="upload-box">
<div class="upload-header">
<span class="required-mark">*</span>
<span>上传材料 - 设备使用情况</span>
<span class="hint-text">*请上传右侧所需材料</span>
</div>
<div class="upload-section">
<el-upload class="upload-area" action="#" :multiple="true" :file-list="usageFiles"
:before-upload="beforeUpload" :on-remove="handleRemoveUsage" :http-request="handleUpload">
<el-button type="primary">选择文件</el-button>
</el-upload>
</div>
</div>
<el-upload
class="upload-area"
action="#"
:multiple="true"
:file-list="usageFiles"
:before-upload="beforeUpload"
:on-remove="handleRemoveUsage"
:http-request="handleUpload"
>
<el-button type="primary">选择文件</el-button>
</el-upload>
</div>
<!-- 提示信息 -->
<div class="tips">
<p>为保证识别准确，请确保材料齐全、清晰！</p>
<p>支持jpg、jpeg、png、pdf格式，文档大小不超过10M。</p>
</div>
<!-- 开始识别按钮 -->
<div class="submit-btn">
<el-button type="success" @click="handleSubmit" size="large">开始识别</el-button>
</div>
</el-form>
<!-- 右侧材料列表 -->
<div class="material-list">
<h3>所需材料：</h3>
<div class="material-group">
<p>设备基本情况所需材料：</p>
<ol>
<li>特种设备产品合格证（含产品数据表、车用气瓶安装合格证）</li>
<li>特种设备监督检验证明</li>
<li>机动车登记证书</li>
</ol>
</div>
<div class="material-group">
<p>设备使用情况所需材料：</p>
<ol>
<li>含有统一社会信用代码的证明或个人身份证明</li>
<li>机动车行驶证</li>
</ol>
<!-- 提示信息 -->
<div class="tips">
<p>为保证识别准确，请确保材料齐全、清晰！</p>
<p>支持jpg、jpeg、png、pdf格式，文档大小不超过10M。</p>
</div>
<!-- 开始识别按钮 -->
<div class="submit-btn">
<el-button type="success" @click="handleSubmit" size="large">开始识别</el-button>
</div>
</el-form>
<!-- 右侧材料列表 -->
<div class="material-list">
<h3>所需材料：</h3>
<div class="material-group">
<p class="title">设备基本情况所需材料：</p>
<ol>
<li>特种设备产品合格证（含产品数据表、车用气瓶安装合格证）</li>
<li>特种设备监督检验证明（特种设备制造监督检验证书、特种设备安装监督检验证书和批量检验质量证明书）</li>
<li>机动车登记证书（适用于与机动车固定的车用气瓶）</li>
</ol>
</div>
<div class="material-group">
<p class="title">设备使用情况所需材料：</p>
<ol>
<li>含有使用等单位统一社会信用代码的证明或个人身份证明（适用于公民个人所有的特种设备）</li>
<li>机动车行驶证（适用于与机动车固定的移动式压力容器）</li>
</ol>
</div>
</div>
</div>
<!-- 文件预览对话框 -->
<el-dialog :visible.sync="previewVisible" width="80%">
<img v-if="previewType === 'image'" :src="previewUrl" class="preview-image">
<iframe
v-else-if="previewType === 'pdf'"
:src="previewUrl"
class="preview-pdf"
></iframe>
</el-dialog>
<!-- 文件预览对话框 -->
<el-dialog :visible.sync="previewVisible" width="80%">
<img v-if="previewType === 'image'" :src="previewUrl" class="preview-image">
<iframe v-else-if="previewType === 'pdf'" :src="previewUrl" class="preview-pdf"></iframe>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
category: ''
},
basicFiles: [],
usageFiles: [],
previewVisible: false,
previewUrl: '',
previewType: ''
};
},
methods: {
beforeUpload(file) {
const isAllowedType = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'].includes(file.type);
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isAllowedType) {
this.$message.error('只支持 JPG/PNG/PDF 格式!');
return false;
}
if (!isLt10M) {
this.$message.error('文件大小不能超过 10MB!');
return false;
}
return true;
export default {
data() {
return {
formData: {
category: ''
},
basicFiles: [],
usageFiles: [],
previewVisible: false,
previewUrl: '',
previewType: ''
};
},
methods: {
beforeUpload(file) {
const isAllowedType = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'].includes(file.type);
const isLt10M = file.size / 1024 / 1024 < 10;
handleUpload(file) {
const reader = new FileReader();
reader.readAsDataURL(file.file);
reader.onload = () => {
const newFile = {
name: file.file.name,
url: reader.result,
type: file.file.type.includes('pdf') ? 'pdf' : 'image'
};
if (file.file.uid === 'basic') {
this.basicFiles.push(newFile);
} else {
this.usageFiles.push(newFile);
if (!isAllowedType) {
this.$message.error('只支持 JPG/PNG/PDF 格式!');
return false;
}
};
},
if (!isLt10M) {
this.$message.error('文件大小不能超过 10MB!');
return false;
}
return true;
},
handleRemoveBasic(file, fileList) {
this.basicFiles = fileList;
},
handleUpload(file) {
const reader = new FileReader();
reader.readAsDataURL(file.file);
reader.onload = () => {
const newFile = {
name: file.file.name,
url: reader.result,
type: file.file.type.includes('pdf') ? 'pdf' : 'image'
};
handleRemoveUsage(file, fileList) {
this.usageFiles = fileList;
},
if (file.file.uid === 'basic') {
this.basicFiles.push(newFile);
} else {
this.usageFiles.push(newFile);
}
};
},
handlePreview(file) {
this.previewUrl = file.url;
this.previewType = file.type;
this.previewVisible = true;
},
handleRemoveBasic(file, fileList) {
this.basicFiles = fileList;
},
handleSubmit() {
if (!this.formData.category) {
this.$message.error('请选择登记类别!');
return;
}
if (this.basicFiles.length === 0) {
this.$message.error('请上传设备基本情况材料!');
return;
}
if (this.usageFiles.length === 0) {
this.$message.error('请上传设备使用情况材料!');
return;
handleRemoveUsage(file, fileList) {
this.usageFiles = fileList;
},
handlePreview(file) {
this.previewUrl = file.url;
this.previewType = file.type;
this.previewVisible = true;
},
handleSubmit() {
if (!this.formData.category) {
this.$message.error('请选择登记类别!');
return;
}
if (this.basicFiles.length === 0) {
this.$message.error('请上传设备基本情况材料!');
return;
}
if (this.usageFiles.length === 0) {
this.$message.error('请上传设备使用情况材料!');
return;
}
// 提交逻辑
console.log('提交数据:', {
category: this.formData.category,
basicFiles: this.basicFiles,
usageFiles: this.usageFiles
});
this.$message.success('文件上传成功，开始识别!');
}
// 提交逻辑
console.log('提交数据:', {
category: this.formData.category,
basicFiles: this.basicFiles,
usageFiles: this.usageFiles
});
this.$message.success('文件上传成功，开始识别!');
}
}
};
};
</script>
<style scoped>
.smart-form-container {
max-width: 1200px;
margin: 20px auto;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
display: flex;
}
.form-title {
color: #303133;
text-align: center;
margin-bottom: 30px;
}
.upload-section {
margin: 20px 0;
padding: 20px;
border: 1px solid #ebeef5;
border-radius: 4px;
}
.upload-header {
margin-bottom: 15px;
font-size: 16px;
}
.required-mark {
color: #f56c6c;
margin-right: 4px;
}
.hint-text {
color: #909399;
margin-left: 10px;
font-size: 14px;
}
.upload-area {
margin-top: 10px;
}
.tips {
color: #909399;
font-size: 14px;
margin: 20px 0;
}
.submit-btn {
text-align: center;
margin-top: 30px;
}
.material-list {
width: 300px;
margin-left: 50px;
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
}
.material-group {
margin: 15px 0;
}
.preview-image {
width: 100%;
max-height: 80vh;
object-fit: contain;
}
.preview-pdf {
width: 100%;
height: 80vh;
border: none;
}
.smart-form-container {
max-width: 1200px;
margin: 20px auto;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.page-data{
display: flex;
margin-top: 20px;
}
.form-title {
color: #303133;
text-align: center;
margin-bottom: 30px;
}
.upload-section {
margin: 20px 0;
padding: 20px;
border: 1px solid #ebeef5;
border-radius: 4px;
}
.upload-header {
margin-bottom: 15px;
font-size: 16px;
}
.required-mark {
color: #f56c6c;
margin-right: 4px;
}
.hint-text {
color: #ff1919;
margin-left: 10px;
font-size: 14px;
}
.upload-area {
margin-top: 10px;
}
.tips {
color: #ff1919;
font-size: 14px;
margin: 20px 0;
}
.submit-btn {
text-align: center;
margin-top: 30px;
}
.material-list {
width: 300px;
flex: 1;
margin-left: 50px;
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
}
.material-group {
margin: 35px 0;
.title{
font-weight: bold;
}
}
.preview-image {
width: 100%;
max-height: 80vh;
object-fit: contain;
}
.preview-pdf {
width: 100%;
height: 80vh;
border: none;
}
</style>
Write Preview
Loading…
Cancel
Save