@netang/quasar 0.0.31 → 0.0.33

package/components/dialog/index.vue

@@ -54,7 +54,7 @@ import { useDialogPluginComponent, useQuasar } from 'quasar'
 
 import routers from '@/router/routers'
 
-import components from './components'
+import components from '../private/components'
 import { NDialogKey } from '../../utils/symbols'
 
 export default {

package/components/empty/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="q-pa-lg flex flex-center absolute-full">
-        {{emptyDescription || '发生未知错误'}}
+        {{description || '发生未知错误'}}
     </div>
 </template>
 
@@ -17,7 +17,7 @@ export default {
      */
     props: {
         // 空状态描述
-        emptyDescription: String,
+        description: String,
     },
 }
 </script>

package/components/field-table/index.vue

@@ -160,6 +160,7 @@
 
 <script>
 import { ref, computed, watch, onMounted, onUpdated } from 'vue'
+import { NRenderKey } from '../../utils/symbols'
 
 export default {
 

package/components/power-page/index.vue

@@ -4,7 +4,7 @@
     >
         <!-- 空数据 -->
         <n-empty
-            :empty-description="emptyDescription"
+            :description="emptyDescription"
             v-if="pageStatus === false"
         />
 

package/components/render/index.vue

@@ -0,0 +1,136 @@
+<template>
+    <q-layout
+        class="absolute-full"
+        view="hHh lpr fFf"
+        container
+    >
+        <q-page-container>
+            <slot
+                :query="query"
+                v-bind="props"
+                v-if="$slots.default"
+            />
+            <component
+                :is="comp"
+                :query="query"
+                v-bind="props"
+                v-else
+            />
+        </q-page-container>
+    </q-layout>
+</template>
+
+<script>
+import { computed, defineAsyncComponent, provide } from 'vue'
+
+import routers from '@/router/routers'
+import components from '../private/components'
+
+import { NRenderKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NRender',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 组件标识
+        name: String,
+        // 组件路径
+        path: String,
+        // 参数
+        query: Object,
+        // 组件传参
+        props: Object,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 获取当前组件
+         */
+        const comp = computed(function () {
+
+            // 组件
+            let comp
+
+            // 如果是路由路径
+            if (props.path) {
+                // 获取路由组件
+                comp = _.get(routers, `${utils.slash(props.path, 'start', false)}.component`)
+
+            // 如果有组件标识
+            } else if (props.name && _.has(components, props.name)) {
+                // 获取自定义组件
+                comp = components[props.name]
+            }
+
+            // 如果没有组件
+            if (! comp) {
+                return
+            }
+
+            // 如果是方法, 则说明是异步组件
+            if (_.isFunction(comp)) {
+                return defineAsyncComponent(comp)
+            }
+
+            // 返回组件
+            return comp
+        })
+
+        // ==========【注入】============================================================================================
+
+        // 注入数据
+        const data = {
+            // 组件标识
+            name: props.name,
+            // 参数
+            query: utils.isValidObject(props.query) ? props.query : {},
+            // 组件传参
+            props: props.props,
+        }
+
+        // 如果有路由路径
+        if (utils.isValidString(props.path)) {
+
+            // 获取页面路由
+            const $route = utils.router.resolve({
+                path: props.path,
+                query: data.query,
+            })
+
+            Object.assign(data, {
+                // 当前路由全路径
+                routeFullPath: $route.fullPath,
+                // 当前路由路径
+                routePath: $route.path,
+                // 当前路由参数
+                routeQuery: $route.query,
+                // 当前路由,
+                $route,
+            })
+        }
+
+        // 向后代注入数据
+        provide(NRenderKey, data)
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 组件
+            comp,
+        }
+    }
+}
+</script>

package/components/search/index.vue

@@ -74,18 +74,6 @@
 
                             <!-- 输入框 -->
                             <template v-else-if="item.searchType === 'input'">
-                                <!-- 输入框 数字 -->
-                                <n-input-number
-                                    class="n-field-fieldset"
-                                    :label="label"
-                                    v-model="modelValue[itemIndex][index].value"
-                                    dense
-                                    outlined
-                                    clearable
-                                    v-bind="item.input"
-                                    v-if="item.type === 'number'"
-                                />
-                                <!-- 输入框 文字 -->
                                 <q-input
                                     class="n-field-fieldset"
                                     :label="label"
