Merge remote-tracking branch 'origin/fix/hsy/20260812' into dev_pro2.0

云

7 天以前 5dbc69b4e792dcce998038822b92402366bec47f

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

@@ -1,162 +1,176 @@
<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 { DocAlert, 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 {
    MesProWorkOrderStatusEnum,
    MesProWorkOrderTypeEnum,
  } from "@vben/constants";
  import { downloadFileFromBlobPart } from "@vben/utils";

import { Button, message } from 'ant-design-vue';
  import { Button, message, Progress, Steps, Popover, Modal } 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 ArchiveDetail from '#/views/mes/pd/archive/modules/detail.vue';
// 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 archiveDetailRef = ref<InstanceType<typeof ArchiveDetail>>();
// 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();
  }

  /** 完成订单前校验 */
  function handleCheckFinish(row: MesProWorkOrderApi.WorkOrder) {
    if (row.productionStatus !== 2) {
      Modal.confirm({
        title: '操作确认',
        content: '该订单未完成，是否确认要继续完成？',
        onOk() {
          handleFinish(row);
        },
      });
    } else {
      handleFinish(row);
    }
  }

  /** 删除订单 */
  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>,
  });

  /** 获取工序节点状态样式类 */
  function getProcessNodeStatus(percent: number) {
    if (percent >= 100) return 'completed';
    if (percent > 0) return 'in-progress';
    return 'pending';
  }
</script>

<template>
  <Page auto-content-height>
    <template #doc>
      <DocAlert
        title="【生产】生产工单"
        url="https://doc.iocoder.cn/mes/pro/work-order/"
      />
    </template>

    <FormModal @success="handleRefresh" />

    <Grid table-title="生产工单列表">
    <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'],
@@ -169,17 +183,39 @@
              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 #processProgressList="{ row }">
        <div v-if="row.processProgressList && row.processProgressList.length > 0" class="process-node-list">
          <div
            v-for="(item, index) in row.processProgressList"
            :key="index"
            class="process-node-item"
          >
            <div class="process-node-dot" :class="getProcessNodeStatus(item.progressPercent || item.progress || 0)"></div>
            <div class="process-node-info">
              <span class="process-node-name" :title="item.processName ">{{ item.processName  }}</span>
              <span class="process-node-percent">{{ item.progress || 0 }}%</span>
            </div>
            <div v-if="index !== row.processProgressList.length - 1" class="process-node-line"></div>
          </div>
        </div>
        <span v-else>-</span>
      </template>
      <template #completionProgress="{ row }">
        <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
          <Progress :percent="row.completionProgress || 0" :show-info="false" size="small" style="flex: 1; margin: 0;" />
          <span style="white-space: nowrap; min-width: 40px; text-align: left;">{{ row.completionProgress || 0 }}%</span>
        </div>
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
        <TableAction :actions="[
            {
              label: $t('common.edit'),
              type: 'link',
@@ -213,8 +249,10 @@
              label: '完成',
              type: 'link',
              auth: ['mes:pro-work-order:update'],
              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
              onClick: handleFinish.bind(null, row),
              ifShow:
                row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
                !!row.quantityProduced,
              onClick: handleCheckFinish.bind(null, row),
            },
            {
              label: '取消',
@@ -223,20 +261,101 @@
              auth: ['mes:pro-work-order:update'],
              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
              popConfirm: {
                title: '确认要取消该工单吗？取消后不可恢复。',
                title: '确认要取消该订单吗？取消后不可恢复。',
                confirm: handleCancel.bind(null, row),
              },
            },
            // {
            //   label: '条码',
            //   type: 'link',
            //   auth: ['mes:pro-work-order:query'],
            //   onClick: handleBarcode.bind(null, row),
            // },
            {
              label: '条码',
              label: '归档',
              type: 'link',
              auth: ['mes:pro-work-order:query'],
              onClick: handleBarcode.bind(null, row),
              onClick: () => archiveDetailRef.value?.open(row.productCode),
            },
          ]"
        />
          ]" />
      </template>
    </Grid>
    <BarcodeDetail ref="barcodeDetailRef" />
    <!-- <BarcodeDetail ref="barcodeDetailRef" /> -->
    <ArchiveDetail ref="archiveDetailRef" />
  </Page>
</template>

<style scoped>
.process-node-list {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 4px;
}

/* Custom scrollbar to make it sleek */
.process-node-list::-webkit-scrollbar {
  height: 4px;
}
.process-node-list::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}
.process-node-list::-webkit-scrollbar-track {
  background: transparent;
}

.process-node-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.process-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.process-node-dot.completed {
  background-color: #52c41a;
}
.process-node-dot.in-progress {
  background-color: #1890ff;
}
.process-node-dot.pending {
  background-color: #d9d9d9;
}

.process-node-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 12px;
  font-size: 12px;
  line-height: 1.2;
}

.process-node-name {
  color: #333;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.process-node-percent {
  color: #888;
  font-size: 11px;
}

.process-node-line {
  width: 20px;
  height: 1px;
  background-color: #e8e8e8;
  margin-right: 12px;
}

</style>