feat: 优化危险作业票详情页面的 tab 样式与逻辑，统一与 WT 系统保持一致

src/views/bpm/handleTask/components/dangerousWorkTicket/detail.vue

@@ -6,6 +6,8 @@
     / 作业开始时间 / 作业结束时间 / 作业票模板 / 作业票内容 / 备注
   作业票内容按 EHS 内置作业票模板渲染（不同作业类型套用不同模板）；
   页面用 tab 区分「作业票信息」与「后续环节」（tab 栏在上方），默认选中「作业票信息」；
+  tab 栏沿用 WT 系统统一的 .switch 样式（与 done/detailDialog、tickets/index 等页面一致），
+  样式定义在 src/styles/transition/common.scss，不在本组件内重复写样式；
   动火、受限空间、高处作业、吊装作业、临时用电作业、动土作业、断路作业、盲板抽堵作业八类作业共用本页面与 submit.vue：
     动火作业   沿用自己的实现
                fireFlowNodes.js + components/fireTicketDetail.vue + components/flowNodeForm.vue
@@ -34,168 +36,186 @@
       </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>
+    <!-- tab 切换：沿用 WT 系统统一的 tab 样式（.switch，src/styles/transition/common.scss） -->
+    <div class="switch">
+      <div class="switch_left">
+        <ul>
+          <li
+            v-for="item in tabOptions"
+            :key="item.key"
+            :class="{ active: activeTab === item.key }"
+            @click="activeTab = item.key"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
 
-          <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="-"
+    <!-- 作业票信息 -->
+    <div v-show="activeTab === 'info'" class="tab-pane">
+      <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-form-item>
-            </el-col>
-          </el-row>
+              </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.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.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.endTime" 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-form-item label="作业票模板：">
-            <el-input :value="templateName" disabled placeholder="-" />
-          </el-form-item>
+        <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="作业票内容：">
-            <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="templateName" disabled placeholder="-" />
+        </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-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-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"
+        <el-form-item label="备注：">
+          <el-input
+            :value="remark"
+            type="textarea"
+            :rows="3"
+            disabled
+            placeholder="-"
           />
-        </div>
-        <div v-else class="node-tip">
-          未识别到当前处理环节，以下为全部环节的查看内容
-        </div>
+        </el-form-item>
+      </el-form>
+    </div>
 
-        <!-- 全部环节（查看态，当前环节已在上方单独展示，这里排除避免重复） -->
-        <fire-ticket-detail
-          :ticket="ticket"
-          :extension="extension"
-          :variables="variables"
-          :current-node-key="currentFireNode ? currentFireNode.key : ''"
-          :exclude-node-keys="currentFireNode ? [currentFireNode.key] : []"
+    <!-- 后续环节（动火作业） -->
+    <div
+      v-if="isFireWork || currentFireNode"
+      v-show="activeTab === 'flow'"
+      class="tab-pane"
+    >
+      <!-- 当前处理环节：可填写 -->
+      <div v-if="currentFireNode" class="current-node-box">
+        <flow-node-form
+          ref="nodeForm"
+          :node="currentFireNode"
+          :value="nodeForm"
+          @input="handleNodeInput"
         />
-      </el-tab-pane>
+      </div>
+      <div v-else class="node-tip">
+        未识别到当前处理环节，以下为全部环节的查看内容
+      </div>
 
-      <!-- 作业类型专项内容（按作业类型分发：受限空间 / 高处 / 吊装 / 临时用电 / 动土 / 断路 / 盲板抽堵） -->
-      <el-tab-pane v-if="currentFlowType" label="后续环节" name="flowGeneric">
-        <component
-          :is="currentFlowType.component"
-          ref="flowView"
-          :node="currentFlowNode"
-          :nodes="currentFlowType.nodes"
-          :ticket="ticket"
-          :extension="extension"
-          :variables="variables"
-          :task-label="currentTaskName || taskDefinitionKey"
-        />
-      </el-tab-pane>
-    </el-tabs>
+      <!-- 全部环节（查看态，当前环节已在上方单独展示，这里排除避免重复） -->
+      <fire-ticket-detail
+        :ticket="ticket"
+        :extension="extension"
+        :variables="variables"
+        :current-node-key="currentFireNode ? currentFireNode.key : ''"
+        :exclude-node-keys="currentFireNode ? [currentFireNode.key] : []"
+      />
+    </div>
+
+    <!-- 后续环节（按作业类型分发：受限空间 / 高处 / 吊装 / 临时用电 / 动土 / 断路 / 盲板抽堵） -->
+    <div
+      v-if="currentFlowType"
+      v-show="activeTab === 'flow'"
+      class="tab-pane"
+    >
+      <component
+        :is="currentFlowType.component"
+        ref="flowView"
+        :node="currentFlowNode"
+        :nodes="currentFlowType.nodes"
+        :ticket="ticket"
+        :extension="extension"
+        :variables="variables"
+        :task-label="currentTaskName || taskDefinitionKey"
+      />
+    </div>
   </div>
 </template>
 
@@ -388,6 +408,19 @@
       };
     },
     computed: {
+      /**
+       * tab 选项：与 WT 系统其他页面的 tab 保持一致（作业票信息 + 后续环节）
+       * 「后续环节」按作业类型区分：
+       *   动火作业   走自己的实现（fireTicketDetail + flowNodeForm）
+       *   其余七类   由 FLOW_TYPES 分发到各自的环节组件
+       */
+      tabOptions() {
+        const tabs = [{ key: 'info', name: '作业票信息' }];
+        if (this.isFireWork || this.currentFireNode || this.currentFlowType) {
+          tabs.push({ key: 'flow', name: '后续环节' });
+        }
+        return tabs;
+      },
       // 作业类型名称
       workTypeName() {
         return (
@@ -797,10 +830,8 @@
         margin-left: 14px;
       }
     }
-    .detail-tabs {
-      ::v-deep .el-tabs__content {
-        padding-top: 12px;
-      }
+    .tab-pane {
+      padding-top: 12px;
     }
     .current-node-box {
       padding: 16px;