feat(print): add print example

vbenjs · Mar 27, 2021 · 2f99892 · 2f99892
1 parent bb67692
commit 2f99892
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 98 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
 ### ✨ Features
 
 - 新增`headerTitle` slot
+- 新增打印示例
 
 ### ✨ Refactor
 

diff --git a/package.json b/package.json
@@ -43,10 +43,11 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
+    "print-js": "^1.6.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
     "vditor": "^3.8.4",
-    "vue": "^3.0.8",
+    "vue": "^3.0.9",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.5",
     "vue-types": "^3.0.2",
@@ -74,7 +75,7 @@
     "@vitejs/plugin-legacy": "^1.3.2",
     "@vitejs/plugin-vue": "^1.2.0",
     "@vitejs/plugin-vue-jsx": "^1.1.2",
-    "@vue/compiler-sfc": "^3.0.8",
+    "@vue/compiler-sfc": "^3.0.9",
     "autoprefixer": "^10.2.5",
     "body-parser": "^1.19.0",
     "commitizen": "^4.2.3",

diff --git a/src/locales/lang/en/routes/demo/feat.ts b/src/locales/lang/en/routes/demo/feat.ts
@@ -2,6 +2,7 @@ export default {
   feat: 'Page Function',
   icon: 'Icon',
   tabs: 'Tabs',
+  print: 'Print',
   contextMenu: 'Context Menu',
   download: 'Download',
   clickOutSide: 'ClickOutSide',

diff --git a/src/locales/lang/zh_CN/routes/demo/feat.ts b/src/locales/lang/zh_CN/routes/demo/feat.ts
@@ -2,6 +2,7 @@ export default {
   feat: '功能',
   icon: '图标',
   tabs: '标签页操作',
+  print: '打印',
   contextMenu: '右键菜单',
   download: '文件下载',
   clickOutSide: 'ClickOutSide组件',

diff --git a/src/router/menus/modules/demo/charts.ts b/src/router/menus/modules/demo/charts.ts
@@ -6,31 +6,20 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.charts.charts'),
     path: '/charts',
-    tag: {
-      content: 'new',
-    },
+
     children: [
       {
         path: 'aMap',
         name: t('routes.demo.charts.aMap'),
-        tag: {
-          dot: true,
-        },
       },
 
       {
         path: 'baiduMap',
         name: t('routes.demo.charts.baiduMap'),
-        tag: {
-          dot: true,
-        },
       },
       {
         path: 'googleMap',
         name: t('routes.demo.charts.googleMap'),
-        tag: {
-          dot: true,
-        },
       },
       {
         path: 'apexChart',

diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts
@@ -6,9 +6,7 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.comp.comp'),
     path: '/comp',
-    tag: {
-      dot: true,
-    },
+
     children: [
       {
         path: 'basic',
@@ -123,9 +121,6 @@ const menu: MenuModule = {
       {
         path: 'timestamp',
         name: t('routes.demo.comp.time'),
-        tag: {
-          content: 'new',
-        },
       },
       {
         path: 'transition',
@@ -163,10 +158,7 @@ const menu: MenuModule = {
       {
         path: 'tree',
         name: t('routes.demo.comp.tree'),
-        tag: {
-          dot: true,
-          type: 'warn',
-        },
+
         children: [
           {
             path: 'basic',
@@ -175,10 +167,6 @@ const menu: MenuModule = {
           {
             path: 'editTree',
             name: t('routes.demo.comp.editTree'),
-            tag: {
-              dot: true,
-              type: 'warn',
-            },
           },
           {
             path: 'actionTree',

diff --git a/src/router/menus/modules/demo/feat.ts b/src/router/menus/modules/demo/feat.ts
@@ -14,16 +14,10 @@ const menu: MenuModule = {
       {
         path: 'icon',
         name: t('routes.demo.feat.icon'),
-        tag: {
-          content: 'new',
-        },
       },
       {
         path: 'ws',
         name: t('routes.demo.feat.ws'),
-        tag: {
-          content: 'new',
-        },
       },
       {
         path: 'tabs',
@@ -38,6 +32,13 @@ const menu: MenuModule = {
         path: 'download',
         name: t('routes.demo.feat.download'),
       },
+      {
+        path: 'print',
+        name: t('routes.demo.feat.print'),
+        tag: {
+          content: 'new',
+        },
+      },
       {
         path: 'click-out-side',
         name: t('routes.demo.feat.clickOutSide'),
@@ -98,14 +99,14 @@ const menu: MenuModule = {
         path: 'breadcrumb',
 
         children: [
-          {
-            path: 'flat',
-            name: t('routes.demo.feat.breadcrumbFlat'),
-          },
-          {
-            path: 'flatDetail',
-            name: t('routes.demo.feat.breadcrumbFlatDetail'),
-          },
+          // {
+          //   path: 'flat',
+          //   name: t('routes.demo.feat.breadcrumbFlat'),
+          // },
+          // {
+          //   path: 'flatDetail',
+          //   name: t('routes.demo.feat.breadcrumbFlatDetail'),
+          // },
           {
             path: 'children',
             name: t('routes.demo.feat.breadcrumbChildrenDetail'),

diff --git a/src/router/menus/modules/demo/system.ts b/src/router/menus/modules/demo/system.ts
@@ -6,9 +6,6 @@ const menu: MenuModule = {
   menu: {
     name: t('routes.demo.system.moduleName'),
     path: '/system',
-    tag: {
-      content: 'new',
-    },
     children: [
       {
         path: 'account',

diff --git a/src/router/routes/modules/demo/feat.ts b/src/router/routes/modules/demo/feat.ts
@@ -29,6 +29,14 @@ const feat: AppRouteModule = {
         title: t('routes.demo.feat.ws'),
       },
     },
+    {
+      path: 'print',
+      name: 'Print',
+      component: () => import('/@/views/demo/feat/print/index.vue'),
+      meta: {
+        title: t('routes.demo.feat.print'),
+      },
+    },
     {
       path: 'tabs',
       name: 'TabsDemo',

diff --git a/src/views/demo/feat/print/index.vue b/src/views/demo/feat/print/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <PageWrapper title="打印示例">
+    <CollapseContainer title="json打印表格">
+      <a-button type="primary" @click="jsonPrint">打印</a-button>
+    </CollapseContainer>
+
+    <a-button type="primary" class="mt-5" @click="imagePrint">Image Print</a-button>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import printJS from 'print-js';
+
+  export default defineComponent({
+    name: 'AppLogo',
+    components: { PageWrapper, CollapseContainer },
+    setup() {
+      function jsonPrint() {
+        printJS({
+          printable: [
+            { name: 'll', email: '123@gmail.com', phone: '123' },
+            { name: 'qq', email: '456@gmail.com', phone: '456' },
+          ],
+          properties: ['name', 'email', 'phone'],
+          type: 'json',
+        });
+      }
+
+      function imagePrint() {
+        printJS({
+          printable: [
+            'https://anncwb.github.io/anncwb/images/preview1.png',
+            'https://anncwb.github.io/anncwb/images/preview2.png',
+          ],
+          type: 'image',
+          header: 'Multiple Images',
+          imageStyle: 'width:100%;',
+        });
+      }
+      return {
+        jsonPrint,
+        imagePrint,
+      };
+    },
+  });
+</script>