|
@@ -1,37 +1,56 @@
|
|
|
<!-- 嵌套列表 -->
|
|
|
<template>
|
|
|
+ <div style="height: 100vh; width: 100vw; position: fixed; top: 0; left: 0;" @click="show = false"></div>
|
|
|
<div :style="{ width: item.width ? item.width + 'px' : '100%' }">
|
|
|
- <v-menu :close-on-content-click="closeOnContentClick">
|
|
|
+ <div style="position: relative;">
|
|
|
+ <v-text-field
|
|
|
+ v-model="model_selectLabel"
|
|
|
+ v-bind="props"
|
|
|
+ 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"
|
|
|
+ @click="show = !show"
|
|
|
+ ></v-text-field>
|
|
|
+ <div v-show="show" style="position: absolute; top: 40; left: 0">
|
|
|
+ <v-card class="mt-n5 py-1" elevation="5">
|
|
|
+ <listGroup
|
|
|
+ :list="item.items"
|
|
|
+ :option="option"
|
|
|
+ :selectValue="value"
|
|
|
+ class="px-1"
|
|
|
+ style="max-height: 350px; border-radius: 5px;"
|
|
|
+ @labelUpdate="labelTxt => labelUpdateDeal(labelTxt)"
|
|
|
+ @clickUpdate="val => clickUpdate(val)"
|
|
|
+ ></listGroup>
|
|
|
+ </v-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <v-menu :close-on-content-click="closeOnContentClick">
|
|
|
<template v-slot:activator="{ props }">
|
|
|
<v-text-field
|
|
|
- v-model="value"
|
|
|
- v-bind="props"
|
|
|
- variant="outlined"
|
|
|
- :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-spin-buttons
|
|
|
- :hide-details="item.hideDetails || false"
|
|
|
- @update:modelValue="modelValueUpDate"
|
|
|
></v-text-field>
|
|
|
</template>
|
|
|
- <listGroup :list="item.items" :option="option"></listGroup>
|
|
|
- </v-menu>
|
|
|
+ <listGroup
|
|
|
+ ></listGroup>
|
|
|
+ </v-menu> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -41,16 +60,53 @@ import { defineEmits, ref } from 'vue';
|
|
|
defineOptions({ name:'FormUI-nestedListGroup'})
|
|
|
const propsData = defineProps({item: Object, modelValue: [String, Number]})
|
|
|
const item = propsData.item
|
|
|
-const option = { ...item, items: [] }
|
|
|
-const value = ref(propsData.modelValue)
|
|
|
+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 = (val) => {
|
|
|
- value.value = val
|
|
|
+const modelValueUpDate = (newText) => {
|
|
|
+ if (option.rules) {
|
|
|
+ model_selectLabel.value = static_selectLabel
|
|
|
+ } else {
|
|
|
+ model_selectLabel.value = ''
|
|
|
+ console.log(newText)
|
|
|
+ }
|
|
|
+}
|
|
|
+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]
|
|
|
+ value.value = val[option.itemValue]
|
|
|
emit('update:modelValue', value.value)
|
|
|
emit('change', value.value)
|
|
|
}
|
|
|
-const closeOnContentClick = ref(false) // multiple
|
|
|
+// const closeOnContentClick = ref(false) // multiple
|
|
|
+
|
|
|
+const labelUpdateDeal = (txt) => {
|
|
|
+ static_selectLabel = model_selectLabel.value = txt
|
|
|
+}
|
|
|
+
|
|
|
+const show = ref(false)
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+::-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>
|
|
|
|