From a0d3789d2e70fa292a85b72a82b135e195a72353 Mon Sep 17 00:00:00 2001 From: jiang Date: Wed, 21 Jan 2026 18:59:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A3=85=E5=A4=87=E4=BA=8C?= =?UTF-8?q?=E7=BB=B4=E7=A0=81=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +- src/components/QrcodeGenerator/index.vue | 216 +++++++++ src/main.js | 3 +- src/views/EquipmentLedger/details.vue | 73 ++- src/views/EquipmentLedger/index.vue | 435 +++++++++++------- .../entryApply/components/AddEquip.vue | 172 ++++--- 6 files changed, 659 insertions(+), 245 deletions(-) create mode 100644 src/components/QrcodeGenerator/index.vue diff --git a/package.json b/package.json index 9fcb37fb..cacbbf1f 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ "jszip": "^3.10.1", "moment": "^2.30.1", "nprogress": "0.2.0", - "qrcodejs2": "0.0.2", + "qrcode": "^1.5.1", + "qrcodejs2": "^0.0.2", "quill": "1.3.7", "screenfull": "5.0.2", "sm-crypto": "^0.3.13", @@ -67,7 +68,7 @@ "vue": "2.6.12", "vue-count-to": "1.0.13", "vue-cropper": "0.5.5", - "vue-easy-print": "0.0.8", + "vue-easy-print": "^0.0.8", "vue-meta": "2.4.0", "vue-router": "3.4.9", "vuedraggable": "2.24.3", diff --git a/src/components/QrcodeGenerator/index.vue b/src/components/QrcodeGenerator/index.vue new file mode 100644 index 00000000..7ddc43d5 --- /dev/null +++ b/src/components/QrcodeGenerator/index.vue @@ -0,0 +1,216 @@ + + + + + diff --git a/src/main.js b/src/main.js index 003e899b..fbc0c248 100644 --- a/src/main.js +++ b/src/main.js @@ -47,7 +47,7 @@ import VueMeta from 'vue-meta' // 字典数据组件 import DictData from '@/components/DictData' import TitleTip from '@/components/TitleTip' - +import QrcodeGenerator from '@/components/QrcodeGenerator' import global_ from '@/utils/globalUrl' // 全局方法挂载 Vue.prototype.getDicts = getDicts @@ -71,6 +71,7 @@ Vue.component('FileUpload', FileUpload) Vue.component('ImageUpload', ImageUpload) Vue.component('ImagePreview', ImagePreview) Vue.component('TitleTip', TitleTip) +Vue.component('QrcodeGenerator', QrcodeGenerator) import { get } from '@/utils/config' // 引入get方法 Vue.use(directive) Vue.use(plugins) diff --git a/src/views/EquipmentLedger/details.vue b/src/views/EquipmentLedger/details.vue index 2a795e63..9b187839 100644 --- a/src/views/EquipmentLedger/details.vue +++ b/src/views/EquipmentLedger/details.vue @@ -7,7 +7,7 @@ class="el-icon-arrow-left goBack-btn" @click="goBack" style="border-color: transparent; color: #2CBAB2; background: transparent; padding-left: 0; padding-right: 0" - >返回返回 @@ -42,29 +42,29 @@ - + - + - + - + - + @@ -72,22 +72,22 @@ - + - + - + - + @@ -105,17 +105,17 @@ --> - + - + - + @@ -127,7 +127,7 @@ - + @@ -302,6 +302,17 @@ style="width: 120px; height: 120px; margin-right: 10px" /> + + +
+ +
+
@@ -316,13 +327,14 @@ export default { data() { return { isLoading: false, + dialogRow: '', form: { deviceTypeList: [], // 装备类型列表 appearanceImages: [], // 展示图 certificates: [], // 合格证 inspectionReports: [], // 检测证书 - purchaseInvoices: [], // 采购发票 - }, + purchaseInvoices: [] // 采购发票 + } } }, created() { @@ -333,6 +345,31 @@ export default { try { this.isLoading = true const res = await getDeviceApi(this.$route.query.id) + if (res.data) { + let row = res.data + const propertyList = row.propertyVoList || [] + const property = propertyList + // 过滤条件:item 存在 且 propertyValue 有值(避免空值干扰) + .filter(item => item && item.propertyValue) + // 拼接单个属性为 "名称:值" 格式 + .map(item => `${item.propertyName}:${item.propertyValue}`) + // 用分隔符连接(推荐用中文逗号/竖线,可自定义) + .join(',') + //3.装备小类,,6.生产厂家,7.出厂日期,8.特征属性 +// 单行写法(用\n) + this.dialogRow = + `装备名称:${row.name}\r\n` + + `装备编码:${row.code}\r\n` + + `规格型号:${row.specificationModel}\r\n` + + `产权单位:${row.propertyUnit}\r\n` + + `装备小类:${row.subCategory}\r\n` + + `生产厂家:${row.manufacturer}\r\n` + + `出厂日期:${row.productionDate}\r\n` + + `特征属性:{${property}}` + this.$nextTick(() => { + this.$refs.qr3?.refreshQrcode() + }) + } this.form = res.data this.form.process = this.form.mainProcess + '>' + this.form.subProcess this.form.category = @@ -350,8 +387,8 @@ export default { }, handleFile(item) { window.open(item.fileUrl, '_blank') - }, - }, + } + } } diff --git a/src/views/EquipmentLedger/index.vue b/src/views/EquipmentLedger/index.vue index 0b8eb250..9ac17ff1 100644 --- a/src/views/EquipmentLedger/index.vue +++ b/src/views/EquipmentLedger/index.vue @@ -79,7 +79,7 @@
{{ inStock }}
- 在库数量 + 在库数量
在库数量
@@ -88,7 +88,7 @@
{{ ownUse }}
- 自用数量 + 自用数量
自用数量
@@ -97,7 +97,7 @@
{{ share }}
- 共享数量 + 共享数量
共享数量
@@ -106,7 +106,7 @@
{{ underRepair }}
- 维修数量 + 维修数量
维修数量
@@ -115,7 +115,7 @@
{{ totalValue }}万
- 在库资产总价值 + 在库资产总价值
在库资产总价值
@@ -124,7 +124,7 @@
{{ retirementValue }}万
- 退役资产总价值 + 退役资产总价值
退役资产总价值
@@ -132,7 +132,7 @@ - +
@@ -167,7 +167,7 @@ placeholder="请选择产权单位" :options="propertyUnitList" :props="{ label: 'label', value: 'id', children: 'children', checkStrictly: true }" - style="width: 100%" + style="width: 100%" @change="handleUnitChange" />
- +
装备列表 @@ -378,17 +378,21 @@ v-loading="tableLoading" border stripe + fit + :auto-resize="true" height="546" + :cell-style="{ 'white-space': 'normal', 'line-height': '1.4' }" + :header-cell-style="{ 'line-height': '1.4' }" > - - + + @@ -407,7 +411,7 @@ 下架 - + @@ -478,42 +482,42 @@ - + - + - + - + - + - + - + - + @@ -537,57 +541,57 @@ - + - + - + - + - + - + - + - + - + - + - + @@ -610,42 +614,42 @@ - + - + - + - + - + - + - + - + @@ -680,17 +684,17 @@ - + - + - + @@ -706,22 +710,22 @@ - + - + - + - + @@ -737,7 +741,7 @@ - + @@ -762,9 +766,9 @@ - + - + @@ -826,8 +866,10 @@ import { delDevice, updateDeviceAPI, getDeviceDetailAPI, - getManufacturerSelectApi, + getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js' +import QrcodeGenerator from '@/components/QrcodeGenerator' + import { firstLevel, secondAndThirdLevel } from '@/api/EquipmentEntryApply' import { getMaxFeatureAPI, getProvinceListAPI } from '@/api/EquipmentLedger/equ-out.js' import { deptTreeSelect } from '@/api/system/user' @@ -835,7 +877,7 @@ import AddEquip from '@/views/stockManagement/entryApply/components/AddEquip' export default { name: 'EquipmentLedger', - components: { AddEquip }, + components: { AddEquip, QrcodeGenerator }, data() { return { treeSearchKey: '', //用于存储左侧树搜索框内容 @@ -864,14 +906,14 @@ export default { featureItem: undefined, // 特征项 featureValue: undefined, // 特征值 pageNum: 1, - pageSize: 10, + pageSize: 10 }, // 查询表单验证规则 queryRules: {}, // 树形结构配置 defaultProps: { children: 'children', - label: 'name', + label: 'name' }, treeData: [], defaultExpandedKeys: [], // 存储默认展开的节点 key @@ -883,53 +925,49 @@ export default { manufacturerList: [], // 生产厂家 columns2: [], columns: [ - // { key: 0, label: `所属省份`, prop: 'province', visible: true }, - { key: 1, label: `产权单位`, prop: 'propertyUnit', visible: true }, - { key: 2, label: `专业`, prop: 'major', visible: true }, - { key: 3, label: `工序`, prop: 'process', visible: true }, - { key: 4, label: `装备类目`, prop: 'devType', visible: true }, - { key: 5, label: `装备名称`, prop: 'name', visible: true }, - { key: 6, label: `规格型号`, prop: 'specificationModel', visible: true }, - { key: 7, label: `装备编码`, prop: 'code', visible: true }, - { key: 8, label: `装备状态`, prop: 'status', visible: true }, - // { key: 44, label: `上下架状态`, prop: 'upDownStatus', visible: true }, - { key: 9, label: `使用年限`, prop: 'serviceLife', visible: true }, - { key: 10, label: `使用项目`, prop: 'usingProject', visible: true }, - { key: 11, label: `使用到期时间`, prop: 'expirationTime', visible: true }, - { key: 12, label: `使用次数`, prop: 'usageCount', visible: true }, - { key: 13, label: `维修次数`, prop: 'repairCount', visible: true }, - { key: 14, label: `装备原始编码`, prop: 'originalCode', visible: true }, - // { key: 15, label: `计量单位`, prop: 'unit', visible: true }, - { key: 16, label: `生产厂家`, prop: 'manufacturer', visible: true }, - { key: 17, label: `出厂日期`, prop: 'productionDate', visible: true }, - { key: 18, label: `采购日期`, prop: 'purchaseDate', visible: true }, - { key: 19, label: `资产原值(万元)`, prop: 'originalValue', visible: true }, - { key: 19, label: `资产净值(万元)`, prop: 'value', visible: true }, - { key: 20, label: `最大使用年限(年)`, prop: 'maxServiceLifeYears', visible: true }, - { key: 21, label: `下次维保日期`, prop: 'nextMaintenanceDate', visible: true }, - { key: 22, label: `相关配套资料`, prop: 'fileImgList', visible: true }, - // { key: 22, label: `装备外观`, prop: 'appearanceImages', visible: true }, - // { key: 23, label: `合格证`, prop: 'certificates', visible: true }, - // { key: 24, label: `定期检验报告`, prop: 'inspectionReports', visible: true }, - // { key: 25, label: `采购发票`, prop: 'purchaseInvoices', visible: true }, - { key: 26, label: `特征项1`, prop: 'featureItem1', visible: true }, - { key: 27, label: `特征值1`, prop: 'featureValue1', visible: true }, - { key: 28, label: `特征项2`, prop: 'featureItem2', visible: true }, - { key: 29, label: `特征值2`, prop: 'featureValue2', visible: true }, - { key: 30, label: `特征项3`, prop: 'featureItem3', visible: true }, - { key: 31, label: `特征值3`, prop: 'featureValue3', visible: true }, - { key: 32, label: `特征项4`, prop: 'featureItem4', visible: true }, - { key: 33, label: `特征值4`, prop: 'featureValue4', visible: true }, - { key: 34, label: `特征项5`, prop: 'featureItem5', visible: true }, - { key: 35, label: `特征值5`, prop: 'featureValue5', visible: true }, - { key: 36, label: `特征项6`, prop: 'featureItem6', visible: true }, - { key: 37, label: `特征值6`, prop: 'featureValue6', visible: true }, - { key: 38, label: `特征项7`, prop: 'featureItem7', visible: true }, - { key: 39, label: `特征值7`, prop: 'featureValue7', visible: true }, - { key: 40, label: `特征项8`, prop: 'featureItem8', visible: true }, - { key: 41, label: `特征值8`, prop: 'featureValue8', visible: true }, - { key: 42, label: `特征项9`, prop: 'featureItem9', visible: true }, - { key: 43, label: `特征值9`, prop: 'featureValue9', visible: true }, + + { key: 1, label: `产权单位`, prop: 'propertyUnit', visible: true, width: 150 }, // 自动适配 + { key: 2, label: `专业`, prop: 'major', visible: true, width: 150 }, + { key: 3, label: `工序`, prop: 'process', visible: true, width: 180 }, + { key: 4, label: `装备类目`, prop: 'devType', visible: true, width: 180 }, + { key: 5, label: `装备名称`, prop: 'name', visible: true, fixed: 'left', width: 150 }, // 自定义宽度 + { key: 8, label: `装备状态`, prop: 'status', visible: true, fixed: 'left', width: 100 }, + { key: 6, label: `规格型号`, prop: 'specificationModel', visible: true, width: 150 }, + { key: 7, label: `装备编码`, prop: 'code', visible: true, width: 150 }, + { key: 9, label: `使用年限`, prop: 'serviceLife', visible: true, width: 100 }, + { key: 10, label: `使用项目`, prop: 'usingProject', visible: true, width: 180 }, + { key: 11, label: `使用到期时间`, prop: 'expirationTime', visible: true, width: 120 }, + { key: 12, label: `使用次数`, prop: 'usageCount', visible: true, width: 100 }, + { key: 13, label: `维修次数`, prop: 'repairCount', visible: true, width: 100 }, + { key: 14, label: `装备原始编码`, prop: 'originalCode', visible: true, width: 150 }, + { key: 16, label: `生产厂家`, prop: 'manufacturer', visible: true, width: 150 }, + { key: 17, label: `出厂日期`, prop: 'productionDate', visible: true, width: 120 }, + { key: 18, label: `采购日期`, prop: 'purchaseDate', visible: true, width: 120 }, + { key: 19, label: `资产原值(万元)`, prop: 'originalValue', visible: true, width: 120 }, + { key: 19, label: `资产净值(万元)`, prop: 'value', visible: true, width: 120 }, + { key: 20, label: `最大使用年限(年)`, prop: 'maxServiceLifeYears', visible: true, width: 120 }, + { key: 21, label: `下次维保日期`, prop: 'nextMaintenanceDate', visible: true, width: 120 }, + { key: 22, label: `相关配套资料`, prop: 'fileImgList', visible: true, width: 150 }, + // 特征项/值列:内容短,指定窄宽度 + { key: 26, label: `特征项1`, prop: 'featureItem1', visible: true, width: 100 }, + { key: 27, label: `特征值1`, prop: 'featureValue1', visible: true, width: 100 }, + { key: 28, label: `特征项2`, prop: 'featureItem2', visible: true, width: 100 }, + { key: 29, label: `特征值2`, prop: 'featureValue2', visible: true, width: 100 }, + // 其余特征项/值列同理,按需指定宽度 + { key: 30, label: `特征项3`, prop: 'featureItem3', visible: true, width: 100 }, + { key: 31, label: `特征值3`, prop: 'featureValue3', visible: true, width: 100 }, + { key: 32, label: `特征项4`, prop: 'featureItem4', visible: true, width: 100 }, + { key: 33, label: `特征值4`, prop: 'featureValue4', visible: true, width: 100 }, + { key: 34, label: `特征项5`, prop: 'featureItem5', visible: true, width: 100 }, + { key: 35, label: `特征值5`, prop: 'featureValue5', visible: true, width: 100 }, + { key: 36, label: `特征项6`, prop: 'featureItem6', visible: true, width: 100 }, + { key: 37, label: `特征值6`, prop: 'featureValue6', visible: true, width: 100 }, + { key: 38, label: `特征项7`, prop: 'featureItem7', visible: true, width: 100 }, + { key: 39, label: `特征值7`, prop: 'featureValue7', visible: true, width: 100 }, + { key: 40, label: `特征项8`, prop: 'featureItem8', visible: true, width: 100 }, + { key: 41, label: `特征值8`, prop: 'featureValue8', visible: true, width: 100 }, + { key: 42, label: `特征项9`, prop: 'featureItem9', visible: true, width: 100 }, + { key: 43, label: `特征值9`, prop: 'featureValue9', visible: true, width: 100 } ], tableData: [], tableColumns: 0, @@ -975,18 +1013,20 @@ export default { personPhone: '', nextCheckTime: '', brand: '', - propertyVoList: [], + propertyVoList: [] }, // 表单验证规则 formRules: { name: [{ required: true, message: '请输入装备名称', trigger: 'blur' }], code: [{ required: true, message: '请输入装备编号', trigger: 'blur' }], - changeStatus: [{ required: true, message: '请选择装备状态', trigger: 'change' }], + changeStatus: [{ required: true, message: '请选择装备状态', trigger: 'change' }] }, maxFeatureCount: 5, // 最大特征项数量限制 dialogVisible: false, + dialogCodeVisible: false, dialogTitle: '', dialogList: [], + dialogRow: {}, currentRow: {}, openReport: false, fileDataList: [ @@ -994,7 +1034,8 @@ export default { { dictLabel: '合格证', type: '2' }, { dictLabel: '检测证书', type: '3' }, { dictLabel: '采购发票', type: '4' }, - ], + { dictLabel: '装备二维码', type: '5' } + ] } }, computed: { @@ -1047,6 +1088,23 @@ export default { this.propertyUnitList = this.filterTree(res.data) console.log('🚀 ~ this.propertyUnitList:', this.propertyUnitList) }, + // 弹框完全打开后触发二维码生成 + handleDialogOpened() { + // 确保 DOM 渲染完成,使用 $nextTick + this.$nextTick(() => { + this.$refs.qr3?.refreshQrcode() + }) + }, + // 调用子组件下载方法 + downloadQrcode() { + // 自定义下载文件名(用装备编码/名称) + const fileName = `装备二维码_${new Date().getTime()}.png` + this.$refs.qr3?.downloadQrcode(fileName) + }, + // 调用子组件打印方法 + printQrcode() { + this.$refs.qr3?.printQrcode() + }, filterTree(nodes) { return nodes .map((node) => { @@ -1093,7 +1151,7 @@ export default { list.forEach((item) => { map[item.value] = { value: item.value.toString(), - label: item.label, + label: item.label } }) @@ -1506,7 +1564,7 @@ export default { personPhone: '', nextCheckTime: '', brand: '', - propertyVoList: [], + propertyVoList: [] } }, @@ -1526,7 +1584,7 @@ export default { this.formData.propertyVoList.push({ propertyName: '', - propertyValue: '', + propertyValue: '' }) }, @@ -1539,7 +1597,7 @@ export default { cancelButtonText: '取消', type: 'warning', center: true, - showCancelButton: this.formData.propertyVoList.length > 1, // 至少保留一个特征项 + showCancelButton: this.formData.propertyVoList.length > 1 // 至少保留一个特征项 }) .then(() => { this.formData.propertyVoList.splice(index, 1) @@ -1553,7 +1611,7 @@ export default { * 提交编辑表单 */ async submitEditForm() { - this.$refs.editForm.validate(async (valid) => { + this.$refs.editForm.validate(async(valid) => { if (valid) { try { const res = await updateDeviceAPI(this.formData) @@ -1579,8 +1637,8 @@ export default { this.$confirm('确定要删除该装备吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', - type: 'warning', - }).then(async () => { + type: 'warning' + }).then(async() => { try { const res = await delDevice(row.maId) if (res.code === 200) { @@ -1605,7 +1663,7 @@ export default { try { const res = await updateDeviceUpDownAPI({ devIds: this.selectedRows.map((item) => item.maId).join(','), - status: 1, + status: 1 }) this.selectedRows = [] @@ -1633,7 +1691,7 @@ export default { try { const res = await updateDeviceUpDownAPI({ devIds: this.selectedRows.map((item) => item.maId).join(','), - status: 0, + status: 0 }) this.selectedRows = [] @@ -1669,10 +1727,8 @@ export default { this.underRepair = underRepair || 0 this.totalValue = totalValue || 0 - this.retirementValue = retirementValue || 0 - - - + this.retirementValue = retirementValue || 0 + } catch (error) { this.$message.error('获取状态统计失败:' + (error.message || '未知错误')) console.error(error) @@ -1690,22 +1746,48 @@ export default { return type === 'Item' ? list[index].propertyName : list[index].propertyValue }, + // 查看 handleView(row, type) { if (type == 1) { this.dialogTitle = '装备外观' this.dialogList = row.appearanceImages || [] + this.dialogVisible = true } else if (type == 2) { this.dialogTitle = '合格证' this.dialogList = row.certificates || [] + this.dialogVisible = true } else if (type == 3) { this.dialogTitle = '定期检验报告' this.dialogList = row.inspectionReports || [] + this.dialogVisible = true } else if (type == 4) { this.dialogTitle = '采购发票' this.dialogList = row.purchaseInvoices || [] + this.dialogVisible = true + } else if (type == 5) { + this.dialogTitle = '装备二维码' + const propertyList = row.propertyVoList || [] + const property = propertyList + // 过滤条件:item 存在 且 propertyValue 有值(避免空值干扰) + .filter(item => item && item.propertyValue) + // 拼接单个属性为 "名称:值" 格式 + .map(item => `${item.propertyName}:${item.propertyValue}`) + // 用分隔符连接(推荐用中文逗号/竖线,可自定义) + .join(',') + //3.装备小类,,6.生产厂家,7.出厂日期,8.特征属性 + this.dialogRow = + `装备名称:${row.name}\r\n` + + `装备编码:${row.code}\r\n` + + `规格型号:${row.specificationModel}\r\n` + + `产权单位:${row.propertyUnit}\r\n` + + `装备小类:${row.subCategory}\r\n` + + `生产厂家:${row.manufacturer}\r\n` + + `出厂日期:${row.productionDate}\r\n` + + `特征属性:{${property}}` + this.dialogCodeVisible = true } - this.dialogVisible = true + }, handleFile(row) { // 打开文件预览 @@ -1714,11 +1796,12 @@ export default { handleFileListUpload(row) { this.currentRow = row this.openReport = true - }, + } }, async created() { - await this.getDeptTreeSelect().catch(() => {}) + await this.getDeptTreeSelect().catch(() => { + }) const params = this.$route.query this.queryParams.propertyUnitId = params?.deptId || '' const ids = [] @@ -1737,7 +1820,7 @@ export default { // 最后加载列表数据 await this.getDeviceList() this.initDefaultExpandedKeys() - }, + } } @@ -2097,22 +2180,22 @@ export default { width: 1.5% !important; } -.el-button--primary{ +.el-button--primary { background-color: #2CBAB2; border-color: #2CBAB2; } .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { - background-color: #2CBAB2; - border-color: #2CBAB2; + background-color: #2CBAB2; + border-color: #2CBAB2; } -.el-tag{ +.el-tag { padding: 13px 7px; line-height: 0; } -.el-button--text{ +.el-button--text { color: #2CBAB2; } @@ -2126,23 +2209,59 @@ export default { } ::v-deep.el-tag.el-tag--info { - background-color: #F5F5F5; - border-color: #B3B3B3; - color: #B3B3B3; + background-color: #F5F5F5; + border-color: #B3B3B3; + color: #B3B3B3; } -::v-deep.el-tag.el-tag--warn{ - background-color: rgba(255,171,41,0.1);; - border: #FFAB29; - color: #FFAB29; + +::v-deep.el-tag.el-tag--warn { + background-color: rgba(255, 171, 41, 0.1);; + border: #FFAB29; + color: #FFAB29; } + ::v-deep.el-tag.el-tag--success { - background-color: rgba(52,226,199,0.1); - border-color: #34E2C7; - color: #34E2C7; + background-color: rgba(52, 226, 199, 0.1); + border-color: #34E2C7; + color: #34E2C7; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { - background-color: rgba(52,226,199,0.1); + background-color: rgba(52, 226, 199, 0.1); +} + +/* 二维码容器水平居中 */ +.qrcode-box { + text-align: center; /* 核心:让inline-block的二维码居中 */ + padding: 10px 0; +} + +/* 底部按钮布局优化 */ +.dialog-footer { + display: flex; + justify-content: center; /* 按钮水平居中 */ + gap: 10px; /* 按钮间距 */ +} + + + +.cell-content-two-lines { + +} + +.el-table .cell { + white-space: normal !important; + overflow: visible !important; + text-overflow: unset !important; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; /* 强制最多显示2行 */ + overflow: hidden; /* 超出部分隐藏 */ + text-overflow: ellipsis; /* 两行后末尾加省略号 */ + word-break: break-all; /* 英文/数字换行 */ + word-wrap: break-word; /* 中文换行 */ + height: 36px; /* 两行文本的高度(line-height:1.4 → 18px*2=36px,可按需调整) */ + margin: 2px 0; /* 上下边距,避免内容贴边 */ } diff --git a/src/views/stockManagement/entryApply/components/AddEquip.vue b/src/views/stockManagement/entryApply/components/AddEquip.vue index a9c446a2..2ac74340 100644 --- a/src/views/stockManagement/entryApply/components/AddEquip.vue +++ b/src/views/stockManagement/entryApply/components/AddEquip.vue @@ -11,24 +11,24 @@
- +
@@ -181,7 +181,7 @@ - + @@ -254,7 +254,7 @@ - + @@ -364,6 +364,17 @@ @input="handlePurchaseInvoicesChange" /> + + +
+ +
+
@@ -371,10 +382,10 @@ + + @@ -383,12 +394,12 @@ - + - + @@ -396,12 +407,12 @@ - + - + @@ -409,12 +420,12 @@ - + - + @@ -422,8 +433,8 @@ - - + + @@ -460,7 +471,7 @@ import { fourthToSixthLevel, getDeviceApi, equipmentEditApiNew, - getEquipmentPropertyTypeApi, + getEquipmentPropertyTypeApi } from '@/api/EquipmentEntryApply' import { getManufacturerSelectApi } from '@/api/EquipmentLedger/index.js' import ImageUpload from '@/components/ImageUpload' @@ -485,6 +496,7 @@ export default { maId: null, // 下拉列表数据 majorList: [], + dialogRow: '', processList: [], categoryList: [], manufacturerList: [], @@ -494,9 +506,9 @@ export default { supplierName: [{ required: true, message: '厂家名称不能为空', trigger: 'blur' }], contactPhone: [ { required: false, message: '请输入联系电话', trigger: 'blur' }, - { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }, + { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' } ], - status: [{ required: true, message: '请选择状态', trigger: 'change' }], + status: [{ required: true, message: '请选择状态', trigger: 'change' }] }, form: { major: '', // 专业 @@ -523,7 +535,7 @@ export default { inspectionList: '', // 检测证书 purchaseInvoices: '', // 采购发票 propertyUnitIds: [], // 产权单位 - propertyUnitId: null, // 产权单位 + propertyUnitId: null // 产权单位 }, propertyUnitList: [], // 产权单位列表 // 表单校验规则(所有字段均为必填) @@ -541,13 +553,13 @@ export default { maxServiceLifeYears: [{ required: true, message: '请输入装备寿命', trigger: 'blur' }], // manageType: [{ required: true, message: '请选择管理方式', trigger: 'change' }], count: [{ required: true, message: '请输入装备数量', trigger: 'blur' }], - unit: [{ required: true, message: '请输入计数单位', trigger: 'blur' }], + unit: [{ required: true, message: '请输入计数单位', trigger: 'blur' }] // purchaseDate: [{ required: true, message: '请选择采购日期', trigger: 'change' }], // certificateList: [{ required: true, message: '请上传合格证', trigger: 'change' }], // inspectionList: [{ required: true, message: '请上传检测证书', trigger: 'change' }], // mainFileList: [{ required: true, message: '请上传图片', trigger: 'change' }], }, - propertyVoList: [], // 特征属性集合 + propertyVoList: [] // 特征属性集合 } }, created() { @@ -584,6 +596,31 @@ export default { const res = await getDeviceApi(this.maId) console.log('🚀 ~ getInfo ~ res:', res) Object.assign(this.form, res.data) + if (res.data) { + let row = res.data + const propertyList = row.propertyVoList || [] + const property = propertyList + // 过滤条件:item 存在 且 propertyValue 有值(避免空值干扰) + .filter(item => item && item.propertyValue) + // 拼接单个属性为 "名称:值" 格式 + .map(item => `${item.propertyName}:${item.propertyValue}`) + // 用分隔符连接(推荐用中文逗号/竖线,可自定义) + .join(',') + //3.装备小类,,6.生产厂家,7.出厂日期,8.特征属性 + this.dialogRow = + `装备名称:${row.name}\r\n` + + `装备编码:${row.code}\r\n` + + `规格型号:${row.specificationModel}\r\n` + + `产权单位:${row.propertyUnit}\r\n` + + `装备小类:${row.subCategory}\r\n` + + `生产厂家:${row.manufacturer}\r\n` + + `出厂日期:${row.productionDate}\r\n` + + `特征属性:{${property}}` + + this.$nextTick(() => { + this.$refs.qr3?.refreshQrcode() + }) + } this.form.mainFileList = res.data.appearanceImages ? res.data.appearanceImages.map((item) => item.fileUrl).join(',') : '' @@ -611,7 +648,7 @@ export default { this.form.category = [ String(res.data.mainCategoryId), String(res.data.subCategoryId), - String(res.data.branchId), + String(res.data.branchId) ].filter(Boolean) } else { this.form.category = [String(res.data.mainCategoryId), String(res.data.subCategoryId)].filter(Boolean) @@ -624,7 +661,7 @@ export default { if (item.propertyValue === '' || item.propertyValue === null || item.propertyValue === undefined) { item.propertyValue = null } - if (item.inputType == 3) { + if (item.inputType == 3 && item.propertyValue) { item.propertyValue = item.propertyValue.split(',') } }) @@ -716,8 +753,8 @@ export default { query: { orderId: this.orderId, isAddVisible: false, - isApprovalVisible: false, - }, + isApprovalVisible: false + } }) }, close() { @@ -727,8 +764,8 @@ export default { query: { orderId: this.orderId, isAddVisible: false, - isApprovalVisible: false, - }, + isApprovalVisible: false + } }) }) }, @@ -770,7 +807,7 @@ export default { */ async handleSubmit() { console.log('🚀 ~ handleSubmit ~ this.form:', this.form, this.propertyVoList) - this.$refs['formRef'].validate(async (valid) => { + this.$refs['formRef'].validate(async(valid) => { if (valid) { if (this.isSubmit) return this.isSubmit = true @@ -797,7 +834,7 @@ export default { const parts = item.split('/') return { fileName: parts[parts.length - 1], - fileUrl: item, + fileUrl: item } }) console.log('🚀 ~ handleSubmit ~ appearanceImages:', appearanceImages) @@ -808,7 +845,7 @@ export default { const parts = item.split('/') return { fileName: parts[parts.length - 1], - fileUrl: item, + fileUrl: item } }) console.log('🚀 ~ handleSubmit ~ certificates:', certificates) @@ -823,7 +860,7 @@ export default { const parts = item.split('/') return { fileName: parts[parts.length - 1], - fileUrl: item, + fileUrl: item } }) console.log('🚀 ~ handleSubmit ~ inspectionReports:', inspectionReports) @@ -838,7 +875,7 @@ export default { const parts = item.split('/') return { fileName: parts[parts.length - 1], - fileUrl: item, + fileUrl: item } }) console.log('🚀 ~ handleSubmit ~ purchaseInvoices:', purchaseInvoices) @@ -846,7 +883,7 @@ export default { // 判断特征项是否填写 propertyVoList 每个propertyValue 都要有值 if (this.propertyVoList && this.propertyVoList.length > 0) { const unfilledIndex = this.propertyVoList.findIndex( - (item) => (!item.propertyValue || item.propertyValue === '') && item.mustHave != '0', + (item) => (!item.propertyValue || item.propertyValue === '') && item.mustHave != '0' ) if (unfilledIndex !== -1) { this.$message.warning(`第 ${unfilledIndex + 1} 个特征项为必填项,请填写完整`) @@ -867,7 +904,7 @@ export default { certificates, inspectionReports, purchaseInvoices, - propertyVoList: this.propertyVoList, + propertyVoList: this.propertyVoList } if (this.maId) { params.maId = this.maId @@ -900,7 +937,7 @@ export default { list.forEach((item) => { map[item.value] = { value: item.value.toString(), - label: item.label, + label: item.label } }) @@ -938,7 +975,7 @@ export default { return data.split(',').map((item) => { return { label: item, - value: item, + value: item } }) }, @@ -946,7 +983,7 @@ export default { this.showHouse = true }, submitForm() { - this.$refs['supFrom'].validate(async (valid) => { + this.$refs['supFrom'].validate(async(valid) => { if (valid) { addFacturer(this.supFrom).then((response) => { this.$modal.msgSuccess('新增成功') @@ -955,8 +992,8 @@ export default { }) } }) - }, - }, + } + } } @@ -1001,6 +1038,7 @@ export default { ::v-deep .el-input-number.is-without-controls .el-input__inner { text-align: left; } + .select-box { width: 100%; height: 260px; @@ -1032,18 +1070,20 @@ export default { } ::v-deep.el-tag.el-tag--info { - background-color: #F5F5F5; - border-color: #B3B3B3; - color: #B3B3B3; + background-color: #F5F5F5; + border-color: #B3B3B3; + color: #B3B3B3; } -::v-deep.el-tag.el-tag--warn{ - background-color: rgba(255,171,41,0.1);; - border: #FFAB29; - color: #FFAB29; + +::v-deep.el-tag.el-tag--warn { + background-color: rgba(255, 171, 41, 0.1);; + border: #FFAB29; + color: #FFAB29; } + ::v-deep.el-tag.el-tag--success { - background-color: rgba(52,226,199,0.1); - border-color: #34E2C7; - color: #34E2C7; + background-color: rgba(52, 226, 199, 0.1); + border-color: #34E2C7; + color: #34E2C7; }