pssr监督页面完成

src/views/my/pssr/index.vue

@@ -4,144 +4,112 @@ import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
+import { formatTimestamp, getTimeRangeStamp, downloadFileFun } from '@/utils/common';
+import { pssrListApi } from '@/service/api/pssr';
 
 const themeStore = useThemeStore();
 const { routerPushByKey } = useRouterPush();
 
 const loading = ref<boolean>(false);
-const keyword = ref<string>("");
-const openCount = ref<number>(4);
-const closedCount = ref<number>(2);
-const currentTab = ref<string>("open");
-const range = ref<string>("全部时间");
+// 附件在线预览弹窗
+const previewModal = ref<boolean>(false);
+// 附件在线预览文件
+const previewFile = ref<any>(null);
+// 未关闭数量
+const openCount = ref<number>(0);
+// 已关闭数量
+const closedCount = ref<number>(0);
+const formInfo = ref<{from: number | null,to: number | null,kw: string,is_close: number }>({
+    from: null,
+    to: null,
+    kw: "",
+    is_close: 0,
+});
+const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
+  page: 1,
+  pageSize: 20,
+  itemCount: 0,
+})
+const range = ref<string>('');
+const timeRange = ref<{label: string,value: string}[]>([
+    {label: '全部时间', value: ''},
+    {label: '最近7天', value: 'week'},
+    {label: '最近30天', value: 'month'},
+    {label: '最近90天', value: 'quarter'},
+]);
 const list = ref<any[]>([]);
-const openList = [
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
-        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
-        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
-        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
-        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
-        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
-    },
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
-        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
-        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
-        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
-        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
-        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
-    },
-    {
-        id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
-        dept: "一车间", planUse: "2026-07-31", applicant: "吴强",
-        title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R01-0039",statusDetail: "待关闭确认（资料更新核查中）",
-        dept: "一车间", planUse: "2026-07-16（已投用）", applicant: "张工艺",
-        title: 'V-102 安全阀起跳压力临时调整（紧急补办）', status: '待关闭',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R03-0040",statusDetail: "实施准备中 · 培训 / PSSR 资料待上传",
-        dept: "供应部", planUse: "2026-08-01", applicant: "刘芳",
-        title: '原料环己烷供应商变更（新增 B 供应商）', status: '实施中',
-        pssr: "",hasChange: true,
-    },
-    {
-        id: "MOC-2026-R02-0031",statusDetail: "变更验收（72h 运行验证）",
-        dept: "二车间", planUse: "2026-07-15", applicant: "周涛",
-        title: '冷冻盐水泵 P-103 叶轮材质变更', status: '待验收',
-        pssr: "PSSR 检查确认表-签字版.pdf",hasChange: false,
-    },
-];
-const closedList = [
-    {
-        id: "MOC-2026-R03-0027",statusDetail: "关闭确认完成，已归档",
-        dept: "质量部", planUse: "2026-06-25", applicant: "陈静",
-        title: '化验室通风橱整体更换', status: '已关闭',
-        pssr: "PSSR 检查确认表-归档版.pdf"
-    },
-    {
-        id: "MOC-2026-R01-0024",statusDetail: "关闭确认完成，已归档",
-        dept: "一车间", planUse: "2026-06-20", applicant: "孙丽",
-        title: '氮气管网压力分级调整', status: '已关闭',
-        pssr: "PSSR 检查确认表-归档版.pdf"
-    },
-];
 
+// 搜索
+const searchHandle = () => {
+    pagination.value.page = 1;
+    getList();
+}
 // 切换tab
