blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 07:03:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

version: v4.9.4

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2024-08-31 14:51:22 +08:00
parent fa8d52601f
commit 60ed09a0c5
17 changed files with 231 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.gitattributes vendored
View File

@ -1,2 +1,14 @@
# 将换行符设置为lf # 将换行符设置为lf
* text eol=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

2
.vscode/settings.json vendored
View File

@ -19,10 +19,12 @@
"alias-skip.allowedsuffix": ["ts", "tsx"], "alias-skip.allowedsuffix": ["ts", "tsx"],
"alias-skip.rootpath": "package.json", "alias-skip.rootpath": "package.json",
"cSpell.words": [ "cSpell.words": [
"baomitu",
"bezier", "bezier",
"Clickoutside", "Clickoutside",
"codabar", "codabar",
"commitmsg", "commitmsg",
"crossorigin",
"datetimerange", "datetimerange",
"domtoimage", "domtoimage",
"EDITMSG", "EDITMSG",

14
CHANGELOG.md
View File

@ -1,5 +1,19 @@
# CHANGE LOG # 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 ## 4.9.3
## Feats ## Feats

2
index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

4
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "ray-template", "name": "ray-template",
"private": false, "private": false,
"version": "4.9.3", "version": "4.9.4",
"type": "module", "type": "module",
"engines": { "engines": {
"node": "^18.0.0 || >=20.0.0", "node": "^18.0.0 || >=20.0.0",
@ -34,7 +34,7 @@
}, },
"dependencies": { "dependencies": {
"@vueuse/core": "^10.9.0", "@vueuse/core": "^10.9.0",
"axios": "^1.7.2", "axios": "^1.7.5",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"currency.js": "^2.0.4", "currency.js": "^2.0.4",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",

8
pnpm-lock.yaml generated
View File

@ -9,8 +9,8 @@ dependencies:
specifier: ^10.9.0 specifier: ^10.9.0
version: 10.9.0(vue@3.4.38) version: 10.9.0(vue@3.4.38)
axios: axios:
specifier: ^1.7.2 specifier: ^1.7.5
version: 1.7.2 version: 1.7.5
clipboard: clipboard:
specifier: ^2.0.11 specifier: ^2.0.11
version: 2.0.11 version: 2.0.11
@ -2746,8 +2746,8 @@ packages:
possible-typed-array-names: 1.0.0 possible-typed-array-names: 1.0.0
dev: true dev: true
/axios@1.7.2: /axios@1.7.5:
resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==} resolution: {integrity: sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==}
dependencies: dependencies:
follow-redirects: 1.15.6 follow-redirects: 1.15.6
form-data: 4.0.0 form-data: 4.0.0

34
src/components-pro/RTablePro/src/TablePro.tsx
View File

@ -23,7 +23,20 @@ export default defineComponent({
name: 'RTablePro', name: 'RTablePro',
props, props,
setup(props) { setup(props) {
const [register, { getTableInstance }] = useTable() const [
register,
{
clearFilters,
clearSorter,
downloadCsv,
filters,
page,
scrollTo,
sort,
print,
filter,
},
] = useTable()
const [ const [
paginationRef, paginationRef,
{ {
@ -31,7 +44,6 @@ export default defineComponent({
getPageSize, getPageSize,
setCallback, setCallback,
setItemCount, setItemCount,
getPagination,
resetPagination, resetPagination,
getItemCount, getItemCount,
}, },
@ -42,8 +54,6 @@ export default defineComponent({
// 获取最新 statistics 和 pagination 值 // 获取最新 statistics 和 pagination 值
const update = (): TablePagination => { const update = (): TablePagination => {
const pagination = getPagination()
return { return {
getItemCount, getItemCount,
getPage, getPage,
@ -126,19 +136,7 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
const { onRegister } = props const { onRegister } = props
if (onRegister && getTableInstance()) { if (onRegister) {
const {
clearFilters,
clearSorter,
downloadCsv,
filters,
page,
scrollTo,
sort,
filter,
print,
} = getTableInstance()
call(onRegister, { call(onRegister, {
getTablePagination: update, getTablePagination: update,
runTableRequest: runResetPaginationRequest, runTableRequest: runResetPaginationRequest,
@ -149,8 +147,8 @@ export default defineComponent({
page, page,
scrollTo, scrollTo,
sort, sort,
filter,
print, print,
filter,
getCurrentTableRequestParams: getCurrentTableRequestParams:
combineRequestParams as TableProInst['getCurrentTableRequestParams'], combineRequestParams as TableProInst['getCurrentTableRequestParams'],
}) })

4
src/components-pro/RTablePro/src/hooks/useTablePro.ts
View File

@ -8,6 +8,7 @@ import type {
ColumnKey, ColumnKey,
SortOrder, SortOrder,
} from '@/components/RTable/src/types' } from '@/components/RTable/src/types'
import type { PrintDomOptions } from '@/utils'
/** /**
* *
@ -134,7 +135,8 @@ export const useTablePro = () => {
* @description * @description
* 打印表格。 * 打印表格。
*/ */
const print = () => getTableProInstance().print.call(null) const print = (options?: PrintDomOptions) =>
getTableProInstance().print.call(null, options)
/** /**
* *

54
src/components/RCollapseGrid/src/index.tsx
View File

@ -31,7 +31,20 @@ export default defineComponent({
name: 'RCollapseGrid', name: 'RCollapseGrid',
props, props,
setup(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 cssVars = computed(() => {
const cssVar = { const cssVar = {
'--r-collapse-grid-action-align': props.actionAlign, '--r-collapse-grid-action-align': props.actionAlign,
@ -42,16 +55,6 @@ export default defineComponent({
const collapseClick = () => { const collapseClick = () => {
modelCollapsed.value = !modelCollapsed.value modelCollapsed.value = !modelCollapsed.value
const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
if (onUpdateValue) {
call(onUpdateValue, modelCollapsed.value)
}
if (_onUpdateValue) {
call(_onUpdateValue, modelCollapsed.value)
}
} }
const CollapseIcon = () => ( const CollapseIcon = () => (
@ -79,7 +82,16 @@ export default defineComponent({
} }
}, },
render() { render() {
const { cssVars } = this const {
$slots: { collapse, action, default: defaultSlot },
CollapseIcon,
$props,
modelCollapsed,
xGap,
yGap,
collapsedRows,
cssVars,
} = this
return ( return (
<NCard bordered={this.bordered} style={[cssVars]}> <NCard bordered={this.bordered} style={[cssVars]}>
@ -87,17 +99,17 @@ export default defineComponent({
default: () => ( default: () => (
<NGrid <NGrid
class="ray-collapse-grid" class="ray-collapse-grid"
{...this.$props} {...$props}
collapsed={this.modelCollapsed} collapsed={modelCollapsed}
xGap={this.xGap || 12} xGap={xGap || 12}
yGap={this.yGap || 18} yGap={yGap || 12}
collapsedRows={this.collapsedRows} collapsedRows={collapsedRows}
> >
{this.$slots.default?.()} {defaultSlot?.()}
<NGridItem suffix class={['ray-collapse-grid__suffix--btn']}> <NGridItem suffix class="ray-collapse-grid__suffix--btn">
<NFlex justify="end" align="center"> <NFlex justify="end" align="center">
{this.$slots.action?.()} {action?.()}
{this.CollapseIcon()} {collapse ? collapse(modelCollapsed) : CollapseIcon()}
</NFlex> </NFlex>
</NGridItem> </NGridItem>
</NGrid> </NGrid>

9
src/components/RTable/src/hooks/useTable.ts
View File

@ -10,6 +10,7 @@ import type {
UseTableRegister, UseTableRegister,
TableProvider, TableProvider,
} from '../types' } from '../types'
import type { PrintDomOptions } from '@/utils'
/** /**
* *
@ -138,16 +139,19 @@ const useTable = () => {
* @description * @description
* 打印表格。 * 打印表格。
*/ */
const print = () => { const print = (options?: PrintDomOptions) => {
const { uuidWrapper } = extra const { uuidWrapper } = extra
if (uuidWrapper) { if (uuidWrapper) {
const tableWrapperElement = document.getElementById(uuidWrapper) const tableWrapperElement = document.getElementById(uuidWrapper)
printDom(tableWrapperElement) printDom(tableWrapperElement, options)
} }
} }
const filter = (filters: FilterState | null) =>
getTableInstance().filter.call(null, filters)
return [ return [
register, register,
{ {
@ -160,6 +164,7 @@ const useTable = () => {
scrollTo, scrollTo,
sort, sort,
print, print,
filter,
}, },
] as const ] as const
} }

2
src/components/RTable/src/types.ts
View File

@ -53,7 +53,7 @@ export interface RTableInst extends Omit<DataTableInst, 'clearFilter'> {
* @description * @description
* 打印表格。 * 打印表格。
*/ */
print: () => void print: (options?: PrintDomOptions) => void
} }
export type OverridesTableColumn<T = Recordable> = C | DataTableColumn<T> export type OverridesTableColumn<T = Recordable> = C | DataTableColumn<T>

1
src/styles/base.scss
View File

@ -1,6 +1,7 @@
@import '@/styles/animate.scss'; @import '@/styles/animate.scss';
@import '@/styles/root.scss'; @import '@/styles/root.scss';
@import '@/styles/naive.scss'; @import '@/styles/naive.scss';
@import '@/styles/print-css.scss';
body, body,
h1, h1,

88
src/styles/print-css.scss Normal file
View File

@ -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);
}
}

24
src/views/demo/TablePro.tsx
View File

@ -22,7 +22,9 @@ import {
NFormItem, NFormItem,
NSelect, NSelect,
NDatePicker, NDatePicker,
NText,
} from 'naive-ui' } from 'naive-ui'
import { RIcon } from '@/components'
import { uuid } from '@/utils' import { uuid } from '@/utils'
import { useHookPlusRequest } from '@/axios' import { useHookPlusRequest } from '@/axios'
@ -213,6 +215,7 @@ export default defineComponent({
rowKey: 'key', rowKey: 'key',
onChange: (keys, rows, meta) => {}, onChange: (keys, rows, meta) => {},
}) })
const collapseRef = ref(true)
const isNullOrUndefined = (value: unknown) => { const isNullOrUndefined = (value: unknown) => {
return value === null || value === void 0 return value === null || value === void 0
@ -300,6 +303,7 @@ export default defineComponent({
getRows, getRows,
clearKey, clearKey,
clearAll, clearAll,
collapseRef,
selectKey, selectKey,
} }
}, },
@ -326,7 +330,7 @@ export default defineComponent({
return ( return (
<NFlex vertical> <NFlex vertical>
<RCollapse> <RCollapse open={this.collapseRef}>
{{ {{
default: () => ( default: () => (
<> <>
@ -372,6 +376,22 @@ export default defineComponent({
</NButton> </NButton>
</NFlex> </NFlex>
), ),
collapse: (open: boolean) =>
open ? (
<NButton onClick={() => (this.collapseRef = true)} secondary>
{{
default: () => '受控展开',
icon: () => <RIcon name="dark" size="18" />,
}}
</NButton>
) : (
<NButton onClick={() => (this.collapseRef = false)} secondary>
{{
default: () => '受控收起',
icon: () => <RIcon name="light" size="18" />,
}}
</NButton>
),
}} }}
</RCollapse> </RCollapse>
<NCard title="常用高级拓展功能"> <NCard title="常用高级拓展功能">
@ -392,7 +412,7 @@ export default defineComponent({
</NCard> </NCard>
<NCard title="useTablePro 部分方法"> <NCard title="useTablePro 部分方法">
<NFlex> <NFlex>
<NButton type="primary" onClick={print}> <NButton type="primary" onClick={() => print()}>
打印 打印
</NButton> </NButton>
<NButton type="primary" onClick={() => downloadCsv()}> <NButton type="primary" onClick={() => downloadCsv()}>

4
src/views/demo/table/index.tsx
View File

@ -270,10 +270,10 @@ const TableView = defineComponent({
> >
下载 CSV 下载 CSV
</NButton> </NButton>
<NButton onClick={getTableInstance.bind(this)}> <NButton onClick={() => getTableInstance()}>
getTableInstance getTableInstance
</NButton> </NButton>
<NButton onClick={print.bind(this)}>打印</NButton> <NButton onClick={() => print()}>打印</NButton>
</NFlex> </NFlex>
</NFlex> </NFlex>
</NCard> </NCard>

11
vite-helper/cdn-resolve.ts
View File

@ -6,11 +6,9 @@ import { defineResolve } from 'vite-plugin-cdn2/resolve'
* 自定义 vite-plugin-cdn2 resolve 方法。 * 自定义 vite-plugin-cdn2 resolve 方法。
* 默认使用 cdnjs 作为 cdn 服务商。 * 默认使用 cdnjs 作为 cdn 服务商。
* *
* @see https://cdnjs.cloudflare.com/ajax/libs/ * @see https://lib.baomitu.com/
*/ */
export const cdnResolve = ( export const cdnResolve = (cdnBaseURL: string = 'https://lib.baomitu.com/') =>
cdnBaseURL: string = 'https://cdnjs.cloudflare.com/ajax/libs/',
) =>
defineResolve({ defineResolve({
name: 'RayTemplateCdnResolve', name: 'RayTemplateCdnResolve',
setup({ extra }) { setup({ extra }) {
@ -20,7 +18,10 @@ export const cdnResolve = (
return { return {
url: url.href, url: url.href,
injectTo: 'head-prepend', injectTo: 'head-prepend',
attrs: {}, attrs: {
defer: true,
crossorigin: 'anonymous',
},
} }
}, },
}) })

17
vite.plugin.config.ts
View File

@ -105,6 +105,23 @@ function onlyBuildOptions(mode: string): PluginOption[] {
global: 'JsBarcode', global: 'JsBarcode',
relativeModule: 'JsBarcode.all.min.js', 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',
},
], ],
}), }),
] ]