赵正易 e4d0aecb80 refactor(仓库管理): 重构仓库管理模块,删除旧页面并新增物料管理报表
删除多个不再使用的仓库管理相关Vue组件文件,包括库存、条码、入库出库等页面
新增物料管理模块的日报表功能,包括每日出库和入库报表
优化代码结构,移除冗余代码,提升模块可维护性
2025-08-14 18:30:46 +08:00

109 lines
3.9 KiB
Vue

<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>