@netang/quasar 0.0.21 → 0.0.23

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">
@@ -69,7 +56,6 @@
         <q-page-container>
             <q-page>
                 <q-table
-                    ref="tableRef"
                     class="n-table absolute-full"
                     :class="{
                         'n-table--last-fixed': showTableFixed,
@@ -85,7 +71,7 @@
                     :rows-per-page-options="tableRowsPerPageOptions"
                     :grid="tableGrid"
                     @row-click="tableRowClick"
-                    @row-dblclick="tableRowDblclick"
+                    @row-dblclick="currentTableRowDblclick"
                     @request="tableRequest"
                     flat
                     virtual-scroll
@@ -121,7 +107,6 @@
                     <template v-slot:body-cell-settings="props">
                         <n-table-column-fixed
                             :props="props"
-                            :role-btn-lists="tableFixedRoleBtnLists"
                         />
                     </template>
 
@@ -129,8 +114,6 @@
                     <template v-slot:bottom-row="props" v-if="tableSummary">
                         <n-table-summary
                             :props="props"
-                            :data="tableSummary"
-                            :selection="tableSelection"
                         />
                     </template>
 
@@ -138,7 +121,6 @@
                     <template v-slot:pagination="props">
                         <n-table-pagination
                             :props="props"
-                            :table-refresh="tableRefresh"
                         />
                     </template>
                 </q-table>
@@ -147,12 +129,12 @@
 
         <!-- 右侧搜索 -->
         <n-drawer
+            :model-value="true"
             side="right"
             :min-width="320"
             bordered
             drag
-            :cache="currentUrl"
-            show
+            cache
             v-if="! noSearch && tableSearchValue.length"
         >
             <!-- 搜索 -->
