@netang/quasar 0.0.20 → 0.0.22

package/utils/$table.js

@@ -1,5 +1,4 @@
-import { ref, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, computed, provide, inject, watch } from 'vue'
 import { date, useQuasar } from 'quasar'
 import { parse } from 'qs'
 
@@ -11,40 +10,7 @@ import {
     setItemValue,
 } from './$search'
 
-/**
- * 获取 url 参数
- */
-function getUrlQuery(url) {
-
-    const query = {}
-
-    if (utils.indexOf(url, '?') > -1) {
-
-        const arr = url.split('?')
-
-        url = arr[0]
-        const urlQuery = parse(arr[1])
-        if (utils.isValidObject(urlQuery)) {
-            utils.forIn(urlQuery, function (val, key) {
-
-                key = utils.trimString(key)
-                val = utils.trimString(val)
-
-                if (key && val) {
-                    if (val.indexOf(',') > -1) {
-                        val = val.split(',')
-                    }
-                    query[key] = utils.numberDeep(val)
-                }
-            })
-        }
-    }
-
-    return {
-        url,
-        query,
-    }
-}
+import { NPowerKey, NTableKey } from './symbols'
 
 /**
  * 对话框设置
@@ -83,12 +49,6 @@ function dialogSetting($dialog, o) {
  */
 function create(params) {
 
-    // ==========【注入】=================================================================================================
-
-    // 获取对话框注入
-    const $dialog = utils.$dialog.inject()
-    const inDialog = !! $dialog
-
     // ==========【数据】=================================================================================================
 
     // quasar 对象
@@ -100,9 +60,9 @@ function create(params) {
 
     // 获取参数
     const o = _.merge({
-        // 请求地址
-        url: '',
-        // 参数
+        // 路由路径
+        path: '',
+        // 路由参数
         query: {},
         // 表格节点
         ref: null,
@@ -132,8 +92,6 @@ function create(params) {
             // 是否降序排列
             descending: true,
         },
-        // 已选数据
-        selected: [],
         // 每页显示行数选项
         rowsPerPageOptions,
         // 请求方法
@@ -148,8 +106,6 @@ function create(params) {
         search: true,
         // 是否开启合计
         summary: false,
-        // 权限按钮列表
-        roleBtnLists: null,
         // 从参数中获取搜索值
         searchFromQuery: true,
         // 显示宫格
@@ -158,32 +114,48 @@ function create(params) {
         showVisibleColumns: true,
     }, params)
 
+    // 获取权限注入
+    const $power = _.has(params, '$power') ? params.$power : inject(NPowerKey)
+    const hasPowr = !! $power
+
+    // 获取对话框注入
+    const $dialog = utils.$dialog.inject()
+    const inDialog = !! $dialog
+
+    // 获取权限路由
+    const $route = utils.isValidString(o.path) ?
+        // 如果为自定义路由
+        utils.router.resolve({
+            path: o.path,
+            query: o.query,
+        })
+        // 否则获取当前路由
+        : (hasPowr ? $power.getRoute() : utils.router.getRoute())
+
+    // 是否有权限按钮
+    const hasPowerBtns = hasPowr ? ! $power.powerBtns.value.length : false
+
+    // 表格已选数据
+    const tableSelected = hasPowr ? $power.tableSelected : ref([])
+
     // 如果是对话框注入
     if (inDialog) {
         // 对话框设置
         dialogSetting($dialog, o)
     }
 
-    // 如果没有地址, 则使用当前路由地址
-    if (! o.url) {
-        // 当前路由
-        o.url = useRoute().fullPath
-    }
-
-    // 是否显示权限按钮
-    const showRoleBtn = o.roleBtnLists !== null
-
     // 宫格模式缓存名
-    const gridCacheName = 'table_grid_' + o.url
+    const gridCacheName = 'table_grid_' + $route.fullPath
 
     // 可见列缓存名
-    const visibleColumnsCacheName = 'table_visible_columns_' + o.url
+    const visibleColumnsCacheName = 'table_visible_columns_' + $route.fullPath
 
     // 表格列
     const tableColumns = []
 
-    // 添加操作列
-    if (showRoleBtn) {
+    // 如果有权限按钮
+    if (hasPowerBtns) {
+        // 添加操作列
         o.columns.push({
             label: '操作',
             name: 'settings',
@@ -230,9 +202,9 @@ function create(params) {
         }
 
         // 如果有路由
-        if (_.get(item, 'router')) {
+        if (_.get(item, 'route')) {
             // 如果该值在当前路由路径中, 则显示
-            if (utils.indexOf(o.url, item.router) > -1) {
+            if (utils.indexOf($route.fullPath, item.route) > -1) {
                 tableColumns.push(item)
             }
 
@@ -262,9 +234,6 @@ function create(params) {
     // 表格翻页参数
     const tablePagination = ref(o.pagination)
 
-    // 表格已选数据
-    const tableSelected = ref(o.selected)
-
     // 表格宫格
     const tableGrid = ref(o.showGrid ? utils.storage.get(gridCacheName) === true : false)
 
@@ -280,10 +249,6 @@ function create(params) {
     // 表格合计
     const tableSummary = ref(null)
 
-    // 获取 url 参数
-    const resUrl = getUrlQuery(o.url)
-    o.url = resUrl.url
-
     // 如果在表格内部
     if (inDialog) {
         // 提交表格已选数据给对话框
@@ -302,23 +267,30 @@ function create(params) {
         // 首次表格搜索值(如果表格搜索参数中带了初始值, 则设置初始值)
         firstTableSearchValue,
         // 表格搜索值(如果表格搜索参数中带了初始值, 则设置初始值)
-    } = utils.$search.getRawData(tableColumns, Object.assign({}, o.query, resUrl.query), o.searchFromQuery)
+    } = utils.$search.getRawData(tableColumns, Object.assign({}, $route.query), o.searchFromQuery)
 
     // 表格搜索数据值
     const tableSearchValue = ref(firstTableSearchValue)
 
+    watch(tableSearchValue, function (val) {
+        console.log('tableSearchValue', val)
+    })
+
     // 表格搜索参数
     const tableSearchOptions = ref()
 
     // ==========【计算属性】=============================================================================================
 
-    // 固定在右边的权限按钮列表
-    const tableFixedRoleBtnLists = showRoleBtn ? computed(function () {
+    /**
+     * 固定在表格右边的权限按钮列表
+     */
+    const tableFixedPowerBtns = ! hasPowerBtns ? ref([]) : computed(function () {
 
         const lists = []
 
         // 先格式化权限按钮列表
-        utils.forEach(utils.$role.formatRoleBtnLists(o.roleBtnLists.value), function(item) {
+        utils.forEach(utils.$power.formatBtns($power.powerBtns.value), function(item) {
+
             // 如果是固定按钮
             if (item.fixed) {
                 lists.push(item)
@@ -326,25 +298,25 @@ function create(params) {
         })
 
         return lists
-    }) : []
+    })
 
     /**
-     * 表格双击权限按钮
+     * 获取权限按钮中可双击的按钮
      */
-    const tableDbClickRoleBtn = o.roleBtnLists ? computed(function () {
+    const tableDbClickPowerBtn = ! hasPowerBtns ? ref(null) : computed(function () {
         if (
             // 非手机模式
             ! $q.platform.is.mobile
             // 有权限列表
-            && utils.isValidArray(o.roleBtnLists.value)
+            && utils.isValidArray($power.powerBtns.value)
         ) {
-            for (const item of o.roleBtnLists.value) {
+            for (const item of $power.powerBtns.value) {
                 if (_.has(item, 'data.dbclick') === true) {
                     return item
                 }
             }
         }
-    }) : null
+    })
 
     /**
      * 是否显示固定在右边的权限按钮列表
@@ -384,8 +356,8 @@ function create(params) {
     /**
      * 监听固定在右边的权限按钮列表
      */
-    if (showRoleBtn) {
-        watch(tableFixedRoleBtnLists, function (lists) {
+    if (hasPowerBtns) {
+        watch(tableFixedPowerBtns, function (lists) {
 
             const index = utils.indexOf(tableVisibleColumns.value, 'settings')
 
@@ -582,7 +554,7 @@ function create(params) {
         } else {
             const opts = Object.assign({
                 // 请求 - 登录
-                url: o.url,
+                url: $route.fullPath,
                 // 请求数据
                 data,
                 // ~~~~~~ 先开启防抖, 如果后期遇到表格加载不出来的情况, 再关闭防抖
@@ -705,8 +677,8 @@ function create(params) {
         }
 
         // 有双击的权限按钮
-        if (tableDbClickRoleBtn && tableDbClickRoleBtn.value) {
-            tableToolbarRef.value?.onClick(tableDbClickRoleBtn.value, [ row ])
+        if (tableDbClickPowerBtn && tableDbClickPowerBtn.value) {
+            tableToolbarRef.value?.onClick(tableDbClickPowerBtn.value, [ row ])
         }
     }
 
@@ -726,7 +698,7 @@ function create(params) {
 
     // ==========【返回】=================================================================================================
 
-    return {
+    const resTable = {
         // 表格工具栏节点
         tableToolbarRef,
         // 表格节点
@@ -750,7 +722,7 @@ function create(params) {
         // 表格已选数据
         tableSelected,
         // 固定在右边的权限按钮列表
-        tableFixedRoleBtnLists,
+        tableFixedPowerBtns,
         // 是否显示固定在右边的权限按钮列表
         showTableFixed,
         // 表格图片标识
@@ -782,6 +754,15 @@ function create(params) {
         // 设置表格搜索参数
         setTableSearchOptions,
     }
+
+    $power.update(function(data, _data) {
+        _data.$table = resTable
+    })
+
+    // 提供可以被后代组件注入的值
+    provide(NTableKey, resTable)
+
+    return resTable
 }
 
 /**

package/utils/$tree.js

@@ -1,5 +1,5 @@
 import { isRef, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { NPowerKey } from './symbols'
 
 /**
  * 获取节点
@@ -43,17 +43,19 @@ function getChildren(data, callback) {
 }
 
 /**
- * 树业务
+ * 创建树实例
  */
-utils.$tree = function(params) {
+function create(params) {
 
     const {
+        // 路由路径
+        path,
+        // 路由参数
+        query,
         // 树节点列表
         nodes,
         // 树展开节点
         expanded,
-        // 权限按钮列表
-        roleBtnLists,
         // 原始表单数据
         rawFormData,
         // 表单数据
@@ -63,16 +65,30 @@ utils.$tree = function(params) {
         // 是否开启展开节点缓存
         cache,
     } = Object.assign({
+        // 路由路径
+        path: '',
+        // 路由参数
+        query: {},
         // 是否开启展开节点缓存
         cache: false,
     }, params)
 
-    // 如果没有地址, 则使用当前路由地址
-    let url = ''
-    if (! _.get(params, 'url')) {
-        // 当前路由
-        url = useRoute().fullPath
-    }
+    // 获取权限注入
+    const $power = _.has(params, '$power') ? params.$power : inject(NPowerKey)
+    const hasPowr = !! $power
+
+    // 获取权限路由
+    const $route = utils.isValidString(path) ?
+        // 如果为自定义路由
+        utils.router.resolve({
+            path,
+            query,
+        })
+        // 否则获取当前路由
+        : (hasPowr ? $power.getRoute() : utils.router.getRoute())
+
+    // 权限按钮
+    const powerBtns = hasPowr ? $power.powerBtns : ref([])
 
     // 是否有展开节点
     const hasExpanded = ! _.isNil(expanded) && isRef(expanded)
@@ -194,21 +210,21 @@ utils.$tree = function(params) {
         maps[o.deleteName] = 'delete'
         maps[o.statusName] = 'status'
 
-        const allRoleBtn = {}
-        for (const item of roleBtnLists.value) {
+        const allPowerBtn = {}
+        for (const item of powerBtns.value) {
             if (_.has(maps, _.get(item, 'name'))) {
-                allRoleBtn[maps[item.name]] = item
+                allPowerBtn[maps[item.name]] = item
             }
         }
 
         return {
-            all: utils.isValidObject(allRoleBtn),
-            update: _.has(allRoleBtn, 'update'),
-            move: _.has(allRoleBtn, 'move'),
-            copy: _.has(allRoleBtn, 'copy'),
-            delete: _.has(allRoleBtn, 'delete'),
-            status: _.has(allRoleBtn, 'status'),
-            allRoleBtn,
+            all: utils.isValidObject(allPowerBtn),
+            update: _.has(allPowerBtn, 'update'),
+            move: _.has(allPowerBtn, 'move'),
+            copy: _.has(allPowerBtn, 'copy'),
+            delete: _.has(allPowerBtn, 'delete'),
+            status: _.has(allPowerBtn, 'status'),
+            allPowerBtn,
         }
     }
 
@@ -255,7 +271,7 @@ utils.$tree = function(params) {
             // 移至节点下
             case 'moveDown':
 
-                if (! _.get(o.menuStatus, 'value.allRoleBtn.move.url')) {
+                if (! _.get(o.menuStatus, 'value.allPowerBtn.move.url')) {
                     console.error('没有找到复制地址')
                     return
                 }
@@ -388,7 +404,7 @@ utils.$tree = function(params) {
 
                         // 请求 - 移动
                         const { status } = await utils.http({
-                            url: o.menuStatus.value.allRoleBtn.move.url,
+                            url: o.menuStatus.value.allPowerBtn.move.url,
                             data: {
                                 data: moveLists,
                             },
@@ -407,7 +423,7 @@ utils.$tree = function(params) {
                 // 确认菜单
                 confirmMenu(async function() {
 
-                    if (! _.get(o.menuStatus, 'value.allRoleBtn.copy.url')) {
+                    if (! _.get(o.menuStatus, 'value.allPowerBtn.copy.url')) {
                         console.error('没有找到复制地址')
                         return
                     }
@@ -432,7 +448,7 @@ utils.$tree = function(params) {
 
                     // 请求 - 复制
                     const { status, data: res } = await utils.http({
-                        url: o.menuStatus.value.allRoleBtn.copy.url,
+                        url: o.menuStatus.value.allPowerBtn.copy.url,
                         data: {
                             data: copyLists,
                         },
@@ -489,7 +505,7 @@ utils.$tree = function(params) {
                     return
                 }
 
-                if (! _.get(o.menuStatus, 'value.allRoleBtn.delete.url')) {
+                if (! _.get(o.menuStatus, 'value.allPowerBtn.delete.url')) {
                     console.error('没有找到删除地址')
                     return
                 }
@@ -499,7 +515,7 @@ utils.$tree = function(params) {
 
                     // 请求 - 删除
                     const { status } = await utils.http({
-                        url: o.menuStatus.value.allRoleBtn.delete.url,
+                        url: o.menuStatus.value.allPowerBtn.delete.url,
                         data: {
                             id: o.node.id,
                         },
@@ -524,7 +540,7 @@ utils.$tree = function(params) {
             // 全部正常
             case 'statusNormal':
 
-                if (! _.get(o.menuStatus, 'value.allRoleBtn.status.url')) {
+                if (! _.get(o.menuStatus, 'value.allPowerBtn.status.url')) {
                     console.error('没有找到状态地址')
                     return
                 }
@@ -550,7 +566,7 @@ utils.$tree = function(params) {
 
                     // 请求 - 全部禁用/正常
                     const { status } = await utils.http({
-                        url: o.menuStatus.value.allRoleBtn.status.url,
+                        url: o.menuStatus.value.allPowerBtn.status.url,
                         data: {
                             // ids
                             ids: statusIds,
@@ -587,7 +603,7 @@ utils.$tree = function(params) {
      */
     function getExpandedCache(defaultValue = []) {
         // 获取展开节点缓存
-        const res = utils.storage.get('tree_expanded_' + url)
+        const res = utils.storage.get('tree_expanded_' + $route.fullPath)
         return utils.isValidArray(res) ? res : defaultValue
     }
 
@@ -596,12 +612,12 @@ utils.$tree = function(params) {
      */
     function setExpandedCache(expanded) {
         // 设置展开节点缓存(永久缓存)
-        utils.storage.set('tree_expanded_' + url, expanded, 0)
+        utils.storage.set('tree_expanded_' + $route.fullPath, expanded, 0)
     }
 
     return {
         // 当前地址
-        url,
+        fullPath: $route.fullPath,
         // 获取节点
         getNode,
         // 更新节点
@@ -618,3 +634,11 @@ utils.$tree = function(params) {
         setExpandedCache,
     }
 }
+
+/**
+ * 树业务
+ */
+utils.$tree = {
+    // 创建树实例
+    create,
+}

package/utils/http.js

@@ -1,7 +1,7 @@
 import { isRef } from 'vue'
 import axios from 'axios'
 import createHttp from '@netang/utils/http'
-import { stateRole } from '../store'
+import { statePower } from '../store'
 
 /**
  * 初始化 http
@@ -102,9 +102,9 @@ utils.http = createHttp({
                     options.headers.Authorization = token
 
                     // 如果有权限
-                    if (stateRole.value.v) {
+                    if (statePower.value.v) {
                         // 头部添加权限版本号
-                        options.headers.Rv = stateRole.value.v
+                        options.headers.Pv = statePower.value.v
                     }
 
                 // 否则未登录 && 如果开启强制登录, 则跳转登录页面
@@ -126,8 +126,8 @@ utils.http = createHttp({
 
         // 如果请求成功
         if (res.status && para.checkCode && para.token) {
-            // 设置角色数据
-            utils.$role.setData(_.get(res, 'response.data.role'))
+            // 设置权限数据
+            utils.$power.setData(_.get(res, 'response.data.power'))
         }
 
         return res

package/utils/symbols.js

@@ -1,3 +1,7 @@
+export const NPowerKey = '_n_power_'
 export const NLayoutKey = '_n_layout_'
+export const NTableKey = '_n_table_'
+export const NFormKey = '_n_form_'
 export const NDialogKey = '_n_dialog_'
+export const NFieldTableKey = '_n_field_table_'
 export const NUploaderKey = '_n_uploader_'

package/components/layout/index.vue

@@ -1,119 +0,0 @@
-<template>
-    <q-layout
-        v-bind="$attrs"
-    >
-        <!-- 错误提示 -->
-        <q-page-container v-if="pageStatus === false">
-            <q-page class="q-pa-lg flex flex-center">
-                {{emptyDescription}}
-            </q-page>
-        </q-page-container>
-
-        <!-- 插槽 -->
-        <slot :data="data" v-else-if="pageStatus === true" />
-    </q-layout>
-
-    <!-- 加载 -->
-    <q-inner-loading
-        :showing="pageLoading"
-    />
-</template>
-
-<script>
-import { provide } from 'vue'
-import { NLayoutKey } from '../../utils/symbols'
-
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NLayout',
-
-    /**
-     * 声明属性
-     */
-    props: {
-        // 页面加载
-        pageLoading: Boolean,
-        // 页面状态
-        pageStatus: {
-            type: Boolean,
-            default: null,
-        },
-        // 空状态描述
-        emptyDescription: {
-            type: String,
-            default: '发生未知错误',
-        },
-    },
-
-    /**
-     * 组合式
-     */
-    setup() {
-
-        // ==========【注入】============================================================================================
-
-        // 布局数据
-        const data = {
-            // 左边侧滑菜单数据
-            left: {
-                // 是否显示
-                data: null,
-            },
-            // 右边侧滑菜单数据
-            right: {
-                // 是否显示
-                data: null,
-            },
-            // 权限数据
-            role: {},
-            // 表格数据
-            table: {},
-            // 上传器
-            uploader: [],
-        }
-        data.left.show = function() {
-            return data.left.data !== null ? data.left.data.value : false
-        }
-        data.left.toggle = function () {
-            if (data.left.data !== null) {
-                data.left.data.value = ! data.left.data.value
-            }
-        }
-        data.right.show = function() {
-            return data.right.data !== null ? data.right.data.value : false
-        }
-        data.right.toggle = function () {
-            if (data.right.data !== null) {
-                data.right.data.value = ! data.right.data.value
-            }
-        }
-
-        // 向后代注入数据
-        provide(NLayoutKey, {
-            // 注入数据
-            data,
-            // 更新注入数据
-            update(cb) {
-                cb(data)
-            },
-            // 检查是否上传中
-            checkUploading() {
-                for (const uploader of data.uploader) {
-                    if (uploader.checkUploading()) {
-                        return true
-                    }
-                }
-                return false
-            },
-        })
-
-        return {
-            // 布局数据
-            data,
-        }
-    },
-}
-</script>