资料管理空数据状态显示修改
This commit is contained in:
@@ -532,6 +532,7 @@ onMounted(() => {
|
|||||||
<div class="w-300px border rounded-md p-2">
|
<div class="w-300px border rounded-md p-2">
|
||||||
<div class="scroll-left">
|
<div class="scroll-left">
|
||||||
<NTree
|
<NTree
|
||||||
|
class="h-100% flex flex-col"
|
||||||
block-line
|
block-line
|
||||||
:data="docList"
|
:data="docList"
|
||||||
label-field="label"
|
label-field="label"
|
||||||
@@ -544,7 +545,13 @@ onMounted(() => {
|
|||||||
:on-update:expanded-keys="handleExpandKeys"
|
:on-update:expanded-keys="handleExpandKeys"
|
||||||
:on-update:selected-keys="handleSelectKeys"
|
:on-update:selected-keys="handleSelectKeys"
|
||||||
:node-props="treeProps"
|
:node-props="treeProps"
|
||||||
/>
|
>
|
||||||
|
<template #empty>
|
||||||
|
<div class="h-100% flex items-center justify-center">
|
||||||
|
<NEmpty description="暂无数据" class="text-xs"></NEmpty>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</NTree>
|
||||||
<NDropdown
|
<NDropdown
|
||||||
:show="menuVisible"
|
:show="menuVisible"
|
||||||
:options="menuOptions"
|
:options="menuOptions"
|
||||||
@@ -574,7 +581,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<NSpin :show="fileLoading" size="small">
|
<NSpin :show="fileLoading" size="small">
|
||||||
<div class="scroll-right">
|
<div class="scroll-right">
|
||||||
<div class="divide-y rounded-md border bg-white">
|
<div class="divide-y rounded-md border bg-white h-100%">
|
||||||
<div v-for="d in fileList" :key="d.name" class="flex flex-wrap items-center gap-3 px-2 py-2.5">
|
<div v-for="d in fileList" :key="d.name" class="flex flex-wrap items-center gap-3 px-2 py-2.5">
|
||||||
<Icon icon="akar-icons:file" class="size-16px" />
|
<Icon icon="akar-icons:file" class="size-16px" />
|
||||||
<div class="min-w-0 flex-1">
|
<div class="min-w-0 flex-1">
|
||||||
@@ -591,7 +598,9 @@ onMounted(() => {
|
|||||||
<NButton type="primary" text class="hover:underline text-xs" @click="download(d)">下载</NButton>
|
<NButton type="primary" text class="hover:underline text-xs" @click="download(d)">下载</NButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p v-if="fileList.length===0" class="text-xs text-slate-400 text-center py-5">暂无资料数据</p>
|
<div v-if="fileList.length===0" class="h-100% flex items-center justify-center">
|
||||||
|
<NEmpty description="暂无资料数据" class="text-xs"></NEmpty>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NSpin>
|
</NSpin>
|
||||||
|
|||||||
@@ -403,6 +403,7 @@ onMounted(async () => {
|
|||||||
<div class="w-300px border rounded-md p-2">
|
<div class="w-300px border rounded-md p-2">
|
||||||
<div class="scroll-left">
|
<div class="scroll-left">
|
||||||
<NTree
|
<NTree
|
||||||
|
class="h-100% flex flex-col"
|
||||||
block-line
|
block-line
|
||||||
:data="treeList"
|
:data="treeList"
|
||||||
label-field="label"
|
label-field="label"
|
||||||
@@ -414,56 +415,68 @@ onMounted(async () => {
|
|||||||
:cancelable="false"
|
:cancelable="false"
|
||||||
:on-update:expanded-keys="handleExpandKeys"
|
:on-update:expanded-keys="handleExpandKeys"
|
||||||
:on-update:selected-keys="handleSelectKeys"
|
: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>
|
</div>
|
||||||
<!-- 右：归档包详情 -->
|
<!-- 右：归档包详情 -->
|
||||||
<div class="min-w-0 flex-1">
|
<div class="min-w-0 flex-1">
|
||||||
<NSpin :show="rightLoading" size="small">
|
<NSpin :show="rightLoading" size="small">
|
||||||
<div v-if="rightDetails" class="rounded-md border col-span-2">
|
<template v-if="rightDetails">
|
||||||
<div class="border-b p-3">
|
<div class="rounded-md border col-span-2">
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
<div class="border-b p-3">
|
||||||
<span class="text-sm font-semibold">{{ rightDetails.change_no }}</span>
|
<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>
|
||||||
<div class="mt-1 text-xs text-slate-600">{{ rightDetails.title }}</div>
|
<div class="divide-y scroll-right">
|
||||||
<div class="mt-2 flex flex-wrap justify-between gap-x-4 gap-y-1 text-[11px] text-slate-500">
|
<div v-for="f in rightDetails?.folders" :key="f.step_no">
|
||||||
<span>归档路径：{{ currentPath.join('/') }}</span>
|
<button @click="openFolders[f.step_no] = !openFolders[f.step_no]"
|
||||||
<span>关闭时间:{{ rightDetails?.close_time?.slice(0,10) }}</span>
|
class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
|
||||||
<span>共 {{ extractFiles(rightDetails.folders)?.total }} 个文件 · {{ extractFiles(rightDetails.folders)?.formattedSize }}</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="divide-y scroll-right">
|
</template>
|
||||||
<div v-for="f in rightDetails?.folders" :key="f.step_no">
|
<div v-else class="h-100% rounded-md border scroll-empty">
|
||||||
<button @click="openFolders[f.step_no] = !openFolders[f.step_no]"
|
<div class="h-100% flex items-center justify-center">
|
||||||
class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium hover:bg-slate-50 bg-transparent">
|
<NEmpty description="暂无归档包详情数据" class="text-xs"></NEmpty>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="rounded-md border text-center text-xs text-slate-400 py-5">暂无归档包详情数据</div>
|
|
||||||
</NSpin>
|
</NSpin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -508,4 +521,8 @@ onMounted(async () => {
|
|||||||
height: calc(100vh - 416px);
|
height: calc(100vh - 416px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
.scroll-empty {
|
||||||
|
height: calc(100vh - 281px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user