@netang/quasar 0.0.23 → 0.0.25

package/components/field-table/index.vue

@@ -2,41 +2,56 @@
     <!--:class="fieldFocused ? 'q-field&#45;&#45;float q-field&#45;&#45;focused q-field&#45;&#45;highlighted' : ''"-->
     <q-field
         class="n-field-table"
-        :model-value="modelValue"
+        :model-value="showValue"
         :readonly="readonly"
-        :clearable="clearable && ! multiple"
+        :clearable="clearable && (! multiple || collapseTags)"
+        @focus="onFieldFocus"
+        @blur="onFieldBlur"
         @clear="onFieldClear"
         v-bind="$attrs"
     >
         <template v-slot:control>
 
             <template v-if="multiple">
+                <template v-if="selected.length">
+
+                    <!-- 多选插槽 -->
+                    <slot
+                        name="selected"
+                        :selected="selected"
+                        :remove="onRemoveSelected"
+                        v-if="$slots.selected"
+                    />
 
-                <!-- 多选插槽 -->
-                <slot
-                    name="selected"
-                    :selected="selected"
-                    :remove="onRemoveSelected"
-                    v-if="$slots.selected"
-                />
-
-                <!-- 多选标签 -->
-                <template v-else>
+                    <!-- 显示折叠的值数量 -->
                     <q-chip
-                        v-for="(item, index) in selected"
-                        :key="`options-${index}`"
-                        :label="item[labelKey || rowKey]"
-                        removable
-                        @remove="onRemoveSelected(item, index)"
                         dense
+                        :label="`+${selected.length}`"
+                        v-else-if="collapseTags"
                     />
+
+                    <!-- 多选标签 -->
+                    <template v-else>
+                        <q-chip
+                            v-for="(item, index) in selected"
+                            :key="`options-${index}`"
+                            :label="currentFormatLabel(item)"
+                            dense
+                            removable
+                            @remove="onRemoveSelected(index)"
+                        />
+                    </template>
                 </template>
+
+                <!-- 占位符-->
+                <span class="n-placeholder" v-else-if="placeholder">{{placeholder}}</span>
             </template>
 
             <!-- 显示文字 -->
-            <span v-else>
-                {{showValue}}
-            </span>
+            <span v-else-if="showValue">{{showValue}}</span>
+
+            <!-- 占位符-->
+            <span class="n-placeholder" v-else-if="placeholder">{{placeholder}}</span>
 
             <!-- 筛选输入框 -->
             <input
@@ -62,8 +77,10 @@
             ref="popupRef"
             no-refocus
             no-focus
-            @show="onPopupShow"
+            fit
             @focus="onPopupFocus"
+            @show="onPopupShow"
+            @before-hide="onPopupBeforeHide"
             v-if="! readonly"
         >
             <!-- 快捷表格 -->
