@netang/quasar 0.0.21 → 0.0.22

package/components/drawer/index.vue

@@ -1,6 +1,6 @@
 <template>
     <q-drawer
-        v-model="isShow"
+        v-model="currentModelValue"
         :side="side"
         :breakpoint="breakpoint"
         :width="currentWidth"
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { ref, inject, nextTick } from 'vue'
+import { ref, inject, nextTick, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRoute } from 'vue-router'
 
 import { layoutKey, emptyRenderFn } from 'quasar/src/utils/private/symbols.js'
 
-import { NLayoutKey } from '../../utils/symbols'
+import { NPowerKey } from '../../utils/symbols'
 
 export default {
 
@@ -39,11 +39,15 @@ export default {
      * 声明属性
      */
     props: {
+        // 值
+        modelValue: Boolean,
+        // 位置
         side: {
             type: String,
             default: 'left',
             validator: v => [ 'left', 'right' ].includes(v)
         },
+        // 宽度
         width: {
             type: Number,
             default: 300
@@ -55,8 +59,6 @@ export default {
 
         // 【自定义属性】
         // --------------------------------------------------
-        // 是否显示
-        show: Boolean,
         // 手机端宽度(px / %)
         mobileWidth: {
             type: [String, Number],
@@ -82,34 +84,49 @@ export default {
         cache: [Boolean, String],
     },
 
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
     /**
      * 组合式
      */
-    setup(props) {
+    setup(props, { emit }) {
 
-        // ==========【注入】============================================================================================
+        // ==========【数据】============================================================================================
 
         // 获取 quasar 注入
-        const $layout = inject(layoutKey, emptyRenderFn)
-        if ($layout === emptyRenderFn) {
+        const $quasarLayout = inject(layoutKey, emptyRenderFn)
+        if ($quasarLayout === emptyRenderFn) {
             console.error('NDrawer needs to be child of QLayout')
             return emptyRenderFn
         }
 
-        // 获取布局注入数据
-        const $nLayout = inject(NLayoutKey)
-
-        // ==========【数据】============================================================================================
-
         // quasar 对象
         const $q = useQuasar()
 
         // 获取当前路由
         const $route = useRoute()
 
+        // 获取权限注入数据
+        const $power = inject(NPowerKey)
+
         // 是否显示
-        const isShow = $nLayout.data[props.side].modelValue
-        isShow.value = $q.screen.width < props.breakpoint ? false : props.show
+        let currentModelValue
+        if ($power) {
+            currentModelValue = $power[`${props.side}Drawer`].modelValue
+            if ($q.screen.width < props.breakpoint) {
+                currentModelValue.value = false
+                emit('update:modelValue', false)
+            } else {
+                currentModelValue.value = props.modelValue
+            }
+        } else {
+            currentModelValue = ref(props.modelValue)
+        }
 
         // 缓存名
         let cacheName = ''
@@ -156,11 +173,27 @@ export default {
 
         // 下次 DOM 更新
         nextTick(function() {
-            if (isShow.value && $layout.totalWidth.value < props.breakpoint) {
-                isShow.value = false
+            if (currentModelValue.value && $quasarLayout.totalWidth.value < props.breakpoint) {
+                currentModelValue.value = false
             }
         })
 
+        // ==========【监听数据】==========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(()=>props.modelValue, function (val) {
+            currentModelValue.value = val
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentModelValue, function (val) {
+            emit('update:modelValue', val)
+        })
+
         // ==========【方法】=============================================================================================
 
         /**
@@ -190,7 +223,7 @@ export default {
 
             // if (
             //     // 如果显示
-            //     isShow.value
+            //     currentModelValue.value
             //     // 如果开启折叠
             //     && props.dragCollapse
             //     // 如果有最小宽度
@@ -200,7 +233,7 @@ export default {
             //
             //     // 如果 拖拽宽度 < 折叠宽度
             //     if (dragWidth < collapseWidth) {
-            //         isShow.value = false
+            //         currentModelValue.value = false
             //     }
             // }
 
@@ -218,7 +251,7 @@ export default {
 
         return {
             // 是否显示
-            isShow,
+            currentModelValue,
             // 当前宽度
             currentWidth,
 

package/components/empty/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="q-pa-lg flex flex-center absolute-full">
+        {{emptyDescription || '发生未知错误'}}
+    </div>
+</template>
+
+<script>
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NEmpty',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 空状态描述
+        emptyDescription: String,
+    },
+}
+</script>

package/components/power-page/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <q-page
+        v-bind="$attrs"
+    >
+        <!-- 空数据 -->
+        <n-empty
+            :empty-description="emptyDescription"
+            v-if="pageStatus === false"
+        />
+
+        <!-- 插槽 -->
+        <slot v-else-if="pageStatus === true" />
+
+        <!-- 加载 -->
+        <q-inner-loading
+            :showing="pageLoading"
+        />
+    </q-page>
+</template>
+
+<script>
+import { inject } from 'vue'
+import { NPowerKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NPowerPage',
+
+    /**
+     * 组合式
+     */
+    setup() {
+        // ==========【数据】============================================================================================
+
+        // 获取注入权限数据
+        const $power = inject(NPowerKey)
+
+        // ==========【返回】============================================================================================
+        return {
+            ...$power,
+        }
+    },
+}
+</script>

package/components/private/table-visible-columns-button/index.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 表格筛选可见列按钮-->
+    <q-btn
+        icon="checklist"
+        dense
+        round
+        flat
+        v-if="tableColumns.length"
+    >
+        <q-menu
+            self="top middle"
+            :offset="[0, 8]"
+        >
+            <q-list style="min-width: 250px" dense bordered>
+
+                <!-- 表格宫格 -->
+                <template v-if="tableGrid !== null">
+                    <q-item
+                        clickable
+                        @click="tableGrid = ! tableGrid"
+                    >
+                        <q-item-section>宫格模式</q-item-section>
+                        <q-item-section side>
+                            <q-icon
+                                size="xs"
+                                name="check"
+                                v-show="tableGrid"
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-separator />
+                </template>
+
+                <!-- 筛选表格列 -->
+                <q-item
+                    v-for="item in tableColumns"
+                    clickable
+                    @click="onTableVisible(item)"
+                >
+                    <q-item-section>{{item.label}}</q-item-section>
+                    <q-item-section side>
+                        <q-icon
+                            size="xs"
+                            name="check"
+                            v-show="utils.indexOf(tableVisibleColumns, item.name) > -1"
+                        />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-menu>
+    </q-btn>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+import { NTableKey } from '../../../utils/symbols'
+
+export default {
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【方法】=============================================================================================
+
+        // 获取表格注入数据
+        const {
+            // 表格列数据(对象数组)
+            tableColumns,
+            // 表格可见列
+            tableVisibleColumns,
+            // 表格宫格
+            tableGrid,
+        } = inject(NTableKey)
+
+        /**
+         * 表格可见列点击
+         */
+        function onTableVisible(item) {
+            const index = utils.indexOf(tableVisibleColumns.value, item.name)
+            if (index > -1) {
+                tableVisibleColumns.value.splice(index, 1)
+            } else {
+                tableVisibleColumns.value.push(item.name)
+            }
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 表格列数据(对象数组)
+            tableColumns,
+            // 表格可见列
+            tableVisibleColumns,
+            // 表格宫格
+            tableGrid,
+
+            // 表格可见列点击
+            onTableVisible,
+        }
+    },
+}
+</script>

package/components/table/index.vue

@@ -1,37 +1,24 @@
 <template>
-    <n-layout
+    <q-layout
         class="absolute-full"
         :class="{
             'n-table--grid': tableGrid,
         }"
         view="lHr LpR lff"
         container
-        :page-status="pageStatus"
-        :empty-description="emptyDescription"
     >
         <!-- 头部 -->
-        <n-toolbar
-            ref="tableToolbarRef"
-            :model-value="roleBtnLists"
-            v-model:table-grid="tableGrid"
-            v-model:table-visible-columns="tableVisibleColumns"
-            :query="tableQuery"
-            :table-columns="tableColumns"
-            :table-selected="tableSelected"
-            :table-refresh="tableRefresh"
-            v-bind="toolbarProps"
-            header
-        >
-        </n-toolbar>
+        <n-toolbar header />
+
         <!-- 左侧分类 -->
         <n-drawer
+            :model-value="true"
             side="left"
             :width="200"
             :min-width="150"
             bordered
-            show
             drag
-            :cache="currentUrl"
+            cache
             v-if="treeNodes.length"
         >
             <q-scroll-area class="absolute-full">
@@ -121,7 +108,6 @@
                     <template v-slot:body-cell-settings="props">
                         <n-table-column-fixed
                             :props="props"
-                            :role-btn-lists="tableFixedRoleBtnLists"
                         />
                     </template>
 
@@ -129,8 +115,6 @@
                     <template v-slot:bottom-row="props" v-if="tableSummary">
                         <n-table-summary
                             :props="props"
-                            :data="tableSummary"
-                            :selection="tableSelection"
                         />
                     </template>
 
@@ -138,7 +122,6 @@
                     <template v-slot:pagination="props">
                         <n-table-pagination
                             :props="props"
-                            :table-refresh="tableRefresh"
                         />
                     </template>
                 </q-table>
@@ -147,12 +130,12 @@
 
         <!-- 右侧搜索 -->
         <n-drawer
+            :model-value="true"
             side="right"
             :min-width="320"
             bordered
             drag
-            :cache="currentUrl"
-            show
+            cache
             v-if="! noSearch && tableSearchValue.length"
         >
             <!-- 搜索 -->
@@ -163,14 +146,13 @@
                 :on-reset="tableSearchReset"
             />
         </n-drawer>
-    </n-layout>
+    </q-layout>
 </template>
 
 <script>
-import { ref, onMounted, watch, computed, inject } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, watch, computed, inject } from 'vue'
 
-import { NFieldTableKey } from '../../utils/symbols'
+import { NPowerKey, NTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -185,10 +167,6 @@ export default {
     props: {
         // 表格请求地址
         url: String,
-        // 表格参数
-        tableParams: Object,
-        // 权限按钮列表
-        roleBtnLists: Array,
         // 树节点唯一键值
         treeNodeKey: {
             type: String,
@@ -208,44 +186,21 @@ export default {
         treeNodeClick: Function,
         // 显示树筛选
         treeFilter: Boolean,
-        // 页面状态
-        pageStatus: {
-            type: Boolean,
-            default: null,
-        },
-        // 空状态描述
-        emptyDescription: {
-            type: String,
-            default: '发生未知错误',
-        },
-        // 工具栏声明属性
-        toolbarProps: Object,
         // 不显示搜索
         noSearch: Boolean,
-        // 表格加载回调
-        load: Function,
     },
 
-    /**
-     * 声明事件
-     */
-    emits: [
-        // 表格加载回调
-        'load',
-    ],
-
     /**
      * 组合式
      */
-    setup(props, { emit, slots }) {
+    setup(props, { slots }) {
 
-        // ==========【注入】============================================================================================
+        // ==========【数据】============================================================================================
 
-        // 获取文本框表格注入
-        const $fieldTable = inject(NFieldTableKey)
-        const inFieldTable = !! $fieldTable
+        // 获取权限注入
+        const $power = inject(NPowerKey)
 
-        // ==========【数据】============================================================================================
+        const $table = inject(NTableKey)
 
         // 树节点
         const treeRef = ref(null)
@@ -257,23 +212,18 @@ export default {
         const treeSelected = ref('')
 
         // 当前请求地址
-        const currentUrl = ref(props.url ? props.url : useRoute().fullPath)
-
-        // 表格参数
-        const tableParams = Object.assign({}, props.tableParams, {
-            // 请求地址
-            url: currentUrl.value,
-            // 权限按钮列表
-            roleBtnLists: computed(()=>props.roleBtnLists),
-        })
-
-        // 如果不显示搜索
-        if (props.noSearch) {
-            tableParams.search = false
-        }
-
-        // 创建表格
-        const $table = inFieldTable ? $fieldTable.$table : utils.$table.create(tableParams)
+        // const currentUrl = ref(props.url ? props.url : useRoute().fullPath)
+
+        // // 表格参数
+        // const tableParams = Object.assign({}, props.tableParams, {
+        //     // 请求地址
+        //     url: currentUrl.value,
+        // })
+        //
+        // // 如果不显示搜索
+        // if (props.noSearch) {
+        //     tableParams.search = false
+        // }
 
         // ==========【计算属性】==========================================================================================
 
@@ -320,21 +270,11 @@ export default {
             })
         }
 
-        // ==========【生命周期】=========================================================================================
-
-        /**
-         * 实例被挂载后调用
-         */
-        onMounted( async function() {
-
-            // 表格加载回调
-            emit('load', { $table })
-            await utils.runAsync(props.load)({ $table })
-        })
-
         // ==========【返回】=============================================================================================
 
         return {
+            // 解构权限实例
+            ...$power,
             // 解构表格实例
             ...$table,
 
@@ -345,9 +285,6 @@ export default {
             // 树选择数据
             treeSelected,
 
-            // 当前请求地址
-            currentUrl,
-
             // 插槽 body 单元格标识
             slotNames,
         }

package/components/table-column-fixed/index.vue

@@ -1,8 +1,8 @@
 <template>
     <q-td :props="props">
-        <div class="q-gutter-sm">
+        <div class="q-gutter-sm" v-if="tableFixedPowerBtns.length">
             <q-btn
-                v-for="item in roleBtnLists"
+                v-for="item in tableFixedPowerBtns"
                 :key="`btn-item-${item.id}`"
                 class="n-button-icon"
                 :icon="item.icon"
@@ -19,7 +19,8 @@
 
 <script>
 import { inject } from 'vue'
-import { NLayoutKey } from '../../utils/symbols'
+
+import { NPowerKey, NTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -34,8 +35,6 @@ export default {
     props: {
         // 传值
         props: Object,
-        // 权限按钮列表
-        roleBtnLists: Array,
     },
 
     /**
@@ -43,10 +42,19 @@ export default {
      */
     setup(props) {
 
-        // ==========【注入】============================================================================================
+        // ==========【数据】============================================================================================
+
+        // 获取权限注入
+        const {
+            // 权限按钮点击
+            powerBtnClick,
+        } = inject(NPowerKey)
 
-        // 获取布局注入数据
-        const $nLayout = inject(NLayoutKey)
+        // 获取表格注入
+        const {
+            // 固定在右边的权限按钮列表
+            tableFixedPowerBtns,
+        } = inject(NTableKey)
 
         // ==========【方法】=============================================================================================
 
@@ -54,13 +62,15 @@ export default {
          * 点击
          */
         function onClick(item) {
-            $nLayout.data.role?.click(item, [ props.props.row ])
+            powerBtnClick(item, [ props.props.row ])
         }
 
         // ==========【返回】=============================================================================================
 
         return {
-            // 点击
+            // 固定在右边的权限按钮列表
+            tableFixedPowerBtns,
+            // 权限按钮点击
             onClick,
         }
     },