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

云

5 天以前 5dbc69b4e792dcce998038822b92402366bec47f

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

@@ -11,7 +11,7 @@
  } 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 {
@@ -63,6 +63,21 @@
  /** 完成订单 */
  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);
    }
  }

  /** 删除订单 */
@@ -139,6 +154,13 @@
      },
    } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
  });

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

<template>
@@ -168,6 +190,29 @@
                @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="[
@@ -207,7 +252,7 @@
              ifShow:
                row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
                !!row.quantityProduced,
              onClick: handleFinish.bind(null, row),
              onClick: handleCheckFinish.bind(null, row),
            },
            {
              label: '取消',
@@ -238,3 +283,79 @@
    <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>