feat(workorder): 工单工序列表支持拖拽排序功能

云

23 分钟以前 46b2ae1c889e181ebe186de3758fc09804696029

 src/views/mes/pro/workorder/index.vue

@@ -1,154 +1,153 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
  import type { VxeTableGridOptions } from "#/adapter/vxe-table";
  import type { MesProWorkOrderApi } from "#/api/mes/pro/workorder";

import { ref } from 'vue';
  import { ref } from "vue";

import { Page, useVbenModal } from '../../../../packages/effects/common-ui/src';
import {
  BarcodeBizTypeEnum,
  MesProWorkOrderStatusEnum,
  MesProWorkOrderTypeEnum,
} from '../../../../packages/constants/src';
import { downloadFileFromBlobPart } from '../../../../packages/utils/src';
  import { Page, useVbenModal } from "@vben/common-ui";
  import {
    BarcodeBizTypeEnum,
    MesProWorkOrderStatusEnum,
    MesProWorkOrderTypeEnum,
  } from "@vben/constants";
  import { downloadFileFromBlobPart } from "@vben/utils";

import { Button, message } from 'ant-design-vue';
  import { Button, message } from "ant-design-vue";

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  cancelWorkOrder,
  deleteWorkOrder,
  exportWorkOrder,
  getWorkOrderPage,
} from '#/api/mes/pro/workorder';
import { $t } from '#/locales';
import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
  import { ACTION_ICON, TableAction, useVbenVxeGrid } from "#/adapter/vxe-table";
  import {
    cancelWorkOrder,
    deleteWorkOrder,
    exportWorkOrder,
    getWorkOrderPage,
  } from "#/api/mes/pro/workorder";
  import { $t } from "#/locales";
  import { BarcodeDetail } from "#/views/wls/barcode/components";

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
  import { useGridColumns, useGridFormSchema } from "./data";
  import Form from "./modules/form.vue";

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗

/** 刷新表格 */
function handleRefresh() {
  gridApi.query();
}

/** 创建工单 */
function handleCreate() {
  formModalApi.setData({ formType: 'create' }).open();
}

/** 新增子工单 */
function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
  formModalApi.setData({ formType: 'create', parentRow: row }).open();
}

/** 查看工单详情 */
function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
  formModalApi.setData({ formType: 'detail', id: row.id }).open();
}

/** 编辑工单 */
function handleEdit(row: MesProWorkOrderApi.WorkOrder) {
  formModalApi.setData({ formType: 'update', id: row.id }).open();
}

/** 完成工单 */
function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
  formModalApi.setData({ formType: 'finish', id: row.id }).open();
}

/** 删除工单 */
async function handleDelete(row: MesProWorkOrderApi.WorkOrder) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.code]),
    duration: 0,
  const [FormModal, formModalApi] = useVbenModal({
    connectedComponent: Form,
    destroyOnClose: true,
  });
  try {
    await deleteWorkOrder(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
    handleRefresh();
  } finally {
    hideLoading();

  const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗

  /** 刷新表格 */
  function handleRefresh() {
    gridApi.query();
  }
}

/** 取消工单 */
async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
  await cancelWorkOrder(row.id!);
  message.success('工单已取消');
  handleRefresh();
}
  /** 创建订单 */
  function handleCreate() {
    formModalApi.setData({ formType: "create" }).open();
  }

/** 查看工单条码 */
function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
  barcodeDetailRef.value?.openByBusiness(
    row.id!,
    BarcodeBizTypeEnum.WORKORDER,
    row.code,
    row.name,
  );
}
  /** 新增子订单 */
  function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
    formModalApi.setData({ formType: "create", parentRow: row }).open();
  }

