weiyuan-document-web/src/views/component/biaoqian.vue

<template>
  <div>
    <Input
      v-model="select.filter[0].value"
      search
      enter-button
      placeholder="请输入名称搜索"
      @on-search="search"
    />

    <div class="tags-container" v-loading="loading">
      <el-scrollbar wrap-class="scrollbar-wrapper-biaoqian">
        <div style="max-height: 180px">
          <el-checkbox-group
            size="mini"
            ref="content"
            v-model="value"
            v-infinite-scroll="getTags"
            infinite-scroll-delay="200"
            infinite-scroll-disabled="disabled"
            @change="change"
          >
            <el-checkbox border :label="item.id" v-for="item in tags" :key="item.id">{{
              item.mingcheng
            }}</el-checkbox>
          </el-checkbox-group>

          <Divider v-if="noMore">没有更多了～</Divider>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
export default {
  props: {
    fieldInfo: Object,
    form: Object,
  },
  data() {
    return {
      loading: false,
      noMore: false,

      value: [],
      tags: [],
      select: {
        page: 1,
        page_size: 20,
        table_name: "tags",
        filter: [
          {
            key: 'zhuangtai',
            op: 'eq',
            value: '1'
          },
          {
            key: "mingcheng",
            op: "like",
            value: "",
          },
        ],
      },
    };
  },
  methods: {
    async getTags() {
      if (this.noMore) return;
      this.loading = true;
      const res = await index(this.select);
      if (res.data.length < this.select.page_size) {
        this.noMore = true;
      } else {
        this.select.page++;
      }
      this.tags.push(...res.data);
      this.loading = false;
    },
    search() {
      this.noMore = false;
      this.select.page = 1;
      this.tags = [];
      this.loadHeight();
    },
    loadHeight() {
      if (!this.noMore) {
        this.$nextTick(() => {
          if (this.$refs["content"].$el.getBoundingClientRect().height < 180) {
            this.getTags().then((_) => {
              this.loadHeight();
            });
          }
        });
      }
    },

    change(e) {
      this.update();
    },
    update () {
      let tagObjs = [];
      this.value.forEach((i) => {
        let tag = deepCopy(this.tags.find((tag) => tag.id === i));
        delete tag?.id;
        tagObjs.push({
          tag_id: i,
          ...tag,
        });
      });
      this.$emit("update", tagObjs);
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {
    "form.id_material_biaoqian_tags_material_id_relation": {
      handler: function (newVal) {
        this.value = newVal.map(i => i.tag_id);
      }
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
.tags-container {
  min-height: 80px;
  border-radius: 6px;
  border: 1px dotted $primaryColor;

  margin: 20px 0;
  padding: 10px 20px;
}
</style>
<style>
.scrollbar-wrapper-biaoqian {
  overflow-x: hidden;
}
</style>