@netang/quasar 0.0.20 → 0.0.22

package/README.md

@@ -1,13 +1,12 @@
 ## Installation
 
 ```bash
-npm install @netang/admin --save-dev
+npm install @netang/quasar --save-dev
 ```
 
 Install mandatory peer dependencies
 ```bash
-npm install @netang/utils --save-dev
-npm install lodash --save-dev
+npm install @netang/utils @netang/vue-utils @netang/node-utils quasar @quasar/extras lodash axios bignumber.js spark-md5 xregexp --save-dev
 ```
 
 ## License

package/components/dialog/index.vue

@@ -2,6 +2,7 @@
     <q-dialog
         class="n-dialog-proxy"
         ref="dialogRef"
+        v-model="currentModelValue"
         v-bind="dialogProps"
         @hide="onDialogHide"
     >
@@ -23,9 +24,14 @@
                     container
                 >
                     <q-page-container>
+                        <slot
+                            v-bind="props"
+                            v-if="$slots.default"
+                        />
                         <component
                             :is="comp"
                             v-bind="props"
+                            v-else
                         />
                     </q-page-container>
                 </q-layout>
@@ -43,7 +49,7 @@
 </template>
 
 <script>
-import { ref, computed, defineAsyncComponent, provide } from 'vue'
+import { ref, computed, defineAsyncComponent, provide, watch } from 'vue'
 import { useDialogPluginComponent, useQuasar } from 'quasar'
 
 import routers from '@/router/routers'
