wms_vue/src/view/wms/warehouse/statistics/skuNeed/index.vue

<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 查询表单 -->
      <a-col :span="24">
        <a-card>
          <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
        </a-card>
      </a-col>
      <!-- 区域出入口列表 -->
      <a-col :span="24">
        <a-card>
          <pro-table ref="tableRef" :fetch="fetch" :columns="columns" :toolbar="toolbar" :operate="operate"
            :param="state.param" :pagination="pagination">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <save :visible="state.visibleSave" @close="closeSave"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </page-layout>
</template>

<script>
  import save from './modal/save.vue';
  import edit from './modal/edit.vue';
  import {
    page
  } from "@/api/wms/skuNeedStatistics";
  import {
    reactive,
    createVNode,
    ref
  } from 'vue';


  export default {
    components: {
      save,
      edit,
    },
    setup() {

      const tableRef = ref();
      /// 列配置
      const columns = [{
          dataIndex: "date",
          key: "date",
          title: "日期",
          width: 60
        },
        {
          dataIndex: "skuCode",
          key: "skuCode",
          title: "物料编号",
          width: 80
        },
        {
          dataIndex: "skuName",
          key: "skuName",
          title: "物料名称",
          width: 150,
        },
        {
          dataIndex: "totalSkuNeedQty",
          key: "totalSkuNeedQty",
          title: "总需求数量",
          width: 80
        },
        {
          dataIndex: "mesLocCode",
          key: "mesLocCode",
          title: "接收工位",
          width: 80
        },
        {
          dataIndex: "totalSkuJoinQty",
          key: "totalSkuJoinQty",
          title: "总交接数量",
          width: 80
        },
        {
          dataIndex: "totalSkuInTransitQty",
          key: "totalSkuInTransitQty",
          title: "在途数量",
          width: 80
        },
        {
          dataIndex: "totalSkuShortageQty",
          key: "totalSkuShortageQty",
          title: "交接短缺数量",
          width: 80
        }
      ];

      /// 数据来源 [模拟]
      const fetch = async (param) => {
        var response = await page(param);
        return {
          total: response.data.total,
          data: response.data.record,
        };
      };


      /// 工具栏
      const toolbar = [

      ];

      /// 行操作
      const operate = [

      ];

      /// 分页参数
      const pagination = {
        pageNum: 1,
        pageSize: 20,
        showSizeChanger: true, // 显示可改变每页条数
        pageSizeOptions: ["10", "20", "50", "100"], // 每页条数选项设置
        showTotal: total => `共 ${total} 条记录`, // 显示总条数
        showSizeChange: (current, pageSize) => (this.pageSize = pageSize) // 改变每页条数时更新显示
      }

      /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
      const state = reactive({
        selectedRowKeys: [],
        param: {},
        visibleSave: false,
        visibleEdit: false,
        recordEdit: {},
        recordInfo: {},
      })

      //界面头部-查询框
      const searchParam = [{
          key: "timeRange",
          type: "rangePicker",
          label: "日期范围"
        },{
          key: "skuCode",
          type: "input",
          label: "物料编号"
        }
      //   ,{
      //   key: "skuType",
      //   type: "select",
      //   label: "物料类型",
      //   options: [{
      //     value: '包装箱',
      //     text: '包装箱',
      //   }, {
      //     value: '观察窗',
      //     text: '观察窗',
      //   }, {
      //     value: '台面',
      //     text: '台面',
      //   }, {
      //     value: '手把',
      //     text: '手把',
      //   }, {
      //     value: '前板',
      //     text: '前板',
      //   },{
      //     value: '内衬',
      //     text: '内衬',
      //   }, {
      //     value: 'KTP001',
      //     text: '空托盘',
      //   }]
      // },
    ]

      const search = function(value) {
        state.param = value
      }

      // const closeSave = function() {
      //   tableRef.value.reload();
      //   state.visibleSave = false
      // }

      // const closeEdit = function() {
      //   tableRef.value.reload();
      //   state.visibleEdit = false
      // }

      const onSelectChange = selectedRowKeys => {
        state.selectedRowKeys = selectedRowKeys;
      };

      return {
        state, // 状态共享
        fetch, // 数据回调
        toolbar, // 工具栏
        columns, // 列配置
        operate, // 行操作
        pagination, // 分页配置

        search,
        searchParam, // 查询参数

        // closeSave,
        // closeEdit,

        onSelectChange,
        tableRef
      };
    },
  };
</script>