|
|
|
@ -11,86 +11,153 @@ |
|
|
|
|
|
|
|
<!-- 扫描框 --> |
|
|
|
<div class="search-container"> |
|
|
|
<el-input clearable class="compact-input" v-model="scanCode" placeholder="请扫描材料纸质标签" prefix-icon="el-icon-search" |
|
|
|
@keyup.enter.native="handleScan" ref="scanInput" /> |
|
|
|
<div class="mode-switch"> |
|
|
|
<el-switch class="custom-switch" v-model="isRemoveMode" active-color="#ff4949" inactive-color="#13ce66"> |
|
|
|
</el-switch> |
|
|
|
<span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span> |
|
|
|
<span v-else class="switch-text2">{{ '添加' }}</span> |
|
|
|
<div class="search-row"> |
|
|
|
<el-input clearable class="compact-input" v-model="scanCode" placeholder="请扫描材料纸质标签" prefix-icon="el-icon-search" |
|
|
|
@keyup.enter.native="handleScan" ref="scanInput" /> |
|
|
|
<div class="mode-switch"> |
|
|
|
<el-switch class="custom-switch" v-model="isRemoveMode" active-color="#ff4949" inactive-color="#13ce66"> |
|
|
|
</el-switch> |
|
|
|
<span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span> |
|
|
|
<span v-else class="switch-text2">{{ '添加' }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="print-checkbox"> |
|
|
|
<el-checkbox v-model="isPrint">是否打印</el-checkbox> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 订单及物料信息 --> |
|
|
|
<div class="work-order-list" v-if="outsourcingNo && componentPartNo"> |
|
|
|
<div class="work-order-card"> |
|
|
|
<div class="card-title"> |
|
|
|
<span class="title-label">委外订单号：{{ outsourcingNo }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="part-desc-row"> |
|
|
|
<span class="desc-text">料号：{{ componentPartNo }}</span> |
|
|
|
</div> |
|
|
|
<div class="part-desc-row"> |
|
|
|
<span class="desc-text">料名：{{ componentPartDesc }}</span> |
|
|
|
</div> |
|
|
|
<!-- 可滚动区域（仅保留一个滚动条） --> |
|
|
|
<div class="scroll-area"> |
|
|
|
<!-- 订单及物料信息 --> |
|
|
|
<div class="work-order-list" v-if="outsourcingNo && componentPartNo"> |
|
|
|
<div class="work-order-card"> |
|
|
|
<div class="card-title"> |
|
|
|
<span class="title-label">委外订单号：{{ outsourcingNo }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card-details"> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">需求数量</div> |
|
|
|
<div class="detail-value">{{ requiredQty }}</div> |
|
|
|
<div class="part-desc-row"> |
|
|
|
<span class="desc-text">料号：{{ componentPartNo }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">已发数量</div> |
|
|
|
<div class="detail-value">{{ issuedQty }}</div> |
|
|
|
<div class="part-desc-row"> |
|
|
|
<span class="desc-text">料名：{{ componentPartDesc }}</span> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">本次</div> |
|
|
|
<div class="detail-value">{{ totalScannedQty }}</div> |
|
|
|
|
|
|
|
<div class="card-details"> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">需求数量</div> |
|
|
|
<div class="detail-value">{{ requiredQty }}</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">已发数量</div> |
|
|
|
<div class="detail-value">{{ issuedQty }}</div> |
|
|
|
</div> |
|
|
|
<div class="detail-item"> |
|
|
|
<div class="detail-label">本次</div> |
|
|
|
<div class="detail-value">{{ totalScannedQty }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="section-title"> |
|
|
|
<div class="title-left"> |
|
|
|
<i class="el-icon-circle-check"></i> |
|
|
|
<span>发料信息确认</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 标签列表 --> |
|
|
|
<div class="label-list"> |
|
|
|
<div class="list-header"> |
|
|
|
<div class="col-no">NO.</div> |
|
|
|
<div class="col-label">标签条码</div> |
|
|
|
<div class="col-batch">库位</div> |
|
|
|
<div class="col-batch">批次号</div> |
|
|
|
<div class="col-qty">数量</div> |
|
|
|
<div class="section-title"> |
|
|
|
<div class="title-left"> |
|
|
|
<i class="el-icon-circle-check"></i> |
|
|
|
<span>发料信息确认</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-for="(label, index) in scannedLabels" :key="label.id" class="list-item"> |
|
|
|
<div class="col-no">{{ index+1 }}</div> |
|
|
|
<div class="col-label">{{ label.labelCode }}</div> |
|
|
|
<div class="col-batch">{{label.locationId}}</div> |
|
|
|
<div class="col-batch">{{ label.batchNo || '-' }}</div> |
|
|
|
<div class="col-qty">{{ label.quantity }}</div> |
|
|
|
</div> |
|
|
|
<!-- 标签列表 - 卡片形式（对齐客户发料样式） --> |
|
|
|
<div class="label-card-container"> |
|
|
|
<div v-for="(label, index) in scannedLabels" :key="label.id" class="label-card" |
|
|
|
@click="handleLabelClick(label, index)"> |
|
|
|
<div class="card-content"> |
|
|
|
<div class="card-row"> |
|
|
|
<span class="card-label">标签号：</span> |
|
|
|
<span class="card-value">{{ label.labelCode }}</span> |
|
|
|
<i class="el-icon-edit edit-icon"></i> |
|
|
|
</div> |
|
|
|
<div class="card-row"> |
|
|
|
<span class="card-label">物料号：</span> |
|
|
|
<span class="card-value">{{ label.componentPartNo || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="card-row"> |
|
|
|
<span class="card-label">批次号：</span> |
|
|
|
<span class="card-value">{{ label.batchNo || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="card-row"> |
|
|
|
<span class="card-label">库位：</span> |
|
|
|
<span class="card-value">{{ label.locationId || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="card-row"> |
|
|
|
<span class="card-label">剩余高度：</span> |
|
|
|
<span class="card-value">{{ label.height || '-' }}</span> |
|
|
|
</div> |
|
|
|
<div class="card-row"> |
|
|
|
<span class="card-label">发料数量：</span> |
|
|
|
<span class="card-value highlight">{{ label.quantity }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="scannedLabels.length === 0" class="empty-labels"> |
|
|
|
<p>暂无扫描标签</p> |
|
|
|
<div v-if="scannedLabels.length === 0" class="empty-labels"> |
|
|
|
<p>暂无扫描标签</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 底部操作按钮 --> |
|
|
|
<div class="bottom-actions"> |
|
|
|
<el-button class="action-btn secondary" :loading="loading" @click="confirmIssue" :disabled="scannedLabels.length === 0"> |
|
|
|
<el-button class="action-btn secondary" :loading="loading" @click="confirmIssue" |
|
|
|
:disabled="scannedLabels.length === 0"> |
|
|
|
确定 |
|
|
|
</el-button> |
|
|
|
<button class="action-btn secondary" style="margin-left: 10px;" @click="clearScannedLabels"> |
|
|
|
取消 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 修改数量弹框 --> |
|
|
|
<div v-if="quantityDialogVisible" class="edit-overlay" @click.self="quantityDialogVisible = false"> |
|
|
|
<div class="edit-modal"> |
|
|
|
<div class="modal-header"> |
|
|
|
<span class="modal-title">修改数量</span> |
|
|
|
<i class="el-icon-close close-btn" @click="quantityDialogVisible = false"></i> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="modal-body"> |
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">标签条码</label> |
|
|
|
<el-input v-model="currentEditLabel.labelCode" disabled class="form-input" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">物料号</label> |
|
|
|
<el-input v-model="currentEditLabel.componentPartNo" disabled class="form-input" /> |
|
|
|
</div> |
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">批次号</label> |
|
|
|
<el-input v-model="currentEditLabel.batchNo" disabled class="form-input" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">剩余高度(mm)</label> |
|
|
|
<el-input-number v-model="editHeight" :min="0" :precision="3" :step="0.001" class="form-input" |
|
|
|
style="width: 100%;" :controls="false" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">需要发料数量<span class="required">*</span></label> |
|
|
|
<el-input-number v-model="editQuantity" :min="0.0001" :precision="4" :step="0.0001" class="form-input" |
|
|
|
style="width: 100%;" :controls="false" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="modal-footer"> |
|
|
|
<button class="btn-cancel" @click="quantityDialogVisible = false">取消</button> |
|
|
|
<button class="btn-confirm" @click="confirmQuantityChange">确定</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
@ -100,6 +167,7 @@ import moment from 'moment' |
|
|
|
import { |
|
|
|
scanOutsourcingMaterialLabel, |
|
|
|
confirmOutsourcingDirectIssue, |
|
|
|
printLabelCommon, |
|
|
|
} from '@/api/outsourcing/outsourcing-issue' |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -107,6 +175,7 @@ export default { |
|
|
|
return { |
|
|
|
scanCode: '', |
|
|
|
isRemoveMode: false, |
|
|
|
isPrint: true, |
|
|
|
scannedLabels: [], |
|
|
|
outsourcingNo: '', |
|
|
|
componentPartNo: '', |
|
|
|
@ -115,9 +184,15 @@ export default { |
|
|
|
issuedQty: 0, |
|
|
|
itemNo: '', |
|
|
|
loading: false, |
|
|
|
partNo:'', |
|
|
|
releaseNo:'', |
|
|
|
lineNo:'' |
|
|
|
partNo: '', |
|
|
|
releaseNo: '', |
|
|
|
lineNo: '', |
|
|
|
batchNo: '', |
|
|
|
quantityDialogVisible: false, |
|
|
|
currentEditLabel: {}, |
|
|
|
currentEditIndex: -1, |
|
|
|
editQuantity: 0, |
|
|
|
editHeight: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -168,6 +243,7 @@ export default { |
|
|
|
warehouseId: data.labelInfo.warehouseId, |
|
|
|
locationId: data.labelInfo.locationId, |
|
|
|
wdrNo: data.labelInfo.wdrNo, |
|
|
|
height: data.labelInfo.height, |
|
|
|
engChgLevel: data.labelInfo.engChgLevel || '1', |
|
|
|
}) |
|
|
|
this.$message.success('扫描成功') |
|
|
|
@ -180,7 +256,9 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
removeLabelByCode(labelCode) { |
|
|
|
const index = this.scannedLabels.findIndex((item) => item.labelCode === labelCode) |
|
|
|
const index = this.scannedLabels.findIndex( |
|
|
|
(item) => item.labelCode === labelCode |
|
|
|
) |
|
|
|
if (index !== -1) { |
|
|
|
this.scannedLabels.splice(index, 1) |
|
|
|
this.$message.success('移除成功') |
|
|
|
@ -197,13 +275,19 @@ export default { |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
this.scannedLabels = [] |
|
|
|
sessionStorage.setItem('outsourcingDirectIssueList_shouldRestore', 'true') |
|
|
|
sessionStorage.setItem( |
|
|
|
'outsourcingDirectIssueList_shouldRestore', |
|
|
|
'true' |
|
|
|
) |
|
|
|
this.$router.back() |
|
|
|
this.$message.success('已清空') |
|
|
|
}) |
|
|
|
.catch(() => {}) |
|
|
|
} else { |
|
|
|
sessionStorage.setItem('outsourcingDirectIssueList_shouldRestore', 'true') |
|
|
|
sessionStorage.setItem( |
|
|
|
'outsourcingDirectIssueList_shouldRestore', |
|
|
|
'true' |
|
|
|
) |
|
|
|
this.$router.back() |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -228,6 +312,7 @@ export default { |
|
|
|
warehouseId: l.warehouseId, |
|
|
|
locationId: l.locationId, |
|
|
|
materialCode: l.componentPartNo, |
|
|
|
height: l.height, |
|
|
|
wdrNo: l.wdrNo, |
|
|
|
engCngLevel: l.engChgLevel || '1', |
|
|
|
})), |
|
|
|
@ -236,8 +321,23 @@ export default { |
|
|
|
confirmOutsourcingDirectIssue(params) |
|
|
|
.then(({ data }) => { |
|
|
|
if (data && data.code === 0) { |
|
|
|
if (this.isPrint && data.unitIds.length > 0) { |
|
|
|
let printLabelType |
|
|
|
if ( |
|
|
|
this.componentPartNo && |
|
|
|
this.componentPartNo.startsWith('80') |
|
|
|
) { |
|
|
|
printLabelType = '库存成品标签' |
|
|
|
} else { |
|
|
|
printLabelType = 'BIL标签' |
|
|
|
} |
|
|
|
this.printViaServer(data.unitIds, printLabelType) |
|
|
|
} |
|
|
|
this.$message.success('委外发料成功') |
|
|
|
sessionStorage.setItem('outsourcingDirectIssueList_shouldRestore', 'true') |
|
|
|
sessionStorage.setItem( |
|
|
|
'outsourcingDirectIssueList_shouldRestore', |
|
|
|
'true' |
|
|
|
) |
|
|
|
this.$router.back() |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg || '委外发料失败') |
|
|
|
@ -245,33 +345,114 @@ export default { |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.$message.error('委外发料失败') |
|
|
|
}).finally(()=>{ |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
this.loading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
async printViaServer(unitIds, printLabelType) { |
|
|
|
if (!unitIds || unitIds.length === 0) { |
|
|
|
console.warn('没有可打印的标签') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.printLoading = true |
|
|
|
|
|
|
|
try { |
|
|
|
const printRequest = { |
|
|
|
userId: localStorage.getItem('userName'), |
|
|
|
username: localStorage.getItem('userName'), |
|
|
|
site: localStorage.getItem('site'), |
|
|
|
unitIds: unitIds, |
|
|
|
labelType: printLabelType, |
|
|
|
} |
|
|
|
console.log('打印请求:', printRequest) |
|
|
|
|
|
|
|
const { data } = await printLabelCommon(printRequest) |
|
|
|
|
|
|
|
if (data.code === 200 || data.code === 0) { |
|
|
|
this.$message.success(`打印任务已发送！`) |
|
|
|
this.clearData() |
|
|
|
} else { |
|
|
|
this.$message.error(data.msg || '打印失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('服务器打印失败:', error) |
|
|
|
this.$message.error(`打印失败: ${error.message || error}`) |
|
|
|
} finally { |
|
|
|
this.printLoading = false |
|
|
|
} |
|
|
|
}, |
|
|
|
handleLabelClick(label, index) { |
|
|
|
this.currentEditLabel = { ...label } |
|
|
|
this.currentEditIndex = index |
|
|
|
this.editHeight = label.height || 0 |
|
|
|
this.editQuantity = Number(label.quantity) || 0 |
|
|
|
this.quantityDialogVisible = true |
|
|
|
}, |
|
|
|
confirmQuantityChange() { |
|
|
|
if (this.editHeight == null ||this.editHeight === '') { |
|
|
|
this.$message.warning('高度必填！') |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.editQuantity == null || this.editQuantity === '') { |
|
|
|
this.$message.warning('数量必填！') |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.editHeight < 0) { |
|
|
|
this.$message.warning('高度不能小于0') |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.editQuantity <= 0) { |
|
|
|
this.$message.warning('数量必须大于0') |
|
|
|
return |
|
|
|
} |
|
|
|
if ( |
|
|
|
this.currentEditIndex >= 0 && |
|
|
|
this.currentEditIndex < this.scannedLabels.length |
|
|
|
) { |
|
|
|
this.$set( |
|
|
|
this.scannedLabels[this.currentEditIndex], |
|
|
|
'quantity', |
|
|
|
this.editQuantity |
|
|
|
) |
|
|
|
this.$set( |
|
|
|
this.scannedLabels[this.currentEditIndex], |
|
|
|
'height', |
|
|
|
this.editHeight |
|
|
|
) |
|
|
|
this.$message.success('数量修改成功') |
|
|
|
this.quantityDialogVisible = false |
|
|
|
} |
|
|
|
}, |
|
|
|
initFromRoute() { |
|
|
|
this.outsourcingNo = this.$route.query.outsourcingNo |
|
|
|
this.partNo = this.$route.query.partNo |
|
|
|
|
|
|
|
|
|
|
|
// 如果存在发料记录信息，从中获取详细信息 |
|
|
|
const issueRecord = this.$route.query.issueRecord |
|
|
|
if (issueRecord) { |
|
|
|
this.componentPartNo = issueRecord.componentPartNo |
|
|
|
this.componentPartDesc = issueRecord.componentPartDescription || '' |
|
|
|
this.requiredQty = Number(issueRecord.requiredQty || this.$route.query.requiredQty || 0) |
|
|
|
this.requiredQty = Number( |
|
|
|
issueRecord.requiredQty || this.$route.query.requiredQty || 0 |
|
|
|
) |
|
|
|
this.issuedQty = Number(issueRecord.issuedQty || 0) |
|
|
|
this.releaseNo = issueRecord.releaseNo |
|
|
|
this.lineNo = issueRecord.lineNo |
|
|
|
this.itemNo = issueRecord.lineItemNo |
|
|
|
this.batchNo = issueRecord.batchNo |
|
|
|
} else { |
|
|
|
// 兼容旧的参数结构 |
|
|
|
this.componentPartNo = issueRecord.componentPartNo |
|
|
|
this.componentPartDesc = this.$route.query.componentPartDescription || '' |
|
|
|
this.componentPartDesc = |
|
|
|
this.$route.query.componentPartDescription || '' |
|
|
|
this.requiredQty = Number(this.$route.query.requiredQty || 0) |
|
|
|
this.issuedQty = Number(this.$route.query.issuedQty || 0) |
|
|
|
this.releaseNo = this.$route.query.releaseNo |
|
|
|
this.lineNo = this.$route.query.lineNo |
|
|
|
this.itemNo = this.$route.query.lineItemNo |
|
|
|
this.releaseNo = this.$route.query.releaseNo |
|
|
|
this.lineNo = this.$route.query.lineNo |
|
|
|
this.itemNo = this.$route.query.lineItemNo |
|
|
|
this.batchNo = this.$route.query.batchNo |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -293,6 +474,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
background: #f5f5f5; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.header-bar { |
|
|
|
display: flex; |
|
|
|
@ -323,6 +505,11 @@ export default { |
|
|
|
.search-container { |
|
|
|
padding: 12px 16px; |
|
|
|
background: white; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
.search-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 12px; |
|
|
|
@ -393,14 +580,25 @@ export default { |
|
|
|
width: 60px; |
|
|
|
height: 28px; |
|
|
|
} |
|
|
|
.work-order-list { |
|
|
|
.print-checkbox { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.print-checkbox ::v-deep .el-checkbox__label { |
|
|
|
font-size: 14px; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
.scroll-area { |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
min-height: 0; |
|
|
|
} |
|
|
|
.work-order-list { |
|
|
|
padding: 12px 16px; |
|
|
|
} |
|
|
|
.work-order-card { |
|
|
|
background: white; |
|
|
|
border-radius: 8px; |
|
|
|
margin-bottom: 12px; |
|
|
|
padding: 16px; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
cursor: pointer; |
|
|
|
@ -442,7 +640,7 @@ export default { |
|
|
|
margin: 0 10px; |
|
|
|
margin-top: 4px; |
|
|
|
border-radius: 8px 8px 0 0; |
|
|
|
border-bottom: 2px solid #17B3A3; |
|
|
|
border-bottom: 2px solid #17b3a3; |
|
|
|
} |
|
|
|
.part-desc-row { |
|
|
|
margin-bottom: 12px; |
|
|
|
@ -479,51 +677,198 @@ export default { |
|
|
|
line-height: 1.2; |
|
|
|
margin-left: -12px; |
|
|
|
} |
|
|
|
.label-list { |
|
|
|
.label-card-container { |
|
|
|
padding: 0 8px 8px; |
|
|
|
background: #f5f5f5; |
|
|
|
} |
|
|
|
.label-card { |
|
|
|
background: white; |
|
|
|
margin: 0 10px 12px; |
|
|
|
border-radius: 8px; |
|
|
|
overflow: hidden; |
|
|
|
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; |
|
|
|
} |
|
|
|
.list-header { |
|
|
|
.label-card:active { |
|
|
|
transform: scale(0.98); |
|
|
|
} |
|
|
|
.card-content { |
|
|
|
} |
|
|
|
.card-row { |
|
|
|
display: flex; |
|
|
|
background: #f8f9fa; |
|
|
|
padding: 12px 8px; |
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
font-size: 12px; |
|
|
|
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: 600; |
|
|
|
} |
|
|
|
.edit-icon { |
|
|
|
margin-left: 8px; |
|
|
|
color: #17b3a3; |
|
|
|
font-size: 14px; |
|
|
|
cursor: pointer; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.edit-icon:hover { |
|
|
|
color: #13998c; |
|
|
|
} |
|
|
|
.edit-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
z-index: 9999; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
.edit-modal { |
|
|
|
background: white; |
|
|
|
border-radius: 12px; |
|
|
|
width: 100%; |
|
|
|
max-width: 400px; |
|
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
.edit-modal .modal-header { |
|
|
|
background: #17b3a3; |
|
|
|
color: white; |
|
|
|
padding: 12px 16px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.edit-modal .modal-title { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
.list-item { |
|
|
|
.edit-modal .close-btn { |
|
|
|
font-size: 16px; |
|
|
|
cursor: pointer; |
|
|
|
color: white; |
|
|
|
transition: color 0.2s ease; |
|
|
|
padding: 4px; |
|
|
|
display: flex; |
|
|
|
padding: 12px 8px; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
font-size: 12px; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.edit-modal .close-btn:hover { |
|
|
|
color: #e0e0e0; |
|
|
|
} |
|
|
|
.edit-modal .modal-body { |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
.edit-modal .form-group { |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
.edit-modal .form-group:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.edit-modal .form-label { |
|
|
|
display: block; |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
align-items: flex-start; |
|
|
|
min-height: 40px; |
|
|
|
margin-bottom: 6px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
.list-item:last-child { |
|
|
|
border-bottom: none; |
|
|
|
.edit-modal .form-input { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.col-no { |
|
|
|
width: 20px; |
|
|
|
text-align: center; |
|
|
|
.edit-modal .form-input ::v-deep .el-input__inner { |
|
|
|
height: 40px; |
|
|
|
border: 2px solid #dcdfe6; |
|
|
|
border-radius: 6px; |
|
|
|
font-size: 14px; |
|
|
|
padding: 0 12px; |
|
|
|
} |
|
|
|
.col-label { |
|
|
|
flex: 1.5; |
|
|
|
text-align: center; |
|
|
|
word-break: break-all; |
|
|
|
white-space: normal; |
|
|
|
line-height: 1.2; |
|
|
|
.edit-modal .form-input ::v-deep .el-input__inner:focus { |
|
|
|
border-color: #17b3a3; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
.col-batch { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
.edit-modal .form-input ::v-deep .el-input__inner:disabled { |
|
|
|
background: #f5f7fa; |
|
|
|
color: #c0c4cc; |
|
|
|
border-color: #e4e7ed; |
|
|
|
} |
|
|
|
.col-qty { |
|
|
|
width: 60px; |
|
|
|
text-align: center; |
|
|
|
.edit-modal .form-input ::v-deep .el-input-number { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.edit-modal .form-input ::v-deep .el-input-number .el-input__inner { |
|
|
|
height: 40px; |
|
|
|
border: 2px solid #dcdfe6; |
|
|
|
border-radius: 6px; |
|
|
|
font-size: 14px; |
|
|
|
padding: 0 12px; |
|
|
|
} |
|
|
|
.edit-modal .form-input ::v-deep .el-input-number .el-input__inner:focus { |
|
|
|
border-color: #17b3a3; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
.edit-modal .modal-footer { |
|
|
|
padding: 16px 20px; |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
justify-content: flex-end; |
|
|
|
border-top: 1px solid #f0f0f0; |
|
|
|
} |
|
|
|
.edit-modal .btn-cancel { |
|
|
|
padding: 10px 20px; |
|
|
|
border-radius: 6px; |
|
|
|
font-size: 14px; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.2s; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
background: white; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
.edit-modal .btn-cancel:hover { |
|
|
|
background: #f5f7fa; |
|
|
|
border-color: #c0c4cc; |
|
|
|
} |
|
|
|
.edit-modal .btn-confirm { |
|
|
|
padding: 10px 20px; |
|
|
|
border-radius: 6px; |
|
|
|
font-size: 14px; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.2s; |
|
|
|
border: 1px solid #17b3a3; |
|
|
|
background: #17b3a3; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.edit-modal .btn-confirm:hover { |
|
|
|
background: #13998c; |
|
|
|
border-color: #13998c; |
|
|
|
} |
|
|
|
.empty-labels { |
|
|
|
padding: 40px 20px; |
|
|
|
@ -537,6 +882,9 @@ export default { |
|
|
|
background: white; |
|
|
|
margin-top: auto; |
|
|
|
} |
|
|
|
.edit-modal .required { |
|
|
|
color: #ff4949; |
|
|
|
} |
|
|
|
.action-btn { |
|
|
|
flex: 1; |
|
|
|
padding: 12px; |
|
|
|
@ -556,13 +904,30 @@ export default { |
|
|
|
transform: scale(0.98); |
|
|
|
} |
|
|
|
@media (max-width: 360px) { |
|
|
|
.header-bar { padding: 8px 12px; } |
|
|
|
.search-container { padding: 8px 12px; } |
|
|
|
.work-order-list { padding: 8px 12px; } |
|
|
|
.work-order-card { padding: 12px; } |
|
|
|
.card-details { flex-wrap: wrap; gap: 6px; } |
|
|
|
.detail-item { flex: 0 0 48%; margin-bottom: 6px; min-width: 50px; } |
|
|
|
.label-list { margin: 0 12px 8px; } |
|
|
|
.header-bar { |
|
|
|
padding: 8px 12px; |
|
|
|
} |
|
|
|
.search-container { |
|
|
|
padding: 8px 12px; |
|
|
|
} |
|
|
|
.work-order-list { |
|
|
|
padding: 8px 12px; |
|
|
|
} |
|
|
|
.work-order-card { |
|
|
|
padding: 12px; |
|
|
|
} |
|
|
|
.card-details { |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 6px; |
|
|
|
} |
|
|
|
.detail-item { |
|
|
|
flex: 0 0 48%; |
|
|
|
margin-bottom: 6px; |
|
|
|
min-width: 50px; |
|
|
|
} |
|
|
|
.label-list { |
|
|
|
margin: 0 12px 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
