menduner/src/components/FormUI/nestedListGroup/index.vue

<!-- 嵌套列表 -->
<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <v-text-field
      v-bind="props"
      id="menu-activator"
      v-model="model_selectLabel"
      variant="outlined" hide-spin-buttons
      :density="item.dense || 'compact'"
      :type="item.type"
      :rules="item.rules"
      :disabled="item.disabled"
      :style="{width: item.width}"
      :color="item.color || 'primary'"
      :label="item.label"
      :placeholder="item.placeholder || item.label"
      :autofocus="item.autofocus"
      :required="item.required"
      :class="item.class"
      :suffix="item.suffix"
      :append-icon="item.appendIcon"
      :append-inner-icon="item.appendInnerIcon"
      :clearable="item.clearable"
      :readonly="item.readonly"
      :counter="item.counter"
      :prepend-inner-icon="item.prependInnerIcon"
      :hide-details="item.hideDetails || false"
      @update:modelValue="modelValueUpDate"
    >
    </v-text-field>
    <v-menu activator="#menu-activator" :close-on-content-click="closeOnContentClick">
      <listGroup
        :list="item.items"
        :option="option"
        :selectValue="value"
        class="px-1"
        style="max-height: 258px; border-radius: 5px;"
        @labelUpdate="labelTxt => labelUpdateDeal(labelTxt)"
        @clickUpdate="val => clickUpdate(val)"
      ></listGroup>
    </v-menu>
  </div>
</template>

<script setup>
import listGroup from './components/listGroup'
import { ref } from 'vue';
defineOptions({ name:'FormUI-nestedListGroup'})
const propsData = defineProps({item: Object, modelValue: [String, Number]})
const item = propsData.item
const option = {
  ...item,
  itemValue: item.itemValue || 'value',
  itemText: item.itemText || 'label',
  multiply: item.multiply || false, // 多选（待开发
  selectLevel: item.selectLevel || -1, // 可选层级，-1代表只能选最后一级
  relate: item.relate || false,
  items: []
}
const emit = defineEmits(['update:modelValue', 'change'])
const modelValueUpDate = () => {
  model_selectLabel.value = option.rules ? static_selectLabel : '' // 必填时不可删除，非必填时则直接删除
}
let static_selectLabel = ''; const model_selectLabel = ref('')
const value = ref(propsData.modelValue) // selectValue // modelValue
const clickUpdate = (val) => {
  static_selectLabel = model_selectLabel.value = val[option.itemText || 'label']
  value.value = val[option.itemValue || 'value']
  emit('update:modelValue', value.value)
  emit('change', value.value)
}
const closeOnContentClick = ref(false) // multiple

// 回显label
const chosen = ref(null)
const traverse = (nodes) => {
  for (const node of nodes) {
    if (node[option.itemValue || value] === value.value) {
      chosen.value = node
    }
    if (node.children) {
      traverse(node.children)
    }
  }
}
if (item?.items?.length && value.value) traverse(item.items)
if (chosen.value) clickUpdate(chosen.value)
</script>
<style lang="scss" scoped>
.showOnTop {
  bottom: 62px;
}
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  // display: none;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>