@netang/quasar 0.0.20 → 0.0.22

package/components/toolbar/index.vue

@@ -1,46 +1,45 @@
 <template>
     <container
         :header="header"
+        v-if="toolbarPowerBtns.length"
     >
         <q-toolbar>
 
-            <!-- 左边按钮-->
+            <!-- 左边侧滑菜单切换按钮-->
             <q-btn
-                :icon="leftIcon"
+                :icon="leftDrawer.icon"
                 dense
                 round
                 flat
-                @click="layoutData.left.toggle"
-                v-if="hiddenLeft ? ! layoutData.left.show() : (layoutData.left.data !== null)"
+                @click="leftDrawer.toggle"
+                v-if="leftDrawer.showButton()"
             />
 
             <!-- 左边插槽 -->
             <slot name="left" />
 
-            <!-- 中间插槽 -->
+            <!-- 中间权限按钮 -->
             <q-toolbar-title>
-                <q-scroll-area style="height:50px;" v-if="! inDialog">
+                <q-scroll-area style="height:50px;">
                     <div class="n-toolbar__body">
 
-                            <!-- 权限按钮 -->
-                            <template v-for="item in currentRoleBtnLists">
-                                <q-btn
-                                    class="n-button-icon"
-                                    :color="item.color"
-                                    :outline="item.color === 'default'"
-                                    :label="item.title"
-                                    :icon="item.icon"
-                                    v-if="! item.hidden"
-                                    v-show="item.show"
-                                    @click="onClick(item, tableSelected)"
-                                    unelevated
-                                />
-                            </template>
-
-                            <!-- 插槽 -->
-                            <slot />
+                        <!-- 权限按钮 -->
+                        <template v-for="item in toolbarPowerBtns">
+                            <q-btn
+                                class="n-button-icon"
+                                :color="item.color"
+                                :outline="item.color === 'default'"
+                                :label="item.title"
+                                :icon="item.icon"
+                                v-if="! item.hidden"
+                                v-show="item.show"
+                                @click="powerBtnClick(item, tableSelected)"
+                                unelevated
+                            />
+                        </template>
 
-                        <!--</div>-->
+                        <!-- 中间权限按钮插槽 -->
+                        <slot />
                     </div>
                 </q-scroll-area>
             </q-toolbar-title>
@@ -48,77 +47,30 @@
             <!-- 右边插槽 -->
             <slot name="right" />
 
-            <!-- 表格筛选列按钮-->
-            <q-btn
-                icon="checklist"
-                dense
-                round
-                flat
-                v-if="tableColumns"
-            >
-                <q-menu
-                    self="top middle"
-                    :offset="[0, 8]"
-                >
-                    <q-list style="min-width: 250px" dense bordered>
-
-                        <!-- 表格宫格 -->
-                        <template v-if="tableGrid !== null">
-                            <q-item
-                                clickable
-                                @click="onTableGrid"
-                            >
-                                <q-item-section>宫格模式</q-item-section>
-                                <q-item-section side>
-                                    <q-icon
-                                        size="xs"
-                                        name="check"
-                                        v-show="tableGrid"
-                                    />
-                                </q-item-section>
-                            </q-item>
-                            <q-separator />
-                        </template>
+            <!-- 表格筛选可见列按钮 -->
+            <table-visible-columns-button v-if="hasTable" />
 
-                        <!-- 筛选表格列 -->
-                        <q-item
-                            v-for="item in tableColumns"
-                            clickable
-                            @click="onTableVisible(item)"
-                        >
-                            <q-item-section>{{item.label}}</q-item-section>
-                            <q-item-section side>
-                                <q-icon
-                                    size="xs"
-                                    name="check"
-                                    v-show="utils.indexOf(tableVisibleColumns, item.name) > -1"
-                                />
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </q-menu>
-            </q-btn>
-
-            <!-- 右边按钮-->
+            <!-- 右边侧滑菜单切换按钮-->
             <q-btn
-                :icon="rightIcon"
+                :icon="rightDrawer.icon"
                 dense
                 round
                 flat
-                @click="layoutData.right.toggle"
-                v-if="hiddenRight ? ! layoutData.right.show() : (layoutData.right.data !== null)"
+                @click="rightDrawer.toggle"
+                v-if="rightDrawer.showButton()"
             />
+
         </q-toolbar>
     </container>
 </template>
 
 <script>
-import { inject, computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useQuasar } from 'quasar'
+import { inject } from 'vue'
 
 import Container from './container'
