HS_MZAP/src/views/placeManage/ManageList.vue

<template>
  <div class="personList">
    <div class="nav-left">
      <p style="font-size: 16px; color: #00bfff">请选择左侧部门机构！</p>
      <ul>
        <li v-for="item in items" v-bind:key="item.id">
          <a @click="clickonlod(item.id)">{{ item.name }}</a>
          <ul v-if="item.children">
            <li
              style="padding-left: 5px"
              v-for="subitem in item.children"
              v-bind:key="subitem.id"
            >
              <a @click="clickonlod(subitem.id)">{{ subitem.name }}</a>
              <ul v-if="subitem.children">
                <li
                  style="padding-left: 5px"
                  v-for="subitem2 in subitem.children"
                  v-bind:key="subitem2.id"
                >
                  <a @click="clickonlod(subitem2.id)">{{ subitem2.name }}</a>
                  <ul v-if="subitem2.children">
                    <li
                      style="padding-left: 5px"
                      v-for="subitem3 in subitem2.children"
                      v-bind:key="subitem3.id"
                    >
                      <a @click="clickonlod(subitem3.id)">{{ subitem3.name }}</a>
                      <ul v-if="subitem3.children">
                        <li
                          style="padding-left: 5px"
                          v-for="subitem4 in subitem3.children"
                          v-bind:key="subitem4.id"
                        >
                          <a @click="clickonlod(subitem4.id)">{{
                            subitem4.name
                          }}</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <van-cell
            v-for="item in list3"
            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>
    <!-- <van-list
      v-model:loading="loading2"
      :finished="finished2"
      finished-text="没有更多了"
      @load="onLoad2"
    >
      <van-radio-group 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 } from "vue";
import placeRegister from "@/api/placeRegister/placeRegister";
export default {
  name: "personList",
  emits: ["selected"],
  setup(props,{ emit }) {
    const list3 = ref([]);
    const list4 = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    let index = 0;
    let items = ref([]);
    new placeRegister().treeDate2().then((res) => {
      items.value.push(res[0]);
    });
    const clickonlod = (id)=>{
      list3.value = [];
      onLoad(id)
    }
    const onLoad = (id) => {
      if(id!=undefined){
        // 异步更新数据
      new placeRegister()
        .list({
          current: index + 1,
          size: 10,
          "officeDTO.id": id,
        })
        .then(({ records, pages }) => {
          list3.value = list3.value.concat(records);
          // 加载状态结束
          loading.value = false;
          // 数据全部加载完成
          if (index + 1 >= pages) {
            finished.value = true;
          }
          index++;
        });
      }
    };
    // 选择人员
    const checked = ref([]);
    const checkboxRefs = ref([]);
    const checkboxGroup = ref(null);
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
      emit("selected", checked.value);
    };
    // 全选
    const checkAll = () => {
      checkboxGroup.value.toggleAll(true);
      emit("selected", checked.value);
    };
    const selectes = (val) => {
      checked.value = val;
      emit("selected", checked.value);
    };

    return {
      // 人员
      onLoad,
      loading,
      finished,
      // 全选
      checkAll,
      toggle,
      checked,
      checkboxRefs,
      checkboxGroup,
      // 单选
      selectes,
      list3,
      list4,
      items,
      clickonlod,
    };
  },
};
</script>

<style lang="less" scoped>
.personList {
  height: 65vh;
  overflow: auto;
  margin: 10px;
  .nav-left {
    float: left;
    width: 50%;
    font-size: 16px;
    border-right: 1px solid #a3a3a3;
    li {
      width: 100%;
      overflow: hidden;
      padding: 5px 0;
      a {
        width: 100%;
        border-bottom: 1px solid #a3a3a3;
      }
    }
  }
}
.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>