Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/components/FormUI/nestedListGroup/index.vue

@@ -1,55 +1,45 @@
 <!-- 嵌套列表 -->
 <template>
-  <div v-if="cover" style="height: 100vh; width: 100vw; position: fixed; top: 0; left: 0;" @click="handleCover"></div>
   <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
-    <div style="position: relative;">
-      <v-text-field
-        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"
-        @focus.self="inputFocus"
-        @update:modelValue="modelValueUpDate"
-      ></v-text-field>
-      <div v-show="show" style="position: absolute; left: 0px">
-        <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">
+    <v-menu :close-on-content-click="closeOnContentClick" @update:modelValue="handleMenuUpdate">
       <template v-slot:activator="{ props }">
         <v-text-field
+          v-bind="props"
+          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="hideDetails || false"
+          @update:modelValue="modelValueUpDate"
         ></v-text-field>
       </template>
       <listGroup
+        :list="item.items"
+        :option="option"
+        :selectValue="value"
+        class="px-1"
+        style="max-height: 258px; border-radius: 5px;"
+        :class="{'detailMargin': detailMargin}"
+        @labelUpdate="labelTxt => labelUpdateDeal(labelTxt)"
+        @clickUpdate="val => clickUpdate(val)"
       ></listGroup>
-    </v-menu> -->
+    </v-menu>
   </div>
 </template>
 
@@ -85,26 +75,45 @@ const clickUpdate = (val) => {
   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 inputFocus = () => {
-  cover.value = true
-  show.value = true
-}
-const handleCover = () => {
-  show.value = false
-  cover.value = false
+const hideDetails = ref(item.hideDetails || false)
+const detailMargin = ref(false)
+
+const handleMenuUpdate = (bool) => {
+  if (item.hideDetails) return
+  if (bool) {
+    hideDetails.value = true
+    detailMargin.value = true
+  } else {
+    hideDetails.value = item.hideDetails || false
+    detailMargin.value = false
+  }
 }
 
-const show = ref(false)
-const cover = ref(false)
-// const top = ref('40px')
+
+// const inputFocus = () => {
+//   if (item.hideDetails) {
+//     hideDetails.value = true
+//     detailMargin.value = true
+//   }
+//   show.value = true
+// }
+// const inputBlur = () => {
+//   if (item.hideDetails) return
+//   hideDetails.value = item.hideDetails || false
+//   detailMargin.value = false
+// }
+
 </script>
 <style lang="scss" scoped>
+.showOnTop {
+  bottom: 62px;
+}
 ::-webkit-scrollbar {
   width: 4px;
   height: 10px;