@netang/quasar 0.0.33 → 0.0.34

package/components/drawer/index.vue

@@ -109,7 +109,7 @@ export default {
         const $q = useQuasar()
 
         // 获取当前路由
-        const $route = useRoute()
+        let fullPath = ''
 
         // 获取权限注入数据
         const $power = inject(NPowerKey)
@@ -124,10 +124,18 @@ export default {
             } else {
                 currentModelValue.value = props.modelValue
             }
+            // 权限路由路径
+            fullPath = $power.routeFullPath
+
         } else {
             currentModelValue = ref(props.modelValue)
+            // 当前路由路径
+            fullPath = useRoute().fullPath
         }
 
+        // 创建防抖睡眠方法
+        const sleep = utils.debounceSleep()
+
         // 缓存名
         let cacheName = ''
 
@@ -159,7 +167,7 @@ export default {
         } else if (props.drag && props.cache) {
 
             // 设置缓存名
-            cacheName = `drawer_${props.side}_${props.cache === true ? $route.fullPath : props.cache}`
+            cacheName = `drawer_${props.side}_${props.cache === true ? fullPath : props.cache}`
 
             // 从缓存获取宽度
             const cache = utils.storage.get(cacheName)
@@ -237,14 +245,19 @@ export default {
             //     }
             // }
 
+            // 设置当前宽度
+            currentWidth.value = newWidth
+
             // 如果开启缓存
             if (props.cache) {
-                // 设置缓存(永久缓存)
-                utils.storage.set(cacheName, newWidth, 0)
-            }
 
-            // 设置当前宽度
-            currentWidth.value = newWidth
+                // 延迟执行
+                sleep(500)
+                    .then(function () {
+                        // 设置缓存(永久缓存)
+                        utils.storage.set(cacheName, newWidth, 0)
+                    })
+            }
         }
 
         // ==========【返回】=============================================================================================

package/components/splitter/index.vue

@@ -1,9 +1,10 @@
 <template>
     <!-- 拆分器 -->
     <q-splitter
+        class="n-splitter"
+        :class="currentClass"
         v-model="currentValue"
         v-bind="$attrs"
-        v-if="$slots.before && $slots.after"
     >
         <!-- 插槽 -->
         <template
@@ -13,23 +14,11 @@
             <slot :name="slotName" />
         </template>
     </q-splitter>
-
-    <!-- before 插槽 -->
-    <slot
-        name="before"
-        v-else-if="$slots.before"
-    />
-
-    <!-- after 插槽 -->
-    <slot
-        name="after"
-        v-else-if="$slots.after"
-    />
-
 </template>
 
 <script>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, inject } from 'vue'
+import { NPowerKey } from '../../utils/symbols'
 
 export default {
 
@@ -47,6 +36,21 @@ export default {
             type: Number,
             required: true,
         },
+        // 显示前置插槽
+        showBefore: {
+            type: Boolean,
+            default: true,
+        },
+        // 显示后置插槽
+        showAfter: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否开启缓存
+        cache: {
+            type: [Boolean, String],
+            default: true,
+        },
     },
 
     /**
@@ -67,13 +71,81 @@ export default {
          * 插槽标识
          */
         const slotNames = computed(function() {
-            return utils.isValidObject(slots) ? Object.keys(slots) : []
+
+            const keys = []
+
+            if (utils.isValidObject(slots)) {
+                for (const key in slots) {
+                    if (key === 'before') {
+                        if (props.showBefore) {
+                            keys.push(key)
+                        }
+
+                    } else if (key === 'after') {
+                        if (props.showAfter) {
+                            keys.push(key)
+                        }
+
+                    } else {
+                        keys.push(key)
+                    }
+                }
+            }
+
+            return keys
+        })
+
+        /**
+         * 当前样式
+         */
+        const currentClass = computed(function () {
+
+            if (props.showBefore) {
+                if (! props.showAfter) {
+                    return 'n-splitter--hide-before'
+                }
+
+            } else if (props.showAfter) {
+                if (! props.showBefore) {
+                    return 'n-splitter--hide-after'
+                }
+
+            } else {
+                return 'n-splitter--hide'
+            }
         })
 
         // ==========【数据】============================================================================================
 
