bestlee/moc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

下载文件名称统一修改

Browse Source
This commit is contained in:
bestlee
2026-10-13 11:45:45 +08:00
parent 7797b4479d
commit b6ee63299e
5 changed files with 616 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/docs/archives/index.vue
+1 -1
View File
@@ -411,7 +411,7 @@ const preview = (d:any) => {
}
// 下载资料
const download = (file:any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
}
// 上传资料
const uploadFiles = async (e:any) => {
src/views/docs/query/index.vue
+140 -137
View File
@@ -236,7 +236,7 @@ const handleSelectKeys = (keys: string[],option:any) => {
// 下载
const downloadFile = (file:any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
}
// 预览
@@ -354,164 +354,167 @@ onMounted(async () => {
</script>
<template>
<NSpace vertical :size="16">
<NSpin :show="loading" size="small">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
<NGi span="24 s:24 m:24">
<div class="h-100% flex items-center gap-2">
<Icon icon="mage:book" class="size-20px" :style="{ color: themeStore.themeColor }" />
<p class="text-base font-semibold">变更归档（一次变更一个归档包 · 关闭即自动归档 · 只读锁定）</p>
<NSpace vertical :size="16">
<NSpin :show="loading" size="small">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
<NGi span="24 s:24 m:24">
<div class="h-100% flex items-center gap-2">
<Icon icon="mage:book" class="size-20px" :style="{ color: themeStore.themeColor }" />
<p class="text-base font-semibold">变更归档（一次变更一个归档包 · 关闭即自动归档 · 只读锁定）</p>
</div>
</NGi>
</NGrid>
<div class="flex items-center gap-2 mt-3">
<NInput v-model:value="formInfo.change_no" type="text" class="w-full text-xs" clearable placeholder="按变更单号精确查找，或按名称关键词检索（如 MOC-2026-R01-0039）" @clear="formInfo.change_no = ''; getList()">
<template #suffix>
<Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="getList" />
</template>
</NInput>
<NButton class="text-sm" @click="reset">
<Icon icon="system-uicons:reset" class="size-14px" />重置
</NButton>
</div>
<!-- 筛选：时间 / 组织 / 专业 -->
<div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 mt-3">
<NTreeSelect
class="!w-200px"
:value="formInfo.org_id"
:options="orgTree"
size="small"
default-expand-all
label-field="label"
key-field="id"
:render-switcher-icon="renderSwitcherIcon"
placeholder="请选择组织层级"
@update:value="orgChange"
/>
<div class="flex flex-wrap items-center gap-1">
<span class="text-[11px] text-slate-400">时间</span>
<NButton v-for="time in timeOptions" :key="time.value" size="tiny" round class="text-xs" :type="formInfo.time === time.value ? 'primary' : 'default'" @click="timeChange(time.value)">{{ time.label }}</NButton>
</div>
<div class="flex flex-wrap items-center gap-1">
<span class="text-[11px] text-slate-400">类型</span>
<NButton v-for="type in typeList" :key="type.value" size="tiny" round class="text-xs" :type="formInfo.type === type.value ? 'primary' : 'default'" @click="typeChange(type.value)">{{ type.label }}</NButton>
</div>
</NGi>
</NGrid>
<div class="flex items-center gap-2 mt-3">
<NInput v-model:value="formInfo.change_no" type="text" class="w-full text-xs" clearable placeholder="按变更单号精确查找，或按名称关键词检索（如 MOC-2026-R01-0039）" @clear="formInfo.change_no = ''; getList()">
<template #suffix>
<Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="getList" />
</template>
</NInput>
<NButton class="text-sm" @click="reset">
<Icon icon="system-uicons:reset" class="size-14px" />重置
</NButton>
</div>
<!-- 筛选：时间 / 组织 / 专业 -->
<div class="flex flex-wrap items-center gap-x-4 gap-y-1.5 mt-3">
<NTreeSelect
class="!w-200px"
:value="formInfo.org_id"
:options="orgTree"
size="small"
default-expand-all
label-field="label"
key-field="id"
:render-switcher-icon="renderSwitcherIcon"
placeholder="请选择组织层级"
@update:value="orgChange"
/>
<div class="flex flex-wrap items-center gap-1">
<span class="text-[11px] text-slate-400">时间</span>
<NButton v-for="time in timeOptions" :key="time.value" size="tiny" round class="text-xs" :type="formInfo.time === time.value ? 'primary' : 'default'" @click="timeChange(time.value)">{{ time.label }}</NButton>
</div>
<div class="flex flex-wrap items-center gap-1">
<span class="text-[11px] text-slate-400">类型</span>
<NButton v-for="type in typeList" :key="type.value" size="tiny" round class="text-xs" :type="formInfo.type === type.value ? 'primary' : 'default'" @click="typeChange(type.value)">{{ type.label }}</NButton>
</div>
</div>
<div class="flex gap-3 mt-3">
<!-- 左侧 -->
<div class="w-300px border rounded-md p-2">
<div class="scroll-left">
<NTree
class="h-100% flex flex-col"
block-line
:data="treeList"
label-field="label"
key-field="key"
:expanded-keys="expandedKeys"
:selected-keys="selectedKeys"
:render-switcher-icon="renderSwitcherIcon"
selectable
:cancelable="false"
:on-update:expanded-keys="handleExpandKeys"
:on-update:selected-keys="handleSelectKeys"
>
<template #empty>
<div class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据" class="text-xs"></NEmpty>
<div class="flex gap-3 mt-3">
<!-- 左侧 -->
<div class="w-300px border rounded-md p-2">
<div class="scroll-left">
<NTree
class="h-100% flex flex-col"
block-line
:data="treeList"
label-field="label"
key-field="key"
:expanded-keys="expandedKeys"
:selected-keys="selectedKeys"
:render-switcher-icon="renderSwitcherIcon"
selectable
:cancelable="false"
:on-update:expanded-keys="handleExpandKeys"
:on-update:selected-keys="handleSelectKeys"
>
<template #empty>
<div class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据" class="text-xs"></NEmpty>
</div>
</template>
</NTree>
</div>
</div>
<!-- 右：归档包详情 -->
<div class="min-w-0 flex-1">
<NSpin :show="rightLoading" size="small">
<template v-if="rightDetails">
<div class="rounded-md border col-span-2">
<div class="border-b p-3">
<div class="flex flex-wrap items-center gap-2">
<span class="text-sm font-semibold">{{ rightDetails.change_no }}</span>
</div>
<div class="mt-1 text-xs text-slate-600">{{ rightDetails.title }}</div>
<div class="mt-2 flex flex-wrap justify-between gap-x-4 gap-y-1 text-[11px] text-slate-500">
<span>归档路径：{{ currentPath.join('/') }}</span>
<span>关闭时间:{{ rightDetails?.close_time?.slice(0,10) }}</span>
<span>共 {{ extractFiles(rightDetails.folders)?.total }} 个文件 · {{ extractFiles(rightDetails.folders)?.formattedSize }}</span>
</div>
</div>
<div class="divide-y scroll-right">
<div v-for="f in rightDetails?.folders" :key="f.step_no">
<button
class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-slate-50 bg-transparent"
@click="openFolders[f.step_no] = !openFolders[f.step_no]"
>
<Icon icon="formkit:right" class="size-14px text-slate-400 transition-transform" :class="openFolders[f.step_no] ? 'rotate-90' : ''" />
<Icon v-if="openFolders[f.step_no]" icon="quill:folder-open" class="size-16px" :style="{color:themeStore.themeColor}" />
<Icon v-else icon="material-symbols:folder-outline" class="size-16px text-slate-400" />
<span v-if="f.step_no===1">1-申请与审批</span>
<span v-else-if="f.step_no===2">2-风险分析</span>
<span v-else-if="f.step_no===3">3-培训与考核</span>
<span v-else-if="f.step_no===4">4-PSSR检查</span>
<span v-else-if="f.step_no===5">5-验收记录</span>
<span v-else>6-关闭资料</span>
<span class="ml-auto text-[11px] font-normal text-slate-400">{{ f.files.length }} 个文件</span>
</button>
<template v-if="openFolders[f.step_no]">
<div v-for="file in f.files" :key="file.name" class="flex items-center gap-2 py-1.5 pl-10 pr-3 text-xs hover:bg-slate-50">
<Icon icon="akar-icons:file" class="size-14px text-slate-400" />
<span class="min-w-0 flex-1 truncate">{{ file.file_name }}</span>
<span class="text-[11px] text-slate-400">{{ formatSize(file.file_size) }}</span>
<NButton text type="primary" title="预览" @click="preview(file)">
<Icon icon="lucide:eye" class="size-14px" />
</NButton>
<NButton text type="primary" title="下载" @click="downloadFile(file)">
<Icon icon="material-symbols:download" class="size-16px" />
</NButton>
</div>
</template>
</div>
</div>
</div>
</template>
</NTree>
<div v-else class="h-100% rounded-md border scroll-empty">
<div class="h-100% flex items-center justify-center">
<NEmpty description="暂无归档包详情数据" class="text-xs"></NEmpty>
</div>
</div>
</NSpin>
</div>
</div>
<!-- 右：归档包详情 -->
<div class="min-w-0 flex-1">
<NSpin :show="rightLoading" size="small">
<template v-if="rightDetails">
<div class="rounded-md border col-span-2">
<div class="border-b p-3">
<div class="flex flex-wrap items-center gap-2">
<span class="text-sm font-semibold">{{ rightDetails.change_no }}</span>
</div>
<div class="mt-1 text-xs text-slate-600">{{ rightDetails.title }}</div>
<div class="mt-2 flex flex-wrap justify-between gap-x-4 gap-y-1 text-[11px] text-slate-500">
<span>归档路径：{{ currentPath.join('/') }}</span>
<span>关闭时间:{{ rightDetails?.close_time?.slice(0,10) }}</span>
<span>共 {{ extractFiles(rightDetails.folders)?.total }} 个文件 · {{ extractFiles(rightDetails.folders)?.formattedSize }}</span>
</div>
</div>
<div class="divide-y scroll-right">
<div v-for="f in rightDetails?.folders" :key="f.step_no">
<button @click="openFolders[f.step_no] = !openFolders[f.step_no]"
class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
<Icon icon="formkit:right" class="size-14px text-slate-400 transition-transform" :class="openFolders[f.step_no] ? 'rotate-90' : ''" />
<Icon icon="quill:folder-open" v-if="openFolders[f.step_no]" class="size-16px" :style="{color:themeStore.themeColor}" />
<Icon v-else icon="material-symbols:folder-outline" class="size-16px text-slate-400" />
<span v-if="f.step_no===1">1-申请与审批</span>
<span v-else-if="f.step_no===2">2-风险分析</span>
<span v-else-if="f.step_no===3">3-培训与考核</span>
<span v-else-if="f.step_no===4">4-PSSR检查</span>
<span v-else-if="f.step_no===5">5-验收记录</span>
<span v-else>6-关闭资料</span>
<span class="ml-auto text-[11px] font-normal text-slate-400">{{ f.files.length }} 个文件</span>
</button>
<template v-if="openFolders[f.step_no]">
<div v-for="file in f.files" :key="file.name" class="flex items-center gap-2 py-1.5 pl-10 pr-3 text-xs hover:bg-slate-50">
<Icon icon="akar-icons:file" class="size-14px text-slate-400" />
<span class="min-w-0 flex-1 truncate">{{ file.file_name }}</span>
<span class="text-[11px] text-slate-400">{{ formatSize(file.file_size) }}</span>
<NButton text type="primary" title="预览" @click="preview(file)">
<Icon icon="lucide:eye" class="size-14px" />
</NButton>
<NButton text type="primary" title="下载" @click="downloadFile(file)">
<Icon icon="material-symbols:download" class="size-16px" />
</NButton>
</div>
</template>
</div>
</div>
</div>
</template>
<div v-else class="h-100% rounded-md border scroll-empty">
<div class="h-100% flex items-center justify-center">
<NEmpty description="暂无归档包详情数据" class="text-xs"></NEmpty>
</div>
</div>
</NSpin>
</div>
</div>
</NCard>
<!-- 附件在线预览弹窗 -->
<NModal
</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">
<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>
</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 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" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin>
</NSpace>
</NModal>
</NSpin>
</NSpace>
</template>
<style scoped>
</style>
<style scoped lang="scss">
.scroll-left {
height: calc(100vh - 303px);
src/views/home/modules/template6.vue
+244 -239
View File
@@ -64,7 +64,7 @@ const viewFile = (file: any) => {
};
// 下载
const downloadFile = (file: any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
};
// 下载模板
const downloadTemplate = (record: any) => {
@@ -82,7 +82,7 @@ const getData = async () => {
loading.value = true;
const {data,error} = await homeSafeApi();
if(!error){
homeData.value = data;
homeData.value = data;
}
loading.value = false;
}
@@ -129,311 +129,316 @@ onUnmounted(() => {
</script>
<template>
<NSpin :show="loading" size="small">
<div class="space-y-3.5">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGi span="24 s:24 m:10">
<NSpin :show="loading" size="small">
<div class="space-y-3.5">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGi span="24 s:24 m:10">
<div class="flex-y-center">
<p
<p
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
>
>
MOC
</p>
<p class="pl-12px text-14px font-semibold">我的工作台</p>
</p>
<p class="pl-12px text-14px font-semibold">我的工作台</p>
</div>
</NGi>
<NGi span="24 s:24 m:14" class="flex items-center justify-end gap-12px">
<p class="text-#999 text-xs">{{clock}}</p>
</NGi>
<NGi span="24 s:24 m:14" class="flex items-center justify-end gap-12px">
<p class="text-#999 text-xs">{{ clock }}</p>
<NButton ghost size="small" @click="jumpTo('my_pssr')">
投用与验收总览
投用与验收总览
</NButton>
<NButton ghost size="small" @click="jumpTo('my_highrisk')">
全厂风险看板
全厂风险看板
</NButton>
<NButton type="primary" size="small" @click="jumpTo('my_mytask')">
<Icon icon="lucide:clipboard-check" class="size-14px" />
审批待办
<Icon icon="lucide:clipboard-check" class="size-14px" />
审批待办
</NButton>
</NGi>
</NGrid>
</NCard>
<!-- 卡片数据 -->
<NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
</NGi>
</NGrid>
</NCard>
<!-- 卡片数据 -->
<NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
>
<div class="flex justify-between">
<CountTo
<CountTo
:start-value="0"
:end-value="homeData?.todo_sign?.total || 0"
class="text-26px font-600"
:style="{ color: homeData?.todo_sign?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
/>
/>
</div>
<div>
<p class="text-12px font-600">待我审批</p>
<p v-if="homeData?.todo_sign?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count}} 项 · 请优先处理</p>
<p v-else class="text-12px text-slate-400">安全审查节点 · 与我的任务同源</p>
<p class="text-12px font-600">待我审批</p>
<p v-if="homeData?.todo_sign?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{ homeData?.todo_sign?.overdue_count }} 项 · 请优先处理</p>
<p v-else class="text-12px text-slate-400">安全审查节点 · 与我的任务同源</p>
</div>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_pssr')"
>
>
<div class="flex justify-between">
<CountTo
<CountTo
:start-value="0"
:end-value="homeData?.pssr_supervise?.total || 0"
class="text-26px font-600"
:style="{ color: themeStore.themeColor }"
/>
/>
</div>
<div>
<p class="text-12px font-600">PSSR监督</p>
<p class="text-12px text-slate-400">待PSSR / 待验收 · 按变更状态实时统计</p>
<p class="text-12px font-600">PSSR监督</p>
<p class="text-12px text-slate-400">待PSSR / 待验收 · 按变更状态实时统计</p>
</div>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_highrisk')"
>
>
<div class="flex justify-between">
<CountTo
<CountTo
:start-value="0"
:end-value="homeData?.high_risk?.total || 0"
class="text-26px font-600"
:style="{ color: themeStore.otherColor.error }"
/>
/>
</div>
<div>
<p class="text-12px font-600">高风险在办</p>
<p class="text-12px" :style="{ color: themeStore.otherColor.error }">全厂 · 需重点跟踪</p>
<p class="text-12px font-600">高风险在办</p>
<p class="text-12px" :style="{ color: themeStore.otherColor.error }">全厂 · 需重点跟踪</p>
</div>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('changeledger')"
>
>
<div class="flex justify-between">
<CountTo
<CountTo
:start-value="0"
:end-value="homeData?.temp_expiry_scope?.total || 0"
class="text-26px font-600"
:style="{ color: homeData?.temp_expiry_scope?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
/>
/>
</div>
<div>
<p class="text-12px font-600">临时变更到期</p>
<p v-if="homeData?.temp_expiry_scope?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">含超期 {{homeData?.temp_expiry_scope?.overdue_count}} 项 · 红色预警</p>
<p v-else class="text-12px text-slate-400">无超期</p>
<p class="text-12px font-600">临时变更到期</p>
<p v-if="homeData?.temp_expiry_scope?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">含超期 {{ homeData?.temp_expiry_scope?.overdue_count }} 项 · 红色预警</p>
<p v-else class="text-12px text-slate-400">无超期</p>
</div>
</div>
</NGi>
</NGrid>
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<!-- 左侧 -->
<NGi span="24 s:24 m:24 l:16">
<!-- 审批待办 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">审批待办</p>
<p class="text-11px text-#94a3b8 mt-2px">安全审查 · 审批时自动展示相关附件</p>
</div>
<NButton v-if="homeData?.todo_sign?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')">
我的任务
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.todo_sign?.total > 0">
<div v-for="row in homeData?.todo_sign?.items?.slice(0, 3) || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>{{matchObj(typeList,row.change_type)?.label}}</NTag>
</div>
</NGi>
</NGrid>
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag>
<span v-if="row.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days || 0}} 天</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<NTag v-if="row.step_name" size="small" type="warning">审批：{{row.step_name}}</NTag>
<NButton size="small" type="primary" class="text-xs">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<!-- 左侧 -->
<NGi span="24 s:24 m:24 l:16">
<!-- 审批待办 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">审批待办</p>
<p class="text-11px text-#94a3b8 mt-2px">安全审查 · 审批时自动展示相关附件</p>
</div>
<NButton v-if="homeData?.todo_sign?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')">
我的任务
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.todo_sign?.total > 0">
<div
v-for="row in homeData?.todo_sign?.items?.slice(0, 3) || []" :key="row.change_id" class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
@click="jumpTo('details_approval',row.change_id)"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag v-if="row.urgent===1" class="text-[11px]" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>
{{ matchObj(levelList,row.change_level)?.label }}
</NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>
{{ matchObj(typeList,row.change_type)?.label }}
</NTag>
<NTag v-if="row.duration_type===2" class="text-[11px]" type="warning" size="small">临时</NTag>
<NTag v-else class="text-[11px]" type="info" size="small">永久</NTag>
<span v-if="row.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{ row.overdue_days || 0 }} 天</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<NTag v-if="row.step_name" size="small" type="warning">审批：{{ row.step_name }}</NTag>
<NButton size="small" type="primary" class="text-xs">
去审批
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
</NButton>
</NButton>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{ row.applicant_name }}</p>
<span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</div>
</div>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{row.applicant_name}}</p>
<span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</div>
</div>
</div>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('my_mytask')">
还有{{(homeData?.my_changes_progress?.total - 3) > 0 ? (homeData?.my_changes_progress?.total - 3) : 0}}条，前往我的任务查看全部 →
</NButton>
</template>
<template v-else>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('my_mytask')">
还有{{ (homeData?.my_changes_progress?.total - 3) > 0 ? (homeData?.my_changes_progress?.total - 3) : 0 }}条，前往我的任务查看全部 →
</NButton>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</div>
</NCard>
</template>
</div>
</NCard>
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
<!-- 通过审批的变更（未关闭） -->
<NGi span="24 s:24 m:24 l:24">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="lucide:list-checks" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">通过审批的变更（未关闭）</p>
<p class="text-11px text-#94a3b8 mt-2px">PSSR 材料同行显示 · 查看 / 下载</p>
<NButton ghost size="small" class="text-xs ml-auto" @click="jumpTo('my_pssr')">
进入管理
<Icon icon="formkit:right" class="size-12px" />
</NButton>
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="lucide:list-checks" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">通过审批的变更（未关闭）</p>
<p class="text-11px text-#94a3b8 mt-2px">PSSR 材料同行显示 · 查看 / 下载</p>
<NButton ghost size="small" class="text-xs ml-auto" @click="jumpTo('my_pssr')">
进入管理
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div v-if="homeData?.pssr_supervise?.total>0" class="flex flex-col gap-3">
<div v-for="item in homeData?.pssr_supervise?.items" :key="item.id" class="rounded-md border px-3 py-2 flex items-center justify-between gap-2">
<div>
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ item.title }}</p>
<p class="mt-0.5 text-[11px] text-slate-400 flex items-center gap-2">
<span>{{ item.change_no }}</span>
<span>{{ item.org_name }}</span>
<span>{{ item.applicant_name }}</span>
</p>
</div>
<div v-if="homeData?.pssr_supervise?.total>0" class="flex flex-col gap-3">
<div v-for="item in homeData?.pssr_supervise?.items" :key="item.id" class="rounded-md border px-3 py-2 flex items-center justify-between gap-2">
<div>
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{item.title}}</p>
<p class="mt-0.5 text-[11px] text-slate-400 flex items-center gap-2">
<span>{{item.change_no}}</span>
<span>{{item.org_name}}</span>
<span>{{item.applicant_name}}</span>
</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" :style="{ color: themeStore.themeColor }" />
<span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
<template v-if="item.pssr_attachment">
<span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ item.pssr_attachment?.file_name }}</span>
<NButton ghost size="tiny" class="text-11px" @click="viewFile(item.pssr_attachment)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(item.pssr_attachment)">下载</NButton>
</template>
<template v-else>
<span class="text-[11px]" :style="{ color: themeStore.otherColor.warning }">待传</span>
<NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(item)">下载模板</NButton>
</template>
</div>
</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" :style="{ color: themeStore.themeColor }" />
<span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
<template v-if="item.pssr_attachment">
<span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ item.pssr_attachment?.file_name }}</span>
<NButton ghost size="tiny" class="text-11px" @click="viewFile(item.pssr_attachment)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(item.pssr_attachment)">下载</NButton>
</template>
<template v-else>
<span class="text-[11px]" :style="{ color: themeStore.otherColor.warning }">待传</span>
<NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(item)">下载模板</NButton>
</template>
</div>
<div v-else class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</NCard>
</div>
</div>
<div v-else class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</NCard>
</NGi>
</NGrid>
</NGi>
<!-- 右侧 -->
<NGi span="24 s:24 m:24 l:8">
<!-- 高风险变更跟踪 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">高风险变更跟踪</p>
<p class="text-11px text-#94a3b8">重要等级 · 未关闭 · 实时推导</p>
</div>
<template v-if="homeData?.high_risk?.total > 0">
<div class="space-y-2.5">
</NGrid>
</NGi>
<!-- 右侧 -->
<NGi span="24 s:24 m:24 l:8">
<!-- 高风险变更跟踪 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">高风险变更跟踪</p>
<p class="text-11px text-#94a3b8">重要等级 · 未关闭 · 实时推导</p>
</div>
<template v-if="homeData?.high_risk?.total > 0">
<div class="space-y-2.5">
<div v-for="c in homeData?.high_risk?.items || []" :key="c.record_id" class="rounded-lg border border-red-200 bg-red-50/50 px-3.5 py-2.5">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ c.change_title }}</span>
<NButton size="tiny" ghost type="error" class="text-xs" @click="jumpTo('my_highrisk')">查看分析</NButton>
</div>
<div class="mt-1 text-[11px] flex items-center gap-2" :style="{ color: themeStore.otherColor.error }">
<span>{{ c.change_no }}</span>
<!-- 状态 -->
<span v-if="c.change_status==='APPROVING'">审批中</span>
<span v-if="c.change_status==='APPROVED'">已通过</span>
<span v-if="c.change_status==='IMPLEMENTED'">待验收</span>
<span v-if="c.change_status==='ACCEPTED'">待关闭</span>
<span v-if="c.change_status==='CLOSED'">已关闭</span>
<span v-if="c.change_status==='WITHDRAWN'">已撤回</span>
<span v-if="c.change_status==='REJECTED'">已驳回</span>
<span>{{c.org_name}}</span>
</div>
</div>
<div class="mt-1 text-[11px] flex items-center gap-2" :style="{ color: themeStore.otherColor.error }">
<span>{{ c.change_no }}</span>
<!-- 状态 -->
<span v-if="c.change_status==='APPROVING'">审批中</span>
<span v-if="c.change_status==='APPROVED'">已通过</span>
<span v-if="c.change_status==='IMPLEMENTED'">待验收</span>
<span v-if="c.change_status==='ACCEPTED'">待关闭</span>
<span v-if="c.change_status==='CLOSED'">已关闭</span>
<span v-if="c.change_status==='WITHDRAWN'">已撤回</span>
<span v-if="c.change_status==='REJECTED'">已驳回</span>
<span>{{ c.org_name }}</span>
</div>
</div>
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</NCard>
</NGi>
</NGrid>
</div>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
>
<template #header>
</div>
</template>
</NCard>
</NGi>
</NGrid>
</div>
<!-- 附件在线预览弹窗 -->
<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 }}
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
</div>
</template>
<template #default>
</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 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" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin>
</template>
</NModal>
</NSpin>
</template>
<style scoped></style>
src/views/my/pendingChange/index.vue
+109 -109
View File
@@ -40,7 +40,7 @@ const viewFile = (file: any) => {
};
// 下载
const downloadFile = (file: any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
};
// 打开变更单
const openChange = (record: any) => {
@@ -99,121 +99,121 @@ onMounted(() => {
</script>
<template>
<NSpace vertical :size="16">
<NSpace vertical :size="16">
<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">待投用变更（本车间 · {{ org }}）</span>
<NTag size="small" type="primary">{{ pagination.itemCount }} 起</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==='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>
<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">待投用变更（本车间 · {{ org }}）</span>
<NTag size="small" type="primary">{{ pagination.itemCount }} 起</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==='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">
<div class="flex flex-wrap items-center gap-1.5">
<p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
<!-- 等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,s.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,s.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,s.change_level)?.color),
}"
>
{{ matchObj(levelList,s.change_level)?.label }}
</NTag>
<!-- 类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,s.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,s.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,s.change_type)?.color),
}"
>
{{ matchObj(typeList,s.change_type)?.label }}
</NTag>
<NTag v-if="s.duration_type===2" size="small" type="warning">临时</NTag>
<NTag v-if="s.duration_type===1" size="small" type="info">永久</NTag>
</div>
<p class="mt-0.5 text-[11px] text-slate-400">{{ s.change_no }} · {{ s.applicant_name }}</p>
<p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approve_time?.slice(0,16) }}</span></p>
<p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.use_time ? s.use_time?.slice(0,10) : `待投用（计划 ${s.plan_use_date?.slice(0,10)}）` }}</span></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_attachment">
<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 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 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
size="small"
:color="{
color: tagBgColor(matchObj(levelList,s.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,s.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,s.change_level)?.color),
}"
>
{{ matchObj(levelList,s.change_level)?.label }}
</NTag>
<!-- 类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,s.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,s.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,s.change_type)?.color),
}"
>
{{ matchObj(typeList,s.change_type)?.label }}
</NTag>
<NTag v-if="s.duration_type===2" size="small" type="warning">临时</NTag>
<NTag v-if="s.duration_type===1" size="small" type="info">永久</NTag>
</div>
</div>
<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"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
<p class="mt-0.5 text-[11px] text-slate-400">{{ s.change_no }} · {{ s.applicant_name }}</p>
<p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approve_time?.slice(0,16) }}</span></p>
<p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.use_time ? s.use_time?.slice(0,10) : `待投用（计划 ${s.plan_use_date?.slice(0,10)}）` }}</span></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_attachment">
<NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
</template>
</NPagination>
<template v-else>
<span class="text-[11px] text-[var(--warning-color)]">待传</span>
</template>
</div>
<NButton size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
</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>
<div v-if="list.length === 0" class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
</div>
</div>
<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"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
</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>
</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" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin>
</NSpace>
</NSpace>
</template>
<style scoped lang="scss">
src/views/my/pssr/index.vue
+122 -118
View File
@@ -71,7 +71,7 @@ const viewFile = (file: any) => {
};
// 下载
const downloadFile = (file: any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
};
// 下载模板
const downloadTemplate = (record: any) => {
@@ -115,128 +115,132 @@ onMounted(() => {
</script>
<template>
<NSpace vertical :size="16">
<NSpace vertical :size="16">
<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"
:style="{ '--theme-color': themeStore.themeColor}"
>
<div class="flex overflow-hidden rounded-full border">
<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(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="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" @click="searchHandle" />
</template>
</NInput>
<div class="flex items-center gap-1.5">
<NButton
size="tiny"
round
v-for="t in timeRange"
:key="t.value"
class="text-[11px]"
:type="range === t.value ? 'primary' : 'default'"
@click="timeRangeChange(t.value)"
>
{{ t.label }}
</NButton>
</div>
<span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
</div>
<div class="text-[11px] leading-4 text-slate-400 pb-2">
培训 / PSSR 为线下组织并签字，拍照或扫描上传即视为完成确认并随单归档；系统不做内容识别，本页为 PSSR 检查表的查看 / 下载入口。
</div>
<!-- 列表 -->
<div class="scroll">
<div
v-if="list.length"
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==='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.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_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.status==='APPROVING' || s.status==='APPROVED' || s.status==='ACCEPTED'" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
</div>
</div>
<div v-else class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
</div>
<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"
>
<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 }"
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div
class="flex flex-wrap items-center gap-2 mb-3"
:style="{ '--theme-color': themeStore.themeColor}"
>
<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>
<div class="flex overflow-hidden rounded-full border">
<div
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'"
@click="tabChange(0)"
>
未关闭的变更 <b>{{ openCount }}</b>
</div>
<div
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'"
@click="tabChange(1)"
>
已关闭的变更 <b>{{ closedCount }}</b>
</div>
</div>
<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" @click="searchHandle" />
</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>
</NInput>
<div class="flex items-center gap-1.5">
<NButton
v-for="t in timeRange"
:key="t.value"
size="tiny"
round
class="text-[11px]"
:type="range === t.value ? 'primary' : 'default'"
@click="timeRangeChange(t.value)"
>
{{ t.label }}
</NButton>
</div>
<span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
</div>
<div class="text-[11px] leading-4 text-slate-400 pb-2">
培训 / PSSR 为线下组织并签字，拍照或扫描上传即视为完成确认并随单归档；系统不做内容识别，本页为 PSSR 检查表的查看 / 下载入口。
</div>
<!-- 列表 -->
<div class="scroll">
<div
v-if="list.length"
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==='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.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_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.status==='APPROVING' || s.status==='APPROVED' || s.status==='ACCEPTED'" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
</div>
</div>
<div v-else class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
</div>
<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"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
</template>
</NModal>
</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" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin>
</NSpace>
</NSpace>
</template>
<style scoped lang="scss">