Browse Source

2025-10-28

pda生产领退料
master
fengyuan_yang 3 months ago
parent
commit
3a91b0b07c
  1. 47
      src/api/production/production-issue-return.js
  2. 10
      src/router/index.js
  3. 10
      src/views/main.vue
  4. 732
      src/views/modules/production/productionIssueReturnDetail.vue
  5. 399
      src/views/modules/production/productionIssueReturnList.vue

47
src/api/production/production-issue-return.js

@ -0,0 +1,47 @@
import http from '@/utils/httpRequest'
/**
* 搜索领料工单模糊查询返回top3
*/
export function searchIssueOrders(data) {
return http({
url: http.adornUrl('/production/issueReturn/searchOrders'),
method: 'post',
data: http.adornData(data)
})
}
/**
* 获取工单详情包括工序信息
*/
export function getOrderDetail(data) {
return http({
url: http.adornUrl('/production/issueReturn/getOrderDetail'),
method: 'post',
data: http.adornData(data)
})
}
/**
* 扫描标签获取信息
*/
export function scanLabel(data) {
return http({
url: http.adornUrl('/production/issueReturn/scanLabel'),
method: 'post',
data: http.adornData(data)
})
}
/**
* 提交生产领退料
* 包含退仓+领料申请+过账+回传ERP
*/
export function submitIssueReturn(data) {
return http({
url: http.adornUrl('/production/issueReturn/submit'),
method: 'post',
data: http.adornData(data)
})
}

10
src/router/index.js

