确认框，侧边栏弹出页面-CSDN博客

<template>
  <div class="flex flex-col">
    <!-- 搜索列 -->
    <Header :searchNum="2" :formConfig="searchConfig" @onQuery="search" @onReset="reset">
      <template #btnArea>
        <tips-icon icon="" mode="button" type="primary" @click="fn_sapDemandSplitting"
          >SAP需求拆分</tips-icon
        >
        <tips-icon icon="" mode="button" type="primary" @click="fn_showDialog"
          >生成拣料任务</tips-icon
        >
      </template>
    </Header>

    <base-table
      :page-opt="pageOpt"
      class="flex-1"
      ref="receiveOrderTableRef"
      :autoWidth="false"
      :columns="columns"
      :query-api="QueryData"
      :query-args="queryArgs"
    >
      <template #columns="{ column, currentRecord }">
        <lov-select
          detail
          v-if="column?.key == 'orderStatus'"
          class-name="Tj0WH_MaterialPicking"
          attr-name="orderStatus"
          v-model:value="currentRecord.orderStatus"
        ></lov-select>
        <lov-select
          detail
          v-if="column?.key == 'tj0splitOrNot'"
          class-name="Tj0WH_MaterialPicking"
          attr-name="tj0splitOrNot"
          v-model:value="currentRecord.tj0splitOrNot"
        ></lov-select>
        <lov-select
          detail
          v-if="column?.key == 'orderType'"
          class-name="ReceiveOrder"
          attr-name="orderType"
          v-model:value="currentRecord.orderType"
        ></lov-select>
        <lov-select
          detail
          v-if="column?.key == 'buyType'"
          class-name="ReceiveOrder"
          attr-name="buyType"
          v-model:value="currentRecord.buyType"
        ></lov-select>
        <lov-select
          detail
          v-if="column?.key == 'orderSource'"
          class-name="ReceiveOrder"
          attr-name="orderSource"
          v-model:value="currentRecord.orderSource"
        ></lov-select>
        <lov-select
          detail
          v-if="column?.key == 'qualityInspection'"
          class-name="ReceiveOrder"
          attr-name="qualityInspection"
          v-model:value="currentRecord.qualityInspection"
        ></lov-select>

        <display-user v-if="column?.key == 'creator'" :value="currentRecord.creator" />
      </template>
    </base-table>

    <menu-boll :btnList="btnList" @btnclickEmit="handleAction"></menu-boll>
    <!-- 锁定提示框 -->
    <n-modal
      v-model:visible="visible"
      style="width: 480px"
      @ok="fn_generatePickingTask_OK"
      :maskClosable="true"
      :confirmLoading="saveLoading"
    >
      <template #title> 提示 </template>
      <div style="height: 50px">
        <h6>是否对选择中数据，生成拣料任务并锁定？</h6>
      </div>
      <template #footer>
        <n-button type="primary" @click="fn_generatePickingTask_OK" :loading="saveLoading"
          >锁定</n-button
        >
        <n-button
          type="primary"
          @click="fn_generatePickingTask_NO"
          :loading="saveLoading2"
          >不锁定</n-button
        >
        <n-button style="margin-right: 8px" @click="onClose">取消</n-button>
      </template>
    </n-modal>
    <!-- 侧边栏页面弹框 -->
    <n-drawer
      v-model:visible="visible2"
      class="drawer-style"
      title="提示"
      width="500"
      :closable="true"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <div style="padding: 16px"></div>
      <template #footer>
        <n-button type="primary" @click="fn_generatePickingTask_OK">是</n-button>
        <n-button type="primary" @click="fn_generatePickingTask_NO">否</n-button>
        <n-button style="margin-right: 8px" @click="onClose">取消</n-button>
      </template>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  QueryData,
  sapDemandSplitting,
  generatePickingTask,
} from "@/api/wms/stockPreparation";
import { useMbdStore } from "@/store/modules/mbd";
import { useUserStore } from "@/store/modules/user";
import type { BaseTableExpose, QueryArgs } from "@/types/baseTable";
import WhsSelect from "@/views/mbd/components/WhsSelect.vue";
import dayjs from "dayjs";
import { Modal, message } from "n-designv3";
import { PageConfig } from "./extend";

import { EditOutlined, EyeOutlined, PlusOutlined } from "@nancal-icon/icons-vue";
import { json } from "stream/consumers";
const saveLoading = ref<boolean>(false);
const saveLoading2 = ref<boolean>(false);
// 抽屉显示/隐藏
const visible = ref<boolean>(false);
const visible2 = ref<boolean>(false);
// 隐藏
const onClose = () => {
  visible.value = false;
};
// 隐藏
const onSave = () => {
  onClose();
};
const { t } = useI18n();
const router = useRouter();
const mbdStore = useMbdStore();
const userStore = useUserStore();
const { columns, searchConfig, formConfig, langMap } = PageConfig;
const receiveOrderTableRef = ref<BaseTableExpose>();
const queryArgs: QueryArgs = reactive({
  attrSet: [],
  condition: [],
  sorts: [
    {
      name: "createAt",
      sort: "desc",
    },
  ],
  page: {
    pageNo: 1,
    pageSize: 30,
  },
});
const pageOpt = {
  pageSize: 30,
  pageSizeOptions: ["30", "50", "100"],
};

