manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/components/common/pullDownSelector.vue

<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full pt-2">
      <van-search
        v-model.trim="searchForValue"
        shape="round"
        placeholder="请输入搜索关键词"
        @update:model-value="debouncedSearchOptions"
      />
    </div>
    <div class="flex-1 my-2 overflow-y-auto">
      <template v-if="!multipleChoice">
        <!-- 单选 -->
        <van-radio-group v-model="selectChecked">
          <template v-for="item in renderingOptions">
            <van-cell-group inset>
              <van-cell clickable @click="selectChecked = item.value">
                <template #right-icon>
                  <van-radio :name="item.value" />
                </template>
                <template #title>
                  {{ item.label }}
                </template>
              </van-cell>
            </van-cell-group>
          </template>
        </van-radio-group>
      </template>
      <!-- 多选 -->
      <template v-if="multipleChoice">
        <van-checkbox-group v-model="selectChecked">
          <van-cell-group inset>
            <van-cell
              v-for="(item, index) in renderingOptions"
              clickable
              :key="index"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox
                  :name="item.value"
                  :ref="(el) => (checkboxRefs[index] = el)"
                  @click.stop
                />
              </template>
              <template #title>
                {{ item.label }}
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </template>
    </div>
    <div class="w-full pb-2 px-4">
      <van-button
        type="primary"
        round
        class="w-full"
        :disabled="!selectChecked"
        @click="confirmClick"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUpdate, reactive, watch, onMounted } from "vue";
import { manualCopying, useDebounce } from "@hooks/useCommon"

const props = defineProps({
  options: {
    type: Array,
    required: true,
    default: () => [],
  },
  value: {
    type: [String, Array],
    default: () => null
  },
  multipleChoice: {
    type: Boolean,
    default: () => true,
  },
});

const emit = defineEmits(['change'])

const selectChecked = ref();
const checkboxRefs = ref([]);
const searchForValue = ref("");
const allOptions = ref([])
const renderingOptions = ref([])

const debouncedSearchOptions = useDebounce(searchOptions, 500);

function searchOptions(val) {
  if(!val) {
    renderingOptions.value = manualCopying(allOptions.value)
    return
  }
  const list = manualCopying(allOptions.value)
  renderingOptions.value = list.filter(item => item.label.indexOf(val) > -1)
}

function toggle(index) {
  checkboxRefs.value[index].toggle();
}

function valueTaking(val) {
  if(Array.isArray(val)) {
    return allOptions.value.filter(item => val.includes(item.value)).map(item => item.label)
  } else {
    return allOptions.value.find(item => item.value === val)?.label
  }
}

function confirmClick() {
  emit('change', selectChecked.value, valueTaking(selectChecked.value))
}

onBeforeUpdate(() => {
  checkboxRefs.value = [];
});

onMounted(() => {
  selectChecked.value = props.multipleChoice ? [] : "";
  renderingOptions.value = manualCopying(props.options)
  allOptions.value = manualCopying(props.options)
});
</script>