@netang/quasar 0.0.20 → 0.0.21

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

@@ -108,12 +108,8 @@ export default {
         const $route = useRoute()
 
         // 是否显示
-        const isShow = ref($q.screen.width < props.breakpoint ? false : props.show)
-
-        // 更新布局数据
-        $nLayout.update(function(data) {
-            data[props.side].data = isShow
-        })
+        const isShow = $nLayout.data[props.side].modelValue
+        isShow.value = $q.screen.width < props.breakpoint ? false : props.show
 
         // 缓存名
         let cacheName = ''

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/layout/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { provide } from 'vue'
+import { provide, ref } from 'vue'
 import { NLayoutKey } from '../../utils/symbols'
 
 export default {
@@ -55,17 +55,40 @@ export default {
 
         // ==========【注入】============================================================================================
 
+        const leftModelValue = ref(null)
+        const rightModelValue = ref(null)
+
         // 布局数据
         const data = {
             // 左边侧滑菜单数据
             left: {
                 // 是否显示
-                data: null,
+                modelValue: leftModelValue,
+                // 是否显示切换按钮
+                showButton() {
+                    return leftModelValue.value !== null
+                },
+                // 切换
+                toggle() {
+                    if (leftModelValue.value !== null) {
+                        leftModelValue.value = ! leftModelValue.value
+                    }
+                },
             },
             // 右边侧滑菜单数据
             right: {
                 // 是否显示
-                data: null,
+                modelValue: rightModelValue,
+                // 是否显示切换按钮
+                showButton() {
+                    return rightModelValue.value !== null
+                },
+                // 切换
+                toggle() {
+                    if (rightModelValue.value !== null) {
+                        rightModelValue.value = ! rightModelValue.value
+                    }
+                },
             },
             // 权限数据
             role: {},
@@ -74,22 +97,6 @@ export default {
             // 上传器
             uploader: [],
         }
-        data.left.show = function() {
-            return data.left.data !== null ? data.left.data.value : false
-        }
-        data.left.toggle = function () {
-            if (data.left.data !== null) {
-                data.left.data.value = ! data.left.data.value
-            }
-        }
-        data.right.show = function() {
-            return data.right.data !== null ? data.right.data.value : false
-        }
-        data.right.toggle = function () {
-            if (data.right.data !== null) {
-                data.right.data.value = ! data.right.data.value
-            }
-        }
 
         // 向后代注入数据
         provide(NLayoutKey, {

package/components/table/index.vue

@@ -21,7 +21,8 @@
             :table-refresh="tableRefresh"
             v-bind="toolbarProps"
             header
-        />
+        >
+        </n-toolbar>
         <!-- 左侧分类 -->
         <n-drawer
             side="left"
@@ -166,9 +167,11 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch, computed, inject } from 'vue'
 import { useRoute } from 'vue-router'
 
+import { NFieldTableKey } from '../../utils/symbols'
+
 export default {
 
     /**
@@ -236,6 +239,12 @@ export default {
      */
     setup(props, { emit, slots }) {
 
+        // ==========【注入】============================================================================================
+
+        // 获取文本框表格注入
+        const $fieldTable = inject(NFieldTableKey)
+        const inFieldTable = !! $fieldTable
+
         // ==========【数据】============================================================================================
 
         // 树节点
@@ -264,7 +273,7 @@ export default {
         }
 
         // 创建表格
-        const $table = utils.$table.create(tableParams)
+        const $table = inFieldTable ? $fieldTable.$table : utils.$table.create(tableParams)
 
         // ==========【计算属性】==========================================================================================
 

package/components/toolbar/index.vue

@@ -11,7 +11,7 @@
                 round
                 flat
                 @click="layoutData.left.toggle"
-                v-if="hiddenLeft ? ! layoutData.left.show() : (layoutData.left.data !== null)"
+                v-if="layoutData.left.showButton()"
             />
 
             <!-- 左边插槽 -->
@@ -99,6 +99,8 @@
                 </q-menu>
             </q-btn>
 
+            <span>{{layoutData.right.data}}</span>
+
             <!-- 右边按钮-->
             <q-btn
                 :icon="rightIcon"
@@ -106,7 +108,7 @@
                 round
                 flat
                 @click="layoutData.right.toggle"
-                v-if="hiddenRight ? ! layoutData.right.show() : (layoutData.right.data !== null)"
+                v-if="layoutData.right.showButton()"
             />
         </q-toolbar>
     </container>
@@ -175,20 +177,11 @@ export default {
             type: String,
             default: 'format_list_bulleted',
         },
-        // 默认隐藏左边(宽屏不显示, 小屏自动显示)
-        hiddenLeft: Boolean,
         // 左边图标
         rightIcon: {
             type: String,
             default: 'search',
         },
-        // 是否请求权限按钮数据
-        getRoleBtn: {
-            type: Boolean,
-            default: true,
-        },
-        // 是否隐藏右边(宽屏不显示, 小屏自动显示)
-        hiddenRight: Boolean,
         // 是否头部
         header: Boolean,
     },

package/package.json

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

package/utils/$table.js

@@ -307,6 +307,10 @@ function create(params) {
     // 表格搜索数据值
     const tableSearchValue = ref(firstTableSearchValue)
 
+    watch(tableSearchValue, function (val) {
+        console.log('tableSearchValue', val)
+    })
+
     // 表格搜索参数
     const tableSearchOptions = ref()
 

package/utils/symbols.js

@@ -1,3 +1,4 @@
 export const NLayoutKey = '_n_layout_'
 export const NDialogKey = '_n_dialog_'
+export const NFieldTableKey = '_n_field_table_'
 export const NUploaderKey = '_n_uploader_'