|
|
|
@ -14,97 +14,102 @@ |
|
|
|
<!-- 搜索框 --> |
|
|
|
<div class="search-container"> |
|
|
|
<el-input clearable class="compact-input" |
|
|
|
v-model="transactionId" |
|
|
|
placeholder="请输入Transaction ID" |
|
|
|
v-model="partNo" |
|
|
|
placeholder="请输入物料编码" |
|
|
|
prefix-icon="el-icon-search" |
|
|
|
@keyup.enter.native="handleSearchTransaction" |
|
|
|
ref="transactionInput" |
|
|
|
ref="partNoInput" |
|
|
|
/> |
|
|
|
<el-button type="primary" class="big-button" @click="handleSearchTransaction" :loading="searching"> |
|
|
|
查询 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 移库信息卡片 --> |
|
|
|
<div class="material-info-card" v-if="transitInfo.transNo"> |
|
|
|
<div class="card-title"> |
|
|
|
<span class="title-label">移库单号</span> |
|
|
|
<span class="title-value">{{ transitInfo.transNo }}</span> |
|
|
|
<!-- 移库记录列表 --> |
|
|
|
<div class="records-list" v-if="recordsList.length > 0"> |
|
|
|
<div class="section-title"> |
|
|
|
<div class="title-left"> |
|
|
|
<i class="el-icon-document"></i> |
|
|
|
<span>移库记录 ({{ recordsList.length }})</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card-details"> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">移出仓库</div> |
|
|
|
<div class="detail-value">{{ transitInfo.fromWarehouse }}</div> |
|
|
|
<!-- 每条移库记录 --> |
|
|
|
<div |
|
|
|
v-for="(record, index) in recordsList" |
|
|
|
:key="index" |
|
|
|
class="record-card" |
|
|
|
:class="{ 'record-selected': selectedRecords.includes(index) }" |
|
|
|
> |
|
|
|
<!-- 记录头部 - 可点击展开/收起 --> |
|
|
|
<div class="record-header" @click="toggleRecord(index)"> |
|
|
|
<div class="record-info"> |
|
|
|
<div class="record-part">{{ record.partNo }}</div> |
|
|
|
<div class="record-desc">{{ record.partDescription }}</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">移入仓库</div> |
|
|
|
<div class="detail-value">{{ transitInfo.toWarehouse }}</div> |
|
|
|
<div class="record-qty"> |
|
|
|
<div class="qty-label">在途数量</div> |
|
|
|
<div class="qty-value">{{ record.qtyInTransit }}</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">状态</div> |
|
|
|
<div class="detail-value"> |
|
|
|
<span class="status-pending">{{ transitInfo.status }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 展开的编辑区域 --> |
|
|
|
<div class="record-detail" v-if="expandedRecords.includes(index)"> |
|
|
|
<!-- 第一行：接收数量 和 接收库位 --> |
|
|
|
<div class="detail-row-group"> |
|
|
|
<div class="detail-col"> |
|
|
|
<div class="detail-label">接收数量 *</div> |
|
|
|
<el-input |
|
|
|
v-model="record.receiveQty" |
|
|
|
size="small" |
|
|
|
type="number" |
|
|
|
placeholder="请输入数量" |
|
|
|
@input="handleReceiveQtyChange(index)" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="detail-col"> |
|
|
|
<div class="detail-label">接收库位 *</div> |
|
|
|
<el-input |
|
|
|
v-model="record.receiveLocationNo" |
|
|
|
size="small" |
|
|
|
placeholder="请输入库位" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 扫描区域 --> |
|
|
|
<div class="section-title" v-if="transitInfo.transNo"> |
|
|
|
<div class="title-left"> |
|
|
|
<i class="el-icon-circle-check"></i> |
|
|
|
<span>扫描箱/卷标签</span> |
|
|
|
</div> |
|
|
|
<!-- 第二行：批次号 和 WDR号 --> |
|
|
|
<div class="detail-row-group"> |
|
|
|
<div class="detail-col"> |
|
|
|
<div class="detail-label">批次号</div> |
|
|
|
<el-input |
|
|
|
v-model="record.receiveLotBatchNo" |
|
|
|
size="small" |
|
|
|
placeholder="请输入批次号" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 扫描输入框 --> |
|
|
|
<div class="scan-container" v-if="transitInfo.transNo"> |
|
|
|
<el-input clearable class="compact-input" |
|
|
|
v-model="scanCode" |
|
|
|
placeholder="请扫描箱/卷标签" |
|
|
|
prefix-icon="el-icon-scan" |
|
|
|
@keyup.enter.native="handleScan" |
|
|
|
ref="scanInput" |
|
|
|
<div class="detail-col"> |
|
|
|
<div class="detail-label">WDR号</div> |
|
|
|
<el-input |
|
|
|
v-model="record.receiveWaivDevRejNo" |
|
|
|
size="small" |
|
|
|
placeholder="请输入WDR号" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 标签列表 --> |
|
|
|
<div class="label-list" v-if="transitInfo.transNo"> |
|
|
|
<div class="list-header"> |
|
|
|
<div class="col-no">NO.</div> |
|
|
|
<div class="col-label">标签条码</div> |
|
|
|
<div class="col-part">物料编码</div> |
|
|
|
<div class="col-unit">单位</div> |
|
|
|
<div class="col-qty">标签数量</div> |
|
|
|
<div class="col-status">状态</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
v-for="(label, index) in labelList" |
|
|
|
:key="label.id" |
|
|
|
class="list-item" |
|
|
|
> |
|
|
|
<div class="col-no">{{ labelList.length - index }}</div> |
|
|
|
<div class="col-label">{{ label.labelCode }}</div> |
|
|
|
<div class="col-part">{{ label.partNo }}</div> |
|
|
|
<div class="col-unit">{{ label.unit || '个' }}</div> |
|
|
|
<div class="col-qty">{{ label.quantity }}</div> |
|
|
|
<div class="col-status"> |
|
|
|
<span class="status-success">已接收</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 空状态 --> |
|
|
|
<div v-if="labelList.length === 0" class="empty-labels"> |
|
|
|
<p>暂无扫描标签</p> |
|
|
|
<div v-if="recordsList.length === 0" class="empty-records"> |
|
|
|
<p>未查询到移库记录</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 底部操作按钮 --> |
|
|
|
<div class="bottom-actions" v-if="transitInfo.transNo"> |
|
|
|
<button class="action-btn primary" @click="confirmReceive" :disabled="labelList.length === 0"> |
|
|
|
确认接收 |
|
|
|
<div class="bottom-actions" v-if="recordsList.length > 0"> |
|
|
|
<button |
|
|
|
class="action-btn primary" |
|
|
|
@click="confirmReceive" |
|
|
|
:disabled="selectedRecords.length === 0" |
|
|
|
> |
|
|
|
确认收货 |
|
|
|
</button> |
|
|
|
<button class="action-btn secondary" @click="cancelReceive"> |
|
|
|
取消 |
|
|
|
@ -120,24 +125,26 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getTransitRecord, scanTransitLabel, confirmTransitReceive } from '@/api/other-transaction/transit'; |
|
|
|
import { getTransitRecord, confirmTransitReceive } from '@/api/other-transaction/transit'; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
transactionId: '', |
|
|
|
scanCode: '', |
|
|
|
transitInfo: {}, |
|
|
|
labelList: [], |
|
|
|
partNo: '', |
|
|
|
recordsList: [], // 移库记录列表 |
|
|
|
expandedRecords: [], // 展开的记录索引 |
|
|
|
selectedRecords: [], // 选中的记录索引 |
|
|
|
searching: false, |
|
|
|
errorMessage: '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 查询移库记录 |
|
|
|
/** |
|
|
|
* 查询移库记录 |
|
|
|
*/ |
|
|
|
handleSearchTransaction() { |
|
|
|
if (!this.transactionId.trim()) { |
|
|
|
this.$message.warning('请输入Transaction ID'); |
|
|
|
if (!this.partNo.trim()) { |
|
|
|
this.$message.warning('请输入物料编码'); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -145,125 +152,148 @@ export default { |
|
|
|
this.errorMessage = ''; |
|
|
|
|
|
|
|
const params = { |
|
|
|
transactionId: this.transactionId.trim(), |
|
|
|
site: localStorage.getItem('site') |
|
|
|
transactionId: this.partNo.trim(), |
|
|
|
site: localStorage.getItem('site') || this.$store.state.user.site |
|
|
|
}; |
|
|
|
|
|
|
|
getTransitRecord(params).then(({ data }) => { |
|
|
|
this.searching = false; |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.transitInfo = data.data; |
|
|
|
this.$message.success('查询成功'); |
|
|
|
// 聚焦扫描框 |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.scanInput) { |
|
|
|
this.$refs.scanInput.focus(); |
|
|
|
const result = data.data; |
|
|
|
this.recordsList = result.detailList || []; |
|
|
|
|
|
|
|
if (this.recordsList.length === 0) { |
|
|
|
this.$message.warning('未查询到移库记录'); |
|
|
|
} else { |
|
|
|
this.$message.success(`查询成功，共${this.recordsList.length}条记录`); |
|
|
|
|
|
|
|
// 默认第一条记录：设置接收数量为在途数量，展开，并自动选中 |
|
|
|
if (this.recordsList.length > 0) { |
|
|
|
// 设置第一条的接收数量为在途数量 |
|
|
|
this.recordsList[0].receiveQty = this.recordsList[0].qtyInTransit; |
|
|
|
|
|
|
|
// 展开第一条记录 |
|
|
|
this.expandedRecords = [0]; |
|
|
|
|
|
|
|
// 自动选中第一条 |
|
|
|
this.selectedRecords = [0]; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg || '未找到移库记录'); |
|
|
|
this.transitInfo = {}; |
|
|
|
this.labelList = []; |
|
|
|
this.$message.warning( '未找到移库记录'); |
|
|
|
this.recordsList = []; |
|
|
|
} |
|
|
|
}).catch(error => { |
|
|
|
this.searching = false; |
|
|
|
this.$message.error('查询失败'); |
|
|
|
this.transitInfo = {}; |
|
|
|
this.labelList = []; |
|
|
|
this.recordsList = []; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理扫描 |
|
|
|
handleScan() { |
|
|
|
if (!this.scanCode.trim()) { |
|
|
|
return; |
|
|
|
/** |
|
|
|
* 展开/收起记录 |
|
|
|
*/ |
|
|
|
toggleRecord(index) { |
|
|
|
const idx = this.expandedRecords.indexOf(index); |
|
|
|
if (idx > -1) { |
|
|
|
this.expandedRecords.splice(idx, 1); |
|
|
|
} else { |
|
|
|
this.expandedRecords.push(index); |
|
|
|
} |
|
|
|
|
|
|
|
this.validateAndAddLabel(this.scanCode.trim()); |
|
|
|
this.scanCode = ''; |
|
|
|
}, |
|
|
|
|
|
|
|
// 验证标签并添加到列表 |
|
|
|
validateAndAddLabel(labelCode) { |
|
|
|
const params = { |
|
|
|
labelCode: labelCode, |
|
|
|
transNo: this.transitInfo.transNo, |
|
|
|
site: localStorage.getItem('site'), |
|
|
|
}; |
|
|
|
/** |
|
|
|
* 接收数量变化 - 自动选中/取消选中 |
|
|
|
*/ |
|
|
|
handleReceiveQtyChange(index) { |
|
|
|
const record = this.recordsList[index]; |
|
|
|
const receiveQty = parseFloat(record.receiveQty); |
|
|
|
|
|
|
|
// 如果有有效的接收数量，自动选中 |
|
|
|
if (receiveQty && receiveQty > 0) { |
|
|
|
if (!this.selectedRecords.includes(index)) { |
|
|
|
this.selectedRecords.push(index); |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 如果数量为空或0，取消选中 |
|
|
|
const idx = this.selectedRecords.indexOf(index); |
|
|
|
if (idx > -1) { |
|
|
|
this.selectedRecords.splice(idx, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
scanTransitLabel(params).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
// 检查是否已经扫描过 |
|
|
|
const exists = this.labelList.find(item => item.labelCode === labelCode); |
|
|
|
if (exists) { |
|
|
|
this.$message.warning('该标签已扫描，请勿重复扫描'); |
|
|
|
/** |
|
|
|
* 确认收货 |
|
|
|
*/ |
|
|
|
confirmReceive() { |
|
|
|
if (this.selectedRecords.length === 0) { |
|
|
|
this.$message.warning('请至少输入一条记录的接收数量'); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
// 添加到列表 |
|
|
|
this.labelList.push({ |
|
|
|
id: Date.now(), |
|
|
|
labelCode: labelCode, |
|
|
|
partNo: data.labelInfo.partNo, |
|
|
|
quantity: data.labelInfo.quantity, |
|
|
|
unit: data.labelInfo.unit, |
|
|
|
batchNo: data.labelInfo.batchNo, |
|
|
|
locationId: data.labelInfo.locationId |
|
|
|
}); |
|
|
|
// 验证选中的记录 |
|
|
|
for (let i = 0; i < this.selectedRecords.length; i++) { |
|
|
|
const index = this.selectedRecords[i]; |
|
|
|
const record = this.recordsList[index]; |
|
|
|
|
|
|
|
this.$message.success('扫描成功'); |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg || '该标签与移库单不符，请检查'); |
|
|
|
const receiveQty = parseFloat(record.receiveQty); |
|
|
|
if (!receiveQty || receiveQty <= 0) { |
|
|
|
this.$message.warning(`第${i + 1}条记录：请输入有效的接收数量`); |
|
|
|
return; |
|
|
|
} |
|
|
|
}).catch(error => { |
|
|
|
this.$message.error('扫描失败'); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 确认接收 |
|
|
|
confirmReceive() { |
|
|
|
if (this.labelList.length === 0) { |
|
|
|
this.$message.warning('请先扫描标签'); |
|
|
|
if (receiveQty > parseFloat(record.qtyInTransit)) { |
|
|
|
this.$message.warning(`第${i + 1}条记录：接收数量不能大于在途数量`); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
this.$confirm('确认接收所有扫描的标签吗？', '提示', { |
|
|
|
if (!record.receiveLocationNo || record.receiveLocationNo.trim() === '') { |
|
|
|
this.$message.warning(`第${i + 1}条记录：请输入接收库位`); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 构建收货明细列表 |
|
|
|
const details = this.selectedRecords.map(index => { |
|
|
|
return this.recordsList[index]; |
|
|
|
}); |
|
|
|
|
|
|
|
this.$confirm(`确认收货 ${this.selectedRecords.length} 条记录？`, '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
const params = { |
|
|
|
site: this.transitInfo.site, |
|
|
|
transNo: this.transitInfo.transNo, |
|
|
|
labels: this.labelList.map(label => ({ |
|
|
|
labelCode: label.labelCode, |
|
|
|
quantity: label.quantity, |
|
|
|
batchNo: label.batchNo, |
|
|
|
partNo: label.partNo, |
|
|
|
locationId: label.locationId || this.transitInfo.toLocation |
|
|
|
})) |
|
|
|
site: localStorage.getItem('site') || this.$store.state.user.site, |
|
|
|
transNo: '', // 移库单号（可选） |
|
|
|
operatorId: localStorage.getItem('userId') || this.$store.state.user.userId, |
|
|
|
operatorName: localStorage.getItem('userName') || this.$store.state.user.name, |
|
|
|
details: details |
|
|
|
}; |
|
|
|
|
|
|
|
confirmTransitReceive(params).then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.$message.success('接收成功'); |
|
|
|
this.$router.back(); |
|
|
|
this.$message.success('收货成功'); |
|
|
|
this.handleSearchTransaction(); |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg || '接收失败'); |
|
|
|
this.$message.error(data.msg || '收货失败'); |
|
|
|
} |
|
|
|
}).catch(error => { |
|
|
|
console.error('接收确认失败:', error); |
|
|
|
this.$message.error('接收失败'); |
|
|
|
console.error('收货失败:', error); |
|
|
|
this.$message.error('收货失败'); |
|
|
|
}); |
|
|
|
}).catch(() => { |
|
|
|
// 用户取消 |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 取消接收 |
|
|
|
/** |
|
|
|
* 取消收货 |
|
|
|
*/ |
|
|
|
cancelReceive() { |
|
|
|
if (this.labelList.length > 0) { |
|
|
|
this.$confirm('取消后将清空已扫描的标签，确定取消吗？', '提示', { |
|
|
|
if (this.selectedRecords.length > 0) { |
|
|
|
this.$confirm('取消后将清空已选中的记录，确定取消吗？', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '继续操作', |
|
|
|
type: 'warning' |
|
|
|
@ -279,10 +309,10 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
// 聚焦Transaction ID输入框 |
|
|
|
// 聚焦物料编码输入框 |
|
|
|
this.$nextTick(() => { |
|
|
|
if (this.$refs.transactionInput) { |
|
|
|
this.$refs.transactionInput.focus(); |
|
|
|
if (this.$refs.partNoInput) { |
|
|
|
this.$refs.partNoInput.focus(); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -375,71 +405,6 @@ export default { |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 物料信息卡片 */ |
|
|
|
.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: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.card-title { |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.title-label { |
|
|
|
font-size: 11px; |
|
|
|
color: #999; |
|
|
|
display: block; |
|
|
|
margin-bottom: 6px; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
|
|
|
|
.title-value { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
line-height: 1.2; |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-details { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
min-width: 60px; |
|
|
|
max-width: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-label { |
|
|
|
font-size: 11px; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 6px; |
|
|
|
font-weight: normal; |
|
|
|
line-height: 1.2; |
|
|
|
margin-left: -12px; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-value { |
|
|
|
font-size: 13px; |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 1.2; |
|
|
|
margin-left: -12px; |
|
|
|
} |
|
|
|
|
|
|
|
.status-pending { |
|
|
|
color: #E6A23C; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
/* 区域标题 */ |
|
|
|
.section-title { |
|
|
|
@ -471,78 +436,129 @@ export default { |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
/* 标签列表 */ |
|
|
|
.label-list { |
|
|
|
/* 移库记录列表 */ |
|
|
|
.records-list { |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
padding-bottom: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 记录卡片 */ |
|
|
|
.record-card { |
|
|
|
background: white; |
|
|
|
margin: 0 16px 12px; |
|
|
|
border-radius: 0 0 8px 8px; |
|
|
|
overflow: hidden; |
|
|
|
margin: 8px 16px; |
|
|
|
border-radius: 8px; |
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
|
border: 2px solid transparent; |
|
|
|
transition: all 0.2s; |
|
|
|
} |
|
|
|
|
|
|
|
.list-header { |
|
|
|
.record-card.record-selected { |
|
|
|
border-color: #17B3A3; |
|
|
|
box-shadow: 0 2px 8px rgba(23, 179, 163, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.record-header { |
|
|
|
display: flex; |
|
|
|
background: #f8f9fa; |
|
|
|
padding: 12px 8px; |
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 12px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.record-info { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.record-part { |
|
|
|
font-size: 15px; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.record-desc { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 8px; |
|
|
|
line-height: 1.4; |
|
|
|
} |
|
|
|
|
|
|
|
.list-item { |
|
|
|
display: flex; |
|
|
|
padding: 12px 8px; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
font-size: 12px; |
|
|
|
.record-location { |
|
|
|
font-size: 11px; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.label-text { |
|
|
|
color: #999; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.value-text { |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
margin-right: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.list-item:last-child { |
|
|
|
border-bottom: none; |
|
|
|
.record-qty { |
|
|
|
text-align: right; |
|
|
|
min-width: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-no { |
|
|
|
width: 20px; |
|
|
|
text-align: center; |
|
|
|
.qty-label { |
|
|
|
font-size: 11px; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-label { |
|
|
|
flex: 2; |
|
|
|
text-align: center; |
|
|
|
.qty-value { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
color: #E6A23C; |
|
|
|
line-height: 1.2; |
|
|
|
} |
|
|
|
|
|
|
|
.col-part { |
|
|
|
flex: 2; |
|
|
|
text-align: center; |
|
|
|
.qty-unit { |
|
|
|
font-size: 11px; |
|
|
|
color: #999; |
|
|
|
margin-top: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-unit { |
|
|
|
width: 40px; |
|
|
|
text-align: center; |
|
|
|
/* 记录详情 */ |
|
|
|
.record-detail { |
|
|
|
border-top: 1px solid #f0f0f0; |
|
|
|
padding: 12px; |
|
|
|
background: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
.col-qty { |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
/* 两列布局 */ |
|
|
|
.detail-row-group { |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.col-status { |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
.detail-row-group:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-col { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.status-success { |
|
|
|
color: #67C23A; |
|
|
|
.detail-label { |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 6px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-labels { |
|
|
|
.empty-records { |
|
|
|
padding: 40px 20px; |
|
|
|
text-align: center; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-labels p { |
|
|
|
.empty-records p { |
|
|
|
margin: 0; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