@@ -163,14 +145,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 { NDialogKey, NTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -185,10 +166,6 @@ export default {
     props: {
         // 表格请求地址
         url: String,
-        // 表格参数
-        tableParams: Object,
-        // 权限按钮列表
-        roleBtnLists: Array,
         // 树节点唯一键值
         treeNodeKey: {
             type: String,
@@ -208,44 +185,45 @@ 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 $table = inject(NTableKey)
 
-        // ==========【数据】============================================================================================
+        // 获取对话框注入
+        const $dialog = inject(NDialogKey)
+        const inDialog = !! $dialog
+
+        // 当前双击表格行
+        let currentTableRowDblclick
+
+        // 如果在对话框内部
+        if (inDialog) {
+            // 提交表格已选数据给对话框
+            $dialog.submit(() => $table.tableSelected.value)
+
+            // 对话框中的表格双击表格行
+            currentTableRowDblclick = function (e, row) {
+                // 如果不是多选
+                if ($table.tableSelection !== 'multiple') {
+                    $table.tableSelected.value = [ row ]
+                    $dialog.confirm()
+                }
+            }
+
+        } else {
+            // 表格实例中的双击表格行
+            currentTableRowDblclick = $table.tableRowDblclick
+        }
 
         // 树节点
         const treeRef = ref(null)
@@ -256,35 +234,13 @@ 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 slotNames = computed(function() {
-            if (utils.isValidObject(slots)) {
-                return Object.keys(slots)
-            }
-            return []
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
         })
 
         // ==========【监听数据】=========================================================================================
@@ -320,18 +276,6 @@ export default {
             })
         }
 
-        // ==========【生命周期】=========================================================================================
-
-        /**
-         * 实例被挂载后调用
-         */
-        onMounted( async function() {
-
-            // 表格加载回调
-            emit('load', { $table })
-            await utils.runAsync(props.load)({ $table })
-        })
-
         // ==========【返回】=============================================================================================
 
         return {
@@ -345,11 +289,11 @@ export default {
             // 树选择数据
             treeSelected,
 
-            // 当前请求地址
-            currentUrl,
-
             // 插槽 body 单元格标识
             slotNames,
+
+            // 当前双击表格行
+            currentTableRowDblclick,
         }
     },
 }

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

@@ -1,11 +1,12 @@
 <template>
     <div>
         <!-- 页码 -->
-        <span class="q-table__bottom-item">{{props.pagination.page}} / {{Math.ceil(props.pagination.rowsNumber / props.pagination.rowsPerPage)}}</span>
+        <span class="q-table__bottom-item">{{props.pagination.page}} / {{props.pagesNumber}}</span>
 
         <!-- 第一页 -->
         <q-btn
             v-if="props.pagesNumber > 2"
+            :class="{ dense }"
             icon="first_page"
             color="grey-8"
             round
@@ -17,6 +18,7 @@
 
         <!-- 上页 -->
         <q-btn
+            :class="{ dense }"
             icon="chevron_left"
             color="grey-8"
             round
@@ -28,6 +30,7 @@
 
         <!-- 下页 -->
         <q-btn
+            :class="{ dense }"
             icon="chevron_right"
             color="grey-8"
             round
@@ -39,6 +42,7 @@
 
         <!-- 最后一页 -->
         <q-btn
+            :class="{ dense }"
             v-if="props.pagesNumber > 2"
             icon="last_page"
             color="grey-8"
@@ -51,18 +55,58 @@
 
         <!-- 刷新 -->
         <q-btn
+            :class="{ dense }"
             icon="refresh"
             color="grey-8"
             round
             dense
             flat
             @click="tableRefresh"
-            v-if="tableRefresh"
+            v-if="! noRefresh && hasRefresh"
         />
+
+        <!-- 当前页面工具栏无权限按钮时显示 -->
+        <template v-if="! noPower && ! toolbarPowerBtns.length">
+
+            <!-- 左边侧滑菜单切换按钮-->
+            <q-btn
+                :class="{ dense }"
+                :icon="leftDrawer.icon"
+                dense
+                round
+                flat
+                @click="leftDrawer.toggle"
+                v-if="leftDrawer.showButton()"
+            />
+
+            <!-- 表格筛选可见列按钮 -->
+            <table-visible-columns-button
+                :class="{ dense }"
+                v-if="hasTable"
+            />
+
+            <!-- 右边侧滑菜单切换按钮-->
+            <q-btn
+                :class="{ dense }"
+                :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 +114,80 @@ export default {
      */
     name: 'NTablePagination',
 
+    /**
+     * 容器
+     */
+    components: {
+        TableVisibleColumnsButton,
+    },
+
     /**
      * 声明属性
      */
     props: {
         // 传值
         props: Object,
-        // 表格刷新
-        tableRefresh: Function,
+        // 是否关闭权限
+        noPower: Boolean,
+        // 是否关闭刷新按钮
+        noRefresh: Boolean,
+        // 紧凑模式
+        dense: Boolean,
+    },
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【数据】============================================================================================
+
+        // 获取权限注入
+        const $power = inject(NPowerKey)
+        const {
+            // 左边侧滑菜单数据
+            leftDrawer,
+            // 右边侧滑菜单数据
+            rightDrawer,
+            // 当前页面工具栏权限按钮
+            toolbarPowerBtns,
+        } = $power
+
+        // 获取表格注入
+        const $table = inject(NTableKey)
+        const hasTable = !! $table
+
+        const {
+            // 表格刷新
+            tableRefresh,
+        } = $table
+
+        // ==========【返回】=============================================================================================
+
+
+        return {
+            // 是否有表格
+            hasTable,
+            // 是否有刷新按钮
+            hasRefresh: hasTable && !! $table.routeFullPath,
+            // 表格刷新
+            tableRefresh,
+            // 当前页面工具栏权限按钮
+            toolbarPowerBtns,
+            // 左边侧滑菜单数据
+            leftDrawer,
+            // 右边侧滑菜单数据
+            rightDrawer,
+        }
     },
 }
 </script>
+
+<style lang="scss" scoped>
+@import "@/assets/sass/var.scss";
+
+// 紧凑模式
+.dense {
+    font-size: 12px;
+}
+</style>

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,
         }
     },
 }