+        // 获取权限注入
+        const $power = inject(NPowerKey)
+
+        // 当前路由完整路径
+        const fullPath = $power ? $power.routeFullPath : utils.router.getRoute('fullPath')
+
+        // 缓存名
+        let cacheName = ''
+
+        // 初始值
+        let rawValue = props.modelValue
+
+        // 如果开启缓存
+        if (props.cache) {
+            // 设置缓存名
+            cacheName = `splitter_value_${props.cache === true ? fullPath : props.cache}`
+
+            // 从缓存获取初始值
+            const cache = utils.storage.get(cacheName)
+            if (cache) {
+                rawValue = cache
+            }
+        }
+
         // 当前值
-        const currentValue = ref(props.modelValue)
+        const currentValue = ref(rawValue)
+
+        // 创建防抖睡眠方法
+        const sleep = utils.debounceSleep()
 
         // ==========【监听数据】=========================================================================================
 
@@ -81,10 +153,8 @@ export default {
          * 监听声明值
          */
         watch(()=>props.modelValue, function (val) {
-
             // 如果值有变化
             if (val !== currentValue.value) {
-
                 // 更新当前值
                 currentValue.value = val
             }
@@ -97,6 +167,17 @@ export default {
 
             // 更新值
             emit('update:modelValue', val)
+
+            // 如果开启缓存
+            if (props.cache) {
+
+                // 延迟执行
+                sleep(500)
+                    .then(function () {
+                        // 设置缓存(永久缓存)
+                        utils.storage.set(cacheName, val, 0)
+                    })
+            }
         })
 
         // ==========【返回】=============================================================================================
@@ -106,7 +187,68 @@ export default {
             slotNames,
             // 当前值
             currentValue,
+            // 当前样式
+            currentClass,
         }
     }
 }
 </script>
+
+<style lang="scss">
+@import "@/assets/sass/var.scss";
+
+.n-splitter {
+
+    // 分离器激活背景色
+    &.q-splitter--active .q-splitter__separator ,
+    .q-splitter__separator:hover {
+        background-color: var(--q-primary);
+    }
+
+    // 隐藏前置插槽
+    &--hide-before {
+        &.q-splitter--horizontal {
+            .q-splitter__before {
+                height: 100% !important;
+            }
+        }
+        &.q-splitter--vertical {
+            .q-splitter__before {
+                width: 100% !important;
+            }
+        }
+        .q-splitter__after,
+        .q-splitter__separator {
+            display: none !important;
+        }
+    }
+
+    // 隐藏后置插槽
+    &--hide-after {
+        &.q-splitter--horizontal {
+            .q-splitter__after {
+                height: 100% !important;
+            }
+        }
+        &.q-splitter--vertical {
+            .q-splitter__after {
+                width: 100% !important;
+            }
+        }
+        .q-splitter__before,
+        .q-splitter__separator {
+            display: none !important;
+        }
+    }
+
+    // 隐藏前后置插槽
+    &--hide {
+        .q-splitter__before,
+        .q-splitter__after,
+        .q-splitter__separator {
+            display: none !important;
+        }
+    }
+}
+</style>
+

package/components/table/index.vue

@@ -11,18 +11,28 @@
         <n-toolbar
             :dense="dense"
             header
-        />
+        >
+            <!-- 插槽 -->
+            <template
+                v-for="slotName in slotNames.toolbar"
+                v-slot:[slotName]
+            >
+                <slot :name="`toolbar-${slotName}`"/>
+            </template>
+        </n-toolbar>
 
         <!-- 左侧分类 -->
+        <slot name="left-drawer" v-if="slotNames.leftDrawer" />
         <n-drawer
-            :model-value="true"
+            :model-value="! hideLeftDrawer"
             :side="treeSide"
             :width="200"
             :min-width="150"
             bordered
             drag
             cache
-            v-if="treeNodes.length"
+            v-bind="leftDrawerProps"
+            v-else-if="treeNodes.length"
         >
             <q-scroll-area class="absolute-full">
 
@@ -50,6 +60,7 @@
                     v-model:selected="treeSelected"
                     no-selection-unset
                     default-expand-all
+                    v-bind="treeProps"
                 />
 
             </q-scroll-area>
@@ -79,6 +90,7 @@
                     flat
                     virtual-scroll
                     :dense="dense"
+                    v-bind="tableProps"
                 >
                     <!-- 图片 -->
                     <template
