HS_MZAP/src/views/placeManage/ManageList2.vue

<template>
  <div class="personList">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-radio-group v-if="type == 0" v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="item in list4"
            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 placeRegister from "@/api/placeRegister/placeRegister";
export default {
  name: "personList",
  emits: ["selected"],
  props: ["type", "placeAddress"],
  setup(props, { emit }) {
    const list = ref([]);
    const list4 = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    let index = 0;
    let gaList = ref([]);
    const onLoad = () => {
      // 异步更新数据
      new placeRegister()
        .list({
          current: index + 1,
          size: 10,
        })
        .then(({ records }) => {
          list.value.push(...records);
          // 加载状态结束
          loading.value = false;
          index++;
          // console.log(list.value);
          // 数据全部加载完成
          if (records.length < 10) {
            finished.value = true;
          }
        });
      let placeAddress = "";
      placeAddress = props.placeAddress.split("/");
      let mechanism2 = ref([]); //公安
      new placeRegister().treeDate2().then((res) => {
        mechanism2.value.push(res[1]);
        Getga(mechanism2.value);
        let listtwo = [];
        let itemId = [];
        gaList.value.forEach((item3) => {
          if (item3.regionLevel5 == placeAddress[2]) {
            itemId.push(item3.id);
          }
        });
        list.value.forEach((item2) => {
          itemId.forEach((ID) => {
            if (ID == item2.officeDTO.id) {
              listtwo.push(item2);
            }
          });
          list4.value = listtwo;
        });
      });
    };
    //获取公安部门数组
    function Getga(list) {
      list.forEach((item) => {
        gaList.value.push(item);
        if (item.children) {
          Getga(item.children);
        }
      });
    }
    //获取宗教部门数组
    // function Getzj(list) {
    //   list.forEach((item) => {
    //     zjList.value.push(item);
    //     if (item.children) {
    //       Getzj(item.children);
    //     }
    //   });
    // }

    // 选择人员
    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);
    };
    // let placeAddress = "";
    // watch(
    //   () => props.placeAddress,
    //   (val) => {
    //     placeAddress = val.split("/");

    //   },
    //   {
    //     //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //     //那么首次执行，val为默认值,preVal为undefined
    //     immediate: true,
    //     //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //     //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    //     deep: true,
    //   }
    // );

    return {
      // 人员
      onLoad,
      loading,
      finished,
      // 全选
      checkAll,
      toggle,
      checked,
      checkboxRefs,
      checkboxGroup,
      // 单选
      selectes,
      list4,
    };
  },
};
</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>