kd-aiot-frontend/src/views/material/BOMmanage/components/workmanship.vue

<template>
  <div class="workmanship">
    <el-card shadow="never">
      <el-form
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="search"
        @submit.native.prevent
      >
        <el-row type="flex" :gutter="24">
          <el-col :span="6">
            <el-form-item label="工序编码:" label-width="100px">
              <el-input
                clearable
                v-model.trim="where.code"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工序名称:" label-width="100px">
              <el-input
                clearable
                v-model.trim="where.name"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="所属工作中心" label-width="100px">
              <el-input
                clearable
                v-model.trim="where.workCenterName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="ele-form-actions">
              <el-button
                native-type="button"
                type="primary"
                class="ele-btn-icon"
                size="small"
                @click="search"
              >
                查询
              </el-button>
              <el-button
                native-type="button"
                size="small"
                plain
                @click="resetSearch"
              >
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        class="table_list"
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :need-page="false"
        :row-key="getRowKey"
        :span-method="spanMethod"
        :row-class-name="rowClassName"
      >
        <!-- 工艺路线分组标题 -->
        <template v-slot:routeGroup="{ row }">
          <div
            v-if="isGroupHeader(row)"
            class="workmanship-route-header"
            :class="{ 'is-collapsed': !isRouteExpanded(row) }"
            @click.stop="toggleRouteGroup(row)"
          >
            <i
              class="el-icon-arrow-down workmanship-route-header__arrow"
            ></i>
            <i class="el-icon-collection-tag"></i>
            <span class="workmanship-route-header__label">
              工艺路线：
            </span>
            <span class="workmanship-route-header__name">
              {{ formatRouteHeader(row) }}
            </span>
          </div>
        </template>
        <!-- 表头工具栏 -->
        <!-- <template v-slot:toolbar>
          <el-button
           v-if="attributeData.status != 1"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit()"
          >
            添加工序
          </el-button>
        </template> -->

        <!-- 展开内容 -->
        <template v-slot:expand="{ row, $index }">
          <div
            style="width: 100%; min-height: 60px"
            v-if="row.categoryParamStepList"
          >
            <ele-pro-table
              :toolbar="false"
              toolsTheme="none"
              ref="table2"
              :need-page="false"
              :datasource="row.categoryParamStepList"
              :columns="columns2"
              :key="row.code + '-' + $index"
            >
              <template v-slot:sort="{ row }">
                <el-input
                  @input="(e) => validateNumber(e, row)"
                  v-model.number="row.sort"
                ></el-input>
              </template>

              <!-- 默认值 -->
              <!-- <template v-slot:defaultValue="{ row }">
                <el-input
                  v-if="
                    row.textType == 1 || row.textType == 4 || row.textType == 5
                  "
                  v-model="row.defaultValue"
                  placeholder="请输入"
                ></el-input>
                <el-select
                  v-if="row.textType == 2"
                  v-model="row.defaultValue"
                  placeholder="请选择"
                >
                  <el-option label="TRUE" :value="'TRUE'" />
                  <el-option label="FALSE" :value="'FALSE'" />
                </el-select>
              </template> -->
              <template v-slot:name="{ row }">
                <el-input v-model="row.name" placeholder="请输入"></el-input>
              </template>
              <template v-slot:defaultValue="{ row }">
                <el-input
                  v-model="row.defaultValue"
                  placeholder="请输入"
                ></el-input>
              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <!-- <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-edit"
                  @click="editWorkingStep(row)"
                >
                  修改
                </el-link> -->
                <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-house"
                  @click="saveWorking(row)"
                >
                  保存
                </el-link>
                <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-view"
                  @click="openStepConfigure(row, true)"
                >
                  详情
                </el-link>
                <!-- <el-link
                  type="primary"
                  :underline="false"
                  icon="el-icon-setting"
                  @click="openStepConfigure(row)"
                >
                  配置
                </el-link> -->
                <el-popconfirm
                  class="ele-action"
                  title="确定要删除当前参数吗？"
                  @confirm="remove2(row)"
                >
                  <template v-slot:reference>
                    <el-link
                      type="danger"
                      :underline="false"
                      icon="el-icon-delete"
                    >
                      删除
                    </el-link>
                  </template>
                </el-popconfirm>
              </template>
            </ele-pro-table>
          </div>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <!-- <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="editWorkingProcedure(row)"
            v-if="attributeData.status != 1"
          >
            修改
          </el-link> -->
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="openConfigure(row, true)"
            v-if="!row._isRouteOnly"
          >
            详情
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-setting"
            @click="openStepSetting(row)"
            v-if="attributeData.status != 1 && !row._isRouteOnly"
          >
            工步
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-plus"
            @click="openCreateStep(row)"
            v-if="attributeData.status != 1 && !row._isRouteOnly"
          >
            创建工步
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-setting"
            @click="openConfigure(row)"
            v-if="!row._isRouteOnly"
          >
            配置
          </el-link>
          <span v-if="row._isRouteOnly" class="workmanship-route-only-tip">
            未配置
          </span>
          <!-- <el-popconfirm
            class="ele-action"
            title="确定要删除当前工序吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link v-if="attributeData.status != 1" type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm> -->
        </template>
      </ele-pro-table>
    </el-card>

    <ProcessModal
      ref="processModalRef"
      @chooseProcess="chooseProcess"
    ></ProcessModal>

    <ParamModal ref="paramRefs" @chooseModal="chooseModal"></ParamModal>
    <StepModal ref="stepModalRefs" @chooseModal="chooseStepModal"></StepModal>
    <workingProcedure
      ref="workingProcedureRef"
      @chooseProcess="chooseProcess"
    ></workingProcedure>
    <workingStep
      ref="workingStepRef"
      @chooseProcess="chooseProcess"
    ></workingStep>

    <user-edit
      :visible.sync="showEdit"
      :data="current"
      :controlList="controlList"
      :isView="isView"
      @done="handleStepEditDone"
      ref="userEdit"
      :typeList="typeList"
    />
  </div>
