@netang/quasar 0.0.20

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022-present, Netang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+## Installation
+
+```bash
+npm install @netang/admin --save-dev
+```
+
+Install mandatory peer dependencies
+```bash
+npm install @netang/utils --save-dev
+npm install lodash --save-dev
+```
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2022-present, Netang

package/components/column-title/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="full-width">
+        <q-badge
+            :label="label"
+            color="grey-7"
+            outline
+        >
+            <!-- 提示信息 -->
+            <q-tooltip anchor="center right" self="center left" v-if="tooltip">{{tooltip}}</q-tooltip>
+        </q-badge>
+    </div>
+</template>
+
+<script>
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NColumnTitle',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 标签
+        label: [String, Number],
+        // 提示信息
+        tooltip: [String, Number],
+    },
+}
+</script>

package/components/dialog/components/index.js

@@ -0,0 +1,6 @@
+import dialog from '@/components/private/dialog'
+
+export default {
+    moveToTree: () => import('./move-to-tree'),
+    ...dialog,
+}

package/components/dialog/components/move-to-tree/index.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="q-pa-sm q-gutter-sm">
+
+        <!-- 搜索框 -->
+        <q-input
+            v-model="treeFilter"
+            placeholder="搜索"
+            dense
+            outlined
+            clearable
+        />
+
+        <!-- 分类树 -->
+        <q-tree
+            ref="treeRef"
+            color="grey-5"
+            :nodes="treeNodes"
+            :filter="treeFilter"
+            :node-key="treeNodeKey"
+            v-model:expanded="treeExpanded"
+            selected-color="primary"
+            v-model:selected="treeSelected"
+            no-selection-unset
+        />
+    </div>
+</template>
+
+<script>
+import { ref, isRef, toRaw, watch } from 'vue'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NMoveToTree',
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【注入】============================================================================================
+
+        // 获取对话框注入数据
+        const {
+            // 提交数据
+            submit,
+            // 父级声明属性
+            props,
+        } = utils.$dialog.inject()
+
+        const {
+            // 树节点列表
+            nodes,
+            // 树展开节点
+            expanded,
+            // 节点唯一键值
+            nodeKey,
+
+        } = Object.assign({
+            nodeKey: 'id',
+        }, props)
+
+        // 对话框提交数据
+        submit(onSubmit)
+
+        // ==========【数据】=============================================================================================
+
+        // 树节点
+        const treeRef = ref(null)
+
+        // 树节点列表
+        const treeNodes = format(nodes)
+
+        // 树节点唯一键值
+        const treeNodeKey = ref(nodeKey)
+
+        // 树筛选
+        const treeFilter = ref('')
+
+        // 树展开节点
+        const treeExpanded = format(expanded)
+
+        // 树选择数据
+        const treeSelected = ref(0)
+
+        // 当前选择值
+        const currentValue = ref({})
+
+        // ==========【监听数据】==========================================================================================
+
+        /**
+         * 监听树选择数据
+         */
+        watch(treeSelected, function(value) {
+            // 设置当前选择值
+            currentValue.value = {
+                value,
+                node: treeRef.value.getNodeByKey(value),
+            }
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 提交
+         */
+        function onSubmit() {
+            return currentValue.value
+        }
+
+        /**
+         * 格式化列表
+         */
+        function format(val) {
+
+            if (val) {
+
+                if (isRef(val)) {
+                    return ref(val.value)
+                }
+
+                if (utils.isValidArray(val)) {
+                    return ref(val)
+                }
+            }
+
+            return ref([])
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 树节点
+            treeRef,
+            // 树列表
+            treeNodes,
+            // 节点唯一键值
+            treeNodeKey,
+            // 树筛选
+            treeFilter,
+            // 树展开节点
+            treeExpanded,
+            // 树选择数据
+            treeSelected,
+        }
+    }
+}
+</script>

package/components/dialog/index.vue

