diff --git a/src/api/customerIssue/customer-issue.js b/src/api/customerIssue/customer-issue.js index 1ea4aa8..311dba1 100644 --- a/src/api/customerIssue/customer-issue.js +++ b/src/api/customerIssue/customer-issue.js @@ -22,3 +22,10 @@ export const queryLabelInfo = data => createAPI(`/pda/customerIssue/queryHu`,'po export const createNewHu = data => createAPI(`/pda/customerIssue/createNewHu`,'post',data) +// 修改发料明细信息 +export const updateShipmentHuDetail = data => createAPI(`/pda/shipmentHuDetail/updateShipmentHuDetail`,'post',data) +// 获取发料明细信息 +export const getShipmentHuDetail = data => createAPI(`/pda/shipmentHuDetail/getShipmentHuDetail`,'post',data) +// 删除发料明细信息 +export const removeShipmentHuDetail = data => createAPI(`/pda/shipmentHuDetail/removeShipmentHuDetail`,'post',data) + diff --git a/src/views/modules/customerIssue/customerIssue.vue b/src/views/modules/customerIssue/customerIssue.vue index f6b0597..15c6aaf 100644 --- a/src/views/modules/customerIssue/customerIssue.vue +++ b/src/views/modules/customerIssue/customerIssue.vue @@ -36,7 +36,7 @@ export default { { icon: 'logistics', label: '移库发料', iconClass: 'move', to: 'customerIssuePicking', disabled: true }, { icon: 'revoke', label: '发料撤销', iconClass: 'cancel', to: 'customerIssuePicking', disabled: true }, */ { icon: 'revoke', label: '销售临时', iconClass: 'cancel', to: 'salesTemporary', disabled: false }, - { icon: 'records', label: '客户发料', iconClass: 'request', to: 'customerIssuePDA', disabled: true }, + { icon: 'records', label: '客户发料', iconClass: 'request', to: 'customerIssuePDA', disabled: false }, ] } }, diff --git a/src/views/modules/customerIssue/customerIssuePDA.vue b/src/views/modules/customerIssue/customerIssuePDA.vue index c3f0b63..58f444a 100644 --- a/src/views/modules/customerIssue/customerIssuePDA.vue +++ b/src/views/modules/customerIssue/customerIssuePDA.vue @@ -18,7 +18,7 @@
+ class="work-order-card" @click="openIssueDetail(material)">
shipmentId：{{ material.SHIPMENT_ID }}
@@ -248,11 +248,9 @@ export default { this.$router.push({ name: 'customerIssuePDAIssueList', query: { - itemNo: material.SHIPMENT_LINE_NO, // 申请单行号 - workOrderNo: this.selectedRequestMaterial.SHIPMENT_ID, // 客户订单号 - partNo: material.INVENTORY_PART_NO, // 物料编码 - issureQty: material.INVENTORY_QTY, // 需求数量 - assignedQty: material.QTY_ASSIGNED, // 已发数量 + state: material.STATE, // 申请单行号 + shipmentId: material.SHIPMENT_ID, // 客户订单号 + orderType: material.SHIPMENT_TYPE, // 订单类型 } }) }, diff --git a/src/views/modules/customerIssue/customerIssuePDAIssueList.vue b/src/views/modules/customerIssue/customerIssuePDAIssueList.vue index df985e7..d3a1c0d 100644 --- a/src/views/modules/customerIssue/customerIssuePDAIssueList.vue +++ b/src/views/modules/customerIssue/customerIssuePDAIssueList.vue @@ -21,85 +21,211 @@
- -
-
-
- 申请单号：{{ orderInfo.orderNo }}     行号：{{ itemNo }} + +
+ +
+
+
+ 申请单号：{{ orderInfo.orderNo }}      + 本次: {{ totalScannedQty }} +
+
- -
- 物料号：{{ orderInfo.partNo }} -
-
- {{ orderInfo.description }} + +
+
+ + 发料信息确认
+
-
-
-
已发数量
-
{{ assignedQty }}
-
-
-
发料数量
-
{{ qtyIssued }}
+ +
+
+
+
-
-
本次
-
{{ totalScannedQty }}
+
+
+ 标签号： + {{ label.unitId }} +
+
+ 物料号： + {{ label.partNo || '-' }} +
+
+ 批次号： + {{ label.batchNo || '-' }} +
+
+ 库位： + {{ label.locationId || '-' }} +
+
+ 发料数量： + {{ label.qtyToIssue || 0 }} +
-
-
- -
-
- - 发料信息确认 -
-
- - -
-
-
NO.
-
物料标签
-
库位
-
发料数量
-
- -
-
{{ index+1 }}
-
{{ label.labelCode }}
-
{{ label.locationId }}
-
- {{ label.quantity }} - + +
+

暂无扫描标签

- - -
-

暂无扫描标签

-
- + 确定发料 -
+ +
+
+
+ 发料物料比对 + +
+
+
+ 正在获取申请单物料，请稍候... +
+ +
+
+ + 返回修改 + + + {{ loading ? '发料中...' : '确定发料' }} + +
+
+
+
@@ -108,26 +234,36 @@
-
+
+
+ + +
+
- +
- +
+ +
+ + +
@@ -168,7 +304,13 @@
{{ index + 1 }}
{{ label.labelCode }}
{{ label.locationId }}
-
{{ label.quantity }}
+
+ {{ + Number( + label.qtyToIssue + ) || 0 + }} +
@@ -239,6 +381,10 @@ import { getInventoryPart, scanCustomerIssueMaterialLabel, customerIssueConfirm, + updateShipmentHuDetail, + getShipmentHuDetail, + removeShipmentHuDetail, + getCustomerIssueNotifyHeaderOrderMaterialList, } from '@/api/customerIssue/customer-issue' import moment from 'moment' @@ -260,10 +406,16 @@ export default { // 编辑弹框相关 showEditDialog: false, editForm: { + detailId: '', labelCode: '', + partNo: '', batchNo: '', locationId: '', + warehouseId: '', + wdrNo: '', + engChgLevel: '', quantity: 0, + height: null, }, editIndex: -1, // 当前编辑的标签索引 unissureQty: 0, // 需求数量 @@ -280,12 +432,21 @@ export default { qcQuantity: 1, boxQuantity: 1, currentPrintType: '', // 当前选择的打印类型 + // 发料前对比弹框 + showSummaryDialog: false, + summaryLoading: false, + comparisonData: { + existing: [], + missing: [], + extra: [], + }, + pendingIssueParams: null, } }, computed: { totalScannedQty() { return this.labelList.reduce( - (sum, l) => sum + (Number(l.quantity) || 0), + (sum, l) => sum + (Number(l.qtyToIssue) || 0), 0 ) }, @@ -294,6 +455,50 @@ export default { formatDate(date) { return date ? moment(date).format('YYYY-MM-DD') : '' }, + formatQty(value) { + const num = Number(value) + if (!Number.isFinite(num)) { + return 0 + } + return Number.isInteger(num) ? num : Number(num.toFixed(3)) + }, + pickFieldValue(item, candidates = [], defaultValue = null) { + if (!item || !candidates || candidates.length === 0) { + return defaultValue + } + for (const field of candidates) { + if ( + Object.prototype.hasOwnProperty.call(item, field) && + item[field] !== undefined && + item[field] !== null && + item[field] !== '' + ) { + return item[field] + } + } + return defaultValue + }, + aggregateMaterials(list = [], keyFields = [], qtyFields = []) { + const map = {} + list.forEach((item) => { + const partKey = this.pickFieldValue(item, keyFields) + const normalizedKey = + typeof partKey === 'string' ? partKey.trim() : partKey + if (!normalizedKey) { + return + } + const qtyValue = + Number(this.pickFieldValue(item, qtyFields, 0)) || 0 + if (!map[normalizedKey]) { + map[normalizedKey] = { + partNo: normalizedKey, + qty: 0, + } + } + map[normalizedKey].qty += qtyValue + }) + return map + }, // 处理扫描 handleScan() { if (!this.scanCode.trim()) { @@ -312,37 +517,42 @@ export default { validateAndAddLabel(labelCode) { const params = { scannedLabel: labelCode, - orderNo: this.orderNo, + workOrderNo: this.orderNo, site: localStorage.getItem('site'), batchNo: this.batchNo, - componentPartNo: this.partNo, } - - // 模拟客户发料标签验证 + // 检查是否已经扫描过 + const exists = this.labelList.find( + (item) => item.unitId === labelCode + ) + if (exists) { + this.$message.warning('该标签已扫描，请勿重复扫描') + return + } + // 客户发料标签验证 scanCustomerIssueMaterialLabel(params) .then(({ data }) => { if (data.code === 0 && data) { - // 检查是否已经扫描过 - const exists = this.labelList.find( - (item) => item.labelCode === labelCode - ) - if (exists) { - this.$message.warning('该标签已扫描，请勿重复扫描') - return - } - - // 添加到列表 + // 添加到列表，保存更多字段信息 + // 后端返回的是 ShipmentHuDetail 对象 + const labelInfo = data.labelInfo this.labelList.push({ id: Date.now(), labelCode: labelCode, - partNo: data.labelInfo.partNo, - quantity: data.labelInfo.availableQty, - batchNo: data.labelInfo.batchNo, - issueReason: data.labelInfo.issueReason, - locationId: data.labelInfo.locationId, - warehouseId: data.labelInfo.warehouseId, - wdrNo: data.labelInfo.wdrNo, - engChgLevel: data.labelInfo.engChgLevel || '1', + partNo: labelInfo.partNo || '', + qtyToIssue: + Number( + labelInfo.qtyToIssue + ) || 0, + batchNo: labelInfo.batchNo || '', + locationId: labelInfo.locationId || '', + warehouseId: labelInfo.warehouseId || '', + wdrNo: labelInfo.wdr || '', + engChgLevel: labelInfo.engChgLevel || '1', + detailId: labelInfo.detailId || '', + unitId: labelInfo.unitId || '', + site: labelInfo.site || localStorage.getItem('site'), + height: labelInfo.height || null, }) this.$message.success('操作成功') @@ -357,24 +567,52 @@ export default { // 通过条码移除标签 removeLabelByCode(labelCode) { - const index = this.labelList.findIndex( - (item) => item.labelCode === labelCode + const exists = this.labelList.find( + (item) => item.unitId === labelCode ) - if (index !== -1) { - this.labelList.splice(index, 1) - this.$message.success('操作成功') - } else { + if (!exists) { this.$message.warning('未找到该标签') + return + } + let params = { + site: localStorage.getItem('site'), + unitId: labelCode, + detailId: exists.detailId, } + removeShipmentHuDetail(params) + .then(({ data }) => { + if (data.code === 0) { + const index = this.labelList.findIndex( + (item) => item.unitId === labelCode + ) + if (index !== -1) { + this.labelList.splice(index, 1) + this.$message.success('操作成功') + } else { + this.$message.warning('未找到该标签') + } + } else { + this.$message.error(data.msg || '移除标签失败') + } + }) + .catch(() => { + this.$message.error('移除标签失败') + }) }, // 打开编辑弹框 openEditDialog(label, index) { this.editForm = { - labelCode: label.labelCode, - batchNo: label.batchNo, + detailId: label.detailId, + labelCode: label.unitId, + partNo: label.partNo, + batchNo: label.batchNo || '', locationId: label.locationId || '', - quantity: label.quantity, + warehouseId: label.warehouseId || '', + wdrNo: label.wdrNo || '', + engChgLevel: label.engChgLevel || '1', + quantity: label.qtyToIssue, + height: label.height, } this.editIndex = index this.showEditDialog = true @@ -384,10 +622,16 @@ export default { closeEditDialog() { this.showEditDialog = false this.editForm = { + detailId: '', labelCode: '', + partNo: '', batchNo: '', locationId: '', + warehouseId: '', + wdrNo: '', + engChgLevel: '', quantity: 0, + height: null, } this.editIndex = -1 }, @@ -405,18 +649,51 @@ export default { return } - // 更新标签信息 - if (this.editIndex >= 0 && this.editIndex < this.labelList.length) { - this.labelList[this.editIndex].locationId = this.editForm.locationId - this.labelList[this.editIndex].quantity = Number(this.editForm.quantity) - this.$message.success('修改成功') + // 调用后端接口更新 + const updateParams = { + detailId: this.editForm.detailId, + site: + this.labelList[this.editIndex].site || localStorage.getItem('site'), + unitId: this.labelList[this.editIndex].unitId, + locationId: this.editForm.locationId, + qtyToIssue: Number(this.editForm.quantity), + batchNo: this.editForm.batchNo, + warehouseId: this.editForm.warehouseId, + engChgLevel: this.editForm.engChgLevel, + wdr: this.editForm.wdrNo, + height: this.editForm.height, } - this.closeEditDialog() + updateShipmentHuDetail(updateParams) + .then(({ data }) => { + if (data.code === 0) { + // 更新本地列表 + if (this.editIndex >= 0 && this.editIndex < this.labelList.length) { + this.labelList[this.editIndex].locationId = + this.editForm.locationId + this.labelList[this.editIndex].qtyToIssue = Number( + this.editForm.quantity + ) + this.labelList[this.editIndex].batchNo = this.editForm.batchNo + this.labelList[this.editIndex].warehouseId = + this.editForm.warehouseId + this.labelList[this.editIndex].wdrNo = this.editForm.wdrNo + this.labelList[this.editIndex].engChgLevel = + this.editForm.engChgLevel + this.labelList[this.editIndex].height = this.editForm.height + } + this.$message.success('修改成功') + this.closeEditDialog() + } else { + this.$message.error(data.msg || '修改失败') + } + }) + .catch(() => { + this.$message.error('修改失败') + }) }, - // 确认客户发料 - confirmIssue() { + async confirmIssue() { if (this.labelList.length === 0) { this.$message.warning('请先扫描发料标签') return @@ -427,7 +704,22 @@ export default { return } - const issueParams = { + this.pendingIssueParams = this.buildIssueParams() + this.summaryLoading = true + try { + await this.prepareComparisonData() + this.showSummaryDialog = true + } catch (error) { + this.$message.error( + (error && error.message) || '获取申请单物料失败，请稍后重试' + ) + this.pendingIssueParams = null + } finally { + this.summaryLoading = false + } + }, + buildIssueParams() { + return { site: localStorage.getItem('site'), workOrderNo: this.orderNo, batchNo: this.batchNo, @@ -437,10 +729,11 @@ export default { itemNo: this.itemNo, ifsIssuedQty: this.qtyIssued, issueQty: this.quantity, - // 发料标签列表 selectedMaterials: this.labelList.map((label) => ({ - labelCode: label.labelCode, - issueQty: label.quantity, + labelCode: label.labelCode || label.unitId, + issueQty: + Number(label.qtyToIssue) || + 0, batchNo: label.batchNo, partNo: label.partNo, locationId: label.locationId, @@ -449,29 +742,120 @@ export default { engChgLevel: label.engChgLevel || '1', })), } + }, + async prepareComparisonData() { + const params = { + site: localStorage.getItem('site'), + workOrderNo: this.orderNo, + } + await getCustomerIssueNotifyHeaderOrderMaterialList( + params + ).then(({ data }) => { + if (!data || data.code !== 0) { + throw new Error((data && data.msg) || '获取申请单物料失败') + } + const materials = data.data || [] + const labelMap = this.aggregateMaterials( + this.labelList, + ['partNo'], + ['qtyToIssue', 'quantity', 'issueQty'] + ) + const orderMap = this.aggregateMaterials( + materials, + ['INVENTORY_PART_NO'], + [ + 'INVENTORY_QTY', + 'QTY_ASSIGNED', + 'QTY_PICKED', + 'QTY_SHIPPED' + ] + ) + + const existing = [] + const missing = [] + Object.keys(orderMap).forEach((partNo) => { + console.log('Comparing partNo:', orderMap[partNo]); + + const requiredQty = orderMap[partNo].qty + if (labelMap[partNo]) { + const scannedQty = labelMap[partNo].qty + existing.push({ + partNo, + requiredQty, + scannedQty, + difference: scannedQty - requiredQty, + }) + } else { + missing.push({ + partNo, + requiredQty, + }) + } + }) + + const extra = [] + Object.keys(labelMap).forEach((partNo) => { + if (!orderMap[partNo]) { + extra.push({ + partNo, + scannedQty: labelMap[partNo].qty, + }) + } + }) + + this.comparisonData = { + existing, + missing, + extra, + } + }) + + }, + closeSummaryDialog() { + if (this.loading) { + return + } + this.showSummaryDialog = false + this.pendingIssueParams = null + }, + proceedIssueConfirm() { + if (!this.pendingIssueParams) { + this.pendingIssueParams = this.buildIssueParams() + } + this.submitIssue() + }, + submitIssue() { + if (!this.pendingIssueParams) { + this.$message.error('缺少发料参数，请重新确认') + return + } + if(this.comparisonData.missing.length > 0){ + this.$message.warning('存在未扫描物料，无法发料，请返回修改') + return + } + if(this.comparisonData.extra.length > 0){ + this.$message.warning('存在多余物料，无法发料，请返回修改') + return + } + for (const item of this.comparisonData.existing) { + if (item.difference != 0) { + this.$message.warning('存在发料数量超出或少于需求数量的物料，请返回修改') + return + } + } + let params = this.pendingIssueParams + params.shipmentType = this.orderType + this.loading = true - // 客户发料确认API - customerIssueConfirm(issueParams) + customerIssueConfirm(this.pendingIssueParams) .then(({ data }) => { if (data.code === 0 && data) { this.$message.success('客户发料成功') - // 跳转到打印选择页面，携带扫描列表 - try { - const payload = this.labelList.map((label) => ({ - labelCode: label.labelCode, - issueQty: label.quantity, - batchNo: label.batchNo, - partNo: label.partNo, - locationId: label.locationId, - warehouseId: label.warehouseId, - wdrNo: label.wdrNo || '*', - })) - sessionStorage.setItem('customerIssueScannedLabels', JSON.stringify(payload)) - } catch (e) {} - this.$router.push({ name: 'customerIssuePrintSelect' }) - this.loading = false + this.showSummaryDialog = false + this.pendingIssueParams = null + this.$router.push({ name: 'customerIssuePDA' }) } else { - this.$message.error(data.message || '操作失败') + this.$message.error(data.msg || '操作失败') } }) .catch(() => { @@ -503,9 +887,29 @@ export default { // 加载订单详情 loadOrderDetails() { - this.orderInfo.orderNo = this.orderNo - this.orderInfo.itemNo = this.itemNo - this.orderInfo.partNo = this.partNo + this.orderInfo.orderNo = this.orderNo + this.orderInfo.itemNo = this.itemNo + this.orderInfo.partNo = this.partNo + this.getShipmentHuDetails() + }, + getShipmentHuDetails() { + let params = { + shipmentId: this.orderNo, + partNo: this.partNo, + site: localStorage.getItem('site'), + } + this.labelList = [] + getShipmentHuDetail(params) + .then(({ data }) => { + if (data.code === 0 && data) { + this.labelList = data.details || [] + } else { + this.$message.error(data.msg || '获取订单详情失败') + } + }) + .catch(() => { + this.$message.error('获取订单详情失败') + }) }, // 打开打印弹框 @@ -514,11 +918,11 @@ export default { this.$message.warning('请先扫描发料标签') return } - + // 复制标签列表并添加选中状态 - this.printLabelList = this.labelList.map(label => ({ + this.printLabelList = this.labelList.map((label) => ({ ...label, - __checked: true + __checked: true, })) this.printAllChecked = true this.showPrintDialog = true @@ -533,35 +937,40 @@ export default { // 全选/取消全选 togglePrintAll(checked) { - this.printLabelList.forEach(label => { + this.printLabelList.forEach((label) => { this.$set(label, '__checked', checked) }) }, // 执行打印 onPrint(type) { - const selected = this.printLabelList.filter(label => label.__checked) + const selected = this.printLabelList.filter((label) => label.__checked) if (selected.length === 0) { this.$message.warning('请至少选择一条记录') return } - + // 将选择结果暂存，供后续打印页面使用 try { - const payload = selected.map(label => ({ - labelCode: label.labelCode, - issueQty: label.quantity, + const payload = selected.map((label) => ({ + labelCode: label.labelCode || label.unitId, + issueQty: + Number(label.qtyToIssue) || + 0, batchNo: label.batchNo, partNo: label.partNo, locationId: label.locationId, warehouseId: label.warehouseId, wdrNo: label.wdrNo || '*', })) - sessionStorage.setItem('customerIssuePrintSelected', JSON.stringify(payload)) + sessionStorage.setItem( + 'customerIssuePrintSelected', + JSON.stringify(payload) + ) sessionStorage.setItem('customerIssuePrintType', type) this.$message.success('已准备打印：' + type) this.closePrintDialog() - + // 根据实际打印流程跳转或调用打印 // this.$router.push({ name: 'somePrintPage' }) } catch (e) { @@ -571,12 +980,12 @@ export default { // 打开数量输入弹框 openQuantityDialog(type) { - const selected = this.printLabelList.filter(label => label.__checked) + const selected = this.printLabelList.filter((label) => label.__checked) if (selected.length === 0) { this.$message.warning('请至少选择一条记录') return } - + this.currentPrintType = type if (type === 'QC') { this.showQCDialog = true @@ -598,7 +1007,7 @@ export default { this.$message.warning('请输入有效的QC打印数量') return } - + this.executePrint('QC', this.qcQuantity) }, @@ -608,31 +1017,39 @@ export default { this.$message.warning('请输入有效的BOX打印数量') return } - + this.executePrint('BOX', this.boxQuantity) }, // 执行打印（带数量） executePrint(type, quantity) { - const selected = this.printLabelList.filter(label => label.__checked) - + const selected = this.printLabelList.filter((label) => label.__checked) + try { - const payload = selected.map(label => ({ - labelCode: label.labelCode, - issueQty: label.quantity, + const payload = selected.map((label) => ({ + labelCode: label.labelCode || label.unitId, + issueQty: + Number(label.qtyToIssue) || + 0, batchNo: label.batchNo, partNo: label.partNo, locationId: label.locationId, warehouseId: label.warehouseId, wdrNo: label.wdrNo || '*', })) - sessionStorage.setItem('customerIssuePrintSelected', JSON.stringify(payload)) + sessionStorage.setItem( + 'customerIssuePrintSelected', + JSON.stringify(payload) + ) sessionStorage.setItem('customerIssuePrintType', type) - sessionStorage.setItem('customerIssuePrintQuantity', quantity.toString()) + sessionStorage.setItem( + 'customerIssuePrintQuantity', + quantity.toString() + ) this.$message.success(`已准备打印：${type}，数量：${quantity}`) this.closeQuantityDialog() this.closePrintDialog() - + // 根据实际打印流程跳转或调用打印 // this.$router.push({ name: 'somePrintPage' }) } catch (e) { @@ -645,11 +1062,9 @@ export default { // 获取路由参数 console.log('路由参数:', this.$route.query) - this.orderNo = this.$route.query.workOrderNo - this.partNo = this.$route.query.partNo - this.itemNo = this.$route.query.itemNo - this.qtyIssued = this.$route.query.issureQty - this.assignedQty = this.$route.query.assignedQty + this.orderNo = this.$route.query.shipmentId + this.state = this.$route.query.state + this.orderType = this.$route.query.orderType if (!this.orderNo) { this.$message.error('参数错误') @@ -678,6 +1093,7 @@ export default { display: flex; flex-direction: column; background: #f5f5f5; + overflow: hidden; } /* 头部栏 */ @@ -881,39 +1297,36 @@ export default { display: flex; align-items: center; justify-content: space-between; - padding: 6px 8px; + padding: 6px 10px; background: white; margin: 0 10px; margin-top: 4px; - border-radius: 8px 8px 0 0; + border-radius: 6px 6px 0 0; border-bottom: 2px solid #17b3a3; } +/* 统一滚动容器 */ +.content-scroll-container { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + background: #f5f5f5; + min-height: 0; +} + /* 对齐直接领料明细的工单卡片样式 */ /* 工单列表容器背景与间距 */ .work-order-list { - overflow-y: auto; - padding: 10px 10px; + padding: 8px 10px 4px; } /* 工单卡片具有白色背景、圆角、阴影与边框一致性 */ .work-order-card { background: white; - border-radius: 8px; - margin-bottom: 12px; - padding: 10px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; - border: 2px solid transparent; -} - -.work-order-card:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); - transform: translateY(-1px); -} - -.work-order-card:active { - transform: translateY(0); + border-radius: 6px; + padding: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; } /* 物料描述行（单独一行的小字说明） */ @@ -964,7 +1377,103 @@ export default { color: #0d8f7f; } -/* 标签列表 */ +/* 标签列表 - 卡片容器 */ +.label-card-container { + padding: 0 8px 8px; + background: #f5f5f5; +} + +/* 标签卡片 - 更紧凑样式 */ +.label-card { + background: white; + border-radius: 4px; + margin-bottom: 6px; + padding: 6px 8px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); + border: 1px solid #e0e0e0; + cursor: pointer; + transition: all 0.2s ease; + position: relative; +} + +.label-card:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); + border-color: #17b3a3; +} + +.label-card:active { + transform: scale(0.98); +} + +/* 编辑图标 - 右上角 */ +.card-edit-icon { + position: absolute; + top: 6px; + right: 6px; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + background: #f0f0f0; + border-radius: 3px; + cursor: pointer; + transition: all 0.2s ease; + z-index: 10; +} + +.card-edit-icon:hover { + background: #17b3a3; + color: white; +} + +.card-edit-icon i { + font-size: 12px; + color: #17b3a3; +} + +.card-edit-icon:hover i { + color: white; +} + +/* 卡片内容 */ +.card-content { + padding-right: 28px; +} + +.card-row { + display: flex; + align-items: center; + font-size: 11px; + line-height: 1.5; + margin-bottom: 3px; +} + +.card-row:last-child { + margin-bottom: 0; +} + +.card-label { + color: #666; + min-width: 65px; + flex-shrink: 0; + font-size: 11px; +} + +.card-value { + color: #333; + flex: 1; + word-break: break-all; + font-size: 11px; +} + +.card-value.highlight { + color: #17b3a3; + font-weight: bold; + font-size: 12px; +} + +/* 标签列表（保留原有样式，以防其他地方使用） */ .label-list { background: white; margin: 0 10px 12px; @@ -1168,6 +1677,33 @@ export default { .edit-modal .modal-body { padding: 20px; + max-height: 60vh; + overflow-y: auto; +} + +.edit-modal .modal-body.scrollable { + max-height: 60vh; + overflow-y: auto; + padding-right: 10px; +} + +/* 滚动条样式 */ +.edit-modal .modal-body.scrollable::-webkit-scrollbar { + width: 6px; +} + +.edit-modal .modal-body.scrollable::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; +} + +.edit-modal .modal-body.scrollable::-webkit-scrollbar-thumb { + background: #17b3a3; + border-radius: 3px; +} + +.edit-modal .modal-body.scrollable::-webkit-scrollbar-thumb:hover { + background: #13998c; } .edit-modal .form-group { @@ -1627,4 +2163,221 @@ export default { background: #13998c; border-color: #13998c; } + +/* 发料对比弹框 */ +.summary-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + padding: 6px; +} + +.summary-modal { + width: 100%; + max-width: 560px; + background: white; + border-radius: 14px; + box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25); + overflow: hidden; + display: flex; + flex-direction: column; +} + +.summary-modal .modal-header { + background: #17b3a3; + color: white; + padding: 12px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.summary-body { + max-height: 65vh; + overflow-y: auto; + padding-bottom: 4px; +} + +.summary-loading { + padding: 40px 20px; + text-align: center; + color: #666; +} + +.summary-header-stats { + padding: 14px 20px 4px; + display: flex; + gap: 12px; +} + +.stat-card { + flex: 1; + background: #f7f8fa; + border-radius: 10px; + padding: 10px 12px; + display: flex; + flex-direction: column; + gap: 6px; + position: relative; + overflow: hidden; +} + +.stat-card i { + font-size: 18px; + color: inherit; +} + +.stat-card.exist { + border-left: 4px solid #2ec4b6; + color: #0f9d92; +} + +.stat-card.missing { + border-left: 4px solid #ffb703; + color: #f18f01; +} + +.stat-card.extra { + border-left: 4px solid #3a86ff; + color: #1d6fe3; +} + +.stat-count { + font-size: 22px; + font-weight: 600; + color: #252525; +} + +.stat-label { + font-size: 12px; + color: #777; + letter-spacing: 0.5px; +} + +.summary-section { + padding: 12px 2px 18px; + border-bottom: 1px solid #f3f4f6; +} + +.summary-section:last-child { + border-bottom: none; +} + +.section-title-row { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-bottom: 8px; +} + +.section-title-text { + font-size: 14px; + font-weight: 600; + color: #333; +} + +.section-sub { + font-size: 12px; + color: #999; + margin-left: 6px; +} + +.section-count { + font-size: 12px; + color: #a0a0a0; +} + +.summary-table { + border: 1px solid #eef0f4; + border-radius: 10px; + overflow: hidden; +} + +.summary-table-row { + display: grid; + gap: 8px; + padding: 8px 12px; + font-size: 12px; + align-items: center; +} + +.summary-table--4 .summary-table-row { + grid-template-columns: 2fr 1fr 1fr 1fr; +} + +.summary-table--3 .summary-table-row { + grid-template-columns: 2.2fr 1fr 1fr; +} + +.summary-table-head { + background: #f8f9fb; + font-weight: 600; + color: #666; + text-transform: uppercase; +} + +.summary-table-row .part { + font-weight: 600; + color: #333; +} + +.summary-table-row:not(.summary-table-head) { + border-top: 1px solid #f0f2f5; +} + +.summary-table-row:first-of-type { + border-top: none; +} + +.badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 60px; + padding: 2px 8px; + border-radius: 20px; + font-size: 11px; + font-weight: 600; +} + +.badge.success { + background: rgba(46, 196, 182, 0.15); + color: #0f9d92; +} + +.badge.danger { + background: rgba(255, 99, 71, 0.15); + color: #ff4d4f; +} + +.badge.warn { + background: rgba(255, 183, 3, 0.15); + color: #f18f01; +} + +.badge.info { + background: rgba(58, 134, 255, 0.15); + color: #1d6fe3; +} + +.summary-empty { + padding: 12px 0 4px; + font-size: 12px; + color: #999; +} + +.summary-modal .modal-footer { + padding: 12px 20px; + display: flex; + justify-content: flex-end; + gap: 12px; + border-top: 1px solid #f0f0f0; +}