ray template v3.0.0 正式版本

.depcheckrc

@@ -0,0 +1,2 @@
+ignores: [ "eslint", "babel-*", "@use-*/**", "@use-*" ]
+skip-missing: true

.eslintignore

@@ -5,4 +5,7 @@ components.d.ts
 .gitignore
 .vscode
 public
-yarn.*
+yarn.*
+vite-env.*
+.prettierrc.*
+.eslintrc

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

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

src/components/RayTable/src/components/ExportExcel/index.tsx

@@ -1,76 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-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 (
-      <NPopconfirm v-model:show={this.showPopoconfirm}>
-        {{
-          trigger: () => (
-            <RayIcon
-              name="export_excel"
-              size="18"
-              customClassName="ray-table-icon"
-            />
-          ),
-          default: () => this.exportTip,
-          action: () => (
-            <NSpace>
-              <NButton
-                size="small"
-                ghost
-                onClick={this.handleButtonClick.bind(this, 'negative')}
-              >
-                {this.exportNegativeText}
-              </NButton>
-              <NButton
-                size="small"
-                ghost
-                type="info"
-                onClick={this.handleButtonClick.bind(this, 'positive')}
-              >
-                {this.exportPositiveText}
-              </NButton>
-            </NSpace>
-          ),
-        }}
-      </NPopconfirm>
-    )
-  },
-})
-
-export default ExportExcel

src/components/RayTable/src/components/TableAction/index.tsx

