<template>
|
<view class="report-page">
|
<PageHeader title="库存报表" @back="goBack" />
|
<view class="tabs-wrap">
|
<view
|
v-for="t in reportTypes"
|
:key="t.value"
|
class="tab-item"
|
:class="{ active: searchForm.reportType === t.value }"
|
@click="searchForm.reportType = t.value"
|
>
|
<text>{{ t.label }}</text>
|
</view>
|
</view>
|
<!-- 时间选择区域 -->
|
<view class="search-section">
|
<!-- 日报：选择年月日 -->
|
<view v-if="searchForm.reportType === 'daily'" class="search-row">
|
<view class="date-picker" @click="openDatePicker('single')">
|
<text>{{ searchForm.singleDate || '请选择日期' }}</text>
|
</view>
|
</view>
|
|
<!-- 月报：选择年月 -->
|
<view v-else-if="searchForm.reportType === 'monthly'" class="search-row">
|
<view class="date-picker" @click="openDatePicker('startMonth')">
|
<text>{{ searchForm.startMonth || '请选择开始月份' }}</text>
|
</view>
|
~
|
<view class="date-picker" @click="openDatePicker('endMonth')">
|
<text>{{ searchForm.endMonth || '请选择结束月份' }}</text>
|
</view>
|
</view>
|
|
<!-- 进出存：选择年月日时间范围 -->
|
<view v-else-if="searchForm.reportType === 'inout'" class="search-row">
|
<view class="date-picker" @click="openDatePicker('startDate')">
|
<text>{{ searchForm.startDate || '请选择开始日期' }}</text>
|
</view>
|
~
|
<view class="date-picker" @click="openDatePicker('endDate')">
|
<text>{{ searchForm.endDate || '请选择结束日期' }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="list-section">
|
<view class="section-header">
|
<text class="table-title">{{ tableTitle }}</text>
|
</view>
|
<view v-if="tableData.length > 0">
|
<view v-for="(item, index) in tableData" :key="index" class="card-item">
|
<view class="card-header">
|
<view class="header-main">
|
<text class="product-name">{{ item.productName }}</text>
|
<text class="sub-title">{{ item.model }}</text>
|
</view>
|
</view>
|
<up-divider />
|
<view class="card-body">
|
<view class="row"><text class="l">单位</text><text class="r">{{ item.unit }}</text></view>
|
<view class="row" v-if="searchForm.reportType !== 'inout'"><text class="l">入库时间</text><text class="r">{{ item.createTime }}</text></view>
|
<view class="row" v-if="searchForm.reportType !== 'inout'"><text class="l">入库批次</text><text class="r">{{ item.inboundBatches }}</text></view>
|
<view class="row"><text class="l">入库数量</text><text class="r">{{ item.totalStockIn ?? item.stockInNum }}</text></view>
|
<view class="row" v-if="searchForm.reportType === 'inout'"><text class="l">出库数量</text><text class="r">{{ item.totalStockOut }}</text></view>
|
<view class="row"><text class="l">现在库存</text><text class="r highlight">{{ item.currentStock }}</text></view>
|
<view class="row" v-if="item.createBy"><text class="l">入库人</text><text class="r">{{ item.createBy }}</text></view>
|
<view class="row" v-if="item.currentWeight"><text class="l">现净重(吨)</text><text class="r">{{ item.currentWeight }}</text></view>
|
<view class="row" v-if="item.recordType"><text class="l">来源</text><text class="r">{{ getRecordType(item.recordType) }}</text></view>
|
</view>
|
</view>
|
<view class="load-more-wrap">
|
<u-loadmore :status="loadStatus" @loadmore="loadMore" />
|
</view>
|
</view>
|
<view v-else class="no-data">暂无数据</view>
|
</view>
|
<up-datetime-picker
|
v-model="dateValue"
|
:mode="datePickerMode"
|
:show="showDatePicker"
|
@confirm="onDateConfirm"
|
@cancel="showDatePicker = false"
|
/>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive, toRefs, computed, watch } from "vue";
|
import dayjs from "dayjs";
|
import PageHeader from "@/components/PageHeader.vue";
|
import { onShow, onReachBottom } from "@dcloudio/uni-app";
|
import { getConsumablesInReportList, getConsumablesInInAndOutReportList } from "@/api/consumablesLogistics/consumablesIn.js";
|
import {
|
findAllQualifiedStockInRecordTypeOptions,
|
} from "@/api/basicData/enum.js";
|
const reportTypes = [
|
{ label: "日报", value: "daily" },
|
{ label: "月报", value: "monthly" },
|
{ label: "进出存报表", value: "inout" },
|
];
|
const tableData = ref([]);
|
const showDatePicker = ref(false);
|
const dateValue = ref(Date.now());
|
const datePickerTarget = ref("");
|
const loadStatus = ref("loadmore");
|
const page = reactive({ current: 1, size: 20 });
|
const data = reactive({
|
searchForm: {
|
reportType: "daily",
|
singleDate: "",
|
startMonth: "",
|
endMonth: "",
|
startDate: "",
|
endDate: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
const datePickerMode = computed(() => {
|
if (datePickerTarget.value === "startMonth" || datePickerTarget.value === "endMonth") return "year-month";
|
return "date";
|
});
|
|
const tableTitle = computed(() => {
|
const m = { daily: "日报详细数据", monthly: "月报详细数据", inout: "进出存报表详细数据" };
|
return m[searchForm.value.reportType] || "报表数据";
|
});
|
|
const getQueryParams = () => {
|
const p = {
|
reportType: searchForm.value.reportType,
|
current: page.current,
|
size: page.size,
|
};
|
if (searchForm.value.reportType === "daily") {
|
p.reportDate = searchForm.value.singleDate;
|
} else if (searchForm.value.reportType === "monthly") {
|
p.startMonth = searchForm.value.startMonth ? `${searchForm.value.startMonth}-01` : "";
|
p.endMonth = searchForm.value.endMonth ? `${searchForm.value.endMonth}-01` : "";
|
} else {
|
p.startDate = searchForm.value.startDate;
|
p.endDate = searchForm.value.endDate;
|
}
|
return p;
|
};
|
|
const stockRecordTypeOptions = ref([])
|
|
const getRecordType = (recordType) => {
|
return stockRecordTypeOptions.value.find(item => item.value === recordType)?.label || ''
|
}
|
|
// 获取来源类型选项
|
const fetchStockRecordTypeOptions = () => {
|
findAllQualifiedStockInRecordTypeOptions()
|
.then(res => {
|
stockRecordTypeOptions.value = res.data;
|
})
|
}
|
|
const getList = () => {
|
const isFirstPage = page.current === 1;
|
if (isFirstPage) {
|
uni.showLoading({ title: "查询中...", mask: true });
|
}
|
const params = getQueryParams();
|
const isInout = searchForm.value.reportType === "inout";
|
const api = isInout ? getConsumablesInInAndOutReportList : getConsumablesInReportList;
|
api(params)
|
.then((res) => {
|
uni.hideLoading();
|
const records = res.data?.records || [];
|
const total = res.data?.total || records.length;
|
if (isFirstPage) {
|
tableData.value = records;
|
} else {
|
tableData.value = [...tableData.value, ...records];
|
}
|
if (tableData.value.length >= total || total === 0) {
|
loadStatus.value = "nomore";
|
} else {
|
loadStatus.value = "loadmore";
|
}
|
})
|
.catch(() => {
|
uni.hideLoading();
|
loadStatus.value = "error";
|
if (isFirstPage) {
|
uni.showToast({ title: "查询失败", icon: "none" });
|
}
|
});
|
};
|
|
const handleQuery = () => {
|
page.current = 1;
|
loadStatus.value = "loadmore";
|
getList();
|
};
|
|
const loadMore = () => {
|
if (loadStatus.value === "nomore" || loadStatus.value === "loading") return;
|
loadStatus.value = "loading";
|
page.current++;
|
getList();
|
};
|
|
const toPickerTimestamp = (val, target) => {
|
if (!val) return Date.now();
|
let parsed;
|
if (target === "startMonth" || target === "endMonth") {
|
parsed = dayjs(`${val}-01`).valueOf();
|
} else {
|
parsed = dayjs(val).valueOf();
|
}
|
return Number.isNaN(parsed) ? Date.now() : parsed;
|
};
|
|
const formatPickerDate = (value, isMonth) => {
|
const parsed = dayjs(value);
|
if (!parsed.isValid()) return "";
|
return parsed.format(isMonth ? "YYYY-MM" : "YYYY-MM-DD");
|
};
|
|
const openDatePicker = (target) => {
|
datePickerTarget.value = target;
|
let val = "";
|
if (target === "single") val = searchForm.value.singleDate;
|
else if (target === "startMonth") val = searchForm.value.startMonth;
|
else if (target === "endMonth") val = searchForm.value.endMonth;
|
else if (target === "startDate") val = searchForm.value.startDate;
|
else if (target === "endDate") val = searchForm.value.endDate;
|
dateValue.value = toPickerTimestamp(val, target);
|
showDatePicker.value = true;
|
};
|
|
const onDateConfirm = (e) => {
|
const isMonth = datePickerTarget.value === "startMonth" || datePickerTarget.value === "endMonth";
|
const str = formatPickerDate(e.value, isMonth);
|
if (!str) {
|
showDatePicker.value = false;
|
uni.showToast({ title: "日期格式无效", icon: "none" });
|
return;
|
}
|
if (datePickerTarget.value === "single") {
|
searchForm.value.singleDate = str;
|
showDatePicker.value = false;
|
handleQuery();
|
} else if (datePickerTarget.value === "startMonth") {
|
searchForm.value.startMonth = str;
|
showDatePicker.value = false;
|
setTimeout(() => {
|
openDatePicker("endMonth");
|
}, 300);
|
} else if (datePickerTarget.value === "endMonth") {
|
searchForm.value.endMonth = str;
|
showDatePicker.value = false;
|
handleQuery();
|
} else if (datePickerTarget.value === "startDate") {
|
searchForm.value.startDate = str;
|
showDatePicker.value = false;
|
setTimeout(() => {
|
openDatePicker("endDate");
|
}, 300);
|
} else if (datePickerTarget.value === "endDate") {
|
searchForm.value.endDate = str;
|
showDatePicker.value = false;
|
handleQuery();
|
}
|
};
|
|
const initDefaultDates = () => {
|
const today = dayjs();
|
if (!searchForm.value.singleDate) {
|
searchForm.value.singleDate = today.format("YYYY-MM-DD");
|
}
|
if (!searchForm.value.startMonth || !searchForm.value.endMonth) {
|
searchForm.value.startMonth = today.format("YYYY-MM");
|
searchForm.value.endMonth = today.add(1, "month").format("YYYY-MM");
|
}
|
if (!searchForm.value.startDate || !searchForm.value.endDate) {
|
searchForm.value.endDate = today.format("YYYY-MM-DD");
|
searchForm.value.startDate = today.subtract(6, "day").format("YYYY-MM-DD");
|
}
|
if (!datePickerTarget.value) {
|
dateValue.value = toPickerTimestamp(searchForm.value.singleDate, "single");
|
}
|
};
|
|
watch(
|
() => searchForm.value.reportType,
|
() => {
|
handleQuery();
|
}
|
);
|
|
onShow(() => {
|
initDefaultDates();
|
handleQuery();
|
fetchStockRecordTypeOptions();
|
});
|
|
initDefaultDates();
|
|
onReachBottom(() => loadMore());
|
|
const goBack = () => uni.navigateBack();
|
</script>
|
|
<style lang="scss" scoped>
|
.report-page { min-height: 100vh; background: #f5f5f5; padding-bottom: 40rpx; }
|
.tabs-wrap { display: flex; background: #fff; padding: 24rpx; gap: 24rpx; }
|
.tab-item { flex: 1; text-align: center; padding: 20rpx; border-radius: 12rpx; background: #f0f0f0; font-size: 28rpx; color: #666; }
|
.tab-item.active { background: #2979ff; color: #fff; }
|
.search-section { background: #fff; margin: 24rpx; padding: 24rpx; border-radius: 16rpx; }
|
.search-row { display: flex; align-items: center; margin-bottom: 0; flex-wrap: wrap; }
|
.search-row .label { width: 140rpx; font-size: 26rpx; color: #666; }
|
.search-row .label.end { margin-left: 24rpx; }
|
.date-picker { flex: 1; min-width: 200rpx; padding: 20rpx; background: #f5f5f5; border-radius: 12rpx; font-size: 28rpx; }
|
.btn-row { display: flex; gap: 24rpx; margin-top: 24rpx; }
|
.btn-query { flex: 1; text-align: center; padding: 24rpx; background: #2979ff; color: #fff; border-radius: 12rpx; }
|
.btn-reset { flex: 1; text-align: center; padding: 24rpx; background: #e0e0e0; border-radius: 12rpx; }
|
.list-section { margin: 24rpx; }
|
.section-header { margin-bottom: 16rpx; padding: 16rpx 20rpx; }
|
.table-title { font-size: 30rpx; font-weight: 500; color: #333; }
|
.card-item { background: #fff; border-radius: 16rpx; padding: 20rpx 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
.card-header { padding: 4rpx 0 12rpx; }
|
.header-main { display: flex; flex-direction: column; gap: 6rpx; }
|
.product-name { font-size: 30rpx; font-weight: 500; color: #333; }
|
.sub-title { font-size: 24rpx; color: #999; }
|
.card-body .row { display: flex; justify-content: space-between; padding: 6rpx 0; font-size: 26rpx; }
|
.card-body .l { color: #666; } .card-body .r { color: #333; } .card-body .r.highlight { color: #2979ff; font-weight: 500; }
|
.no-data { text-align: center; padding: 60rpx 0; color: #999; font-size: 28rpx; }
|
.load-more-wrap { padding: 24rpx 0 8rpx; }
|
</style>
|