@ -76,6 +76,16 @@ const globalRoutes = [
component: resolve => require(["@/views/modules/production/productionReturnStorage.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true } component: resolve => require(["@/views/modules/production/productionReturnStorage.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true }
}, },
// 生产领退料
{
path: "/productionIssueReturn", name: "productionIssueReturn",
component: resolve => require(["@/views/modules/production/productionIssueReturnList.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true }
},
{
path: "/productionIssueReturnDetail/:buNo/:inboundNo", name: "productionIssueReturnDetail",
component: resolve => require(["@/views/modules/production/productionIssueReturnDetail.vue"], resolve), meta: { transition: 'instant', preload: true, keepAlive: true }
},
// 销售出库 // 销售出库
{ {
path: "/salesOutbound", name: "salesOutbound", path: "/salesOutbound", name: "salesOutbound",

10
src/views/main.vue

@ -145,6 +145,12 @@
</div> </div>
<div class="menu-text">货位移动</div> <div class="menu-text">货位移动</div>
</div> </div>
<div class="menu-item" @click="navigateWithWarehouseCheck('productionIssueReturn')">
<div class="menu-icon production-issue-return">
<van-icon name="exchange" size="24" />
</div>
<div class="menu-text">生产领退料</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -606,6 +612,10 @@ export default {
background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%); background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
} }
.menu-icon.production-issue-return {
background: linear-gradient(135deg, #17B3A3 0%, #1dc5ef 100%);
}
.menu-text { .menu-text {
font-size: 11px; font-size: 11px;
color: #333; color: #333;

732
src/views/modules/production/productionIssueReturnDetail.vue

@ -0,0 +1,732 @@
<template>
<div class="pda-container">
<!-- 头部栏 -->
<div class="header-bar">
<div class="header-left" @click="$router.back()">
<i class="el-icon-arrow-left"></i>
<span>生产领退料</span>
</div>
<div class="header-right" @click="$router.push({ path: '/' })">
首页
</div>
</div>
<!-- 搜索框 -->
<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>
</div>
<!-- 信息卡片 -->
<div class="material-info-card">
<!-- 第一行退库工单 + 空白输入框 -->
<div class="card-info-row">
<div class="info-item" style="flex: 0 0 70%;">
<span class="info-label">退库工单</span>
<span class="info-value">{{ returnOrderNo }}</span>
</div>
<div class="info-item" style="flex: 0 0 25%;">
<el-input
v-model="blankInput"
placeholder="不允许编辑"
disabled
style="width: 100%;">
</el-input>
</div>
</div>
<!-- 第二行领料工单 + 工序 -->
<div class="card-info-row">
<div class="info-item" style="flex: 0 0 70%;">
<span class="info-label">领料工单</span>
<el-select
v-model="issueOrderNo"
filterable
remote
reserve-keyword
placeholder="请选择领料工单 下拉选择TOP3"
:remote-method="searchIssueOrder"
:loading="orderSearchLoading"
@change="handleIssueOrderChange"
style="width: 100%;">
<el-option
v-for="item in issueOrderOptions"
:key="item.orderNo"
:label="item.orderNo"
:value="item.orderNo">
<span style="float: left">{{ item.orderNo }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.partNo }}</span>
</el-option>
</el-select>
</div>
<div class="info-item" style="flex: 0 0 25%;">
<el-select
v-model="operationSeq"
placeholder="工序"
@change="handleOperationChange"
style="width: 100%;">
<el-option
v-for="item in operationOptions"
:key="item.seqNo"
:label="item.operationName"
:value="item.seqNo">
</el-option>
</el-select>
</div>
</div>
<!-- 第三行备注说明 -->
<div class="card-info-row">
<div class="info-item full-width">
<span class="info-label">备注说明</span>
<el-input
v-model="remark"
placeholder="请输入备注"
style="width: 100%;">
</el-input>
</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-part">物料编码</div>
<div class="col-qty">标签数量</div>
</div>
<div class="list-body">
<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-qty">{{ label.quantity }}</div>
</div>
<!-- 空状态 -->
<div v-if="labelList.length === 0" class="empty-labels">
<p>暂无扫描标签</p>
</div>
</div>
</div>
<!-- 底部操作按钮 -->
<div class="bottom-actions">
<button class="action-btn secondary" @click="confirmIssueReturn">
确定
</button>
<button class="action-btn secondary" style="margin-left: 10px;" @click="printLabels">
打印
</button>
<button class="action-btn secondary" style="margin-left: 10px;" @click="cancelOperation">
取消
</button>
</div>
</div>
</template>
<script>
import { getCurrentWarehouse } from '@/utils'
import moment from 'moment'
import { searchIssueOrders, getOrderDetail, scanLabel, submitIssueReturn } from '@/api/production/production-issue-return.js'
export default {
data() {
return {
scanCode: '',
isRemoveMode: false,
returnOrderNo: '', // 退
blankInput: '', //
issueOrderNo: '', //
operationSeq: '', //
operationName: '', //
remark: '', //
labelList: [], //
issueOrderOptions: [], //
operationOptions: [], //
orderSearchLoading: false,
selectedIssueOrder: null, //
submitting: false //
}
},
mounted() {
// 退
if (this.$route.query.inboundNo) {
this.returnOrderNo = this.$route.query.inboundNo
}
// 退
if (!this.returnOrderNo) {
this.$message.error('缺少退库工单信息')
this.$router.back()
return
}
//
this.$nextTick(() => {
if (this.$refs.scanInput) {
this.$refs.scanInput.focus()
}
})
},
methods: {
//
handleScan() {
if (!this.scanCode.trim()) {
return
}
if (this.isRemoveMode) {
this.removeLabel(this.scanCode.trim())
} else {
this.addLabel(this.scanCode.trim())
}
this.scanCode = ''
},
//
addLabel(labelCode) {
//
const exists = this.labelList.find(item => item.labelCode === labelCode)
if (exists) {
this.$message.warning('该标签已扫描')
return
}
const currentWarehouse = getCurrentWarehouse()
if (!currentWarehouse) {
this.$message.error('请先选择仓库')
return
}
//
const params = {
site: localStorage.getItem('site'),
buNo: localStorage.getItem('buNo'),
warehouseId: currentWarehouse,
labelCode: labelCode
}
scanLabel(params).then(({ data }) => {
if (data && data.code === 0 && data.labelInfo) {
const newLabel = {
id: Date.now(),
labelCode: labelCode,
partNo: data.labelInfo.partNo,
partDesc: data.labelInfo.partDesc,
quantity: data.labelInfo.quantity,
rollNo: data.labelInfo.rollNo,
warehouseId: data.labelInfo.warehouseId,
locationId: data.labelInfo.locationId
}
this.labelList.unshift(newLabel)
this.$message.success('标签添加成功')
} else {
this.$message.error(data.msg || '标签信息获取失败')
}
}).catch(error => {
console.error('扫描标签失败:', error)
this.$message.error('标签信息获取失败')
})
},
//
removeLabel(labelCode) {
const index = this.labelList.findIndex(item => item.labelCode === labelCode)
if (index === -1) {
this.$message.warning('未找到该标签')
return
}
this.labelList.splice(index, 1)
this.$message.success('标签移除成功')
},
// top3
searchIssueOrder(query) {
if (!query) {
this.issueOrderOptions = []
return
}
this.orderSearchLoading = true
const params = {
site: localStorage.getItem('site'),
buNo: localStorage.getItem('buNo'),
searchKey: query,
limit: 3 // top3
}
searchIssueOrders(params).then(({ data }) => {
this.orderSearchLoading = false
if (data && data.code === 0) {
this.issueOrderOptions = data.orders || []
} else {
this.issueOrderOptions = []
this.$message.error(data.msg || '搜索工单失败')
}
}).catch(error => {
this.orderSearchLoading = false
console.error('搜索工单失败:', error)
this.$message.error('搜索工单失败')
})
},
//
handleIssueOrderChange(value) {
const selected = this.issueOrderOptions.find(item => item.orderNo === value)
if (selected) {
this.selectedIssueOrder = selected
//
this.operationSeq = ''
this.operationName = ''
this.operationOptions = []
//
this.loadOperationList(value)
}
},
// PC
loadOperationList(orderNo) {
const params = {
site: localStorage.getItem('site'),
buNo: localStorage.getItem('buNo'),
orderNo: orderNo
}
getOrderDetail(params).then(({ data }) => {
if (data && data.code === 0 && data.operations) {
//
this.operationOptions = data.operations || []
//
if (this.operationOptions.length === 1) {
this.operationSeq = this.operationOptions[0].seqNo
this.operationName = this.operationOptions[0].operationName
}
} else {
this.$message.error(data.msg || '获取工序列表失败')
}
}).catch(error => {
console.error('获取工序列表失败:', error)
this.$message.error('获取工序列表失败')
})
},
//
handleOperationChange(value) {
const selected = this.operationOptions.find(item => item.seqNo === value)
if (selected) {
this.operationName = selected.operationName
}
},
// 退+
confirmIssueReturn() {
//
if (this.labelList.length === 0) {
this.$message.warning('请先扫描标签')
return
}
if (!this.issueOrderNo) {
this.$message.warning('请选择领料工单')
return
}
if (!this.operationSeq || !this.operationName) {
this.$message.warning('请选择工序')
return
}
this.$confirm('确认提交生产领退料?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.submitIssueReturn()
}).catch(() => {
//
})
},
// 退
submitIssueReturn() {
const currentWarehouse = getCurrentWarehouse()
if (!currentWarehouse) {
this.$message.error('请先选择仓库')
return
}
if (this.submitting) {
return
}
this.submitting = true
const params = {
site: localStorage.getItem('site'),
buNo: localStorage.getItem('buNo'),
warehouseId: currentWarehouse,
userName: localStorage.getItem('userName'),
returnOrderNo: this.returnOrderNo,
issueOrderNo: this.issueOrderNo,
operationSeq: this.operationSeq,
operationName: this.operationName,
remark: this.remark,
labelList: this.labelList.map(label => ({
labelCode: label.labelCode,
rollNo: label.rollNo,
partNo: label.partNo,
partDesc: label.partDesc,
quantity: label.quantity,
warehouseId: label.warehouseId,
locationId: label.locationId
}))
}
// 退+++ERP
submitIssueReturn(params).then(({ data }) => {
this.submitting = false
if (data && data.code === 0) {
this.$message.success('提交成功')
//
setTimeout(() => {
this.$router.back()
}, 1000)
} else {
this.$message.error(data.msg || '提交失败')
}
}).catch(error => {
this.submitting = false
console.error('提交失败:', error)
this.$message.error('提交失败,请稍后重试')
})
},
//
printLabels() {
if (this.labelList.length === 0) {
this.$message.warning('暂无可打印的标签')
return
}
this.$message.info('打印功能开发中')
},
//
cancelOperation() {
this.$confirm('确认取消当前操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$router.back()
}).catch(() => {
//
})
}
}
}
</script>
<style scoped>
/* 基础容器 */
.pda-container {
min-height: 100vh;
background: #f5f7fa;
display: flex;
flex-direction: column;
}
/* 头部栏 */
.header-bar {
background: #17B3A3;
color: white;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
cursor: pointer;
}
.header-left i {
font-size: 20px;
margin-right: 8px;
}
.header-left span {
font-size: 16px;
font-weight: bold;
}
.header-right {
font-size: 14px;
cursor: pointer;
padding: 4px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.2);
}
/* 搜索容器 */
.search-container {
padding: 12px 16px;
background: white;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.compact-input {
flex: 1;
}
.mode-switch {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.switch-text, .switch-text2 {
font-size: 13px;
font-weight: bold;
}
.switch-text {
color: #ff4949;
}
.switch-text2 {
color: #13ce66;
}
/* 物料信息卡片 */
.material-info-card {
background: white;
margin: 4px 16px;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #f0f0f0;
}
/* 卡片信息行 */
.card-info-row {
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.card-info-row:last-child {
margin-bottom: 0;
}
.info-item {
display: flex;
align-items: baseline;
flex: 0 0 auto;
max-width: 100%;
}
.info-item.full-width {
flex: 1 1 100%;
}
.info-item.half-width {
flex: 1 1 48%;
min-width: 48%;
}
.info-label {
font-size: 13px;
color: #666;
white-space: nowrap;
margin-right: 8px;
min-width: 70px;
}
.info-value {
font-size: 14px;
color: #333;
font-weight: 500;
word-break: break-all;
line-height: 1.4;
flex: 1;
}
/* 区域标题 */
.section-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: white;
margin: 4px 16px 0;
border-radius: 8px 8px 0 0;
border-bottom: 2px solid #17B3A3;
}
.title-left {
display: flex;
align-items: center;
}
.title-left i {
color: #17B3A3;
font-size: 16px;
margin-right: 8px;
}
.title-left span {
font-size: 14px;
font-weight: bold;
color: #17B3A3;
}
/* 标签列表 */
.label-list {
background: white;
margin: 0 16px 80px;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.list-header {
display: flex;
background: #f5f7fa;
padding: 10px 8px;
font-size: 12px;
font-weight: bold;
color: #666;
border-bottom: 1px solid #e0e0e0;
}
.list-body {
max-height: 400px;
overflow-y: auto;
}
.list-item {
display: flex;
padding: 12px 8px;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.list-item:last-child {
border-bottom: none;
}
.col-no {
width: 50px;
text-align: center;
flex-shrink: 0;
}
.col-label {
flex: 1;
min-width: 0;
padding: 0 8px;
word-break: break-all;
}
.col-part {
width: 100px;
padding: 0 8px;
text-align: left;
}
.col-qty {
width: 80px;
text-align: right;
padding-right: 8px;
}
.empty-labels {
padding: 40px 20px;
text-align: center;
color: #999;
}
/* 底部操作按钮 */
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px 16px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
z-index: 99;
}
.action-btn {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.action-btn.secondary {
background: #17B3A3;
color: white;
}
.action-btn.secondary:active {
transform: scale(0.98);
opacity: 0.9;
}
</style>

399
src/views/modules/production/productionIssueReturnList.vue

@ -0,0 +1,399 @@
<template>
<div class="pda-container">
<!-- 头部栏 -->
<div class="header-bar">
<div class="header-left" @click="$router.back()">
<i class="el-icon-arrow-left"></i>
<span>生产领退料</span>
</div>
<div class="header-right" @click="$router.push({ path: '/' })">
首页
</div>
</div>
<!-- 搜索框 -->
<div class="search-container">
<el-input clearable
v-model="searchCode"
placeholder="请扫描入库单或标签条码"
prefix-icon="el-icon-search"
@keyup.enter.native="handleSearch"
ref="searchInput"
/>
</div>
<!-- 物料列表 -->
<div class="content-area">
<div
v-for="(item, index) in qualifiedList"
:key="index"
class="inbound-card"
@click="goToDetailPage(item)"
>
<div class="card-title">
<span class="title-label">生产订单</span>
<span class="title-value">{{ item.inboundNo }}</span>
</div>
<div class="card-info-row">
<div class="info-item">
<span class="info-label">物料编码</span>
<span class="info-value">{{ item.partNo }}</span>
</div>
</div>
<div class="card-info-row">
<div class="info-item full-width">
<span class="info-label">物料名称</span>
<span class="info-value">{{ item.partDesc }}</span>
</div>
</div>
<div class="card-info-row">
<div class="info-item">
<span class="info-label">订单数量</span>
<span class="info-value highlight">{{ item.lotSize }}</span>
</div>
</div>
</div>
<!-- 空状态 -->
<div v-if="qualifiedList.length === 0 && !loading" class="empty-state">
<i class="el-icon-box"></i>
<p>暂无生产待退仓物料</p>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-state">
<i class="el-icon-loading"></i>
<p>加载中...</p>
</div>
</div>
</div>
</template>
<script>
import { getQualifiedReturnList } from "@/api/production/production-return2.js";
import { getCurrentWarehouse } from '@/utils'
import moment from 'moment';
export default {
data() {
return {
searchCode: '',
qualifiedList: [],
loading: false
};
},
methods: {
formatDate(date) {
return date ? moment(date).format('YYYY-MM-DD') : '';
},
//
handleSearch() {
if (this.searchCode.trim()) {
this.searchQualifiedList(this.searchCode.trim());
} else {
this.loadQualifiedList();
}
},
// 退
loadQualifiedList() {
const currentWarehouse = getCurrentWarehouse();
if (!currentWarehouse) {
this.$message.error('请先选择仓库');
return;
}
this.loading = true;
const params = {
warehouseId: currentWarehouse,
site: localStorage.getItem('site'),
status: '待入库', //
};
getQualifiedReturnList(params).then(({ data }) => {
this.loading = false;
if (data && data.code === 0) {
this.qualifiedList = data.data || [];
} else {
this.$message.error(data.msg || '获取数据失败');
}
}).catch(error => {
this.loading = false;
console.error('获取生产待退仓列表失败:', error);
this.$message.error('获取数据失败');
});
},
//
searchQualifiedList(searchCode) {
const currentWarehouse = getCurrentWarehouse();
if (!currentWarehouse) {
this.$message.error('请先选择仓库');
return;
}
this.loading = true;
const params = {
warehouseId: currentWarehouse,
searchCode: searchCode,
site: localStorage.getItem('site'),
status: '待入库'
};
getQualifiedReturnList(params).then(({ data }) => {
this.loading = false;
if (data && data.code === 0) {
if (data.data.length === 0) {
this.$message.warning('未找到匹配的入库单');
}
this.qualifiedList = data.data || [];
} else {
this.$message.error(data.msg || '查询失败');
}
}).catch(error => {
this.loading = false;
console.error('搜索失败:', error);
this.$message.error('查询失败');
});
},
// 退
goToDetailPage(item) {
this.$router.push({
name: 'productionIssueReturnDetail',
params: {
buNo: item.buNo,
inboundNo: item.inboundNo
},
query: {
inboundNo: item.inboundNo,
buNo: item.buNo,
partNo: item.partNo,
partDesc: item.partDesc,
lotSize: item.lotSize
}
});
}
},
mounted() {
//
this.$nextTick(() => {
if (this.$refs.searchInput) {
this.$refs.searchInput.focus();
}
});
//
this.loadQualifiedList();
}
};
</script>
<style scoped>
.pda-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
background: #f5f5f5;
}
/* 头部栏 */
.header-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: #17B3A3;
color: white;
height: 40px;
min-height: 40px;
}
.header-left {
display: flex;
align-items: center;
cursor: pointer;
font-size: 16px;
font-weight: 500;
}
.header-left i {
margin-right: 8px;
font-size: 18px;
}
.header-right {
cursor: pointer;
font-size: 16px;
font-weight: 500;
}
/* 搜索容器 */
.search-container {
padding: 12px 16px;
background: white;
}
/* 内容区域 */
.content-area {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
}
/* 入库卡片 */
.inbound-card {
background: white;
border-radius: 8px;
margin-bottom: 12px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s ease;
}
.inbound-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.inbound-card:active {
transform: translateY(0);
}
/* 卡片标题 */
.card-title {
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
.title-label {
font-size: 12px;
color: #666;
display: block;
margin-bottom: 4px;
}
.title-value {
font-size: 16px;
font-weight: bold;
color: #333;
margin-left: 20px;
}
/* 卡片信息行 */
.card-info-row {
margin-bottom: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.card-info-row:last-child {
margin-bottom: 0;
}
.info-item {
display: flex;
align-items: baseline;
flex: 0 0 auto;
max-width: 100%;
}
.info-item.full-width {
flex: 1 1 100%;
}
.info-label {
font-size: 12px;
color: #666;
white-space: nowrap;
margin-right: 4px;
}
.info-value {
font-size: 13px;
color: #333;
font-weight: 500;
word-break: break-all;
line-height: 1.4;
}
.info-value.highlight {
color: #17B3A3;
font-weight: bold;
font-size: 14px;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #999;
}
.empty-state i {
font-size: 48px;
margin-bottom: 16px;
}
.empty-state p {
font-size: 14px;
margin: 0;
}
/* 加载状态 */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #17B3A3;
}
.loading-state i {
font-size: 24px;
margin-bottom: 12px;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading-state p {
font-size: 14px;
margin: 0;
}
/* 响应式设计 */
@media (max-width: 360px) {
.header-bar {
padding: 8px 12px;
}
.search-container {
padding: 8px 12px;
}
.content-area {
padding: 8px 12px;
}
.inbound-card {
padding: 12px;
}
}
</style>
Loading…
Cancel
Save