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

feat(report): 特种设备使用登记表添加列表项

Browse Source 
- 在 EquipmentRegistrationForm 组件中添加了 infoList 数组，用于存储多个设备信息
- 更新了表单布局，使用 v-for 循环渲染多个设备信息输入行
- 修改了 exportToWord 方法，将多个设备信息导出到 Word 文件
- 更新了 printDemo 组件中的示例数据，添加了 infoList 数组
- 优化了 uploadFile 组件中的文件上传和预览功能
master
Tuzki 6 months ago
parent c18827ca1d
commit c384426a85
4 changed files with 95 additions and 61 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. BIN
      public/templates/template.docx
  2. 77
      src/views/report/eventList/EquipmentRegistrationForm.vue
  3. 49
      src/views/report/eventList/printDemo.vue
  4. 30
      src/views/report/eventList/uploadFile.vue

BIN
public/templates/template.docx
View File

Binary file not shown.

77
src/views/report/eventList/EquipmentRegistrationForm.vue
Unescape View File

@ -30,13 +30,13 @@
<td class="line-label ">产品编号</td>
<td class="line-label ">单位内编号</td>
</tr>
<tr>
<td><el-input class="custom-input" v-model="formData.manufacturer" /></td>
<td><el-input class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input class="custom-input" v-model="formData.productId" /></td>
<td><el-input class="custom-input" v-model="formData.internalId" /></td>
<tr v-for="(item, index) in formData.infoList" :key="index">
<td><el-input class="custom-input" v-model="item.manufacturer" /></td>
<td><el-input class="custom-input" v-model="item.productionDate" /></td>
<td><el-input class="custom-input" v-model="item.productId" /></td>
<td><el-input class="custom-input" v-model="item.internalId" /></td>
</tr>
<tr>
<!-- <tr>
<td><el-input class="custom-input" v-model="formData.manufacturer" /></td>
<td><el-input class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input class="custom-input" v-model="formData.productId" /></td>
@ -47,7 +47,7 @@
<td><el-input class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input class="custom-input" v-model="formData.productId" /></td>
<td><el-input class="custom-input" v-model="formData.internalId" /></td>
</tr>
</tr> -->
<!-- 其他字段 -->
<tr>
<td class="line-label" >施工单位名称</td>
@ -133,28 +133,29 @@
return {
formData: {
"registrationCategory": "",//登记类别
"equipmentType": "",//设备品种
"productName": "",//产品名称
"cylinderQuantity": 1,//气瓶数量
"fillingMedium": "",//充装介质
"nominalWorkingPressure": 1,//气瓶公称工作压力
"cylinderVolume": 1,//气瓶容积
"manufacturer": "",//制造单位名称
"productionDate": "2025-04-11",//制造日期
"productId": "",//产品编号
"internalId": "",//单位内编号
"contractor": "",//施工单位名称
"supervisionAgency": "",//监督检验机构名称
"userUnit": "",//使用单位名称
"userAddress": "",//使用单位地址
"unifiedSocialCode": "",//使用单位统一社会信用代码
"postalCode": "",//邮政编码
"licensePlate": "",//车牌号
"vehicleVin": "",//车辆VIN码
"commissionDate": "2025-04-11",//投入使用日期
"telephone": "",//单位固定电话
"safetyManager": "",//安全管理员
"mobilePhone": ""//移动电话
"equipmentType": "",//设备品种
"productName": "",//产品名称
"cylinderQuantity": 1,//气瓶数量
"fillingMedium": "",//充装介质
"nominalWorkingPressure": 1,//气瓶公称工作压力
"cylinderVolume": 1,//气瓶容积
"manufacturer": "",//制造单位名称
"productionDate": "2025-04-11",//制造日期
"productId": "",//产品编号
"internalId": "",//单位内编号
"contractor": "",//施工单位名称
"supervisionAgency": "",//监督检验机构名称
"userUnit": "",//使用单位名称
"userAddress": "",//使用单位地址
"unifiedSocialCode": "",//使用单位统一社会信用代码
"postalCode": "",//邮政编码
"licensePlate": "",//车牌号
"vehicleVin": "",//车辆VIN码
"commissionDate": "2025-04-11",//投入使用日期
"telephone": "",//单位固定电话
"safetyManager": "",//安全管理员
"mobilePhone": "",//移动电话
"infoList":[]
}
}
},
@ -175,12 +176,17 @@
async exportToWord() {
// 加载模板文件（需放在public/templates目录下）
let _this = this;
_this.$modal.loading("正在导出文件，请稍后...");
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("/templates/template.docx", function (error, content) {
debugger
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
_this.$modal.closeLoading();
_this.$modal.notify("导出失败，请重试");
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
@ -214,9 +220,18 @@
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, "报价单.docx");
saveAs(out, "特种设备使用登记表（式样二）.docx");
_this.$modal.closeLoading();
_this.$modal.notify("文件已导出，请注意查看浏览器下载的文件");
setTimeout(() => {
_this.$tab.closeAllPage();
const ss = { path: "/eventList", name: "事项清单" };
_this.$tab.refreshPage(ss);
}, 2000);
});
// this.$tab.closeAllPage();
// const ss = { path: "/eventList", name: "事项清单" };
// this.$tab.refreshPage(ss);
}
}
}

