kd-aiot-frontend-wt/src/views/bpm/handleTask/components/dangerousWorkTicket/detail.vue

<!--
  危险作业票详情（pcView）
  布局与字段顺序参考 EHS 子应用「危险作业票」动火作业查看态
  （kd-aiot-frontend-ehs/src/views/DangerousWorkList/add.vue，isView=true）：
    所属危险作业 / 作业类型 / 申请单位 / 申请人 / 作业地点
    / 作业开始时间 / 作业结束时间 / 作业票模板 / 作业票内容 / 备注
  作业票内容按 EHS 内置作业票模板渲染（不同作业类型套用不同模板）；
  页面用 tab 区分「作业票信息」与「后续环节」（tab 栏在上方）；
  动火、受限空间、高处作业、吊装作业、临时用电作业五类作业共用本页面与 submit.vue，按作业类型分发到各自的组件：
    动火作业   fireFlowNodes.js + components/fireTicketDetail.vue + components/flowNodeForm.vue
    受限空间   confinedSpaceFlowNodes.js + components/confinedSpaceFlow.vue
    高处作业   heightFlowNodes.js + components/heightFlow.vue
    吊装作业   hoistingFlowNodes.js + components/hoistingFlow.vue
    临时用电   electricityFlowNodes.js + components/electricityFlow.vue
  「后续环节」tab 顶部为当前处理环节（可填写），下方为全部环节的查看内容；
  环节填写值通过 getTableValue 提供给审批组件（submit.vue），
  在审批通过前合并写入作业票内容（extensionJson）