-const tabChange = (k: string) => {
+const tabChange = (k: number) => {
     list.value = []
-    currentTab.value = k;
-    loading.value = true;
-    if(k === 'open'){
-        setTimeout(() => {
-            list.value = openList;
-            loading.value = false;
-        }, 1000);
-    }
-    if(k === 'closed'){
-        setTimeout(() => {
-            list.value = closedList;
-            loading.value = false;
-        }, 1000);
+    formInfo.value.is_close = k;
+    searchHandle();
+}
+// 切换时间范围
+const timeRangeChange = (timeRange: string) => {
+    range.value = timeRange;
+    if(timeRange === ''){
+        formInfo.value.from = null;
+        formInfo.value.to = null;
+    }else{
+        formInfo.value.from = getTimeRangeStamp(timeRange)?.from || null;
+        formInfo.value.to = getTimeRangeStamp(timeRange)?.to || null;
     }
+    searchHandle();
 }
 
 // 查看
-const viewFile = (record: any) => {
-    window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
+const viewFile = (file: any) => {
+    previewFile.value = file;
+    previewModal.value = true;
 };
 // 下载
-const downloadFile = (record: any) => {
-    window.$message?.success(`下载「${record.pssr}」`)
+const downloadFile = (file: any) => {
+    downloadFileFun(file.file_url, file.file_name);
 };
 // 下载模板
 const downloadTemplate = (record: any) => {
-    window.$message?.success(`下载 PSSR 确认表空白模板（打印后线下签署）`)
+    window.$message?.info('还差接口')
 };
 // 打开变更单
-const openChange = (record: any) => {
-    routerPushByKey('details_index', { query: { params: JSON.stringify(record) } })
+const openChange = (r: any) => {
+    routerPushByKey("details_index",{ query: { id: r?.id?.toString(),status:r?.status?.toString() || '',key:'my_pssr' } });
 };
 
+// 分页改变
+const pageChange = (page: number) => {
+  pagination.value.page = page;
+  getList();
+}
+
+// 获取列表
+const getList = async () => {
+    if(loading.value) return;
+    loading.value = true;
+    const {data,error} = await pssrListApi({
+        page_num: pagination.value.page,
+        page_size: pagination.value.pageSize,
+        kw: formInfo.value.kw,
+        is_close: formInfo.value.is_close,
+        from: formatTimestamp(formInfo.value.from, 'yyyy-MM-dd'),
+        to: formatTimestamp(formInfo.value.to, 'yyyy-MM-dd'),
+    });
+    if(!error){
+        list.value = data?.list || [];
+        openCount.value = data?.unclosed_count || 0;
+        closedCount.value = data?.closed_count || 0;
+        pagination.value.itemCount = data?.total || 0;
+    }
+    loading.value = false;
+}
+
 onMounted(() => {
-    tabChange('open');
+    getList();
 })
 </script>
 
@@ -154,31 +122,31 @@ onMounted(() => {
                 :style="{ '--theme-color': themeStore.themeColor}"
             >
                 <div class="flex overflow-hidden rounded-full border">
-                    <div @click="tabChange('open')" class="px-3.5 py-1.5 text-xs cursor-pointer select-none"
-                    :class="currentTab === 'open' ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
+                    <div @click="tabChange(0)" class="px-3.5 py-1.5 text-xs cursor-pointer select-none"
+                    :class="formInfo.is_close === 0 ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
                     未关闭的变更 <b>{{ openCount }}</b>
                     </div>
-                    <div @click="tabChange('closed')" class="border-l px-3.5 py-1.5 text-xs cursor-pointer select-none"
-                    :class="currentTab === 'closed' ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
+                    <div @click="tabChange(1)" class="border-l px-3.5 py-1.5 text-xs cursor-pointer select-none"
+                    :class="formInfo.is_close === 1 ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
                     已关闭的变更 <b>{{ closedCount }}</b>
                     </div>
                 </div>
-                <NInput v-model:value="keyword" size="small" class="text-xs !w-160px" placeholder="搜索变更名称 / 编号">
+                <NInput v-model:value="formInfo.kw" size="small" class="text-xs !w-160px" clearable placeholder="搜索变更名称 / 编号" @clear="formInfo.kw = ''; searchHandle()">
                     <template #suffix>
-                        <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
+                        <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="searchHandle" />
                     </template>
                 </NInput>
                 <div class="flex items-center gap-1.5">
                     <NButton 
                         size="tiny" 
                         round 
-                        v-for="t in ['全部时间', '近 7 天', '近 30 天', '近 90 天']" 
-                        :key="t" 
+                        v-for="t in timeRange" 
+                        :key="t.value" 
                         class="text-[11px]"
-                        :type="range === t ? 'primary' : 'default'"
-                        @click="range = t"
+                        :type="range === t.value ? 'primary' : 'default'"
+                        @click="timeRangeChange(t.value)"
                     >
-                        {{ t }}
+                        {{ t.label }}
                     </NButton>
                 </div>
                 <span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
@@ -186,9 +154,10 @@ onMounted(() => {
             <div class="text-[11px] leading-4 text-slate-400 pb-2">
                 培训 / PSSR 为线下组织并签字，拍照或扫描上传即视为完成确认并随单归档；系统不做内容识别，本页为 PSSR 检查表的查看 / 下载入口。
             </div>
-            <!-- 未关闭的变更 -->
-            <div v-if="currentTab === 'open'" class="scroll">
-                <div 
+            <!-- 列表 -->
+            <div class="scroll">
+                <div
+                    v-if="list.length "
                     class="space-y-3 h-100%"
                     :style="{ 
                         '--theme-color': themeStore.themeColor,
@@ -196,70 +165,83 @@ onMounted(() => {
                     }"
                 >
                     <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>
+                        <!-- 状态标签 -->
+                        <NTag v-if="s.status==='APPROVING'" size="small" type="warning">审批中</NTag>
+                        <NTag v-if="s.status==='APPROVED'" size="small" type="success">已通过</NTag>
+                        <NTag v-if="s.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
+                        <NTag v-if="s.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
+                        <NTag v-if="s.status==='CLOSED'" size="small" type="success">已关闭</NTag>
+                        <NTag v-if="s.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
+                        <NTag v-if="s.status==='REJECTED'" size="small" type="error">已驳回</NTag>
                         <div class="min-w-0 flex-1">
                             <p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
-                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.id }} · {{ s.dept }} · {{ s.applicant }} · {{ s.statusDetail }} · 计划投用 {{ s.planUse }}</span>
+                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.change_no }} · {{ s.org_name }} · {{ s.applicant_name }} · 计划投用 {{ s.plan_use_date }}</span>
                         </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">
-                                <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr }}</span>
-                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
-                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
+                            <template v-if="s.pssr_attachment">
+                                <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr_attachment?.file_name }}</span>
+                                <NButton ghost size="tiny" class="text-11px" @click="viewFile(s.pssr_attachment)">查看</NButton>
+                                <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s.pssr_attachment)">下载</NButton>
                             </template>
                             <template v-else>
                                 <span class="text-[11px] text-[var(--warning-color)]">待传</span>
                                 <NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(s)">下载模板</NButton>
                             </template>
                         </div>
-                        <NButton v-if="s.hasChange" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
+                        <NButton v-if="s.status==='APPROVING' || s.status==='APPROVED' || s.status==='ACCEPTED'" size="small" type="primary" 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 v-else class="text-xs text-slate-400 text-center border rounded-md py-5">暂无数据</div>
             </div>
-            <!-- 已关闭的变更 -->
-            <div v-if="currentTab === 'closed'" class="scroll">
-                <div 
-                    class="space-y-3 h-100%"
-                    :style="{ 
-                        '--theme-color': themeStore.themeColor,
-                        '--warning-color': themeStore.otherColor.warning,
-                    }"
+            <div class="flex justify-end mt-3">
+                <NPagination 
+                v-model:page="pagination.page" 
+                :page-size="pagination.pageSize" 
+                :item-count="pagination.itemCount"
+                :on-update:page="pageChange"
                 >
