diff --git a/src/views/modules/sales/salesOutboundDetail.vue b/src/views/modules/sales/salesOutboundDetail.vue index 6736765..153ba02 100644 --- a/src/views/modules/sales/salesOutboundDetail.vue +++ b/src/views/modules/sales/salesOutboundDetail.vue @@ -34,31 +34,46 @@
-
- 出库单号 - {{ outboundInfo.outboundNo }} +
+
+ 出库单号 + {{ outboundInfo.outboundNo }} +
-
-
-
销售订单
-
{{ outboundInfo.relatedNo }}
-
-
-
标签张数
-
- {{ outboundInfo.availableLabels }}{{ outboundInfo.totalLabels }} +
+
+
+ 关联单号: + {{ outboundInfo.relatedNo || '-' }}
-
-
-
物料总数
-
- {{ outboundInfo.availableQty }}{{ outboundInfo.totalQty }} +
+ 关联行号: + {{ outboundInfo.relatedLineNo || '-' }}
-
-
创建日期
-
{{ formatDate(outboundInfo.createDate) }}
+ +
+
+
标签张数
+
+ {{ outboundInfo.availableLabels }} + / + {{ outboundInfo.totalLabels }} +
+
+
+
物料总数
+
+ {{ outboundInfo.availableQty }} + / + {{ outboundInfo.totalQty }} +
+
+
+
创建日期
+
{{ formatDate(outboundInfo.createDate) }}
+
@@ -532,76 +547,127 @@ export default { .material-info-card { background: white; margin: 4px 16px; - padding: 6px 20px; - border-radius: 8px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0; + overflow: hidden; } -.card-title { - margin-bottom: 16px; +/* 卡片头部 */ +.card-header { + background: white; + padding: 10px 16px; + border-bottom: 1px solid #e8e8e8; +} + +.card-title-group { + display: flex; + flex-direction: column; + gap: 3px; } .title-label { font-size: 11px; color: #999; - display: block; - margin-bottom: 6px; font-weight: normal; } .title-value { - font-size: 18px; + font-size: 16px; font-weight: bold; color: #333; line-height: 1.2; - margin-left: 20px; + letter-spacing: 0.5px; } -.card-details { +/* 卡片主体 */ +.card-body { + padding: 12px 16px; +} + +/* 信息行（关联单号和行号） */ +.info-row { + display: flex; + gap: 12px; + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px dashed #e8e8e8; +} + +.info-item { + flex: 1; + display: flex; + align-items: center; + gap: 6px; +} + +.info-label { + font-size: 11px; + color: #666; + font-weight: 500; + white-space: nowrap; +} + +.info-value { + font-size: 12px; + color: #333; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.info-value.highlight { + color: #333; + font-weight: 600; +} + +/* 统计数据行 */ +.stats-row { display: flex; justify-content: space-between; - align-items: flex-start; - gap: 4px; + gap: 6px; } -.detail-item { +.stat-item { flex: 1; text-align: center; - min-width: 60px; - max-width: 60px; + padding: 6px 4px; + background: white; + border-radius: 6px; } -.detail-label { - font-size: 11px; - color: #999; - margin-bottom: 6px; +.stat-label { + font-size: 10px; + color: #666; + margin-bottom: 4px; font-weight: normal; - line-height: 1.2; - margin-left: -12px; } -.detail-value { - font-size: 13px; +.stat-value { + font-size: 12px; color: #333; - font-weight: 500; - line-height: 1.2; - margin-left: -12px; + font-weight: 600; + line-height: 1.3; } -.detail-value .qualified { - color: #17B3A3; - font-weight: 500; +.stat-value.single { + color: #666; } -.detail-value .total { +.stat-value .qualified { color: #333; + font-weight: 700; +} + +.stat-value .total { + color: #666; font-weight: 500; } -.detail-value .total::before { - content: '/'; - color: #333; +.stat-value .separator { + color: #ccc; + margin: 0 2px; } /* 区域标题 */ @@ -981,27 +1047,38 @@ export default { .material-info-card { margin: 4px 12px; - padding: 6px 16px; } - .section-title { - margin: 0 12px; - margin-top: 4px; + .card-header { + padding: 10px 12px; } - .label-list { - margin: 0 12px 8px; + .card-body { + padding: 10px 12px; + } + + .info-row { + flex-direction: column; + gap: 8px; } - .card-details { + .stats-row { flex-wrap: wrap; gap: 6px; } - .detail-item { + .stat-item { flex: 0 0 48%; - margin-bottom: 6px; - min-width: 50px; + min-width: 45%; + } + + .section-title { + margin: 0 12px; + margin-top: 4px; + } + + .label-list { + margin: 0 12px 8px; } .list-header, .list-item { diff --git a/src/views/modules/sales/salesOutboundList.vue b/src/views/modules/sales/salesOutboundList.vue index de0a70c..c8d78aa 100644 --- a/src/views/modules/sales/salesOutboundList.vue +++ b/src/views/modules/sales/salesOutboundList.vue @@ -30,31 +30,46 @@ class="outbound-card" @click="goToOutboundPage(item)" > -
- 出库单号 - {{ item.outboundNo }} +
+
+ 出库单号 + {{ item.outboundNo }} +
-
-
-
销售订单
-
{{ item.relatedNo }}
-
-
-
标签张数
-
- {{ item.availableLabels }}{{ item.totalLabels }} +
+
+
+ 关联单号: + {{ item.relatedNo || '-' }}
-
-
-
物料总数
-
- {{ item.availableQty }}{{ item.totalQty }} +
+ 关联行号: + {{ item.relatedLineNo || '-' }}
-
-
创建日期
-
{{ formatDate(item.createDate) }}
+ +
+
+
标签张数
+
+ {{ item.availableLabels }} + / + {{ item.totalLabels }} +
+
+
+
物料总数
+
+ {{ item.availableQty }} + / + {{ item.totalQty }} +
+
+
+
创建日期
+
{{ formatDate(item.createDate) }}
+
@@ -91,7 +106,7 @@ export default { formatDate(date) { return date ? moment(date).format('YYYY-MM-DD') : ''; }, - + // 处理搜索 handleSearch() { if (this.searchCode.trim()) { @@ -245,85 +260,139 @@ export default { /* 出库卡片 */ .outbound-card { background: white; - border-radius: 8px; + border-radius: 12px; margin-bottom: 12px; - padding: 16px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s ease; + overflow: hidden; + border: 1px solid #f0f0f0; } .outbound-card:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); - transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(23, 179, 163, 0.15); + transform: translateY(-2px); + border-color: #17B3A3; } .outbound-card:active { transform: translateY(0); } -/* 卡片标题 */ -.card-title { - margin-bottom: 12px; +/* 卡片头部 */ +.card-header { + background: white; + padding: 12px 16px; + border-bottom: 1px solid #e8e8e8; +} + +.card-title-group { + display: flex; + flex-direction: column; + gap: 4px; } .title-label { - font-size: 12px; - color: #666; - display: block; - margin-bottom: 4px; + font-size: 11px; + color: #999; + font-weight: normal; } .title-value { - font-size: 16px; + font-size: 17px; font-weight: bold; color: #333; - margin-left: 20px; + letter-spacing: 0.5px; +} + +/* 卡片主体 */ +.card-body { + padding: 14px 16px; +} + +/* 信息行（关联单号和行号） */ +.info-row { + display: flex; + gap: 16px; + margin-bottom: 12px; + padding-bottom: 10px; + border-bottom: 1px dashed #e8e8e8; +} + +.info-item { + flex: 1; + display: flex; + align-items: center; + gap: 6px; +} + +.info-label { + font-size: 12px; + color: #666; + font-weight: 500; + white-space: nowrap; +} + +.info-value { + font-size: 13px; + color: #333; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -/* 卡片详情 */ -.card-details { +.info-value.highlight { + color: #333; + font-weight: 600; +} + +/* 统计数据行 */ +.stats-row { display: flex; justify-content: space-between; - align-items: flex-start; - gap: 4px; + gap: 8px; } -.detail-item { +.stat-item { flex: 1; text-align: center; - min-width: 60px; - max-width: 60px; + padding: 6px 4px; + background: white; + border-radius: 6px; } -.detail-label { +.stat-label { font-size: 11px; color: #666; margin-bottom: 4px; - line-height: 1.2; - margin-left: -12px; + font-weight: normal; } -.detail-value { +.stat-value { font-size: 13px; color: #333; - line-height: 1.2; - margin-left: -12px; + font-weight: 600; + line-height: 1.3; } -.detail-value .qualified { - color: #17B3A3; - font-weight: 500; +.stat-value.single { + color: #666; } -.detail-value .total { +.stat-value .qualified { color: #333; + font-weight: 700; +} + +.stat-value .total { + color: #666; font-weight: 500; } -.detail-value .total::before { - content: '/'; - color: #333; +.stat-value .separator { + color: #ccc; + margin: 0 2px; } /* 空状态 */ @@ -386,19 +455,27 @@ export default { padding: 8px 12px; } - .outbound-card { + .card-header { + padding: 10px 12px; + } + + .card-body { padding: 12px; } - .card-details { + .info-row { + flex-direction: column; + gap: 8px; + } + + .stats-row { flex-wrap: wrap; gap: 6px; } - .detail-item { + .stat-item { flex: 0 0 48%; - margin-bottom: 6px; - min-width: 50px; + min-width: 45%; } } - \ No newline at end of file +