const search = (model: any) => {
  queryArgs.page!.pageNo = 1;
  receiveOrderTableRef.value?.setQueryArgs(model);
  receiveOrderTableRef.value?.refreshList();
};
const reset = () => {
  queryArgs.page!.pageNo = 1;
  receiveOrderTableRef.value?.setQueryArgs({}, true);
  receiveOrderTableRef.value?.refreshList();
};

const init = () => {
  refreshData();
  mbdStore.setWarehouseModelTree(true);
};

const refreshData = () => {
  queryArgs.page!.pageNo = 1;
  receiveOrderTableRef.value?.refreshList();
};
//拆分
const fn_sapDemandSplitting = () => {
  const selectedRows = receiveOrderTableRef.value?.getSelectedRows();
  if (!selectedRows?.length) return message.warn(t("common.noDataMsg"));
  let title = "是否对选择中数据，进行拆分？";
  Modal.confirm({
    title,
    cancelText: t("common.cancel"),
    okText: t("common.confirm"),
    onOk: () => {
      receiveOrderTableRef.value?.setLoading(true);
      sapDemandSplitting(selectedRows)
        .then((res) => {
          message.success(t("common.operateSuccess"));
          refreshData();
        })
        .finally(() => {
          receiveOrderTableRef.value?.setLoading();
        });
    },
  });
};
const fn_showDialog = () => {
  visible.value = true;
};

//生成拣料任务，并锁定
const fn_generatePickingTask_OK = () => {
  const selectedRows = receiveOrderTableRef.value?.getSelectedRows();
  if (!selectedRows?.length) return message.warn(t("common.noDataMsg"));
  let title = "是否对选择中数据，生成拣料任务并锁定？";

  receiveOrderTableRef.value?.setLoading(true);
  selectedRows.map((q) => {
    return (q.lock = 1);
  });
  saveLoading.value = true;
  generatePickingTask(selectedRows)
    .then((res) => {
      message.success(t("common.operateSuccess"));
      refreshData();
    })
    .finally(() => {
      onClose();
      saveLoading.value = false;
      receiveOrderTableRef.value?.setLoading();
    });
};
//生成拣料任务，不锁定
const fn_generatePickingTask_NO = () => {
  const selectedRows = receiveOrderTableRef.value?.getSelectedRows();
  if (!selectedRows?.length) return message.warn(t("common.noDataMsg"));
  selectedRows.map((q) => {
    return (q.lock = 0);
  });
  console.log("selectedRows====", JSON.stringify(selectedRows));
  saveLoading2.value = true;
  generatePickingTask(selectedRows)
    .then((res) => {
      message.success(t("common.operateSuccess"));
      refreshData();
    })
    .finally(() => {
      onClose();
      saveLoading2.value = false;
      receiveOrderTableRef.value?.setLoading();
    });
};
//生成拣料任务
const fn_generatePickingTask = () => {
  const selectedRows = receiveOrderTableRef.value?.getSelectedRows();
  if (!selectedRows?.length) return message.warn(t("common.noDataMsg"));
  let title = "是否对选择中数据，生成拣料任务并锁定？";

  Modal.confirm({
    title,
    closable: true,
    maskClosable: true,
    cancelText: "否",
    okText: "是",
    onOk: () => {
      receiveOrderTableRef.value?.setLoading(true);
      selectedRows.map((q) => {
        return (q.lock = 1);
      });
      generatePickingTask(selectedRows)
        .then((res) => {
          message.success(t("common.operateSuccess"));
          refreshData();
        })
        .finally(() => {
          onClose();
          saveLoading.value = false;
          receiveOrderTableRef.value?.setLoading();
        });
    },
    onCancel: () => {
      selectedRows.map((q) => {
        return (q.lock = 0);
      });
      console.log("selectedRows====", JSON.stringify(selectedRows));

      generatePickingTask(selectedRows)
        .then((res) => {
          message.success(t("common.operateSuccess"));
          refreshData();
        })
        .finally(() => {
          onClose();
          saveLoading.value = false;
          receiveOrderTableRef.value?.setLoading();
        });
    },
  });
};
const btnList = [
  //{ type: "create", icon: PlusOutlined, name: "新 建" },
  // { type: "edit", icon: EditOutlined, name: "编 辑" },
  { type: "view", icon: EyeOutlined, name: "详 情" },
];
const handleAction = (e: string) => {
  let selectedRows = receiveOrderTableRef.value?.getSelectedRows();
  let record = selectedRows?.[0];

  switch (e) {
    case "edit":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);

      router.push({
        name: "WmsStockPreparationDetails",
        query: {
          type: "edit",
          objId: record.objId,
        },
      });
      break;
    case "view":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);
      router.push({
        name: "WmsStockPreparationDetails",
        query: {
          type: "detail",
          objId: record.objId,
        },
      });
      break;
    case "delete":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);
      Modal.confirm({
        title: t("common.delMsg"),
        cancelText: t("common.cancel"),
        okText: t("common.confirm"),
        async onOk() {
          receiveOrderTableRef.value?.setLoading(true);
          batchDelReceiveOrder(selectedRows?.map((it) => it.objId))
            .then((res) => {
              message.success(t("common.operateSuccess"));
              refreshData();
            })
            .finally(() => {
              receiveOrderTableRef.value?.setLoading();
            });
        },
      });

      break;
    default:
      break;
  }
};

onMounted(() => {
  init();
});
</script>

<style scoped lang="less">
.table-box-2 {
  > div {
    height: 50%;
  }
}
</style>