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

refactor(report): 优化气瓶使用登记表单

Browse Source 
- 调整了表单布局和样式，提高了可读性
- 重构了部分代码结构，提高了维护性
- 优化了表单验证逻辑，提高了用户体验
- 调整了导出Word功能，提高了稳定性
master
Tuzki 6 months ago
parent b3b421db6c
commit 9fc7d15095
1 changed files with 369 additions and 366 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. 735
      src/views/report/eventList/EquipmentRegistrationForm.vue

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

@ -10,13 +10,13 @@
<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-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-input :disabled="disabled" class="custom-input" v-model="formData.productName" />
</el-form-item>
</td>
</tr>
@ -24,13 +24,13 @@
<td class="line-label">气瓶数量</td>
<td>
<el-form-item prop="cylinderQuantity">
<el-input :disabled="disabled" class="custom-input" v-model="formData.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-input :disabled="disabled" class="custom-input" v-model="formData.fillingMedium" />
</el-form-item>
</td>
</tr>
@ -38,13 +38,13 @@
<td class="line-label">气瓶公称工作压力 (MPa)</td>
<td>
<el-form-item prop="nominalWorkingPressure">
<el-input :disabled="disabled" class="custom-input" v-model="formData.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-input :disabled="disabled" class="custom-input" v-model="formData.cylinderVolume" />
</el-form-item>
</td>
</tr>
@ -57,35 +57,32 @@
<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"/>
: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 :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 :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 :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>
@ -106,7 +103,7 @@
<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-input :disabled="disabled" class="custom-input" v-model="formData.contractor" />
</el-form-item>
</td>
</tr>
@ -114,7 +111,7 @@
<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-input :disabled="disabled" class="custom-input" v-model="formData.supervisionAgency" />
</el-form-item>
</td>
</tr>
@ -123,7 +120,7 @@
<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-input :disabled="disabled" class="custom-input" v-model="formData.userUnit" />
</el-form-item>
</td>
</tr>
@ -131,7 +128,7 @@
<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-input :disabled="disabled" class="custom-input" v-model="formData.userAddress" />
</el-form-item>
</td>
</tr>
@ -139,13 +136,13 @@
<td class="line-label">使用单位统一社会信用代码</td>
<td>
<el-form-item prop="unifiedSocialCode">
<el-input :disabled="disabled" class="custom-input" v-model="formData.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-input :disabled="disabled" class="custom-input" v-model="formData.postalCode" />
</el-form-item>
</td>
</tr>
@ -153,13 +150,13 @@
<td class="line-label">车牌号</td>
<td>
<el-form-item prop="licensePlate">
<el-input :disabled="disabled" class="custom-input" v-model="formData.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-input :disabled="disabled" class="custom-input" v-model="formData.vehicleVin" />
</el-form-item>
</td>
</tr>
@ -167,22 +164,22 @@
<td class="line-label">投入使用日期</td>
<td>
<el-form-item prop="commissionDate">
<el-input :disabled="disabled" class="custom-input" v-model="formData.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"/>
<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"/>
<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"/>
<el-input :disabled="disabled" class="custom-input" v-model="formData.mobilePhone" />
</td>
</tr>
<tr>
@ -192,7 +189,8 @@
<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>
<span class="in-line-flex float-right">年 &nbsp;&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;&nbsp;
日&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
<tr>
@ -202,7 +200,8 @@
<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>
<span class="in-line-flex float-right">年 &nbsp;&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;&nbsp;
日&nbsp;&nbsp;&nbsp;&nbsp;</span>
</td>
</tr>
</table>
@ -215,145 +214,94 @@
</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
}
},
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()
}
}
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": []
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: () => ({})
},
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' }
]
disabled: {
type: Boolean,
default: false
}
}
},
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});
}
},
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()
}
this.formData = {...newVal}
console.log(this.formData)
}
},
'formData.cylinderQuantity': {
handler(newVal) {
// 触发表单重新校验
this.$nextTick(() => {
this.$refs.formRef.validateField(`infoList`)
})
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' }
]
}
}
}
},
created() {
},
methods: {
shouldValidate(index) {
const quantity = Number(this.formData.cylinderQuantity) || 0
return index < quantity
},
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}
//以下暂时写固定值
appendDate.manufacturer = "XX制造有限公司"
appendDate.productionDate = "2025-04-11"
appendDate.productId = new Date().getTime();
appendDate.internalId = new Date().toLocaleDateString().split('/').join('-')
//以上暂时写固定值
if (appendDate.infoList.length < 3) {
watch: {
initialData: {
deep: true,
immediate: true,
handler(newVal) {
const localData = JSON.parse(JSON.stringify(newVal))
if (!newVal.infoList || newVal.infoList.length < 3) {
const requiredLength = 3;
const emptyItem = {
manufacturer: '',
@ -362,221 +310,276 @@ export default {
internalId: ''
};
while (appendDate.infoList.length < requiredLength) {
appendDate.infoList.push({...emptyItem});
while (newVal.infoList.length < requiredLength) {
newVal.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('记录保存失败')
}
this.formData = {
...this.formData, // 保留现有数据
infoList: localData.infoList // 仅更新列表
}
console.log(this.formData)
}
},
'formData.cylinderQuantity': {
handler(newVal) {
// 触发表单重新校验
this.$nextTick(() => {
this.$refs.formRef.validateField(`infoList`)
})
} catch (error) {
console.log(error)
} finally {
this.$modal.closeLoading();
}
}
},
async exportToWord() {
// 加载模板文件（需放在public/templates目录下）
try {
await this.$refs.formRef.validate()
let _this = this;
_this.$modal.loading("正在导出文件，请稍后...");
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("/templates/template.docx", function (error, content) {
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
_this.$modal.closeLoading();
_this.$modal.notify("导出失败，请重试");
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
..._this.formData
});
console.log(doc)
created() {
},
methods: {
shouldValidate(index) {
const quantity = Number(this.formData.cylinderQuantity) || 0
return index < quantity
},
async handleSubmit() {
debugger
if (!this.isout || this.disabled) {
// this.exportToWord()
this.$modal.closeLoading();
}
if (!this.disabled && this.isout) {
try {
// 用模板变量的值替换所有模板变量
doc.render();
console.log(this.formData)
let appendDate = { ...this.formData }
//以下暂时写固定值
appendDate.manufacturer = "XX制造有限公司"
appendDate.productionDate = "2025-04-11"
appendDate.productId = new Date().getTime();
appendDate.internalId = new Date().toLocaleDateString().split('/').join('-')
//以上暂时写固定值
if (appendDate.infoList.length < 3) {
const requiredLength = 3;
const emptyItem = {
manufacturer: '',
productionDate: '',
productId: '',
internalId: ''
};
while (appendDate.infoList.length < requiredLength) {
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('记录保存失败')
}
})
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
};
console.log(JSON.stringify({
error: e
}));
throw error;
console.log(error)
} finally {
this.$modal.closeLoading();
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
}
},
async exportToWord() {
// 加载模板文件（需放在public/templates目录下）
try {
await this.$refs.formRef.validate()
let _this = this;
_this.$modal.loading("正在导出文件，请稍后...");
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("/templates/template.docx", function (error, content) {
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
_this.$modal.closeLoading();
_this.$modal.notify("导出失败，请重试");
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
..._this.formData
});
console.log(doc)
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
};
console.log(JSON.stringify({
error: e
}));
throw error;
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, "特种设备使用登记表（式样二）" + _this.formData.licensePlate + ".docx");
_this.$modal.notify("文件已导出，请注意查看浏览器下载的文件");
_this.isout = true
_this.handleSubmit()
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, "特种设备使用登记表（式样二）" + _this.formData.licensePlate + ".docx");
_this.$modal.notify("文件已导出，请注意查看浏览器下载的文件");
_this.isout = true
_this.handleSubmit()
});
// this.$tab.closeAllPage();
// const ss = { path: "/eventList", name: "事项清单" };
// this.$tab.refreshPage(ss);
} catch (e) {
this.$modal.msgError('请检查必填项')
// 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);
}
.form-title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
.form-subtitle {
text-align: left;
margin-bottom: 20px;
}
.registration-table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
.registration-table td {
border: 1px solid #000;
padding: 8px;
}
.declaration {
margin: 20px 0;
font-size: 14px;
}
.footer {
text-align: center;
margin-top: 30px;
}
/* 打印样式 */
@media print {
.a4-container {
box-shadow: none;
margin: 0;
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-subtitle {
text-align: left;
margin-bottom: 20px;
}
.registration-table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
.registration-table td {
border: 1px solid #000;
padding: 8px;
}
.declaration {
margin: 20px 0;
font-size: 14px;
}
.footer {
display: none;
text-align: center;
margin-top: 30px;
}
/* 打印样式 */
@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%;
}
.w25 {
width: 25%;
}
.dark-text {
color: #000;
}
}
.line-label {
width: 20%;
text-align: center;
font-size: 14px;
color: #000;
}
.wd10 {
width: 6%;
}
.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;
}
.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;
.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;
}
.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;
}
.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>

Write Preview
Loading…
Cancel
Save