wms_vue/src/view/wms/stockInfo/pallet/index.vue

<template>
  <div>
    <page-layout>
      <a-row :gutter="[0,2]">
        <a-col :span="24" style="height: 100%;">
          <a-card style="width: 100%;">
            <!-- 列表 -->
            <pro-table rowKey="id" ref="tableRef" :fetch="fetch" :columns="columns" :toolbar="toolbar"
              :operate="operate" :param="state.param" :pagination="pagination"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
            </pro-table>
          </a-card>
        </a-col>
        <a-col :span="24" style="height: 70%;">
          <a-card style="width: 100%;">
            <viewPalletDetail :visible="state.visiblePalletDetail" :record="state.recordPalletDetail"
              :projectReload="projectReload">
            </viewPalletDetail>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
    <save :visible="state.visibleSave" @close="closeSave"></save>
    <checkOut :visible="state.visibleCheck" :palletInfo="state.checkOutPalletInfo" @close="closeCheck"></checkOut>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import save from './modal/save.vue';
  import edit from './modal/edit.vue';
  import checkOut from './modal/checkOut.vue';
  import palletDetail from './modal/palletDetail.vue';
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';

  import {
    page,
    remove,
    removeBatch
  } from "@/api/wms/pallet";
  import {
    reactive,
    createVNode,
    ref,
  } from 'vue';
  const removeKey = "remove";
  const removeBatchKey = "removeBatch";
  const showCheckOutModelKey = "showCheckOutModel";

  export default {
    components: {
      save,
      edit,
      checkOut,
      viewPalletDetail: palletDetail,

    },
    setup() {

      const tableRef = ref()

      const switchFormat = {
        yes: true,
        no: false,
        event: function(value, record) {
          record.enable = !record.enable;
          return value;
        }
      }

      const columns = [{
          dataIndex: "palletCode",
          key: "palletCode",
          title: "托盘号",
          width: 120,
          showSearch: true,
        },
        {
          dataIndex: "palletType",
          key: "palletType",
          title: "托盘类型",
          width: 120,
        },
        {
          dataIndex: "sizeType",
          key: "sizeType",
          title: "托盘大小",
          width: 120,
        },
        {
          dataIndex: "fullFlag",
          key: "fullFlag",
          title: "满盘标志",
          width: 120,
          dictionary: {
            type: 'tag',
            code: 'FullFlag'
          }
        },
        {
          dataIndex: "locCode",
          key: "locCode",
          title: "托盘位置",
          width: 150,
          showSearch: true,
        },
        {
          dataIndex: "status",
          key: "status",
          title: "托盘状态",
          width: 100,
        },
        {
          dataIndex: "jobFlag",
          key: "jobFlag",
          title: "任务标志",
          width: 100
        },
        {
          dataIndex: "createBy",
          key: "createBy",
          title: "录入人",
          width: 100,
        },
        {
          dataIndex: "createTime",
          key: "createTime",
          title: "录入时间",
          width: 180,
        },
        {
          dataIndex: "updateBy",
          key: "updateBy",
          title: "修改人",
          width: 100,
        },
        {
          dataIndex: "updateTime",
          key: "updateTime",
          title: "修改时间",
          width: 180,
        },
        {
          dataIndex: "remark",
          key: "remark",
          title: "备注",
          width: 200,
        },
      ];


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

      // 删除数据
      const removeMethod = (record) => {
        modal.confirm({
          title: '您是否确定要删除?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: removeKey
            });
            remove({
              "id": record.id
            }).then((response) => {
              if (response.success) {
                message.success({
                  content: "删除成功",
                  key: removeKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.error({
                  content: response.msg,
                  key: removeKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      // 批量删除
      const removeBatchMethod = (ids) => {
        modal.confirm({
          title: '您是否确定要删除?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: removeBatchKey
            });
            removeBatch({
              "ids": ids
            }).then((response) => {
              if (response.success) {
                message.success({
                  content: "删除成功",
                  key: removeBatchKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.error({
                  content: "删除失败",
                  key: removeBatchKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      //指定托盘抽检出库
      const showPickOutModel = () => {
        //获取选中的行数据
        if (state.selectedRowKeys.length == 0) {
          message.error({
            content: "请想选择需要抽检出库的托盘",
            key: showCheckOutModelKey,
            duration: 2
          })
          return;
        }
        if (state.selectedRowKeys.length > 1) {
          message.error({
            content: "一次操作只能抽检出一个托盘",
            key: showCheckOutModelKey,
            duration: 2
          })
          return;
        }
        state.checkOutPalletInfo = state.selectedRows[0]
        if (state.checkOutPalletInfo.locCode.length < 9) {
          message.error({
            content: "托盘所在位置为【"+state.checkOutPalletInfo.locCode+"】禁止抽检出库，只有货位上的托盘允许",
            key: showCheckOutModelKey,
            duration: 2
          })
          return;
        }
        if (state.checkOutPalletInfo.jobFlag.length > 0) {
          message.error({
            content: "托盘存在未完成的任务【"+state.checkOutPalletInfo.jobFlag+"】请检查",
            key: showCheckOutModelKey,
            duration: 2
          })
          return;
        }

        state.visibleCheck = true
      }


      /// 工具栏
      const toolbar = [
        // {
        //   label: "新增",
        //   code: "wms:pallet:add",
        //   event: function() {
        //     state.visibleSave = true
        //   }
        // },
        // {
        //   label: "删除",
        //   code: "wms:pallet:removeBatch",
        //   event: function() {
        //     removeBatchMethod(state.selectedRowKeys)
        //   },
        //   type: 'danger'
        // },
        // {
        //   label: "抽检出库",
        //   code: "wms:pallet:checkOut",
        //   event: function() {
        //     showPickOutModel()
        //   },
        //   type: 'danger'
        // },
      ];

      /// 行操作
      const operate = [{
          label: "查看明细",
          event: function(record) {
            state.visiblePalletDetail = true, state.recordPalletDetail = record
          }
        },
        {
          label: "删除",
          code: "wms:pallet:remove",
          event: function(record) {
            removeMethod(record)
          }
        },
      ];

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

      const state = reactive({
        selectedRowKeys: [],
        selectedRows: [],
        param: {},
        visibleEdit: false,
        visibleSave: false,
        visibleCheck: false,
        visiblePalletDetail: false,
        recordPalletDetail: {},
        recordEdit: {},
        checkOutPalletInfo: {}, //需要抽检出库的托盘信息
      });

      const search = function(value) {
        console.log("主表查询" + JSON.stringify(value))
        console.log(value)
        state.param = value
        tableRef.value.reload()

      }

      const onSelectChange = (selectedRowKeys, selectedRows) => {
        state.selectedRowKeys = selectedRowKeys;
        state.selectedRows = selectedRows;
      };

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

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

      const closeCheck = function() {
        state.visibleCheck = false
        tableRef.value.reload()
      }


      return {
        state,
        fetch,
        search,
        toolbar,
        columns,
        operate,
        closeSave,
        closeEdit,
        closeCheck,
        pagination,
        onSelectChange,
        tableRef,
      };

    }
  }
</script>