@@ -142,7 +159,7 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch, onMounted, onUpdated } from 'vue'
 
 export default {
 
@@ -157,8 +174,6 @@ export default {
     props: {
         // 值
         modelValue: [ String, Number, Array ],
-        // 是否可清除
-        clearable: Boolean,
         // 表格请求路径
         path: String,
         // 表格请求参数
@@ -177,16 +192,10 @@ export default {
             type: String,
             required: true,
         },
-        // 标签字段(必填)
-        labelKey:  {
-            type: String,
-            required: true,
-        },
-        // 表格行唯一键值
-        rowKey: {
-            type: String,
-            default: 'id',
-        },
+        // 标签字段
+        labelKey:  String,
+        // 格式化显示标签
+        formatLabel: Function,
         // 快捷表格显示的字段数组(空为:[值字段, 标签字段])
         showKeys: Array,
         // 隐藏搜索字段数组
@@ -200,10 +209,6 @@ export default {
         // 对话框声明属性
         dialogProps: Object,
 
-        // 占位符
-        placeholder: String,
-        // 是否只读
-        readonly: Boolean,
         // 值是否为数组
         valueArray: Boolean,
         // 关闭对话框
@@ -215,6 +220,14 @@ export default {
         rows: Array,
         // 是否多选
         multiple: Boolean,
+        // 多选模式下是否折叠 Tag
+        collapseTags: Boolean,
+        // 占位符
+        placeholder: String,
+        // 是否可清除
+        clearable: Boolean,
+        // 是否只读
+        readonly: Boolean,
         // 输入防抖(毫秒)
         inputDebounce: {
             type: [ Number, String ],
@@ -244,20 +257,27 @@ export default {
             return utils.isValidObject(slots) ? Object.keys(slots) : []
         })
 
+        /**
+         * 当前标签字段
+         */
+        const currentlabelKey = computed(function() {
+            return props.labelKey || props.valueKey
+        })
+
         /**
          * 当前显示字段
          */
         const currentShowKeys = computed(function() {
-            return utils.isValidArray(props.showKeys)
+            return _.uniq(utils.isValidArray(props.showKeys)
                 ? props.showKeys
-                : [ props.rowKey, props.labelKey ]
+                : [ props.valueKey, currentlabelKey.value ])
         })
 
         /**
          * 当前搜索字段
          */
-        const currentFilterKeys = computed(function() {
-            return props.filterKey || props.labelKey
+        const currentFilterKey = computed(function() {
+            return props.filterKey || currentlabelKey.value
         })
 
         /**
@@ -265,12 +285,11 @@ export default {
          */
         const showValue = computed(function () {
 
-            // 如果是单选
-            if (! props.multiple && utils.isValidArray(selected.value)) {
-                return selected.value[0][props.labelKey || props.rowKey]
-            }
-
-            return ''
+            // 如果有已选数据
+            return utils.isValidArray(selected.value)
+                // 取已选数据第一条
+                ? currentFormatLabel(selected.value[0])
+                : ''
         })
 
         // ==========【数据】============================================================================================
@@ -299,7 +318,7 @@ export default {
             // 获取表格列数据
             columns: getTableColumns(),
             // 表格行唯一键值
-            rowKey: props.rowKey,
+            rowKey: props.valueKey,
             // 行数据
             rows: props.rows,
             // 选择类型, 可选值 single multiple none
@@ -333,6 +352,9 @@ export default {
         // 是否显示对话框
         const showDialog = ref(false)
 
+        // 是否显示弹出层
+        const showPopup = ref(false)
+
         // 当前已选数据
         const selected = ref([...$table.tableSelected.value])
 
@@ -366,7 +388,7 @@ export default {
             // 已选数据值数组
             const selectedValues = utils.isValidArray(selected.value)
                 // 如果有已选数据
-                ? _.uniq(selected.value.map(e => e[props.rowKey]))
+                ? _.uniq(selected.value.map(e => e[props.valueKey]))
                 // 否则为空
                 : []
 
@@ -374,7 +396,7 @@ export default {
             const removeValues = selectedValues.filter(e => values.indexOf(e) === -1)
             if (removeValues.length) {
                 utils.forEachRight(selected.value, function (item, index) {
-                    if (removeValues.indexOf(item[props.rowKey]) > -1) {
+                    if (removeValues.indexOf(item[props.valueKey]) > -1) {
                         selected.value.splice(index, 1)
                     }
                 })
@@ -395,13 +417,17 @@ export default {
             if (val !== selected.value) {
                 // 设置选择数据
                 selected.value = val
+
+                // 检查值更新
+                checkModelValueChange()
             }
-            // 检查值更新
-            checkModelValueChange()
 
             // 设置输入框焦点
             setInputFocus()
 
+            // 设置输入框文字选中
+            setInputSelection()
+
         }, {
             // 深度监听
             deep: true
@@ -412,8 +438,19 @@ export default {
          */
         watch(selected, function(val) {
             if (val !== props.selected) {
+
+                // 更新选择数据
                 emit('update:selected', val)
+
+                // 检查值更新
+                checkModelValueChange()
             }
+
+            // 设置输入框焦点
+            setInputFocus()
+
+            // 设置输入框文字选中
+            setInputSelection()
         }, {
             // 深度监听
             deep: true,
@@ -427,10 +464,11 @@ export default {
             // 取消延迟执行
             sleep.cancel()
 
-            if (utils.isValidValue(val)) {
+            const hasValue = utils.isValidValue(val)
+            if (hasValue) {
 
                 const n_search = {}
-                n_search[currentFilterKeys.value] = [
+                n_search[currentFilterKey.value] = [
                     {
                         // 比较类型
                         type: dicts.SEARCH_TYPE__LIKE,
@@ -450,12 +488,34 @@ export default {
             // 延迟执行
             await sleep(props.inputDebounce)
 
+            if (
+                // 如果弹出层是隐藏的
+                ! showPopup.value
+                // 如果输入框有值
+                && hasValue
+            ) {
+                // 显示弹出层
+                popupRef.value.show()
+            }
+
             // 表格重新加载
             await $table.tableReload()
         })
 
         // ==========【方法】=============================================================================================
 
+        /**
+         * 当前格式化显示标签
+         */
+        function currentFormatLabel(item) {
+            // 如果有格式化显示标签方法
+            return _.isFunction(props.formatLabel)
+                // 执行格式化显示标签方法
+                ? props.formatLabel(item)
+                // 否则显示该值的标签字段
+                : item[currentlabelKey.value]
+        }
+
         /**
          * 格式化值
          */
@@ -497,7 +557,7 @@ export default {
                         // 查看字段
                         n_view: {
                             // 查看字段
-                            field: props.rowKey,
+                            field: props.valueKey,
                             // 查看值
                             value,
                         },
@@ -548,9 +608,9 @@ export default {
                 ? (
                     props.multiple
                         // 如果是多选
-                        ? selected.value.map(e => e[props.rowKey])
+                        ? selected.value.map(e => e[props.valueKey])
                         // 否则是单选
-                        : [ selected.value[0][props.rowKey] ]
+                        : [ selected.value[0][props.valueKey] ]
                 )
                 // 否则为空
                 : []
@@ -642,10 +702,43 @@ export default {
         /**
          * 移除已选数据
          */
-        function onRemoveSelected(item, index) {
+        function onRemoveSelected(index) {
             selected.value.splice(index, 1)
         }
 
+        /**
+         * 字段获取焦点触发
+         */
+        function onFieldFocus(e) {
+
+            // 停止冒泡
+            e.stopPropagation()
+
+            // 设置输入框焦点
+            setInputFocus()
+
+            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
+        }
+
+        /**
+         * 字段失去焦点触发
+         */
+        function onFieldBlur(e) {
+
+            // 停止冒泡
+            e.stopPropagation()
+
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果没有显示弹出层
+                && ! showPopup.value
+            ) {
+                // 清空输入框值
+                inputValue.value = ''
+            }
+        }
+
         /**
          * 字段清空触发
          */
@@ -654,34 +747,47 @@ export default {
             // 清空快捷表格已选数据
             selected.value = []
 
-            // 关闭弹出层
+            // 隐藏弹出层
             popupRef.value.hide()
         }
 
         /**
-         * 弹出层显示回调
+         * 弹出层获取焦点触发
          */
-        function onPopupShow() {
+        function onPopupFocus(e) {
 
-            // 表格加载(只加载一次)
-            $table.tableLoad()
+            // 停止冒泡
+            e.stopPropagation()
 
             // 设置输入框焦点
             setInputFocus()
+
+            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
         }
 
         /**
-         * 弹出层获取焦点触发
+         * 弹出层显示回调
          */
-        function onPopupFocus(e) {
+        function onPopupShow() {
 
-            // 停止冒泡
-            e.stopPropagation()
+            // 显示弹出层
+            showPopup.value = true
 
             // 设置输入框焦点
             setInputFocus()
 
-            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
+            // 表格加载(只加载一次)
+            $table.tableLoad()
+                .finally()
+        }
+
+        /**
+         * 弹出层隐藏前显示回调
+         */
+        function onPopupBeforeHide() {
+
+            // 隐藏弹出层
+            showPopup.value = false
         }
 
         /**
@@ -692,6 +798,7 @@ export default {
             // 设置当前已选数据
             $table.tableSelected.value = [...selected.value]
 
+            // 隐藏弹出层
             popupRef.value.hide()
         }
 
@@ -699,7 +806,10 @@ export default {
          * 对话框显示回调
          */
         function onDialogShow() {
+
+            // 表格加载(只加载一次)
             $table.tableLoad()
+                .finally()
         }
 
         /**
@@ -710,7 +820,12 @@ export default {
             let isReload = true
 
             // 清空输入框值
-            if (inputValue.value) {
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果有输入框值
+                && inputValue.value
+            ) {
                 // 此时清空输入框后, 会自动刷新表格
                 inputValue.value = ''
 
@@ -741,7 +856,7 @@ export default {
             if (props.multiple) {
 
                 const opt = {}
-                opt[props.rowKey] = row[props.rowKey]
+                opt[props.valueKey] = row[props.valueKey]
 
                 // 获取当前数据索引
                 const itemIndex = _.findIndex(selected.value, opt)
@@ -760,15 +875,40 @@ export default {
             // 否则为单选
             } else {
                 selected.value = [ row ]
+
+                // 隐藏弹出层
                 popupRef.value.hide()
             }
         }
 
+        /**
+         * 设置输入框文字选中
+         */
+        function setInputSelection() {
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果有输入框节点
+                && inputRef.value
+                // 如果输入框有值
+                && inputValue.value.length
+            ) {
+                // 全选文字
+                inputRef.value.select()
+                // inputRef.value.setSelectionRange(0, inputValue.value.length)
+            }
+        }
+
         /**
          * 设置输入框焦点
          */
         function setInputFocus() {
-            if (inputRef.value) {
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果有输入框节点
+                && inputRef.value
+            ) {
                 inputRef.value.focus()
             }
         }
@@ -784,6 +924,15 @@ export default {
             await onLoadSelected()
         })
 
+        /**
+         * 在组件因为响应式状态变更而更新其 DOM 树之后调用
+         */
+        onUpdated(function () {
+            if (_.has(popupRef.value, 'currentComponent.ref.updatePosition')) {
+                popupRef.value.currentComponent.ref.updatePosition()
+            }
+        })
+
         // ==========【返回】=============================================================================================
 
         return {
@@ -792,6 +941,8 @@ export default {
 
             // 插槽标识
             slotNames,
+            // 当前标签字段
+            currentlabelKey,
             // 显示值
             showValue,
 
@@ -808,15 +959,24 @@ export default {
             // 当前表格列数据
             columns,
 
+            // 当前格式化显示标签
+            currentFormatLabel,
             // 移除已选数据
             onRemoveSelected,
+
+            // 字段获取焦点触发
+            onFieldFocus,
+            // 字段失去焦点触发
+            onFieldBlur,
             // 字段清空触发
             onFieldClear,
 
-            // 弹出层显示回调
-            onPopupShow,
             // 弹出层获取焦点触发
             onPopupFocus,
+            // 弹出层显示回调
+            onPopupShow,
+            // 弹出层隐藏前显示回调
+            onPopupBeforeHide,
 
             // 对话框显示前回调
             onDialogBeforeShow,

package/components/field-tree/index.vue

@@ -1,35 +1,65 @@
 <template>
     <q-field
-        :model-value="modelValue"
-        @clear="onClear"
+        class="n-field-tree"
+        :model-value="showValue"
+        :readonly="readonly"
+        :clearable="clearable && (! multiple || collapseTags)"
+        @focus="onFieldFocus"
+        @blur="onFieldBlur"
+        @clear="onFieldClear"
         v-bind="$attrs"
     >
         <template v-slot:control>
 
-            <!-- 如果有值 -->
-            <template v-if="treeTickedNodes.length">
-
-                <!-- 如果显示单个值 -->
-                <div v-if="! multiple">{{treeTickedNodes[0].label}}</div>
-
-                <!-- 显示折叠的值数量 -->
-                <div v-else-if="collapseTags">
-                    <q-chip dense>+{{treeTickedNodes.length}}</q-chip>
-                </div>
-
-                <!-- 否则显示多个值 -->
-                <q-chip
-                    v-for="(item, itemIndex) in treeTickedNodes"
-                    :key="`item-${item.id}`"
-                    @remove="onRemoveItem(itemIndex)"
-                    removable
-                    dense
-                    v-else
-                >{{item.label}}</q-chip>
+            <template v-if="multiple">
+
+                <template v-if="treeTickedNodes.length">
+
+                    <!-- 多选插槽 -->
+                    <slot
+                        name="selected"
+                        :ticked="treeTickedNodes"
+                        :remove="onRemoveItem"
+                        v-if="$slots.ticked"
+                    />
+
+                    <!-- 显示折叠的值数量 -->
+                    <q-chip
+                        dense
+                        :label="`+${treeTickedNodes.length}`"
+                        v-else-if="collapseTags"
+                    />
+
+                    <!-- 多选标签 -->
+                    <template v-else>
+                        <q-chip
+                            v-for="(item, index) in treeTickedNodes"
+                            :key="`item-${index}`"
+                            :label="item.label"
+                            dense
+                            removable
+                            @remove="onRemoveItem(index)"
+                        />
+                    </template>
+                </template>
+
+                <!-- 占位符-->
+                <span class="n-placeholder" v-else-if="placeholder">{{placeholder}}</span>
             </template>
 
-            <!-- 否则显示占位符 -->
-            <div class="n-placeholder" v-else-if="placeholder">{{placeholder}}</div>
+            <!-- 显示文字 -->
+            <span v-else-if="showValue">{{showValue}}</span>
+
+            <!-- 占位符-->
+            <span class="n-placeholder" v-else-if="placeholder">{{placeholder}}</span>
+
+            <!-- 筛选输入框 -->
+            <input
+                ref="inputRef"
+                class="q-field__input q-placeholder col q-field__input--padding"
+                v-model="inputValue"
+                v-if="filter"
+            />
         </template>
 
         <template v-slot:before v-if="$slots.before">
@@ -50,6 +80,10 @@
             ref="popupRef"
             no-refocus
             no-focus
+            fit
+            @focus="onPopupFocus"
+            @show="onPopupShow"
+            @before-hide="onPopupBeforeHide"
             v-if="! readonly"
         >
             <q-card>
@@ -58,6 +92,7 @@
                     class="q-pa-sm q-pr-md"
                     style="min-width:260px;"
                     ref="treeRef"
+                    :filter="inputValue"
                     :nodes="nodes"
                     :node-key="nodeKey"
                     :label-key="labelKey"
@@ -83,7 +118,7 @@
 </template>
 
 <script>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted, onUpdated } from 'vue'
 
 export default {
 
@@ -96,14 +131,10 @@ export default {
      * 声明属性
      */
     props: {
-        // 是否只读
-        readonly: Boolean,
         // 值
         modelValue: [Array, String, Number],
         // 树展开节点
         expanded: Array, // v-model:expanded
-        // 占位符
-        placeholder: String,
         // 节点数组
         nodes: Array,
         // 唯一的节点 id
@@ -127,8 +158,17 @@ export default {
             type: Boolean,
             default: true,
         },
+
+        // 是否开启筛选
+        filter: Boolean,
         // 多选模式下是否折叠 Tag
         collapseTags: Boolean,
+        // 占位符
+        placeholder: String,
+        // 是否可清除
+        clearable: Boolean,
+        // 是否只读
+        readonly: Boolean,
     },
 
     /**
@@ -141,18 +181,53 @@ export default {
     /**
      * 组合式
      */
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
+        })
+
+        /**
+         * 显示值
+         */
+        const showValue = computed(function () {
+
+            // 如果有已选数据
+            return utils.isValidArray(treeTickedNodes.value)
+                // 取已选数据第一条的标签
+                ? treeTickedNodes.value[0].label
+                : ''
+        })
 
         // ==========【数据】============================================================================================
 
+
+        // 输入框节点
+        const inputRef = ref(null)
+
+        // 输入框值
+        const inputValue = ref('')
+
         // 弹出层节点
         const popupRef = ref(null)
+
+        // 是否显示弹出层
+        const showPopup = ref(false)
+
         // 树节点
         const treeRef = ref(null)
+
         // 树选择数据
         const treeTicked = ref(formatModelValue())
+
         // tree all
         let treeAll = getTreeAll()
+
         // 树展开数据
         const treeExpanded = ref(getExpanded())
 
@@ -202,7 +277,31 @@ export default {
          * 监听声明值
          */
         watch(()=>props.modelValue, function() {
+
+            // 设置选中数据
             treeTicked.value = formatModelValue()
+
+            // 设置输入框焦点
+            setInputFocus()
+
+            // 设置输入框文字选中
+            setInputSelection()
+        })
+
+        /**
+         * 监听输入框值
+         */
+        watch(inputValue, function (val) {
+
+            if (
+                // 如果弹出层是隐藏的
+                ! showPopup.value
+                // 如果输入框有值
+                && utils.isValidValue(val)
+            ) {
+                // 显示弹出层
+                popupRef.value.show()
+            }
         })
 
         // ==========【方法】=============================================================================================
@@ -370,16 +469,137 @@ export default {
         }
 
         /**
-         * 清空
+         * 字段获取焦点触发
          */
-        function onClear() {
+        function onFieldFocus(e) {
+
+            // 停止冒泡
+            e.stopPropagation()
+
+            // 设置输入框焦点
+            setInputFocus()
+
+            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
+        }
+
+        /**
+         * 字段失去焦点触发
+         */
+        function onFieldBlur(e) {
+
+            // 停止冒泡
+            e.stopPropagation()
+
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果没有显示弹出层
+                && ! showPopup.value
+            ) {
+                // 清空输入框值
+                inputValue.value = ''
+            }
+        }
+
+        /**
+         * 字段清空触发
+         */
+        function onFieldClear() {
+
+            // 更新值
             emit('update:modelValue', props.multiple ? [] : null)
+
+            // 隐藏弹出层
             popupRef.value.hide()
         }
 
+        /**
+         * 弹出层获取焦点触发
+         */
+        function onPopupFocus(e) {
+
+            // 停止冒泡
+            e.stopPropagation()
+
+            // 设置输入框焦点
+            setInputFocus()
+
+            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
+        }
+
+        /**
+         * 弹出层显示回调
+         */
+        function onPopupShow() {
+
+            // 显示弹出层
+            showPopup.value = true
+
+            // 设置输入框焦点
+            setInputFocus()
+        }
+
+        /**
+         * 弹出层隐藏前显示回调
+         */
+        function onPopupBeforeHide() {
+
+            // 隐藏弹出层
+            showPopup.value = false
+        }
+
+        /**
+         * 设置输入框文字选中
+         */
+        function setInputSelection() {
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果有输入框节点
+                && inputRef.value
+                // 如果输入框有值
+                && inputValue.value.length
+            ) {
+                // 全选文字
+                inputRef.value.select()
+                // inputRef.value.setSelectionRange(0, inputValue.value.length)
+            }
+        }
+
+        /**
+         * 设置输入框焦点
+         */
+        function setInputFocus() {
+            if (
+                // 如果开启筛选
+                props.filter
+                // 如果有输入框节点
+                && inputRef.value
+            ) {
+                inputRef.value.focus()
+            }
+        }
+
+        // ==========【生命周期】=========================================================================================
+
+        /**
+         * 在组件因为响应式状态变更而更新其 DOM 树之后调用
+         */
+        onUpdated(function () {
+            if (_.has(popupRef.value, 'currentComponent.ref.updatePosition')) {
+                popupRef.value.currentComponent.ref.updatePosition()
+            }
+        })
+
         // ==========【返回】=============================================================================================
 
         return {
+            // 显示值
+            showValue,
+            // 输入框节点
+            inputRef,
+            // 输入框值
+            inputValue,
             // 弹出层节点
             popupRef,
             // 树节点
@@ -397,11 +617,35 @@ export default {
             onUpdateTicked,
             // 点击节点
             onNode,
-            // 清空
-            onClear,
             // 移除单个
             onRemoveItem,
+
+            // 字段获取焦点触发
+            onFieldFocus,
+            // 字段失去焦点触发
+            onFieldBlur,
+            // 字段清空触发
+            onFieldClear,
+
+            // 弹出层获取焦点触发
+            onPopupFocus,
+            // 弹出层显示回调
+            onPopupShow,
+            // 弹出层隐藏前显示回调
+            onPopupBeforeHide,
         }
     },
 }
 </script>
+
+<style lang="scss">
+@import "@/assets/sass/var.scss";
+
+.n-field-tree {
+    .q-field__input--padding {
+        padding-left: 4px;
+        min-width: 50px !important;
+        cursor: text;
+    }
+}
+</style>

package/components/search/index.vue

@@ -2,7 +2,7 @@
     <div class="flex column absolute-full" v-if="utils.isValidArray(options)">
         <q-scroll-area class="n-flex-1">
 
-            <div class="n-search q-pa-sm q-pt-md q-gutter-md">
+            <div class="n-search q-pa-sm q-pt-sm q-gutter-sm">
 
                 <template
                     v-for="(item, itemIndex) in options"
@@ -110,13 +110,23 @@
                                 v-model="modelValue[itemIndex][index].value"
                                 dense
                                 outlined
-                                clearable
-                                accordion
                                 :multiple="multiple"
                                 v-bind="item.tree"
                                 v-else-if="item.searchType === 'tree'"
                             />
 
+                            <!-- 下拉表格 -->
+                            <n-field-table
+                                class="n-field-fieldset"
+                                :label="label"
+                                v-model="modelValue[itemIndex][index].value"
+                                dense
+                                outlined
+                                :multiple="multiple"
+                                v-bind="item.table"
+                                v-else-if="item.searchType === 'table'"
+                            />
+
                         </n-search-item>
                     </template>
                 </template>

package/components/search-item/index.vue

@@ -2,10 +2,11 @@
     <div class="n-search__item n-field-group">
 
         <!-- 比较1 -->
-        <div class="n-field-group row">
+        <div class="n-field-group row no-wrap">
 
             <!-- 比较类型1 -->
             <q-select
+                class="n-field-group__select"
                 v-model="modelValue[0].type"
                 :options="compareOptions1"
                 map-options
@@ -41,6 +42,7 @@
         >
             <!-- 比较类型2 -->
             <q-select
+                class="n-field-group__select"
                 v-model="modelValue[1].type"
                 :options="[
                     { label: '<', value: dicts.SEARCH_TYPE__LT },
@@ -205,7 +207,12 @@ export default {
             // 第三个子节点
             &:nth-child(3) {
                 .q-field__control {
+                    height: 100% !important;
                     background-color: rgba(var(--n-reverse-color-rgb), 0.04);
+
+                    .q-field__marginal {
+                        height: 100% !important;
+                    }
                 }
             }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/sass/quasar/field.scss

@@ -137,15 +137,10 @@
     &.q-field {
         &--labeled {
             .q-field__prefix,
-            .q-field__suffix {
-                padding-top: 0 !important;
-                padding-bottom: 0 !important;
-            }
-
-
+            .q-field__suffix,
             .q-field__native {
-                padding-top: 0 !important;
-                padding-bottom: 0 !important;
+                padding-top: 5px !important;
+                padding-bottom: 5px !important;
             }
 
             .q-field__label {
@@ -157,6 +152,12 @@
         }
 
         &--float {
+            .q-field__prefix,
+            .q-field__suffix,
+            .q-field__native {
+                padding-top: 7px !important;
+            }
+
             .q-field__label {
                 transform: translateY(-120%) scale(0.85) !important;
                 background-color: var(--n-mode-color) !important;

package/utils/$search.js

@@ -194,12 +194,13 @@ async function getOptions(rawSearchOptions, format) {
                     newItem.select.options = await utils.runAsync(newItem.select.options)()
                 }
 
-            // 如果有树选项
+            // 如果有树选项(调用的是 <n-field-tree> 组件)
             } else if (_.has(newItem, 'tree')) {
                 newItem.searchType = 'tree'
                 newItem.tree = Object.assign({
                     nodes: [],
                     accordion: true,
+                    clearable: true,
                 }, newItem.tree)
 
                 // 如果节点数组是方法
@@ -208,6 +209,20 @@ async function getOptions(rawSearchOptions, format) {
                     newItem.tree.nodes = await utils.runAsync(newItem.tree.nodes)()
                 }
 
+            // 如果有表格选项(调用的是 <n-field-table> 组件)
+            } else if (_.has(newItem, 'table')) {
+                newItem.searchType = 'table'
+                newItem.table = Object.assign({
+                    // 值字段(必填)
+                    valueKey: newItem.name,
+                    // 是否可清除
+                    clearable: true,
+                    // 是否开启筛选
+                    filter: true,
+                }, newItem.table)
+
+                console.log('111', newItem.table)
+
             // 否则为输入框
             } else {
                 newItem.searchType = 'input'

package/utils/$table.js

@@ -22,8 +22,8 @@ function create(params) {
     const $q = useQuasar()
 
     // 每页显示行数选项
-    // const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
-    const rowsPerPageOptions = [3, 40, 50, 100, 200, 500, 1000]
+    const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
+    // const rowsPerPageOptions = [3, 40, 50, 100, 200, 500, 1000]
 
     // 获取参数
     const o = _.merge({
@@ -556,8 +556,6 @@ function create(params) {
             }
         })
 
-        console.log('newValue', newValue)
-
         // 还原表格搜索数据
         tableSearchValue.value = _.cloneDeep(newValue)
 
@@ -742,29 +740,27 @@ function create(params) {
             return
         }
 
-        // 如果选择类型为单选
-        if (o.selection === 'single') {
-            tableSelected.value = [ row ]
-
-        // 否则为多选
-        } else {
+        const opt = {}
+        opt[o.rowKey] = row[o.rowKey]
 
-            const opt = {}
-            opt[o.rowKey] = row[o.rowKey]
+        // 获取当前数据索引
+        const itemIndex = _.findIndex(tableSelected.value, opt)
 
-            // 获取当前数据索引
-            const itemIndex = _.findIndex(tableSelected.value, opt)
+        // 如果不存在, 则添加
+        if (itemIndex === -1) {
 
-            // 如果不存在
-            if (itemIndex === -1) {
-                // 则添加
-                tableSelected.value.push(row)
+            // 如果选择类型为单选
+            if (o.selection === 'single') {
+                tableSelected.value = [ row ]
 
-            // 否则
+            // 否则为多选
             } else {
-                // 删除
-                tableSelected.value.splice(itemIndex, 1)
+                tableSelected.value.push(row)
             }
+
+        // 否则删除
+        } else {
+            tableSelected.value.splice(itemIndex, 1)
         }
     }
 
@@ -898,7 +894,7 @@ function create(params) {
 }
 
 /**
- * 获取配置
+ * 获取表格配置
  */
 function config(routePath, path, defaultValue) {
     return _.get(tablesConfig, utils.slash(routePath, 'start', false) + (path ? '.' + path : ''), defaultValue)
@@ -910,6 +906,6 @@ function config(routePath, path, defaultValue) {
 utils.$table = {
     // 创建表格
     create,
-    // 获取配置
+    // 获取表格配置
     config,
 }