HS_MZAP/src/views/activityMan/personList.vue

<template>
  <div class="personList">
    <van-search
      v-model="searchVal"
      clearable
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      input-align="center"
      @search="onSearch"
      @cancel="onCancel"
    />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-checkbox-group
        v-if="type == 1"
        v-model="checked"
        ref="checkboxGroup"
      >
        <van-button type="primary" size="mini" @click="checkAll"
          >全选</van-button
        >
        <van-cell-group inset>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item"
            :title="item.name"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
                shape="square"
                :name="item"
                :ref="(el) => (checkboxRefs[index] = el)"
              />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-radio-group v-if="type == 0" v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="item in list"
            clickable
            :key="item"
            :title="item.name"
            @click="selectes(item)"
          >
            <template #right-icon>
              <van-radio :name="item" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-list>
  </div>
</template>

<script>
import { ref } from "vue";
import UserManage from "@/api/user/UserManage";
export default {
  name: "personList",
  emits: ["selected"],
  props: ["type"],
  setup(props, { emit }) {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    let index = 0;
    const onLoad = () => {
      // 异步更新数据
      new UserManage()
        .list({
          current: index + 1,
          size: 10,
        })
        .then(({ records }) => {
          list.value.push(...records);
          // 加载状态结束
          loading.value = false;
          // 数据全部加载完成
          if (records.length < 10) {
            finished.value = true;
          } else {
            index++;
          }
        });
    };
    // 搜索
    const searchVal = ref("");
    const onSearch = () => {
      new UserManage()
        .list({
          current: 1,
          size: 10000,
          name: searchVal.value,
        })
        .then(({ records }) => {
          list.value = [];
          list.value.push(...records);
          // 加载状态结束
          loading.value = false;
          // 数据全部加载完成
          finished.value = true;
        });
    };
    const onCancel = () => {
      searchVal.value = "";
      list.value = [];
      index = 0;
      finished.value = false;
      onLoad();
    };
    // 选择人员
    const checked = ref([]);
    const checkboxRefs = ref([]);
    const checkboxGroup = ref(null);
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
      emit("selected", checked.value, 1);
    };
    // 全选
    const checkAll = () => {
      checkboxGroup.value.toggleAll(true);
      emit("selected", checked.value, 1);
    };
    const selectes = (val) => {
      checked.value = val;
      emit("selected", checked.value, 0);
    };

    return {
      // 人员
      list,
      onLoad,
      loading,
      finished,
      // 搜索
      searchVal,
      onSearch,
      onCancel,
      // 全选
      checkAll,
      toggle,
      checked,
      checkboxRefs,
      checkboxGroup,
      // 单选
      selectes,
    };
  },
};
</script>

<style scoped>
.personList {
  height: 65vh;
  overflow: auto;
  margin: 10px;
}
.van-button {
  top: -5px;
}
.search {
  height: 40px;
  line-height: 40px;
}
.van-list {
  height: 80%;
  margin-top: 5px;
}
.keyword {
  width: 70%;
  height: 25px;
  border-radius: 25px;
  border: 1px solid;
  padding-left: 15px;
}
</style>