@netang/quasar 0.0.20 → 0.0.22

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,36 +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 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">
@@ -120,7 +108,6 @@
                     <template v-slot:body-cell-settings="props">
                         <n-table-column-fixed
                             :props="props"
-                            :role-btn-lists="tableFixedRoleBtnLists"
                         />
                     </template>
 
@@ -128,8 +115,6 @@
                     <template v-slot:bottom-row="props" v-if="tableSummary">
                         <n-table-summary
                             :props="props"
-                            :data="tableSummary"
-                            :selection="tableSelection"
                         />
                     </template>
 
@@ -137,7 +122,6 @@
                     <template v-slot:pagination="props">
                         <n-table-pagination
                             :props="props"
-                            :table-refresh="tableRefresh"
                         />
                     </template>
                 </q-table>
@@ -146,12 +130,12 @@
 
         <!-- 右侧搜索 -->
         <n-drawer
+            :model-value="true"
             side="right"
             :min-width="320"
             bordered
             drag
-            :cache="currentUrl"
-            show
+            cache
             v-if="! noSearch && tableSearchValue.length"
         >
             <!-- 搜索 -->
@@ -162,12 +146,13 @@
                 :on-reset="tableSearchReset"
             />
         </n-drawer>
-    </n-layout>
+    </q-layout>
 </template>
 
 <script>
-import { ref, onMounted, watch, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, watch, computed, inject } from 'vue'
+
+import { NPowerKey, NTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -182,10 +167,6 @@ export default {
     props: {
         // 表格请求地址
         url: String,
-        // 表格参数
-        tableParams: Object,
-        // 权限按钮列表
-        roleBtnLists: Array,
         // 树节点唯一键值
         treeNodeKey: {
             type: String,
@@ -205,39 +186,22 @@ 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 $power = inject(NPowerKey)
+
+        const $table = inject(NTableKey)
+
         // 树节点
         const treeRef = ref(null)
 
@@ -248,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 = 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
+        // }
 
         // ==========【计算属性】==========================================================================================
 
@@ -311,21 +270,11 @@ export default {
             })
         }
 
-        // ==========【生命周期】=========================================================================================
-
-        /**
-         * 实例被挂载后调用
-         */
-        onMounted( async function() {
-
-            // 表格加载回调
-            emit('load', { $table })
-            await utils.runAsync(props.load)({ $table })
-        })
-
         // ==========【返回】=============================================================================================
 
         return {
+            // 解构权限实例
+            ...$power,
             // 解构表格实例
             ...$table,
 
@@ -336,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,
         }
     },

package/components/table-pagination/index.vue

@@ -57,12 +57,46 @@
             dense
             flat
             @click="tableRefresh"
-            v-if="tableRefresh"
+            v-if="hasTable"
         />
+
+        <!-- 当前页面工具栏无权限按钮时显示 -->
+        <template v-if="! toolbarPowerBtns.length">
+
+            <!-- 左边侧滑菜单切换按钮-->
+            <q-btn
+                :icon="leftDrawer.icon"
+                dense
+                round
+                flat
+                @click="leftDrawer.toggle"
+                v-if="leftDrawer.showButton()"
+            />
+
+            <!-- 表格筛选可见列按钮 -->
+            <table-visible-columns-button v-if="hasTable" />
+
+            <!-- 右边侧滑菜单切换按钮-->
+            <q-btn
+                :icon="rightDrawer.icon"
+                dense
+                round
+                flat
+                @click="rightDrawer.toggle"
+                v-if="rightDrawer.showButton()"
+            />
+
+        </template>
+
     </div>
 </template>
 
 <script>
+import { inject } from 'vue'
+
+import TableVisibleColumnsButton from '../private/table-visible-columns-button'
+import { NPowerKey, NTableKey } from '../../utils/symbols'
+
 export default {
 
     /**
@@ -70,14 +104,60 @@ export default {
      */
     name: 'NTablePagination',
 
+    /**
+     * 容器
+     */
+    components: {
+        TableVisibleColumnsButton,
+    },
+
     /**
      * 声明属性
      */
     props: {
         // 传值
         props: Object,
-        // 表格刷新
-        tableRefresh: Function,
+    },
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【数据】============================================================================================
+
+        // 获取权限注入
+        const $power = inject(NPowerKey)
+        const {
+            // 左边侧滑菜单数据
+            leftDrawer,
+            // 右边侧滑菜单数据
+            rightDrawer,
+            // 当前页面工具栏权限按钮
+            toolbarPowerBtns,
+        } = $power
+
+        // 获取表格注入
+        const $table = inject(NTableKey)
+        const {
+            // 表格刷新
+            tableRefresh,
+        } = $table
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 是否有表格
+            hasTable: !! $table,
+            // 表格刷新
+            tableRefresh,
+            // 当前页面工具栏权限按钮
+            toolbarPowerBtns,
+            // 左边侧滑菜单数据
+            leftDrawer,
+            // 右边侧滑菜单数据
+            rightDrawer,
+        }
     },
 }
 </script>

package/components/table-summary/index.vue

@@ -14,7 +14,9 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
+
+import { NTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -40,13 +42,21 @@ export default {
      */
     setup(props) {
 
+        // ==========【数据】============================================================================================
+
+        // 获取表格注入
+        const {
+            // 表格选择类型
+            tableSelection,
+        } = inject(NTableKey)
+
         // ==========【计算属性】============================================================================================
 
         const columns = computed(function () {
 
             const lists = []
 
-            if (props.selection !== 'none') {
+            if (tableSelection.value !== 'none') {
                 lists.push({
                     css: 'q-table--col-auto-width text-center',
                     name: '',
@@ -85,6 +95,8 @@ export default {
         return {
             // 栏目
             columns,
+            // 表格选择类型
+            tableSelection,
         }
     },
 }