feat(storefabric): 新增坯布库存管理功能
- 在http.api.js中添加坯布库存接口前缀和相关API定义 - 更新工作台页面，将坯布库存菜单链接到新的库存查询页面 - 在pages.json中注册坯布库存相关的三个新页面路由 - 创建storeFabricWarehouse.js文件，包含库存查询的常量、格式化函数和参数处理逻辑 - 新增storeFabricWarehouseDetail.vue页面，实现细码明细查看功能 - 添加storeFabricWarehouseGroupList.vue页面，实现坯布库存汇总查询 - 创建storeFabricWarehouseStockList.vue页面，实现库存维度汇总功能 - 新增storeFabricWarehouseGroupItem.vue和storeFabricWarehouseStockItem.vue组件，用于显示库存卡片 - 添加WarehouseDataTable.vue组件，提供可滚动的表格展示功能
This commit is contained in:
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="warehouse-detail-page">
|
||||
<view class="infoCard">
|
||||
<view class="infoTitle">坯布资料</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">坯布编号</text>
|
||||
<text class="infoValue">{{ header.grey_fabric_code || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">坯布名称</text>
|
||||
<text class="infoValue">{{ header.grey_fabric_name || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">颜 色</text>
|
||||
<text class="infoValue">{{ header.gray_fabric_color_name || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">织 厂</text>
|
||||
<text class="infoValue">{{ header.supplier_name || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">机 台 号</text>
|
||||
<text class="infoValue">{{ header.machine_number || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">纱 批</text>
|
||||
<text class="infoValue">{{ header.yarn_batch || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">仓 库</text>
|
||||
<text class="infoValue">{{ header.warehouse_name || '-' }}</text>
|
||||
</view>
|
||||
<view class="infoRow">
|
||||
<text class="infoLabel">汇总库存</text>
|
||||
<text class="infoValue">{{ header.stock_roll || '-' }} 匹 / {{ header.stock_weight || '-' }} KG</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="summaryBar">
|
||||
<text>细码：{{ totals.count }} 条 / {{ totals.roll }} 匹 / {{ totals.weight }} KG</text>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
:style="{ height: scrollHeight }"
|
||||
refresher-enabled
|
||||
:refresher-triggered="triggered"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<dataNull
|
||||
v-if="tableRows.length === 0"
|
||||
src="/src/static/img/chahua/gjNull.png"
|
||||
title="暂无细码明细"
|
||||
title1="请返回上一级调整筛选条件"
|
||||
/>
|
||||
<scroll-view v-else scroll-x class="tableScroll">
|
||||
<view class="fineTable" :style="{ width: tableWidth }">
|
||||
<view class="tableRow tableHead">
|
||||
<view
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
class="tableCell headCell"
|
||||
:style="cellStyle(col)"
|
||||
>{{ col.label }}</view>
|
||||
</view>
|
||||
<view v-for="(row, rowIndex) in tableRows" :key="rowIndex" class="tableRow">
|
||||
<view
|
||||
v-for="col in columns"
|
||||
:key="col.key"
|
||||
class="tableCell"
|
||||
:style="cellStyle(col)"
|
||||
>{{ row[col.key] }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
WAREHOUSE_DETAIL_COLUMNS,
|
||||
buildDetailQuery,
|
||||
fetchAllWarehouseList,
|
||||
getWarehouseDetailTableWidth,
|
||||
mapWarehouseDetailRows,
|
||||
parsePageQuery,
|
||||
sumDetailTotals,
|
||||
} from '@/common/storeFabricWarehouse';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rawList: [],
|
||||
scrollHeight: '667px',
|
||||
triggered: false,
|
||||
columns: WAREHOUSE_DETAIL_COLUMNS,
|
||||
header: {
|
||||
grey_fabric_id: '',
|
||||
grey_fabric_code: '',
|
||||
grey_fabric_name: '',
|
||||
gray_fabric_color_name: '',
|
||||
supplier_name: '',
|
||||
machine_number: '',
|
||||
yarn_batch: '',
|
||||
warehouse_name: '',
|
||||
stock_roll: '',
|
||||
stock_weight: '',
|
||||
},
|
||||
queryParams: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableRows() {
|
||||
return mapWarehouseDetailRows(this.rawList);
|
||||
},
|
||||
tableWidth() {
|
||||
return getWarehouseDetailTableWidth(this.columns);
|
||||
},
|
||||
totals() {
|
||||
return sumDetailTotals(this.rawList);
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const parsed = parsePageQuery(options || {});
|
||||
this.header = {
|
||||
grey_fabric_id: parsed.grey_fabric_id || '',
|
||||
grey_fabric_code: parsed.grey_fabric_code || '',
|
||||
grey_fabric_name: parsed.grey_fabric_name || '',
|
||||
gray_fabric_color_name: parsed.gray_fabric_color_name || '',
|
||||
supplier_name: parsed.supplier_name || '',
|
||||
machine_number: parsed.machine_number || '',
|
||||
yarn_batch: parsed.yarn_batch || '',
|
||||
warehouse_name: parsed.warehouse_name || '',
|
||||
stock_roll: parsed.stock_roll || '',
|
||||
stock_weight: parsed.stock_weight || '',
|
||||
};
|
||||
this.queryParams = buildDetailQuery(parsed, parsed);
|
||||
uni.setNavigationBarTitle({ title: '细码明细' });
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.scrollHeight = `${res.windowHeight - 360}px`;
|
||||
},
|
||||
});
|
||||
if (!this.queryParams.grey_fabric_id) {
|
||||
uni.showToast({ title: '缺少坯布参数', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.loadList();
|
||||
},
|
||||
methods: {
|
||||
cellStyle(col) {
|
||||
return {
|
||||
width: `${col.width}rpx`,
|
||||
minWidth: `${col.width}rpx`,
|
||||
maxWidth: `${col.width}rpx`,
|
||||
};
|
||||
},
|
||||
loadList() {
|
||||
fetchAllWarehouseList((p) => this.$u.api.gfmWarehouse.detailList(p), this.queryParams)
|
||||
.then((rows) => {
|
||||
this.triggered = false;
|
||||
this.rawList = rows || [];
|
||||
})
|
||||
.catch((err) => {
|
||||
this.triggered = false;
|
||||
this.rawList = [];
|
||||
uni.showToast({ title: err.message || '加载失败', icon: 'none' });
|
||||
});
|
||||
},
|
||||
onRefresh() {
|
||||
this.triggered = true;
|
||||
this.loadList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page { background-color: #F8F8F8; }
|
||||
.warehouse-detail-page { min-height: 100%; padding-bottom: 24rpx; }
|
||||
.infoCard {
|
||||
margin: 20rpx 24rpx 0;
|
||||
padding: 20rpx 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.infoTitle {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
color: #333;
|
||||
}
|
||||
.infoRow {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
.infoLabel {
|
||||
width: 160rpx;
|
||||
color: #999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.infoValue {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
.summaryBar {
|
||||
margin: 16rpx 24rpx 0;
|
||||
padding: 12rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.tableScroll {
|
||||
width: 100%;
|
||||
margin: 16rpx 24rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fineTable {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1rpx solid #e1e1e1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
border-bottom: 1rpx solid #e1e1e1;
|
||||
}
|
||||
.tableRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.tableHead {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.tableCell {
|
||||
flex-shrink: 0;
|
||||
padding: 12rpx 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
border-right: 1rpx solid #e1e1e1;
|
||||
box-sizing: border-box;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
.tableCell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.headCell {
|
||||
font-weight: bold;
|
||||
color: #3e3e3e;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user