删除多个不再使用的仓库管理相关Vue组件文件,包括库存、条码、入库出库等页面 新增物料管理模块的日报表功能,包括每日出库和入库报表 优化代码结构,移除冗余代码,提升模块可维护性
109 lines
3.9 KiB
Vue
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> |