待投用变更静态页面完成

src/locales/langs/zh-cn.ts

@@ -246,7 +246,8 @@ const local: App.I18n.Schema = {
     systemmanage_role: '角色管理',
     systemmanage_template: '审批模板管理',
     home_pssr: 'PSSR监督',
-    riskstatistics: '安全与风险统计'
+    riskstatistics: '安全与风险统计',
+    home_pendingchange: '待投用变更'
   },
   form: {
     required: '不能为空',

src/router/elegant/imports.ts

@@ -30,6 +30,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   home_mydraft: () => import("@/views/home/myDraft/index.vue"),
   home_mytask: () => import("@/views/home/myTask/index.vue"),
   home_pending: () => import("@/views/home/pending/index.vue"),
+  home_pendingchange: () => import("@/views/home/pendingChange/index.vue"),
   home_process: () => import("@/views/home/process/index.vue"),
   home_processdetail: () => import("@/views/home/processDetail/index.vue"),
   home_pssr: () => import("@/views/home/pssr/index.vue"),

src/router/elegant/routes.ts

@@ -205,6 +205,17 @@ export const generatedRoutes: GeneratedRoute[] = [
           order: 4
         }
       },
+      {
+        name: 'home_pendingchange',
+        path: '/home/pendingchange',
+        component: 'view.home_pendingchange',
+        meta: {
+          title: 'home_pendingchange',
+          i18nKey: 'route.home_pendingchange',
+          icon: '',
+          order: 5
+        }
+      },
       {
         name: 'home_process',
         path: '/home/process',

src/router/elegant/transform.ts

@@ -181,6 +181,7 @@ const routeMap: RouteMap = {
   "home_mydraft": "/home/mydraft",
   "home_mytask": "/home/mytask",
   "home_pending": "/home/pending",
+  "home_pendingchange": "/home/pendingchange",
   "home_process": "/home/process",
   "home_processdetail": "/home/processdetail",
   "home_pssr": "/home/pssr",

src/typings/elegant-router.d.ts

@@ -35,6 +35,7 @@ declare module "@elegant-router/types" {
     "home_mydraft": "/home/mydraft";
     "home_mytask": "/home/mytask";
     "home_pending": "/home/pending";
+    "home_pendingchange": "/home/pendingchange";
     "home_process": "/home/process";
     "home_processdetail": "/home/processdetail";
     "home_pssr": "/home/pssr";
@@ -116,6 +117,7 @@ declare module "@elegant-router/types" {
     | "home_mydraft"
     | "home_mytask"
     | "home_pending"
+    | "home_pendingchange"
     | "home_process"
     | "home_processdetail"
     | "home_pssr"

src/views/home/pendingChange/index.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+const themeStore = useThemeStore();
+const { routerPushByKey } = useRouterPush();
+
+const loading = ref<boolean>(false);
+const btnLoading = ref<boolean>(false);
+const useTime = ref<any>(null);
+const useTimeModal = ref<boolean>(false);
+const currentRow = ref<any>(null);
+const list = ref<any[]>([]);
+const lists = [
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        approveTime: "2026-07-31", applicant: "吴强", level: "一般", type: "工艺",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "永久",
+        useTime: "", planUse: "2026-08-01", pssr: "PSSR 检查确认表-签字版.pdf",
+        hasChange: true,
+    },
+    {
+        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
+        approveTime: "2026-07-31", applicant: "吴强", level: "重要", type: "工艺",
+        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "临时",
+        useTime: "2026-07-16 06:30", planUse: "2026-08-01", pssr: "",
+        hasChange: true,
+    },
+];
+
+const timePickerProps = {
+  format: 'HH:mm',      // 时间选择器面板上显示的格式
+  seconds: false        // 隐藏秒选择器[reference:3][reference:4]
+}
+
+// 禁用今天之前的日期（今天可选）
+const disabledDate = (ts: number) => {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0) // 今天的 00:00:00
+  return ts < today.getTime() // 时间戳小于今天 0 点则禁用
+}
+// 获取列表数据
+const getList = () => {
+    loading.value = true;
+    setTimeout(() => {
+        list.value = lists;
+        loading.value = false;
+    }, 1000);
+}
+
+// 查看
+const viewFile = (record: any) => {
+    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
+};
+// 下载
+const downloadFile = (record: any) => {
+    window.$message?.success(`下载「${record.pssr}」`)
+};
+// 打开变更单
+const openChange = (record: any) => {
+    routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
+};
+// 填写投用日期
+const fillUseTime = (record: any) => {
+    useTime.value = null;
+    currentRow.value = record;
+    useTimeModal.value = true;
+};
+// 保存投用日期
+const saveUseTime = () => {
+    if (!useTime.value) {
+        return window.$message?.warning("请选择投用时间");
+    }
+    btnLoading.value = true;
+    setTimeout(() => {
+        btnLoading.value = false;
+        useTimeModal.value = false;
+    }, 1000);
+}
+
+
+
+onMounted(() => {
+    getList();
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- PSSR监督 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div class="flex flex-wrap items-center gap-2 mb-3">
+                <span class="text-sm font-semibold text-slate-700">待投用变更（本车间 · 一车间）</span>
+                <NTag size="small" type="primary">{{ list.length }} 起</NTag>
+                <span class="ml-auto text-[11px] text-slate-400">按审批通过时间排序 · 投用时间由发起人在资料关闭页填报 · 支持属地负责人在此代录投用日期</span>
+            </div>
+            <div class="scroll">
+                <div 
+                    class="space-y-3 h-100%"
+                    :style="{ 
+                        '--theme-color': themeStore.themeColor,
+                        '--warning-color': themeStore.otherColor.warning,
+                    }"
+                >
+                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
+                        <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
+                        <NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</NTag>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex flex-wrap items-center gap-1.5">
+                                <p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
+                                <NTag v-if="s.level==='一般'" size="small">{{s.level}}</NTag>
+                                <NTag v-if="s.level==='重要'" size="small" type="error">{{s.level}}</NTag>
+                                <NTag size="small" type="primary">{{s.type}}</NTag>
+                                <NTag v-if="s.duration==='永久'" size="small">{{s.duration}}</NTag>
+                                <NTag v-if="s.duration==='临时'" size="small" type="warning">{{s.duration}}</NTag>
+                            </div>
+                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.id }} · {{ s.applicant }}</p>
+                            <p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approveTime ?? '—' }}</span></p>
+                            <p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.useTime ? s.useTime : `待投用（计划 ${s.planUse}）` }}</span></p>
+                            <p class="mt-0.5 text-[11px] text-slate-400">{{ s.statusDetail }}</p>
+                        </div>
+                        <div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
+                            <Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
+                            <span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
+                            <template v-if="s.pssr">
+                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
+                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
+                            </template>
+                            <template v-else>
+                                <span class="text-[11px] text-[var(--warning-color)]">待传</span>
+                            </template>
+                        </div>
+                        <NButton v-if="!s.useTime" size="small" type="primary" class="text-xs" @click="fillUseTime(s)">填写投用日期</NButton>
+                        <NButton v-if="s.hasChange" size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
+                    </div>
+                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
+                        <NEmpty description="暂无数据"></NEmpty>
+                    </div>
+                </div>
+            </div>
+        </NCard>
+        <!-- 填写投用日期弹窗 -->
+        <NModal
+              v-model:show="useTimeModal"
+              preset="card"
+              title="填写投用日期"
+              :auto-focus="false"
+              :style="{ width: '450px', height: 'auto' }"
+              :segmented="{ content: true, footer: true }"
+          >
+              <template #default>
+                <div class="space-y-3 text-sm">
+                    <p class="text-xs text-slate-500">{{ currentRow?.id }} · {{ currentRow?.title }}</p>
+                    <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-relaxed text-amber-700">
+                        提示：投用前应完成变更培训与 PSSR 确认（资料已上传）。投用后变更进入待验收阶段，临时变更自投用日起计算时限。
+                    </div>
+                    <NDatePicker 
+                        v-model:value="useTime" 
+                        type="datetime" 
+                        :is-date-disabled="disabledDate" 
+                        format="yyyy-MM-dd HH:mm" 
+                        placeholder="请选择投用时间"
+                        :time-picker-props="timePickerProps"
+                    />
+                </div>
+              </template>
+              <template #footer>
+                  <div class="flex justify-end gap-[10px]">
+                      <NButton size="small" @click="useTimeModal = false">取消</NButton>
+                      <NButton size="small" type="primary" :loading="btnLoading" @click="saveUseTime">确认投用</NButton>
+                  </div>
+              </template>
+          </NModal>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 180px);
+  overflow-y: auto;
+}
+</style>

src/views/home/pssr/index.vue

@@ -195,7 +195,7 @@ onMounted(() => {
                         '--warning-color': themeStore.otherColor.warning,
                     }"
                 >
-                    <div v-for="(s, i) in list" :key="`${s.cid ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
+                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
                         <NTag v-if="s.status==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
                         <NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
                         <NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
@@ -233,7 +233,7 @@ onMounted(() => {
                         '--warning-color': themeStore.otherColor.warning,
                     }"
                 >
-                    <div v-for="(s, i) in list" :key="`${s.cid ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
+                    <div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">  
                         <NTag v-if="s.status==='已关闭'" type="success" size="small">{{ s.status }}</NTag>
                         <div class="min-w-0 flex-1">
                             <p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>