design_quality_console/src/views/design-directive/catalog/index.vue

<template>
  <div :class="prefixCls" class="m-5 bg-white">
    <div class="flex flex-nowrap w-full h-full">
      <div class="w-1/4 border-gray-400 border">
        <header class="p-2 flex justify-between items-center h-12">
          <div class="w-1/2">
            <BasicUpload
              v-show="showUploadBtn"
              :max-size="20"
              :max-number="1"
              @change="handleChange"
              :api="uploadApi"
              :showPreviewNumber="false"
              :emptyHidePreview="true"
              :accept="['xlsx', 'xls', 'pdf']"
            />
          </div>
          <div class="flex flex-row w-1/2 justify-end">
            <span class="flex align-middle cursor-pointer" @click="handleTreeOpreate('upSerial')">
              <Icon icon="mdi:arrow-up" :size="18" />
              上移
            </span>
            <span
              class="flex align-middle ml-1 cursor-pointer"
              @click="handleTreeOpreate('downSerial')"
            >
              <Icon icon="mdi:arrow-down" :size="18" />
              下移
            </span>
          </div>
        </header>
        <section>
          <BasicTree
            v-if="treeData.length"
            :tree-data="treeData"
            :replace-fields="replaceFields"
            :show-line="true"
            :defaultExpandAll="true"
            @select="onSelect"
          />
        </section>
      </div>
      <div class="w-3/4 ml-4 flex flex-col">
        <header class="h-1/12 mt-2 flex justify-between items-center">
          <span class="text-3xl font-bold">{{ detail.name }}</span>
          <section>
            <AButton
              v-show="showExcel"
              type="primary"
              size="small"
              class="mr-4"
              @click="uploadExecl"
              >下载Excel</AButton
            >
            <!-- <AButton type="primary" size="small" class="mx-1">下载PDF</AButton> -->
            <!-- <AButton type="primary" size="small" class="mx-1">编辑</AButton> -->
            <!-- <span class="h-full border-l-1 border-gray-400 mx-1"></span> -->
            <!-- <AButton type="primary" size="small" class="mx-1 mr-4">下载</AButton> -->
          </section>
        </header>
        <section class="h-11/12 border-gray-400 border">
          <!-- <PreviewPdf v-show="!showExcel" :url="pdfUrl" /> -->
          <iframe v-if="showPdf" :src="pdfUrl" frameborder="0" width="100%" height="100%"></iframe>
          <div
            v-if="detail.name && !detail.fid"
            class="h-full flex justify-center items-center text-2xl"
            >暂未上传数据表</div
          >
        </section>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, watch } from 'vue'
  import { saveSectionFileApi, sectionAllApi, treeDetailApi, treeResfulApi } from '/@/api/sys/tree'
  import { useDesign } from '/@/hooks/web/useDesign'
  import { BasicTree } from '/@/components/Tree/index'
  import { Icon } from '/@/components/Icon'
  import { message } from 'ant-design-vue'
  import { TreeResultModel } from '/@/api/model/tree'
  import { BasicUpload } from '/@/components/Upload'
  import { uploadApi } from '/@/api/sys/upload'
  import { TreeRow } from '/#/tree'
  import { downloadByUrl } from '/@/utils/file/download'
  import PreviewPdf from './pdf.vue'
  interface ATreeRow extends TreeRow {
    showUpload: boolean
  }
  export default defineComponent({
    name: 'Catalog',
    components: { BasicTree, Icon, BasicUpload, PreviewPdf },
    setup() {
      const treeData = ref<TreeResultModel[]>([])
      const row = ref<ATreeRow>({
        id: '',
        parentId: '',
        name: '',
        depth: 0,
        serial: 0,
        attribution: '',
        code: '',
        contractId: '',
        createTime: '',
        showUpload: false
      })
      const detail = ref({ name: '', content: '', filepath: '', filename: '', ext: '', fid: '' })
      async function initData() {
        const result = await sectionAllApi()
        treeData.value = result.children
      }

      async function initSectionDetail(id: string) {
        const result = await treeDetailApi(id)
        detail.value = result
      }
      initData()

      const handleTreeOpreate = async (operation: 'upSerial' | 'downSerial') => {
        const id = row.value.id
        if (!id) {
          return message.error('请先选中节点')
        }
        await treeResfulApi({ id, type: 'serial', operation })
        await initData()
      }

      const { prefixCls } = useDesign('catalog')
      const replaceFields = { children: 'children', title: 'name', key: 'id' }

      const onSelect = (selectedKeys: Event, { selectedNodes }) => {
        if (selectedKeys!.length) {
          const {
            id,
            parentId,
            name,
            depth,
            serial,
            attribution,
            code,
            contractId,
            children,
            createTime
          } = selectedNodes[0]?.props
          row.value = {
            showUpload: children && children.length ? false : true,
            id,
            parentId,
            name,
            depth,
            serial,
            attribution,
            code,
            contractId,
            createTime
          }
        }
      }

      watch(row, (row, prevRow) => {
        if (row.id !== prevRow.id) {
          initSectionDetail(row.id)
        }
      })

      const handleChange = async (list: string[]) => {
        await saveSectionFileApi({ id: row.value.id, contractId: list[0] })
        await initSectionDetail(row.value.id)
      }

      const showUploadBtn = computed(() => row.value.showUpload)

      const showExcel = computed(() => {
        return /.(excel)|(xls)|(xlsl)$/.test(detail.value.ext)
      })
      const showPdf = computed(() => {
        if (!detail.value.fid) {
          return false
        }
        const isPdf = /.(pdf)|(PDF)$/.test(detail.value.ext)
        if (!isPdf) {
          return false
        }
        return true
      })
      const uploadExecl = () => {
        downloadByUrl({
          url: 'http://localhost:7070' + detail.value.filepath
        })
      }

      const pdfUrl = computed(() => 'http://localhost:7070' + detail.value.filepath)
      return {
        treeData,
        replaceFields,
        prefixCls,
        onSelect,
        handleTreeOpreate,
        detail,
        uploadApi,
        handleChange,
        row,
        showUploadBtn,
        showExcel,
        uploadExecl,
        pdfUrl,
        showPdf
      }
    }
  })
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-catalog';

  .@{prefix-cls} {
    width: calc(100% - 2.5rem);
    height: calc(100% - 2.5rem);
    overflow: hidden;
  }
</style>