fengyuan_yang
/
boying-pda
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2025-11-03 

pda销售出库优化
master
fengyuan_yang 2 months ago
parent
64bdd042fa
commit
104faf6339
2 changed files with 279 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 203
      src/views/modules/sales/salesOutboundDetail.vue
  2. 201
      src/views/modules/sales/salesOutboundList.vue

203
src/views/modules/sales/salesOutboundDetail.vue
View File

@ -34,31 +34,46 @@
<!-- 出库单信息卡片 -->
<div class="material-info-card" v-if="outboundInfo.outboundNo">
<div class="card-title">
<span class="title-label">出库单号</span>
<span class="title-value">{{ outboundInfo.outboundNo }}</span>
<div class="card-header">
<div class="card-title-group">
<span class="title-label">出库单号</span>
<span class="title-value">{{ outboundInfo.outboundNo }}</span>
</div>
</div>
<div class="card-details">
<div class="detail-item">
<div class="detail-label">销售订单</div>
<div class="detail-value">{{ outboundInfo.relatedNo }}</div>
</div>
<div class="detail-item">
<div class="detail-label">标签张数</div>
<div class="detail-value">
<span class="qualified">{{ outboundInfo.availableLabels }}</span><span class="total">{{ outboundInfo.totalLabels }}</span>
<div class="card-body">
<div class="info-row">
<div class="info-item">
<span class="info-label">关联单号:</span>
<span class="info-value">{{ outboundInfo.relatedNo || '-' }}</span>
</div>
</div>
<div class="detail-item">
<div class="detail-label">物料总数</div>
<div class="detail-value">
<span class="qualified">{{ outboundInfo.availableQty }}</span><span class="total">{{ outboundInfo.totalQty }}</span>
<div class="info-item">
<span class="info-label">关联行号:</span>
<span class="info-value highlight">{{ outboundInfo.relatedLineNo || '-' }}</span>
</div>
</div>
<div class="detail-item">
<div class="detail-label">创建日期</div>
<div class="detail-value">{{ formatDate(outboundInfo.createDate) }}</div>
<div class="stats-row">
<div class="stat-item">
<div class="stat-label">标签张数</div>
<div class="stat-value">
<span class="qualified">{{ outboundInfo.availableLabels }}</span>
<span class="separator">/</span>
<span class="total">{{ outboundInfo.totalLabels }}</span>
</div>
</div>
<div class="stat-item">
<div class="stat-label">物料总数</div>
<div class="stat-value">
<span class="qualified">{{ outboundInfo.availableQty }}</span>
<span class="separator">/</span>
<span class="total">{{ outboundInfo.totalQty }}</span>
</div>
</div>
<div class="stat-item">
<div class="stat-label">创建日期</div>
<div class="stat-value single">{{ formatDate(outboundInfo.createDate) }}</div>
</div>
</div>
</div>
</div>
@ -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 {

201
src/views/modules/sales/salesOutboundList.vue
View File

@ -30,31 +30,46 @@
class="outbound-card"
@click="goToOutboundPage(item)"
>
<div class="card-title">
<span class="title-label">出库单号</span>
<span class="title-value">{{ item.outboundNo }}</span>
<div class="card-header">
<div class="card-title-group">
<span class="title-label">出库单号</span>
<span class="title-value">{{ item.outboundNo }}</span>
</div>
</div>
<div class="card-details">
<div class="detail-item">
<div class="detail-label">销售订单</div>
<div class="detail-value">{{ item.relatedNo }}</div>
</div>
<div class="detail-item">
<div class="detail-label">标签张数</div>
<div class="detail-value">
<span class="qualified">{{ item.availableLabels }}</span><span class="total">{{ item.totalLabels }}</span>
<div class="card-body">
<div class="info-row">
<div class="info-item">
<span class="info-label">关联单号:</span>
<span class="info-value">{{ item.relatedNo || '-' }}</span>
</div>
</div>
<div class="detail-item">
<div class="detail-label">物料总数</div>
<div class="detail-value">
<span class="qualified">{{ item.availableQty }}</span><span class="total">{{ item.totalQty }}</span>
<div class="info-item">
<span class="info-label">关联行号:</span>
<span class="info-value highlight">{{ item.relatedLineNo || '-' }}</span>
</div>
</div>
<div class="detail-item">
<div class="detail-label">创建日期</div>
<div class="detail-value">{{ formatDate(item.createDate) }}</div>
<div class="stats-row">
<div class="stat-item">
<div class="stat-label">标签张数</div>
<div class="stat-value">
<span class="qualified">{{ item.availableLabels }}</span>
<span class="separator">/</span>
<span class="total">{{ item.totalLabels }}</span>
</div>
</div>
<div class="stat-item">
<div class="stat-label">物料总数</div>
<div class="stat-value">
<span class="qualified">{{ item.availableQty }}</span>
<span class="separator">/</span>
<span class="total">{{ item.totalQty }}</span>
</div>
</div>
<div class="stat-item">
<div class="stat-label">创建日期</div>
<div class="stat-value single">{{ formatDate(item.createDate) }}</div>
</div>
</div>
</div>
</div>
@ -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%;
}
}
</style>
</style>
Write Preview
Loading…
Cancel
Save