public-fuse/src/view/media/index.vue

<template>
  <com-head
    :options="options"
    v-model="currentTypeId"
    notContent
    v-if="options.length"
  />

  <div class="body-layer media">
    <div class="body-head media-head">
      <el-button type="primary" class="btn" @click="handleUploadClick">
        上传
      </el-button>

      <el-tabs
        v-model="subTabName"
        class="sub-tab"
        @tab-click="handleSubtabClick"
      >
        <el-tab-pane
          v-for="sub in subOptions"
          :label="sub.name"
          :name="sub.value"
        >
          <div class="media-list" v-if="files.length">
            <div v-for="file in files" class="cover" @click="handerPhotoEdit">
              <img :src="file.filesUrl" />
              <span class="title">{{ file.filesTitle }}</span>
            </div>
          </div>
          <el-empty v-else class="empty"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed, watchEffect, watch } from "vue";
import comHead from "@/components/head/index.vue";
import { title, desc } from "@/store/system";

import {
  CaseFile,
  CaseFileType,
  getCaseFileTypesQuery,
  getCaseFiles,
  delCaseFile,
  BoardType,
} from "@/store/caseFile";
import { RouteName, router } from "@/router";
import { addCaseFile } from "../case/quisk";

const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const currentTypeId = ref<number>();
const options = ref<{ name: string; value: number; childKey?: string }[]>([]);
const subOptions = ref<{ name: string; value: number }[]>([]);
const files = ref<CaseFile[]>([]);
const subTabName = ref();

const handleSubtabClick = (value: number) => {
  // console.log("handleSubtabClick", value);
  // currentTypeId.value = value;
};
const handleUploadClick = async () => {
  console.log("handleUploadClick");
  await addCaseFile({ caseId: caseId.value!, fileType: subTabName.value! });
  refresh();
};

const handerPhotoEdit = () => {
  console.log("handerPhotoEdit");
};
const initDefaultData = async () => {
  const data = await getCaseFileTypesQuery("library");
  const rootList = data.map((item) => {
    return {
      name: item.filesTypeName,
      value: item.filesTypeId,
      childKey: item.childKey,
    };
  });
  options.value = rootList;
  currentTypeId.value = rootList[0].value;

  const secondData = rootList[0].childKey
    ? await getCaseFileTypesQuery(rootList[0].childKey)
    : [];
  const secondList = secondData.map((item) => {
    return {
      name: item.filesTypeName,
      value: item.filesTypeId,
    };
  });
  subTabName.value = secondList[0].value;
  subOptions.value = secondList;
};
watchEffect(() => caseId.value && subTabName.value && refresh());

watch(currentTypeId, async (nVal, oVal) => {
  if (oVal && nVal !== oVal) {
    //切换时
    const root = options.value.find((i) => i.value === nVal);
    if (root) {
      const secondData = root.childKey
        ? await getCaseFileTypesQuery(root.childKey)
        : [];
      const secondList = secondData.map((item) => {
        return {
          name: item.filesTypeName,
          value: item.filesTypeId,
        };
      });
      subTabName.value = secondList[0].value;
      subOptions.value = secondList;
    }

    //  const data = await getCaseFileTypesQuery("library");
  }
});
const refreshRoot = async () => {
  console.log("refreshRoot");
};
const refresh = async () => {
  files.value = await getCaseFiles({
    caseId: caseId.value!,
    filesTypeId: subTabName.value,
  });
};
onMounted(async () => {
  title.value = " xxxx | 媒体库";
  desc.value = "";
  console.log("caseId", caseId.value);
  initDefaultData();
});
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>