wms_vue/src/view/wms/billsInfo/outBill/index.vue

<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24" style="height: 100%;">
          <a-card>
            <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
            <!-- 列表 -->
            <pro-table style="margin-top: 20px;" 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: 50%;">
          <a-card>
            <outBillDetail :visible="state.visibleDetail" :record="state.recordDetail"></outBillDetail>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
    <addOutBillDetail :visible="state.visibleSave" @close="closeSave" :record="state.currentBill"></addOutBillDetail>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </div>
</template>
<script>
  import addOutBillDetail from './addOutBillDetail/addOutBillDetail.vue';
  import edit from './modal/edit.vue';
  import data from './modal/outBillDetail.vue';
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    remove,
    removeBatch,
    billsAllot,
    billsConform,
    billsExecute,
    billsCancelAllot
  } from "@/api/wms/outBill";
  import {
    reactive,
    createVNode,
    ref,
    toRaw
  } from 'vue';
  const removeKey = "remove";
  const removeBatchKey = "removeBatch";
  const billsAllotKey = "billsAllot";
  const billsConformKey = "billsConform";
  const billsExecuteKey = "billsExecute";
  const billsCancelAllotKey = "billsCancelAllot";

  export default {
    components: {
      addOutBillDetail,
      edit,
      outBillDetail: data,
    },
    setup() {

      const tableRef = ref()

      const columns = [{
          dataIndex: "invoiceCode",
          key: "invoiceCode",
          title: "单据号",
          showSearch:true,
          width: 200,
        }, {
          dataIndex: "extCode",
          key: "extCode",
          title: "外部单据号",
          showSearch:true,
          width: 200,
        },
        {
          dataIndex: "priority",
          key: "priority",
          title: "优先级",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'priority'
          },
        },
        {
          dataIndex: "businessType",
          key: "businessType",
          title: "业务类型",
          showSearch:true,
          width: 100,
        },
        {
          dataIndex: "deliver",
          key: "deliver",
          title: "搬运类型",
          showSearch:true,
          width: 130,
        },
        {
          dataIndex: "platform",
          key: "platform",
          title: "卸货站台",
          showSearch:true,
          width: 100,
        },
        {
          dataIndex: "truckCode",
          key: "truckCode",
          title: "车牌号",
          showSearch:true,
          width: 100,
        },
        {
          dataIndex: "driver",
          key: "driver",
          title: "司机",
          showSearch:true,
          width: 100,
        },
        {
          dataIndex: "telephone",
          key: "telephone",
          title: "联系电话",
          showSearch:true,
          width: 200,
        },
        {
          dataIndex: "customer",
          key: "customer",
          title: "客户",
          showSearch:true,
          width: 100,
        },
        {
          dataIndex: "status",
          key: "status",
          title: "单据状态",
          width: 100,
          dictionary: {
            type: 'tag',
            code: 'outBillStatus'
          },
        },
        {
          dataIndex: "allotStatus",
          key: "allotStatus",
          title: "单据分配状态",
          width: 130,
        },
        {
          dataIndex: "beginDate",
          key: "beginDate",
          title: "开始时间",
          width: 200,
        },
        {
          dataIndex: "endDate",
          key: "endDate",
          title: "结束时间",
          width: 200,
        },

        {
          dataIndex: "createBy",
          key: "createBy",
          title: "录入人",
          width: 120,
        },
        {
          dataIndex: "createTime",
          key: "createTime",
          title: "录入时间",
          width: 200,
        },
        {
          dataIndex: "updateBy",
          key: "updateBy",
          title: "修改人",
          width: 120,
        },
        {
          dataIndex: "updateTime",
          key: "updateTime",
          title: "修改时间",
          width: 200,
        },
        {
          dataIndex: "remark",
          key: "remark",
          title: "备注",
          width: 100,
        },
      ];


      /// 数据来源 [模拟]
      const fetch = async (param) => {
        var response = await page(param);
        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: "删除失败",
                  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
                })
              }
            })
          }
        });
      }

      // billAllot 分配单据
      const billAllotMethod = (ids) => {
        if (ids == undefined || ids.length == 0) {
          message.error({
            content: "请先选择需要操作的单据信息",
            key: billsAllotKey,
            duration: 1
          })
          return;
        }
        Modal.confirm({
          title: '您是否确定要分配选择的数据?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: billsAllotKey
            });
            billsAllot(toRaw(ids)).then((response) => {
              if (response.success) {
                message.success({
                  content: "单据分配成功",
                  key: billsAllotKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.error({
                  content: "单据分配失败",
                  key: billsAllotKey,
                  duration: 1
                })
              }
            })
          }
        });
      }
      //billsConform 确认单据
      const billsConformMethod = (ids) => {
        if (ids == undefined || ids.length == 0) {
          message.error({
            content: "请先选择需要操作的单据信息",
            key: billsConformKey,
            duration: 1
          })
          return;
        }
        Modal.confirm({
          title: '您是否确定要确认选择的数据?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: billsConformKey
            });
            billsConform(toRaw(ids)).then((response) => {
              if (response.success) {
                message.success({
                  content: "单据确认成功",
                  key: billsConformKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.error({
                  content: "单据确认失败",
                  key: billsConformKey,
                  duration: 1
                })
              }
            })
          }
        });
      }
      //billsExecute 执行单据
      const billsExecuteMethod = (ids) => {
        if (ids == undefined || ids.length == 0) {
          message.error({
            content: "请先选择需要操作的单据信息",
            key: billsExecuteKey,
            duration: 1
          })
          return;
        }
        Modal.confirm({
          title: '您是否确定要执行选择的数据?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: billsExecuteKey
            });
            billsExecute(toRaw(ids)).then((response) => {
              if (response.success) {
                message.success({
                  content: "单据执行成功",
                  key: billsExecuteKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.error({
                  content: "单据执行失败",
                  key: billsExecuteKey,
                  duration: 1
                })
              }
            })
          }
        });
      }
      //billsCancelAllot 取消分配
      const billsCancelAllotMethod = (ids) => {
        if (ids == undefined || ids.length == 0) {
          message.error({
            content: "请先选择需要操作的单据信息",
            key: billsCancelAllotKey,
            duration: 1
          })
          return;
        }
        Modal.confirm({
          title: '您是否确定要取消分配选择的数据?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: billsCancelAllotKey
            });
            billsCancelAllot(toRaw(ids)).then((response) => {
              if (response.success) {
                message.success({
                  content: "单据取消分配成功",
                  key: billsCancelAllotKey,
                  duration: 1
                }).then(() => {
                  tableRef.value.reload()
                })
              } else {
                message.error({
                  content: "单据取消分配失败",
                  key: billsCancelAllotKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      /// 工具栏
      const toolbar = [{
          label: "新增",
          code: "wms:outBill:add",
          event: function() {
            state.currentBill = {}
            state.visibleSave = true
          }
        },
        {
          label: "删除",
          code: "wms:outBill:removeBatch",
          event: function() {
            removeBatchMethod(state.selectedRowKeys)
          },
          type: 'danger'
        },
        {
          label: "分配",
          code: "wms:outBill:allot",
          event: function() {
            billAllotMethod(state.selectedRowKeys)
          }
        },
        {
          label: "确认",
          code: "wms:outBill:confirm",
          event: function() {
            billsConformMethod(state.selectedRowKeys)
          }
        },
        {
          label: "执行",
          code: "wms:outBill:execute",
          event: function() {
            billsExecuteMethod(state.selectedRowKeys)
          }
        },
        {
          label: "取消分配",
          code: "wms:outBill:CancelAllot",
          event: function() {
            billsCancelAllotMethod(state.selectedRowKeys)
          }
        },
      ];

      /// 行操作
      const operate = [{
          label: "查看",
          code: "wms:outBill:look",
          event: function(record) {
            console.log(record)
            state.visibleDetail = true, state.recordDetail = record
          }
        },
        {
          label: "修改",
          code: "wms:outBill:edit",
          event: function(record) {
            console.log("这里")
            state.visibleEdit = true, state.recordEdit = record
          }
        },
        {
          label: "删除",
          code: "wms:outBill:remove",
          event: function(record) {
            removeMethod(record)
          }
        },
        // {
        //   label: "新增明细",
        //   event: function(record) {
        //     state.currentBill = record
        //     state.visibleSave = true
        //   }
        // },
      ];



      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: [],
        param: {

        },
        visibleEdit: false,
        visibleSave: false,
        visibleDetail: false,

        recordDetail: {},
        recordEdit: {},
        currentBill: {},

      });

      const searchParam = [{
          key: "invoiceCode",
          type: "input",
          label: "单据号"
        },
        {
          key: "extCode",
          type: "input",
          label: "外部单据号"
        },
      ]

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

      }

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

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

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

      return {
        state,
        fetch,
        search,
        toolbar,
        columns,
        operate,
        closeSave,
        closeEdit,
        pagination,
        searchParam,
        onSelectChange,
        tableRef
      };
    },
  };
</script>