src/views/mes/pro/route/modules/process-list.vue
@@ -4,11 +4,11 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesProRouteProcessApi } from '#/api/mes/pro/route/process';
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { message, Tag } from 'ant-design-vue';
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@@ -25,8 +25,15 @@
  routeId: number;
}>();
const isEditable = ref(props.formType !== 'detail'); // 是否可编辑
const emit = defineEmits<{
  change: [list: MesProRouteProcessApi.RouteProcess[]];
}>();
const isEditable = computed(() => props.formType !== 'detail'); // 是否可编辑
const list = ref<MesProRouteProcessApi.RouteProcess[]>([]); // 工艺路线工序列表
const sortedList = computed(() =>
  [...list.value].sort((a, b) => (a.sort || 0) - (b.sort || 0)),
);
const [ProcessFormModal, processFormModalApi] = useVbenModal({
  connectedComponent: ProcessForm,
@@ -53,6 +60,7 @@
  try {
    list.value = await getRouteProcessListByRoute(props.routeId);
    gridApi.setGridOptions({ data: list.value });
    emit('change', list.value);
  } finally {
    gridApi.setLoading(false);
  }
@@ -89,6 +97,16 @@
<template>
  <ProcessFormModal @success="getList" />
  <div v-if="sortedList.length" class="mb-4 flex flex-wrap items-center gap-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-900">
    <template v-for="(item, index) in sortedList" :key="item.id">
      <div class="flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-2 dark:border-slate-700 dark:bg-slate-800">
        <span class="text-xs font-semibold text-blue-600">{{ item.sort }}</span>
        <span class="font-medium">{{ item.processName }}</span>
        <Tag v-if="index === sortedList.length - 1" color="blue">末道</Tag>
      </div>
      <span v-if="index < sortedList.length - 1" class="text-slate-400">→</span>
    </template>
  </div>
  <div v-if="isEditable" class="mb-3 flex items-center justify-start">
    <TableAction
      :actions="[
@@ -100,7 +118,7 @@
      ]"
    />
  </div>
  <Grid class="w-full" table-title="组成工序">
  <Grid class="w-full" table-title="工序顺序及各工序产出">
    <template #colorCode="{ row }">
      <div v-if="row.colorCode" class="flex items-center justify-center gap-1">
        <div