| | |
| | | </el-row> |
| | | <el-form-item label="适用范围:" |
| | | prop="applyScope"> |
| | | <el-checkbox-group v-model="form.applyScope"> |
| | | <el-checkbox label="all">全体员工</el-checkbox> |
| | | <el-checkbox label="manager">管理层</el-checkbox> |
| | | <el-checkbox label="hr">人事部门</el-checkbox> |
| | | <el-checkbox label="finance">财务部门</el-checkbox> |
| | | <el-checkbox label="tech">技术部门</el-checkbox> |
| | | <el-checkbox-group v-model="form.applyScope" |
| | | class="apply-scope-checkbox-group"> |
| | | <el-checkbox v-for="dept in applyScopeOptions" |
| | | :key="dept.deptId" |
| | | :value="String(dept.deptId)"> |
| | | {{ dept.deptName }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item label="应急处置步骤:" |
| | |
| | | <div class="detail-section"> |
| | | <h4>适用范围</h4> |
| | | <div class="key-points"> |
| | | <el-tag v-for="(point, index) in currentKnowledge.applyScope.split(',')" |
| | | :key="index" |
| | | <el-tag v-for="(scope, index) in getApplyScopeTags(currentKnowledge)" |
| | | :key="`${scope.value}-${index}`" |
| | | type="primary" |
| | | style="margin-right: 8px; margin-bottom: 8px;"> |
| | | {{ getApplyScopeLabel(point.trim()) }} |
| | | {{ scope.label }} |
| | | </el-tag> |
| | | </div> |
| | | </div> |
| | |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | | import { userListNoPage } from "@/api/system/user.js"; |
| | | import { listDept } from "@/api/system/dept.js"; |
| | | import { |
| | | safeContingencyPlanListPage, |
| | | safeContingencyPlanAdd, |
| | |
| | | // 表单引用 |
| | | const formRef = ref(); |
| | | const execStepsList = ref([]); |
| | | const applyScopeOptions = ref([]); |
| | | const applyScopeNameMap = computed(() => { |
| | | return applyScopeOptions.value.reduce((map, dept) => { |
| | | map[String(dept.deptId)] = dept.deptName; |
| | | return map; |
| | | }, {}); |
| | | }); |
| | | |
| | | // 表格列配置 |
| | | const tableColumn = ref([ |
| | |
| | | userListNoPage().then(res => { |
| | | userList.value = res.data; |
| | | }); |
| | | loadApplyScopeOptions(); |
| | | getList(); |
| | | startAutoRefresh(); |
| | | }); |
| | |
| | | } else { |
| | | execStepsList.value = []; |
| | | } |
| | | }; |
| | | |
| | | const loadApplyScopeOptions = () => { |
| | | listDept({ status: "0" }).then(res => { |
| | | applyScopeOptions.value = res.data || []; |
| | | }); |
| | | }; |
| | | |
| | | const parseApplyScope = scope => { |
| | | if (Array.isArray(scope)) { |
| | | return scope.map(item => String(item)).filter(Boolean); |
| | | } |
| | | return String(scope || "") |
| | | .split(",") |
| | | .map(item => item.trim()) |
| | | .filter(Boolean); |
| | | }; |
| | | // 开始自动刷新 |
| | | const startAutoRefresh = () => { |
| | |
| | | dialogTitle.value = "新增应急预案"; |
| | | // 重置表单 |
| | | Object.assign(form.value, { |
| | | id: undefined, |
| | | planCode: "", // 预案编号 |
| | | applyScope: [], // 适用范围 |
| | | planType: "", // 预案类型 |
| | |
| | | Object.assign(form.value, { |
| | | id: row.id, |
| | | planCode: row.planCode, // 预案编号 |
| | | applyScope: row.applyScope ? row.applyScope.split(",") : [], // 适用范围 |
| | | applyScope: parseApplyScope(row.applyScope), // 适用范围 |
| | | planType: row.planType, // 预案类型 |
| | | planName: row.planName, // 预案名称 |
| | | publishTime: row.publishTime, // 发布时间 |
| | |
| | | viewDialogVisible.value = true; |
| | | }; |
| | | const getApplyScopeLabel = scope => { |
| | | const scopeMap = { |
| | | all: "全体员工", |
| | | manager: "管理层", |
| | | hr: "人事部门", |
| | | finance: "财务部门", |
| | | tech: "技术部门", |
| | | }; |
| | | return scopeMap[scope] || scope; |
| | | return applyScopeNameMap.value[String(scope)] || scope; |
| | | }; |
| | | const getApplyScopeTags = row => { |
| | | return parseApplyScope(row?.applyScope).map((scope, index) => ({ |
| | | value: scope, |
| | | label: getApplyScopeLabel(scope), |
| | | })); |
| | | }; |
| | | |
| | | // 获取类型标签类型 |
| | |
| | | } |
| | | } |
| | | |
| | | // 将应急处置步骤转换为JSON字符串 |
| | | form.value.execSteps = JSON.stringify(execStepsList.value); |
| | | const submitData = { |
| | | ...form.value, |
| | | applyScope: form.value.applyScope.join(","), |
| | | execSteps: JSON.stringify(execStepsList.value), |
| | | }; |
| | | if (dialogType.value === "add") { |
| | | // 新增应急预案 |
| | | form.value.applyScope = form.value.applyScope.join(","); |
| | | safeContingencyPlanAdd({ ...form.value }) |
| | | safeContingencyPlanAdd(submitData) |
| | | .then(res => { |
| | | if (res.code == 200) { |
| | | ElMessage.success("添加成功"); |
| | |
| | | ElMessage.error(err.msg); |
| | | }); |
| | | } else { |
| | | form.value.applyScope = form.value.applyScope.join(","); |
| | | safeContingencyPlanUpdate({ ...form.value }) |
| | | safeContingencyPlanUpdate(submitData) |
| | | .then(res => { |
| | | if (res.code == 200) { |
| | | ElMessage.success("更新成功"); |
| | |
| | | gap: 8px; |
| | | } |
| | | |
| | | .apply-scope-checkbox-group { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 8px 16px; |
| | | } |
| | | |
| | | .apply-scope-checkbox-group :deep(.el-checkbox) { |
| | | margin-right: 0; |
| | | } |
| | | |
| | | .usage-stats { |
| | | margin-top: 16px; |
| | | } |