资料档案库-左侧树状列表完成
This commit is contained in:
@@ -1,15 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { aiKnowledgeIngest, pollTask, AiError } from '@/service/api/ai';
|
||||
import { docListApi, historyVersionListApi } from '@/service/api/doc';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const themeStore = useThemeStore();
|
||||
const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
||||
|
||||
const keyword = ref<string>('');
|
||||
const uploadFiles = () => {
|
||||
window.$message?.success('演示：上传资料（限资料管理员 / 各专业专责维护；上传后进入受控评审，发布生效并生成新版本号，全程留痕）')
|
||||
}
|
||||
@@ -125,14 +125,35 @@ const openOrgs = ref<Record<string, boolean>>({ 一车间: true });
|
||||
const libSel = ref({ org: "一车间", cat: "工艺", label: "操作规程" });
|
||||
const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.groups.find((g) => g.cat === libSel.value.cat)?.folders.find((f) => f.label === libSel.value.label));
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
const rightLoading = ref<boolean>(false);
|
||||
// 搜索关键词
|
||||
const keyword = ref<string>('');
|
||||
// 资料库树状列表
|
||||
const docList = ref<any[]>([]);
|
||||
// 历史版本列表
|
||||
const historyList = ref<any[]>([]);
|
||||
|
||||
// 获取资料库树状列表
|
||||
const getDocList = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await docListApi();
|
||||
if(!error){
|
||||
console.log(data);
|
||||
docList.value = data ?? [];
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getDocList();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpace vertical :size="16">
|
||||
<!-- 我的草稿箱 -->
|
||||
<!-- 我的草稿箱 -->
|
||||
<NSpin :show="loading" size="small">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive class="pb-[12px] border-b">
|
||||
<NGi span="24 s:24 m:16">
|
||||
@@ -143,7 +164,7 @@ const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
|
||||
<div class="flex items-center gap-2">
|
||||
<NInput v-model:value="keyword" size="small" type="text" class="w-40 text-xs" placeholder="全文检索…">
|
||||
<NInput v-model:value="keyword" size="small" type="text" class="w-40 text-xs" clearable placeholder="全文检索…">
|
||||
<template #suffix>
|
||||
<Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" />
|
||||
</template>
|
||||
@@ -181,26 +202,26 @@ const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.
|
||||
<!-- 文件夹树 + 当前文件夹资料 -->
|
||||
<div v-else class="flex gap-3">
|
||||
<div class="shrink-0 space-y-2 w-56 scroll-left">
|
||||
<div v-for="o in LIB_ORGS" :key="o.org" class="overflow-hidden rounded-lg border bg-white">
|
||||
<div v-for="o in docList" :key="o.org" class="overflow-hidden rounded-lg border bg-white">
|
||||
<button class="flex w-full items-center gap-1.5 px-2.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 bg-transparent"
|
||||
@click="openOrgs[o.org] = !openOrgs[o.org]">
|
||||
<Icon icon="formkit:right" class="size-14px transition-transform" :class="openOrgs[o.org] ? 'rotate-90' : ''" />
|
||||
<Icon v-if="openOrgs[o.org]" icon="quill:folder-open" class="size-14px" :style="{ color: themeStore.themeColor }" />
|
||||
@click="openOrgs[o.org_name] = !openOrgs[o.org_name]">
|
||||
<Icon icon="formkit:right" class="size-14px transition-transform" :class="openOrgs[o.org_name] ? 'rotate-90' : ''" />
|
||||
<Icon v-if="openOrgs[o.org_name]" icon="quill:folder-open" class="size-14px" :style="{ color: themeStore.themeColor }" />
|
||||
<Icon v-else icon="material-symbols:folder-outline" class="size-14px text-slate-400" />
|
||||
{{ o.org }}
|
||||
{{ o.org_name }}
|
||||
</button>
|
||||
<template v-if="openOrgs[o.org]">
|
||||
<div v-for="g in o.groups" :key="g.cat" class="border-t px-2 py-1.5">
|
||||
<div class="px-1 pb-0.5 text-[10px] font-medium tracking-wide text-slate-400">{{ g.cat }}专业</div>
|
||||
<button v-for="f in g.folders" :key="f.label"
|
||||
@click="libSel = { org: o.org, cat: g.cat, label: f.label }"
|
||||
<template v-if="openOrgs[o.org_name]">
|
||||
<div v-for="g in o.categories" :key="g.cat" class="border-t px-2 py-1.5">
|
||||
<div class="px-1 pb-0.5 text-[10px] font-medium tracking-wide text-slate-400">{{ g.category }}</div>
|
||||
<button v-for="f in g.folders" :key="f.folder"
|
||||
@click="libSel = { org: o.org_name, cat: g.category, label: f.folder }"
|
||||
class="flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-xs transition"
|
||||
:class="libSel.org === o.org && libSel.cat === g.cat && libSel.label === f.label ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100 bg-transparent'"
|
||||
:class="libSel.org === o.org_name && libSel.cat === g.category && libSel.label === f.folder ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100 bg-transparent'"
|
||||
:style="{ '--theme-color': themeStore.themeColor }"
|
||||
>
|
||||
<Icon icon="material-symbols:folder-outline" class="size-14px text-slate-400" />
|
||||
<span class="min-w-0 flex-1 truncate">{{ f.label }}</span>
|
||||
<span class="text-[10px]" :class="libSel.label === f.label && libSel.cat === g.cat && libSel.org === o.org ? 'text-white/70' : 'text-slate-300'">{{ f.docs.length }}</span>
|
||||
<span class="min-w-0 flex-1 truncate">{{ f.folder }}</span>
|
||||
<span class="text-[10px]" :class="libSel.label === f.folder && libSel.cat === g.category && libSel.org === o.org_name ? 'text-white/70' : 'text-slate-300'">{{ f.count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -210,7 +231,7 @@ const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.
|
||||
<div class="mb-1.5 flex flex-wrap items-center gap-1 text-xs text-slate-400">
|
||||
当前位置：{{ libSel.org }}
|
||||
<Icon icon="formkit:right" class="size-12px" />
|
||||
{{ libSel.cat }}专业
|
||||
{{ libSel.cat }}
|
||||
<Icon icon="formkit:right" class="size-12px" />
|
||||
<span class="font-medium text-slate-600">{{ libSel.label }}</span>
|
||||
<span class="ml-auto">共 {{ libCur?.docs.length ?? 0 }} 份 · 版本受控</span>
|
||||
@@ -238,6 +259,7 @@ const libCur = computed(() => LIB_ORGS.find((o) => o.org === libSel.value.org)?.
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NSpin>
|
||||
</NSpace>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user