@netang/quasar 0.0.22 → 0.0.24

package/utils/$table.js

@@ -1,6 +1,5 @@
 import { ref, computed, provide, inject, watch } from 'vue'
 import { date, useQuasar } from 'quasar'
-import { parse } from 'qs'
 
 // 表格配置
 import tablesConfig from '@/tables'
@@ -10,39 +9,7 @@ import {
     setItemValue,
 } from './$search'
 
-import { NPowerKey, NTableKey } from './symbols'
-
-/**
- * 对话框设置
- */
-function dialogSetting($dialog, o) {
-
-    const {
-        dialogProps,
-        props,
-    } = $dialog
-
-    const {
-        route
-    } = dialogProps
-
-    // 如果是路由组件地址
-    if (utils.isValidString(route)) {
-        o.url = utils.slash(route, 'start', false)
-    }
-
-    const {
-        // 是否多选
-        multiple,
-        query,
-    } = props
-
-    // 是否多选
-    o.selection = multiple ? 'multiple' : 'single'
-
-    // 合并参数
-    Object.assign(o.query, query)
-}
+import { NPowerKey, NTableKey, NDialogKey } from './symbols'
 
 /**
  * 创建表格
@@ -56,7 +23,7 @@ function create(params) {
 
     // 每页显示行数选项
     // const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
-    const rowsPerPageOptions = [4, 40, 50, 100, 200, 500, 1000]
+    const rowsPerPageOptions = [3, 40, 50, 100, 200, 500, 1000]
 
     // 获取参数
     const o = _.merge({
@@ -64,12 +31,14 @@ function create(params) {
         path: '',
         // 路由参数
         query: {},
-        // 表格节点
-        ref: null,
+        // 附加请求数据
+        data: {},
         // 表格行唯一键值
         rowKey: 'id',
         // 选择类型, 可选值 single multiple none
         selection: 'multiple',
+        // 已选数据
+        selected: [],
         // 表格加载状态
         loading: false,
         // 表格列数据(对象数组)
@@ -112,22 +81,22 @@ function create(params) {
         showGrid: true,
         // 显示可见列
         showVisibleColumns: true,
+        // 开启缓存
+        cache: true,
+        // 刷新后清空已选数据
+        refreshResetSelected: 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,
+            query: utils.isValidObject(o.query) ? o.query : {},
         })
         // 否则获取当前路由
         : (hasPowr ? $power.getRoute() : utils.router.getRoute())
@@ -137,18 +106,15 @@ function create(params) {
 
     // 表格已选数据
     const tableSelected = hasPowr ? $power.tableSelected : ref([])
-
-    // 如果是对话框注入
-    if (inDialog) {
-        // 对话框设置
-        dialogSetting($dialog, o)
+    if (utils.isValidArray(o.selected)) {
+        tableSelected.value = o.selected
     }
 
-    // 宫格模式缓存名
-    const gridCacheName = 'table_grid_' + $route.fullPath
+    // 是否开启缓存
+    const isCache = !! o.cache
 
-    // 可见列缓存名
-    const visibleColumnsCacheName = 'table_visible_columns_' + $route.fullPath
+    // 缓存名
+    const cacheName = $route.fullPath ? $route.fullPath : (utils.isValidString(o.cache) ? o.cache : '')
 
     // 表格列
     const tableColumns = []
@@ -179,6 +145,9 @@ function create(params) {
             item.align = 'left'
         }
 
+        // 是否隐藏
+        item.hide = _.get(item, 'hide') === true
+
         // 如果有显示项
         if (_.get(item, 'visible') !== false) {
             o.visibleColumns.push(item.field)
@@ -214,17 +183,11 @@ function create(params) {
     })
 
     // 获取可见列缓存
-    const visibleColumnsCache = o.showVisibleColumns ? utils.storage.get(visibleColumnsCacheName) : []
+    const visibleColumnsCache = o.showVisibleColumns && isCache ? utils.storage.get('table_visible_columns_' + cacheName) : []
 
     // 表格可见列
     const tableVisibleColumns = ref(Array.isArray(visibleColumnsCache) ? visibleColumnsCache : _.uniq([...o.visibleColumns]))
 
-    // 表格工具栏节点
-    const tableToolbarRef = ref(null)
-
-    // 表格节点
-    const tableRef = ref(o.ref)
-
     // 表格加载状态
     const tableLoading = ref(o.loading)
 
@@ -232,10 +195,10 @@ function create(params) {
     const tableRows = ref(o.rows)
 
     // 表格翻页参数
-    const tablePagination = ref(o.pagination)
+    const tablePagination = ref($route.fullPath ? o.pagination : {})
 
     // 表格宫格
-    const tableGrid = ref(o.showGrid ? utils.storage.get(gridCacheName) === true : false)
+    const tableGrid = ref(o.showGrid && isCache ? utils.storage.get('table_grid_' + cacheName) === true : false)
 
     // 表格传参
     const tableQuery = ref({})
@@ -249,14 +212,6 @@ function create(params) {
     // 表格合计
     const tableSummary = ref(null)
 
-    // 如果在表格内部
-    if (inDialog) {
-        // 提交表格已选数据给对话框
-        $dialog.submit(function() {
-            return tableSelected.value
-        })
-    }
-
     const {
         // 原始参数
         rawQuery,
@@ -270,15 +225,14 @@ function create(params) {
     } = utils.$search.getRawData(tableColumns, Object.assign({}, $route.query), o.searchFromQuery)
 
     // 表格搜索数据值
-    const tableSearchValue = ref(firstTableSearchValue)
-
-    watch(tableSearchValue, function (val) {
-        console.log('tableSearchValue', val)
-    })
+    const tableSearchValue = ref($route.fullPath ? firstTableSearchValue : [])
 
     // 表格搜索参数
     const tableSearchOptions = ref()
 
+    // 是否已加载
+    let _isTableLoaded = false
+
     // ==========【计算属性】=============================================================================================
 
     /**
@@ -330,12 +284,12 @@ function create(params) {
     /**
      * 监听表格宫格模式
      */
