场所录入弹出页面

src/views/placeManage/ManageList.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="personList">
+    <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 placeRegister from "@/api/placeRegister/placeRegister" 
+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 placeRegister()
+        .list({
+          current: index + 1,
+          size: 10,
+        })
+        .then(({ records }) => {
+          list.value.push(...records);
+          // 加载状态结束
+          loading.value = false;
+          index++;
+          // 数据全部加载完成
+          if (records.length < 10) {
+            finished.value = true;
+          }
+        });
+    };
+    // 搜索
+    const value = ref("");
+    const onSearch = (val) => showToast(val);
+    const onCancel = () => showToast("取消");
+    // 选择人员
+    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,
+      // 搜索
+      value,
+      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>