ImgTurnPage.vue

<template>
  <div style="min-width: 800px">
    <a-row>
      <!-- 左侧文件树 -->
      <a-col :span="6">
        <a-tree
          showLine
          :treeData="treeData"
          :expandedKeys="[expandedKeys[0]]"
          :selectedKeys="selectedKeys"
          :style="{ height: '500px', 'border-right': '2px solid #c1c1c1', 'overflow-y': 'auto' }"
          @expand="onExpand"
          @select="onSelect"
        ></a-tree>
      </a-col>

      <!--右侧缩略图-->
      <a-col :span="18">
        <a-row style="margin-top: 10px; padding-left: 2%">
          <a-col :span="24" style="margin-bottom: 10px">
            <a-button @click="prev" preIcon="ant-design:left-outlined" type="primary">上一页</a-button>
            <a-button @click="next" preIcon="ant-design:right-outlined" style="margin-left: 8px" type="primary">下一页</a-button>
            <span style="margin-left: 100px; font-weight: bolder">{{ navName }}</span>
          </a-col>
          <a-col :span="24">
            <img :src="imgUrl" preview />
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, onMounted } from 'vue';
  //mock数据
  const mockdata = [
    {
      title: '第一页',
      key: '0-0',
      children: [
        {
          title: '1页',
          key: '0-0-0',
          imgUrl: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg',
        },
        {
          title: '2页',
          key: '0-0-1',
          imgUrl: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg',
        },
      ],
    },
    {
      title: '第二页',
      key: '0-1',
      children: [
        {
          title: '1页',
          key: '0-1-0',
          imgUrl: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg',
        },
        {
          title: '2页',
          key: '0-1-1',
          imgUrl: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg',
        },
      ],
    },
    {
      title: '第三页',
      key: '0-2',
      children: [
        {
          title: '1页',
          key: '0-2-0',
          imgUrl: 'https://static.jeecg.com/upload/test/1374962_1587621329085.jpg',
        },
      ],
    },
  ];
  /**
   * 左侧树形数据
   */
  const treeData = ref(mockdata);
  //选中的key
  const selectedKeys = ref([]);
  //展开的key
  const expandedKeys = ref([]);
  const sort = ref(0);
  //图片链接
  const imgUrl = ref('');
  //页码标题
  const navName = ref('');
  //图片集合
  const imgList = ref([]);

  onMounted(getImgList);

  /**
   * 加载图片集合
   */
  function getImgList() {
    var count = 0;
    for (var i = 0; i < unref(treeData).length; i++) {
      for (var j = 0; j < unref(treeData)[i].children.length; j++) {
        imgList.value.push({
          key: unref(treeData)[i].children[j].key,
          pkey: unref(treeData)[i].key,
          sort: count++,
          imgUrl: unref(treeData)[i].children[j].imgUrl,
          navName: unref(treeData)[i].title + '/' + unref(treeData)[i].children[j].title,
        });
      }
    }
    setValue(imgList.value[unref(sort)]);
  }
  /**
   * 节点选中事件
   */
  function onSelect(selectedKeys, info) {
    for (var i = 0; i < unref(imgList).length; i++) {
      if (unref(imgList)[i].key === selectedKeys[0]) {
        sort.value = unref(imgList)[i].sort;
        setValue(unref(imgList)[i]);
        break;
      }
    }
  }
  /**
   * 节点展开事件
   */
  function onExpand(expandedKey) {
    expandedKeys.value = [];
    if (expandedKey !== null && expandedKey !== '') {
      expandedKeys.value[0] = expandedKey[1];
    }
  }
  /**
   * 上一页
   */
  function prev() {
    if (unref(sort) === 0) {
      sort.value = unref(imgList).length - 1;
    } else {
      sort.value = sort.value - 1;
    }
    setValue(unref(imgList)[unref(sort)]);
  }
  /**
   * 下一页
   */
  function next() {
    if (unref(sort) === unref(imgList).length - 1) {
      sort.value = 0;
    } else {
      sort.value = unref(sort) + 1;
    }
    setValue(unref(imgList)[unref(sort)]);
  }

  // 设置受控节点值
  function setValue(value) {
    selectedKeys.value = [];
    imgUrl.value = value.imgUrl;
    selectedKeys.value[0] = value.key;
    expandedKeys.value[0] = value.pkey;
    navName.value = value.navName;
  }
</script>