xuan
084bb235f8
- 在http.api.js中添加坯布库存接口前缀和相关API定义 - 更新工作台页面，将坯布库存菜单链接到新的库存查询页面 - 在pages.json中注册坯布库存相关的三个新页面路由 - 创建storeFabricWarehouse.js文件，包含库存查询的常量、格式化函数和参数处理逻辑 - 新增storeFabricWarehouseDetail.vue页面，实现细码明细查看功能 - 添加storeFabricWarehouseGroupList.vue页面，实现坯布库存汇总查询 - 创建storeFabricWarehouseStockList.vue页面，实现库存维度汇总功能 - 新增storeFabricWarehouseGroupItem.vue和storeFabricWarehouseStockItem.vue组件，用于显示库存卡片 - 添加WarehouseDataTable.vue组件，提供可滚动的表格展示功能
261 lines
6.2 KiB
Vue
261 lines
6.2 KiB
Vue
<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>
|