@netang/quasar 0.0.20

package/components/table/index.vue

@@ -0,0 +1,347 @@
+<template>
+    <n-layout
+        class="absolute-full"
+        :class="{
+            'n-table--grid': tableGrid,
+        }"
+        view="lHr LpR lff"
+        container
+        :page-status="pageStatus"
+        :empty-description="emptyDescription"
+    >
+        <!-- 头部 -->
+        <n-toolbar
+            ref="tableToolbarRef"
+            :model-value="roleBtnLists"
+            v-model:table-grid="tableGrid"
+            v-model:table-visible-columns="tableVisibleColumns"
+            :query="tableQuery"
+            :table-columns="tableColumns"
+            :table-selected="tableSelected"
+            :table-refresh="tableRefresh"
+            v-bind="toolbarProps"
+            header
+        />
+        <!-- 左侧分类 -->
+        <n-drawer
+            side="left"
+            :width="200"
+            :min-width="150"
+            bordered
+            show
+            drag
+            :cache="currentUrl"
+            v-if="treeNodes.length"
+        >
+            <q-scroll-area class="absolute-full">
+
+                <!-- 树筛选 -->
+                <div class="q-pa-sm q-gutter-sm" v-if="treeFilter">
+                    <q-input
+                        v-model="treeFilterValue"
+                        placeholder="搜索"
+                        dense
+                        outlined
+                        clearable
+
+                    />
+                </div>
+
+                <!-- 分类树 -->
+                <q-tree
+                    color="grey-5"
+                    ref="treeRef"
+                    :nodes="treeNodes"
+                    :filter="treeFilterValue"
+                    :node-key="treeNodeKey"
+                    :label-key="treeLabelKey"
+                    selected-color="primary"
+                    v-model:selected="treeSelected"
+                    no-selection-unset
+                    default-expand-all
+                />
+
+            </q-scroll-area>
+        </n-drawer>
+
+        <!-- 列表 -->
+        <q-page-container>
+            <q-page>
+                <q-table
+                    ref="tableRef"
+                    class="n-table absolute-full"
+                    :class="{
+                        'n-table--last-fixed': showTableFixed,
+                    }"
+                    v-model:pagination="tablePagination"
+                    v-model:selected="tableSelected"
+                    :row-key="tableRowKey"
+                    :rows="tableRows"
+                    :columns="tableColumns"
+                    :visible-columns="tableVisibleColumns"
+                    :selection="tableSelection"
+                    :loading="tableLoading"
+                    :rows-per-page-options="tableRowsPerPageOptions"
+                    :grid="tableGrid"
+                    @row-click="tableRowClick"
+                    @row-dblclick="tableRowDblclick"
+                    @request="tableRequest"
+                    flat
+                    virtual-scroll
+                >
+                    <!-- 图片 -->
+                    <template
+                        v-for="imgName in tableImgNames"
+                        v-slot:[`body-cell-${imgName}`]="props"
+                    >
+                        <q-td :props="props">
+                            <!-- 缩略图 -->
+                            <n-thumbnail
+                                :src="props.row[imgName]"
+                                preview
+                            />
+                        </q-td>
+                    </template>
+
+                    <!-- 插槽 -->
+                    <template
+                        v-for="slotName in slotNames"
+                        v-slot:[slotName]="props"
+                    >
+                        <q-td :props="props">
+                            <slot
+                                :name="slotName"
+                                v-bind="props"
+                            />
+                        </q-td>
+                    </template>
+
+                    <!-- 操作 -->
+                    <template v-slot:body-cell-settings="props">
+                        <n-table-column-fixed
+                            :props="props"
+                            :role-btn-lists="tableFixedRoleBtnLists"
+                        />
+                    </template>
+
+                    <!-- 合计 -->
+                    <template v-slot:bottom-row="props" v-if="tableSummary">
+                        <n-table-summary
+                            :props="props"
+                            :data="tableSummary"
+                            :selection="tableSelection"
+                        />
+                    </template>
+
+                    <!-- 翻页 -->
+                    <template v-slot:pagination="props">
+                        <n-table-pagination
+                            :props="props"
+                            :table-refresh="tableRefresh"
+                        />
+                    </template>
+                </q-table>
+            </q-page>
+        </q-page-container>
+
+        <!-- 右侧搜索 -->
+        <n-drawer
+            side="right"
+            :min-width="320"
+            bordered
+            drag
+            :cache="currentUrl"
+            show
+            v-if="! noSearch && tableSearchValue.length"
+        >
+            <!-- 搜索 -->
+            <n-search
+                v-model="tableSearchValue"
+                :options="tableSearchOptions"
+                :on-search="tableReload"
+                :on-reset="tableSearchReset"
+            />
+        </n-drawer>
+    </n-layout>
+</template>
+
+<script>
+import { ref, onMounted, watch, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTable',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 表格请求地址
+        url: String,
+        // 表格参数
+        tableParams: Object,
+        // 权限按钮列表
+        roleBtnLists: Array,
+        // 树节点唯一键值
+        treeNodeKey: {
+            type: String,
+            default: 'id',
+        },
+        // 树标签键值
+        treeLabelKey: {
+            type: String,
+            default: 'title',
+        },
+        // 树节点列表
+        treeNodes: {
+            type: Array,
+            default: ()=>[],
+        },
+        // 树节点点击
+        treeNodeClick: Function,
+        // 显示树筛选
+        treeFilter: Boolean,
+        // 页面状态
+        pageStatus: {
+            type: Boolean,
+            default: null,
+        },
+        // 空状态描述
+        emptyDescription: {
+            type: String,
+            default: '发生未知错误',
+        },
+        // 工具栏声明属性
+        toolbarProps: Object,
+        // 不显示搜索
+        noSearch: Boolean,
+        // 表格加载回调
+        load: Function,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        // 表格加载回调
+        'load',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit, slots }) {
+
+        // ==========【数据】============================================================================================
+
+        // 树节点
+        const treeRef = ref(null)
+
+        // 树筛选值
+        const treeFilterValue = ref('')
+
+        // 树选择数据
+        const treeSelected = ref('')
+
+        // 当前请求地址
+        const currentUrl = ref(props.url ? props.url : useRoute().fullPath)
+
+        // 表格参数
+        const tableParams = Object.assign({}, props.tableParams, {
+            // 请求地址
+            url: currentUrl.value,
+            // 权限按钮列表
+            roleBtnLists: computed(()=>props.roleBtnLists),
+        })
+
+        // 如果不显示搜索
+        if (props.noSearch) {
+            tableParams.search = false
+        }
+
+        // 创建表格
+        const $table = utils.$table.create(tableParams)
+
+        // ==========【计算属性】==========================================================================================
+
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
+            if (utils.isValidObject(slots)) {
+                return Object.keys(slots)
+            }
+            return []
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听树选择数据
+         */
+        if (_.isFunction(props.treeNodeClick)) {
+            watch(treeSelected, function(nodeKey) {
+
+                // 树节点点击
+                const res = props.treeNodeClick({
+                    nodeKey,
+                    node: treeRef.value.getNodeByKey(nodeKey),
+                    $table
+                })
+
+                if (! _.isNil(res)) {
+
+                    if (res === false) {
+                        return
+                    }
+
+                    if (utils.isValidObject(res)) {
+
+                        // 设置表格传参
+                        $table.tableQuery.value = res
+
+                        // 表格重新加载
+                        $table.tableReload()
+                    }
+                }
+            })
+        }
+
+        // ==========【生命周期】=========================================================================================
+
+        /**
+         * 实例被挂载后调用
+         */
+        onMounted( async function() {
+
+            // 表格加载回调
+            emit('load', { $table })
+            await utils.runAsync(props.load)({ $table })
+        })
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 解构表格实例
+            ...$table,
+
+            // 树节点
+            treeRef,
+            // 树筛选值
+            treeFilterValue,
+            // 树选择数据
+            treeSelected,
+
+            // 当前请求地址
+            currentUrl,
+
+            // 插槽 body 单元格标识
+            slotNames,
+        }
+    },
+}
+</script>