-    if (o.showGrid) {
+    if (o.showGrid && isCache) {
         watch(tableGrid, function(val) {
 
             // 设置宫格模式缓存(永久缓存)
             // #if ! IS_DEV
-            utils.storage.set(gridCacheName, val, 0)
+            utils.storage.set('table_grid_' + cacheName, val, 0)
             // #endif
         })
     }
@@ -343,12 +297,12 @@ function create(params) {
     /**
      * 监听表格可见列
      */
-    if (o.showVisibleColumns) {
+    if (o.showVisibleColumns && isCache) {
         watch(tableVisibleColumns, function(val) {
 
             // 设置可见列缓存(永久缓存)
             // #if ! IS_DEV
-            utils.storage.set(visibleColumnsCacheName, val, 0)
+            utils.storage.set('table_visible_columns_' + cacheName, val, 0)
             // #endif
         })
     }
@@ -399,107 +353,240 @@ function create(params) {
      */
     watch(tableQuery, function (query) {
 
-        // 如果禁止从参数中获取搜索值
-        if (! o.searchFromQuery) {
-            tableRequestQuery = query
-            return
-        }
-
-        const newQuery = {}
-
         if (utils.isValidObject(query)) {
 
+            query = _.cloneDeep(query)
+
             // 搜索参数键值数组
             const searchQueryKey = []
 
-            utils.forEach(rawSearchOptions, function (item, index) {
-                // 如果传参在搜索参数中
-                if (_.has(query, item.name)) {
-                    // 设置单个搜索值
-                    setItemValue(tableSearchValue.value[index], utils.isRequired(query[item.name]) ? query[item.name] : '')
-                    // 设置参数中搜索的 key
-                    searchQueryKey.push(item.name)
+            // 搜索键值数组
+            const NSearchKeys = []
+            // 搜索数组
+            const NSearchValues = []
+
+            // 参数中是否有自定义搜索参数
+            const hasNSearch = _.has(query, 'n_search')
+            if (hasNSearch) {
+                // 删除在搜索中存在的参数键值
+                utils.forIn(query.n_search, function (item, key) {
+                    if (_.has(query, key)) {
+                        delete query[key]
+                    }
+                })
+            }
+
+            // 如果允许从参数中获取搜索值
+            if (o.searchFromQuery) {
+
+                utils.forEach(rawSearchOptions, function (item, index) {
+
+                    const valueItem = tableSearchValue.value[index]
+
+                    // 如果传参在搜素 n_search 参数中
+                    if (hasNSearch && _.has(query.n_search, item.name)) {
+                        const newSearchItem = query.n_search[item.name]
+                        if (utils.isValidArray(newSearchItem)) {
+                            valueItem[0].type = newSearchItem[0].type
+                            valueItem[0].value = newSearchItem[0].value
+
+                            if (newSearchItem.length > 1) {
+                                valueItem[1].type = newSearchItem[1].type
+                                valueItem[1].value = newSearchItem[1].value
+                            }
+                        }
+                        // 设置搜索的 key
+                        NSearchKeys.push(item.name)
+
+                    // 如果传参在搜索参数中
+                    } else if (_.has(query, item.name)) {
+                        // 设置单个搜索值
+                        setItemValue(valueItem, utils.isRequired(query[item.name]) ? query[item.name] : '')
+                        // 设置参数中搜索的 key
+                        searchQueryKey.push(item.name)
+                    }
+                })
+
+                utils.forEach(searchQueryKey, function (key) {
+                    delete query[key]
+                })
+
+                if (hasNSearch) {
+                    utils.forIn(query.n_search, function(item, key) {
+                        if (
+                            NSearchKeys.indexOf(key) === -1
+                            && utils.isValidArray(item)
+                        ) {
+                            item[0].field = key
+                            NSearchValues.push(item[0])
+
+                            if (item.length > 1) {
+                                item[1].field = key
+                                NSearchValues.push(item[1])
+                            }
+                        }
+                    })
                 }
-            })
 
-            if (! searchQueryKey.length) {
-                tableRequestQuery = query
-                return
+            } else {
+                utils.forIn(query.n_search, function(item, key) {
+                    if (utils.isValidArray(item)) {
+                        item[0].field = key
+                        NSearchValues.push(item[0])
+                        if (item.length > 1) {
+                            item[1].field = key
+                            NSearchValues.push(item[1])
+                        }
+                    }
+                })
             }
 
-            utils.forIn(query, function(val, key) {
-                if (searchQueryKey.indexOf(key) === -1) {
-                    newQuery[key] = val
-                }
-            })
+            if (NSearchValues.length) {
+                query.n_search = NSearchValues
+            } else if (hasNSearch) {
+                delete query.n_search
+            }
+
+            tableRequestQuery = query
+            return
         }
 
-        tableRequestQuery = newQuery
+        tableRequestQuery = {}
+
+    }, {
+        // 深度监听
+        deep: true,
     })
 
     // ==========【方法】================================================================================================
 
     /**
-     * 表格刷新
+     * 表格是否已加载
+     */
+    function isTableLoaded() {
+        return _isTableLoaded
+    }
+
+    /**
+     * 表格加载(只加载一次)
+     */
+    async function tableLoad() {
+
+        // 如果表格已加载过了
+        if (_isTableLoaded) {
+            // 则无任何操作
+            return
+        }
+
+        // 表格重新加载
+        await tableReload()
+    }
+
+    /**
+     * 表格重新加载
      */
-    function tableRefresh() {
+    async function tableReload() {
+
+        // 表格已加载
+        _isTableLoaded = true
+
+        if (! $route.fullPath) {
+            return
+        }
+
         // 请求表格合计
         if (o.summary) {
             isRequestSummary = true
         }
+
         // 请求表格数据
-        tableRef.value.requestServerInteraction()
+        // $tableRef?.requestServerInteraction({
+        //     pagination: o.pagination,
+        // })
+        await tableRequest({
+            pagination: o.pagination,
+        })
+
         // 清空表格已选数据
-        tableSelected.value = []
+        if (o.refreshResetSelected) {
+            tableSelected.value = []
+        }
     }
 
     /**
-     * 表格重新加载
+     * 表格刷新
      */
-    function tableReload() {
+    async function tableRefresh() {
+
+        if (! $route.fullPath) {
+            return
+        }
+
         // 请求表格合计
         if (o.summary) {
             isRequestSummary = true
         }
+
         // 请求表格数据
-        tableRef.value.requestServerInteraction({
-            pagination: o.pagination,
+        // $tableRef.requestServerInteraction()
+        await tableRequest({
+            pagination: tablePagination.value,
         })
+
         // 清空表格已选数据
-        tableSelected.value = []
+        if (o.refreshResetSelected) {
+            tableSelected.value = []
+        }
     }
 
     /**
      * 表格搜索重置
      */
-    function tableSearchReset() {
+    function tableSearchReset(reload = true) {
+
+        const newValue = []
+
+        utils.forEach(rawSearchOptions, function (item, index) {
+            // 如果该搜索条件是隐藏的
+            if (item.hide) {
+                newValue.push(tableSearchValue.value[index])
+            // 否则为初始值
+            } else {
+                newValue.push(rawTableSearchValue[index])
+            }
+        })
+
+        console.log('newValue', newValue)
 
         // 还原表格搜索数据
-        tableSearchValue.value = _.cloneDeep(rawTableSearchValue)
+        tableSearchValue.value = _.cloneDeep(newValue)
 
         // 表格重新加载
-        tableReload()
+        if (reload) {
+            tableReload().finally()
+        }
     }
 
     /**
-     * 请求数据
+     * 获取表格请求数据
      */
-    async function tableRequest(props) {
+    function getTableRequestData(props, isSummary = undefined) {
 
         // 解构数据
         const {
             // filter,
             pagination: {
+                // 页码
                 page,
+                // 每页的数据条数
                 rowsPerPage,
+                // 排序字段
                 sortBy,
+                // 是否降序排列
                 descending,
             }
         } = props
 
-        // 设置加载中
-        tableLoading.value = true
-
         // 请求数据
         const data = {
             // 页码
@@ -519,7 +606,7 @@ function create(params) {
         }
 
         // 合并参数
-        utils.forIn(Object.assign({}, rawQuery, tableRequestQuery), function(value, key) {
+        utils.forIn(Object.assign({}, rawQuery, tableRequestQuery, o.data), function(value, key) {
             // 如果有值
             if (utils.isRequired(value)) {
                 data[key] = value
@@ -529,15 +616,44 @@ function create(params) {
         // 获取搜索值
         const search = utils.$search.formatValue(rawSearchOptions, tableSearchValue.value)
         if (utils.isValidArray(search)) {
-            data.search = _.has(data, 'search') ? _.concat(data.search, search) : search
+            data.n_search = _.has(data, 'n_search') ? _.concat(data.n_search, search) : search
+        }
+
+        if (_.isNil(isSummary)) {
+            isSummary = isRequestSummary
         }
 
         // 如果请求表格合计
-        if (isRequestSummary) {
+        if (isSummary) {
             data.summary = 1
         }
 
-        // 请求数据
+        return data
+    }
+
+    /**
+     * 请求数据
+     */
+    async function tableRequest(props) {
+
+        // 解构数据
+        const {
+            // filter,
+            pagination: {
+                // 页码
+                page,
+                // 每页的数据条数
+                rowsPerPage,
+                // 排序字段
+                sortBy,
+                // 是否降序排列
+                descending,
+            }
+        } = props
+
+        // 获取表格请求数据
+        const data = getTableRequestData(props, isRequestSummary)
+
         let result
 
         // 如果有自定义请求方法
@@ -545,7 +661,6 @@ function create(params) {
             result = await utils.runAsync(o.request)({
                 data,
                 props,
-                tableRef,
                 rows: tableRows,
                 selected: tableSelected,
             })
@@ -553,8 +668,8 @@ function create(params) {
         // 否则请求服务器
         } else {
             const opts = Object.assign({
-                // 请求 - 登录
-                url: $route.fullPath,
+                // 请求数据
+                url: $route.path,
                 // 请求数据
                 data,
                 // ~~~~~~ 先开启防抖, 如果后期遇到表格加载不出来的情况, 再关闭防抖
@@ -562,14 +677,6 @@ function create(params) {
                 // debounce: false,
             }, o.httpSettings)
 
-            // 如果在对话框内部
-            if (inDialog) {
-                opts.headers = {
-                    // 添加头部查看请求
-                    Rview: 1,
-                }
-            }
-
             result = await utils.http(opts)
         }
 
@@ -607,7 +714,6 @@ function create(params) {
                 utils.forEach(rows, function(row) {
                     o.formatRow({
                         row,
-                        tableRef,
                         rows: tableRows,
                         selected: tableSelected,
                     })
@@ -628,33 +734,37 @@ function create(params) {
     /**
      * 单击表格行
      */
-    function tableRowClick(e, row, index) {
+    function tableRowClick(e, row) {
+
         // 如果选择类型为无
         if (o.selection === 'none') {
             // 则无任何操作
             return
         }
 
-        const opt = {}
-        opt[o.rowKey] = row[o.rowKey]
+        // 如果选择类型为单选
+        if (o.selection === 'single') {
+            tableSelected.value = [ row ]
+
+        // 否则为多选
+        } else {
 
-        // 获取当前数据索引
-        const itemIndex = _.findIndex(tableSelected.value, opt)
+            const opt = {}
+            opt[o.rowKey] = row[o.rowKey]
 
-        // 如果不存在, 则添加
-        if (itemIndex === -1) {
+            // 获取当前数据索引
+            const itemIndex = _.findIndex(tableSelected.value, opt)
 
-            // 如果选择类型为单选
-            if (o.selection === 'single') {
-                tableSelected.value = [row]
-            // 否则为多选
-            } else {
+            // 如果不存在
+            if (itemIndex === -1) {
+                // 则添加
                 tableSelected.value.push(row)
-            }
 
-        // 否则删除
-        } else {
-            tableSelected.value.splice(itemIndex, 1)
+            // 否则
+            } else {
+                // 删除
+                tableSelected.value.splice(itemIndex, 1)
+            }
         }
     }
 
@@ -669,16 +779,13 @@ function create(params) {
             return
         }
 
-        // 如果在对话框内部 && 如果是单选
-        if (inDialog && o.selection === 'single') {
-            tableSelected.value = [ row ]
-            $dialog.confirm()
-            return
-        }
-
-        // 有双击的权限按钮
-        if (tableDbClickPowerBtn && tableDbClickPowerBtn.value) {
-            tableToolbarRef.value?.onClick(tableDbClickPowerBtn.value, [ row ])
+        if (
+            // 有权限
+            hasPowr
+            // 有双击的权限按钮
+            && tableDbClickPowerBtn.value
+        ) {
+             $power.powerBtnClick(tableDbClickPowerBtn.value, [ row ])
         }
     }
 
@@ -689,6 +796,13 @@ function create(params) {
         tableSearchOptions.value = await utils.$search.getOptions(rawSearchOptions, format)
     }
 
+    /**
+     * 是否有表格搜索值
+     */
+    function hasTableSearchValue() {
+        return !! utils.$search.formatValue(rawSearchOptions, tableSearchValue.value).length
+    }
+
     // 如果开启搜索
     if (o.search) {
         // 设置表格搜索参数
@@ -699,10 +813,17 @@ function create(params) {
     // ==========【返回】=================================================================================================
 
     const resTable = {
-        // 表格工具栏节点
-        tableToolbarRef,
-        // 表格节点
-        tableRef,
+        // 当前路由全路径
+        routeFullPath: $route.fullPath,
+        // 当前路由路径
+        routePath: $route.path,
+        // 当前路由参数
+        routeQuery: $route.query,
+        // 获取当前路由
+        getRoute() {
+            return $route
+        },
+
         // 表格加载状态
         tableLoading,
         // 表格 id key
@@ -739,25 +860,36 @@ function create(params) {
         // 表格搜索参数
         tableSearchOptions,
 
-        // 表格刷新
-        tableRefresh,
+        // 表格是否已加载
+        isTableLoaded,
+        // 表格加载(只加载一次)
+        tableLoad,
         // 表格重新加载
         tableReload,
+        // 表格刷新
+        tableRefresh,
+        // 表格搜索重置
+        tableSearchReset,
+        // 获取表格请求数据
+        getTableRequestData,
         // 表格请求数据
         tableRequest,
         // 表格单击表格行
         tableRowClick,
         // 表格双击表格行
         tableRowDblclick,
-        // 表格搜索重置
-        tableSearchReset,
         // 设置表格搜索参数
         setTableSearchOptions,
+
+        // 是否有表格搜索值
+        hasTableSearchValue,
     }
 
-    $power.update(function(data, _data) {
-        _data.$table = resTable
-    })
+    if (hasPowr) {
+        $power.update(function(data, _data) {
+            _data.$table = resTable
+        })
+    }
 
     // 提供可以被后代组件注入的值
     provide(NTableKey, resTable)