@netang/quasar 0.0.30 → 0.0.32

package/components/render/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <slot
+        :query="query"
+        v-bind="props"
+        v-if="$slots.default"
+    />
+    <component
+        :is="comp"
+        :query="query"
+        v-bind="props"
+        v-else
+    />
+</template>
+
+<script>
+import { computed, defineAsyncComponent, provide } from 'vue'
+
+import routers from '@/router/routers'
+import components from './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
+        })
+
+        // ==========【注入】============================================================================================
+
+        // 向后代注入数据
+        provide(NRenderKey, {
+            // 组件标识
+            name: props.name,
+            // 路由路径
+            path: utils.isValidString(props.path) ? utils.slash(props.path, 'start', true) : '',
+            // 参数
+            query: utils.isValidObject(props.query) ? props.query : {},
+            // 组件传参
+            props: props.props,
+        })
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 组件
+            comp,
+        }
+    }
+}
+</script>

package/components/splitter/index.vue

@@ -0,0 +1,112 @@
+<template>
+    <!-- 拆分器 -->
+    <q-splitter
+        v-model="currentValue"
+        v-bind="$attrs"
+        v-if="$slots.before && $slots.after"
+    >
+        <!-- 插槽 -->
+        <template
+            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>
+import { computed, ref, watch } from 'vue'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NSplitter',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: {
+            type: Number,
+            required: true,
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit, slots }) {
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
+        })
+
+        // ==========【数据】============================================================================================
+
+        // 当前值
+        const currentValue = ref(props.modelValue)
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(()=>props.modelValue, function (val) {
+
+            // 如果值有变化
+            if (val !== currentValue.value) {
+
+                // 更新当前值
+                currentValue.value = val
+            }
+        })
+
+        /**
+         * 监听值
+         */
+        watch(currentValue, function (val) {
+
+            // 更新值
+            emit('update:modelValue', val)
+        })
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 插槽标识
+            slotNames,
+            // 当前值
+            currentValue,
+        }
+    }
+}
+</script>

package/components/table/index.vue

@@ -8,12 +8,15 @@
         container
     >
         <!-- 头部 -->
-        <n-toolbar header />
+        <n-toolbar
+            :dense="dense"
+            header
+        />
 
         <!-- 左侧分类 -->
         <n-drawer
             :model-value="true"
-            side="left"
+            :side="treeSide"
             :width="200"
             :min-width="150"
             bordered
@@ -75,6 +78,7 @@
                     @request="tableRequest"
                     flat
                     virtual-scroll
+                    :dense="dense"
                 >
                     <!-- 图片 -->
                     <template
@@ -130,7 +134,7 @@
         <!-- 右侧搜索 -->
         <n-drawer
             :model-value="true"
-            side="right"
+            :side="searchSide"
             :min-width="320"
             bordered
             drag
@@ -187,6 +191,21 @@ export default {
         treeFilter: Boolean,
         // 不显示搜索
         noSearch: Boolean,
+        // 树位置
+        treeSide: {
+            type: String,
+            default: 'left',
+        },
+        // 搜索位置
+        searchSide: {
+            type: String,
+            default: 'right',
+        },
+        // 紧凑模式
+        dense: {
+            type: Boolean,
+            default: true,
+        },
     },
 
     /**

package/components/table-column-fixed/index.vue

@@ -6,9 +6,10 @@
                 :key="`btn-item-${item.id}`"
                 class="n-button-icon"
                 :icon="item.icon"
-                @click.prevent.stop="onClick(item)"
+                dense
                 unelevated
                 round
+                @click.prevent.stop="onClick(item)"
             >
                 <!-- 标题提示 -->
                 <q-tooltip>{{item.title}}</q-tooltip>

package/components/toolbar/index.vue

@@ -93,6 +93,8 @@ export default {
     props: {
         // 是否头部
         header: Boolean,
+        // 紧凑模式
+        dense: Boolean,
     },
 
     /**

package/package.json

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

package/sass/quasar/table.scss

@@ -11,6 +11,16 @@ $dark-td-bg-color: $dark;
 
 .n-table {
 
+    &.q-table {
+        &--dense {
+            thead tr,
+            tbody tr,
+            tbody td {
+                height: 40px;
+            }
+        }
+    }
+
     // 宫格模式
     &--grid {
         background-color: rgba(var(--n-reverse-color-rgb), 0.1);

package/utils/$table.js

@@ -9,7 +9,7 @@ import {
     setItemValue,
 } from './$search'
 
-import { NPowerKey, NTableKey, NDialogKey } from './symbols'
+import { NPowerKey, NTableKey } from './symbols'
 
 /**
  * 创建表格
@@ -67,8 +67,6 @@ function create(params) {
         request: null,
         // 格式化单条数据
         formatRow: null,
-        // 格式化参数
-        // formatQuery: null,
         // http 设置
         httpSettings: {},
         // 是否开启初始搜素
@@ -85,6 +83,11 @@ function create(params) {
         cache: true,
         // 刷新后清空已选数据
         refreshResetSelected: true,
+
+        // 单击表格行事件
+        rowClick: null,
+        // 双击表格行事件
+        rowDblClick: null,
     }, params)
 
     // 获取权限注入
@@ -732,7 +735,7 @@ function create(params) {
     /**
      * 单击表格行
      */
-    function tableRowClick(e, row) {
+    function _tableRowClick(e, row) {
 
         // 如果选择类型为无
         if (o.selection === 'none') {
@@ -763,11 +766,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 +797,16 @@ function create(params) {
              $power.powerBtnClick(tableDbClickPowerBtn.value, [ row ])
         }
     }
+    function tableRowDblclick(...e) {
+
+        // 双击表格行
+        _tableRowDblclick(...e)
+
+        // 如果有自定义双击表格行事件
+        if (_.isFunction(o.tableRowDblclick)) {
+            o.tableRowDblclick(...e)
+        }
+    }
 
     /**
      * 设置表格搜索参数

package/utils/price.js

@@ -1,13 +1,13 @@
-/**
- * 换算金额
- */
-utils.price = function(value, params) {
-    return utils.decimal(value, Object.assign({
-        // 最小值
-        min: 0,
-        // 小数点位数
-        decimalLength: 2,
-        // 是否开启人民币分转元(如值 189 -> 1.89)
-        centToYuan: utils.config('priceCent') === true,
-    }, params))
-}
+/**
+ * 换算金额
+ */
+utils.price = function(value, params) {
+    return utils.decimal(value, Object.assign({
+        // 最小值
+        min: 0,
+        // 小数点位数
+        decimalLength: 2,
+        // 是否开启人民币分转元(如值 189 -> 1.89)
+        centToYuan: utils.config('priceCent') === true,
+    }, params))
+}

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_'