@netang/quasar 0.0.41 → 0.0.43

package/components/splitter/index.vue

@@ -97,9 +97,11 @@ export default {
 
         // 初始显示前置插槽
         let rawBefore = props.before
+        let initEmitBefore = true
 
         // 初始显示后置插槽
         let rawAfter = props.after
+        let initEmitAfter = true
 
         // 如果开启缓存
         if (props.cache) {
@@ -108,14 +110,15 @@ export default {
             cacheName = `splitter:${props.cache === true ? ($power && $power.routePath ? $power.routePath : utils.router.getRoute('path')) : props.cache}:`
 
             // 从缓存获取初始值
-            let cache = utils.storage.get(cacheName + 'value')
+            let cache = utils.storage.get(cacheName + 'modelValue')
             if (cache !== null) {
                 rawValue = cache
             }
 
-            // 如果在手机模式
+            // 如果手机模式隐藏前置插槽
             if (props.hideBeforeInMobile && $q.platform.is.mobile) {
                 rawBefore = false
+                initEmitBefore = false
 
             } else {
                 // 从缓存获取初始值
@@ -125,11 +128,10 @@ export default {
                 }
             }
 
-            // 如果在手机模式
+            // 如果手机模式隐藏后置插槽
             if (props.hideAfterInMobile && $q.platform.is.mobile) {
                 rawAfter = false
-
-                console.log(777, rawAfter)
+                initEmitAfter = false
 
             } else {
                 // 从缓存获取初始值
@@ -139,19 +141,19 @@ export default {
                 }
             }
 
-            console.log(222, rawAfter)
-
         // 如果在手机模式
         } else if ($q.platform.is.mobile) {
 
             // 手机模式隐藏前置插槽
             if (props.hideBeforeInMobile) {
                 rawBefore = false
+                initEmitBefore = false
             }
 
-            // 手机模式隐藏后插槽
+            // 手机模式隐藏后置插槽
             if (props.hideAfterInMobile) {
                 rawAfter = false
+                initEmitAfter = false
             }
         }
 
@@ -160,14 +162,21 @@ export default {
 
         // 当前值
         const currentValue = ref(rawValue)
+        if (rawValue !== props.modelValue) {
+            emit('update:modelValue', rawValue)
+        }
 
         // 当前是否显示前置插槽
         const currentBefore = ref(rawBefore)
-
-        console.log(333, rawAfter)
+        if (initEmitBefore) {
+            emit('update:before', rawBefore)
+        }
 
         // 当前是否显示后置插槽
         const currentAfter = ref(rawAfter)
+        if (initEmitAfter) {
+            emit('update:after', rawAfter)
+        }
 
         // ==========【计算属性】=========================================================================================
 

package/components/splitter-table/index.vue

@@ -0,0 +1,243 @@
+<template>
+    <n-splitter
+        class="absolute-full"
+        @update:after="setSelection"
+        :hide-after-in-mobile="hideAfterInMobile"
+        v-bind="$attrs"
+    >
+        <!-- 表格 -->
+        <template v-slot:before="{ after, toggleAfter }">
+            <n-table
+                v-bind="tableProps"
+            >
+                <!-- 工具栏右边插槽(手机端不显示) -->
+                <template #toolbar-right v-if="isWatcher">
+
+                    <!-- 是否显示详情 -->
+                    <q-toggle
+                        icon="apps"
+                        :model-value="after"
+                        @click="toggleAfter"
+                    >
+                        <q-tooltip anchor="center left" self="center right" :offset="[10, 0]">{{tooltip}}</q-tooltip>
+                    </q-toggle>
+
+                </template>
+
+                <!-- 插槽 -->
+                <template
+                    v-for="slotName in slotNames"
+                    v-slot:[slotName]="props"
+                >
+                    <!-- 有传参的插槽 -->
+                    <slot
+                        :name="slotName"
+                        v-bind="props"
+                        v-if="props"
+                    />
+
+                    <!-- 无传参的插槽 -->
+                    <slot
+                        :name="slotName"
+                        v-else
+                    />
+                </template>
+
+            </n-table>
+        </template>
+
+        <!-- 渲染详情页面(手机端不显示) -->
+        <template v-slot:after>
+
+            <!-- 渲染 -->
+            <n-render
+                :path="path"
+                :query="currentQuery"
+                v-if="currentQuery"
+            />
+
+            <!-- 空状态 -->
+            <n-empty
+                :description="description"
+                v-else
+            />
+
+        </template>
+
+    </n-splitter>
+</template>
+
+<script>
+import { nextTick, ref, watch, computed, inject } from 'vue'
+import { useQuasar } from 'quasar'
+
+import { NTableKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NSplitterTable',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 表格声明参数
+        tableProps: Object,
+        // 手机模式隐藏后插槽
+        hideAfterInMobile: {
+            type: Boolean,
+            default: true,
+        },
+        // 空状态描述
+        description: {
+            type: String,
+            default: '没有找到任何数据',
+        },
+        // 渲染组件路径
+        path: {
+            type: String,
+            required: true,
+        },
+        // 格式化已选表格的数据并返回渲染组件参数
+        format: Function,
+        // 工具提示
+        tooltip: {
+            type: String,
+            default: '是否显示详情',
+        },
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props, { slots }) {
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
+        })
+
+        /**
+         * 是否监听
+         */
+        const isWatcher = computed(function () {
+            return ! props.hideAfterInMobile || ! $q.platform.is.mobile
+        })
+
+        /**
+         * 当前传参
+         */
+        const currentQuery = computed(function() {
+
+            // 如果有已选数据
+            if (
+                currentSelectedItem.value
+                && _.isFunction(props.format)
+            ) {
+                const res = props.format(currentSelectedItem.value)
+                if (utils.isValidObject(res)) {
+
+                    // 格式化已选数据, 并返回参数
+                    return Object.assign({
+                        // 是否为渲染页面
+                        n_render_page: 1,
+                    }, res)
+                }
+            }
+
+            return null
+        })
+
+        // ==========【数据】=============================================================================================
+
+        // quasar 对象
+        const $q = useQuasar()
+
+        // 获取表格注入
+        const $table = inject(NTableKey)
+
+        // 当前已选单条数据
+        const currentSelectedItem = ref(null)
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听表格已选数据(非手机端有效)
+         */
+        watch($table.tableSelected,  async function (selected) {
+
+            // 先清空当前已选单条数据
+            currentSelectedItem.value = null
+
+            // 如果不监听
+            if (! isWatcher.value) {
+
+                // 则无需任何操作
+                return
+            }
+
+            // 下次 DOM 更新
+            await nextTick()
+
+            // 如果有已选单条数据
+            if (selected.length === 1) {
+
+                // 设置当前已选数据
+                currentSelectedItem.value = selected[0]
+            }
+
+        }, {
+            // 深度监听
+            deep: true,
+        })
+
+        // ==========【方法】============================================================================================
+
+        /**
+         * 设置表格选择类型
+         */
+        function setSelection(showAfter) {
+
+            // 如果不监听
+            if (! isWatcher.value) {
+
+                // 则无需任何操作
+                return
+            }
+
+            const selection = showAfter ? 'single' : 'multiple'
+            if ($table.tableSelection.value !== selection) {
+                $table.tableSelection.value = selection
+
+                // 如果显示后置插槽
+                if (showAfter && $table.tableSelected.value.length > 1) {
+
+                    // 如果有多条已选数据, 则只取第一条数据
+                    $table.tableSelected.value = [ $table.tableSelected.value[0] ]
+                }
+            }
+        }
+
+        // ==========【返回】=========================================================================================
+
+        return {
+            // 插槽标识
+            slotNames,
+            // 是否监听
+            isWatcher,
+            // 当前传参
+            currentQuery,
+
+            // 设置表格选择类型
+            setSelection,
+        }
+    }
+}
+</script>

package/package.json

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