feat(物料管理): 新增入库和出库报表功能并优化界面
重构报表页面结构，新增API接口文件 添加日期范围快速选择功能 实现数据导出Excel功能 更新README项目描述
This commit is contained in:
parent
e4d0aecb80
commit
ebe3b4681b
34
README.md
34
README.md
@ -1,3 +1,20 @@
|
||||
# 涂装车间MES系统前端
|
||||
|
||||
本项目是干巷车镜涂装车间MES系统的前端部分，基于Vue.js开发，用于管理生产过程中的各种数据和流程。
|
||||
|
||||
## 项目描述
|
||||
|
||||
该系统主要用于涂装车间的生产管理，包括物料管理、生产计划、质量管理、设备管理等功能模块，旨在提高生产效率和产品质量。
|
||||
|
||||
## 已有功能
|
||||
|
||||
- 基础管理：BOM管理、设备工位管理、产品定义、SOP管理等
|
||||
- 物料管理：AGV货位管理、配料任务管理、每日入库报表、每日出库报表等
|
||||
- 生产管理：生产计划、工单管理、完工统计等
|
||||
- 质量管理：IQC、IPQC、FQC、OQC等质量管理模块
|
||||
- 看板管理：各类生产数据看板
|
||||
- 系统管理：用户管理、角色管理、菜单管理、字典管理等
|
||||
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
@ -27,21 +44,4 @@ npm run build:stage
|
||||
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
# 插件说明
|
||||
### Autoprefixer （已删除）
|
||||
浏览器自动补全前缀
|
||||
例如：
|
||||
```
|
||||
a{
|
||||
transition :transform 1s
|
||||
}
|
||||
|
||||
将会补全如下
|
||||
a{
|
||||
-webkit-transition :-webkit-transform 1s;
|
||||
transition :-ms-transform 1s;
|
||||
transition :transform 1s
|
||||
}
|
||||
```
|
||||
10
src/api/materialManagement/mmInventoryReport.js
Normal file
10
src/api/materialManagement/mmInventoryReport.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取每日入库报表数据
|
||||
export function getInventoryReportByPage(data) {
|
||||
return request({
|
||||
url: '/mes/mm/mmInventoryReport/GetInventoryReportByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
10
src/api/materialManagement/mmOutboundReport.js
Normal file
10
src/api/materialManagement/mmOutboundReport.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取每日出库报表数据
|
||||
export function getOutboundReportByPage(data) {
|
||||
return request({
|
||||
url: '/mes/mm/mmOutboundReport/GetOutboundReportByPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
|
||||
<el-form-item label="日期范围" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="queryParams.dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料编号" prop="materialCode">
|
||||
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" prop="materialName">
|
||||
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operator">
|
||||
<el-input v-model="queryParams.operator" placeholder="请输入操作人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="15" class="mb10">
|
||||
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell" highlight-current-row>
|
||||
<el-table-column type="index" width="50" align="center" />
|
||||
<el-table-column prop="materialCode" label="物料编号" align="center" />
|
||||
<el-table-column prop="materialName" label="物料名称" align="center" />
|
||||
<el-table-column prop="quantity" label="入库数量" align="center" />
|
||||
<el-table-column prop="inventoryTime" label="入库时间" align="center" />
|
||||
<el-table-column prop="operator" label="操作人" align="center" />
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'mmDailyInventoryReport',
|
||||
data() {
|
||||
// 默认日期范围为当天00:00:00到23:59:59
|
||||
const startOfDay = this.$dayjs().startOf('day').toDate()
|
||||
const endOfDay = this.$dayjs().endOf('day').toDate()
|
||||
|
||||
return {
|
||||
loading: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [startOfDay, endOfDay],
|
||||
materialCode: '',
|
||||
materialName: '',
|
||||
operator: ''
|
||||
},
|
||||
columns: [],
|
||||
total: 0,
|
||||
dataList: [],
|
||||
queryRef: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
// 这里应该调用实际的API获取数据
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
this.dataList = [
|
||||
{ materialCode: 'MAT001', materialName: '物料1', quantity: 150, inventoryTime: '2023-05-01 09:15:00', operator: '王五' },
|
||||
{ materialCode: 'MAT003', materialName: '物料3', quantity: 300, inventoryTime: '2023-05-01 16:20:00', operator: '赵六' }
|
||||
]
|
||||
this.total = this.dataList.length
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置查询操作
|
||||
resetQuery() {
|
||||
this.resetForm("queryRef")
|
||||
// 重置为当天日期范围
|
||||
const startOfDay = this.$dayjs().startOf('day').toDate()
|
||||
const endOfDay = this.$dayjs().endOf('day').toDate()
|
||||
this.queryParams.dateRange = [startOfDay, endOfDay]
|
||||
this.handleQuery()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些自定义样式 */
|
||||
</style>
|
||||
@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
|
||||
<el-form-item label="日期范围" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="queryParams.dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料编号" prop="materialCode">
|
||||
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" prop="materialName">
|
||||
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operator">
|
||||
<el-input v-model="queryParams.operator" placeholder="请输入操作人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="15" class="mb10">
|
||||
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell" highlight-current-row>
|
||||
<el-table-column type="index" width="50" align="center" />
|
||||
<el-table-column prop="materialCode" label="物料编号" align="center" />
|
||||
<el-table-column prop="materialName" label="物料名称" align="center" />
|
||||
<el-table-column prop="quantity" label="出库数量" align="center" />
|
||||
<el-table-column prop="outboundTime" label="出库时间" align="center" />
|
||||
<el-table-column prop="operator" label="操作人" align="center" />
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'mmDailyOutboundReport',
|
||||
data() {
|
||||
// 默认日期范围为当天00:00:00到23:59:59
|
||||
const startOfDay = this.$dayjs().startOf('day').toDate()
|
||||
const endOfDay = this.$dayjs().endOf('day').toDate()
|
||||
|
||||
return {
|
||||
loading: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [startOfDay, endOfDay],
|
||||
materialCode: '',
|
||||
materialName: '',
|
||||
operator: ''
|
||||
},
|
||||
columns: [],
|
||||
total: 0,
|
||||
dataList: [],
|
||||
queryRef: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
// 这里应该调用实际的API获取数据
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
this.dataList = [
|
||||
{ materialCode: 'MAT001', materialName: '物料1', quantity: 100, outboundTime: '2023-05-01 10:30:00', operator: '张三' },
|
||||
{ materialCode: 'MAT002', materialName: '物料2', quantity: 200, outboundTime: '2023-05-01 14:45:00', operator: '李四' }
|
||||
]
|
||||
this.total = this.dataList.length
|
||||
this.loading = false
|
||||
}, 500)
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置查询操作
|
||||
resetQuery() {
|
||||
this.resetForm("queryRef")
|
||||
// 重置为当天日期范围
|
||||
const startOfDay = this.$dayjs().startOf('day').toDate()
|
||||
const endOfDay = this.$dayjs().endOf('day').toDate()
|
||||
this.queryParams.dateRange = [startOfDay, endOfDay]
|
||||
this.handleQuery()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些自定义样式 */
|
||||
</style>
|
||||
313
src/views/materialManagement/mmInventoryReport/index.vue
Normal file
313
src/views/materialManagement/mmInventoryReport/index.vue
Normal file
@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
|
||||
<el-form-item label="日期范围" prop="dateRange">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-date-picker v-model="queryParams.dateRange" type="datetimerange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]">
|
||||
</el-date-picker>
|
||||
<div style="margin-left: 10px">
|
||||
<el-button size="mini" @click="setDateRange('today')">今日</el-button>
|
||||
<el-button size="mini" @click="setDateRange('yesterday')">昨日</el-button>
|
||||
<el-button size="mini" @click="setDateRange('week')">本周</el-button>
|
||||
<el-button size="mini" @click="setDateRange('month')">本月</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料编号" prop="materialCode">
|
||||
<el-input v-model="queryParams.materialCode" placeholder="请输入物料编号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" prop="materialName">
|
||||
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operator">
|
||||
<el-input v-model="queryParams.operator" placeholder="请输入操作人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="15" class="mb10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
|
||||
highlight-current-row>
|
||||
<el-table-column type="index" width="50" align="center" />
|
||||
<el-table-column prop="partnumber" label="物料编号" align="center" />
|
||||
<el-table-column prop="description" label="物料名称" align="center" />
|
||||
<el-table-column prop="changePackage" label="箱数" align="center" />
|
||||
<el-table-column prop="changeQuantity" label="产品数" align="center" />
|
||||
<el-table-column prop="createdBy" label="操作人" align="center" />
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInventoryReportByPage } from '@/api/materialManagement/mmInventoryReport'
|
||||
import * as ExcelJS from 'exceljs'
|
||||
import { saveAs } from 'file-saver'
|
||||
|
||||
export default {
|
||||
name: 'mmDailyInventoryReport',
|
||||
data() {
|
||||
// 默认日期范围为当月25日到本月25日
|
||||
const startOfMonth = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
const endOfMonth = this.$dayjs().date(25).toDate()
|
||||
|
||||
return {
|
||||
loading: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [startOfMonth, endOfMonth],
|
||||
partNumber: '',
|
||||
materialName: '',
|
||||
operator: '',
|
||||
source: '',
|
||||
},
|
||||
columns: [],
|
||||
total: 0,
|
||||
dataList: [],
|
||||
queryRef: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
// 构造符合后端要求的查询参数
|
||||
const params = {
|
||||
...this.queryParams,
|
||||
startTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[0]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
endTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[1]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
partNumber: this.queryParams.partNumber,
|
||||
materialName: this.queryParams.materialName,
|
||||
operator: this.queryParams.operator,
|
||||
source: this.queryParams.source,
|
||||
}
|
||||
// 删除不需要的参数
|
||||
delete params.dateRange
|
||||
|
||||
// 调用API获取数据
|
||||
getInventoryReportByPage(params)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.dataList = res.data.result || []
|
||||
this.total = res.data.totalNum || 0
|
||||
this.loading = false
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置查询操作
|
||||
resetQuery() {
|
||||
this.resetForm('queryRef')
|
||||
// 重置为当月25日到本月25日
|
||||
const startOfMonth = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
const endOfMonth = this.$dayjs().date(25).toDate()
|
||||
this.queryParams.dateRange = [startOfMonth, endOfMonth]
|
||||
this.queryParams.partNumber = ''
|
||||
this.queryParams.materialName = ''
|
||||
this.queryParams.operator = ''
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 设置日期范围
|
||||
setDateRange(type) {
|
||||
let start, end
|
||||
switch (type) {
|
||||
case 'today':
|
||||
// 今日
|
||||
start = this.$dayjs().startOf('day').toDate()
|
||||
end = this.$dayjs().endOf('day').toDate()
|
||||
break
|
||||
case 'yesterday':
|
||||
// 昨日
|
||||
start = this.$dayjs().subtract(1, 'day').startOf('day').toDate()
|
||||
end = this.$dayjs().subtract(1, 'day').endOf('day').toDate()
|
||||
break
|
||||
case 'week':
|
||||
// 本周
|
||||
start = this.$dayjs().startOf('week').toDate()
|
||||
end = this.$dayjs().endOf('week').toDate()
|
||||
break
|
||||
case 'month':
|
||||
// 本月(上月25日到本月25日)
|
||||
start = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
end = this.$dayjs().date(25).toDate()
|
||||
break
|
||||
default:
|
||||
// 默认为本月
|
||||
start = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
end = this.$dayjs().date(25).toDate()
|
||||
}
|
||||
this.queryParams.dateRange = [start, end]
|
||||
this.handleQuery()
|
||||
},
|
||||
// 导出数据
|
||||
async handleExport() {
|
||||
try {
|
||||
// 检查日期范围是否为空
|
||||
if (!this.queryParams.dateRange || this.queryParams.dateRange.length !== 2 || !this.queryParams.dateRange[0] || !this.queryParams.dateRange[1]) {
|
||||
this.$modal.msgError('请选择日期范围')
|
||||
return
|
||||
}
|
||||
|
||||
// 显示加载提示
|
||||
this.$modal.loading('正在导出数据，请稍候...')
|
||||
|
||||
// 获取所有数据
|
||||
const allData = await this.getAllData()
|
||||
|
||||
// 格式化日期范围用于文件名
|
||||
const startDate = this.$dayjs(this.queryParams.dateRange[0]).format('YYYY-MM-DD')
|
||||
const endDate = this.$dayjs(this.queryParams.dateRange[1]).format('YYYY-MM-DD')
|
||||
const fileName = `库存报表_${startDate}_${endDate}.xlsx`
|
||||
|
||||
// 创建工作簿
|
||||
const workbook = new ExcelJS.Workbook()
|
||||
const worksheet = workbook.addWorksheet('库存报表')
|
||||
|
||||
// 设置列标题和样式
|
||||
const columns = [
|
||||
{ header: '物料编号', key: 'partnumber', width: 20 },
|
||||
{ header: '物料名称', key: 'description', width: 30 },
|
||||
{ header: '数量', key: 'changeQuantity', width: 15 },
|
||||
{ header: '操作人', key: 'createdBy', width: 15 },
|
||||
]
|
||||
worksheet.columns = columns
|
||||
|
||||
// 设置标题行样式
|
||||
const headerRow = worksheet.getRow(1)
|
||||
headerRow.font = { bold: true }
|
||||
headerRow.alignment = { horizontal: 'center' }
|
||||
|
||||
// 添加日期范围行
|
||||
const dateRangeRow = worksheet.addRow([`日期范围: ${startDate} 至 ${endDate}`])
|
||||
dateRangeRow.font = { bold: true }
|
||||
dateRangeRow.alignment = { horizontal: 'left' }
|
||||
worksheet.addRow([]) // 添加空行
|
||||
|
||||
// 添加数据行
|
||||
allData.forEach((item) => {
|
||||
worksheet.addRow({
|
||||
partnumber: item.partnumber,
|
||||
description: item.description,
|
||||
changeQuantity: item.changeQuantity,
|
||||
createdBy: item.createdBy,
|
||||
})
|
||||
})
|
||||
|
||||
// 生成Excel文件
|
||||
const buffer = await workbook.xlsx.writeBuffer()
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
||||
|
||||
// 下载文件
|
||||
saveAs(blob, fileName)
|
||||
|
||||
// 隐藏加载提示
|
||||
this.$modal.closeLoading()
|
||||
} catch (error) {
|
||||
// 隐藏加载提示
|
||||
this.$modal.closeLoading()
|
||||
this.$modal.msgError('导出失败: ' + error.message)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取所有数据用于导出
|
||||
async getAllData() {
|
||||
return new Promise((resolve) => {
|
||||
// 显示加载提示
|
||||
this.$message({
|
||||
message: '正在准备导出数据，请稍候...',
|
||||
type: 'info',
|
||||
duration: 0, // 不自动关闭
|
||||
})
|
||||
|
||||
// 构造查询参数
|
||||
const params = {
|
||||
...this.queryParams,
|
||||
startTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[0]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
endTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[1]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
partNumber: this.queryParams.partNumber,
|
||||
materialName: this.queryParams.materialName,
|
||||
operator: this.queryParams.operator,
|
||||
source: this.queryParams.source,
|
||||
}
|
||||
delete params.dateRange
|
||||
|
||||
// 分页获取所有数据
|
||||
const allResults = []
|
||||
const fetchPage = (pageNum) => {
|
||||
getInventoryReportByPage({ ...params, pageNum, pageSize: 1000 })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
const results = res.data.result || []
|
||||
allResults.push(...results)
|
||||
|
||||
// 如果还有更多数据，继续获取下一页
|
||||
if (allResults.length < res.data.totalNum) {
|
||||
fetchPage(pageNum + 1)
|
||||
} else {
|
||||
// 关闭加载提示
|
||||
this.$message.closeAll()
|
||||
resolve(allResults)
|
||||
}
|
||||
} else {
|
||||
// 关闭加载提示
|
||||
this.$message.closeAll()
|
||||
this.$message({
|
||||
message: '获取导出数据失败',
|
||||
type: 'error',
|
||||
})
|
||||
resolve([])
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 关闭加载提示
|
||||
this.$message.closeAll()
|
||||
this.$message({
|
||||
message: '获取导出数据失败',
|
||||
type: 'error',
|
||||
})
|
||||
resolve([])
|
||||
})
|
||||
}
|
||||
|
||||
// 开始获取第一页数据
|
||||
fetchPage(1)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些自定义样式 */
|
||||
</style>
|
||||
313
src/views/materialManagement/mmOutboundReport/index.vue
Normal file
313
src/views/materialManagement/mmOutboundReport/index.vue
Normal file
@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
|
||||
<el-form-item label="日期范围" prop="dateRange">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-date-picker v-model="queryParams.dateRange" type="datetimerange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]">
|
||||
</el-date-picker>
|
||||
<div style="margin-left: 10px;">
|
||||
<el-button size="mini" @click="setDateRange('today')">今日</el-button>
|
||||
<el-button size="mini" @click="setDateRange('yesterday')">昨日</el-button>
|
||||
<el-button size="mini" @click="setDateRange('week')">本周</el-button>
|
||||
<el-button size="mini" @click="setDateRange('month')">本月</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="物料编号" prop="partNumber">
|
||||
<el-input v-model="queryParams.partNumber" placeholder="请输入物料编号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="物料名称" prop="materialName">
|
||||
<el-input v-model="queryParams.materialName" placeholder="请输入物料名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operator">
|
||||
<el-input v-model="queryParams.operator" placeholder="请输入操作人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="search" type="primary" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="15" class="mb10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
|
||||
highlight-current-row>
|
||||
<el-table-column type="index" width="50" align="center" />
|
||||
<el-table-column prop="partnumber" label="物料编号" align="center" />
|
||||
<el-table-column prop="description" label="物料名称" align="center" />
|
||||
<el-table-column prop="changePackage" label="箱数" align="center" />
|
||||
<el-table-column prop="changeQuantity" label="产品数" align="center" />
|
||||
<el-table-column prop="createdBy" label="操作人" align="center" />
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOutboundReportByPage } from '@/api/materialManagement/mmOutboundReport'
|
||||
import * as ExcelJS from 'exceljs'
|
||||
import { saveAs } from 'file-saver'
|
||||
|
||||
export default {
|
||||
name: 'mmDailyOutboundReport',
|
||||
data() {
|
||||
// 默认日期范围为当月25日到本月25日
|
||||
const startOfMonth = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
const endOfMonth = this.$dayjs().date(25).toDate()
|
||||
|
||||
return {
|
||||
loading: false,
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dateRange: [startOfMonth, endOfMonth],
|
||||
partNumber: '',
|
||||
materialName: '',
|
||||
operator: '',
|
||||
source: ''
|
||||
},
|
||||
columns: [],
|
||||
total: 0,
|
||||
dataList: [],
|
||||
queryRef: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
// 构造符合后端要求的查询参数
|
||||
const params = {
|
||||
...this.queryParams,
|
||||
startTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[0]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
endTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[1]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
partNumber: this.queryParams.partNumber,
|
||||
materialName: this.queryParams.materialName,
|
||||
operator: this.queryParams.operator,
|
||||
source: this.queryParams.source
|
||||
}
|
||||
// 删除不需要的参数
|
||||
delete params.dateRange
|
||||
|
||||
// 调用API获取数据
|
||||
getOutboundReportByPage(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.dataList = res.data.result || []
|
||||
this.total = res.data.totalNum || 0
|
||||
this.loading = false
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
this.loading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置查询操作
|
||||
resetQuery() {
|
||||
this.resetForm("queryRef")
|
||||
// 重置为当月25日到本月25日
|
||||
const startOfMonth = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
const endOfMonth = this.$dayjs().date(25).toDate()
|
||||
this.queryParams.dateRange = [startOfMonth, endOfMonth]
|
||||
this.queryParams.partNumber = ''
|
||||
this.queryParams.materialName = ''
|
||||
this.queryParams.operator = ''
|
||||
this.queryParams.source = ''
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// 设置日期范围
|
||||
setDateRange(type) {
|
||||
let start, end
|
||||
switch (type) {
|
||||
case 'today':
|
||||
// 今日
|
||||
start = this.$dayjs().startOf('day').toDate()
|
||||
end = this.$dayjs().endOf('day').toDate()
|
||||
break
|
||||
case 'yesterday':
|
||||
// 昨日
|
||||
start = this.$dayjs().subtract(1, 'day').startOf('day').toDate()
|
||||
end = this.$dayjs().subtract(1, 'day').endOf('day').toDate()
|
||||
break
|
||||
case 'week':
|
||||
// 本周
|
||||
start = this.$dayjs().startOf('week').toDate()
|
||||
end = this.$dayjs().endOf('week').toDate()
|
||||
break
|
||||
case 'month':
|
||||
// 本月(上月25日到本月25日)
|
||||
start = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
end = this.$dayjs().date(25).toDate()
|
||||
break
|
||||
default:
|
||||
// 默认为本月
|
||||
start = this.$dayjs().subtract(1, 'month').date(25).toDate()
|
||||
end = this.$dayjs().date(25).toDate()
|
||||
}
|
||||
this.queryParams.dateRange = [start, end]
|
||||
this.handleQuery()
|
||||
},
|
||||
// 导出数据
|
||||
async handleExport() {
|
||||
try {
|
||||
// 检查日期范围是否为空
|
||||
if (!this.queryParams.dateRange || this.queryParams.dateRange.length !== 2 ||
|
||||
!this.queryParams.dateRange[0] || !this.queryParams.dateRange[1]) {
|
||||
this.$modal.msgError('请选择日期范围')
|
||||
return
|
||||
}
|
||||
|
||||
// 显示加载提示
|
||||
this.$modal.loading('正在导出数据，请稍候...')
|
||||
|
||||
// 获取所有数据
|
||||
const allData = await this.getAllData()
|
||||
|
||||
// 格式化日期范围用于文件名
|
||||
const startDate = this.$dayjs(this.queryParams.dateRange[0]).format('YYYY-MM-DD')
|
||||
const endDate = this.$dayjs(this.queryParams.dateRange[1]).format('YYYY-MM-DD')
|
||||
const fileName = `出库报表_${startDate}_${endDate}.xlsx`
|
||||
|
||||
// 创建工作簿
|
||||
const workbook = new ExcelJS.Workbook()
|
||||
const worksheet = workbook.addWorksheet('出库报表')
|
||||
|
||||
// 设置列标题和样式
|
||||
const columns = [
|
||||
{ header: '物料编号', key: 'partnumber', width: 20 },
|
||||
{ header: '物料名称', key: 'description', width: 30 },
|
||||
{ header: '数量', key: 'changeQuantity', width: 15 },
|
||||
{ header: '操作人', key: 'createdBy', width: 15 },
|
||||
{ header: '操作时间', key: 'createdTime', width: 20 }
|
||||
]
|
||||
worksheet.columns = columns
|
||||
|
||||
// 设置标题行样式
|
||||
const headerRow = worksheet.getRow(1)
|
||||
headerRow.font = { bold: true }
|
||||
headerRow.alignment = { horizontal: 'center' }
|
||||
|
||||
// 添加日期范围行
|
||||
const dateRangeRow = worksheet.addRow([`日期范围: ${startDate} 至 ${endDate}`])
|
||||
dateRangeRow.font = { bold: true }
|
||||
dateRangeRow.alignment = { horizontal: 'left' }
|
||||
worksheet.addRow([]) // 添加空行
|
||||
|
||||
// 添加数据行
|
||||
allData.forEach(item => {
|
||||
worksheet.addRow({
|
||||
partnumber: item.partnumber,
|
||||
description: item.description,
|
||||
changeQuantity: item.changeQuantity,
|
||||
createdBy: item.createdBy,
|
||||
createdTime: item.createdTime
|
||||
})
|
||||
})
|
||||
|
||||
// 生成Excel文件
|
||||
const buffer = await workbook.xlsx.writeBuffer()
|
||||
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
||||
|
||||
// 下载文件
|
||||
saveAs(blob, fileName)
|
||||
|
||||
// 隐藏加载提示
|
||||
this.$modal.closeLoading()
|
||||
} catch (error) {
|
||||
// 隐藏加载提示
|
||||
this.$modal.closeLoading()
|
||||
this.$modal.msgError('导出失败: ' + error.message)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取所有数据用于导出
|
||||
async getAllData() {
|
||||
return new Promise((resolve) => {
|
||||
// 显示加载提示
|
||||
this.$message({
|
||||
message: '正在准备导出数据，请稍候...',
|
||||
type: 'info',
|
||||
duration: 0 // 不自动关闭
|
||||
})
|
||||
|
||||
// 构造查询参数
|
||||
const params = {
|
||||
...this.queryParams,
|
||||
startTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[0]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
endTime: this.queryParams.dateRange ? this.$dayjs(this.queryParams.dateRange[1]).format('YYYY-MM-DD HH:mm:ss') : undefined,
|
||||
partNumber: this.queryParams.partNumber,
|
||||
materialName: this.queryParams.materialName,
|
||||
operator: this.queryParams.operator,
|
||||
source: this.queryParams.source
|
||||
}
|
||||
delete params.dateRange
|
||||
|
||||
// 分页获取所有数据
|
||||
const allResults = []
|
||||
const fetchPage = (pageNum) => {
|
||||
getOutboundReportByPage({ ...params, pageNum, pageSize: 1000 }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const results = res.data.result || []
|
||||
allResults.push(...results)
|
||||
|
||||
// 如果还有更多数据，继续获取下一页
|
||||
if (allResults.length < res.data.totalNum) {
|
||||
fetchPage(pageNum + 1)
|
||||
} else {
|
||||
// 关闭加载提示
|
||||
this.$message.closeAll()
|
||||
resolve(allResults)
|
||||
}
|
||||
} else {
|
||||
// 关闭加载提示
|
||||
this.$message.closeAll()
|
||||
this.$message({
|
||||
message: '获取导出数据失败',
|
||||
type: 'error'
|
||||
})
|
||||
resolve([])
|
||||
}
|
||||
}).catch(() => {
|
||||
// 关闭加载提示
|
||||
this.$message.closeAll()
|
||||
this.$message({
|
||||
message: '获取导出数据失败',
|
||||
type: 'error'
|
||||
})
|
||||
resolve([])
|
||||
})
|
||||
}
|
||||
|
||||
// 开始获取第一页数据
|
||||
fetchPage(1)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些自定义样式 */
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user