From 60ed09a0c5144b35945b0659193c83a7a399ae57 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Sat, 31 Aug 2024 14:51:22 +0800
Subject: [PATCH] version: v4.9.4
---
.gitattributes | 12 +++
.vscode/settings.json | 2 +
CHANGELOG.md | 14 +++
index.html | 2 +-
package.json | 4 +-
pnpm-lock.yaml | 8 +-
src/components-pro/RTablePro/src/TablePro.tsx | 34 ++++---
.../RTablePro/src/hooks/useTablePro.ts | 4 +-
src/components/RCollapseGrid/src/index.tsx | 54 +++++++-----
src/components/RTable/src/hooks/useTable.ts | 9 +-
src/components/RTable/src/types.ts | 2 +-
src/styles/base.scss | 1 +
src/styles/print-css.scss | 88 +++++++++++++++++++
src/views/demo/TablePro.tsx | 24 ++++-
src/views/demo/table/index.tsx | 4 +-
vite-helper/cdn-resolve.ts | 11 +--
vite.plugin.config.ts | 17 ++++
17 files changed, 231 insertions(+), 59 deletions(-)
create mode 100644 src/styles/print-css.scss
diff --git a/.gitattributes b/.gitattributes
index 6e573c3f..96622330 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,14 @@
# 将换行符设置为lf
* text eol=lf
+# 将静态资源文件以二进制形式处理
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.svg binary
+*.webp binary
+*.mp4 binary
+*.mov binary
+*.avi binary
+*.mp3 binary
+*.wav binary
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d9e4f2f1..282e67de 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,10 +19,12 @@
"alias-skip.allowedsuffix": ["ts", "tsx"],
"alias-skip.rootpath": "package.json",
"cSpell.words": [
+ "baomitu",
"bezier",
"Clickoutside",
"codabar",
"commitmsg",
+ "crossorigin",
"datetimerange",
"domtoimage",
"EDITMSG",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d791a1b9..c27a8e2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
# CHANGE LOG
+## 4.9.4
+
+## Feats
+
+- `cdn` 相关的一些配置
+ - 将 `cdn` 源更新为 `baomitu`，为了避免因为墙的影响导致加载缓慢的问题
+ - 新增一些插件的 `cdn` 配置
+- `useTable`, `useTablePro` 中的 `print` 方法新增传递 `options` 配置项，配置打印，允许配置 `dom-to-image` 与 `print-js`，详情可以查看 `PrintDomOptions` 类型说明。
+- `RCollapse` 组件新增 `collapse` 插槽，允许自定义【展开】与【收起】状态
+
+## Fixes
+
+- 修复 `useTablePro` 中 `print` 方法丢失的问题
+
## 4.9.3
## Feats
diff --git a/index.html b/index.html
index 7c7350fd..5f0bc9e5 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/package.json b/package.json
index 8f581d4b..878e3142 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "ray-template",
"private": false,
- "version": "4.9.3",
+ "version": "4.9.4",
"type": "module",
"engines": {
"node": "^18.0.0 || >=20.0.0",
@@ -34,7 +34,7 @@
},
"dependencies": {
"@vueuse/core": "^10.9.0",
- "axios": "^1.7.2",
+ "axios": "^1.7.5",
"clipboard": "^2.0.11",
"currency.js": "^2.0.4",
"dayjs": "^1.11.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f91603c..7b61783d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
specifier: ^10.9.0
version: 10.9.0(vue@3.4.38)
axios:
- specifier: ^1.7.2
- version: 1.7.2
+ specifier: ^1.7.5
+ version: 1.7.5
clipboard:
specifier: ^2.0.11
version: 2.0.11
@@ -2746,8 +2746,8 @@ packages:
possible-typed-array-names: 1.0.0
dev: true
- /axios@1.7.2:
- resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==}
+ /axios@1.7.5:
+ resolution: {integrity: sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==}
dependencies:
follow-redirects: 1.15.6
form-data: 4.0.0
diff --git a/src/components-pro/RTablePro/src/TablePro.tsx b/src/components-pro/RTablePro/src/TablePro.tsx
index 5741ddf0..7e2ba01b 100644
--- a/src/components-pro/RTablePro/src/TablePro.tsx
+++ b/src/components-pro/RTablePro/src/TablePro.tsx
@@ -23,7 +23,20 @@ export default defineComponent({
name: 'RTablePro',
props,
setup(props) {
- const [register, { getTableInstance }] = useTable()
+ const [
+ register,
+ {
+ clearFilters,
+ clearSorter,
+ downloadCsv,
+ filters,
+ page,
+ scrollTo,
+ sort,
+ print,
+ filter,
+ },
+ ] = useTable()
const [
paginationRef,
{
@@ -31,7 +44,6 @@ export default defineComponent({
getPageSize,
setCallback,
setItemCount,
- getPagination,
resetPagination,
getItemCount,
},
@@ -42,8 +54,6 @@ export default defineComponent({
// 获取最新 statistics 和 pagination 值
const update = (): TablePagination => {
- const pagination = getPagination()
-
return {
getItemCount,
getPage,
@@ -126,19 +136,7 @@ export default defineComponent({
onMounted(() => {
const { onRegister } = props
- if (onRegister && getTableInstance()) {
- const {
- clearFilters,
- clearSorter,
- downloadCsv,
- filters,
- page,
- scrollTo,
- sort,
- filter,
- print,
- } = getTableInstance()
-
+ if (onRegister) {
call(onRegister, {
getTablePagination: update,
runTableRequest: runResetPaginationRequest,
@@ -149,8 +147,8 @@ export default defineComponent({
page,
scrollTo,
sort,
- filter,
print,
+ filter,
getCurrentTableRequestParams:
combineRequestParams as TableProInst['getCurrentTableRequestParams'],
})
diff --git a/src/components-pro/RTablePro/src/hooks/useTablePro.ts b/src/components-pro/RTablePro/src/hooks/useTablePro.ts
index 947a1246..a75e4cae 100644
--- a/src/components-pro/RTablePro/src/hooks/useTablePro.ts
+++ b/src/components-pro/RTablePro/src/hooks/useTablePro.ts
@@ -8,6 +8,7 @@ import type {
ColumnKey,
SortOrder,
} from '@/components/RTable/src/types'
+import type { PrintDomOptions } from '@/utils'
/**
*
@@ -134,7 +135,8 @@ export const useTablePro = () => {
* @description
* 打印表格。
*/
- const print = () => getTableProInstance().print.call(null)
+ const print = (options?: PrintDomOptions) =>
+ getTableProInstance().print.call(null, options)
/**
*
diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx
index 57c050f7..63216f97 100644
--- a/src/components/RCollapseGrid/src/index.tsx
+++ b/src/components/RCollapseGrid/src/index.tsx
@@ -31,7 +31,20 @@ export default defineComponent({
name: 'RCollapseGrid',
props,
setup(props) {
- const modelCollapsed = ref(!props.open)
+ const modelCollapsed = computed({
+ get: () => !props.open,
+ set: (val) => {
+ const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
+
+ if (onUpdateValue) {
+ call(onUpdateValue, val)
+ }
+
+ if (_onUpdateValue) {
+ call(_onUpdateValue, val)
+ }
+ },
+ })
const cssVars = computed(() => {
const cssVar = {
'--r-collapse-grid-action-align': props.actionAlign,
@@ -42,16 +55,6 @@ export default defineComponent({
const collapseClick = () => {
modelCollapsed.value = !modelCollapsed.value
-
- const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
-
- if (onUpdateValue) {
- call(onUpdateValue, modelCollapsed.value)
- }
-
- if (_onUpdateValue) {
- call(_onUpdateValue, modelCollapsed.value)
- }
}
const CollapseIcon = () => (
@@ -79,7 +82,16 @@ export default defineComponent({
}
},
render() {
- const { cssVars } = this
+ const {
+ $slots: { collapse, action, default: defaultSlot },
+ CollapseIcon,
+ $props,
+ modelCollapsed,
+ xGap,
+ yGap,
+ collapsedRows,
+ cssVars,
+ } = this
return (
@@ -87,17 +99,17 @@ export default defineComponent({
default: () => (
- {this.$slots.default?.()}
-
+ {defaultSlot?.()}
+
- {this.$slots.action?.()}
- {this.CollapseIcon()}
+ {action?.()}
+ {collapse ? collapse(modelCollapsed) : CollapseIcon()}
diff --git a/src/components/RTable/src/hooks/useTable.ts b/src/components/RTable/src/hooks/useTable.ts
index 2a3cfcc0..357fa894 100644
--- a/src/components/RTable/src/hooks/useTable.ts
+++ b/src/components/RTable/src/hooks/useTable.ts
@@ -10,6 +10,7 @@ import type {
UseTableRegister,
TableProvider,
} from '../types'
+import type { PrintDomOptions } from '@/utils'
/**
*
@@ -138,16 +139,19 @@ const useTable = () => {
* @description
* 打印表格。
*/
- const print = () => {
+ const print = (options?: PrintDomOptions) => {
const { uuidWrapper } = extra
if (uuidWrapper) {
const tableWrapperElement = document.getElementById(uuidWrapper)
- printDom(tableWrapperElement)
+ printDom(tableWrapperElement, options)
}
}
+ const filter = (filters: FilterState | null) =>
+ getTableInstance().filter.call(null, filters)
+
return [
register,
{
@@ -160,6 +164,7 @@ const useTable = () => {
scrollTo,
sort,
print,
+ filter,
},
] as const
}
diff --git a/src/components/RTable/src/types.ts b/src/components/RTable/src/types.ts
index cdc1e625..72ee55d7 100644
--- a/src/components/RTable/src/types.ts
+++ b/src/components/RTable/src/types.ts
@@ -53,7 +53,7 @@ export interface RTableInst extends Omit {
* @description
* 打印表格。
*/
- print: () => void
+ print: (options?: PrintDomOptions) => void
}
export type OverridesTableColumn = C | DataTableColumn
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 811363bd..a821979f 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -1,6 +1,7 @@
@import '@/styles/animate.scss';
@import '@/styles/root.scss';
@import '@/styles/naive.scss';
+@import '@/styles/print-css.scss';
body,
h1,
diff --git a/src/styles/print-css.scss b/src/styles/print-css.scss
new file mode 100644
index 00000000..e29ad8ae
--- /dev/null
+++ b/src/styles/print-css.scss
@@ -0,0 +1,88 @@
+.printModal {
+ font-family: sans-serif;
+ display: flex;
+ text-align: center;
+ font-weight: 300;
+ font-size: 30px;
+ left: 0;
+ top: 0;
+ position: absolute;
+ color: #045fb4;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.9);
+}
+
+.printClose {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+}
+
+.printClose:before {
+ content: '\00D7';
+ font-family: 'Helvetica Neue', sans-serif;
+ font-weight: 100;
+ line-height: 1px;
+ padding-top: 0.5em;
+ display: block;
+ font-size: 2em;
+ text-indent: 1px;
+ overflow: hidden;
+ height: 1.25em;
+ width: 1.25em;
+ text-align: center;
+ cursor: pointer;
+}
+
+.printSpinner {
+ margin-top: 3px;
+ margin-left: -40px;
+ position: absolute;
+ display: inline-block;
+ width: 25px;
+ height: 25px;
+ border: 2px solid #045fb4;
+ border-radius: 50%;
+ animation: spin 0.75s infinite linear;
+}
+
+.printSpinner::after,
+.printSpinner::before {
+ left: -2px;
+ top: -2px;
+ display: none;
+ position: absolute;
+ content: '';
+ width: inherit;
+ height: inherit;
+ border: inherit;
+ border-radius: inherit;
+}
+
+.printSpinner,
+.printSpinner::after,
+.printSpinner::before {
+ display: inline-block;
+ border-color: transparent;
+ border-top-color: #045fb4;
+ animation-duration: 1.2s;
+}
+
+.printSpinner::before {
+ transform: rotate(120deg);
+}
+
+.printSpinner::after {
+ transform: rotate(240deg);
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/views/demo/TablePro.tsx b/src/views/demo/TablePro.tsx
index 431514eb..49eea75e 100644
--- a/src/views/demo/TablePro.tsx
+++ b/src/views/demo/TablePro.tsx
@@ -22,7 +22,9 @@ import {
NFormItem,
NSelect,
NDatePicker,
+ NText,
} from 'naive-ui'
+import { RIcon } from '@/components'
import { uuid } from '@/utils'
import { useHookPlusRequest } from '@/axios'
@@ -213,6 +215,7 @@ export default defineComponent({
rowKey: 'key',
onChange: (keys, rows, meta) => {},
})
+ const collapseRef = ref(true)
const isNullOrUndefined = (value: unknown) => {
return value === null || value === void 0
@@ -300,6 +303,7 @@ export default defineComponent({
getRows,
clearKey,
clearAll,
+ collapseRef,
selectKey,
}
},
@@ -326,7 +330,7 @@ export default defineComponent({
return (
-
+
{{
default: () => (
<>
@@ -372,6 +376,22 @@ export default defineComponent({
),
+ collapse: (open: boolean) =>
+ open ? (
+ (this.collapseRef = true)} secondary>
+ {{
+ default: () => '受控展开',
+ icon: () => ,
+ }}
+
+ ) : (
+ (this.collapseRef = false)} secondary>
+ {{
+ default: () => '受控收起',
+ icon: () => ,
+ }}
+
+ ),
}}
@@ -392,7 +412,7 @@ export default defineComponent({
-
+ print()}>
打印
downloadCsv()}>
diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx
index 16a60dcb..6b243b1d 100644
--- a/src/views/demo/table/index.tsx
+++ b/src/views/demo/table/index.tsx
@@ -270,10 +270,10 @@ const TableView = defineComponent({
>
下载 CSV
-
+ getTableInstance()}>
getTableInstance
- 打印
+ print()}>打印
diff --git a/vite-helper/cdn-resolve.ts b/vite-helper/cdn-resolve.ts
index 16899bd2..c9a4104e 100644
--- a/vite-helper/cdn-resolve.ts
+++ b/vite-helper/cdn-resolve.ts
@@ -6,11 +6,9 @@ import { defineResolve } from 'vite-plugin-cdn2/resolve'
* 自定义 vite-plugin-cdn2 resolve 方法。
* 默认使用 cdnjs 作为 cdn 服务商。
*
- * @see https://cdnjs.cloudflare.com/ajax/libs/
+ * @see https://lib.baomitu.com/
*/
-export const cdnResolve = (
- cdnBaseURL: string = 'https://cdnjs.cloudflare.com/ajax/libs/',
-) =>
+export const cdnResolve = (cdnBaseURL: string = 'https://lib.baomitu.com/') =>
defineResolve({
name: 'RayTemplateCdnResolve',
setup({ extra }) {
@@ -20,7 +18,10 @@ export const cdnResolve = (
return {
url: url.href,
injectTo: 'head-prepend',
- attrs: {},
+ attrs: {
+ defer: true,
+ crossorigin: 'anonymous',
+ },
}
},
})
diff --git a/vite.plugin.config.ts b/vite.plugin.config.ts
index 76170605..301164b4 100644
--- a/vite.plugin.config.ts
+++ b/vite.plugin.config.ts
@@ -105,6 +105,23 @@ function onlyBuildOptions(mode: string): PluginOption[] {
global: 'JsBarcode',
relativeModule: 'JsBarcode.all.min.js',
},
+ {
+ name: 'dayjs',
+ global: 'dayjs',
+ relativeModule: 'dayjs.min.js',
+ },
+ {
+ name: 'dom-to-image',
+ global: 'domtoimage',
+ relativeModule: 'dom-to-image.min.js',
+ },
+ {
+ // 如果需要修改版本，需要同时修改 index.html 中对应的 css
+ // 可以全局搜索 https://lib.baomitu.com/print-js/1.6.0/print.min.css
+ name: 'print-js',
+ global: 'printJS',
+ relativeModule: 'print.min.js',
+ },
],
}),
]