package/components/table-column-fixed/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <q-td :props="props">
+        <div class="q-gutter-sm">
+            <q-btn
+                v-for="item in roleBtnLists"
+                :key="`btn-item-${item.id}`"
+                class="n-button-icon"
+                :icon="item.icon"
+                @click.prevent.stop="onClick(item)"
+                unelevated
+                round
+            >
+                <!-- 标题提示 -->
+                <q-tooltip>{{item.title}}</q-tooltip>
+            </q-btn>
+        </div>
+    </q-td>
+</template>
+
+<script>
+import { inject } from 'vue'
+import { NLayoutKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTableColumnFixed',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+        // 权限按钮列表
+        roleBtnLists: Array,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【注入】============================================================================================
+
+        // 获取布局注入数据
+        const $nLayout = inject(NLayoutKey)
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 点击
+         */
+        function onClick(item) {
+            $nLayout.data.role?.click(item, [ props.props.row ])
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 点击
+            onClick,
+        }
+    },
+}
+</script>

package/components/table-pagination/index.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <!-- 页码 -->
+        <span class="q-table__bottom-item">{{props.pagination.page}} / {{Math.ceil(props.pagination.rowsNumber / props.pagination.rowsPerPage)}}</span>
+
+        <!-- 第一页 -->
+        <q-btn
+            v-if="props.pagesNumber > 2"
+            icon="first_page"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isFirstPage"
+            @click="props.firstPage"
+        />
+
+        <!-- 上页 -->
+        <q-btn
+            icon="chevron_left"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isFirstPage"
+            @click="props.prevPage"
+        />
+
+        <!-- 下页 -->
+        <q-btn
+            icon="chevron_right"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isLastPage"
+            @click="props.nextPage"
+        />
+
+        <!-- 最后一页 -->
+        <q-btn
+            v-if="props.pagesNumber > 2"
+            icon="last_page"
+            color="grey-8"
+            round
+            dense
+            flat
+            :disable="props.isLastPage"
+            @click="props.lastPage"
+        />
+
+        <!-- 刷新 -->
+        <q-btn
+            icon="refresh"
+            color="grey-8"
+            round
+            dense
+            flat
+            @click="tableRefresh"
+            v-if="tableRefresh"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTablePagination',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+        // 表格刷新
+        tableRefresh: Function,
+    },
+}
+</script>

