feat: .

src/views/pc/ResourceDetailView.vue

@@ -77,13 +77,15 @@
 
 <script setup>
 import Breadcrumb from "@/components/Breadcrumb/index.vue";
-import { ref, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { formDataDetail, getFieldList } from "@/api";
 import { getThumb } from "@/utils/file";
 import { ElMessage } from "element-plus";
+
 const route = useRoute();
 const router = useRouter();
+
 const getRouteValue = (item, keys, fallback = "") => {
   for (const key of keys) {
     const value = item?.[key];
@@ -123,48 +125,11 @@ const fileTypes = ref([
     show: false,
   },
 ]);
-const formDataId = route.params.formDataId;
-const formDefId = route.params.formDefId;
-const detailFields = [
-  { label: "索书号", value: "这是一段文本" },
-  { label: "责任者", value: "这是一段文本" },
-  { label: "出版社", value: "这是一段文本" },
-  { label: "出版年份", value: "这是一段文本" },
-  { label: "中图分类", value: "这是一段文本" },
-  { label: "四部分类", value: "这是一段文本" },
-  { label: "语种", value: "这是一段文本" },
-  { label: "文献类型", value: "这是一段文本" },
-  { label: "资源类型", value: "这是一段文本" },
-  { label: "附注", value: "这是一段文本" },
-];
+
+const formDataId = computed(() => String(route.params.formDataId || ""));
+const formDefId = computed(() => String(route.params.formDefId || ""));
+
 const info = ref(null);
-const relatedResources = Array.from({ length: 12 }, (_, index) => ({
-  id: index + 1,
-  title: "《三国演义》",
-  author: "责任者",
-}));
-
-const getDetails = () => {
-  formDataDetail(formDefId, formDataId).then((res) => {
-    if (res.code == 0) {
-      info.value = res.data;
-      if (res.data?.files?.length) {
-        res.data?.files.forEach((item) => {
-          let suffix = getFileExt(item);
-          fileTypes.value = fileTypes.value.map((i) => {
-            if (i.format.includes(suffix)) {
-              console.error(suffix);
-              i.show = true;
-            }
-            return i;
-          });
-        });
-      }
-    } else {
-      ElMessage.error(res.msg);
-    }
-  });
-};
 
 const filterKey = [
   "sort",
@@ -187,29 +152,78 @@ const normalizeList = (data) => {
   return [];
 };
 const dictFieldNameMap = ref({});
-const getSelectList = () => {
-  if (!formDefId) return;
-
-  getFieldList(formDefId).then((res) => {
-    if (res.code === 0) {
-      const fields = normalizeList(res.data);
-      dictFieldNameMap.value = fields.reduce((map, item) => {
-        if (item.dictId && item.fieldName) {
-          map[String(item.dictId)] = item.fieldName;
-        }
-        return map;
-      }, {});
-      fieldOptions.value = fields.filter((item) => {
-        return !filterKey.includes(item.fieldName);
+
+const resetFileTypes = () => {
+  fileTypes.value = fileTypes.value.map((item) => ({
+    ...item,
+    show: false,
+  }));
+};
+
+const getDetails = async () => {
+  if (!formDefId.value || !formDataId.value) {
+    info.value = null;
+    return;
+  }
+
+  const res = await formDataDetail(formDefId.value, formDataId.value).catch(
+    () => null,
+  );
+  if (!res) {
+    return;
+  }
+
+  if (res.code === 0) {
+    info.value = res.data;
+    if (res.data?.files?.length) {
+      res.data.files.forEach((item) => {
+        const suffix = getFileExt(item);
+        fileTypes.value = fileTypes.value.map((i) => {
+          if (i.format.includes(suffix)) {
+            i.show = true;
+          }
+          return i;
+        });
       });
-    } else {
-      ElMessage.error(res.msg);
     }
-  });
+  } else {
+    ElMessage.error(res.msg);
+  }
 };
+
+const getSelectList = async () => {
+  if (!formDefId.value) {
+    fieldOptions.value = [];
+    dictFieldNameMap.value = {};
+    return;
+  }
+
+  const res = await getFieldList(formDefId.value).catch(() => null);
+  if (!res) {
+    fieldOptions.value = [];
+    dictFieldNameMap.value = {};
+    return;
+  }
+
+  if (res.code === 0) {
+    const fields = normalizeList(res.data);
+    dictFieldNameMap.value = fields.reduce((map, item) => {
+      if (item.dictId && item.fieldName) {
+        map[String(item.dictId)] = item.fieldName;
+      }
+      return map;
+    }, {});
+    fieldOptions.value = fields.filter((item) => {
+      return !filterKey.includes(item.fieldName);
+    });
+  } else {
+    ElMessage.error(res.msg);
+  }
+};
+
 const getDictName = (list) => {
-  let arr = [];
-  for (let key in list) {
+  const arr = [];
+  for (const key in list) {
     fieldOptions.value.forEach((j) => {
       if (j.fieldName == key && j.isDict) {
         arr.push({ label: j.fieldLabel, value: list[key], dictId: j.dictId });
@@ -220,6 +234,19 @@ const getDictName = (list) => {
   return arr;
 };
 
+const loadDetailPage = async () => {
+  info.value = null;
+  resetFileTypes();
+  fieldOptions.value = [];
+  dictFieldNameMap.value = {};
+
+  if (!formDefId.value || !formDataId.value) {
+    return;
+  }
+
+  await Promise.all([getDetails(), getSelectList()]);
+};
+
 const goRelatedDetail = (item) => {
   const targetFormDefId = getRouteValue(item, [
     "formDefId",
@@ -241,9 +268,15 @@ const goRelatedDetail = (item) => {
 };
 
 onMounted(() => {
-  getDetails();
-  getSelectList();
+  loadDetailPage();
 });
+
+watch(
+  () => [route.params.formDefId, route.params.formDataId],
+  () => {
+    loadDetailPage();
+  },
+);
 </script>
 
 <style lang="scss" scoped>