/** 导出表格 */
async function handleExport() {
  const data = await exportWorkOrder(await gridApi.formApi.getValues());
  downloadFileFromBlobPart({ fileName: '生产工单.xls', source: data });
}
  /** 查看订单详情 */
  function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
    formModalApi.setData({ formType: "detail", id: row.id }).open();
  }

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getWorkOrderPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
  /** 编辑订单 */
  function handleEdit(row: MesProWorkOrderApi.WorkOrder) {
    formModalApi.setData({ formType: "update", id: row.id }).open();
  }

  /** 完成订单 */
  function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
    formModalApi.setData({ formType: "finish", id: row.id }).open();
  }

  /** 删除订单 */
  async function handleDelete(row: MesProWorkOrderApi.WorkOrder) {
    const hideLoading = message.loading({
      content: $t("ui.actionMessage.deleting", [row.code]),
      duration: 0,
    });
    try {
      await deleteWorkOrder(row.id!);
      message.success($t("ui.actionMessage.deleteSuccess", [row.code]));
      handleRefresh();
    } finally {
      hideLoading();
    }
  }

  /** 取消订单 */
  async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
    await cancelWorkOrder(row.id!);
    message.success("订单已取消");
    handleRefresh();
  }

  /** 查看订单条码 */
  function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
    barcodeDetailRef.value?.openByBusiness(
      row.id!,
      BarcodeBizTypeEnum.WORKORDER,
      row.code,
      row.name
    );
  }

  /** 导出表格 */
  async function handleExport() {
    const data = await exportWorkOrder(await gridApi.formApi.getValues());
    downloadFileFromBlobPart({ fileName: "生产订单.xls", source: data });
  }

  const [Grid, gridApi] = useVbenVxeGrid({
    formOptions: {
      schema: useGridFormSchema(),
    },
    gridOptions: {
      columns: useGridColumns(),
      height: "auto",
      keepSource: true,
      proxyConfig: {
        ajax: {
          query: async ({ page }, formValues) => {
            return await getWorkOrderPage({
              pageNo: page.currentPage,
              pageSize: page.pageSize,
              ...formValues,
            });
          },
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
    treeConfig: {
      parentField: 'parentId',
      rowField: 'id',
      transform: true,
      expandAll: true,
      reserve: true,
    },
  } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
});
      rowConfig: {
        keyField: "id",
        isHover: true,
      },
      toolbarConfig: {
        refresh: true,
        search: true,
      },
      treeConfig: {
        parentField: "parentId",
        rowField: "id",
        transform: true,
        expandAll: true,
        reserve: true,
      },
    } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
  });
</script>

<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />

    <Grid table-title="生产工单列表">
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <Grid table-title="生产订单列表">
      <template #toolbar-tools>
        <TableAction
          :actions="[
        <TableAction :actions="[
            {
              label: $t('ui.actionTitle.create', ['工单']),
              label: $t('ui.actionTitle.create', ['订单']),
              type: 'primary',
              icon: ACTION_ICON.ADD,
              auth: ['mes:pro-work-order:create'],
@@ -161,17 +160,16 @@
              auth: ['mes:pro-work-order:export'],
              onClick: handleExport,
            },
          ]"
        />
          ]" />
      </template>
      <template #code="{ row }">
        <Button type="link" @click="handleDetail(row)">
        <Button type="link"
                @click="handleDetail(row)">
          {{ row.code }}
        </Button>
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
        <TableAction :actions="[
            {
              label: $t('common.edit'),
              type: 'link',
@@ -205,7 +203,9 @@
              label: '完成',
              type: 'link',
              auth: ['mes:pro-work-order:update'],
              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
              ifShow:
                row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
                !!row.quantityProduced,
              onClick: handleFinish.bind(null, row),
            },
            {
@@ -215,7 +215,7 @@
              auth: ['mes:pro-work-order:update'],
              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
              popConfirm: {
                title: '确认要取消该工单吗？取消后不可恢复。',
                title: '确认要取消该订单吗？取消后不可恢复。',
                confirm: handleCancel.bind(null, row),
              },
            },
@@ -225,8 +225,7 @@
              auth: ['mes:pro-work-order:query'],
              onClick: handleBarcode.bind(null, row),
            },
          ]"
        />
          ]" />
      </template>
    </Grid>
    <BarcodeDetail ref="barcodeDetailRef" />