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>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<view class="warehouse-page">
|
||||
<view class="filterBar">
|
||||
<u-search
|
||||
v-model="filters.grey_fabric_code"
|
||||
placeholder="坯布编号"
|
||||
shape="square"
|
||||
:show-action="false"
|
||||
height="64"
|
||||
@search="loadList"
|
||||
@custom="loadList"
|
||||
/>
|
||||
<u-search
|
||||
v-model="filters.grey_fabric_name"
|
||||
placeholder="坯布名称"
|
||||
shape="square"
|
||||
:show-action="false"
|
||||
height="64"
|
||||
@search="loadList"
|
||||
@custom="loadList"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="summaryBar">
|
||||
<text>合计：{{ totals.roll }} 匹 / {{ totals.weight }} KG（{{ totals.count }} 条）</text>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
:style="{ height: scrollHeight }"
|
||||
refresher-enabled
|
||||
:refresher-triggered="triggered"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<dataNull
|
||||
v-if="!loading && tableContents.length === 0"
|
||||
src="/src/static/img/chahua/gjNull.png"
|
||||
title="暂无库存汇总"
|
||||
title1="请输入坯布编号或名称查询"
|
||||
/>
|
||||
<view v-else-if="tableContents.length" class="tableBox">
|
||||
<WarehouseDataTable
|
||||
:headers="tableHeaders"
|
||||
:contents="tableContents"
|
||||
:height="tableHeight"
|
||||
@row-click="goStockList"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WarehouseDataTable from '@/components/storefabric/WarehouseDataTable.vue';
|
||||
import {
|
||||
GROUP_TABLE_COLUMNS,
|
||||
buildGroupListQuery,
|
||||
buildStockListNavigateQuery,
|
||||
calcTableHeight,
|
||||
fetchAllWarehouseList,
|
||||
mapGroupTableRow,
|
||||
sumStockTotals,
|
||||
toQueryString,
|
||||
} from '@/common/storeFabricWarehouse';
|
||||
|
||||
export default {
|
||||
components: { WarehouseDataTable },
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
scrollHeight: '667px',
|
||||
triggered: false,
|
||||
loading: false,
|
||||
tableHeaders: GROUP_TABLE_COLUMNS,
|
||||
filters: {
|
||||
grey_fabric_code: '',
|
||||
grey_fabric_name: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableContents() {
|
||||
return this.list.map(mapGroupTableRow);
|
||||
},
|
||||
totals() {
|
||||
return sumStockTotals(this.list);
|
||||
},
|
||||
tableHeight() {
|
||||
return calcTableHeight(this.tableContents.length);
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
uni.setNavigationBarTitle({ title: '坯布库存' });
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.scrollHeight = `${res.windowHeight - 108}px`;
|
||||
},
|
||||
});
|
||||
this.loadList();
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
const params = buildGroupListQuery(this.filters);
|
||||
fetchAllWarehouseList((p) => this.$u.api.gfmWarehouse.groupSummaryList(p), params)
|
||||
.then((rows) => {
|
||||
this.triggered = false;
|
||||
this.list = rows || [];
|
||||
})
|
||||
.catch((err) => {
|
||||
this.triggered = false;
|
||||
this.list = [];
|
||||
uni.showToast({ title: err.message || '加载失败', icon: 'none' });
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
onRefresh() {
|
||||
this.triggered = true;
|
||||
this.loadList();
|
||||
},
|
||||
goStockList(row) {
|
||||
const query = buildStockListNavigateQuery(row);
|
||||
uni.navigateTo({
|
||||
url: `./storeFabricWarehouseStockList?${toQueryString(query)}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page { background-color: #F8F8F8; }
|
||||
.warehouse-page { min-height: 100%; }
|
||||
.filterBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.summaryBar {
|
||||
padding: 10rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.tableBox {
|
||||
padding: 12rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="warehouse-page">
|
||||
<view class="fabricHeader">
|
||||
<view class="fabricCode">{{ context.grey_fabric_code || '-' }}</view>
|
||||
<view class="fabricName">{{ context.grey_fabric_name || '-' }}</view>
|
||||
</view>
|
||||
|
||||
<view class="filterBar">
|
||||
<u-search
|
||||
v-model="filters.machine_number"
|
||||
placeholder="机台号"
|
||||
:show-action="false"
|
||||
@search="loadList"
|
||||
@custom="loadList"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="summaryBar">
|
||||
<text>合计：{{ totals.roll }} 匹 / {{ totals.weight }} KG（{{ totals.count }} 条）</text>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
:style="{ height: scrollHeight }"
|
||||
refresher-enabled
|
||||
:refresher-triggered="triggered"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<dataNull
|
||||
v-if="tableContents.length === 0"
|
||||
src="/src/static/img/chahua/gjNull.png"
|
||||
title="暂无维度汇总"
|
||||
title1="请调整机台号筛选后重试"
|
||||
/>
|
||||
<view v-else class="tableBox">
|
||||
<WarehouseDataTable
|
||||
:headers="tableHeaders"
|
||||
:contents="tableContents"
|
||||
:height="tableHeight"
|
||||
@row-click="goDetail"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WarehouseDataTable from '@/components/storefabric/WarehouseDataTable.vue';
|
||||
import {
|
||||
STOCK_TABLE_COLUMNS,
|
||||
buildDetailNavigateQuery,
|
||||
buildStockListQuery,
|
||||
calcTableHeight,
|
||||
fetchAllWarehouseList,
|
||||
mapStockTableRow,
|
||||
parsePageQuery,
|
||||
sumStockTotals,
|
||||
toQueryString,
|
||||
} from '@/common/storeFabricWarehouse';
|
||||
|
||||
export default {
|
||||
components: { WarehouseDataTable },
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
scrollHeight: '667px',
|
||||
triggered: false,
|
||||
tableHeaders: STOCK_TABLE_COLUMNS,
|
||||
context: {
|
||||
grey_fabric_id: '',
|
||||
grey_fabric_code: '',
|
||||
grey_fabric_name: '',
|
||||
warehouse_id: '',
|
||||
},
|
||||
filters: {
|
||||
machine_number: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableContents() {
|
||||
return this.list.map(mapStockTableRow);
|
||||
},
|
||||
totals() {
|
||||
return sumStockTotals(this.list);
|
||||
},
|
||||
tableHeight() {
|
||||
return calcTableHeight(this.tableContents.length, { maxPx: 9999 });
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const parsed = parsePageQuery(options || {});
|
||||
this.context = {
|
||||
grey_fabric_id: parsed.grey_fabric_id || '',
|
||||
grey_fabric_code: parsed.grey_fabric_code || '',
|
||||
grey_fabric_name: parsed.grey_fabric_name || '',
|
||||
warehouse_id: parsed.warehouse_id || '',
|
||||
};
|
||||
const title = this.context.grey_fabric_name
|
||||
? `${this.context.grey_fabric_name} 库存汇总`
|
||||
: '坯布库存汇总';
|
||||
uni.setNavigationBarTitle({ title });
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.scrollHeight = `${res.windowHeight - 120}px`;
|
||||
},
|
||||
});
|
||||
if (!this.context.grey_fabric_id) {
|
||||
uni.showToast({ title: '缺少坯布参数', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.loadList();
|
||||
},
|
||||
methods: {
|
||||
loadList() {
|
||||
const params = buildStockListQuery(this.filters, this.context);
|
||||
fetchAllWarehouseList((p) => this.$u.api.gfmWarehouse.stockSummaryList(p), params)
|
||||
.then((rows) => {
|
||||
this.triggered = false;
|
||||
this.list = rows || [];
|
||||
})
|
||||
.catch((err) => {
|
||||
this.triggered = false;
|
||||
this.list = [];
|
||||
uni.showToast({ title: err.message || '加载失败', icon: 'none' });
|
||||
});
|
||||
},
|
||||
onRefresh() {
|
||||
this.triggered = true;
|
||||
this.loadList();
|
||||
},
|
||||
goDetail(row) {
|
||||
const query = buildDetailNavigateQuery(row, this.context);
|
||||
uni.navigateTo({
|
||||
url: `./storeFabricWarehouseDetail?${toQueryString(query)}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page { background-color: #F8F8F8; }
|
||||
.warehouse-page { min-height: 100%; }
|
||||
.fabricHeader { padding: 20rpx 24rpx; background: #fff; border-bottom: 1rpx solid #f0f0f0; }
|
||||
.fabricCode { font-size: 30rpx; font-weight: bold; color: #333; }
|
||||
.fabricName { margin-top: 8rpx; font-size: 26rpx; color: #666; }
|
||||
.filterBar { padding: 16rpx 20rpx; background: #fff; }
|
||||
.summaryBar {
|
||||
padding: 12rpx 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.tableBox { padding: 16rpx 12rpx; }
|
||||
</style>
|
||||
@@ -92,24 +92,12 @@
|
||||
</view>
|
||||
<view class="grid-text">坯布出库</view>
|
||||
</u-grid-item>
|
||||
<!-- <u-grid-item @click="navTo('')">-->
|
||||
<!-- <view class="home-icon icon-color12">-->
|
||||
<!-- <i class="iconfont icon-ribao"></i>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="grid-text">坯布盘点</view>-->
|
||||
<!-- </u-grid-item>-->
|
||||
<!-- <u-grid-item @click="navTo('')">-->
|
||||
<!-- <view class="home-icon icon-color04">-->
|
||||
<!-- <i class="iconfont icon-tongzhi"></i>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="grid-text">坯布移架</view>-->
|
||||
<!-- </u-grid-item>-->
|
||||
<!-- <u-grid-item @click="navTo('/pages/storefabric/storefabricstoresearch')">-->
|
||||
<!-- <view class="home-icon icon-color05">-->
|
||||
<!-- <i class="iconfont icon-huiyishi"></i>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="grid-text">坯布库存</view>-->
|
||||
<!-- </u-grid-item>-->
|
||||
<u-grid-item @click="navTo('/pages/storefabric/storeFabricWarehouseGroupList')">
|
||||
<view class="home-icon icon-color05">
|
||||
<i class="iconfont icon-huiyishi"></i>
|
||||
</view>
|
||||
<view class="grid-text">坯布库存</view>
|
||||
</u-grid-item>
|
||||
<!-- <u-grid-item @click="navTo('/pages/storefabric/storefabricstoreallin')">-->
|
||||
<!-- <view class="home-icon icon-color05">-->
|
||||
<!-- <i class="iconfont icon-huiyishi"></i>-->
|
||||
|
||||
Reference in New Issue
Block a user