From 0c7adb958411dced10d9b804837db1f6ffbe9653 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Wed, 11 Oct 2023 17:17:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20v4.2.2=E4=B8=80=E4=BA=9B=E7=BB=86?= =?UTF-8?q?=E8=8A=82=E8=A1=A5=E5=85=85=E4=B8=8E=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 5 ++ package.json | 3 +- src/components/RTable/src/Table.tsx | 72 ++++++++++++---- src/components/RTable/src/components/C.tsx | 80 +++++++++-------- .../RTable/src/components/Fullscreen.tsx | 51 +++++++++++ .../RTable/src/components/Print.tsx | 4 +- .../RTable/src/components/Screenfull.tsx | 64 -------------- src/components/RTable/src/components/Size.tsx | 2 +- src/components/RTable/src/config.ts | 1 + src/components/RTable/src/index.scss | 14 +-- src/components/RTable/src/props.ts | 7 +- src/components/RTable/src/type.ts | 11 ++- src/layout/components/SiderBar/index.tsx | 20 ++--- src/views/demo/table/index.tsx | 86 ++++++------------- vite.pliugin.config.ts | 1 - 15 files changed, 214 insertions(+), 207 deletions(-) create mode 100644 src/components/RTable/src/components/Fullscreen.tsx delete mode 100644 src/components/RTable/src/components/Screenfull.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 7773b01a..90d585a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ - 实现了新的文件下载函数 `downloadAnyFile`，支持 `blod, file, base64, arrayBuffer` - 更新 `naive-ui` 版本至 `2.35.0` - 新增了一些工具类型与工具方法 +- 移除 screenfull 插件，使用 vueuse useFullscreen hook 替代。 - 新增规则 `no-undefined`，[点击查看](https://eslint.org/docs/latest/rules/no-undefined#rule-details) 具体规则 ```ts @@ -27,6 +28,10 @@ const demo = void 0 const demo2 = null ``` +### Fixes + +- 修复全屏不能正确提示状态问题 + ## 4.2.1 经过综合考虑，还是给模板增加 `cdn` 的配置。基于 `vite-plugin-cdn2` 插件实现。 diff --git a/package.json b/package.json index 086d422d..c5a6cd23 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ ] }, "dependencies": { - "@vueuse/core": "^9.1.0", + "@vueuse/core": "^9.13.0", "awesome-qr": "2.1.5-rc.0", "axios": "^1.2.0", "clipboard": "^2.0.11", @@ -38,7 +38,6 @@ "pinia": "^2.1.4", "pinia-plugin-persistedstate": "^3.1.0", "print-js": "^1.6.0", - "screenfull": "^6.0.2", "vue": "^3.3.4", "vue-hooks-plus": "1.8.2", "vue-i18n": "^9.2.2", diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index daf61cc2..8edb2276 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -13,13 +13,14 @@ import './index.scss' import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui' import Size from './components/Size' -import Screenfull from './components/Screenfull' +import Screenfull from './components/Fullscreen' import C from './components/C' import Print from './components/Print' import props from './props' import { call } from '@/utils/vue/index' import { uuid } from '@use-utils/hook' +import config from './config' import type { DropdownOption, DataTableInst } from 'naive-ui' import type { ComponentSize } from '@/types/modules/component' @@ -31,7 +32,8 @@ export default defineComponent({ setup(props, ctx) { const { expose } = ctx - const rTableInstance = ref(null) + const rTableInst = ref(null) + const wrapperRef = ref(null) const uuidWrapper = uuid(16) const uuidTable = uuid(16) @@ -103,30 +105,70 @@ export default defineComponent({ } } - provide('tableProvider', { + const renderToolOptions = () => { + const { toolOptions } = props + + return toolOptions?.map((curr) => + typeof curr === 'function' ? curr() : curr, + ) + } + + const tool = (p: typeof props) => { + const renderDefaultToolOptions = () => ( + <> + + + + + + ) + + if (!props.toolOptions) { + return renderDefaultToolOptions + } else { + if (props.coverTool) { + return renderToolOptions + } else { + return () => ( + <> + {renderDefaultToolOptions()} + {renderToolOptions()} + + ) + } + } + } + + provide(config.tableKey, { uuidTable, uuidWrapper, + wrapperRef, }) expose({ - rTableInstance, + rTableInst, + uuidTable, + uuidWrapper, }) return { uuidWrapper, uuidTable, contextMenuReactive, - rTableInstance, + rTableInst, combineRowProps, contextMenuSelect, - changeTableSize, privateReactive, - updateTableColumn, + tool, + wrapperRef, } }, render() { + /* eslint-disable @typescript-eslint/no-explicit-any */ + const { tool } = this + return ( @@ -134,7 +176,7 @@ export default defineComponent({ default: () => ( <> this.title ||
, 'header-extra': () => ( - - - - + {tool(this.$props as any)} ), footer: () => this.$slots.tableFooter?.(), + action: () => this.$slots.tableAction?.(), }} ) diff --git a/src/components/RTable/src/components/C.tsx b/src/components/RTable/src/components/C.tsx index 77fc0949..10c52a42 100644 --- a/src/components/RTable/src/components/C.tsx +++ b/src/components/RTable/src/components/C.tsx @@ -9,15 +9,6 @@ * @remark 今天也是元气满满撸代码的一天 */ -/** - * - * TODO: - * - 使用 computed 获取数据时，将数据转换为 NTree 格式，并且补充固定列操作栏按钮与初始化样式 - * - 使用 computed 收集固定列、拖拽列后的数据 - * - 点击固定列按钮后，激活样式 - * - Table 父组件通知更新 columns，使用 v-model:columns 方式绑定时，即可实现拖拽、动态展示列、固定列操作 - */ - import { NPopover, NSpace, NTree } from 'naive-ui' import RIcon from '@/components/RIcon/index' @@ -51,7 +42,7 @@ const RowIconRender = ({ customClassName?: string }) => { return ( - + {{ trigger: () => ( { // eslint-disable-next-line @typescript-eslint/no-explicit-any - return props.columns.map((curr: any, idx) => { - const { - key, - title, - children, - fixed, - resizable: $resizable, - ...args - } = curr - const isLeftFixedActivated = fixed && fixed === 'left' - const isRightFixedActivated = fixed && fixed === 'right' - const isResizable = !!$resizable + return props.columns.map((curr, idx) => { + const { key, title, children, fixed, isResizable, ...args } = + curr as C + const isLeftFixedActivated = fixed === 'left' + const isRightFixedActivated = fixed === 'right' const attr = { ...args, title, @@ -126,32 +110,49 @@ export default defineComponent({ fixed, isLeftFixedActivated, isRightFixedActivated, + isResizable, } return { ...attr, suffix: () => ( - + + + {{ + trigger: () => ( + + ), + default: () => '修改列宽', + }} + ), } - }) + }) as C[] }, // eslint-disable-next-line @typescript-eslint/no-empty-function set: () => {}, @@ -165,15 +166,20 @@ export default defineComponent({ } } + const resizableClick = (option: C, index: number) => { + console.log('🚀 ~ resizableClick ~ option:', option.isResizable) + option['isResizable'] = !option['isResizable'] + option['resizable'] = option['isResizable'] + treeDataSource.value[index] = option + + event(treeDataSource.value) + } + const fixedClick: FixedClick = (type, option, index) => { const key = `${type}FixedActivated` + const otherKey = `${type === 'left' ? 'right' : 'left'}FixedActivated` - if (key === 'leftFixedActivated') { - option['rightFixedActivated'] = false - } else if (key === 'rightFixedActivated') { - option['leftFixedActivated'] = false - } - + option[otherKey] = false option[key] = !option[key] option[key] ? (option['fixed'] = type) : (option['fixed'] = void 0) treeDataSource.value[index] = option @@ -184,7 +190,7 @@ export default defineComponent({ const treeDrop = ({ node, dragNode, dropPosition }: TreeDropInfo) => { const [dragNodeSiblings, dragNodeIndex] = findSiblingsAndIndex( dragNode, - treeDataSource.value, + treeDataSource.value as TreeOption[], ) if (dragNodeSiblings === null || dragNodeIndex === null) { @@ -195,7 +201,7 @@ export default defineComponent({ const [nodeSiblings, nodeIndex] = findSiblingsAndIndex( node, - treeDataSource.value, + treeDataSource.value as TreeOption[], ) if (nodeSiblings === null || nodeIndex === null) { @@ -216,7 +222,7 @@ export default defineComponent({ }, render() { return ( - + {{ trigger: () => ( diff --git a/src/components/RTable/src/components/Fullscreen.tsx b/src/components/RTable/src/components/Fullscreen.tsx new file mode 100644 index 00000000..5b645e18 --- /dev/null +++ b/src/components/RTable/src/components/Fullscreen.tsx @@ -0,0 +1,51 @@ +/** + * + * @author Ray + * + * @date 2023-10-04 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NPopover } from 'naive-ui' +import RIcon from '@/components/RIcon/index' + +import config from '../config' +import { useFullscreen } from 'vue-hooks-plus' + +import type { TableProvider } from '../type' + +export default defineComponent({ + name: 'TableFullscreen', + setup() { + const { wrapperRef } = inject( + config.tableKey, + {} as TableProvider, + ) + const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapperRef) + + return { + toggleFullscreen, + isFullscreen, + } + }, + render() { + return ( + + {{ + trigger: () => ( + + ), + default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'), + }} + + ) + }, +}) diff --git a/src/components/RTable/src/components/Print.tsx b/src/components/RTable/src/components/Print.tsx index aad04d38..b2e5d71a 100644 --- a/src/components/RTable/src/components/Print.tsx +++ b/src/components/RTable/src/components/Print.tsx @@ -23,7 +23,7 @@ export default defineComponent({ props, setup(props) { const { uuidTable } = inject( - 'tableProvider', + config.tableKey, {} as TableProvider, ) @@ -48,7 +48,7 @@ export default defineComponent({ }, render() { return ( - + {{ trigger: () => ( - * - * @date 2023-10-04 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { NPopover } from 'naive-ui' -import RIcon from '@/components/RIcon/index' - -import screenfull from 'screenfull' -import config from '../config' - -import type { TableProvider } from '../type' - -export default defineComponent({ - name: 'TableScreenfull', - setup() { - const { uuidWrapper } = inject( - 'tableProvider', - {} as TableProvider, - ) - const currentTableIsFullscreen = ref(screenfull.isFullscreen) // 缓存当前是否处于全屏状态 - - const fullscreenTableClick = () => { - const el = document.getElementById(uuidWrapper) - - currentTableIsFullscreen.value = !currentTableIsFullscreen.value - - if (el && screenfull.isEnabled && currentTableIsFullscreen.value) { - screenfull.request(el) - } else { - screenfull.exit() - } - } - - return { - fullscreenTableClick, - currentTableIsFullscreen, - } - }, - render() { - return ( - - {{ - trigger: () => ( - - ), - default: () => - this.currentTableIsFullscreen ? '取消全屏' : '全屏表格', - }} - - ) - }, -}) diff --git a/src/components/RTable/src/components/Size.tsx b/src/components/RTable/src/components/Size.tsx index 3ac4b274..c05891c7 100644 --- a/src/components/RTable/src/components/Size.tsx +++ b/src/components/RTable/src/components/Size.tsx @@ -71,7 +71,7 @@ export default defineComponent({ trigger="click" onUpdateValue={this.updatePopselectValue.bind(this)} > - + {{ trigger: () => ( VNode))[]>, }, + coverTool: { + /** 当 toolOptions 配置时，是否覆盖原工具栏 */ + type: Boolean, + default: false, + }, contextMenuOptions: { /** * diff --git a/src/components/RTable/src/type.ts b/src/components/RTable/src/type.ts index 5580f301..6acb9298 100644 --- a/src/components/RTable/src/type.ts +++ b/src/components/RTable/src/type.ts @@ -21,11 +21,9 @@ export type DropdownMixedOption = export interface DownloadTableOptions { fileName?: string - // icon?: TableActionIcon } export interface PrintTableOptions { - // icon?: TableActionIcon printOptions?: Omit type?: PrintConfiguration.PrintTypes } @@ -33,14 +31,21 @@ export interface PrintTableOptions { export interface TableProvider { uuidWrapper: string uuidTable: string + wrapperRef: Ref } export interface C extends DataTableBaseColumn { leftFixedActivated?: boolean rightFixedActivated?: boolean resizable?: boolean + isResizable?: boolean + isLeftFixedActivated?: boolean + isRightFixedActivated?: boolean + children?: C[] } export type OverridesTableColumn = C | DataTableColumn -export interface TableInst extends Omit {} +export interface TableInst extends TableProvider { + rTableInst: Omit +} diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 24a995bd..b6ca86cd 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -30,8 +30,8 @@ import AppAvatar from '@/app-components/app/AppAvatar/index' import { useSetting } from '@/store' import { LOCAL_OPTIONS } from '@/app-config/localConfig' import { useAvatarOptions, avatarDropdownClick } from './hook' -import screenfull from 'screenfull' import { useI18n } from '@/hooks/web/index' +import { useFullscreen } from 'vue-hooks-plus' import type { IconEventMapOptions, IconEventMap } from './type' @@ -43,6 +43,9 @@ const SiderBar = defineComponent({ const { t } = useI18n() const { updateLocale, changeSwitcher } = settingStore + const [isFullscreen, { toggleFullscreen }] = useFullscreen( + document.getElementsByTagName('html')[0], + ) const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } = storeToRefs(settingStore) const showSettings = ref(false) @@ -50,7 +53,6 @@ const SiderBar = defineComponent({ display: 'flex', } const globalSearchShown = ref(false) - const isScreenfull = ref(screenfull.isFullscreen) /** * @@ -81,7 +83,7 @@ const SiderBar = defineComponent({ name: 'fullscreen', size: 18, tooltip: computed(() => - isScreenfull.value + isFullscreen.value ? t('headerTooltip.CancelFullScreen') : t('headerTooltip.FullScreen'), ), @@ -114,17 +116,7 @@ const SiderBar = defineComponent({ window.open('https://github.com/XiaoDaiGua-Ray/ray-template') }, fullscreen: () => { - if (!screenfull.isEnabled) { - return (() => { - window.$message.warning('您的浏览器不支持全屏~') - })() - } else { - return (() => { - screenfull.toggle() - - isScreenfull.value = !screenfull.isFullscreen - })() - } + toggleFullscreen() }, search: () => { globalSearchShown.value = true diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx index 4759813c..8d86e782 100644 --- a/src/views/demo/table/index.tsx +++ b/src/views/demo/table/index.tsx @@ -10,7 +10,6 @@ */ import { - NLayout, NTag, NButton, NGridItem, @@ -18,14 +17,13 @@ import { NInput, NDatePicker, NSwitch, - NP, - NH2, - NUl, - NLi, NSpace, + NPopover, + NCard, } from 'naive-ui' import RCollapseGrid from '@/components/RCollapseGrid/index' import RTable from '@/components/RTable/index' +import RIcon from '@/components/RIcon/index' import type { DataTableColumns } from 'naive-ui' import type { TableInst } from '@/components/RTable/index' @@ -41,8 +39,6 @@ type RowData = { const TableView = defineComponent({ name: 'TableView', setup() { - const tableRef = ref() - const baseColumns = [ { title: 'Name', @@ -153,37 +149,15 @@ const TableView = defineComponent({ baseColumns, tableMenuOptions, handleMenuSelect, - tableRef, } }, render() { return ( -
- RayTable 组件使用 - - - 该组件基于 Naive UI DataTable - 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能 - - RayTable 完全继承 DataTable 的所有属性与方法 - - 相关拓展 props 属性，可以在源码位置 - src/components/RayTable/src/props.ts 中查看相关代码与注释 - - 该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏 - - 配合 RayCollapseGird 组件使用与 RayTable 拓展功能 - - 使用响应式方法代理 columns 并且打开 action - 则可以启用操作栏(v-model:columns) - - 拖拽操作栏动态切换表格列 - 点击左右固定按钮，即可动态固定列 - 点击修改列宽度，即可拖动列修改宽度 - 点击导出按钮即可导出 excel 表格，默认以列为表头输出 - 点击打印按钮即可打印该表格 - 右键菜单 - 全屏表格 + + + 基于 NDataTable 封装，继承该组件所有 props 属性。查看 RTable props + 文件即可查看该组件拓展项 + @@ -242,33 +215,30 @@ const TableView = defineComponent({ contextMenuOptions={this.tableMenuOptions} loading={this.tableLoading} onContextMenuClick={this.handleMenuSelect.bind(this)} - > - {/* - 标题插槽: - (this.tableLoading = value)} - > - - } - data={this.tableData} - v-model:columns={this.actionColumns} - pagination={{ - pageSize: 10, - }} - loading={this.tableLoading} - rightClickOptions={this.tableMenuOptions} - onRightMenuClick={this.handleMenuSelect.bind(this)} + toolOptions={[ + + {{ + trigger: () => ( + { + window.$message.info('点击了搜索按钮') + }} + /> + ), + default: () => '我是自定义工具栏示例', + }} + , + ]} > {{ tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上', + tableAction: () => '表格的操作区域内容插槽，有时候可能会用上', }} - */} -
+ + ) }, }) diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts index 141473d2..33506165 100644 --- a/vite.pliugin.config.ts +++ b/vite.pliugin.config.ts @@ -175,7 +175,6 @@ export default function (mode: string): PluginOption[] { 'vuedraggable', 'xlsx', 'axios', - 'screenfull', 'print-js', 'clipboard', 'lodash-es',