HS_MZAP/src/views/activityMan/personList.vue

<template>
  <div class="personList">
    <van-cell-group>
      <van-field v-model="personType" clearable center readonly label="人员类型:" placeholder="请选择人员类型" input-align="right"
        right-icon="arrow-down" @click="showPerson = true" />
      <van-popup v-model:show="showPerson" round position="bottom">
        <van-picker title="人员类型" :columns="$dictUtils.getDictList('hs_people_type')" :columns-field-names="{
          text: 'label',
          value: 'value'
        }" @cancel="showPerson = false" @confirm="getPersonType" />
      </van-popup>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="religiousType" clearable center readonly label="宗教类型:" placeholder="请选择宗教类型" input-align="right"
        right-icon="arrow-down" @click="showPlace = true" />
      <van-popup v-model:show="showPlace" round position="bottom">
        <van-picker title="宗教类型" :columns="$dictUtils.getDictList('hs_religion_type')" :columns-field-names="{
          text: 'label',
          value: 'value'
        }" @cancel="showPlace = false" @confirm="getType" />
      </van-popup>
    </van-cell-group>
    <van-search v-model="searchForm.name" clearable show-action shape="round" placeholder="请输入搜索关键词" input-align="center"
      @search="onLoad" @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-button type="primary" size="mini" @click="nocheckAll">取消全选</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, watch } from "vue";
import UserManage from "@/api/user/UserManage";
export default {
  name: "personList",
  emits: ["selected"],
  props: ["type", "siteId"],
  setup(props, { emit }) {
    const searchForm = ref({
      name: "",
      sex: "",
      idType: "",
      idcard: "",
      phone: "",
      location: {
        id: "",
      },
      typeOfEmployees: "",
      personnelType: "",
      religion: "",
      createEnd: "",
      createBegin: "",
      nativePlace: '',
      currentResidence: '',
    })


    // 搜索
    const onCancel = () => {
      list.value = [];
      index = 0;
      finished.value = false;
      searchForm.value.name = ""
      searchForm.value.religion = ""
      searchForm.value.personnelType = ""
      personType.value = ""
      religiousType.value = ""
    };
    // 选择人员
    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);
      console.log("checked", checked);
      emit("selected", checked.value, 1);
    };
    // 取消全选
    const nocheckAll = () => {
      checkboxGroup.value.toggleAll(false);
      emit("selected", checked.value, 1);
    };
    const selectes = (val) => {
      checked.value = val;
      emit("selected", checked.value, 0);
    };
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    let index = 0;
    watch(
      () => {
        return { ...searchForm.value };
      },
      (newValue, oldValue) => {

        if (oldValue != newValue) {
          index = 0;
          onLoad()
        }
      },
      { deep: true }
    );
    let showPlace = ref(false);
    let showPerson = ref(false);
    let religiousType = ref('');
    let personType = ref('');
    const getType = ({ selectedOptions }) => {
      showPlace.value = false;
      searchForm.value.religion = selectedOptions[0].value;
      religiousType.value = selectedOptions[0].label
    };
    const getPersonType = ({ selectedOptions }) => {
      showPerson.value = false;
      searchForm.value.personnelType = selectedOptions[0].value;
      personType.value = selectedOptions[0].label
    };
    const onLoad = () => {
      if (index == 0) {
        list.value = [];
        loading.value = true;
      }
      // 异步更新数据
      new UserManage()
        .list({
          current: index + 1,
          size: 15,
          ...searchForm.value
        })
        .then(({ records }) => {
          list.value.push(...records)
          // 加载状态结束
          loading.value = false;
          // 数据全部加载完成
          if (records.length < 15) {
            finished.value = true;
            if (finished.value && !loading.value && searchForm.value.location.id != "") {
              checked.value.push(...list.value)
            }
          } else {
            index++;
          }
        });
    };
    if (props.siteId != "") {
      searchForm.value.location.id = props.siteId;
    }
    return {
      // 人员
      list,
      onLoad,
      loading,
      finished,
      // 搜索
      searchForm,
      onCancel,
      // 全选
      checkAll,
      // 取消全选
      nocheckAll,
      toggle,
      checked,
      checkboxRefs,
      checkboxGroup,
      // 单选
      selectes,
      showPlace,
      getType,
      showPerson,
      getPersonType,
      religiousType,
      personType
    };
  },
};
</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>