-->
<template>
  <div class="ticket-detail" v-loading="loading">
    <!-- 概要信息 -->
    <div class="detail-summary">
      <span class="summary-title">
        <i class="el-icon-document" />
        {{ templateName || '作业票信息' }}
        <el-tag v-if="statusText" :type="statusTag" size="mini">
          {{ statusText }}
        </el-tag>
      </span>
      <div class="summary-extra">
        <span v-if="ticketCode">作业票编号：{{ ticketCode }}</span>
        <span v-if="ticket.createTime">申请时间：{{ ticket.createTime }}</span>
        <span v-if="ticket.processInstanceId">
          流程实例：{{ ticket.processInstanceId }}
        </span>
      </div>
    </div>

    <el-tabs v-model="activeTab" type="card" class="detail-tabs">
      <!-- 作业票信息 -->
      <el-tab-pane label="作业票信息" name="info">
        <el-form
          ref="formRef"
          :model="form"
          label-width="120px"
          size="small"
          disabled
          class="el-form-box"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属危险作业：">
                <el-input :value="workName" disabled placeholder="-" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业类型：">
                <el-select
                  :value="ticket.workType"
                  placeholder="-"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in workTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请单位：">
                <el-input
                  :value="ticket.applyDeptName"
                  disabled
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人：">
                <el-input
                  :value="ticket.applicantName"
                  disabled
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="作业地点：">
                <el-input
                  :value="ticket.workLocation"
                  disabled
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业开始时间：">
                <el-input :value="ticket.startTime" disabled placeholder="-" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="作业结束时间：">
                <el-input :value="ticket.endTime" disabled placeholder="-" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="作业票模板：">
            <el-input :value="templateName" disabled placeholder="-" />
          </el-form-item>

          <el-form-item label="作业票内容：">
            <ticket-content-view
              v-if="template"
              :template="template"
              :extension="extension"
            />
            <div v-else class="empty-text">
              {{
                ticket.workType
                  ? '未匹配到该作业类型的作业票模板，展示已保存的原始内容'
                  : '暂无作业票内容'
              }}
            </div>
            <!-- 未匹配到模板时的降级展示：按 key-value 列出原始内容 -->
            <div v-if="!template && hasExtension" class="raw-extension">
              <div v-for="(value, key) in extension" :key="key" class="raw-row">
                <span class="raw-key">{{ key }}</span>
                <span class="raw-value">{{ value }}</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="备注：">
            <el-input
              :value="remark"
              type="textarea"
              :rows="3"
              disabled
              placeholder="-"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 作业类型专项内容（先适配动火作业票） -->
      <el-tab-pane
        v-if="isFireWork || currentFireNode"
        label="后续环节"
        name="flow"
      >
        <!-- 当前处理环节：可填写 -->
        <div v-if="currentFireNode" class="current-node-box">
          <flow-node-form
            ref="nodeForm"
            :node="currentFireNode"
            :value="nodeForm"
            @input="handleNodeInput"
          />
        </div>
        <div v-else class="node-tip">
          未识别到当前处理环节，以下为全部环节的查看内容
        </div>

        <!-- 全部环节（查看态，当前环节已在上方单独展示，这里排除避免重复） -->
        <fire-ticket-detail
          :ticket="ticket"
          :extension="extension"
          :variables="variables"
          :current-node-key="currentFireNode ? currentFireNode.key : ''"
          :exclude-node-keys="currentFireNode ? [currentFireNode.key] : []"
        />
      </el-tab-pane>

      <!-- 作业类型专项内容（受限空间作业票，独立组件实现） -->
      <el-tab-pane
        v-if="isConfinedSpaceWork || currentConfinedNode"
        label="后续环节"
        name="flowConfined"
      >
        <confined-space-flow
          ref="confinedFlow"
          :node="currentConfinedNode"
          :nodes="confinedFlowNodes"
          :ticket="ticket"
          :extension="extension"
          :variables="variables"
        />
      </el-tab-pane>

      <!-- 作业类型专项内容（高处作业票，独立组件实现） -->
      <el-tab-pane
        v-if="isHeightWork || currentHeightNode"
        label="后续环节"
        name="flowHeight"
      >
        <height-flow
          ref="heightFlow"
          :node="currentHeightNode"
          :nodes="heightFlowNodes"
          :ticket="ticket"
          :extension="extension"
          :variables="variables"
          :task-label="currentTaskName || taskDefinitionKey"
        />
      </el-tab-pane>

      <!-- 作业类型专项内容（吊装作业票，独立组件实现） -->
      <el-tab-pane
        v-if="isHoistingWork || currentHoistingNode"
        label="后续环节"
        name="flowHoisting"
      >
        <hoisting-flow
          ref="hoistingFlow"
          :node="currentHoistingNode"
          :nodes="hoistingFlowNodes"
          :ticket="ticket"
          :extension="extension"
          :variables="variables"
          :task-label="currentTaskName || taskDefinitionKey"
        />
      </el-tab-pane>

      <!-- 作业类型专项内容（临时用电作业票，独立组件实现） -->
      <el-tab-pane
        v-if="isElectricityWork || currentElectricityNode"
        label="后续环节"
        name="flowElectricity"
      >
        <electricity-flow
          ref="electricityFlow"
          :node="currentElectricityNode"
          :nodes="electricityFlowNodes"
          :ticket="ticket"
          :extension="extension"
          :variables="variables"
          :task-label="currentTaskName || taskDefinitionKey"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    ticketGetById,
    workGetById,
    ticketUpdate
  } from '@/api/bpm/components/dangerousWork';
  import { getDictByCode } from '@/api/sys';
  import { getWorkTicketTemplate } from './templates';
  import { resolveWorkTypeLabel, BUILT_IN_WORK_TYPES } from './workTypes';
  import { matchFireFlowNode } from './fireFlowNodes';
  import {
    getCurrentTaskInfo,
    loadProcessFormVariables,
    loadNodeValues,
    buildNodeVariables,
    buildNodePayload,
    mergeExtension,
    buildTicketUpdateParams,
    parseJsonObject
  } from './fireFlowTask';
  // 受限空间作业：独立实现，动火相关文件不做任何改动
  import {
    matchConfinedSpaceFlowNode,
    CONFINED_SPACE_FLOW_NODES
  } from './confinedSpaceFlowNodes';
  // 高处作业：独立实现，动火 / 受限空间相关文件不做任何改动
  import { matchHeightFlowNode, HEIGHT_FLOW_NODES } from './heightFlowNodes';
  // 吊装作业：独立实现，动火 / 受限空间 / 高处作业相关文件不做任何改动
  import {
    matchHoistingFlowNode,
    HOISTING_FLOW_NODES
  } from './hoistingFlowNodes';
  // 临时用电作业：独立实现，其它作业类型相关文件不做任何改动
  import {
    matchElectricityFlowNode,
    ELECTRICITY_FLOW_NODES
  } from './electricityFlowNodes';
  import TicketContentView from './components/ticketContentView.vue';
  import FireTicketDetail from './components/fireTicketDetail.vue';
  import FlowNodeForm from './components/flowNodeForm.vue';
  import ConfinedSpaceFlow from './components/confinedSpaceFlow.vue';
  import HeightFlow from './components/heightFlow.vue';
  import HoistingFlow from './components/hoistingFlow.vue';
  import ElectricityFlow from './components/electricityFlow.vue';

  // 作业票状态：1-待提交、2-审批中、3-已通过、4-已驳回
  const TICKET_STATUS = {
    1: '待提交',
    2: '审批中',
    3: '已通过',
    4: '已驳回'
  };

  // 作业票编号可能落在扩展数据的不同 key 上
  const TICKET_CODE_KEYS = ['permit_no', 'ticket_no', 'apply_no', 'code'];

  export default {
    name: 'TestDetail',
    components: {
      TicketContentView,
      FireTicketDetail,
      FlowNodeForm,
      ConfinedSpaceFlow,
      HeightFlow,
      HoistingFlow,
      ElectricityFlow
    },
    props: {
      // 作业票 id
      businessId: {
        default: ''
      },
      businessCode: {
        default: ''
      },
      taskId: {
        default: ''
      },
      id: {
        default: ''
      },
      taskDefinitionKey: {
        default: ''
      },
      businessType: {
        default: ''
      },
      fromUser: {
        default: ''
      },
      createTime: {
        default: ''
      }
    },
    data() {
      return {
        loading: false,
        // 当前 tab：info-作业票信息、flow-后续环节
        activeTab: 'info',
        // 作业票
        ticket: {},
        // 所属危险作业
        work: {},
        // 作业票内容（extensionJson 解析结果）
        extension: {},
        // 流程变量（流程实例 formVariables，后续环节数据来源）
        variables: {},
        // 匹配到的作业票模板
        template: null,
        // 作业类型字典（ehs_hazardous_work_type）
        workTypeDict: [],
        // el-form 的 model（查看态仅用于结构占位）
        form: {},
        // 当前待办任务的名称（任务定义 key 之外的第二重匹配依据）
        currentTaskName: '',
        // 当前环节的填写值
        nodeForm: {}
      };
    },
    computed: {
      // 作业类型名称
      workTypeName() {
        return (
          resolveWorkTypeLabel(this.ticket.workType, this.workTypeDict) || '-'
        );
      },
      // 作业类型下拉：优先后端字典，字典未配置时用内置作业类型兜底
      workTypeOptions() {
        if (this.workTypeDict.length) {
          return this.workTypeDict.map((item) => ({
            value: item.dictCode,
            label: item.dictValue
          }));
        }
        return BUILT_IN_WORK_TYPES.map((item) => ({
          value: item.code,
          label: item.name
        }));
      },
      // 所属危险作业名称（作业票详情不返回，按 workId 再查）
      workName() {
        return this.ticket.workName || this.work.workName || '';
      },
      // 作业票模板名称
      templateName() {
        return this.template?.name || '';
      },
      // 备注
      remark() {
        return this.extension.remark || '';
      },
      /**
       * 是否动火作业
       */
      isFireWork() {
        return this.template?.key === 'fire';
      },
      /**
       * 当前处理环节（动火）
       * 任务定义 key 在不同平台不一致，用「任务定义 key + 任务名称」一起匹配
       * 非动火作业直接返回 null：动火与受限空间的环节名称有重合
       * （如「气体分析」「安全交底」），不加限制会串台
       */
      currentFireNode() {
        if (!this.isFireWork) {
          return null;
        }
        return matchFireFlowNode(this.taskDefinitionKey, this.currentTaskName);
      },
      /**
       * 是否受限空间作业
       */
      isConfinedSpaceWork() {
        return this.template?.key === 'confined_space';
      },
      /**
       * 受限空间作业的全部后续环节
       */
      confinedFlowNodes() {
        return CONFINED_SPACE_FLOW_NODES;
      },
      /**
       * 当前处理环节（受限空间）
       * 任务定义 key 在不同平台不一致，用「任务定义 key + 任务名称」一起匹配
       */
      currentConfinedNode() {
        if (!this.isConfinedSpaceWork) {
          return null;
        }
        return matchConfinedSpaceFlowNode(
          this.taskDefinitionKey,
          this.currentTaskName
        );
      },
      /**
       * 是否高处作业
       */
      isHeightWork() {
        return this.template?.key === 'height';
      },
      /**
       * 高处作业的全部后续环节
       */
      heightFlowNodes() {
        return HEIGHT_FLOW_NODES;
      },
      /**
       * 当前处理环节（高处作业）
       * 任务定义 key 在不同平台不一致，用「任务定义 key + 任务名称」一起匹配
       */
      currentHeightNode() {
        if (!this.isHeightWork) {
          return null;
        }
        return matchHeightFlowNode(this.taskDefinitionKey, this.currentTaskName);
      },
      /**
       * 是否吊装作业
       */
      isHoistingWork() {
        return this.template?.key === 'hoisting';
      },
      /**
       * 吊装作业的全部后续环节
       */
      hoistingFlowNodes() {
        return HOISTING_FLOW_NODES;
      },
      /**
       * 当前处理环节（吊装作业）
       * 任务定义 key 在不同平台不一致，用「任务定义 key + 任务名称」一起匹配
       */
      currentHoistingNode() {
        if (!this.isHoistingWork) {
          return null;
        }
        return matchHoistingFlowNode(
          this.taskDefinitionKey,
          this.currentTaskName
        );
      },
      /**
       * 是否临时用电作业
       */
      isElectricityWork() {
        return this.template?.key === 'electricity';
      },
      /**
       * 临时用电作业的全部后续环节
       */
      electricityFlowNodes() {
        return ELECTRICITY_FLOW_NODES;
      },
      /**
       * 当前处理环节（临时用电作业）
       * 任务定义 key 在不同平台不一致，用「任务定义 key + 任务名称」一起匹配
       */
      currentElectricityNode() {
        if (!this.isElectricityWork) {
          return null;
        }
        return matchElectricityFlowNode(
          this.taskDefinitionKey,
          this.currentTaskName
        );
      },
      // 作业票状态文案
      statusText() {
        return (
          this.ticket.statusName || TICKET_STATUS[this.ticket.status] || ''
        );
      },
      // 作业票状态标签色
      statusTag() {
        const typeMap = {
          1: 'info',
          2: 'warning',
          3: 'success',
          4: 'danger'
        };
        return typeMap[this.ticket.status] || 'info';
      },
      // 作业票编号
      ticketCode() {
        const key = TICKET_CODE_KEYS.find(
          (item) => this.extension[item] !== undefined && this.extension[item]
        );
        return key ? this.extension[key] : '';
      },
      // 是否有扩展内容
      hasExtension() {
        return Object.keys(this.extension).length > 0;
      }
    },
    watch: {
      businessId: {
        immediate: true,
        handler(id) {
          if (id) {
            this.load(id);
          }
        }
      },
      // 处理节点落在后续环节时，默认切到「后续环节」tab
      // 必须在当前环节识别完成之后再切：
      // 任务名称要等流程待办接口返回后才知道，
      // 提前判断拿到的是空任务名称，按名称匹配的流程就切不过去
      taskDefinitionKey() {
        this.loadCurrentNode().then(() => {
          this.switchToFlowTab();
        });
      }
    },
    methods: {
      async load(id) {
        this.loading = true;
        this.reset();
        try {
          const [ticket, dict] = await Promise.all([
            ticketGetById(id),
            this.loadWorkTypeDict()
          ]);
          this.ticket = ticket || {};
          this.extension = parseJsonObject(this.ticket.extensionJson);
          this.workTypeDict = dict;
          // 按作业类型匹配作业票模板
          this.template = getWorkTicketTemplate(
            this.ticket.workType,
            this.workTypeName === '-' ? '' : this.workTypeName
          );
          // 作业票详情不返回所属作业名称，按 workId 再查一次
          if (this.ticket.workId) {
            try {
              this.work = (await workGetById(this.ticket.workId)) || {};
            } catch (e) {
              this.work = {};
            }
          }
          // 后续环节（风险辨识、安全措施落实、各环节意见等）取流程变量
          await this.loadVariables();
          // 识别当前处理环节并回显
          await this.loadCurrentNode();
          // 当前处理环节落在后续环节时，自动切到「后续环节」tab
          this.switchToFlowTab();
        } catch (e) {
          this.$message.error(e?.message || '查询作业票详情失败');
        } finally {
          this.loading = false;
        }
      },
      // 流程变量：作业票后续环节的数据来源
      async loadVariables() {
        const { vars } = await loadProcessFormVariables(this.id);
        this.variables = vars;
      },
      /**
       * 识别当前处理环节并回显其内容
       * 任务定义 key 由流程设计器决定，取不到时用任务名称兜底
       */
      async loadCurrentNode() {
        this.currentTaskName = '';
        this.nodeForm = {};
        if (!this.id) {
          return;
        }
        const info = await getCurrentTaskInfo(this.id, this.taskDefinitionKey);
        this.currentTaskName = info.name;
        // 受限空间作业：环节内容由受限空间自己的组件回显，这里不参与
        if (this.currentConfinedNode) {
          return;
        }
        // 高处作业：环节内容由高处作业自己的组件回显，这里不参与
        if (this.currentHeightNode) {
          return;
        }
        // 吊装作业：环节内容由吊装作业自己的组件回显，这里不参与
        if (this.currentHoistingNode) {
          return;
        }
        // 临时用电作业：环节内容由临时用电自己的组件回显，这里不参与
        if (this.currentElectricityNode) {
          return;
        }
        const node = this.currentFireNode;
        if (!node) {
          return;
        }
        // 环节数据统一存放在作业票内容（extensionJson）里，流程变量仅作兼容兜底
        this.nodeForm = loadNodeValues(node, [this.extension, this.variables]);
      },
      /**
       * 切到当前处理环节对应的「后续环节」tab
       *
       * 必须在当前环节识别完成之后调用：任务名称要等流程待办接口返回后才知道，
       * 提前判断拿到的是空任务名称，按任务名称匹配的流程就切不过去。
       */
      switchToFlowTab() {
        if (this.currentFireNode) {
          this.activeTab = 'flow';
          return;
        }
        if (this.currentConfinedNode) {
          this.activeTab = 'flowConfined';
          return;
        }
        if (this.currentHeightNode) {
          this.activeTab = 'flowHeight';
          return;
        }
        if (this.currentHoistingNode) {
          this.activeTab = 'flowHoisting';
          return;
        }
        if (this.currentElectricityNode) {
          this.activeTab = 'flowElectricity';
        }
      },
      // 环节填写值变化
      handleNodeInput(val) {
        this.nodeForm = val;
      },
      /**
       * 当前环节表单校验
       */
      async validateNodeForm() {
        if (this.isConfinedSpaceWork) {
          return this.validateConfinedNodeForm();
        }
        if (this.isHeightWork) {
          return this.validateHeightNodeForm();
        }
        if (this.isHoistingWork) {
          return this.validateHoistingNodeForm();
        }
        if (this.isElectricityWork) {
          return this.validateElectricityNodeForm();
        }
        if (!this.currentFireNode || !this.$refs.nodeForm) {
          return true;
        }
        return this.$refs.nodeForm.validate();
      },
      /**
       * 受限空间作业的当前环节表单校验
       */
      async validateConfinedNodeForm() {
        if (!this.currentConfinedNode || !this.$refs.confinedFlow) {
          return true;
        }
        return this.$refs.confinedFlow.validate();
      },
      /**
       * 高处作业的当前环节表单校验
       */
      async validateHeightNodeForm() {
        if (!this.currentHeightNode || !this.$refs.heightFlow) {
          return true;
        }
        return this.$refs.heightFlow.validate();
      },
      /**
       * 吊装作业的当前环节表单校验
       */
      async validateHoistingNodeForm() {
        if (!this.currentHoistingNode || !this.$refs.hoistingFlow) {
          return true;
        }
        return this.$refs.hoistingFlow.validate();
      },
      /**
       * 临时用电作业的当前环节表单校验
       */
      async validateElectricityNodeForm() {
        if (!this.currentElectricityNode || !this.$refs.electricityFlow) {
          return true;
        }
        return this.$refs.electricityFlow.validate();
      },
      /**
       * 供审批组件（submit.vue）取当前环节数据
       * 取数的同时把环节内容合并进作业票内容（extensionJson）并落库，
       * 保证审批通过后数据已经落在作业票上
       * @returns {Promise<{valid: boolean, variables: object, payload: object, saved: boolean, message: string}>}
       */
      async getTableValue() {
        if (this.isConfinedSpaceWork) {
          return this.getConfinedTableValue();
        }
        if (this.isHeightWork) {
          return this.getHeightTableValue();
        }
        if (this.isHoistingWork) {
          return this.getHoistingTableValue();
        }
        if (this.isElectricityWork) {
          return this.getElectricityTableValue();
        }
        if (!this.currentFireNode) {
          return {
            valid: true,
            variables: {},
            payload: {},
            saved: true,
            message: ''
          };
        }
        const valid = await this.validateNodeForm();
        const payload = buildNodePayload(this.currentFireNode, this.nodeForm);
        const variables = buildNodeVariables(
          this.currentFireNode,
          this.nodeForm
        );
        if (!valid) {
          return {
            valid,
            variables,
            payload,
            saved: false,
            message: '请填写当前环节的必填内容'
          };
        }
        const saved = await this.updateExtension(payload);
        return {
          valid,
          variables,
          payload,
          saved: saved.saved,
          message: saved.message
        };
      },
      /**
       * 取受限空间作业当前环节的数据（供审批组件 submit.vue 使用）
       * 取数的同时把环节内容合并进作业票内容（extensionJson）并落库，
       * 保证审批通过后数据已经落在作业票上
       * @returns {Promise<{valid: boolean, variables: object, payload: object, saved: boolean, message: string}>}
       */
      async getConfinedTableValue() {
        const flow = this.$refs.confinedFlow;
        if (!this.currentConfinedNode || !flow) {
          return {
            valid: true,
            variables: {},
            payload: {},
            saved: true,
            message: ''
          };
        }
        const valid = await this.validateConfinedNodeForm();
        const payload = flow.getPayload();
        const variables = flow.getVariables();
        if (!valid) {
          return {
            valid,
            variables,
            payload,
            saved: false,
            message: '请填写当前环节的必填内容'
          };
        }
        const saved = await this.updateExtension(payload);
        return {
          valid,
          variables,
          payload,
          saved: saved.saved,
          message: saved.message
        };
      },
      /**
       * 取高处作业当前环节的数据（供审批组件 submit.vue 使用）
       * 取数的同时把环节内容合并进作业票内容（extensionJson）并落库，
       * 保证审批通过后数据已经落在作业票上
       * @returns {Promise<{valid: boolean, variables: object, payload: object, saved: boolean, message: string}>}
       */
      async getHeightTableValue() {
        const flow = this.$refs.heightFlow;
        if (!this.currentHeightNode || !flow) {
          return {
            valid: true,
            variables: {},
            payload: {},
            saved: true,
            message: ''
          };
        }
        const valid = await this.validateHeightNodeForm();
        const payload = flow.getPayload();
        const variables = flow.getVariables();
        if (!valid) {
          return {
            valid,
            variables,
            payload,
            saved: false,
            message: '请填写当前环节的必填内容'
          };
        }
        const saved = await this.updateExtension(payload);
        return {
          valid,
          variables,
          payload,
          saved: saved.saved,
          message: saved.message
        };
      },
      /**
       * 取吊装作业当前环节的数据（供审批组件 submit.vue 使用）
       * 取数的同时把环节内容合并进作业票内容（extensionJson）并落库，
       * 保证审批通过后数据已经落在作业票上
       * @returns {Promise<{valid: boolean, variables: object, payload: object, saved: boolean, message: string}>}
       */
      async getHoistingTableValue() {
        const flow = this.$refs.hoistingFlow;
        if (!this.currentHoistingNode || !flow) {
          return {
            valid: true,
            variables: {},
            payload: {},
            saved: true,
            message: ''
          };
        }
        const valid = await this.validateHoistingNodeForm();
        const payload = flow.getPayload();
        const variables = flow.getVariables();
        if (!valid) {
          return {
            valid,
            variables,
            payload,
            saved: false,
            message: '请填写当前环节的必填内容'
          };
        }
        const saved = await this.updateExtension(payload);
        return {
          valid,
          variables,
          payload,
          saved: saved.saved,
          message: saved.message
        };
      },
      /**
       * 取临时用电作业当前环节的数据（供审批组件 submit.vue 使用）
       * 取数的同时把环节内容合并进作业票内容（extensionJson）并落库，
       * 保证审批通过后数据已经落在作业票上
       * @returns {Promise<{valid: boolean, variables: object, payload: object, saved: boolean, message: string}>}
       */
      async getElectricityTableValue() {
        const flow = this.$refs.electricityFlow;
        if (!this.currentElectricityNode || !flow) {
          return {
            valid: true,
            variables: {},
            payload: {},
            saved: true,
            message: ''
          };
        }
        const valid = await this.validateElectricityNodeForm();
        const payload = flow.getPayload();
        const variables = flow.getVariables();
        if (!valid) {
          return {
            valid,
            variables,
            payload,
            saved: false,
            message: '请填写当前环节的必填内容'
          };
        }
        const saved = await this.updateExtension(payload);
        return {
          valid,
          variables,
          payload,
          saved: saved.saved,
          message: saved.message
        };
      },
      /**
       * 把环节内容合并进作业票内容（extensionJson）并保存
       */
      async updateExtension(payload) {
        if (!Object.keys(payload || {}).length) {
          return { saved: true, message: '' };
        }
        if (!this.businessId && !this.ticket?.id) {
          return { saved: false, message: '缺少作业票信息，无法保存环节内容' };
        }
        const extension = mergeExtension(this.extension, payload);
        const params = buildTicketUpdateParams(
          this.ticket,
          extension,
          this.businessId
        );
        try {
          await ticketUpdate(params);
          // 同步本地内容，避免详情页显示旧值
          this.extension = extension;
          return { saved: true, message: '' };
        } catch (e) {
          return {
            saved: false,
            message: e?.message || '环节内容保存失败'
          };
        }
      },
      /** 供审批组件提交时调用，保存业务数据 */
      async save(data) {
        if (this.isConfinedSpaceWork) {
          return this.saveConfined(data);
        }
        if (this.isHeightWork) {
          return this.saveHeight(data);
        }
        if (this.isHoistingWork) {
          return this.saveHoisting(data);
        }
        if (this.isElectricityWork) {
          return this.saveElectricity(data);
        }
        const payload =
          data && data.payload
            ? data.payload
            : buildNodePayload(this.currentFireNode, this.nodeForm);
        if (!Object.keys(payload).length) {
          return data;
        }
        try {
          const res = await this.updateExtension(payload);
          if (!res.saved) {
            console.error('保存环节内容失败', res.message);
          }
        } catch (e) {
          console.error('保存环节内容失败', e);
        }
        return data;
      },
      /**
       * 受限空间作业：供审批组件提交时调用，保存业务数据
       */
      async saveConfined(data) {
        const flow = this.$refs.confinedFlow;
        const payload =
          data && data.payload
            ? data.payload
            : flow
            ? flow.getPayload()
            : {};
        if (!Object.keys(payload).length) {
          return data;
        }
        try {
          const res = await this.updateExtension(payload);
          if (!res.saved) {
            console.error('保存环节内容失败', res.message);
          }
        } catch (e) {
          console.error('保存环节内容失败', e);
        }
        return data;
      },
      /**
       * 高处作业：供审批组件提交时调用，保存业务数据
       */
      async saveHeight(data) {
        const flow = this.$refs.heightFlow;
        const payload =
          data && data.payload
            ? data.payload
            : flow
            ? flow.getPayload()
            : {};
        if (!Object.keys(payload).length) {
          return data;
        }
        try {
          const res = await this.updateExtension(payload);
          if (!res.saved) {
            console.error('保存环节内容失败', res.message);
          }
        } catch (e) {
          console.error('保存环节内容失败', e);
        }
        return data;
      },
      /**
       * 吊装作业：供审批组件提交时调用，保存业务数据
       */
      async saveHoisting(data) {
        const flow = this.$refs.hoistingFlow;
        const payload =
          data && data.payload
            ? data.payload
            : flow
            ? flow.getPayload()
            : {};
        if (!Object.keys(payload).length) {
          return data;
        }
        try {
          const res = await this.updateExtension(payload);
          if (!res.saved) {
            console.error('保存环节内容失败', res.message);
          }
        } catch (e) {
          console.error('保存环节内容失败', e);
        }
        return data;
      },
      /**
       * 临时用电作业：供审批组件提交时调用，保存业务数据
       */
      async saveElectricity(data) {
        const flow = this.$refs.electricityFlow;
        const payload =
          data && data.payload
            ? data.payload
            : flow
            ? flow.getPayload()
            : {};
        if (!Object.keys(payload).length) {
          return data;
        }
        try {
          const res = await this.updateExtension(payload);
          if (!res.saved) {
            console.error('保存环节内容失败', res.message);
          }
        } catch (e) {
          console.error('保存环节内容失败', e);
        }
        return data;
      },
      // 作业类型字典：{dictCode, dictValue} 形式
      async loadWorkTypeDict() {
        try {
          const items = await getDictByCode('ehs_hazardous_work_type');
          return (items || []).map((item) => ({
            dictCode: item.key,
            dictValue: item.label
          }));
        } catch (e) {
          return [];
        }
      },
      reset() {
        this.ticket = {};
        this.work = {};
        this.extension = {};
        this.variables = {};
        this.template = null;
        this.currentTaskName = '';
        this.nodeForm = {};
        this.activeTab = 'info';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ticket-detail {
    .detail-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px 10px;
    }
    .summary-title {
      font-size: 15px;
      font-weight: 500;
      color: #303133;
      i {
        color: #409eff;
        margin-right: 4px;
      }
      ::v-deep .el-tag {
        margin-left: 8px;
      }
    }
    .summary-extra {
      font-size: 12px;
      color: #909399;
      line-height: 20px;
      span {
        margin-left: 14px;
      }
    }
    .detail-tabs {
      ::v-deep .el-tabs__content {
        padding-top: 12px;
      }
    }
    .current-node-box {
      padding: 16px;
      margin-bottom: 16px;
      border: 1px solid #d9ecff;
      border-radius: 4px;
      background: #f5faff;
    }
    .node-tip {
      padding: 10px 0;
      font-size: 13px;
      color: #909399;
    }
    .el-form-box {
      max-height: calc(100vh - 320px);
      overflow-y: auto;
      padding-right: 10px;
    }
    .empty-text {
      padding: 10px 0;
      font-size: 13px;
      color: #909399;
    }
    .raw-extension {
      padding: 8px 12px;
      background: #f6f7f9;
      border-radius: 4px;
    }
    .raw-row {
      display: flex;
      font-size: 13px;
      line-height: 24px;
      word-break: break-all;
    }
    .raw-key {
      flex: 0 0 180px;
      color: #909399;
    }
    .raw-value {
      flex: 1;
      color: #303133;
    }
  }
</style>