53 lines
2.3 KiB
Vue
53 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import { ref, watch } from 'vue';
|
||
import { useThemeStore } from '@/store/modules/theme';
|
||
import { Icon } from '@iconify/vue'
|
||
import RichTextInput from './RichTextInput.vue'
|
||
|
||
const themeStore = useThemeStore();
|
||
const props = defineProps(['formInfo'])
|
||
const emit = defineEmits(['update:data']);
|
||
|
||
const form = ref<any>(null);
|
||
watch(() => props.formInfo,
|
||
(val: any) => {
|
||
// 深度拷贝以避免直接修改 props，并确保响应式
|
||
form.value = val
|
||
},
|
||
{ immediate: true, deep: true },
|
||
)
|
||
// 编辑风险预分析
|
||
const preRiskEdit = ref<boolean>(false);
|
||
// 更新数据
|
||
const onCellChange = (key:string,val:string) => {
|
||
form.value[key] = val;
|
||
emit('update:data', key, val)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||
<div class="flex items-center justify-between px-4 py-2 border-b">
|
||
<div class="flex items-center">
|
||
<Icon icon="lucide:list-checks" class="size-16px text-emerald-500" />
|
||
<span class="font-semibold text-base ml-2">风险预分析报告</span>
|
||
</div>
|
||
<NButton text type="primary" class="ml-auto text-xs hover:underline" @click="preRiskEdit = !preRiskEdit">
|
||
{{ preRiskEdit ? "完成" : "编辑" }}
|
||
</NButton>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="space-y-4">
|
||
<div v-for="s in ([{ key: 'severity', name: '危害严重性分析' }, { key: 'probability', name: '事件概率分析' }, { key: 'protection', name: '保护措施影响分析' }])" :key="s.key" class="rounded-lg border">
|
||
<div class="flex items-center gap-2 border-b bg-slate-50/60 px-4 py-2">
|
||
<span class="text-sm font-semibold text-slate-700">{{ s.name }}</span>
|
||
</div>
|
||
<RichTextInput :disabled="!preRiskEdit" :modelValue="form[s.key]" :minRows="2" :bordered="false" @update:modelValue="(v) => onCellChange(s.key,v)" />
|
||
</div>
|
||
<div class="rounded-lg bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-700">
|
||
AI 风险预分析仅供参考，用于申请阶段的快速研判；正式风险识别请前往「风险分析记录表」标签页，使用 风险预分析 / HAZOP / FMEA / 风险检查表开展并留存记录。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template> |