</template>

<script>
  import {
    workingProcedureUpdate,
    getStepListById,
    workingStepSave,
    workingSingleUpdate
  } from '@/api/material/BOM';
  import ProcessModal from './processModal.vue';
  import ParamModal from './ParamModal.vue';
  import StepModal from './StepModal1.vue';
  import workingProcedure from './workingProcedure.vue';
  import workingStep from './workingStep.vue';
  import { getMbomPage, workingStepDelete } from '@/api/material/BOM';
  import control from '@/api/technology/control';
  import stepManagement from '@/api/technology/stepManagement';
  import route from '@/api/technology/route';
  import UserEdit from '@/views/technology/stepManagement/components/user-edit.vue';

  // 未关联工艺路线的分组标识
  const UNGROUPED_ROUTE_ID = '__ungrouped_route__';

  export default {
    name: 'process',
    components: {
      ProcessModal,
      ParamModal,
      workingProcedure,
      StepModal,
      workingStep,
      UserEdit
    },
    props: {
      // bom bomCategoryId
      resourceBomId: String,
      // bom 信息
      taskParam: Object,
      // bom 信息 和 taskParam是一样的
      attributeData: {
        type: Object,
        default: {}
      }
    },

    watch: {
      attributeData: {
        handler(val) {
          this.$nextTick(() => {
            this.reload();
          });
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            width: 45,
            columnKey: 'routeGroup',
            align: 'center',
            slot: 'routeGroup',
            className: 'workmanship-group-cell'
          },
          {
            width: 45,
            type: 'expand',
            columnKey: 'categoryParamStepList',
            align: 'center',
            slot: 'expand',
            className: ''
          },
          {
            prop: 'sort',
            label: '排序号',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'code',
            label: '工序编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'name',
            label: '工序名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            align: 'center',
            prop: 'controlName',
            label: '工序控制码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'workCenterName',
            label: '所属工作中心',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 300,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],

        // 表格列配置
        columns2: [
          {
            prop: 'sort',
            slot: 'sort',
            label: '排序',
            minWidth: 60
          },
          {
            prop: 'code',
            label: '工步编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'name',
            slot: 'name',
            label: '工步名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'defaultValue',
            prop: 'defaultValue',
            label: '工序内容',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'status',
            slot: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row) => {
              return ['生效', '失效'][_row.status];
            }
          },

          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            resizable: false,
            slot: 'action',
            minWidth: 200,
            showOverflowTooltip: true
          }
        ],

        processData: [],
        removeList: [],
        where: {
          code: '',
          name: '',
          workCenterName: ''
        },
        currentTableData: [],
        typeList: [
          {
            value: 1,
            label: '普通工步'
          },
          {
            value: 2,
            label: '抽样质检工步'
          },
          {
            value: 3,
            label: '普通质检工步'
          },
          {
            value: 4,
            label: '包装工步'
          },
          {
            value: 5,
            label: '入库工步'
          },
          {
            value: 6,
            label: '一工一检(常规质检)'
          }
        ],
        showEdit: false,
        current: null,
        isView: false,
        controlList: [],
        createStepTargetProcess: null,
        // 工艺路线分组展开状态：{ [routeId]: true/false }，默认全部展开
        expandedRouteMap: {},
        // 完整分组数据（含分组标题行），用于按展开状态过滤显示
        rawGroupedList: [],
        // 表格数据源请求序号（只用于比较，不参与渲染）
        loadSeq: 0
      };
    },
    methods: {
      getRowKey(row) {
        if (row && row._rowKey != null) return row._rowKey;
        if (row && row.id != null) return String(row.id);
        if (row && row.code != null) return 'c_' + row.code;
        return '';
      },
      // 判断是否为工艺路线分组标题行
      isGroupHeader(row) {
        return row && row._isGroupHeader === true;
      },
      // 合并单元格：分组标题行横跨所有列；普通行的分组占位列不显示
      spanMethod({ row, columnIndex }) {
        if (this.isGroupHeader(row)) {
          if (columnIndex === 0) {
            return { rowspan: 1, colspan: this.columns.length };
          }
          return { rowspan: 0, colspan: 0 };
        }
        return { rowspan: 1, colspan: 1 };
      },
      // 分组标题行应用特殊样式
      rowClassName({ row }) {
        if (this.isGroupHeader(row)) {
          return 'workmanship-group-header';
        }
        return '';
      },
      // 工艺路线分组标题展示文本
      formatRouteHeader(row) {
        const info = row._routeInfo || {};
        const name = info.name || '未命名工艺路线';
        const code = info.code || '';
        const version = info.version || '';
        let text = name;
        if (code) text = `${code} ${text}`;
        if (version) text = `${text}（${version}）`;
        return text;
      },
      // 判断工艺路线分组是否处于展开状态
      isRouteExpanded(row) {
        const routeId = row && row._routeId;
        if (routeId == null) return true;
        return this.expandedRouteMap[routeId] !== false;
      },
      // 切换工艺路线分组的展开/收起
      toggleRouteGroup(row) {
        const routeId = row && row._routeId;
        if (routeId == null) return;
        this.$set(
          this.expandedRouteMap,
          routeId,
          !this.isRouteExpanded(row)
        );
        this.refreshTableView();
      },
      // 根据展开状态过滤出当前可见的行
      buildVisibleRows() {
        if (!Array.isArray(this.rawGroupedList) || !this.rawGroupedList.length) {
          return [];
        }
        return this.rawGroupedList.filter((item) => {
          if (this.isGroupHeader(item)) return true;
          return this.expandedRouteMap[item._routeId] !== false;
        });
      },
      // 判断工序行是否匹配 where 过滤条件（前端自过滤）
      matchSearchFilter(item) {
        if (!item || this.isGroupHeader(item)) return false;
        const where = this.where || {};
        const code = (where.code || '').trim().toLowerCase();
        const name = (where.name || '').trim();
        const workCenterName = (where.workCenterName || '').trim();
        if (!code && !name && !workCenterName) return true;
        if (code && !(item.code || '').toLowerCase().includes(code)) {
          return false;
        }
        if (name && !(item.name || '').includes(name)) {
          return false;
        }
        if (
          workCenterName &&
          !(item.workCenterName || '').includes(workCenterName)
        ) {
          return false;
        }
        return true;
      },
      // 根据 where 在 rawGroupedList 上做前端搜索过滤
      buildSearchedRows() {
        const where = this.where || {};
        const hasFilter =
          (where.code || '').trim() ||
          (where.name || '').trim() ||
          (where.workCenterName || '').trim();
        if (!Array.isArray(this.rawGroupedList) || !this.rawGroupedList.length) {
          return [];
        }
        if (!hasFilter) {
          return this.rawGroupedList;
        }
        const result = [];
        // pendingHeader 表示当前组的标题；一旦该组出现匹配工序，就立即把标题推入结果并清空，
        // 避免同一标题被多次推入产生重复行。
        let pendingHeader = null;
        for (const item of this.rawGroupedList) {
          if (this.isGroupHeader(item)) {
            pendingHeader = item;
          } else if (this.matchSearchFilter(item)) {
            if (pendingHeader) {
              result.push(pendingHeader);
              pendingHeader = null;
            }
            result.push(item);
          }
        }
        return result;
      },
      // 刷新表格展示：先按搜索过滤，再按展开/收起过滤
      refreshTableView() {
        const searched = this.buildSearchedRows();
        const visible = searched.filter((item) => {
          if (this.isGroupHeader(item)) return true;
          return this.expandedRouteMap[item._routeId] !== false;
        });
        if (
          this.$refs.table &&
          typeof this.$refs.table.setData === 'function'
        ) {
          this.$refs.table.setData([...visible]);
        }
      },
      // 查询：前端自过滤，不再调后端
      search() {
        this.refreshTableView();
      },
      // 重置：清空过滤条件并展示全部
      resetSearch() {
        this.where = {
          code: '',
          name: '',
          workCenterName: ''
        };
        this.$nextTick(() => {
          this.refreshTableView();
        });
      },
      // 根据工艺路线对工序数据进行分组：
      // 分组依据是"工艺路线接口返回的工序列表"，即每条工艺路线展示它自己的完整工序；
      // 多条工艺路线共用同一道工序（sourceTaskId 相同）时，各分组下各展示一份，不做过滤。
      async groupTaskParamByRoute(dataList, routes) {
        if (!Array.isArray(dataList) || dataList.length === 0) {
          return [];
        }
        if (!Array.isArray(routes) || routes.length === 0) {
          // 无工艺路线时，强制用一个"未关联工艺路线"分组标题行包裹所有工序，
          // 保证表格始终有分组标题行，便于搜索/展开等联动
          const result = [
            {
              _rowKey: 'group_header_ungrouped_default',
              _isGroupHeader: true,
              _routeId: UNGROUPED_ROUTE_ID,
              _routeInfo: { name: '未关联工艺路线' }
            }
          ];
          dataList.forEach((item) => {
            item._routeId = UNGROUPED_ROUTE_ID;
            result.push(item);
          });
          return result;
        }

        // 1) 按工艺路线逐条查询工序：N 次请求的结果各自保留、互不覆盖，
        //    任何一条路线的返回都不能把其它路线的结果顶掉。
        const routeEntryList = routes.map((r) => ({
          route: r,
          routeKey: String(r.id),
          items: []
        }));
        await Promise.all(
          routeEntryList.map(async (entry) => {
            try {
              const res = await route.taskinstanceList({
                routingId: entry.route.id,
                isDetail: true,
                pageNum: 1,
                size: -1
              });
              const list = (res && res.list) || [];
              entry.items = list
                .map((it, idx) => {
                  const detail = it.detail || it;
                  const stid =
                    detail.sourceTaskId != null
                      ? detail.sourceTaskId
                      : it.sourceTaskId;
                  if (stid == null) {
                    return null;
                  }
                  return {
                    sourceTaskId: stid,
                    detail,
                    orderNum: it.orderNum != null ? it.orderNum : idx + 1
                  };
                })
                .filter((it) => it != null);
            } catch (e) {
              console.log(e, 'get route task list err');
            }
          })
        );

        // 2) MBOM 工序记录索引：sourceTaskId -> 记录列表（保持 mBomPage 返回的顺序）
        const recordBySourceTaskId = new Map();
        dataList.forEach((item) => {
          if (item.sourceTaskId == null) {
            return;
          }
          const key = String(item.sourceTaskId);
          if (!recordBySourceTaskId.has(key)) {
            recordBySourceTaskId.set(key, []);
          }
          recordBySourceTaskId.get(key).push(item);
        });
        // 已被前面分组优先占用的记录（只影响分配优先级，不阻止后续路线复用同一条记录）
        const occupiedRecords = new Set();
        // 取某条路线上某道工序对应的 MBOM 记录：
        // 1) 记录自身 routingId 就是本路线的最精确，优先；
        // 2) 其次取还没被别组占用的记录；
        // 3) 都被占用时复用其中一条 —— 共用工序要在每条路线下各显示一份，不能过滤掉。
        const pickRecord = (routeId, sourceTaskId) => {
          const list = recordBySourceTaskId.get(String(sourceTaskId));
          if (!list || !list.length) {
            return null;
          }
          const own = list.find(
            (rec) =>
              rec.routingId != null && String(rec.routingId) === String(routeId)
          );
          if (own) {
            return own;
          }
          return list.find((rec) => !occupiedRecords.has(rec)) || list[0];
        };

        // 3) 按工艺路线顺序组装分组数据
        const renderedRecords = new Set();
        const result = [];
        routeEntryList.forEach((entry, gIdx) => {
          const rows = [];
          const pushRecordRow = (record, seq) => {
            // 同一条 MBOM 工序可能同时出现在多条工艺路线分组下，
            // 必须复制出行对象，否则 _routeId/_rowKey 会互相覆盖，分组展开状态会错乱
            const row = Object.assign({}, record);
            row._routeId = entry.route.id;
            row._rowKey = `route_${entry.routeKey}_${
              record.id != null ? 'id_' + record.id : 'idx_' + seq
            }_${seq}`;
            rows.push(row);
            renderedRecords.add(record);
          };
          entry.items.forEach((item, idx) => {
            const record = pickRecord(entry.route.id, item.sourceTaskId);
            if (record) {
              occupiedRecords.add(record);
              pushRecordRow(record, idx);
              return;
            }
            // 该路线有这道工序、但 MBOM 里还没有对应记录：用接口明细补一行展示，
            // 保证"路线里有就要显示"，不因为没配置就被过滤掉（该行不可配置）
            rows.push({
              _rowKey: `routeonly_${entry.routeKey}_${String(
                item.sourceTaskId
              )}_${idx}`,
              _routeId: entry.route.id,
              _isRouteOnly: true,
              code: item.detail.code,
              name: item.detail.name,
              controlName: item.detail.controlName,
              workCenterName: item.detail.workCenterName,
              routingId: entry.route.id,
              sourceTaskId: item.sourceTaskId,
              sort: null,
              categoryParamStepList: []
            });
          });
          // 接口没返回数据（或该路线确实没工序）时的兜底：
          // 把 routingId 属于本路线、且还没出现在任何分组里的记录补进来，避免丢数据
          if (rows.length === 0) {
            dataList.forEach((record) => {
              if (
                record.routingId != null &&
                String(record.routingId) === entry.routeKey &&
                !renderedRecords.has(record)
              ) {
                occupiedRecords.add(record);
                pushRecordRow(record, rows.length);
              }
            });
          }
          if (rows.length === 0) {
            return;
          }
          result.push({
            _rowKey: `group_header_${entry.routeKey}_${gIdx}`,
            _isGroupHeader: true,
            _routeId: entry.route.id,
            _routeInfo: entry.route
          });
          rows.forEach((row) => result.push(row));
        });

        // 4) MBOM 里有、但所有工艺路线接口都没返回的工序 → 归入"未关联工艺路线"
        const ungrouped = dataList.filter(
          (record) => !renderedRecords.has(record)
        );
        if (ungrouped.length > 0) {
          result.push({
            _rowKey: `group_header_ungrouped_${routeEntryList.length}`,
            _isGroupHeader: true,
            _routeId: UNGROUPED_ROUTE_ID,
            _routeInfo: { name: '未关联工艺路线' }
          });
          ungrouped.forEach((item) => {
            item._routeId = UNGROUPED_ROUTE_ID;
            result.push(item);
          });
        }
        return result;
      },
      // 单个工步数据保存
      saveWorking(row) {
        if (!row.name) {
          this.$message.warning('请输入工步名称');
          return;
        }
        if (!row.sort) {
          this.$message.warning('请输入工步排序');
          return;
        }
        let data = {
          stepName: row.name,
          id: row.id,
          defaultValue: row.defaultValue,
          sort: row.sort
        };
        workingSingleUpdate(data)
          .then((res) => {
            if (res.data) {
              this.$message.success('保存成功');
            } else {
              this.$message.error('保存失败');
            }
          })
          .catch((err) => {
            console.log(err, 'err');
          });
      },
      validateNumber(e, row) {
        if (e == 0) {
          row.sort = '';
          return;
        }
        let value = '';
        value = e.replace(/[^\d]/g, '');
        if (value.startsWith('0') && value.length > 1) {
          value = value.replace(/^0+/, '');
        }
        row.sort = value;
      },
      // expandChange(row, rows) {
      //   if (rows.length > 0) {
      //     // 展开
      //     console.log('展开');
      //     getStepListById({
      //       paramId: row.id,
      //       bomCategoryId: this.taskParam.id
      //     }).then((data) => {
      //       row.produceList = data;
      //     });
      //   }
      //   console.log(row);
      //   console.log(rows);
      // },
      openConfigure(row, isView) {
        this.$refs.workingProcedureRef.open(
          row,
          this.taskParam,
          this.currentTableData,
          !!isView,
          this.attributeData,
          this.resourceBomId
        );
      },
      openStepConfigure(row, isView) {
        console.log('123123123', row);
        // this.$refs.workingStepRef.open(row, this.taskParam, !!isView);
        this.createStepTargetProcess = null;
        this.isView = !!isView;
        this.getControlList();
        this.current = row;
        this.showEdit = true;
        this.$refs.userEdit.$refs.form &&
          this.$refs.userEdit.$refs.form.clearValidate();
      },
      openCreateStep(row) {
        this.createStepTargetProcess = row;
        this.isView = false;
        this.getControlList();
        this.current = null;
        this.showEdit = true;
        this.$refs.userEdit.$refs.form &&
          this.$refs.userEdit.$refs.form.clearValidate();
      },
      async handleStepEditDone(stepData, formData) {
        if (this.createStepTargetProcess && !this.current) {
          const currentProcess = this.createStepTargetProcess;
          this.createStepTargetProcess = null;
          const currentStep = await this.getCreatedStep(stepData, formData);
          if (currentStep && currentStep.id) {
            this.chooseStepModal([currentStep], currentProcess);
            return;
          }
          this.openStepSetting(currentProcess);
          return;
        }
        this.createStepTargetProcess = null;
        this.reload();
      },
      async getCreatedStep(stepData, formData) {
        let stepId = null;
        if (stepData && typeof stepData === 'object' && stepData.id) {
          stepId = stepData.id;
        } else if (
          stepData &&
          (typeof stepData === 'number' || typeof stepData === 'string')
        ) {
          stepId = stepData;
        }
        if (!stepId && formData && formData.name) {
          const res = await stepManagement.list({
            pageNum: 1,
            size: 50,
            name: formData.name
          });
          const stepList = Array.isArray(res)
            ? res
            : Array.isArray(res?.list)
            ? res.list
            : [];
          const matched = stepList
            .filter((item) => item.name === formData.name)
            .sort((a, b) => Number(b.id || 0) - Number(a.id || 0));
          if (matched.length) {
            stepId = matched[0].id;
          }
        }
        if (!stepId) {
          return null;
        }
        try {
          const detail = await stepManagement.getById(stepId);
          if (detail && detail.id) {
            return detail;
          }
        } catch (e) {
          console.log(e, 'getById err');
        }
        return null;
      },
      async loadStepList(process) {
        if (!process || !process.id || !this.taskParam || !this.taskParam.id) {
          return [];
        }
        const data = await getStepListById({
          paramId: process.id,
          bomCategoryId: this.taskParam.id
        });
        return Array.isArray(data) ? data : [];
      },
      async fillStepLists(dataList) {
        if (!Array.isArray(dataList) || !dataList.length) {
          return dataList;
        }
        await Promise.all(
          dataList.map(async (item) => {
            try {
              item.categoryParamStepList = await this.loadStepList(item);
            } catch (e) {
              console.log(e, 'get step list err');
              item.categoryParamStepList = Array.isArray(
                item.categoryParamStepList
              )
                ? item.categoryParamStepList
                : [];
            }
          })
        );
        return dataList;
      },
      async refreshStepList(current) {
        const data = await this.loadStepList(current);
        const tableList = this.$refs.table.getData() || [];
        const clonedArray = JSON.parse(JSON.stringify(tableList));
        clonedArray.forEach((item) => {
          if (item.id == current.id) {
            item.categoryParamStepList = data;
          }
        });
        this.$refs.table.setData([...clonedArray]);
        this.expandCurrentProcess(current.id);
      },
      expandCurrentProcess(processId) {
        this.$nextTick(() => {
          const tableRef = this.$refs.table;
          const tableList = tableRef.getData ? tableRef.getData() : [];
          const currentRow = tableList.find((item) => item.id == processId);
          if (!currentRow) {
            this.$forceUpdate();
            return;
          }
          tableRef.toggleRowExpansionAll(false);
          if (tableRef.toggleRowExpansion) {
            tableRef.toggleRowExpansion(currentRow, true);
          }
          this.$forceUpdate();
        });
      },

      getControlList() {
        const params = {
          pageNum: 1,
          size: -1
        };
        control.list().then((res) => {
          this.controlList = res.list;
        });
      },
      /*配置工艺参数 */
      openSetting(row) {
        this.current = row;
        this.$refs.paramRefs.open(row.produceList, this.current);
      },
      openStepSetting(row) {
        getStepListById({
          paramId: row.id,
          bomCategoryId: this.taskParam.id
        }).then((data) => {
          this.$refs.stepModalRefs.open(data, row, '新增');
        });
      },
      /* 表格数据源 */
      async datasource({ page, limit, where }) {
        // 请求序号：datasource 可能被并发触发多次（attributeData 深度监听 + 切换 tab 都会 reload），
        // 只允许最新一次查询写回表格数据，避免先发后到的旧数据覆盖新数据
        const loadSeq = (this.loadSeq || 0) + 1;
        this.loadSeq = loadSeq;
        let data = await getMbomPage({
          ...where,
          bomCategoryId: this.resourceBomId,
          categoryCode: this.attributeData.categoryCode,
          pageNum: page,
          size: limit
        });
        if (loadSeq !== this.loadSeq) {
          return this.buildVisibleRows();
        }
        if (data?.length > 0) {
          this.currentTableData = data[0];
          let dataList = [];
          if (data[0].taskParam.length != 0) {
            dataList = data[0].taskParam.sort(
              (it, ie) => Number(it.sort) - Number(ie.sort)
            );
          }
          dataList.forEach((item, idx) => {
            if (item._rowKey == null) {
              item._rowKey =
                (item.id != null ? 'id_' + item.id : 'idx_' + idx) +
                '_' +
                (item.code != null ? item.code : 'nocode') +
                '_' +
                idx;
            }
          });

          // 按工艺路线对工序进行分组展示
          const routes =
            (data[0].processRoute &&
              Array.isArray(data[0].processRoute.list) &&
              data[0].processRoute.list) ||
            [];
          const groupedList = await this.groupTaskParamByRoute(
            dataList,
            routes
          );
          // 分组过程包含异步请求，这里再校验一次请求序号，确保只有最新一次查询写回
          if (loadSeq !== this.loadSeq) {
            return this.buildVisibleRows();
          }

          // 保存完整分组数据（含标题行），便于按展开状态过滤
          this.rawGroupedList = groupedList;
          // 为新增的工艺路线初始化为展开状态（已存在的路线保留之前的展开/收起状态）
          routes.forEach((r) => {
            if (!(r.id in this.expandedRouteMap)) {
              this.$set(this.expandedRouteMap, r.id, true);
            }
          });

          const processList = groupedList.filter(
            (item) => !this.isGroupHeader(item)
          );
          // 同一道 MBOM 工序可能同时出现在多条工艺路线分组下，
          // 工步只请求一次，再把结果共享给各分组里的同名行
          const stepRowMap = new Map();
          const stepRowList = [];
          processList.forEach((row) => {
            if (row._isRouteOnly) {
              return;
            }
            const key = row.id != null ? String(row.id) : row._rowKey;
            if (stepRowMap.has(key)) {
              return;
            }
            stepRowMap.set(key, row);
            stepRowList.push(row);
          });
          await this.fillStepLists(stepRowList);
          processList.forEach((row) => {
            if (row._isRouteOnly) {
              return;
            }
            const key = row.id != null ? String(row.id) : row._rowKey;
            const source = stepRowMap.get(key);
            if (source && source !== row) {
              row.categoryParamStepList = source.categoryParamStepList;
            }
          });

          return this.buildVisibleRows();

          // return data[0].taskParam;
        } else {
          return [];
        }
      },
      editWorkingProcedure(row) {
        this.$refs.processModalRef.open(
          this.taskParam,
          this.currentTableData,
          '修改',
          row
        );
      },
      openEdit() {
        this.$refs.processModalRef.open(
          this.taskParam,
          this.currentTableData,
          '新增'
        );
      },
      editWorkingStep(row) {
        this.$refs.stepModalRefs.open([], row, '修改');
      },
      reload(where) {
        this.$refs.table.reload({ where });
      },
      chooseProcess(data) {
        // let _arr = [...data, ...this.$refs.table.getData()];
        // this.$refs.table.setData([...data, ...this.$refs.table.getData()]);
        // this.$emit('chooseProcess', _arr);
        this.reload();
      },

      chooseModal(data, current) {
        data.map((m) => {
          m.parentId = current.id;
          return {
            ...m
          };
        });

        let tableList = [];
        let clonedArray = [];
        tableList = this.$refs.table.getData();

        clonedArray = JSON.parse(JSON.stringify(tableList));

        clonedArray.forEach((e) => {
          if (e.id == current.id) {
            if (e.hasOwnProperty('produceList')) {
              e.produceList = [...e.produceList, ...data];
            } else {
              e.produceList = [...data];
            }
          }
        });

        this.$refs.table.setData([...clonedArray]);
        this.$emit('chooseProcess', clonedArray);
        this.expandCurrentProcess(current.id);
      },
      chooseStepModal(data, current) {
        console.log(data, 'data');
        console.log(current, 'current');
        if (data?.length > 0) {
          let params = data.map((item) => {
            const itemData = {
              ...item,
              paramId: current.id,
              stepId: item.id,
              categoryId: this.taskParam.categoryId,
              bomCategoryId: this.taskParam.id,
              categoryCode: this.taskParam.categoryCode
            };
            // itemData.type = item.type.code;
            return itemData;
          });
          workingStepSave(params).then((data) => {
            this.$message.success('保存成功');
            this.refreshStepList(current);
          });
        }
        // this.reload();
        console.log(data);
        console.log(current);
      },
      /* 删除 */
      remove(row) {
        workingProcedureUpdate({
          id: this.currentTableData.id,
          categoryId: this.taskParam.categoryId,
          bomCategoryId: this.taskParam.id,
          categoryCode: this.taskParam.categoryCode,
          taskParam: this.currentTableData.taskParam.filter(
            (item) => item.id !== row.id
          )
        }).then((data) => {
          this.$message.success('删除成功');
          this.reload();
        });
      },

      remove2(row) {
        workingStepDelete([row.id]).then(() => {
          this.$message.success('删除成功');
          this.reload();
        });
        this.$forceUpdate();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .workmanship {
    height: 100%;
    .el-card {
      height: 100%;
      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .table_list {
          flex: 1;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            overflow-y: auto !important;
            display: flex;
            flex-direction: column;
            .el-table__body-wrapper {
              flex: 1;
            }
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  // 工艺路线分组标题行样式（需要非 scoped 才能作用到 el-table 内部）
  .workmanship {
    ::v-deep .el-table {
      tr.workmanship-group-header {
        td {
          background: #ecf5ff !important;
          border-bottom: 1px solid #d9ecff !important;
          padding: 10px 12px !important;
        }
        td.workmanship-group-cell {
          padding: 0 !important;
          background: #ecf5ff !important;
          // 强制让跨列单元格撑满整行，避免被首列 45px 限制
          width: auto !important;
          min-width: 100% !important;
          max-width: 100% !important;
        }
        .workmanship-route-header {
          display: flex;
          align-items: center;
          padding: 4px 0;
          color: #303133;
          font-weight: 600;
          cursor: pointer;
          user-select: none;
          white-space: nowrap;
          &__arrow {
            margin-right: 6px;
            color: #409eff;
            font-size: 14px;
            transition: transform 0.2s ease;
          }
          &.is-collapsed &__arrow {
            transform: rotate(-90deg);
          }
          i.el-icon-collection-tag {
            margin-right: 6px;
            color: #409eff;
            font-size: 14px;
          }
          &__label {
            margin-right: 4px;
            color: #606266;
          }
          &__name {
            color: #303133;
          }
          &:hover {
            color: #409eff;
          }
        }
        .workmanship-route-only-tip {
          color: #e6a23c;
          font-size: 12px;
        }
      }
    }
  }
</style>