| | |
| | | > |
| | | <el-option label="日报" value="daily" /> |
| | | <el-option label="月报" value="monthly" /> |
| | | <el-option label="作业报表" value="work" /> |
| | | <el-option label="进出存报表" value="inout" /> |
| | | </el-select> |
| | | |
| | |
| | | range-separator="至" |
| | | start-placeholder="开始月份" |
| | | end-placeholder="结束月份" |
| | | format="YYYY-MM" |
| | | value-format="YYYY-MM" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | style="width: 240px;" |
| | | /> |
| | | <el-date-picker |
| | |
| | | </el-button> |
| | | <el-button @click="handleReset">重置</el-button> |
| | | </div> |
| | | |
| | | |
| | | <div class="search_right"> |
| | | <el-button type="success" @click="handleExport" icon="Download"> |
| | | 导出报表 |
| | | </el-button> |
| | | <!-- <el-button type="success" @click="handleExport" icon="Download">--> |
| | | <!-- 导出报表--> |
| | | <!-- </el-button>--> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 统计卡片 --> |
| | | <div class="stats_cards" v-if="reportData.summary"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <el-card class="stats_card"> |
| | | <div class="stats_content"> |
| | | <div class="stats_icon in"> |
| | | <el-icon><TrendCharts /></el-icon> |
| | | </div> |
| | | <div class="stats_info"> |
| | | <div class="stats_value">{{ reportData.summary.totalIn || 0 }}</div> |
| | | <div class="stats_label">总入库量</div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-card class="stats_card"> |
| | | <div class="stats_content"> |
| | | <div class="stats_icon out"> |
| | | <el-icon><TrendCharts /></el-icon> |
| | | </div> |
| | | <div class="stats_info"> |
| | | <div class="stats_value">{{ reportData.summary.totalOut || 0 }}</div> |
| | | <div class="stats_label">总出库量</div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-card class="stats_card"> |
| | | <div class="stats_content"> |
| | | <div class="stats_icon stock"> |
| | | <el-icon><Box /></el-icon> |
| | | </div> |
| | | <div class="stats_info"> |
| | | <div class="stats_value">{{ reportData.summary.currentStock || 0 }}</div> |
| | | <div class="stats_label">当前库存</div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-card class="stats_card"> |
| | | <div class="stats_content"> |
| | | <div class="stats_icon turnover"> |
| | | <el-icon><Refresh /></el-icon> |
| | | </div> |
| | | <div class="stats_info"> |
| | | <div class="stats_value">{{ reportData.summary.turnoverRate || 0 }}%</div> |
| | | <div class="stats_label">周转率</div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <!-- <!– 统计卡片 –>--> |
| | | <!-- <div class="stats_cards" v-if="reportData.summary">--> |
| | | <!-- <el-row :gutter="20">--> |
| | | <!-- <el-col :span="6">--> |
| | | <!-- <el-card class="stats_card">--> |
| | | <!-- <div class="stats_content">--> |
| | | <!-- <div class="stats_icon in">--> |
| | | <!-- <el-icon><TrendCharts /></el-icon>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="stats_info">--> |
| | | <!-- <div class="stats_value">{{ reportData.summary.totalIn || 0 }}</div>--> |
| | | <!-- <div class="stats_label">总入库量</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-col>--> |
| | | <!-- <el-col :span="6">--> |
| | | <!-- <el-card class="stats_card">--> |
| | | <!-- <div class="stats_content">--> |
| | | <!-- <div class="stats_icon out">--> |
| | | <!-- <el-icon><TrendCharts /></el-icon>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="stats_info">--> |
| | | <!-- <div class="stats_value">{{ reportData.summary.totalOut || 0 }}</div>--> |
| | | <!-- <div class="stats_label">总出库量</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-col>--> |
| | | <!-- <el-col :span="6">--> |
| | | <!-- <el-card class="stats_card">--> |
| | | <!-- <div class="stats_content">--> |
| | | <!-- <div class="stats_icon stock">--> |
| | | <!-- <el-icon><Box /></el-icon>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="stats_info">--> |
| | | <!-- <div class="stats_value">{{ reportData.summary.currentStock || 0 }}</div>--> |
| | | <!-- <div class="stats_label">当前库存</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-col>--> |
| | | <!-- <el-col :span="6">--> |
| | | <!-- <el-card class="stats_card">--> |
| | | <!-- <div class="stats_content">--> |
| | | <!-- <div class="stats_icon turnover">--> |
| | | <!-- <el-icon><Refresh /></el-icon>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="stats_info">--> |
| | | <!-- <div class="stats_value">{{ reportData.summary.turnoverRate || 0 }}%</div>--> |
| | | <!-- <div class="stats_label">周转率</div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-col>--> |
| | | <!-- </el-row>--> |
| | | <!-- </div>--> |
| | | |
| | | <!-- 图表区域 --> |
| | | <div class="chart_section" v-if="reportData.chartData"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-card> |
| | | <template #header> |
| | | <span>库存趋势图</span> |
| | | </template> |
| | | <div ref="trendChart" style="height: 300px;"></div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-card> |
| | | <template #header> |
| | | <span>进出库对比</span> |
| | | </template> |
| | | <div ref="comparisonChart" style="height: 300px;"></div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <!-- <!– 图表区域 –>--> |
| | | <!-- <div class="chart_section" v-if="reportData.chartData">--> |
| | | <!-- <el-row :gutter="20">--> |
| | | <!-- <el-col :span="12">--> |
| | | <!-- <el-card>--> |
| | | <!-- <template #header>--> |
| | | <!-- <span>库存趋势图</span>--> |
| | | <!-- </template>--> |
| | | <!-- <div ref="trendChart" style="height: 300px;"></div>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-col>--> |
| | | <!-- <el-col :span="12">--> |
| | | <!-- <el-card>--> |
| | | <!-- <template #header>--> |
| | | <!-- <span>进出库对比</span>--> |
| | | <!-- </template>--> |
| | | <!-- <div ref="comparisonChart" style="height: 300px;"></div>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-col>--> |
| | | <!-- </el-row>--> |
| | | <!-- </div>--> |
| | | |
| | | <!-- 详细数据表格 --> |
| | | <div class="table_section"> |
| | |
| | | width="60" |
| | | /> |
| | | <el-table-column |
| | | v-if="searchForm.reportType === 'daily'" |
| | | label="日期" |
| | | prop="date" |
| | | width="100" |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | v-if="searchForm.reportType === 'monthly'" |
| | | label="月份" |
| | | prop="month" |
| | | width="100" |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | label="入库时间" |
| | | prop="createTime" |
| | | width="100" |
| | | width="200" |
| | | show-overflow-tooltip |
| | | v-if="searchForm.reportType !== 'inout'" |
| | | /> |
| | | <el-table-column |
| | | label="入库批次" |
| | | prop="inboundBatches" |
| | | width="160" |
| | | width="240" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="供应商名称" |
| | | prop="supplierName" |
| | | min-width="240" |
| | | show-overflow-tooltip |
| | | v-if="searchForm.reportType !== 'inout'" |
| | | /> |
| | | <el-table-column |
| | | label="产品大类" |
| | | prop="productCategory" |
| | | width="100" |
| | | prop="productName" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="规格型号" |
| | | prop="specificationModel" |
| | | min-width="200" |
| | | prop="model" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="单位" |
| | | prop="unit" |
| | | width="70" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="期初库存" |
| | | prop="beginStock" |
| | | width="100" |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | label="入库数量" |
| | | prop="inboundNum" |
| | | width="100" |
| | | prop="totalStockIn" |
| | | align="center" |
| | | v-if="searchForm.reportType === 'inout'" |
| | | /> |
| | | <el-table-column |
| | | label="入库数量" |
| | | prop="stockInNum" |
| | | align="center" |
| | | v-else |
| | | /> |
| | | <el-table-column |
| | | label="出库数量" |
| | | prop="outboundNum" |
| | | prop="totalStockOut" |
| | | width="100" |
| | | align="center" |
| | | v-if="searchForm.reportType === 'inout'" |
| | | /> |
| | | <el-table-column |
| | | label="期末库存" |
| | | prop="endStock" |
| | | width="100" |
| | | label="现在库存" |
| | | prop="currentStock" |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | label="含税单价" |
| | | prop="taxInclusiveUnitPrice" |
| | | width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="含税总价" |
| | | prop="taxInclusiveTotalPrice" |
| | | width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="税率(%)" |
| | | prop="taxRate" |
| | | width="80" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | label="不含税总价" |
| | | prop="taxExclusiveTotalPrice" |
| | | width="100" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column label="来源" |
| | | prop="recordType" |
| | | v-if="searchForm.reportType !== 'inout'" |
| | | show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | {{ getRecordType(scope.row.recordType) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="入库人" |
| | | prop="createBy" |
| | | width="80" |
| | | v-if="searchForm.reportType !== 'inout'" |
| | | show-overflow-tooltip |
| | | /> |
| | | <el-table-column |
| | | v-if="searchForm.reportType === 'work'" |
| | | label="操作人员" |
| | | prop="operator" |
| | | width="80" |
| | | align="center" |
| | | /> |
| | | <el-table-column |
| | | v-if="searchForm.reportType === 'work'" |
| | | label="操作时间" |
| | | prop="operateTime" |
| | | width="150" |
| | | align="center" |
| | | /> |
| | | </el-table> |
| | | </el-card> |
| | |
| | | import { ElMessage } from 'element-plus' |
| | | import * as echarts from 'echarts' |
| | | import { |
| | | getStockDailyReport, |
| | | getStockMonthlyReport, |
| | | getWorkReport, |
| | | getStockInOutReport, |
| | | exportStockReport |
| | | } from '@/api/inventoryManagement/stockReport' |
| | | import { |
| | | getStockInventoryInAndOutReportList, |
| | | getStockInventoryReportList |
| | | } from "@/api/inventoryManagement/stockInventory.js"; |
| | | import {findAllQualifiedStockRecordTypeOptions} from "@/api/basicData/enum.js"; |
| | | |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | // 响应式数据 |
| | | const tableLoading = ref(false) |
| | | const trendChart = ref(null) |
| | |
| | | tableData: [] |
| | | }) |
| | | |
| | | const stockRecordTypeOptions = ref([]) |
| | | |
| | | const getRecordType = (recordType) => { |
| | | return stockRecordTypeOptions.value.find(item => item.value === recordType)?.label || '' |
| | | } |
| | | |
| | | // 获取来源类型选项 |
| | | const fetchStockRecordTypeOptions = () => { |
| | | findAllQualifiedStockRecordTypeOptions() |
| | | .then(res => { |
| | | stockRecordTypeOptions.value = res.data; |
| | | }) |
| | | } |
| | | |
| | | // 获取表格标题 |
| | | const getTableTitle = () => { |
| | | const typeMap = { |
| | | daily: '日报详细数据', |
| | | monthly: '月报详细数据', |
| | | work: '作业报表详细数据', |
| | | inout: '进出存报表详细数据' |
| | | } |
| | | return typeMap[searchForm.reportType] || '报表详细数据' |
| | |
| | | try { |
| | | const params = getQueryParams() |
| | | let response |
| | | |
| | | switch (searchForm.reportType) { |
| | | case 'daily': |
| | | response = await getStockDailyReport(params) |
| | | break |
| | | case 'monthly': |
| | | response = await getStockMonthlyReport(params) |
| | | break |
| | | case 'work': |
| | | response = await getWorkReport(params) |
| | | break |
| | | case 'inout': |
| | | response = await getStockInOutReport(params) |
| | | break |
| | | default: |
| | | throw new Error('未知的报表类型') |
| | | |
| | | if (searchForm.reportType === 'inout') { |
| | | response = await getStockInventoryInAndOutReportList(params) |
| | | } else { |
| | | response = await getStockInventoryReportList(params) |
| | | } |
| | | |
| | | if (response.code === 200) { |
| | | reportData.value = response.data |
| | | nextTick(() => { |
| | | initCharts() |
| | | }) |
| | | reportData.value.tableData = response.data.records |
| | | // reportData.value.summary = response.data.summary |
| | | // reportData.value.chartData = response.data.chartData |
| | | // nextTick(() => { |
| | | // initCharts() |
| | | // }) |
| | | |
| | | } |
| | | } catch (error) { |
| | | ElMessage.error('查询失败:' + error.message) |
| | |
| | | tableLoading.value = false |
| | | } |
| | | } |
| | | // // 生成假数据 |
| | | // const generateMockData = () => { |
| | | // // 生成统计卡片假数据 |
| | | // const summary = { |
| | | // totalIn: 1000, |
| | | // totalOut: 600, |
| | | // currentStock: 400, |
| | | // turnoverRate: 30 |
| | | // } |
| | | |
| | | // // 生成图表假数据 |
| | | // const trendDates = ['2025-09-15', '2025-09-16', '2025-09-17', '2025-09-18', '2025-09-19'] |
| | | // const trendValues = [300, 350, 400, 380, 420] |
| | | // const comparisonDates = ['2025-09-15', '2025-09-16', '2025-09-17'] |
| | | // const inValues = [100, 150, 200] |
| | | // const outValues = [80, 120, 100] |
| | | |
| | | // const chartData = { |
| | | // trendDates, |
| | | // trendValues, |
| | | // comparisonDates, |
| | | // inValues, |
| | | // outValues |
| | | // } |
| | | |
| | | // reportData.value = { |
| | | // summary, |
| | | // chartData, |
| | | // tableData: [] |
| | | // } |
| | | // } |
| | | // 验证搜索表单 |
| | | const validateSearchForm = () => { |
| | | if (searchForm.reportType === 'daily') { |
| | |
| | | ElMessage.warning('请选择日期') |
| | | return false |
| | | } |
| | | } else if (searchForm.reportType === 'work' || searchForm.reportType === 'inout') { |
| | | } else if (searchForm.reportType === 'inout') { |
| | | if (!searchForm.dateRange || searchForm.dateRange.length !== 2) { |
| | | ElMessage.warning('请选择日期范围') |
| | | return false |
| | |
| | | // 获取查询参数 |
| | | const getQueryParams = () => { |
| | | const params = { |
| | | reportType: searchForm.reportType |
| | | reportType: searchForm.reportType, |
| | | reportDate: "", |
| | | startMonth: "", |
| | | endMonth: "", |
| | | startDate: "", |
| | | endDate: "" |
| | | } |
| | | |
| | | if (searchForm.reportType === 'daily') { |
| | |
| | | |
| | | try { |
| | | const params = getQueryParams() |
| | | const response = await exportStockReport(params) |
| | | |
| | | // const response = await exportStockReport(params) |
| | | proxy.download("/stockin/exportCopy", params, '库存报表.xlsx') |
| | | // 创建下载链接 |
| | | const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) |
| | | const url = window.URL.createObjectURL(blob) |
| | | const link = document.createElement('a') |
| | | link.href = url |
| | | link.download = `${getTableTitle()}_${new Date().getTime()}.xlsx` |
| | | document.body.appendChild(link) |
| | | link.click() |
| | | document.body.removeChild(link) |
| | | window.URL.revokeObjectURL(url) |
| | | // const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) |
| | | // const url = window.URL.createObjectURL(blob) |
| | | // const link = document.createElement('a') |
| | | // link.href = url |
| | | // link.download = `${getTableTitle()}_${new Date().getTime()}.xlsx` |
| | | // document.body.appendChild(link) |
| | | // link.click() |
| | | // document.body.removeChild(link) |
| | | // window.URL.revokeObjectURL(url) |
| | | |
| | | ElMessage.success('导出成功') |
| | | // ElMessage.success('导出成功') |
| | | } catch (error) { |
| | | ElMessage.error('导出失败:' + error.message) |
| | | } |
| | |
| | | yesterday.toISOString().split('T')[0], |
| | | today.toISOString().split('T')[0] |
| | | ] |
| | | |
| | | fetchStockRecordTypeOptions() |
| | | }) |
| | | </script> |
| | | |