diff --git a/.depcheckrc b/.depcheckrc new file mode 100644 index 00000000..8c906e3d --- /dev/null +++ b/.depcheckrc @@ -0,0 +1,2 @@ +ignores: [ "eslint", "babel-*", "@use-*/**", "@use-*" ] +skip-missing: true \ No newline at end of file diff --git a/.eslintignore b/.eslintignore index 31c5bf05..18151d4a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,4 +5,7 @@ components.d.ts .gitignore .vscode public -yarn.* \ No newline at end of file +yarn.* +vite-env.* +.prettierrc.* +.eslintrc \ No newline at end of file diff --git a/package.json b/package.json index 962f7edd..e2578088 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": true, - "version": "0.0.0", + "version": "3.0.0", "type": "module", "scripts": { "dev": "vite", @@ -21,6 +21,7 @@ "naive-ui": "^2.34.0", "pinia": "^2.0.17", "pinia-plugin-persistedstate": "^2.4.0", + "print-js": "^1.6.0", "sass": "^1.54.3", "screenfull": "^6.0.2", "vue": "^3.2.37", @@ -40,6 +41,7 @@ "@vitejs/plugin-vue": "^3.0.0", "@vitejs/plugin-vue-jsx": "^2.0.0", "autoprefixer": "^10.4.8", + "depcheck": "^1.4.3", "eslint": "^8.0.1", "eslint-config-prettier": "^8.5.0", "eslint-config-standard-with-typescript": "^23.0.0", diff --git a/src/components/RayLink/index.tsx b/src/components/RayLink/index.tsx index 6369e3e3..8373116c 100644 --- a/src/components/RayLink/index.tsx +++ b/src/components/RayLink/index.tsx @@ -27,13 +27,13 @@ const RayLink = defineComponent({ key: 'ray-js-note', src: 'https://note.youdao.com/s/ObWEe2BB', tooltip: 'Ray的前端学习笔记', - icon: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg', + icon: 'https://avatars.githubusercontent.com/u/51957438?v=4', }, { key: 'ray-js-cover', src: 'https://note.youdao.com/s/IC8xKPdB', tooltip: 'Ray的面试题总结', - icon: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg', + icon: 'https://avatars.githubusercontent.com/u/51957438?v=4', }, ] diff --git a/src/components/RayTable/src/components/ExportExcel/index.tsx b/src/components/RayTable/src/components/ExportExcel/index.tsx deleted file mode 100644 index a534ea6b..00000000 --- a/src/components/RayTable/src/components/ExportExcel/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/** - * - * @author Ray - * - * @date 2022-12-19 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import { NPopconfirm, NSpace, NButton } from 'naive-ui' -import RayIcon from '@/components/RayIcon/index' - -import type { ExportExcelProvider } from '@/components/RayTable/src/type' - -const ExportExcel = defineComponent({ - name: 'ExportExcel', - emits: ['exportPositive', 'exportNegative'], - setup(_, { emit }) { - const exportExcelProvider = inject( - 'exportExcelProvider', - {} as ExportExcelProvider, - ) - const showPopoconfirm = ref(false) - - const handleButtonClick = (type: string) => { - type === 'positive' ? emit('exportPositive') : emit('exportNegative') - - showPopoconfirm.value = false - } - - return { - ...exportExcelProvider, - handleButtonClick, - showPopoconfirm, - } - }, - render() { - return ( - - {{ - trigger: () => ( - - ), - default: () => this.exportTip, - action: () => ( - - - {this.exportNegativeText} - - - {this.exportPositiveText} - - - ), - }} - - ) - }, -}) - -export default ExportExcel diff --git a/src/components/RayTable/src/components/TableAction/index.tsx b/src/components/RayTable/src/components/TableAction/index.tsx new file mode 100644 index 00000000..36ab396a --- /dev/null +++ b/src/components/RayTable/src/components/TableAction/index.tsx @@ -0,0 +1,121 @@ +/** + * + * @author Ray + * + * @date 2022-12-22 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NPopconfirm, NSpace, NButton } from 'naive-ui' +import RayIcon from '@/components/RayIcon/index' + +export type EmitterType = 'positive' | 'negative' + +const TableAction = defineComponent({ + name: 'TableAction', + props: { + tooltip: { + /** + * + * 提示内容 + */ + type: String, + required: true, + }, + negativeText: { + /** + * + * 取消提示按钮文本内容 + * + * 默认 `取消` + */ + type: String, + default: '取消', + }, + positiveText: { + /** + * + * 确认提示按钮文本内容 + * + * 默认 `确认` + */ + type: String, + default: '确认', + }, + icon: { + /** + * + * 图标 + * + * 必须为 `icons` 中已包含的 + */ + type: String, + required: true, + }, + iconSize: { + /** + * + * 图标尺寸 + * + * 默认为 `18px` + */ + type: Number, + default: 18, + }, + }, + emits: ['positive', 'negative'], + setup(_, { emit }) { + const showPopoconfirm = ref(false) + + const handleEmit = (type: EmitterType) => { + type === 'positive' ? emit('positive') : emit('negative') + + showPopoconfirm.value = false + } + + return { + handleEmit, + showPopoconfirm, + } + }, + render() { + return ( + + {{ + trigger: () => ( + + ), + default: () => this.tooltip, + action: () => ( + + + {this.negativeText} + + + {this.positiveText} + + + ), + }} + + ) + }, +}) + +export default TableAction diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx index 4f48a392..ecb24136 100644 --- a/src/components/RayTable/src/index.tsx +++ b/src/components/RayTable/src/index.tsx @@ -11,12 +11,15 @@ import './index.scss' import { NDataTable, NCard, NDropdown, NSpace } from 'naive-ui' -import props from './props' import TableSetting from './components/TableSetting/index' -import ExportExcel from './components/ExportExcel/index' -import { utils, writeFileXLSX } from 'xlsx' +import TableAction from './components/TableAction/index' + import dayjs from 'dayjs' +import { utils, writeFileXLSX } from 'xlsx' import { setupExportHeader } from './hook' +import props from './props' +import print from 'print-js' +import { uuid } from '@use-utils/hook' import type { ActionOptions, ExportExcelHeader } from './type' import type { WritableComputedRef } from 'vue' @@ -27,6 +30,7 @@ const RayTable = defineComponent({ props: props, emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'], setup(props, { emit }) { + const tableUUID = uuid() const modelRightClickMenu = computed(() => props.rightClickMenu) const modelColumns = computed({ get: () => props.columns, @@ -41,17 +45,14 @@ const RayTable = defineComponent({ }) let prevRightClickIndex = -1 + /** + * + * 右键菜单注入 + */ provide('tableSettingProvider', { modelRightClickMenu, modelColumns, }) - provide('exportExcelProvider', { - exportTip: props.exportTip, - exportType: props.exportType, - exportPositiveText: props.exportPositiveText, - exportNegativeText: props.exportNegativeText, - exportFilename: props.exportFilename, - }) const handleColumnsUpdate = (arr: ActionOptions[]) => { modelColumns.value = arr @@ -103,17 +104,25 @@ const RayTable = defineComponent({ } } + /** + * + * 导出表格数据为 `excel` + * + * 基于 `xlsx` + * + * 按需导入 `xlsx` 减少体积, 不依赖传统 `file save` 插件导出方式 + */ const handleExportPositive = () => { if (props.data.length && props.columns.length) { try { const exportHeader = setupExportHeader( props.columns as ExportExcelHeader[], ) // 获取所有列(设置为 `excel` 表头) - const sheetData = utils.json_to_sheet(props.data) + const sheetData = utils.json_to_sheet(props.data) // 将所有数据转换为表格数据类型 const workBook = utils.book_new() const filename = props.exportFilename ? props.exportFilename + '.xlsx' - : dayjs(new Date()).format('YYYY-MM-DD') + '.xlsx' + : dayjs(new Date()).format('YYYY-MM-DD') + '导出表格的.xlsx' utils.book_append_sheet(workBook, sheetData, 'Data') @@ -127,6 +136,7 @@ const RayTable = defineComponent({ */ for (let c = range.s.c; c <= range.e.c; c++) { const header = utils.encode_col(c) + '1' + sheetData[header].v = exportHeader[sheetData[header].v] } @@ -139,12 +149,36 @@ const RayTable = defineComponent({ } } + /** + * + * 打印输出表格内容 + * + * 默认配置按照 `print-js` 配置 + * + * 会自动合并自定义配置项 + * + * 受到 `print-js` 限制有些样式是无法打印输出的 + */ + const handlePrintPositive = () => { + const options = Object.assign( + { + printable: tableUUID, + type: props.printType, + }, + props.printOptions, + ) + + print(options) + } + return { + tableUUID, handleColumnsUpdate, ...toRefs(menuConfig), handleRowProps, handleRightMenuSelect, handleExportPositive, + handlePrintPositive, } }, render() { @@ -154,15 +188,17 @@ const RayTable = defineComponent({ default: () => (
{{ - empty: () => this.$slots?.empty, - loading: () => this.$slots?.loading, + empty: () => this.$slots?.empty?.(), + loading: () => this.$slots?.loading?.(), }} {this.showMenu ? ( + // 右键菜单 this.action ? ( - + {/* 输出为Excel表格 */} + + {/* 表格列操作 */} @@ -202,13 +252,15 @@ export default RayTable /** * - * 完全继承 `NDataTable` + * 完全继承 `NDataTable`, 所以该组件可以使用所有 `NDataTable Props` * - * 以实现抬头, 操作栏, 右键菜单功能拓展 + * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel` * * 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用 * * 可以通过设置 `action` 为 `false` 隐藏操作栏 * * 具体拓展 `props` 方法, 可以查看 `props.ts` 中相关注释与代码 + * + * 基于 `xlsx.js` 实现输出 `excel` */ diff --git a/src/components/RayTable/src/props.ts b/src/components/RayTable/src/props.ts index 082ddc4c..93c487a8 100644 --- a/src/components/RayTable/src/props.ts +++ b/src/components/RayTable/src/props.ts @@ -13,6 +13,7 @@ import { dataTableProps } from 'naive-ui' import type { PropType, VNode } from 'vue' import type { DropdownMixedOption } from './type' +import type PrintConfiguration from 'print-js' const rayTableProps = { ...dataTableProps, // 继承 `data table props` @@ -68,13 +69,13 @@ const rayTableProps = { type: Boolean, default: true, }, - exportTip: { + exportTooltip: { /** * * 导出表格提示 */ type: String, - default: '是否导出为excel？', + default: '是否导出为Excel表格?', }, exportType: { /** @@ -116,6 +117,56 @@ const rayTableProps = { type: String, default: '', }, + printPositiveText: { + /** + * + * 打印确认按钮文字 + * + * 默认为 `确认` + */ + type: String, + default: '确认', + }, + printNegativeText: { + /** + * + * 打印取消按钮文字 + * + * 默认为 `取消` + */ + type: String, + default: '取消', + }, + printTooltip: { + /** + * + * 打印表格提示 + */ + type: String, + default: '是否打印该表格?', + }, + printType: { + /** + * + * 打印输出类型: 'pdf' | 'html' | 'image' | 'json' + * + * 默认为 `html` + */ + type: String as PropType, + default: 'html', + }, + printOptions: { + /** + * + * `print-js` 打印配置项 + * + * 会自动过滤: `printable`, 'type' + */ + type: Object as PropType< + Omit + >, + default: () => ({}), + }, } as const export default rayTableProps diff --git a/src/components/RayTable/src/type.ts b/src/components/RayTable/src/type.ts index c9c68279..34fc18ad 100644 --- a/src/components/RayTable/src/type.ts +++ b/src/components/RayTable/src/type.ts @@ -41,7 +41,7 @@ export interface TableSettingProvider { } export interface ExportExcelProvider { - exportTip: string + exportTooltip: string exportType: string exportPositiveText: string exportNegativeText: string diff --git a/src/icons/print.svg b/src/icons/print.svg new file mode 100644 index 00000000..0501d0c5 --- /dev/null +++ b/src/icons/print.svg @@ -0,0 +1,15 @@ + + + + + + \ No newline at end of file diff --git a/src/utils/hook.ts b/src/utils/hook.ts index 54a5d1d6..413a86f1 100644 --- a/src/utils/hook.ts +++ b/src/utils/hook.ts @@ -39,3 +39,39 @@ export const validteValueType = (value: T, type: ValidteValueType) => { return _v.includes(type) } + +/** + * + * @param length `uuid` 长度 + * @param radix `uuid` 基数 + * @returns `uuid` + */ +export const uuid = (length = 16, radix?: number) => { + const sad = + '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('') + const arr: string[] = [] + let i = 0 + + radix = radix || sad.length + + if (length) { + for (i = 0; i < length; i++) { + arr[i] = sad[0 | (Math.random() * radix)] + } + } else { + let r + + arr[8] = arr[13] = arr[18] = arr[23] = '-' + + arr[14] = '4' + for (i = 0; i < 36; i++) { + if (!arr[i]) { + r = 0 | (Math.random() * 16) + + arr[i] = sad[i === 19 ? (r & 0x3) | 0x8 : r] + } + } + } + + return arr.join('') +} diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx index 78062f23..e08cf326 100644 --- a/src/views/table/index.tsx +++ b/src/views/table/index.tsx @@ -159,6 +159,7 @@ const TableView = defineComponent({

点击左右固定按钮, 即可动态固定列

点击修改列宽度, 即可拖动列修改宽度

点击导出按钮即可导出 excel 表格, 默认以列为表头输出

+

点击打印按钮即可打印该表格

), default: () => ( diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index c6578016..5c45f307 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ /// /// /// @@ -18,11 +17,6 @@ declare module 'vue-router' { } } -declare module '*.json' { - const jsonValue: any - export default jsonValue -} - declare module 'virtual:*' { const result: any export default result diff --git a/tsconfig.node.json b/tsconfig.node.json index 487749fc..22d80cff 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -5,5 +5,10 @@ "moduleResolution": "Node", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts", "vite-plugin/index.ts", "vite-plugin/type.ts"] + "include": [ + "vite.config.ts", + "vite-plugin/index.ts", + "vite-plugin/type.ts", + "package.ts" + ] }