| | |
| | | <el-form ref="formRef" |
| | | :model="form" |
| | | :rules="rules" |
| | | label-width="120px"> |
| | | label-position="top" |
| | | label-width="150px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="应急预案编码" |
| | | <el-form-item label="应急预案编码:" |
| | | prop="planCode"> |
| | | <el-input v-model="form.planCode" |
| | | placeholder="请输入应急预案编码" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="应急预案名称" |
| | | <el-form-item label="应急预案名称:" |
| | | prop="planName"> |
| | | <el-input v-model="form.planName" |
| | | placeholder="请输入应急预案名称" /> |
| | |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="预案类型" |
| | | <el-form-item label="预案类型:" |
| | | prop="planType"> |
| | | <el-select v-model="form.planType" |
| | | placeholder="请选择预案类型" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="备注" |
| | | <el-form-item label="备注:" |
| | | prop="remark"> |
| | | <el-input v-model="form.remark" |
| | | placeholder="请输入备注" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form-item label="适用范围" |
| | | <el-form-item label="适用范围:" |
| | | prop="applyScope"> |
| | | <el-checkbox-group v-model="form.applyScope"> |
| | | <el-checkbox label="all">全体员工</el-checkbox> |
| | |
| | | <el-checkbox label="tech">技术部门</el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item label="应急处置步骤" |
| | | <el-form-item label="应急处置步骤:" |
| | | prop="execSteps"> |
| | | <div class="exec-steps-container" |
| | | style="width:100%"> |
| | |
| | | {{ currentKnowledge.coreResponsorUserName }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="预案类型"> |
| | | <el-tag type="warning"> {{ currentKnowledge.planType }}</el-tag> |
| | | <el-tag type="warning"> {{ emergencyPlanTypeLabel(currentKnowledge.planType) }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="备注"> |
| | | {{ currentKnowledge.remark }} |
| | |
| | | <div v-for="(step, index) in JSON.parse(currentKnowledge.execSteps)" |
| | | :key="index" |
| | | class="exec-step-view"> |
| | | <span class="step-number">{{ index + 1 }}.</span> |
| | | <!-- <span class="step-number">{{ index + 1 }}.</span> --> |
| | | <span class="step-title">{{ step.step }}:</span> |
| | | <span>{{ step.description }}</span> |
| | | </div> |
| | |
| | | label: "预案类型", |
| | | prop: "planType", |
| | | showOverflowTooltip: true, |
| | | formatData: params => { |
| | | return emergencyPlanTypeLabel(params); |
| | | }, |
| | | }, |
| | | { |
| | | label: "备注", |
| | |
| | | }; |
| | | return timeMap[efficiency] || "未知"; |
| | | }; |
| | | const emergencyPlanTypeOptions = computed(() => [ |
| | | { |
| | | value: "预防性应急预案", |
| | | label: "预防性应急预案", |
| | | }, |
| | | { |
| | | value: "应急处理预案", |
| | | label: "应急处理预案", |
| | | }, |
| | | { |
| | | value: "恢复性应急预案", |
| | | label: "恢复性应急预案", |
| | | }, |
| | | ]); |
| | | const { proxy } = getCurrentInstance(); |
| | | const { emergency_plan_type } = proxy.useDict("emergency_plan_type"); |
| | | const emergencyPlanTypeOptions = computed( |
| | | () => emergency_plan_type?.value || [] |
| | | ); |
| | | const emergencyPlanTypeLabel = val => { |
| | | const item = emergencyPlanTypeOptions.value.find( |
| | | i => String(i.value) === String(val) |
| | | ); |
| | | return item ? item.label : val; |
| | | }; |
| | | // 提交应急预案表单 |
| | | const submitForm = async () => { |
| | | try { |
| | |
| | | }; |
| | | |
| | | // 导出 |
| | | const { proxy } = getCurrentInstance(); |
| | | const { knowledge_type } = proxy.useDict("knowledge_type"); |
| | | |
| | | // 字典工具 |
| | | const knowledgeTypeOptions = computed(() => knowledge_type?.value || []); |
| | |
| | | |
| | | .exec-steps-container { |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 4px; |
| | | padding: 15px; |
| | | border-radius: 8px; |
| | | padding: 20px; |
| | | background-color: #f9fafc; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .exec-step-item { |
| | | margin-bottom: 10px; |
| | | padding: 10px; |
| | | margin-bottom: 12px; |
| | | padding: 12px; |
| | | background-color: #ffffff; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 4px; |
| | | border-radius: 6px; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .exec-step-item:hover { |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | border-color: #c6e2ff; |
| | | } |
| | | |
| | | .step-header { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | flex-direction: column; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .exec-step-view { |
| | | margin-bottom: 8px; |
| | | padding-left: 20px; |
| | | margin-bottom: 16px; |
| | | padding-left: 24px; |
| | | position: relative; |
| | | line-height: 1.6; |
| | | } |
| | | |
| | | .exec-step-view::before { |
| | | content: ""; |
| | | position: absolute; |
| | | left: 10px; |
| | | top: 20px; |
| | | bottom: -16px; |
| | | width: 2px; |
| | | background-color: #eaeaea; |
| | | } |
| | | |
| | | .exec-step-view:last-child::before { |
| | | display: none; |
| | | } |
| | | |
| | | .step-number { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | width: 20px; |
| | | height: 20px; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | font-weight: bold; |
| | | color: #409eff; |
| | | color: #ffffff; |
| | | background-color: #409eff; |
| | | border-radius: 50%; |
| | | font-size: 12px; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .step-title { |
| | | font-weight: bold; |
| | | margin-right: 5px; |
| | | font-weight: 600; |
| | | margin-right: 8px; |
| | | color: #395a9c; |
| | | } |
| | | |
| | | .no-data { |
| | | color: #909399; |
| | | font-style: italic; |
| | | text-align: center; |
| | | padding: 20px; |
| | | background-color: #f8f9fa; |
| | | border-radius: 4px; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |