moc变更管理系统框架

2026-08-13 12:31:16 +08:00
commit 3e5157909c
291 changed files with 39930 additions and 0 deletions
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import {
+  CHANGES, DOC_TODO, LEVEL_COLOR, STATUS_COLOR, TEMP_WATCH, URGE_RECORDS,
+  countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
+} from "@/typings/model";
+
+const themeStore = useThemeStore();
+
+interface ApplyForm {
+  name: string;
+  dept: string;
+  mainChanges: string[];
+  related: string;
+  purposes: string[];
+  effect: string;
+  type: string;
+  level: string;
+  duration: string;
+  urgent: boolean;
+  date: string;
+  restoreDate: string;
+}
+const form = ref<ApplyForm>({
+  name: "", dept: "", mainChanges: [""], related: "", purposes: [], effect: "",
+  type: "", level: "", duration: "", urgent: false, date: "", restoreDate: "",
+});
+const TABS = [
+  { id: "pre", name: "变更预识别", icon: 'lucide:sparkles' },
+  { id: "form", name: "变更申请表", icon: 'akar-icons:file' },
+  { id: "risk", name: "风险分析记录表", icon: 'proicons:alert-triangle' },
+  { id: "train", name: "变更培训内容", icon: 'lucide:graduation-cap' },
+  { id: "pssr", name: "PSSR 检查内容", icon: 'tabler:clipboard-check' },
+  { id: "accept", name: "验收评价", icon: 'material-symbols:check-circle-outline' },
+  { id: "close", name: "变更关闭确认表", icon: 'quill:folder-open' },
+];
+const tab = ref<"pre" | "form" | "risk" | "train" | "pssr" | "accept" | "close">("pre");
+const formGen = ref<"idle" | "generating" | "done">("idle");
+const confirmed = ref<Record<string, boolean>>({});
+const blockedTabs = ref<string[]>([]);
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+  <!-- 发起变更 -->
+  <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+    <div class="sticky top-0 z-20 rounded-t-xl border-b bg-[#e8f2fd]">
+      <div 
+        class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-2"
+        :style="{borderColor: themeStore.themeColor}"
+      >
+        <span class="whitespace-nowrap text-sm font-medium text-slate-600">变更名称 <span class="text-red-500">*</span></span>
+        <NInput v-model:value="form.name" maxlength="28" show-count placeholder="AI 自动总结（28 字以内），可手动修改" class="!w-420px" />
+        <span class="ml-auto whitespace-nowrap text-sm text-slate-500">变更编号</span>
+        <NInput value="MOC-2026-R01-0041" disabled class="!w-44" />
+      </div>
+      <div class="flex items-center gap-1 overflow-x-auto px-3 pt-2">
+        <div v-for="t in TABS" :key="t.id" @click="tab = t.id"
+          class="flex items-center gap-1.5 whitespace-nowrap px-3 py-2 text-sm transition cursor-pointer border hover:bg-white/60 rounded-t-lg"
+          :class="tab === t.id ? 'border-b-transparent border-[#ACC6E5] bg-white text-[var(--active-color)]':'border-transparent text-slate-500'"
+          :style="{'--active-color': themeStore.themeColor}"
+        >
+          <Icon :icon="t.icon" class="size-14px" />
+          {{ t.name }}
+          <span v-if="t.id === 'form' && formGen === 'generating'"
+            class="flex items-center gap-1 rounded-full border border-violet-300 bg-violet-50 px-1.5 py-0.5 text-[10px] text-violet-600">
+            <Icon icon="ri:loader-4-fill" class="size-14px animate-spin" />
+            AI 生成中
+          </span>
+          <Icon v-if="confirmed[t.id]" icon="material-symbols:check-circle-outline" class="size-14px text-emerald-500" />
+          <span v-if="!confirmed[t.id] && blockedTabs.includes(t.id)" class="h-1.5 w-1.5 rounded-full bg-red-500" title="本页尚未确认完毕" />
+        </div>
+      </div>
+    </div>
+  </NCard>
+</NSpace>
+</template>
+
+<style scoped></style>