saas_miniprogram/components/course/handoutsBox.vue

<template>
  <view>
    <template
      v-if="courseHandoutsData.fileList && courseHandoutsData.fileList.length"
    >
      <u-search
        placeholder="搜索讲义名称"
        bg-color="#ffffff"
        margin="0 0 20rpx"
        v-model="keyword"
        @custom="search"
        @search="search"
      ></u-search>
      <view class="handouts-box" v-for="item in searchList" :key="item.fileId">
        <handouts-tree :canDownload="courseHandoutsData.canDownload" :fileInfo="item"></handouts-tree>
      </view>
    </template>
    <view v-else style="text-align: center">暂无讲义</view>
  </view>
</template>

<script>
import handoutsTree from "@/components/course/handoutsTree.vue";
export default {
  name: "HandoutsBox",
  props: {
    handoutsId: {
      type: Number,
    },
  },
  data() {
    return {
      keyword: "",
      searchList: [],
      courseHandoutsData: [],
    };
  },

  mounted() {
    this.courseHandouts();
  },
  methods: {
    search(val) {
      if (!val) {
        this.searchList = this.backClone();
        return;
      }
      this.searchList = this.filterList(this.backClone(), []);
    },
    filterList(list, res) {
      list.forEach((ele) => {
        if (ele.type == 1 && ele.urlName.includes(this.keyword)) {
          res.push(ele);
        }
        if (ele.children && ele.children.length) {
          this.filterList(ele.children, res);
        }
      });
      return res;
    },
    backClone() {
      return JSON.parse(JSON.stringify(this.courseHandoutsData.fileList));
    },
    courseHandouts() {
      this.$api.courseHandouts(this.handoutsId).then((res) => {
        this.courseHandoutsData = res.data.data;
        this.searchList = this.backClone();
        console.log(this.courseHandoutsData,666)
      });
    },
  },

  components: {
    handoutsTree,
  },
};
</script>

<style lang="scss" scoped>
.handouts-box {
  border-radius: 20rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
}
</style>