package/components/table-summary/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <q-tr class="q-table__bottom">
+        <q-td
+            v-for="(item, index) in columns"
+            :class="item.css"
+        >
+            <!-- 合计标题 -->
+            <span v-if="index === 0">合计</span>
+
+            <!-- 合计数据 -->
+            <span v-else-if="item.value">{{item.value}}</span>
+        </q-td>
+    </q-tr>
+</template>
+
+<script>
+import { computed } from 'vue'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTableSummary',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+        // 选择类型, 可选值 single multiple none
+        selection: String,
+        // 表格合计数据
+        data: Object,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【计算属性】============================================================================================
+
+        const columns = computed(function () {
+
+            const lists = []
+
+            if (props.selection !== 'none') {
+                lists.push({
+                    css: 'q-table--col-auto-width text-center',
+                    name: '',
+                })
+            }
+
+            utils.forEach(_.get(props.props, 'cols'), function(item) {
+
+                const {
+                    // 标识
+                    name,
+                    // 对齐方式
+                    align,
+                } = item
+
+                const res = {
+                    css: `text-${align}`,
+                    name,
+                    value: '',
+                }
+
+                // 如果有统计字段
+                if (_.has(props.data, name)) {
+                    // 判断是否是价格
+                    res.value = _.has(item, 'price') ? utils.price(props.data[name]) : props.data[name]
+                }
+
+                lists.push(res)
+            })
+
+            return lists
+        })
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 栏目
+            columns,
+        }
+    },
+}
+</script>

package/components/thumbnail/index.vue

@@ -0,0 +1,87 @@
+<template>
+    <q-img
+        :src="currentSrc"
+        :spinner-size="utils.px(size / 2)"
+        :width="utils.px(size)"
+        :height="utils.px(size)"
+        fit="fill"
+        v-if="currentSrc"
+    >
+        <!-- 预览点击 -->
+        <div
+            class="absolute-full transparent cursor-pointer"
+            @click.prevent.stop="onPreview"
+            @dblclick.prevent.stop="utils.noop"
+            v-if="preview"
+        ></div>
+    </q-img>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useQuasar } from 'quasar'
+
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NThumbnail',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 图片地址
+        src: [String, Array, Object],
+        // 图片尺寸
+        size: {
+            type: Number,
+            default: 40,
+        },
+        // 点击预览
+        preview: Boolean,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【数据】============================================================================================
+
+        // quasar 对象
+        const $q = useQuasar()
+
+        // ==========【计算属性】==========================================================================================
+
+        /**
+         * 当前图片地址
+         */
+        const currentSrc = computed(function () {
+            const res = utils.getImage(props.src, { w: $q.platform.is.mobile ? props.size * 2 : props.size })
+            if (res) {
+                return res
+            }
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 预览
+         */
+        function onPreview() {
+            // 预览图片
+            utils.previewImage(props.src)
+        }
+
+        return {
+            // 当前图片地址
+            currentSrc,
+            // 预览
+            onPreview,
+        }
+    }
+}
+</script>

package/components/toolbar/container.vue

@@ -0,0 +1,31 @@
+<template>
+    <q-header
+        class="n-toolbar"
+        :dark="$q.dark.isActive"
+        bordered
+        v-if="header"
+    >
+        <slot />
+    </q-header>
+
+    <q-footer
+        class="n-toolbar"
+        :dark="$q.dark.isActive"
+        bordered
+        v-else
+    >
+        <slot />
+    </q-footer>
+</template>
+
+<script>
+export default {
+    /**
+     * 声明属性
+     */
+    props: {
+        // 是否头部
+        header: Boolean,
+    },
+}
+</script>