@@ -0,0 +1,121 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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 (
+      <NPopconfirm v-model:show={this.showPopoconfirm} showArrow={true}>
+        {{
+          trigger: () => (
+            <RayIcon
+              name={this.icon}
+              size={this.iconSize}
+              customClassName="ray-table-icon"
+            />
+          ),
+          default: () => this.tooltip,
+          action: () => (
+            <NSpace>
+              <NButton
+                size="small"
+                ghost
+                onClick={this.handleEmit.bind(this, 'negative')}
+              >
+                {this.negativeText}
+              </NButton>
+              <NButton
+                size="small"
+                ghost
+                type="info"
+                onClick={this.handleEmit.bind(this, 'positive')}
+              >
+                {this.positiveText}
+              </NButton>
+            </NSpace>
+          ),
+        }}
+      </NPopconfirm>
+    )
+  },
+})
+
+export default TableAction

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: () => (
             <div>
               <NDataTable
+                id={this.tableUUID}
                 {...this.$props}
                 rowProps={this.handleRowProps.bind(this)}
               >
                 {{
-                  empty: () => this.$slots?.empty,
-                  loading: () => this.$slots?.loading,
+                  empty: () => this.$slots?.empty?.(),
+                  loading: () => this.$slots?.loading?.(),
                 }}
               </NDataTable>
               {this.showMenu ? (
+                // 右键菜单
                 <NDropdown
                   show={this.showMenu}
                   placement="bottom-start"
@@ -182,9 +218,23 @@ const RayTable = defineComponent({
           'header-extra': () =>
             this.action ? (
               <NSpace align="center">
-                <ExportExcel
-                  onExportPositive={this.handleExportPositive.bind(this)}
+                {/* 打印输出操作 */}
+                <TableAction
+                  icon="print"
+                  tooltip={this.printTooltip}
+                  positiveText={this.printPositiveText}
+                  negativeText={this.printNegativeText}
+                  onPositive={this.handlePrintPositive.bind(this)}
                 />
+                {/* 输出为Excel表格 */}
+                <TableAction
+                  icon="export_excel"
+                  tooltip={this.exportTooltip}
+                  positiveText={this.exportPositiveText}
+                  negativeText={this.exportNegativeText}
+                  onPositive={this.handleExportPositive.bind(this)}
+                />
+                {/* 表格列操作 */}
                 <TableSetting
                   onColumnsUpdate={this.handleColumnsUpdate.bind(this)}
                 />
@@ -202,13 +252,15 @@ export default RayTable
 
 /**
  *
- * 完全继承 `NDataTable`
+ * 完全继承 `NDataTable`, 所以该组件可以使用所有 `NDataTable Props`
  *
- * 以实现抬头, 操作栏, 右键菜单功能拓展
+ * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`
  *
  * 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用
  *
  * 可以通过设置 `action` 为 `false` 隐藏操作栏
  *
  * 具体拓展 `props` 方法, 可以查看 `props.ts` 中相关注释与代码
+ *
+ * 基于 `xlsx.js` 实现输出 `excel`
  */

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<PrintConfiguration.PrintTypes>,
+    default: 'html',
+  },
+  printOptions: {
+    /**
+     *
+     * `print-js` 打印配置项
+     *
+     * 会自动过滤: `printable`, 'type'
+     */
+    type: Object as PropType<
+      Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
+    >,
+    default: () => ({}),
+  },
 } as const
 
 export default rayTableProps

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

src/icons/print.svg

@@ -0,0 +1,15 @@
+<svg t="1671714654740" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2992" width="64" height="64">
+  <path
+    d="M24.380952 265.886178 902.094615 265.886178C942.428977 265.886178 975.238095 298.903371 975.238095 339.485775L975.238095 779.447155 999.619049 754.99187 853.333333 754.99187 877.714285 779.447155 877.714285 681.626016 877.714285 657.170731 853.333333 657.170731 170.666667 657.170731 146.285714 657.170731 146.285714 681.626016 146.285714 779.447155 170.666667 754.99187 121.955642 754.99187C81.590725 754.99187 48.761905 721.971868 48.761905 681.392275L48.761905 241.430895 24.380952 265.886178 24.380952 265.886178ZM24.380952 216.97561 0 216.97561 0 241.430895 0 681.392275C0 748.954229 54.630068 803.902438 121.955642 803.902438L170.666667 803.902438 195.047619 803.902438 195.047619 779.447155 195.047619 681.626016 170.666667 706.081301 853.333333 706.081301 828.952382 681.626016 828.952382 779.447155 828.952382 803.902438 853.333333 803.902438 999.619049 803.902438 1024 803.902438 1024 779.447155 1024 339.485775C1024 271.92663 969.395277 216.97561 902.094615 216.97561L24.380952 216.97561 24.380952 216.97561Z"
+    fill="currentColor" p-id="2993"></path>
+  <path
+    d="M755.809523 999.544715 780.190477 975.089431 243.809523 975.089431 268.190477 999.544715 268.190477 776.325203C268.190477 762.818923 257.274752 751.869918 243.809523 751.869918 230.344297 751.869918 219.428572 762.818923 219.428572 776.325203L219.428572 999.544715C219.428572 1013.050995 230.344297 1024 243.809523 1024L780.190477 1024C793.655703 1024 804.571428 1013.050995 804.571428 999.544715L804.571428 776.325203C804.571428 762.818923 793.655703 751.869918 780.190477 751.869918 766.725248 751.869918 755.809523 762.818923 755.809523 776.325203L755.809523 999.544715Z"
+    fill="currentColor" p-id="2994"></path>
+  <path
+    d="M207.238095 437.073171 524.190477 437.073171 524.190477 388.162603 207.238095 388.162603 207.238095 437.073171 207.238095 437.073171Z"
+    fill="currentColor" p-id="2995"></path>
+  <path
+    d="M219.428572 241.430895 219.428572 45.788618 195.047619 70.243903 828.952382 70.243903 804.571428 45.788618 804.571428 241.430933 853.333333 241.430933 853.333333 45.788618 853.333333 21.333333 828.952382 21.333333 195.047619 21.333333 170.666667 21.333333 170.666667 45.788618 170.666667 241.430895 219.428572 241.430895 219.428572 241.430895Z"
+    fill="currentColor" p-id="2996"></path>
+</svg>

src/utils/hook.ts

@@ -39,3 +39,39 @@ export const validteValueType = <T>(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('')
+}

src/views/table/index.tsx

@@ -159,6 +159,7 @@ const TableView = defineComponent({
                 <p>点击左右固定按钮, 即可动态固定列</p>
                 <p>点击修改列宽度, 即可拖动列修改宽度</p>
                 <p>点击导出按钮即可导出 excel 表格, 默认以列为表头输出</p>
+                <p>点击打印按钮即可打印该表格</p>
               </div>
             ),
             default: () => (

src/vite-env.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /// <reference types="vite/client" />
 /// <reference types="vue/macros-global" />
 /// <reference types="vite-svg-loader" />
@@ -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

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"
+  ]
 }