@netang/quasar 0.0.40 → 0.0.42

package/components/field-date/index.vue

@@ -151,8 +151,10 @@ export default {
      * 声明属性
      */
     props: {
-        // 值
-        modelValue: [String, Number],
+        // 值 v-model
+        modelValue: {
+            required: true,
+        },
         // 结束值
         end: [String, Number],
         // 占位符
@@ -164,6 +166,8 @@ export default {
         },
         // 是否截止时间
         endDate: Boolean,
+        // 是否显示秒
+        showSecond: Boolean,
         // 显示在输入框中的格式
         format: String,
         // 绑定值的格式(默认:秒时间戳)

package/components/field-table/index.vue

@@ -1,4 +1,16 @@
 <template>
+
+    <!-- 如果有默认插槽 -->
+    <template v-if="$slots.default">
+        <slot
+            :showValue="showValue"
+            :selected="selected"
+            :onRemove="onRemoveSelected"
+            :onShowDialog="onShowDialog"
+            :onClear="onFieldClear"
+        />
+    </template>
+
     <!--:class="fieldFocused ? 'q-field&#45;&#45;float q-field&#45;&#45;focused q-field&#45;&#45;highlighted' : ''"-->
     <q-field
         class="n-field-table"
@@ -10,6 +22,7 @@
         @blur="onFieldBlur"
         @clear="onFieldClear"
         v-bind="$attrs"
+        v-else
     >
         <template v-slot:control>
 
@@ -69,7 +82,7 @@
             <q-icon
                 class="cursor-pointer"
                 name="search"
-                @click.prevent.stop="showDialog = true"
+                @click.prevent.stop="onShowDialog"
             />
         </template>
 
@@ -164,6 +177,11 @@ import { ref, computed, watch, onUpdated } from 'vue'
 
 export default {
 
+    /**
+     * 关闭组件 attribute 透传行为
+     */
+    inheritAttrs: false,
+
     /**
      * 标识
      */
@@ -175,7 +193,6 @@ export default {
     props: {
         // 值 v-model
         modelValue: {
-            type: [ String, Number, Array ],
             required: true,
         },
         // 值字段(必填)
@@ -205,8 +222,10 @@ export default {
         query: Object,
         // 附加请求数据
         data: Object,
-        // 不加载已选数据
-        noLoadSelected: Boolean,
+        // 初始不加载已选数据
+        noFirstLoadSelected: Boolean,
+        // 更新值时不加载已选数据
+        noUpdateLoadSelected: Boolean,
         // 格式化显示标签
         formatLabel: Function,
         // 快捷表格显示的字段数组(空为:[值字段, 标签字段])
@@ -433,8 +452,8 @@ export default {
                     // 需增加的值
                     if (newSelected.length) {
 
-                        // 如果不加载已选数据
-                        if (props.noLoadSelected) {
+                        // 如果更新值时不加载已选数据
+                        if (props.noUpdateLoadSelected) {
                             // 请求选择数据
                             _selected.push(...newSelected.map(e => setSelectedItem(e)))
                         } else {
@@ -505,8 +524,8 @@ export default {
                 // 如果输入框有值
                 && hasValue
             ) {
-                // 显示弹出层
-                popupRef.value.show()
+                // 显示弹出层节点
+                showPopupRef()
             }
 
             // 表格重新加载
@@ -523,8 +542,8 @@ export default {
             if (
                 // 如果值类型不是数组对象
                 props.valueType !== 'arrayObject'
-                // 如果不加载已选数据
-                && ! props.noLoadSelected
+                // 如果初始加载已选数据
+                && ! props.noFirstLoadSelected
                 // 如果有请求路由路径
                 && routePath
             ) {
@@ -630,8 +649,8 @@ export default {
             if (
                 // 非初始化
                 ! isFirst
-                // 或非加载已选数据
-                || props.noLoadSelected
+                // 或初始不加载已选数据
+                || props.noFirstLoadSelected
                 // 或没有路由路径
                 || ! routePath
             ) {
@@ -842,8 +861,32 @@ export default {
             // 清空快捷表格已选数据
             emitModelValue([])
 
-            // 隐藏弹出层
-            popupRef.value.hide()
+            // 隐藏弹出层节点
+            hidePopupRef()
+        }
+
+        /**
+         * 显示弹出层节点
+         */
+        function showPopupRef() {
+
+            // 如果有弹出层节点
+            if (popupRef.value) {
+                // 显示弹出层
+                popupRef.value.show()
+            }
+        }
+
+        /**
+         * 隐藏弹出层节点
+         */
+        function hidePopupRef() {
+
+            // 如果有弹出层节点
+            if (popupRef.value) {
+                // 隐藏弹出层
+                popupRef.value.hide()
+            }
         }
 
         /**
@@ -862,6 +905,14 @@ export default {
                 .finally()
         }
 
+        /**
+         * 显示对话框
+         */
+        function onShowDialog() {
+            // 显示对话框
+            showDialog.value = true
+        }
+
         /**
          * 对话框显示前回调
          */
@@ -870,8 +921,8 @@ export default {
             // 设置当前已选数据
             $table.tableSelected.value = [...selected.value]
 
-            // 隐藏弹出层
-            popupRef.value.hide()
+            // 隐藏弹出层节点
+            hidePopupRef()
         }
 
         /**
@@ -948,8 +999,8 @@ export default {
                 // 触发更新值
                 emitModelValue([ row ])
 
-                // 隐藏弹出层
-                popupRef.value.hide()
+                // 隐藏弹出层节点
+                hidePopupRef()
             }
         }
 
@@ -991,7 +1042,10 @@ export default {
          * 在组件因为响应式状态变更而更新其 DOM 树之后调用
          */
         onUpdated(function () {
-            if (_.has(popupRef.value, 'currentComponent.ref.updatePosition')) {
+            if (
+                popupRef.value
+                && _.has(popupRef.value, 'currentComponent.ref.updatePosition')
+            ) {
                 popupRef.value.currentComponent.ref.updatePosition()
             }
         })
@@ -1037,6 +1091,8 @@ export default {
             // 弹出层显示回调
             onPopupShow,
 
+            // 显示对话框
+            onShowDialog,
             // 对话框显示前回调
             onDialogBeforeShow,
             // 对话框隐藏后回调

package/components/field-tree/index.vue

@@ -131,8 +131,10 @@ export default {
      * 声明属性
      */
     props: {
-        // 值
-        modelValue: [Array, String, Number],
+        // 值 v-model
+        modelValue: {
+            required: true,
+        },
         // 树展开节点
         expanded: Array, // v-model:expanded
         // 节点数组

package/components/input-format/index.vue

@@ -28,9 +28,9 @@ export default {
      * 声明属性
      */
     props: {
-        // 值
+        // 值 v-model
         modelValue: {
-            required: false,
+            required: true,
         },
         // 值是否为数组
         valueArray: Boolean,

package/components/input-number/index.vue

@@ -84,9 +84,9 @@ export default {
      * 声明属性
      */
     props: {
-        // 值
+        // 值 v-model
         modelValue: {
-            required: false
+            required: true,
         },
         // 最小值
         min: {

package/components/search-item/index.vue

@@ -39,7 +39,7 @@
         <!-- 比较2(类型为 > / >=) -->
         <div
             class="n-field-group row"
-            v-if="data.compareOptions2.length"
+            v-if="data.compareOptions2.length && utils.indexOf([dicts.SEARCH_TYPE__GT, dicts.SEARCH_TYPE__GTE], modelValue[0].compare) > -1"
         >
             <!-- 比较类型2 -->
             <q-select

package/components/splitter/index.vue

@@ -11,13 +11,21 @@
             v-for="slotName in slotNames"
             v-slot:[slotName]
         >
-            <slot :name="slotName" />
+            <slot
+                :name="slotName"
+                :before="currentBefore"
+                :after="currentAfter"
+                :toggleBefore="toggleBefore"
+                :toggleAfter="toggleAfter"
+            />
         </template>
     </q-splitter>
 </template>
 
 <script>
 import { computed, ref, watch, inject } from 'vue'
+import { useQuasar } from 'quasar'
+
 import { NPowerKey } from '../../utils/symbols'
 
 export default {
@@ -31,24 +39,30 @@ export default {
      * 声明属性
      */
     props: {
-        // 值
+        // 值 v-model
         modelValue: {
             type: Number,
             required: true,
         },
-        // 显示前置插槽
-        showBefore: {
+        // 显示前置插槽 v-model:before
+        // 注意: 如果非双向绑定, 如 :before 并不会影响内部值变化, 仅做初始值使用
+        before: {
             type: Boolean,
             default: true,
         },
-        // 显示后置插槽
-        showAfter: {
+        // 显示后置插槽 v-model:after
+        // 注意: 如果非双向绑定, 如 :after 并不会影响内部值变化, 仅做初始值使用
+        after: {
             type: Boolean,
             default: true,
         },
+        // 手机模式隐藏前置插槽
+        hideBeforeInMobile: Boolean,
+        // 手机模式隐藏后插槽
+        hideAfterInMobile: Boolean,
         // 是否开启缓存
         cache: {
-            type: [Boolean, String],
+            type: [ Boolean, String ],
             default: true,
         },
     },
@@ -58,6 +72,8 @@ export default {
      */
     emits: [
         'update:modelValue',
+        'update:before',
+        'update:after',
     ],
 
     /**
@@ -65,6 +81,103 @@ export default {
      */
     setup(props, { emit, slots }) {
 
+        // ==========【数据】============================================================================================
+
+        // quasar 对象
+        const $q = useQuasar()
+
+        // 获取权限注入
+        const $power = inject(NPowerKey)
+
+        // 缓存名
+        let cacheName = ''
+
+        // 初始值
+        let rawValue = props.modelValue
+
+        // 初始显示前置插槽
+        let rawBefore = props.before
+        let initEmitBefore = true
+
+        // 初始显示后置插槽
+        let rawAfter = props.after
+        let initEmitAfter = true
+
+        // 如果开启缓存
+        if (props.cache) {
+
+            // 设置缓存名
+            cacheName = `splitter:${props.cache === true ? ($power && $power.routePath ? $power.routePath : utils.router.getRoute('path')) : props.cache}:`
+
+            // 从缓存获取初始值
+            let cache = utils.storage.get(cacheName + 'modelValue')
+            if (cache !== null) {
+                rawValue = cache
+            }
+
+            // 如果手机模式隐藏前置插槽
+            if (props.hideBeforeInMobile && $q.platform.is.mobile) {
+                rawBefore = false
+                initEmitBefore = false
+
+            } else {
+                // 从缓存获取初始值
+                cache = utils.storage.get(cacheName + 'before')
+                if (cache !== null) {
+                    rawBefore = cache
+                }
+            }
+
+            // 如果手机模式隐藏后置插槽
+            if (props.hideAfterInMobile && $q.platform.is.mobile) {
+                rawAfter = false
+                initEmitAfter = false
+
+            } else {
+                // 从缓存获取初始值
+                cache = utils.storage.get(cacheName + 'after')
+                if (cache !== null) {
+                    rawAfter = cache
+                }
+            }
+
+        // 如果在手机模式
+        } else if ($q.platform.is.mobile) {
+
+            // 手机模式隐藏前置插槽
+            if (props.hideBeforeInMobile) {
+                rawBefore = false
+                initEmitBefore = false
+            }
+
+            // 手机模式隐藏后置插槽
+            if (props.hideAfterInMobile) {
+                rawAfter = false
+                initEmitAfter = false
+            }
+        }
+
+        // 创建防抖睡眠方法
+        const sleep = utils.debounceSleep()
+
+        // 当前值
+        const currentValue = ref(rawValue)
+        if (rawValue !== props.modelValue) {
+            emit('update:modelValue', rawValue)
+        }
+
+        // 当前是否显示前置插槽
+        const currentBefore = ref(rawBefore)
+        if (initEmitBefore) {
+            emit('update:before', rawBefore)
+        }
+
+        // 当前是否显示后置插槽
+        const currentAfter = ref(rawAfter)
+        if (initEmitAfter) {
+            emit('update:after', rawAfter)
+        }
+
         // ==========【计算属性】=========================================================================================
 
         /**
@@ -75,14 +188,15 @@ export default {
             const keys = []
 
             if (utils.isValidObject(slots)) {
+
                 for (const key in slots) {
                     if (key === 'before') {
-                        if (props.showBefore) {
+                        if (currentBefore.value) {
                             keys.push(key)
                         }
 
                     } else if (key === 'after') {
-                        if (props.showAfter) {
+                        if (currentAfter.value) {
                             keys.push(key)
                         }
 
@@ -100,13 +214,13 @@ export default {
          */
         const currentClass = computed(function () {
 
-            if (props.showBefore) {
-                if (! props.showAfter) {
+            if (currentBefore.value) {
+                if (! currentAfter.value) {
                     return 'n-splitter--hide-before'
                 }
 
-            } else if (props.showAfter) {
-                if (! props.showBefore) {
+            } else if (currentAfter.value) {
+                if (! currentBefore.value) {
                     return 'n-splitter--hide-after'
                 }
 
@@ -115,69 +229,108 @@ export default {
             }
         })
 
-        // ==========【数据】============================================================================================
-
-        // 获取权限注入
-        const $power = inject(NPowerKey)
+        // ==========【方法】============================================================================================
 
-        // 缓存名
-        let cacheName = ''
+        /**
+         * 触发更新值
+         */
+        async function emitValue(key, val) {
 
-        // 初始值
-        let rawValue = props.modelValue
+            // 更新值
+            emit(`update:${key}`, val)
 
-        // 如果开启缓存
-        if (props.cache) {
+            // 如果开启缓存
+            if (props.cache) {
 
-            // 设置缓存名
-            cacheName = `splitter:value:${props.cache === true ? ($power && $power.routePath ? $power.routePath : utils.router.getRoute('path')) : props.cache}`
+                // 延迟执行
+                await sleep(500, key)
 
-            // 从缓存获取初始值
-            const cache = utils.storage.get(cacheName)
-            if (cache) {
-                rawValue = cache
+                // 设置缓存(永久缓存)
+                utils.storage.set(cacheName + key, val, 0)
             }
         }
 
-        // 当前值
-        const currentValue = ref(rawValue)
+        /**
+         * 切换显示前置插槽
+         */
+        function toggleBefore() {
+            currentBefore.value = ! currentBefore.value
+        }
 
-        // 创建防抖睡眠方法
-        const sleep = utils.debounceSleep()
+        /**
+         * 切换显示后置插槽
+         */
+        function toggleAfter() {
+            currentAfter.value = ! currentAfter.value
+        }
 
         // ==========【监听数据】=========================================================================================
 
         /**
          * 监听声明值
          */
-        watch(()=>props.modelValue, function (val) {
+        watch(() => props.modelValue, function (val) {
+
             // 如果值有变化
             if (val !== currentValue.value) {
+
                 // 更新当前值
                 currentValue.value = val
             }
         })
 
         /**
-         * 监听值
+         * 监听声明是否显示前置插槽
          */
-        watch(currentValue, function (val) {
+        watch(() => props.before, function (val) {
 
-            // 更新值
-            emit('update:modelValue', val)
+            // 如果值有变化
+            if (val !== currentBefore.value) {
 
-            // 如果开启缓存
-            if (props.cache) {
+                // 设置是否显示前置插槽
+                currentBefore.value = val
+            }
+        })
 
-                // 延迟执行
-                sleep(500)
-                    .then(function () {
-                        // 设置缓存(永久缓存)
-                        utils.storage.set(cacheName, val, 0)
-                    })
+        /**
+         * 监听声明是否显示后置插槽
+         */
+        watch(() => props.after, function (val) {
+
+            // 如果值有变化
+            if (val !== currentAfter.value) {
+
+                // 设置是否显示后置插槽
+                currentAfter.value = val
             }
         })
 
+        /**
+         * 监听值
+         */
+        watch(currentValue, async function (val) {
+            // 触发更新值
+            await emitValue('modelValue', val)
+        })
+
+        /**
+         * 监听是否显示前置插槽
+         */
+        watch(currentBefore, async function (val) {
+
+            // 触发更新值
+            await emitValue('before', val)
+        })
+
+        /**
+         * 监听是否显示后置插槽
+         */
+        watch(currentAfter, async function (val) {
+
+            // 触发更新值
+            await emitValue('after', val)
+        })
+
         // ==========【返回】=============================================================================================
 
         return {
@@ -185,8 +338,17 @@ export default {
             slotNames,
             // 当前值
             currentValue,
+            // 当前是否显示前置插槽
+            currentBefore,
+            // 当前是否显示后置插槽
+            currentAfter,
             // 当前样式
             currentClass,
+
+            // 切换显示前置插槽
+            toggleBefore,
+            // 切换显示后置插槽
+            toggleAfter,
         }
     }
 }

package/components/table/index.vue

@@ -215,6 +215,11 @@ export default {
         },
         // 树节点点击
         treeNodeClick: Function,
+        // 选中第一个树节点
+        treeSelectFirstNode: {
+            type: Boolean,
+            default: true,
+        },
         // 显示树筛选
         treeFilter: Boolean,
         // 树位置
@@ -287,7 +292,7 @@ export default {
         const treeFilterValue = ref('')
 
         // 树选择数据
-        const treeSelected = ref('')
+        const treeSelected = ref(null)
 
         // ==========【计算属性】==========================================================================================
 
@@ -330,34 +335,67 @@ export default {
 
         // ==========【监听数据】=========================================================================================
 
-        /**
-         * 监听树选择数据
-         */
+        // 如果有树节点点击方法
         if (_.isFunction(props.treeNodeClick)) {
+
+            /**
+             * 树节点 all
+             */
+            const treeNodesAll = computed(function () {
+                return utils.collection(props.treeNodes)
+                    .keyBy(props.treeNodeKey)
+                    .toObject()
+            })
+
+            // 是否已选择过第一个节点
+            let isSelectedFirstNode = false
+
+            /**
+             * 监听树选择数据
+             */
             watch(treeSelected, function(nodeKey) {
 
+                // 如果节点值不是有效值
+                if (! utils.isValidValue(nodeKey)) {
+
+                    // 则无任何操作
+                    return
+                }
+
                 // 树节点点击
-                const res = props.treeNodeClick({
-                    nodeKey,
-                    node: treeRef.value.getNodeByKey(nodeKey),
-                    $table
-                })
+                const res = props.treeNodeClick(nodeKey, treeNodesAll.value[nodeKey])
 
-                if (! _.isNil(res)) {
+                if (utils.isValidObject(res)) {
 
-                    if (res === false) {
-                        return
-                    }
+                    // 设置表格传参
+                    $table.setQuery(res)
+
+                    // 表格重新加载
+                    $table.tableReload()
+                }
+            })
 
-                    if (utils.isValidObject(res)) {
+            /**
+             * 监听树节点数据
+             */
+            watch(() => props.treeNodes, function (val) {
 
-                        // 设置表格传参
-                        $table.setQuery(res)
+                // 如果已选择过第一个节点
+                if (isSelectedFirstNode) {
 
-                        // 表格重新加载
-                        $table.tableReload()
-                    }
+                    // 则无任何操作
+                    return
                 }
+
+                // 选中第一个节点的值
+                treeSelected.value = val[0][props.treeNodeKey]
+
+                // 已选择过第一个节点
+                isSelectedFirstNode = true
+
+            }, {
+                // 立即执行
+                immediate: true,
             })
         }
 

package/package.json

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

package/sass/quasar/field.scss

@@ -135,6 +135,22 @@
  */
 .n-field-fieldset {
     &.q-field {
+
+        // 紧凑模式
+        &--dense {
+            // 紧凑模式最小高度
+            //.q-field__control,
+            //.q-field__marginal {
+            //    min-height: 44px;
+            //}
+
+            &.q-field--float {
+                .q-field__label {
+                    transform: translateY(-80%) scale(0.85) !important;
+                }
+            }
+        }
+
         &--labeled {
             .q-field__prefix,
             .q-field__suffix,
@@ -164,15 +180,6 @@
             }
         }
 
-        // 紧凑模式
-        &--dense {
-            &.q-field--float {
-                .q-field__label {
-                    transform: translateY(-80%) scale(0.85) !important;
-                }
-            }
-        }
-
         .q-field__native,
         .q-field__input {
             z-index: 2;
@@ -208,4 +215,3 @@
         }
     }
 }
-

package/sass/quasar/table.scss

@@ -29,6 +29,18 @@ $dark-td-bg-color: $dark;
                 height: 40px;
             }
         }
+
+        &--horizontal-separator,
+        &--cell-separator {
+            tbody {
+                // 表格内容最后一排数据底部加上横线
+                &.q-virtual-scroll__content {
+                    tr:last-child > td {
+                        border-bottom-width: 1px;
+                    }
+                }
+            }
+        }
     }
 
     // 宫格模式

package/utils/$power.js

@@ -846,11 +846,6 @@ async function request(params) {
     // --------------------------------------------------
     if (o.data.type === dicts.POWER_DATA_TYPE__OPEN) {
 
-        // 请求前执行
-        if (await utils.runAsync(o.requestBefore)({ params: o, requestData: query }) === false) {
-            return
-        }
-
         query = formatQuery(query, true)
 
         // 如果有增加来源页面参数
@@ -859,6 +854,15 @@ async function request(params) {
             query.n_frompage = encodeURIComponent($currentRoute.fullPath)
         }
 
+        // 请求前执行
+        const resBefore = await utils.runAsync(o.requestBefore)({ params: o, requestData: query })
+        if (resBefore !== void 0) {
+            if (resBefore === false) {
+                return
+            }
+            query = resBefore
+        }
+
         utils.router.push({
             path: o.data.url,
             query,
@@ -952,8 +956,12 @@ async function request(params) {
     async function onRequest() {
 
         // 请求前执行
-        if (await utils.runAsync(o.requestBefore)({ params: o, requestData }) === false) {
-            return
+        const resBefore = await utils.runAsync(o.requestBefore)({ params: o, requestData })
+        if (resBefore !== void 0) {
+            if (resBefore === false) {
+                return
+            }
+            requestData = resBefore
         }
 
         // 请求

package/utils/arr.js

@@ -0,0 +1,47 @@
+/*
+ * 操作数组
+ */
+utils.arr = {
+
+    /**
+     * 增加
+     */
+    add(children, index, newItem) {
+        if (Array.isArray(children)) {
+            children.splice(index + 1, 0, _.isFunction(newItem) ? newItem() : newItem)
+        }
+    },
+
+    /**
+     * 删除
+     */
+    delete(children, index) {
+        if (Array.isArray(children)) {
+            children.splice(index, 1)
+        }
+    },
+
+    /**
+     * 上移
+     */
+    up(children, index) {
+        if (Array.isArray(children)) {
+            // 在上一项插入该项
+            children.splice(index - 1, 0, children[index])
+            // 删除后一项
+            children.splice(index + 1, 1)
+        }
+    },
+
+    /**
+     * 下移
+     */
+    down(children, index) {
+        if (Array.isArray(children)) {
+            // 在下一项插入该项
+            children.splice(index + 2, 0, children[index])
+            // 删除前一项
+            children.splice(index, 1)
+        }
+    },
+}