@@ -62,6 +68,11 @@ export default {
      * 声明属性
      */
     props: {
+        // 值
+        modelValue: {
+            type: Boolean,
+            default: true,
+        },
         // 对话框传参
         dialogProps: Object,
         // 组件标识
@@ -103,25 +114,41 @@ export default {
         },
         // 是否全屏
         fullscreen: Boolean,
+        // 页面容器
+        pageContainer: {
+            type: Boolean,
+            default: true,
+        },
     },
 
     /**
      * 声明事件
      */
     emits: [
+        'update:modelValue',
         ...useDialogPluginComponent.emits
     ],
 
     /**
      * 组合式
      */
-    setup(props) {
+    setup(props, { emit }) {
 
         // ==========【数据】============================================================================================
 
         // quasar 对象
         const $q = useQuasar()
 
+        const currentModelValue = ref(props.modelValue)
+
+        watch(()=>props.modelValue, function (val) {
+            currentModelValue.value = val
+        })
+
+        watch(currentModelValue, function (val) {
+            emit('update:modelValue', val)
+        })
+
         const {
             // 对话框节点
             dialogRef,
@@ -283,6 +310,7 @@ export default {
         // ==========【返回】=============================================================================================
 
         return {
+            currentModelValue,
             // 自定义样式
             customStyle,
             // 组件

package/components/drawer/index.vue

@@ -1,6 +1,6 @@
 <template>
     <q-drawer
-        v-model="isShow"
+        v-model="currentModelValue"
         :side="side"
         :breakpoint="breakpoint"
         :width="currentWidth"
@@ -20,13 +20,13 @@
 </template>
 
 <script>
-import { ref, inject, nextTick } from 'vue'
+import { ref, inject, nextTick, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRoute } from 'vue-router'
 
 import { layoutKey, emptyRenderFn } from 'quasar/src/utils/private/symbols.js'
 
-import { NLayoutKey } from '../../utils/symbols'
+import { NPowerKey } from '../../utils/symbols'
 
 export default {
 
@@ -39,11 +39,15 @@ export default {
      * 声明属性
      */
     props: {
+        // 值
+        modelValue: Boolean,
+        // 位置
         side: {
             type: String,
             default: 'left',
             validator: v => [ 'left', 'right' ].includes(v)
         },
+        // 宽度
         width: {
             type: Number,
             default: 300
@@ -55,8 +59,6 @@ export default {
 
         // 【自定义属性】
         // --------------------------------------------------
-        // 是否显示
-        show: Boolean,
         // 手机端宽度(px / %)
         mobileWidth: {
             type: [String, Number],
@@ -82,38 +84,49 @@ export default {
         cache: [Boolean, String],
     },
 
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
     /**
      * 组合式
      */
-    setup(props) {
+    setup(props, { emit }) {
 
-        // ==========【注入】============================================================================================
+        // ==========【数据】============================================================================================
 
         // 获取 quasar 注入
-        const $layout = inject(layoutKey, emptyRenderFn)
-        if ($layout === emptyRenderFn) {
+        const $quasarLayout = inject(layoutKey, emptyRenderFn)
+        if ($quasarLayout === emptyRenderFn) {
             console.error('NDrawer needs to be child of QLayout')
             return emptyRenderFn
         }
 
-        // 获取布局注入数据
-        const $nLayout = inject(NLayoutKey)
-
-        // ==========【数据】============================================================================================
-
         // quasar 对象
         const $q = useQuasar()
 
         // 获取当前路由
         const $route = useRoute()
 
-        // 是否显示
-        const isShow = ref($q.screen.width < props.breakpoint ? false : props.show)
+        // 获取权限注入数据
+        const $power = inject(NPowerKey)
 
-        // 更新布局数据
-        $nLayout.update(function(data) {
-            data[props.side].data = isShow
-        })
+        // 是否显示
+        let currentModelValue
+        if ($power) {
+            currentModelValue = $power[`${props.side}Drawer`].modelValue
+            if ($q.screen.width < props.breakpoint) {
+                currentModelValue.value = false
+                emit('update:modelValue', false)
+            } else {
+                currentModelValue.value = props.modelValue
+            }
+        } else {
+            currentModelValue = ref(props.modelValue)
+        }
 
         // 缓存名
         let cacheName = ''
@@ -160,11 +173,27 @@ export default {
 
         // 下次 DOM 更新
         nextTick(function() {
-            if (isShow.value && $layout.totalWidth.value < props.breakpoint) {
-                isShow.value = false
+            if (currentModelValue.value && $quasarLayout.totalWidth.value < props.breakpoint) {
+                currentModelValue.value = false
             }
         })
 
+        // ==========【监听数据】==========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(()=>props.modelValue, function (val) {
+            currentModelValue.value = val
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentModelValue, function (val) {
+            emit('update:modelValue', val)
+        })
+
         // ==========【方法】=============================================================================================
 
         /**
@@ -194,7 +223,7 @@ export default {
 
             // if (
             //     // 如果显示
-            //     isShow.value
+            //     currentModelValue.value
             //     // 如果开启折叠
             //     && props.dragCollapse
             //     // 如果有最小宽度
@@ -204,7 +233,7 @@ export default {
             //
             //     // 如果 拖拽宽度 < 折叠宽度
             //     if (dragWidth < collapseWidth) {
-            //         isShow.value = false
+            //         currentModelValue.value = false
             //     }
             // }
 
@@ -222,7 +251,7 @@ export default {
 
         return {
             // 是否显示
-            isShow,
+            currentModelValue,
             // 当前宽度
             currentWidth,
 

package/components/empty/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="q-pa-lg flex flex-center absolute-full">
+        {{emptyDescription || '发生未知错误'}}
+    </div>
+</template>
+
+<script>
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NEmpty',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 空状态描述
+        emptyDescription: String,
+    },
+}
+</script>

package/components/field-table/index.vue

@@ -97,91 +97,22 @@
         </q-popup-proxy>
     </q-field>
 
-    <q-dialog v-model="showDialog">
-        <q-card>
-            123123123
-            <!--<q-table-->
-            <!--    ref="tableRef"-->
-            <!--    class="n-table"-->
-            <!--    style="min-width:500px;max-width:90vw;height: 300px;"-->
-            <!--    v-model:pagination="tablePagination"-->
-            <!--    v-model:selected="tableSelected"-->
-            <!--    :row-key="tableRowKey"-->
-            <!--    :rows="tableRows"-->
-            <!--    :columns="tableColumns"-->
-            <!--    :selection="tableSelection"-->
-            <!--    :loading="tableLoading"-->
-            <!--    :rows-per-page-options="tableRowsPerPageOptions"-->
-            <!--    @row-click="tableRowClick"-->
-            <!--    @row-dblclick="tableRowDblclick"-->
-            <!--    @request="tableRequest"-->
-            <!--    flat-->
-            <!--    virtual-scroll-->
-            <!--    dense-->
-            <!--&gt;-->
-            <!--    &lt;!&ndash; 图片 &ndash;&gt;-->
-            <!--    <template-->
-            <!--        v-for="imgName in tableImgNames"-->
-            <!--        v-slot:[`body-cell-${imgName}`]="props"-->
-            <!--    >-->
-            <!--        <q-td :props="props">-->
-            <!--            &lt;!&ndash; 缩略图 &ndash;&gt;-->
-            <!--            <n-thumbnail-->
-            <!--                :src="props.row[imgName]"-->
-            <!--                preview-->
-            <!--            />-->
-            <!--        </q-td>-->
-            <!--    </template>-->
-
-            <!--    &lt;!&ndash; 插槽 &ndash;&gt;-->
-            <!--    <template-->
-            <!--        v-for="slotName in slotNames"-->
-            <!--        v-slot:[slotName]="props"-->
-            <!--    >-->
-            <!--        <q-td :props="props">-->
-            <!--            <slot-->
-            <!--                :name="slotName"-->
-            <!--                v-bind="props"-->
-            <!--            />-->
-            <!--        </q-td>-->
-            <!--    </template>-->
-
-            <!--    &lt;!&ndash; 合计 &ndash;&gt;-->
-            <!--    &lt;!&ndash;<template v-slot:bottom-row="props" v-if="tableSummary">&ndash;&gt;-->
-            <!--    &lt;!&ndash;    <n-table-summary&ndash;&gt;-->
-            <!--    &lt;!&ndash;        :props="props"&ndash;&gt;-->
-            <!--    &lt;!&ndash;        :data="tableSummary"&ndash;&gt;-->
-            <!--    &lt;!&ndash;        :selection="tableSelection"&ndash;&gt;-->
-            <!--    &lt;!&ndash;    />&ndash;&gt;-->
-            <!--    &lt;!&ndash;</template>&ndash;&gt;-->
-
-            <!--    &lt;!&ndash; 翻页 &ndash;&gt;-->
-            <!--    <template v-slot:pagination="props">-->
-            <!--        <n-table-pagination-->
-            <!--            :props="props"-->
-            <!--            :table-refresh="tableRefresh"-->
-            <!--        />-->
-            <!--    </template>-->
-            <!--</q-table>-->
-            <!--<q-card-section>-->
-            <!--    <div class="text-h6">Alert</div>-->
-            <!--</q-card-section>-->
-
-            <!--<q-card-section class="q-pt-none">-->
-            <!--    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.-->
-            <!--</q-card-section>-->
-
-            <!--<q-card-actions align="right">-->
-            <!--    <q-btn flat label="OK" color="primary" v-close-popup />-->
-            <!--</q-card-actions>-->
-        </q-card>
-    </q-dialog>
+    <n-dialog
+        title="选择商品"
+        v-model="showDialog"
+    >
+        <q-page>
+            <n-table
+                page-status
+                @load="onPopupShow"
+            />
+        </q-page>
+    </n-dialog>
 </template>
 
 <script>
-import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue'
-import { date as quasarDate } from 'quasar'
-import NDialog from "../dialog";
+import { ref, reactive, computed, provide, watch, nextTick, onMounted } from 'vue'
+import { NFieldTableKey } from '../../utils/symbols'
 
 export default {
 
@@ -189,7 +120,7 @@ export default {
      * 标识
      */
     name: 'NFieldTable',
-    components: {NDialog},
+
     /**
      * 声明属性
      */
@@ -267,10 +198,18 @@ export default {
             rowKey: props.rowKey,
             // 选择类型, 可选值 single multiple none
             selection: props.multiple ? 'multiple' : 'none',
-            // 关闭宫格
-            showGrid: false,
-            // 关闭可见列
-            showVisibleColumns: false,
+            // // 关闭宫格
+            // showGrid: false,
+            // // 关闭可见列
+            // showVisibleColumns: false,
+        })
+
+        // ==========【注入】============================================================================================
+
+        // 向后代注入数据
+        provide(NFieldTableKey, {
+            // 表格实例
+            $table,
         })
 
         // ==========【计算属性】=========================================================================================
@@ -285,6 +224,25 @@ export default {
             return []
         })
 
+        /**
+         * 获取表格列数据
+         */
+        // const tableColumns = computed(function () {
+        //
+        //     // 获取原始表格列数据
+        //     const rawTableColumns = props.route
+        //         // 如果有路由组件路径
+        //         ? utils.$table.config(props.route, 'columns')
+        //         // 否则为自定义表格列数据
+        //         : props.columns
+        //
+        //     // 如果有原始表格列数据
+        //     return utils.isValidArray(rawTableColumns)
+        //         // 克隆原始表格列数据
+        //         ? _.cloneDeep(rawTableColumns)
+        //         : []
+        // })
+
         // ==========【监听数据】=========================================================================================
 
         /**
@@ -301,40 +259,54 @@ export default {
          */
         function getTableColumns() {
 
-            const columns = []
-
             // 获取原始表格列数据
-            let rawTableColumns = props.route
+            const rawTableColumns = props.route
                 // 如果有路由组件路径
                 ? utils.$table.config(props.route, 'columns')
                 // 否则为自定义表格列数据
                 : props.columns
 
             // 如果有原始表格列数据
-            if (utils.isValidArray(rawTableColumns)) {
-
+            return utils.isValidArray(rawTableColumns)
                 // 克隆原始表格列数据
-                rawTableColumns = _.cloneDeep(rawTableColumns)
-
-                // 快捷表格显示的属性名称数组
-                utils.forEach(props.showKeys, function (key) {
-                    for (const item of rawTableColumns) {
-                        if (item.name === key) {
-                            // 删除搜索字段
-                            if (_.has(item, 'search')) {
-                                delete item.search
-                            }
-                            // 删除可见字段
-                            if (_.has(item, 'visible')) {
-                                delete item.visible
-                            }
-                            columns.push(item)
-                        }
-                    }
-                })
-            }
-
-            return columns
+                ? _.cloneDeep(rawTableColumns)
+                // 否则为空
+                : []
+
+            // const columns = []
+            //
+            // // 获取原始表格列数据
+            // let rawTableColumns = props.route
+            //     // 如果有路由组件路径
+            //     ? utils.$table.config(props.route, 'columns')
+            //     // 否则为自定义表格列数据
+            //     : props.columns
+            //
+            // // 如果有原始表格列数据
+            // if (utils.isValidArray(rawTableColumns)) {
+            //
+            //     // 克隆原始表格列数据
+            //     rawTableColumns = _.cloneDeep(rawTableColumns)
+            //
+            //     // 快捷表格显示的属性名称数组
+            //     utils.forEach(props.showKeys, function (key) {
+            //         for (const item of rawTableColumns) {
+            //             if (item.name === key) {
+            //                 // 删除搜索字段
+            //                 if (_.has(item, 'search')) {
+            //                     delete item.search
+            //                 }
+            //                 // 删除可见字段
+            //                 if (_.has(item, 'visible')) {
+            //                     delete item.visible
+            //                 }
+            //                 columns.push(item)
+            //             }
+            //         }
+            //     })
+            // }
+            //
+            // return columns
         }
 
         /**
@@ -394,9 +366,7 @@ export default {
          * 显示对话框
          */
         function onDialog() {
-
             showDialog.value = true
-            console.log('ssss')
         }
 
         // ==========【生命周期】=========================================================================================

package/components/power-page/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <q-page
+        v-bind="$attrs"
+    >
+        <!-- 空数据 -->
+        <n-empty
+            :empty-description="emptyDescription"
+            v-if="pageStatus === false"
+        />
+
+        <!-- 插槽 -->
+        <slot v-else-if="pageStatus === true" />
+
+        <!-- 加载 -->
+        <q-inner-loading
+            :showing="pageLoading"
+        />
+    </q-page>
+</template>
+
+<script>
+import { inject } from 'vue'
+import { NPowerKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NPowerPage',
+
+    /**
+     * 组合式
+     */
+    setup() {
+        // ==========【数据】============================================================================================
+
+        // 获取注入权限数据
+        const $power = inject(NPowerKey)
+
+        // ==========【返回】============================================================================================
+        return {
+            ...$power,
+        }
+    },
+}
+</script>