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

feat(report): 优化特种设备使用登记表功能

Browse Source 
- 添加表单验证规则，提高数据准确性
- 实现气瓶数量与信息列表的动态关联
- 优化导出 Word 功能，增加加载提示
- 调整页面样式，提升用户体验
master
Tuzki 6 months ago
parent 643d606929
commit 87816e0216
9 changed files with 627 additions and 336 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. 2
      public/index.html
  2. BIN
      public/templates/template.docx
  3. 4
      src/permission.js
  4. 3
      src/store/modules/user.js
  5. 6
      src/views/report/eventHistory/index.vue
  6. 771
      src/views/report/eventList/EquipmentRegistrationForm.vue
  7. 10
      src/views/report/eventList/printDemo.vue
  8. 161
      src/views/report/eventList/uploadFile.vue
  9. 6
      src/views/userSelect.vue

2
public/index.html
Unescape View File

@ -37,7 +37,7 @@
display: flex;
align-items: center;
flex-direction: column;
background-color: #000;
background-image: linear-gradient(to bottom, #b9d6ff, #d0dfff, #e3e9ff, #f3f3ff, #ffffff);
justify-content: center;
}

BIN
public/templates/template.docx
View File

Binary file not shown.

4
src/permission.js
Unescape View File

@ -5,7 +5,7 @@ import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getAccessToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'
import tab from './plugins/tab'
NProgress.configure({ showSpinner: false })
// 增加三方登陆 update by 芋艿
@ -21,11 +21,13 @@ router.beforeEach((to, from, next) => {
next({ path: '/report/eventList/index' })
NProgress.done()
} else if (to.path === '/userSelect'&&from.path!=='/userSelect') {
tab.closeAllPage();
store.dispatch('LogOut').then(() => {
next({ path: '/userSelect' })
NProgress.done()
})
}else if (to.path==='/404') {
tab.closeAllPage();
store.dispatch('LogOut').then(() => {
next({ path: '/userSelect' })
NProgress.done()

3
src/store/modules/user.js
Unescape View File

@ -5,6 +5,7 @@ const user = {
state: {
id: 0, // 用户编号
name: '',
nickname: '', // 用户昵称
avatar: '',
roles: [],
permissions: []
@ -112,6 +113,7 @@ const user = {
} else {
commit('SET_ROLES', ['ROLE_DEFAULT'])
}
debugger
commit('SET_ID', user.id)
commit('SET_NAME', user.userName)
commit('SET_NICKNAME', user.nickname)
@ -129,6 +131,7 @@ const user = {
logout(state.token).then(() => {
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
commit('SET_NICKNAME', '')
removeToken()
resolve()
}).catch(error => {

6
src/views/report/eventHistory/index.vue
Unescape View File

@ -82,11 +82,7 @@
total: 1,
// 门票分类列表
list: [
{
id: 1,
name: '特种设备使用登记表-2025032802',
createTime: '2021-03-28 10:00:00',
}
],
formData: {},
// 是否展开，默认全部展开

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

@ -1,207 +1,350 @@
<template>
<div class="a4-container">
<div class="form-title">特种设备使用登记表（式样二）</div>
<div class="form-subtitle dark-text fz26">登记类别：<span>{{formData.registrationCategory}}</span></div>
<table class="registration-table">
<!-- 设备基本情况 -->
<tr>
<td colspan="1" rowspan="9" class="line-label wd10">设备基本情况</td>
<td class="line-label">设备品种</td>
<td class="w25"><el-input :disabled="disabled" class="custom-input" v-model="formData.equipmentType" /></td>
<td class="line-label">产品名称</td>
<td class="w25"><el-input :disabled="disabled" class="custom-input" v-model="formData.productName" /></td>
</tr>
<tr>
<td class="line-label">气瓶数量</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.cylinderQuantity" /></td>
<td class="line-label">充装介质</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.fillingMedium" /></td>
</tr>
<tr>
<td class="line-label">气瓶公称工作压力 (MPa)</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.nominalWorkingPressure" /></td>
<td class="line-label">气瓶容积 (L)</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.cylinderVolume" /></td>
</tr>
<tr>
<td class="line-label ">制造单位名称</td>
<td class="line-label ">制造日期</td>
<td class="line-label ">产品编号</td>
<td class="line-label ">单位内编号</td>
</tr>
<tr v-for="(item, index) in formData.infoList" :key="index">
<td><el-input :disabled="disabled" class="custom-input" v-model="item.manufacturer" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="item.productionDate" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="item.productId" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="item.internalId" /></td>
</tr>
<!-- <tr>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.manufacturer" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productId" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.internalId" /></td>
</tr>
<tr>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.manufacturer" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productId" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.internalId" /></td>
</tr> -->
<!-- 其他字段 -->
<tr>
<td class="line-label" >施工单位名称</td>
<td colspan="3"><el-input :disabled="disabled" class="custom-input" v-model="formData.contractor" /></td>
</tr>
<tr>
<td class="line-label" colspan="1">监督检验机构名称</td>
<td colspan="3"><el-input :disabled="disabled" class="custom-input" v-model="formData.supervisionAgency" /></td>
</tr>
<tr>
<td colspan="1" rowspan="6" class="line-label wd10">设备使用情况</td>
<td colspan="1" class="line-label">使用单位名称</td>
<td colspan="3"><el-input :disabled="disabled" class="custom-input" v-model="formData.userUnit" /></td>
</tr>
<tr>
<td colspan="1" class="line-label">使用单位地址</td>
<td colspan="3"><el-input :disabled="disabled" class="custom-input" v-model="formData.userAddress" /></td>
</tr>
<tr>
<td class="line-label">使用单位统一社会信用代码</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.unifiedSocialCode" /></td>
<td class="line-label">邮政编码</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.postalCode" /></td>
</tr>
<tr>
<td class="line-label">车牌号</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.licensePlate" /></td>
<td class="line-label">车辆VIN码</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.vehicleVin" /></td>
</tr>
<tr>
<td class="line-label">投入使用日期</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.commissionDate" /></td>
<td class="line-label">单位固定电话</td>
<td> <el-input :disabled="disabled" class="custom-input" v-model="formData.telephone" /></td>
</tr>
<tr>
<td class="line-label">安全管理员</td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.safetyManager" /></td>
<td class="line-label">移动电话</td>
<td> <el-input :disabled="disabled" class="custom-input" v-model="formData.mobilePhone" /></td>
</tr>
<tr>
<td class="dark-text" colspan="5">
<p class="tation">在此申明：所申报的内容真实；在使用过程中，将严格执行《中华人民共和国特种设备安全法》及相关规定，并且接受特种设备安全监督管理部门的监督管理。</p>
<p class="signName tation"><span>使用单位填表人员：</span><span>日期：</span> </p>
<p class="singImg">（使用单位公章）</p>
<p class="signName in-line-flex"><span>使用单位安全管理人员：</span><span>日期：</span></p>
<span class="in-line-flex float-right">年 &nbsp;&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;&nbsp; 日&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
<tr>
<td class="dark-text" colspan="5">
<p>说明：</p>
<p class="signName tation"><span>登记机关登记人员：</span><span>日期：</span> </p>
<p class="singImg">（登记机关专用章）</p>
<p class="signName tation in-line-flex"><span>&nbsp;&nbsp;&nbsp;&nbsp;使用登记证编号：</span><span></span></p>
<span class="in-line-flex float-right">年 &nbsp;&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;&nbsp; 日&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
</table>
<div class="form-subtitle dark-text fz26">登记类别：<span>{{ formData.registrationCategory }}</span></div>
<el-form ref="formRef" :model="formData" :rules="rules">
<table class="registration-table">
<!-- 设备基本情况 -->
<tr>
<td colspan="1" rowspan="9" class="line-label wd10">设备基本情况</td>
<td class="line-label">设备品种</td>
<td class="w25">
<el-form-item prop="equipmentType">
<el-input :disabled="disabled" class="custom-input" v-model="formData.equipmentType"/>
</el-form-item>
</td>
<td class="line-label">产品名称</td>
<td class="w25">
<el-form-item prop="productName">
<el-input :disabled="disabled" class="custom-input" v-model="formData.productName"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label">气瓶数量</td>
<td>
<el-form-item prop="cylinderQuantity">
<el-input :disabled="disabled" class="custom-input" v-model="formData.cylinderQuantity"/>
</el-form-item>
</td>
<td class="line-label">充装介质</td>
<td>
<el-form-item prop="fillingMedium">
<el-input :disabled="disabled" class="custom-input" v-model="formData.fillingMedium"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label">气瓶公称工作压力 (MPa)</td>
<td>
<el-form-item prop="nominalWorkingPressure">
<el-input :disabled="disabled" class="custom-input" v-model="formData.nominalWorkingPressure"/>
</el-form-item>
</td>
<td class="line-label">气瓶容积 (L)</td>
<td>
<el-form-item prop="cylinderVolume">
<el-input :disabled="disabled" class="custom-input" v-model="formData.cylinderVolume"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label ">制造单位名称</td>
<td class="line-label ">制造日期</td>
<td class="line-label ">产品编号</td>
<td class="line-label ">单位内编号</td>
</tr>
<tr v-for="(item, index) in formData.infoList" :key="index">
<td>
<el-form-item :prop="`infoList.${index}.manufacturer`"
:rules="shouldValidate(index) ?[{ required: true, message: '制造单位不能为空' }]:[]">
<el-input :disabled="disabled" class="custom-input" v-model="item.manufacturer"/>
</el-form-item>
</td>
<td>
<el-form-item :prop="`infoList.${index}.productionDate`"
:rules="shouldValidate(index) ?[
{ required: true, message: '制造日期不能为空' },
// { pattern: /^\d{4}\.\d{1,2}\.\d{1,2}$/, message: '格式应为YYYY.MM.DD' }
]:[]">
<el-input :disabled="disabled" class="custom-input" v-model="item.productionDate"/>
</el-form-item>
</td>
<td>
<el-form-item :prop="`infoList.${index}.productId`"
:rules="shouldValidate(index) ?[
{ required: true, message: '产品编号不能为空' },
// { pattern: /^\d{4}\.\d{1,2}\.\d{1,2}$/, message: '格式应为YYYY.MM.DD' }
]:[]">
<el-input :disabled="disabled" class="custom-input" v-model="item.productId"/>
</el-form-item>
</td>
<td>
<el-form-item :prop="`infoList.${index}.internalId`"
:rules="shouldValidate(index) ?[
{ required: true, message: '单位内编号不能为空' },
// { pattern: /^\d{4}\.\d{1,2}\.\d{1,2}$/, message: '格式应为YYYY.MM.DD' }
]:[]">
<el-input :disabled="disabled" class="custom-input" v-model="item.internalId"/>
</el-form-item>
</td>
</tr>
<!-- <tr>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.manufacturer" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productId" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.internalId" /></td>
</tr>
<tr>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.manufacturer" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productionDate" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.productId" /></td>
<td><el-input :disabled="disabled" class="custom-input" v-model="formData.internalId" /></td>
</tr> -->
<!-- 其他字段 -->
<tr>
<td class="line-label">施工单位名称</td>
<td colspan="3">
<el-form-item prop="contractor">
<el-input :disabled="disabled" class="custom-input" v-model="formData.contractor"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label" colspan="1">监督检验机构名称</td>
<td colspan="3">
<el-form-item prop="supervisionAgency">
<el-input :disabled="disabled" class="custom-input" v-model="formData.supervisionAgency"/>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="1" rowspan="6" class="line-label wd10">设备使用情况</td>
<td colspan="1" class="line-label">使用单位名称</td>
<td colspan="3">
<el-form-item prop="userUnit">
<el-input :disabled="disabled" class="custom-input" v-model="formData.userUnit"/>
</el-form-item>
</td>
</tr>
<tr>
<td colspan="1" class="line-label">使用单位地址</td>
<td colspan="3">
<el-form-item prop="userAddress">
<el-input :disabled="disabled" class="custom-input" v-model="formData.userAddress"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label">使用单位统一社会信用代码</td>
<td>
<el-form-item prop="unifiedSocialCode">
<el-input :disabled="disabled" class="custom-input" v-model="formData.unifiedSocialCode"/>
</el-form-item>
</td>
<td class="line-label">邮政编码</td>
<td>
<el-form-item prop="postalCode">
<el-input :disabled="disabled" class="custom-input" v-model="formData.postalCode"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label">车牌号</td>
<td>
<el-form-item prop="licensePlate">
<el-input :disabled="disabled" class="custom-input" v-model="formData.licensePlate"/>
</el-form-item>
</td>
<td class="line-label">车辆VIN码</td>
<td>
<el-form-item prop="vehicleVin">
<el-input :disabled="disabled" class="custom-input" v-model="formData.vehicleVin"/>
</el-form-item>
</td>
</tr>
<tr>
<td class="line-label">投入使用日期</td>
<td>
<el-form-item prop="commissionDate">
<el-input :disabled="disabled" class="custom-input" v-model="formData.commissionDate"/>
</el-form-item>
</td>
<td class="line-label">单位固定电话</td>
<td>
<el-input :disabled="disabled" class="custom-input" v-model="formData.telephone"/>
</td>
</tr>
<tr>
<td class="line-label">安全管理员</td>
<td>
<el-input :disabled="disabled" class="custom-input" v-model="formData.safetyManager"/>
</td>
<td class="line-label">移动电话</td>
<td>
<el-input :disabled="disabled" class="custom-input" v-model="formData.mobilePhone"/>
</td>
</tr>
<tr>
<td class="dark-text" colspan="5">
<p class="tation">
在此申明：所申报的内容真实；在使用过程中，将严格执行《中华人民共和国特种设备安全法》及相关规定，并且接受特种设备安全监督管理部门的监督管理。</p>
<p class="signName tation"><span>使用单位填表人员：</span><span>日期：</span></p>
<p class="singImg">（使用单位公章）</p>
<p class="signName in-line-flex"><span>使用单位安全管理人员：</span><span>日期：</span></p>
<span class="in-line-flex float-right">年 &nbsp;&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;&nbsp; 日&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
<tr>
<td class="dark-text" colspan="5">
<p>说明：</p>
<p class="signName tation"><span>登记机关登记人员：</span><span>日期：</span></p>
<p class="singImg">（登记机关专用章）</p>
<p class="signName tation in-line-flex"><span>&nbsp;&nbsp;&nbsp;&nbsp;使用登记证编号：</span><span></span>
</p>
<span class="in-line-flex float-right">年 &nbsp;&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;&nbsp; 日&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
</table>
</el-form>
<div class="dark-text tation">注：本式样适用于车用气瓶使用登记。</div>
<div class="footer">
<el-button type="primary" @click="exportToWord">{{disabled?'下载':'保存并下载'}}</el-button>
<el-button type="primary" @click="exportToWord">{{ disabled ? '下载' : '保存并下载' }}</el-button>
</div>
</div>
</template>
<script>
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils' //JS解析文件
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
import * as TicketSortApi from '@/api/ticketing/ticketsort'
export default {
props: {
initialData: {
type: Object,
default: () => ({})
},
disabled:{
type: Boolean,
default: false
}
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils' //JS解析文件
import Docxtemplater from 'docxtemplater'
import {saveAs} from 'file-saver'
import * as TicketSortApi from '@/api/ticketing/ticketsort'
export default {
props: {
initialData: {
type: Object,
default: () => ({})
},
data() {
return {
isout:false,
formData: {
"registrationCategory": "",//登记类别
"equipmentType": "",//设备品种
"productName": "",//产品名称
"cylinderQuantity": 0,//气瓶数量
"fillingMedium": "",//充装介质
"nominalWorkingPressure": 0,//气瓶公称工作压力
"cylinderVolume": 0,//气瓶容积
"manufacturer": "",//制造单位名称
"productionDate": "",//制造日期
"productId": "",//产品编号
"internalId": "",//单位内编号
"contractor": "",//施工单位名称
"supervisionAgency": "",//监督检验机构名称
"userUnit": "",//使用单位名称
"userAddress": "",//使用单位地址
"unifiedSocialCode": "",//使用单位统一社会信用代码
"postalCode": "",//邮政编码
"licensePlate": "",//车牌号
"vehicleVin": "",//车辆VIN码
"commissionDate": "",//投入使用日期
"telephone": "",//单位固定电话
"safetyManager": "",//安全管理员
"mobilePhone": "",//移动电话
"infoList":[]
}
disabled: {
type: Boolean,
default: false
}
},
data() {
const validateNumber = (unit) => (rule, value, callback) => {
if (!new RegExp(`^\\d+(\\.\\d+)?\\s${unit}$`).test(value)) {
callback(new Error(`格式应为数值+${unit}（如：1.60 ${unit}）`))
} else {
callback()
}
},
watch: {
initialData: {
deep: true,
immediate: true,
handler(newVal) {
if(!newVal.infoList||newVal.infoList.length <3){
const requiredLength = 3;
const emptyItem = {
manufacturer: '',
productionDate: '',
productId: '',
internalId: ''
};
while (newVal.infoList.length < requiredLength) {
newVal.infoList.push({ ...emptyItem });
}
}
return {
isout: false,
formData: {
"registrationCategory": "",//登记类别
"equipmentType": "",//设备品种
"productName": "",//产品名称
"cylinderQuantity": 0,//气瓶数量
"fillingMedium": "",//充装介质
"nominalWorkingPressure": 0,//气瓶公称工作压力
"cylinderVolume": 0,//气瓶容积
"manufacturer": "",//制造单位名称
"productionDate": "",//制造日期
"productId": "",//产品编号
"internalId": "",//单位内编号
"contractor": "",//施工单位名称
"supervisionAgency": "",//监督检验机构名称
"userUnit": "",//使用单位名称
"userAddress": "",//使用单位地址
"unifiedSocialCode": "",//使用单位统一社会信用代码
"postalCode": "",//邮政编码
"licensePlate": "",//车牌号
"vehicleVin": "",//车辆VIN码
"commissionDate": "",//投入使用日期
"telephone": "",//单位固定电话
"safetyManager": "",//安全管理员
"mobilePhone": "",//移动电话
"infoList": []
},
rules: {
equipmentType: [{required: true, message: '设备品种不能为空', trigger: 'blur'}],
productName: [{required: true, message: '产品名称不能为空', trigger: 'blur'}],
cylinderQuantity: [{required: true, message: '气瓶数量不能为空', trigger: 'blur'}],
fillingMedium: [{required: true, message: '充装介质不能为空', trigger: 'blur'}],
nominalWorkingPressure: [
{required: true, message: '公称工作压力不能为空', trigger: 'blur'},
// { validator: validateNumber('MPa') }
],
cylinderVolume: [
{required: true, message: '气瓶容积不能为空', trigger: 'blur'},
// { validator: validateNumber('L') }
],
contractor: [{required: true, message: '施工单位不能为空', trigger: 'blur'}],
supervisionAgency: [{required: true, message: '监督检验机构不能为空', trigger: 'blur'}],
userUnit: [{required: true, message: '使用单位不能为空', trigger: 'blur'}],
userAddress: [{required: true, message: '使用地址不能为空', trigger: 'blur'}],
unifiedSocialCode: [{required: true, message: '统一信用代码不能为空', trigger: 'blur'}],
postalCode: [{required: true, message: '邮政编码不能为空', trigger: 'blur'}],
licensePlate: [{required: true, message: '车牌号不能为空', trigger: 'blur'}],
vehicleVin: [{required: true, message: 'VIN码不能为空', trigger: 'blur'}],
commissionDate: [
{required: true, message: '启用日期不能为空', trigger: 'blur'},
// { pattern: /^\d{4}\.\d{1,2}\.\d{1,2}$/, message: '日期格式应为YYYY.MM.DD' }
]
}
}
},
watch: {
initialData: {
deep: true,
immediate: true,
handler(newVal) {
if (!newVal.infoList || newVal.infoList.length < 3) {
const requiredLength = 3;
const emptyItem = {
manufacturer: '',
productionDate: '',
productId: '',
internalId: ''
};
while (newVal.infoList.length < requiredLength) {
newVal.infoList.push({...emptyItem});
}
this.formData = { ...newVal }
console.log(this.formData)
}
this.formData = {...newVal}
console.log(this.formData)
}
},
created() {
'formData.cylinderQuantity': {
handler(newVal) {
// 触发表单重新校验
this.$nextTick(() => {
this.$refs.formRef.validateField(`infoList`)
})
}
}
},
created() {
},
methods: {
shouldValidate(index) {
const quantity = Number(this.formData.cylinderQuantity) || 0
return index < quantity
},
methods: {
async handleSubmit() {
debugger
if(!this.isout||this.disabled){
// this.exportToWord()
this.$modal.closeLoading();
}
if(!this.disabled&&this.isout){
try {
async handleSubmit() {
debugger
if (!this.isout || this.disabled) {
// this.exportToWord()
this.$modal.closeLoading();
}
if (!this.disabled && this.isout) {
try {
console.log(this.formData)
let appendDate = {...this.formData}
//以下暂时写固定值
@ -210,7 +353,7 @@
appendDate.productId = new Date().getTime();
appendDate.internalId = new Date().toLocaleDateString().split('/').join('-')
//以上暂时写固定值
if(appendDate.infoList.length <3){
if (appendDate.infoList.length < 3) {
const requiredLength = 3;
const emptyItem = {
manufacturer: '',
@ -218,35 +361,37 @@
productId: '',
internalId: ''
};
while (appendDate.infoList.length < requiredLength) {
appendDate.infoList.push({ ...emptyItem });
appendDate.infoList.push({...emptyItem});
}
}
appendDate.infoList = JSON.stringify(appendDate.infoList)
await TicketSortApi.createOcr(appendDate).then(res => {
console.log(res)
if (res.code === 0) {
this.$modal.msgSuccess('记录保存成功')
setTimeout(() => {
this.$tab.closeAllPage();
const ss = { path: "/report/eventList/uploadFile?isUpload=true", name: "事项清单" };
this.$tab.refreshPage(ss);
}, 1500)
}else{
this.$modal.msgError('记录保存失败')
}
})
console.log(res)
if (res.code === 0) {
this.$modal.msgSuccess('记录保存成功')
setTimeout(() => {
this.$tab.closeAllPage();
const ss = {path: "/report/eventList/uploadFile?isUpload=true", name: "事项清单"};
this.$tab.refreshPage(ss);
}, 1500)
} else {
this.$modal.msgError('记录保存失败')
}
})
} catch (error) {
console.log(error)
} finally {
this.$modal.closeLoading();
}
}
},
async exportToWord() {
// 加载模板文件（需放在public/templates目录下）
}
},
async exportToWord() {
// 加载模板文件（需放在public/templates目录下）
try {
await this.$refs.formRef.validate()
let _this = this;
_this.$modal.loading("正在导出文件，请稍后...");
@ -291,7 +436,7 @@
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, "特种设备使用登记表（式样二）"+_this.formData.licensePlate+".docx");
saveAs(out, "特种设备使用登记表（式样二）" + _this.formData.licensePlate + ".docx");
_this.$modal.notify("文件已导出，请注意查看浏览器下载的文件");
_this.isout = true
_this.handleSubmit()
@ -299,127 +444,139 @@
// this.$tab.closeAllPage();
// const ss = { path: "/eventList", name: "事项清单" };
// this.$tab.refreshPage(ss);
} catch (e) {
this.$modal.msgError('请检查必填项')
}
}
}
}
</script>
<style scoped lang="scss">
.a4-container {
width: 210mm;
min-height: 297mm;
margin: 0 auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.a4-container {
width: 210mm;
min-height: 297mm;
margin: 0 auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
.form-title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
.form-subtitle {
text-align: left;
margin-bottom: 20px;
}
.form-subtitle {
text-align: left;
margin-bottom: 20px;
}
.registration-table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
.registration-table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
.registration-table td {
border: 1px solid #000;
padding: 8px;
}
.registration-table td {
border: 1px solid #000;
padding: 8px;
}
.declaration {
margin: 20px 0;
font-size: 14px;
.declaration {
margin: 20px 0;
font-size: 14px;
}
.footer {
text-align: center;
margin-top: 30px;
}
/* 打印样式 */
@media print {
.a4-container {
box-shadow: none;
margin: 0;
}
.footer {
text-align: center;
margin-top: 30px;
display: none;
}
}
/* 打印样式 */
@media print {
.a4-container {
box-shadow: none;
margin: 0;
}
.footer {
display: none;
}
}
.line-label {
width: 20%;
text-align: center;
font-size: 14px;
color: #000;
}
.wd10 {
width: 6%;
}
.line-label{
width: 20%;
text-align: center;
font-size: 14px;
color: #000;
}
.wd10{
width: 6%;
}
.w25{
width: 25%;
}
.w25 {
width: 25%;
}
.dark-text{
color: #000;
}
.tation{
text-indent: 2em;
}
.singImg{
width: 100%;
text-align: right;
margin-bottom: 0;
}
.signName{
white-space: pre;
margin-bottom: 0;
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
}
.dark-text {
color: #000;
}
.w100{
width: 100%;
}
.in-line-flex{
display: inline-flex;
}
.float-right{
float: right;
}
.fz26{
font-size: 16px;
margin-bottom: 0;
font-weight: 500;
.tation {
text-indent: 2em;
}
span{
color: #e00000;
}
.singImg {
width: 100%;
text-align: right;
margin-bottom: 0;
}
.signName {
white-space: pre;
margin-bottom: 0;
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
}
.w100 {
width: 100%;
}
.in-line-flex {
display: inline-flex;
}
.float-right {
float: right;
}
.fz26 {
font-size: 16px;
margin-bottom: 0;
font-weight: 500;
span {
color: #e00000;
}
}
</style>
<style>
.custom-input .el-input__inner{
height: 24px;
line-height: 24px;
border: none;
}
.custom-input.is-disabled .el-input__inner{
color: #000;
background-color: transparent;
}
</style>
.custom-input .el-input__inner {
height: 24px;
line-height: 24px;
border: none;
}
.custom-input.is-disabled .el-input__inner {
color: #000;
background-color: transparent;
}
</style>

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

@ -195,10 +195,11 @@
item => item.type === 'productQualified' && item.fillingMedium?.trim()
);
// 2. 获取首个有效值
// 2. 获取首个有效值并过滤括号
formData.fillingMedium = qualifiedItems.length > 0
? qualifiedItems[0].fillingMedium
? qualifiedItems[0].fillingMedium.replace(/[(（）)]/g, '') // 新增过滤逻辑
: '';
debugger
} catch (e) {
console.error('充装介质处理失败:', e);
formData.fillingMedium = ''; // 默认值
@ -469,7 +470,7 @@
unifiedSocialCode: "",//使用单位统一社会信用代码
postalCode: "",//邮政编码
licensePlate: "",//车牌号
vehicleVin:"",//车辆VIN码
vehicleVin: "",//车辆VIN码
commissionDate: "",//投入使用日期
telephone: "",//单位固定电话
safetyManager: "",//安全管理员
@ -480,7 +481,6 @@
certificateList: [], // 初始化数组容器
infoList: []
});
// mergedData.infoList = []
// const mergedData = {
// registrationCategory: "过户",
// unifiedSocialCode: "91130185MAE5XYHG9W",
@ -959,6 +959,8 @@
min-width: 50%;
height: calc(100vh - 86px);
overflow-y: scroll;
scrollbar-width: thin!important;
scrollbar-color: #7dbdfc #f5f5f5;
}
}

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

@ -22,11 +22,35 @@
<span class="hint-text">*请上传右侧所需材料</span>
</div>
<div class="upload-section">
<el-upload class="upload-area" :action="uploadFileUrl" :headers="headers" :multiple="true"
:file-list="basicFiles" :on-preview="handlePreview" :before-upload="beforeUpload"
:http-request="uploadFileFactory('basic')" :on-remove="handleRemoveBasic"
<el-upload :show-file-list="false" class="upload-area" :action="uploadFileUrl" :headers="headers"
:multiple="true" :before-upload="beforeUpload" :http-request="uploadFileFactory('basic')"
:on-success="handleBasicUploadSuccess">
<el-button type="primary">选择文件</el-button>
<el-button style="display: flex;" type="primary">选择文件</el-button>
<!-- 自定义文件列表 -->
<div class="custom-file-list">
<div v-for="(file, index) in basicFiles" :key="index" class="file-item">
<div class="file-preview" @click.stop="handlePreview(file)">
<!-- 图片类型显示缩略图 -->
<img v-if="file.type === 'image'" :src="file.url" class="thumb">
<!-- PDF类型显示PDF图标 -->
<div v-else-if="file.type === 'pdf'" class="pdf-icon">
<pdf :src="file.url" :rotate="rotate" :page="currentPage" @num-pages="pageCount = $event"
@loading="isLoading = true" @loaded="isLoading = false"></pdf>
<!-- 加载状态提示 -->
<div v-if="isLoading" class="loading">加载中...</div>
</div>
</div>
<!-- 文件名和删除按钮 -->
<div class="file-info">
<div class="file-name">{{ file.name }}</div>
<el-button size="mini" type="danger" icon="el-icon-delete" circle
@click.stop="handleRemoveBasic(file)"></el-button>
</div>
</div>
</div>
</el-upload>
</div>
@ -52,11 +76,35 @@
<span class="hint-text">*请上传右侧所需材料</span>
</div>
<div class="upload-section">
<el-upload class="upload-area" :action="uploadFileUrl" :headers="headers" :multiple="true"
:file-list="usageFiles" :on-preview="handlePreview" :before-upload="beforeUpload"
:http-request="uploadFileFactory('usage')" :on-remove="handleRemoveUsage"
<el-upload :show-file-list="false" class="upload-area" :action="uploadFileUrl" :headers="headers"
:multiple="true" :before-upload="beforeUpload" :http-request="uploadFileFactory('usage')"
:on-success="handlUsageeUploadSuccess">
<el-button type="primary">选择文件</el-button>
<el-button style="display: flex;" type="primary">选择文件</el-button>
<!-- 自定义文件列表 -->
<div class="custom-file-list">
<div v-for="(file, index) in usageFiles" :key="index" class="file-item">
<div class="file-preview" @click.stop="handlePreview(file)">
<!-- 图片类型显示缩略图 -->
<img v-if="file.type === 'image'" :src="file.url" class="thumb">
<!-- PDF类型显示PDF图标 -->
<div v-else-if="file.type === 'pdf'" class="pdf-icon">
<pdf :src="file.url" :rotate="rotate" :page="currentPage" @num-pages="pageCount = $event"
@loading="isLoading = true" @loaded="isLoading = false"></pdf>
<!-- 加载状态提示 -->
<div v-if="isLoading" class="loading">加载中...</div>
</div>
</div>
<!-- 文件名和删除按钮 -->
<div class="file-info">
<div class="file-name">{{ file.name }}</div>
<el-button size="mini" type="danger" icon="el-icon-delete" circle
@click.stop="handleRemoveUsage(file)"></el-button>
</div>
</div>
</div>
</el-upload>
</div>
@ -245,13 +293,27 @@
};
},
handleRemoveBasic(file, fileList) {
this.basicFiles = fileList;
handleRemoveBasic(targetFile) {
const index = this.basicFiles.findIndex(file =>
file.url === targetFile.url &&
file.name === targetFile.name
);
if (index !== -1) {
this.basicFiles.splice(index, 1); // 直接操作数据源
}
console.log(' this.basicFiles', this.basicFiles)
},
handleRemoveUsage(file, fileList) {
handleRemoveUsage(targetFile) {
const index = this.usageFiles.findIndex(file =>
file.url === targetFile.url &&
file.name === targetFile.name
);
this.usageFiles = fileList;
if (index !== -1) {
this.usageFiles.splice(index, 1);
}
},
handlePreview(file) {
@ -342,6 +404,11 @@
.upload-area {
margin-top: 10px;
width: 100%;
overflow: hidden;
overflow-x: scroll;
scrollbar-width: thin!important;
scrollbar-color: #7dbdfc #f5f5f5;
}
.tips {
@ -373,8 +440,8 @@
font-size: 16px;
}
ol{
li{
ol {
li {
font-size: 14px;
}
}
@ -405,8 +472,72 @@
align-items: self-start;
.u-left {
width: 40%;
width: 55%;
margin-right: 20px;
}
}
/* 自定义文件列表样式 */
.custom-file-list {
display: flex;
flex-wrap: nowrap;
gap: 15px;
margin-top: 15px;
.file-item {
width: 100px;
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
}
.file-preview {
height: 80px;
background: #f5f7fa;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.thumb {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.pdf-icon {
text-align: center;
color: #409EFF;
i {
font-size: 40px;
display: block;
}
span {
font-size: 12px;
}
}
}
.file-info {
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
.file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
}
}
.m-pages{
scrollbar-width: thin!important;
scrollbar-color: #7dbdfc #f5f5f5;
}
</style>

6
src/views/userSelect.vue
Unescape View File

@ -9,7 +9,7 @@
<h2 class="sub-title">请选择您的角色</h2>
<el-row :gutter="30" class="role-container">
<el-col :xs="24" :sm="12" :md="12" :lg="6">
<el-col :xs="24" :sm="5" :md="5" :lg="5">
<el-card class="role-card" :body-style="{ padding: '0' }" shadow="hover"
@click.native="handleRoleSelect('personal')">
<div class="card-content personal-card">
@ -24,7 +24,7 @@
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="6">
<el-col :xs="24" :sm="5" :md="5" :lg="5">
<el-card class="role-card" :body-style="{ padding: '0' }" shadow="hover"
@click.native="handleRoleSelect('staff')">
<div class="card-content staff-card">
@ -172,7 +172,7 @@
}
.card-content {
padding: 230px 20px 230px;
padding: 150px 20px 150px;
text-align: center;
position: relative;
overflow: hidden;

Write Preview
Loading…
Cancel
Save