@@ -94,7 +82,6 @@
                                     outlined
                                     clearable
                                     v-bind="item.input"
-                                    v-else
                                 />
                             </template>
 
@@ -176,8 +163,6 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-
 export default {
 
     /**

package/components/search-item/index.vue

@@ -161,28 +161,20 @@ export default {
         /**
          * 监听声明值
          */
-        if (utils.indexOf(['select', 'tree'], props.data.searchType) > -1) {
-
-            watch(()=>props.modelValue[0].type, function(val) {
-
-                const modelValue = _.cloneDeep(props.modelValue)
-
-                // 如果类型为 in / not in, 则为多选
-                if (utils.indexOf([dicts.SEARCH_TYPE__IN, dicts.SEARCH_TYPE__NOT_IN], val) > -1) {
-
-                    // 如果值不为数组
-                    if (! Array.isArray(modelValue[0].value)) {
-                        modelValue[0].value = utils.isValidValue(modelValue[0].value) ? [modelValue[0].value] : []
-                        emit('update:modelValue', modelValue)
-                    }
-
-                // 否则为单选, 并且如果值为数组
-                } else if (Array.isArray(modelValue[0].value)) {
-                    modelValue[0].value = utils.isValidValue(modelValue[0].value[0]) ? modelValue[0].value[0] : ''
-                    emit('update:modelValue', modelValue)
+        watch(()=>props.modelValue[0].type, function(val) {
+            // 如果类型不为 in / not in, 为单选
+            if (utils.indexOf([dicts.SEARCH_TYPE__IN, dicts.SEARCH_TYPE__NOT_IN], val) === -1) {
+                const arr = utils.split(props.modelValue[0].value, ',')
+                if (arr.length !== 1) {
+                    // 克隆值
+                    const _modelValue = _.cloneDeep(props.modelValue)
+
+                    // 更新值
+                    _modelValue[0].value = arr.length > 1 ? arr[0] : ''
+                    emit('update:modelValue', _modelValue)
                 }
-            })
-        }
+            }
+        })
 
         // ==========【返回】=============================================================================================
 

package/components/splitter/index.vue

@@ -1,24 +1,31 @@
 <template>
-    <!-- 默认插槽 -->
-    <slot
-        :name="currentSlot.defaultName"
-        v-if="!! currentSlot.defaultName"
-    />
-
     <!-- 拆分器 -->
     <q-splitter
         v-model="currentValue"
         v-bind="$attrs"
-        v-else
+        v-if="$slots.before && $slots.after"
     >
         <!-- 插槽 -->
         <template
-            v-for="slotName in currentSlot.keys"
+            v-for="slotName in slotNames"
             v-slot:[slotName]
         >
             <slot :name="slotName" />
         </template>
     </q-splitter>
+
+    <!-- before 插槽 -->
+    <slot
+        name="before"
+        v-else-if="$slots.before"
+    />
+
+    <!-- after 插槽 -->
+    <slot
+        name="after"
+        v-else-if="$slots.after"
+    />
+
 </template>
 
 <script>
@@ -57,33 +64,10 @@ export default {
         // ==========【计算属性】=========================================================================================
 
         /**
-         * 当前插槽
+         * 插槽标识
          */
-        const currentSlot = computed(function() {
-
-            let keys = []
-            let defaultName = ''
-
-            if (utils.isValidObject(slots)) {
-
-                keys = Object.keys(slots)
-
-                const hasBefore = _.has(slots, 'before')
-                const hasAfter = _.has(slots, 'after')
-
-                if (hasBefore) {
-                    if (! hasAfter) {
-                        defaultName = 'before'
-                    }
-                } else if (hasAfter && ! hasBefore) {
-                    defaultName = 'after'
-                }
-            }
-
-            return {
-                keys,
-                defaultName,
-            }
+        const slotNames = computed(function() {
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
         })
 
         // ==========【数据】============================================================================================
@@ -118,8 +102,8 @@ export default {
         // ==========【返回】=============================================================================================
 
         return {
-            // 当前插槽
-            currentSlot,
+            // 插槽标识
+            slotNames,
             // 当前值
             currentValue,
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/utils/$power.js

@@ -2,7 +2,7 @@ import { provide, inject, ref, computed } from 'vue'
 import { useQuasar } from 'quasar'
 
 import { statePower } from '../store'
-import { NPowerKey, NFormKey, NTableKey } from './symbols'
+import { NRenderKey, NPowerKey, NFormKey, NTableKey } from './symbols'
 
 /**
  * 创建权限实例
@@ -23,6 +23,10 @@ function create(params) {
         emptyDescription: '',
         // 是否开启权限
         power: true,
+        // 是否显示权限按钮
+        showPowerBtns: true,
+        // 是否显示工具栏权限按钮
+        showToolbarPowerBtns: true,
         // 左边侧滑菜单图标
         leftDrawerIcon: 'format_list_bulleted',
         // 右边侧滑菜单图标
@@ -38,25 +42,51 @@ function create(params) {
         requestAfter: null,
     }, params)
 
-    // 获取权限路由
-    const $route = o.path === false
-        // 如果没有路由
-        ? {
+    // 获取渲染注入
+    const $render = inject(NRenderKey)
+
+    // 如果有渲染注入
+    const hasRender = !! $render
+    if (hasRender) {
+        // 如果有权限传参, 则合并参数
+        const powerProps = _.get($render, 'props.powerProps')
+        if (utils.isValidObject(powerProps)) {
+            _.merge(o, powerProps)
+        }
+    }
+
+    // 权限路由
+    let $route
+
+    // 如果没有路由
+    if (o.path === false) {
+
+        // 设为空路由
+        $route = {
             fullPath: '',
             path: '',
             query: utils.isValidObject(o.query) ? o.query : {},
         }
-        // 否则获取路由
-        : (
-            utils.isValidString(o.path) ?
-                // 如果为自定义路由
-                utils.router.resolve({
-                    path: o.path,
-                    query: utils.isValidObject(o.query) ? o.query : {},
-                })
-                // 否则获取当前路由
-                : utils.router.getRoute()
-        )
+
+    // 如果有自定义路径
+    } else if (utils.isValidString(o.path)) {
+
+        // 获取自定义路由
+        $route = utils.router.resolve({
+            path: o.path,
+            query: utils.isValidObject(o.query) ? o.query : {},
+        })
+
+    // 如果在渲染组件内 && 该渲染组件有自定义路由
+    } else if (hasRender && _.has($render, '$route')) {
+
+        // 设为渲染组件的路由
+        $route = $render.$route
+
+    // 否则获取当前路由
+    } else {
+        $route = utils.router.getRoute()
+    }
 
     // quasar 对象
     const $q = useQuasar()
@@ -165,12 +195,16 @@ function create(params) {
             // 当前页面权限
             data.powerPage = res.page
             // 当前页面权限按钮
-            data.powerBtns = ref(res.btns)
+            data.powerBtns = ref(o.showPowerBtns ? res.btns : [])
             // 当前页面工具栏权限按钮
             data.toolbarPowerBtns = computed(function() {
 
-                // 有权限按钮数据
-                if (utils.isValidArray(data.powerBtns.value)) {
+                if (
+                    // 如果显示工具栏权限按钮
+                    o.showToolbarPowerBtns
+                    // 有权限按钮数据
+                    && utils.isValidArray(data.powerBtns.value)
+                ) {
 
                     const lists = _.filter(formatBtns(data.powerBtns.value), e => e.type > 2)
 
@@ -673,7 +707,7 @@ function getRequestQuery(o) {
         }
     }
 
-    return _.merge({}, query)
+    return _.cloneDeep(utils.numberDeep(query))
 }
 
 /**
@@ -696,15 +730,25 @@ function formatQuery(query, isJoinArr) {
 
         // 如果是数组
         } else if (utils.isValidArray(value)) {
+
             const arr = []
             for (const val of value) {
-                // 如果是数字
-                if (utils.isNumeric(val)) {
-                    arr.push(_.isNumber(val) ? val : Number(val))
 
-                // 如果是字符串
-                } else if (utils.isValidString(val)) {
-                    arr.push(utils.trimString(val))
+                // 如果为有效值
+                if (utils.isRequired(val)) {
+
+                    // 如果是数字
+                    if (utils.isNumeric(val)) {
+                        arr.push(_.isNumber(val) ? val : Number(val))
+
+                    // 如果是字符串
+                    } else if (utils.isValidString(val)) {
+                        arr.push(utils.trimString(val))
+
+                    // 否则为数组或对象
+                    } else {
+                        arr.push(val)
+                    }
                 }
             }
             if (arr.length) {

package/utils/$search.js

@@ -25,7 +25,14 @@ export function setItemValue(value, val) {
         // 比较类型为 in
         value[0].type = dicts.SEARCH_TYPE__IN
         // 设置值为将数组转为逗号分隔的字符串
-        value[0].value = val.join(',')
+        value[0].value = utils.join(val, ',')
+
+    // 如果值是逗号隔开
+    } else if (utils.split(val, ',').length > 1) {
+        // 比较类型为 in
+        value[0].type = dicts.SEARCH_TYPE__IN
+        // 设置值为将数组转为逗号分隔的字符串
+        value[0].value = val
 
     // 否则为单个值
     } else {

package/utils/$table.js

@@ -9,7 +9,7 @@ import {
     setItemValue,
 } from './$search'
 
-import { NPowerKey, NTableKey, NDialogKey } from './symbols'
+import { NRenderKey, NPowerKey, NTableKey } from './symbols'
 
 /**
  * 创建表格
@@ -67,8 +67,6 @@ function create(params) {
         request: null,
         // 格式化单条数据
         formatRow: null,
-        // 格式化参数
-        // formatQuery: null,
         // http 设置
         httpSettings: {},
         // 是否开启初始搜素
@@ -85,8 +83,25 @@ function create(params) {
         cache: true,
         // 刷新后清空已选数据
         refreshResetSelected: true,
+
+        // 单击表格行事件
+        rowClick: null,
+        // 双击表格行事件
+        rowDblClick: null,
     }, params)
 
+    // 获取渲染注入
+    const $render = inject(NRenderKey)
+
+    // 如果有渲染注入
+    if (!! $render) {
+        // 如果有表格传参, 则合并参数
+        const tableProps = _.get($render, 'props.tableProps')
+        if (utils.isValidObject(tableProps)) {
+            _.merge(o, tableProps)
+        }
+    }
+
     // 获取权限注入
     const $power = _.has(params, '$power') ? params.$power : inject(NPowerKey)
     const hasPowr = !! $power
@@ -732,7 +747,7 @@ function create(params) {
     /**
      * 单击表格行
      */
-    function tableRowClick(e, row) {
+    function _tableRowClick(e, row) {
 
         // 如果选择类型为无
         if (o.selection === 'none') {
@@ -763,11 +778,21 @@ function create(params) {
             tableSelected.value.splice(itemIndex, 1)
         }
     }
+    function tableRowClick(...e) {
+
+        // 单击表格行
+        _tableRowClick(...e)
+
+        // 如果有自定义单击事件
+        if (_.isFunction(o.rowClick)) {
+            o.rowClick(...e)
+        }
+    }
 
     /**
      * 双击表格行
      */
-    function tableRowDblclick(e, row) {
+    function _tableRowDblclick(e, row) {
 
         // 如果选择类型为无
         if (o.selection === 'none') {
@@ -784,6 +809,16 @@ function create(params) {
              $power.powerBtnClick(tableDbClickPowerBtn.value, [ row ])
         }
     }
+    function tableRowDblclick(...e) {
+
+        // 双击表格行
+        _tableRowDblclick(...e)
+
+        // 如果有自定义双击表格行事件
+        if (_.isFunction(o.tableRowDblclick)) {
+            o.tableRowDblclick(...e)
+        }
+    }
 
     /**
      * 设置表格搜索参数

package/utils/symbols.js

@@ -1,3 +1,4 @@
+export const NRenderKey = '_n_render_'
 export const NPowerKey = '_n_power_'
 export const NLayoutKey = '_n_layout_'
 export const NTableKey = '_n_table_'