QRAPI/Web/src/views/logisticsPlan/supplierMrpMonth/index.vue

<template>
  <div class="app-container" v-loading="state.loading">
    <!-- M+6月物料需求计划 -->
    <el-card class="search-container">
      <el-form :inline="true">
        <el-form-item label="零件号">
          <el-input 
            v-model="state.pageParams.filters.materialCode" 
            placeholder="零件号" 
            clearable 
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery(1)" icon="Search" v-auth="state.apiName + ':page'">查询</el-button>
          <el-button @click="handleExport()" icon="TopRight" v-auth="state.apiName + ':export'" type="success">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="paged-table-container">
      <tablePage 
        :tableData="state.tableData"
        :tableColumns="state.tableColumns"
        :pageParams="state.pageParams"
        @pageSizeChange="handleQuery"
        @pageCurrentChange="handleQuery"
      ></tablePage>
    </el-card>
  </div>
</template>

<script setup>
defineOptions({ name: 'supplierMrpMonth' })
import { reactive, ref, onMounted } from 'vue'
import { getCommonPaged,postCommonExport } from '@/api/common/index'
import { downloadByData } from '@/utils/download'
import { ElMessageBox, ElMessage } from 'element-plus'
import tablePage from '@/components/tablePage/index.vue'
import EnumList from '@/utils/common/enumList'
import { getPageParamsForFilter } from '@/utils/common/index'

import { useRoute } from 'vue-router'
const route = useRoute()

const state = reactive({
  apiName:'cherysuppliermrpmonth',
  loading: false,
  pageParams: {
    page: 1,
    pageSize: 10,
    total: 1,
    filters: {
      materialCode: null
    },
  },
  tableColumns: [
    {prop:'releaseEdition',title:'需求发布版次',width:120},
    {prop:'materialCode',title:'零件号'},
    {prop:'materialDescription',title:'零件名称'},
    {prop:'plantId',title:'工厂代码'},
    {prop:'plantName',title:'工厂名称'},
    {prop:'startMonth',title:'起始年月'},
    {prop:'quantityDemand1',title:'需求数量1'},
    {prop:'quantityDemand2',title:'需求数量2'},
    {prop:'quantityDemand3',title:'需求数量3'},
    {prop:'quantityDemand4',title:'需求数量4'},
    {prop:'quantityDemand5',title:'需求数量5'},
    {prop:'quantityDemand6',title:'需求数量6'},
    {prop:'quantityDemand7',title:'需求数量7'},
    {prop:'quantityDemand8',title:'需求数量8'},
    {prop:'quantityDemand9',title:'需求数量9'},
    {prop:'quantityDemand10',title:'需求数量10'},
    {prop:'quantityDemand11',title:'需求数量11'},
    {prop:'quantityDemand12',title:'需求数量12'},
    {prop:'isUpdate',title:'是否更新',type:'tagFilter',options:EnumList.whether},
    {prop:'createByUser',title:'创建人'},
    {prop:'createTime',title:'创建时间',type:'datetime',width:180},
    {prop:'updateByUser',title:'修改人'},
    {prop:'updateTime',title:'修改时间',type:'datetime',width:180},
    {prop:'isDelete',title:'是否删除',type:'tagFilter',options:EnumList.whether},
    {prop:'version',title:'版本号'},
  ],
  tableData: []
})

onMounted(() => {
  handleQuery(1)
})

// 查询
function handleQuery(page) {
  state.loading = true
  state.pageParams.page = page
  getCommonPaged(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
    .then((resp) => {
      state.tableData = resp.data.data
      state.pageParams.total = resp.data.totalPages
    })
    .finally(() => (state.loading = false))
}

// 导出
function handleExport(){
  state.loading = true
  postCommonExport(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
    .then((res) => {
      downloadByData(res.data,route.meta.title+'.xlsx')
    })
    .finally(() => (state.loading = false))
}

</script>

<style></style>