49
src/views/report/eventList/printDemo.vue
Unescape View File

@ -35,7 +35,7 @@
</div>
</div>
<div class="nomore-view">
<div class="pdf-img-box drag-box" :style="showType === 'image'?boxStyle:boxStyle1" @mousedown="startDrag">
<div class="pdf-img-box drag-box" :style="showType === 'image' ? boxStyle : boxStyle1" @mousedown="startDrag">
<img v-if="showType === 'image'" :src="showUrl" class="preview-image" draggable="false" @mousedown.prevent
@dragstart.prevent>
<pdf v-if="showType === 'pdf'" :src="showUrl" :rotate="rotates" :page="currentPage"
@ -94,7 +94,6 @@
translate(${this.position.x}px, ${this.position.y}px)
translate(${this.centerOffset.x}px, ${this.centerOffset.y}px)
rotate(${this.rotate}deg)
translate(-${this.centerOffset.x}px, -${this.centerOffset.y}px)
scale(${this.scale})
translateZ(0)
`,
@ -154,23 +153,43 @@
"commissionDate": "2025-04-11",//投入使用日期
"telephone": "010-12345678",//单位固定电话
"safetyManager": "张三",//安全管理员
"mobilePhone": "13800138000"//移动电话
"mobilePhone": "13800138000",//移动电话
"infoList": [
{
"manufacturer": "XX制造有限公司",
"productionDate": "2025-04-11",//制造日期
"productId": "SN123456",//产品编号
"internalId": "IN7890",//单位内编号
},
{
"manufacturer": "XX制造有限公司",
"productionDate": "2025-04-11",//制造日期
"productId": "SN123456",//产品编号
"internalId": "IN7890",//单位内编号
},
{
"manufacturer": "",
"productionDate": "",//制造日期
"productId": "",//产品编号
"internalId": "",//单位内编号
}
]
}
}, 1000) // 模拟1秒延迟
},
bigView(val) {
this.showUrl = ''
this.showUrl = val.url;
this.showType = val.type;
this.$nextTick(() => {
const box = this.$el.querySelector('.drag-box');
if (box) {
this.centerOffset = {
x: box.offsetWidth / 2,
y: box.offsetHeight / 2
};
}
});
// this.showUrl = ''
// this.showUrl = val.url;
// this.showType = val.type;
// this.$nextTick(() => {
// const box = this.$el.querySelector('.drag-box');
// if (box) {
// this.centerOffset = {
// x: box.offsetWidth / 2,
// y: box.offsetHeight / 2
// };
// }
// });
},
// 放大
zoomIn() {

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

@ -93,14 +93,14 @@
<!-- 渲染 PDF 当前页 -->
<pdf :src="previewUrl" :rotate="rotate" :page="currentPage" @num-pages="pageCount = $event" @loading="isLoading = true"
@loaded="isLoading = false"></pdf>
<pdf :src="previewUrl" :rotate="rotate" :page="currentPage" @num-pages="pageCount = $event"
@loading="isLoading = true" @loaded="isLoading = false"></pdf>
<!-- 加载状态提示 -->
<div v-if="isLoading" class="loading">加载中...</div>
</div>
<span slot="footer" class="dialog-footer">
<div class="pagination" v-if="previewType === 'pdf'&& pageCount <= 1">
<div class="pagination" v-if="previewType === 'pdf' && pageCount <= 1">
<el-button @click="rotate += 90">&#x27F3;</el-button>
<el-button @click="rotate -= 90">&#x27F2;</el-button>
</div>
@ -257,18 +257,18 @@
this.previewType = '';
},
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;
}
// 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('提交数据:', {

Write Preview
Loading…
Cancel
Save