-import { NLayoutKey } from '../../utils/symbols'
+import TableVisibleColumnsButton from '../private/table-visible-columns-button'
+
+import { NPowerKey, NTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -132,252 +84,37 @@ export default {
      */
     components: {
         Container,
+        TableVisibleColumnsButton,
     },
 
     /**
      * 声明属性
      */
     props: {
-        // 值(权限按钮列表)
-        modelValue: Array,
-        // 表格宫格
-        tableGrid: {
-            type: Boolean,
-            default: null,
-        },
-        // 表格可见列
-        tableVisibleColumns: Array,
-
-        // 传参
-        query: Object,
-        // 表格列
-        tableColumns: Array,
-        // 表格选中数据
-        tableSelected: Array,
-        // 表格刷新
-        tableRefresh: Function,
-        // 表单节点
-        formRef: Function,
-        // 表单数据
-        formData: Object,
-        // 重置表单
-        resetForm: Function,
-        // 请求前执行
-        requestBefore: Function,
-        // 请求成功执行
-        requestSuccess: Function,
-        // 请求失败执行
-        requestFail: Function,
-        // 请求后执行
-        requestAfter: Function,
-        // 左边图标
-        leftIcon: {
-            type: String,
-            default: 'format_list_bulleted',
-        },
-        // 默认隐藏左边(宽屏不显示, 小屏自动显示)
-        hiddenLeft: Boolean,
-        // 左边图标
-        rightIcon: {
-            type: String,
-            default: 'search',
-        },
-        // 是否请求权限按钮数据
-        getRoleBtn: {
-            type: Boolean,
-            default: true,
-        },
-        // 是否隐藏右边(宽屏不显示, 小屏自动显示)
-        hiddenRight: Boolean,
         // 是否头部
         header: Boolean,
     },
 
-    /**
-     * 声明事件
-     */
-    emits: [
-        'update:modelValue',
-        'update:tableVisibleColumns',
-    ],
-
     /**
      * 组合式
      */
-    setup(props, { emit }) {
-
-        // ==========【注入】============================================================================================
-
-        // 获取布局注入数据
-        const $nLayout = inject(NLayoutKey)
-
-        // 是否在对话框中
-        const inDialog = ref(!! utils.$dialog.inject())
+    setup() {
 
         // ==========【数据】============================================================================================
 
-        // quasar 对象
-        const $q = useQuasar()
-
-        // 当前路由地址
-        const $route = useRoute()
-
-        // ==========【计算属性】=========================================================================================
-
-        /**
-         * 当前权限按钮
-         */
-        const currentRoleBtnLists = computed(function() {
-
-            if (utils.isValidArray(props.modelValue)) {
-
-                const lists = _.filter(utils.$role.formatRoleBtnLists(props.modelValue), e => e.type > 2)
-
-                // 格式化权限按钮列表
-                utils.forEach(lists, function(item) {
-
-                    if (! item.hidden) {
-
-                        // 如果是单条数据显示
-                        const isSingle = item.show === 'single'
-
-                        // 如果是单条 || 多条显示
-                        if (isSingle || item.show === 'multi') {
-
-                            // 初始为不显示
-                            item.show = false
-
-                            // 如果有数据
-                            if (utils.isValidArray(props.tableSelected)) {
+        // 获取权限注入数据
+        const $power = inject(NPowerKey)
 
-                                // 如果是单个显示
-                                if (isSingle) {
-                                    item.show = props.tableSelected.length === 1
-
-                                    // 否则是多个显示
-                                } else {
-                                    item.show = props.tableSelected.length >= 1
-                                }
-                            }
-                        }
-
-                        // 如果是手机模式
-                        if ($q.platform.is.mobile) {
-                            item.icon = undefined
-                        }
-                    }
-                })
-
-                return lists
-            }
-
-            return []
-        })
-
-        /**
-         * 权限传参
-         */
-        const roleQuery = computed(function () {
-
-            const query = {}
-
-            // 合并路由传参
-            if (utils.isValidObject($route.query)) {
-                Object.assign(query, $route.query)
-            }
-
-            // 合并声明传参
-            if (utils.isValidObject(props.query)) {
-                Object.assign(query, props.query)
-            }
-
-            return utils.numberDeep(query)
-        })
-
-        // ==========【方法】=============================================================================================
-
-        /**
-         * 按钮点击
-         */
-        async function onClick({ data }, tableSelected) {
-
-            // 角色请求
-            await utils.$role.request({
-                // 按钮数据
-                data,
-                // 传参
-                query: roleQuery.value,
-                // 表格选中数据
-                tableSelected,
-                // 表格刷新
-                tableRefresh: props.tableRefresh,
-                // 检查是否正在上传文件
-                checkUploading: $nLayout.checkUploading,
-                // 表单节点
-                formRef: props.formRef,
-                // 表单数据
-                formData: props.formData,
-                // 重置表单
-                resetForm: props.resetForm,
-                // 请求前执行
-                requestBefore: props.requestBefore,
-                // 请求数据执行
-                requestData: props.requestData,
-                // 请求成功执行
-                requestSuccess: props.requestSuccess,
-                // 请求后执行
-                requestAfter: props.requestAfter,
-            })
-        }
-
-        // 更新布局数据
-        $nLayout.update(function(data) {
-            Object.assign(data.role, {
-                click: onClick,
-            })
-        })
-
-
-        /**
-         * 表格宫格点击
-         */
-        function onTableGrid() {
-            emit('update:tableGrid', ! props.tableGrid)
-        }
-
-        /**
-         * 表格可见列点击
-         */
-        function onTableVisible(item) {
-
-            const columns = [...props.tableVisibleColumns]
-
-            const index = utils.indexOf(props.tableVisibleColumns, item.name)
-            if (index > -1) {
-                columns.splice(index, 1)
-            } else {
-                columns.push(item.name)
-            }
-
-            emit('update:tableVisibleColumns', columns)
-        }
+        // 获取表格注入数据
+        const $table = inject(NTableKey)
 
         // ==========【返回】=============================================================================================
 
         return {
-            // 是否在对话框中
-            inDialog,
-            // 布局数据
-            layoutData: $nLayout.data,
-            // 当前权限按钮
-            currentRoleBtnLists,
-
-            // 按钮点击
-            onClick,
-            // 表格宫格点击
-            onTableGrid,
-            // 表格可见列点击
-            onTableVisible,
+            // 解构权限实例
+            ...$power,
+            // 是否有表格
+            hasTable: !! $table,
         }
     },
 }
@@ -388,10 +125,6 @@ export default {
 
 .n-toolbar {
     &__body {
-        //height: 50px;
-        //display: flex;
-        //align-items: center;
-
         .q-btn {
             margin-top: 7px;
 

package/components/uploader/index.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import {onMounted, ref, provide, inject} from 'vue'
-import { NUploaderKey, NLayoutKey } from '../../utils/symbols'
+import { onMounted, ref, provide, inject } from 'vue'
+import { NPowerKey, NUploaderKey, NLayoutKey } from '../../utils/symbols'
 
 export default {
 
@@ -75,13 +75,11 @@ export default {
      */
     setup(props, { emit }) {
 
-        // ==========【注入】============================================================================================
-
-        // 获取布局注入数据
-        const $nLayout = inject(NLayoutKey)
-
         // ==========【数据】============================================================================================
 
+        // 获取权限注入数据
+        const $power = inject(NPowerKey)
+
         // 页面状态
         const pageStatus = ref(false)
 
@@ -111,7 +109,7 @@ export default {
         })
 
         // 更新布局数据
-        $nLayout.update(function(data) {
+        $power.update(function(data) {
             data.uploader.push(uploader)
         })
 

package/components/uploader-query/index.vue

@@ -395,9 +395,7 @@ export default {
         // quasar 对象
         const $q = useQuasar()
 
-        // ==========【注入】============================================================================================
-
-        // 获取布局注入数据
+        // 获取上传器注入数据
         const {
             // 声明属性
             props: uploaderProps,

package/package.json

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

package/store/index.js

@@ -5,6 +5,20 @@ import { initAuthStore } from '../utils/useAuth'
  * 公共变量
  */
 
+// 权限数据
+export const statePower = ref({
+    // 角色权限版本
+    v: null,
+    // all id
+    all: {},
+    // 页面
+    urls: {},
+    // 按钮
+    btns: {},
+    // 菜单
+    menus: [],
+})
+
 // 角色数据
 export const stateRole = ref({
     // 角色权限版本

package/utils/$form.js

@@ -0,0 +1,52 @@
+import { ref, provide, inject } from 'vue'
+
+import { NPowerKey, NFormKey } from './symbols'
+
+/**
+ * 创建表单
+ */
+function create(params) {
+
+    // ==========【数据】=================================================================================================
+
+    // 获取参数
+    const o = Object.assign({
+        // 表单数据
+        formData: {},
+        // 重置表单
+        resetForm: null,
+    }, params)
+
+    // 获取权限注入
+    const $power = _.has(params, '$power') ? params.$power : inject(NPowerKey)
+
+    // ==========【返回】=================================================================================================
+
+    const resForm = {
+        // 表单节点
+        formRef: ref(null),
+        // 原始表单数据
+        rawFormData: o.formData,
+        // 表单数据
+        formData: ref(o.formData),
+    }
+
+    if ($power) {
+        $power.update(function(data, _data) {
+            _data.$form = resForm
+        })
+    }
+
+    // 提供可以被后代组件注入的值
+    provide(NFormKey, resForm)
+
+    return resForm
+}
+
+/**
+ * 业务表单
+ */
+utils.$form = {
+    // 创建表单
+    create,
+}