-                    <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>
-                            <span class="mt-0.5 block text-[11px] text-slate-400">{{ s.id }} · {{ s.dept }} · {{ s.applicant }} · {{ s.statusDetail }} · 计划投用 {{ s.planUse }}</span>
-                        </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>
-                            <span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr }}</span>
-                            <NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
-                            <NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
-                        </div>
-                    </div>
-                    <div v-if="list.length === 0" class="h-100% flex items-center justify-center">
-                        <NEmpty description="暂无数据"></NEmpty>
-                    </div>
-                </div>
+                <template #prefix="{ itemCount }">
+                    共 {{ itemCount }} 条
+                </template>
+                </NPagination>
             </div>
         </NCard>
+        <!-- 附件在线预览弹窗 -->
+        <NModal
+            v-model:show="previewModal"
+            preset="card"
+            :auto-focus="false"
+            :style="{ width: '80%', height: 'auto' }"
+            :segmented="{ content: true, footer: true }"
+        >
+            <template #header>
+                <div class="flex items-center gap-2 text-base font-semibold text-slate-800">
+                <Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
+                </div>
+            </template>
+            <template #default>
+                <div class="space-y-3">
+                    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
+                        <span>上传人：{{ previewFile?.uploader_name }}</span>
+                        <span>上传时间：{{ previewFile?.created_at?.slice(0, 16) }}</span>
+                        <span v-if="previewFile?.version">{{ `版本：${previewFile?.version}（受控）` }}</span>
+                    </div>
+                    <previewComponent v-if="previewFile" :previewFile="previewFile" />
+                </div>
+            </template>
+        </NModal>
     </NSpin>
 </NSpace>
 </template>
 
 <style scoped lang="scss">
 .scroll {
-  height: calc(100vh - 212px);
+  height: calc(100vh - 252px);
   overflow-y: auto;
 }
 </style>