blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 06:34:12 +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
* 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.rootpath": "package.json",
"cSpell.words": [
"baomitu",
"bezier",
"Clickoutside",
"codabar",
"commitmsg",
"crossorigin",
"datetimerange",
"domtoimage",
"EDITMSG",

14
CHANGELOG.md
View File

@ -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

2
index.html
View File

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

4
package.json
View File

@ -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",

8
pnpm-lock.yaml generated
View File

@ -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

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

@ -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'],
})

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

@ -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)
/**
*

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

@ -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 (
<NCard bordered={this.bordered} style={[cssVars]}>
@ -87,17 +99,17 @@ export default defineComponent({
default: () => (
<NGrid
class="ray-collapse-grid"
{...this.$props}
collapsed={this.modelCollapsed}
xGap={this.xGap || 12}
yGap={this.yGap || 18}
collapsedRows={this.collapsedRows}
{...$props}
collapsed={modelCollapsed}
xGap={xGap || 12}
yGap={yGap || 12}
collapsedRows={collapsedRows}
>
{this.$slots.default?.()}
<NGridItem suffix class={['ray-collapse-grid__suffix--btn']}>
{defaultSlot?.()}
<NGridItem suffix class="ray-collapse-grid__suffix--btn">
<NFlex justify="end" align="center">
{this.$slots.action?.()}
{this.CollapseIcon()}
{action?.()}
{collapse ? collapse(modelCollapsed) : CollapseIcon()}
</NFlex>
</NGridItem>
</NGrid>

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

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

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

@ -53,7 +53,7 @@ export interface RTableInst extends Omit<DataTableInst, 'clearFilter'> {
* @description
* 打印表格。
*/
print: () => void
print: (options?: PrintDomOptions) => void
}
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/root.scss';
@import '@/styles/naive.scss';
@import '@/styles/print-css.scss';
body,
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,
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 (
<NFlex vertical>
<RCollapse>
<RCollapse open={this.collapseRef}>
{{
default: () => (
<>
@ -372,6 +376,22 @@ export default defineComponent({
</NButton>
</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>
<NCard title="常用高级拓展功能">
@ -392,7 +412,7 @@ export default defineComponent({
</NCard>
<NCard title="useTablePro 部分方法">
<NFlex>
<NButton type="primary" onClick={print}>
<NButton type="primary" onClick={() => print()}>
打印
</NButton>
<NButton type="primary" onClick={() => downloadCsv()}>

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

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

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

@ -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',
},
}
},
})

17
vite.plugin.config.ts
View File

@ -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',
},
],
}),
]