<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.queryParams.scheduleAgreement" 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 
        :columnWidth="null"
        :tableData="state.tableData"
        :tableColumns="state.tableColumns"
        :pageParams="state.pageParams"
        @pageSizeChange="handleQuery"
        @pageCurrentChange="handleQuery"
      ></tablePage>
    </el-card>
  </div>
</template>

<script setup>
defineOptions({ name: 'supplierSaWeek' })
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 { useRoute } from 'vue-router'
const route = useRoute()

const state = reactive({
  apiName:'cherysuppliersaweek',
  loading: false,
  queryParams: {
    scheduleAgreement: ''
  },
  pageParams: {
    page: 1,
    pageSize: 10,
    total: 1
  },
  tableColumns: [
    {prop:'scheduleAgreement',title:'计划协议号',width:120},
    {prop:'serialNumber',title:'行项目号'},
    {prop:'materialCode',title:'零件号'},
    {prop:'materialDescription',title:'零件名称'},
    {prop:'purchasingGroup',title:'采购组'},
    {prop:'plantId',title:'工厂代码'},
    {prop:'quantityDemand',title:'需求数量'},
    {prop:'dateReceived',title:'交货日期',type:'datetime',width:180},
    {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({}, state.queryParams, state.pageParams))
    .then((resp) => {
      state.tableData = resp.data.data
      state.pageParams.total = resp.data.total 
    })
    .finally(() => (state.loading = false))
}

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

</script>

<style></style>