@@ -0,0 +1,330 @@
+<template>
+    <q-dialog
+        class="n-dialog-proxy"
+        ref="dialogRef"
+        v-bind="dialogProps"
+        @hide="onDialogHide"
+    >
+        <q-card class="flex column" :style="customStyle">
+
+            <!-- 头部 -->
+            <q-toolbar>
+                <!-- 标题 -->
+                <q-toolbar-title>{{currentTitle}}</q-toolbar-title>
+                <!-- 关闭按钮 -->
+                <q-btn flat round dense icon="close" v-close-popup v-if="close" />
+            </q-toolbar>
+
+            <!-- 内容 -->
+            <q-card-section class="n-flex-1 no-padding">
+                <q-layout
+                    class="absolute-full"
+                    view="hHh lpr fFf"
+                    container
+                >
+                    <q-page-container>
+                        <component
+                            :is="comp"
+                            v-bind="props"
+                        />
+                    </q-page-container>
+                </q-layout>
+            </q-card-section>
+
+            <!-- 底部 -->
+            <q-card-actions align="right" v-if="bottom">
+                <!-- 取消按钮 -->
+                <q-btn label="取消" color="primary" @click="onDialogCancel" flat v-close-popup v-if="cancel" />
+                <!-- 确定按钮 -->
+                <q-btn label="确定" color="primary" @click="onDialogConfirm" flat />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script>
+import { ref, computed, defineAsyncComponent, provide } from 'vue'
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+
+import routers from '@/router/routers'
+
+import components from './components'
+import { NDialogKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NDialog',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 对话框传参
+        dialogProps: Object,
+        // 组件标识
+        name: String,
+        // 路由组件路径
+        route: String,
+        // 组件传参
+        props: Object,
+        // 标题
+        title: String,
+        // 显示关闭按钮
+        close: {
+            type: Boolean,
+            default: true,
+        },
+        // 显示取消按钮
+        cancel: Boolean,
+        // 确定按钮
+        onConfirm: Function,
+        // 显示底部
+        bottom: {
+            type: Boolean,
+            default: true,
+        },
+        // 宽度
+        width: {
+            type: [String, Number],
+            default: '50%',
+        },
+        // 高度
+        height: {
+            type: [String, Number],
+            default: '80%',
+        },
+        // 最小宽度
+        minWidth: {
+            type: [String, Number],
+            default: '600px',
+        },
+        // 是否全屏
+        fullscreen: Boolean,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        ...useDialogPluginComponent.emits
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【数据】============================================================================================
+
+        // quasar 对象
+        const $q = useQuasar()
+
+        const {
+            // 对话框节点
+            dialogRef,
+            // 对话框取消
+            onDialogCancel,
+            // 对话框隐藏
+            onDialogHide,
+        } = useDialogPluginComponent()
+
+        // ==========【注入】============================================================================================
+
+        // 对话框值
+        const dialogValue = ref(null)
+
+        // 组件提交方法
+        let compSubmit
+
+        // 向后代注入数据
+        provide(NDialogKey, {
+            // 值
+            value: dialogValue,
+            // 表格参数
+            dialogProps: props,
+            // 传参
+            props: props.props,
+            // 提交值
+            submit(cb) {
+                compSubmit = cb
+            },
+            // 提交
+            confirm: onDialogConfirm,
+        })
+
+        // ==========【计算属性】=========================================================================================
+
+        function setWH(style, field, sign) {
+            if (props[field]) {
+                if (utils.indexOf(props[field], '%') > -1) {
+                    style[field] = props[field].replace('%', sign)
+                } else {
+                    style[field] = utils.px(props[field])
+                }
+            }
+        }
+
+        /**
+         * 自定义样式
+         */
+        const customStyle = computed(function () {
+
+            const style = {}
+
+            if (
+                props.fullscreen
+                || $q.platform.is.mobile
+                || (props.width === '100%' && props.height === '100%')
+            ) {
+                style.width = '100vw'
+                style.height = '100vh'
+                style.borderRadius = 0
+
+            } else {
+                // 宽度
+                setWH(style, 'width', 'vw')
+                // 高度
+                setWH(style, 'height', 'vh')
+                // 最小宽度
+                setWH(style, 'minWidth', 'vw')
+            }
+
+            return style
+        })
+
+        /**
+         * 获取当前组件
+         */
+        const comp = computed(function () {
+
+            // 组件
+            let comp
+
+            // 如果是路由路径
+            if (props.route) {
+                // 获取路由组件
+                comp = _.get(routers, `${utils.slash(props.route, '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
+        })
+
+        /**
+         * 当前标题
+         */
+        const currentTitle = computed(function () {
+
+            // 如果有自定义标题
+            if (props.title) {
+                return props.title
+            }
+
+            return props.route ?
+                // 如果是路由路径, 则获取路由标题
+                _.get(routers, `${utils.slash(props.route, 'start', false)}.meta.title`, '')
+                : ''
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 隐藏对话框
+         */
+        function hide() {
+            // 隐藏对话框
+            dialogRef.value.hide()
+        }
+
+        /**
+         * 对话框确认
+         */
+        async function onDialogConfirm() {
+
+            // 如果有确定按钮
+            if (_.isFunction(props.onConfirm)) {
+
+                if (! _.isFunction(compSubmit)) {
+                    // 轻提示
+                    utils.toast({
+                        message: '未调用 $dialog.submit 方法',
+                    })
+                    return
+                }
+
+                const res = await utils.runAsync(props.onConfirm)(await utils.runAsync(compSubmit)(), hide)
+                if (res === false) {
+                    return
+                }
+            }
+
+            // 隐藏对话框
+            hide()
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 自定义样式
+            customStyle,
+            // 组件
+            comp,
+            // 当前标题
+            currentTitle,
+
+            // 对话框节点
+            dialogRef,
+            // 对话框确定
+            onDialogConfirm,
+            // 对话框取消
+            onDialogCancel,
+            // 对话框隐藏
+            onDialogHide,
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+
+.n-dialog-proxy {
+
+    &--fullscreen {
+        .q-dialog__inner > div {
+            border-radius: 0 !important;
+            width: 100vw;
+            height: 100vh;
+        }
+    }
+
+    .q-dialog__inner > div {
+        min-width: inherit;
+    }
+
+    .q-dialog__inner--minimized {
+        padding: 0;
+        > div {
+            max-width: inherit !important;
+            max-height: inherit !important;
+        }
+    }
+}
+</style>

package/components/dialog-table/index.vue

@@ -0,0 +1,92 @@
+<template>
+    <slot
+        :click="onDialog"
+    />
+</template>
+
+<script>
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NDialogTable',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: [String, Number, Array, Object],
+        // 标题
+        title: String,
+        // 路由组件路径
+        route: String,
+        // 宽
+        width: {
+            type: [Number, String],
+            default: '80%',
+        },
+        // 组件传参
+        props: Object,
+        // 是否多选
+        multiple: Boolean,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 弹出对话框
+         */
+        function onDialog() {
+
+            // 创建对话框
+            utils.$dialog.create({
+                // 标题
+                title: props.title,
+                // 宽
+                width: props.width,
+                // width: 1000,
+                // 路由组件路径
+                route: props.route,
+                // 组件传参
+                props: Object.assign({
+                    multiple: props.multiple,
+                }, props.props),
+                // 对话框传参
+                dialogProps: {
+                    // 不能通过按 ESC 键关闭对话框
+                    noEscDismiss: true,
+                    // 不能通过在对话框外单击来关闭对话框
+                    noBackdropDismiss: true,
+                },
+                // 显示取消按钮
+                cancel: true,
+                // 点击确认执行
+                async onConfirm(data) {
+                     console.log('----data---', data)
+                },
+            })
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 弹出对话框
+            onDialog,
+        }
+    }
+}
+</script>