@@ -96,7 +108,7 @@
 
                     <!-- 插槽 -->
                     <template
-                        v-for="slotName in slotNames"
+                        v-for="slotName in slotNames.table"
                         v-slot:[slotName]="props"
                     >
                         <q-td :props="props">
@@ -132,14 +144,16 @@
         </q-page-container>
 
         <!-- 右侧搜索 -->
+        <slot name="right-drawer" v-if="slotNames.rightDrawer" />
         <n-drawer
-            :model-value="true"
+            :model-value="! hideRightDrawer"
             :side="searchSide"
             :min-width="320"
             bordered
             drag
             cache
-            v-if="! noSearch && tableSearchValue.length"
+            v-bind="rightDrawerProps"
+            v-else-if="! noSearch && tableSearchValue.length"
         >
             <!-- 搜索 -->
             <n-search
@@ -147,8 +161,17 @@
                 :options="tableSearchOptions"
                 :on-search="tableReload"
                 :on-reset="tableSearchReset"
-            />
+            >
+                <!-- 插槽 -->
+                <template
+                    v-for="slotName in slotNames.search"
+                    v-slot:[slotName]
+                >
+                    <slot :name="`search-${slotName}`"/>
+                </template>
+            </n-search>
         </n-drawer>
+
     </q-layout>
 </template>
 
@@ -170,6 +193,10 @@ export default {
     props: {
         // 表格请求地址
         url: String,
+        // 表格声明属性
+        tableProps: Object,
+        // 树声明属性
+        treeProps: Object,
         // 树节点唯一键值
         treeNodeKey: {
             type: String,
@@ -189,13 +216,13 @@ export default {
         treeNodeClick: Function,
         // 显示树筛选
         treeFilter: Boolean,
-        // 不显示搜索
-        noSearch: Boolean,
         // 树位置
         treeSide: {
             type: String,
             default: 'left',
         },
+        // 不显示搜索
+        noSearch: Boolean,
         // 搜索位置
         searchSide: {
             type: String,
@@ -206,6 +233,14 @@ export default {
             type: Boolean,
             default: true,
         },
+        // 隐藏左边侧滑菜单
+        hideLeftDrawer: Boolean,
+        // 左边侧滑菜单声明属性
+        leftDrawerProps: Object,
+        // 隐藏右边侧滑菜单
+        hideRightDrawer: Boolean,
+        // 右边侧滑菜单声明属性
+        rightDrawerProps: Object,
     },
 
     /**
@@ -259,7 +294,37 @@ export default {
          * 插槽标识
          */
         const slotNames = computed(function() {
-            return utils.isValidObject(slots) ? Object.keys(slots) : []
+
+            const toolbar = []
+            const search = []
+            const table = []
+            let leftDrawer = false
+            let rightDrawer = false
+
+            // 如果有插槽
+            if (utils.isValidObject(slots)) {
+                for (const key in slots) {
+                    if (key.startsWith('toolbar-')) {
+                        toolbar.push(key.replace('toolbar-', ''))
+                    } else if (key.startsWith('search-')) {
+                        search.push(key.replace('search-', ''))
+                    } else if (key === 'left-drawer') {
+                        leftDrawer = true
+                    } else if (key === 'right-drawer') {
+                        rightDrawer = true
+                    } else {
+                        table.push(key)
+                    }
+                }
+            }
+
+            return {
+                toolbar,
+                search,
+                table,
+                leftDrawer,
+                rightDrawer,
+            }
         })
 
         // ==========【监听数据】=========================================================================================

package/package.json

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

package/utils/price.js

@@ -1,13 +1,13 @@
-/**
- * 换算金额
- */
-utils.price = function(value, params) {
-    return utils.decimal(value, Object.assign({
-        // 最小值
-        min: 0,
-        // 小数点位数
-        decimalLength: 2,
-        // 是否开启人民币分转元(如值 189 -> 1.89)
-        centToYuan: utils.config('priceCent') === true,
-    }, params))
-}
+/**
+ * 换算金额
+ */
+utils.price = function(value, params) {
+    return utils.decimal(value, Object.assign({
+        // 最小值
+        min: 0,
+        // 小数点位数
+        decimalLength: 2,
+        // 是否开启人民币分转元(如值 189 -> 1.89)
+        centToYuan: utils.config('priceCent') === true,
+    }, params))
+}