|
|
@@ -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;
|
