@netang/quasar 0.0.20

package/components/input-price-yuan/index.vue

@@ -0,0 +1,179 @@
+<template>
+    <q-input
+        v-model="currentValue"
+        @blur="onBlur"
+        v-bind="$attrs"
+    >
+        <template
+            v-for="slotName in slotNames"
+            v-slot:[slotName]
+        >
+            <slot :name="slotName" />
+        </template>
+    </q-input>
+</template>
+
+<script>
+import { computed, ref, watch } from 'vue'
+
+/**
+ * 金额(元)
+ */
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NInputPrice',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: [String, Number],
+        // 最小值(元)
+        min: {
+            type: Number,
+            default: 1,
+        },
+        // 最大值(元)
+        max: Number,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit, slots }) {
+
+        // ==========【数据】============================================================================================
+
+        // 当前值
+        const currentValue = ref(props.modelValue)
+
+        // ==========【计算属性】==========================================================================================
+
+        /**
+         * 插槽标识数组
+         */
+        const slotNames = computed(function() {
+            if (utils.isValidObject(slots)) {
+                return Object.keys(slots)
+            }
+            return []
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(()=>props.modelValue, function(val) {
+            currentValue.value = val
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 提交值
+         */
+        function emitModelValue(newVal) {
+            // 更新值
+            emit('update:modelValue', newVal)
+        }
+
+        /**
+         * 失去焦点触发
+         */
+        function onBlur() {
+
+            if (utils.isValidValue(currentValue.value)) {
+
+                let val = new BigNumber(currentValue.value)
+
+                if (val.isFinite()) {
+
+                    // 值是否有更新
+                    let isChange = false
+
+                    if (
+                        // 如果值 > 0
+                        val.isGreaterThan(0)
+                        // 如果值精度 > 2
+                        && val.decimalPlaces() > 2
+                    ) {
+                        // 值有更新
+                        isChange = true
+
+                        // 将元向下舍入 2 位精度(如 68.345 -> 68.34)
+                        val = val.decimalPlaces(2, BigNumber.ROUND_DOWN)
+                    }
+
+                    // 如果值 >= 最大值
+                    if (Number.isFinite(props.max)) {
+                        if (val.isGreaterThanOrEqualTo(props.max)) {
+
+                            // 更新当前值
+                            currentValue.value = props.max
+
+                            // 提交值
+                            emitModelValue(currentValue.value)
+                            return
+                        }
+                    }
+
+                    // 如果值 <= 最小值
+                    if (Number.isFinite(props.min)) {
+                        if (val.isLessThanOrEqualTo(props.min)) {
+
+                            // 更新当前值
+                            currentValue.value = props.min
+
+                            // 提交值
+                            emitModelValue(currentValue.value)
+                            return
+                        }
+                    }
+
+                    // 获取最新值
+                    val = val.toNumber()
+
+                    if (isChange) {
+                        // 更新当前值
+                        currentValue.value = val
+                    }
+
+                    // 提交值
+                    emitModelValue(val)
+                    return
+                }
+            }
+
+            // 更新当前值
+            currentValue.value = ''
+
+            // 提交值
+            emitModelValue(currentValue.value)
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 当前值
+            currentValue,
+            // 插槽标识数组
+            slotNames,
+
+            // 失去焦点触发
+            onBlur,
+        }
+    },
+}
+</script>

package/components/layout/index.vue

@@ -0,0 +1,119 @@
+<template>
+    <q-layout
+        v-bind="$attrs"
+    >
+        <!-- 错误提示 -->
+        <q-page-container v-if="pageStatus === false">
+            <q-page class="q-pa-lg flex flex-center">
+                {{emptyDescription}}
+            </q-page>
+        </q-page-container>
+
+        <!-- 插槽 -->
+        <slot :data="data" v-else-if="pageStatus === true" />
+    </q-layout>
+
+    <!-- 加载 -->
+    <q-inner-loading
+        :showing="pageLoading"
+    />
+</template>
+
+<script>
+import { provide } from 'vue'
+import { NLayoutKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NLayout',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 页面加载
+        pageLoading: Boolean,
+        // 页面状态
+        pageStatus: {
+            type: Boolean,
+            default: null,
+        },
+        // 空状态描述
+        emptyDescription: {
+            type: String,
+            default: '发生未知错误',
+        },
+    },
+
+    /**
+     * 组合式
+     */
+    setup() {
+
+        // ==========【注入】============================================================================================
+
+        // 布局数据
+        const data = {
+            // 左边侧滑菜单数据
+            left: {
+                // 是否显示
+                data: null,
+            },
+            // 右边侧滑菜单数据
+            right: {
+                // 是否显示
+                data: null,
+            },
+            // 权限数据
+            role: {},
+            // 表格数据
+            table: {},
+            // 上传器
+            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, {
+            // 注入数据
+            data,
+            // 更新注入数据
+            update(cb) {
+                cb(data)
+            },
+            // 检查是否上传中
+            checkUploading() {
+                for (const uploader of data.uploader) {
+                    if (uploader.checkUploading()) {
+                        return true
+                    }
+                }
+                return false
+            },
+        })
+
+        return {
+            // 布局数据
+            data,
+        }
+    },
+}
+</script>

package/components/list-menu/index.vue

@@ -0,0 +1,137 @@
+<template>
+    <q-list
+        :dark="dark"
+    >
+        <n-list-menu-item
+            :data="data"
+            @item-click="onItemClick"
+        />
+    </q-list>
+</template>
+
+<script>
+import { watch } from 'vue'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NListMenu',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 数据
+        data: Array,
+        // 是否暗色
+        dark: Boolean,
+        // 激活 key
+        activeKey: {
+            type: String,
+            default: 'id',
+        },
+        // 激活值
+        activeValue: [String, Number],
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        // 单个元素点击
+        'itemClick',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【方法】============================================================================================
+
+        /**
+         * 单个元素点击
+         */
+        function onItemClick(item) {
+            emit('itemClick', item)
+        }
+
+        /**
+         * 设置激活状态
+         */
+        function setActive() {
+
+            const parentAll = {}
+
+            // 获取父节点
+            function getParent({ attr }) {
+                if (
+                    // 如果不是根节点
+                    attr.pid
+                    // 有父节点
+                    && _.has(parentAll, attr.pid)
+                ) {
+                    const parentItem = parentAll[attr.pid]
+
+                    // 设为展开
+                    parentItem.expanded = true
+
+                    getParent(parentItem)
+                }
+            }
+
+            // 获取子节点
+            function getChildren(data) {
+
+                for (const item of data) {
+
+                    // 设为折叠
+                    item.expanded = false
+
+                    // 如果是父节点
+                    if (item.children.length) {
+                        parentAll[item.id] = item
+                        getChildren(item.children)
+
+                    // 否则如果是匹配的子节点
+                    } else if (props.activeValue && item.attr[props.activeKey] === props.activeValue) {
+
+                        // 设为展开
+                        item.expanded = true
+
+                        getParent(item)
+                    }
+                }
+            }
+
+            getChildren(props.data)
+        }
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch([()=>props.data, ()=>props.activeValue], function() {
+
+            // 设置激活状态
+            if (utils.isValidArray(props.data)) {
+                setActive()
+            }
+
+        }, {
+            // 立即执行
+            immediate: true,
+        })
+
+        // ==========【返回】=========================================================================================
+
+        return {
+            // 单个元素点击
+            onItemClick,
+        }
+    }
+}
+</script>

package/components/list-menu-item/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <template v-for="item in data">
+
+        <!-- 如果有子菜单 -->
+        <q-expansion-item
+            :label="item.label"
+            :group="`group-${level}`"
+            v-model="item.expanded"
+            :icon="item.attr.icon"
+            v-if="item.children.length"
+        >
+            <n-list-menu-item
+                :data="item.children"
+                :level="level + 1"
+                @item-click="onItemClick"
+            />
+        </q-expansion-item>
+
+        <!-- 否则为单独的菜单 -->
+        <q-item
+            :active="item.expanded"
+            active-class="text-white"
+            @click="onItemClick(item)"
+            clickable
+            v-else
+        >
+            <q-item-section>
+                <q-item-label>{{item.label}}</q-item-label>
+            </q-item-section>
+        </q-item>
+
+    </template>
+</template>
+
+<script>
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NListMenuItem',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 数据
+        data: Array,
+        // 层级
+        level: {
+            type: Number,
+            default: 1,
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        // 单个元素点击
+        'itemClick',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【返回】=========================================================================================
+
+        return {
+            // 单个元素点击
+            onItemClick(item) {
+                emit('itemClick', item)
+            },
+        }
+    }
+}
+</script>