canrd-outside / order-erp-front · Commits

Commit 2f99892d96770d550e1cf58e052c40b85efb53c2

Authored by Vben
1 parent bb67692c

feat(print): add print example

Inline Side-by-side
Showing 11 changed files with 139 additions and 98 deletions
CHANGELOG.zh_CN.md
  View file @2f99892
... ... @@ -3,6 +3,7 @@
3 3 ### ✨ Features
4 4  
5 5 - 新增`headerTitle` slot
  6 +- 新增打印示例
6 7  
7 8 ### ✨ Refactor
8 9  
... ...
package.json
  View file @2f99892
... ... @@ -43,10 +43,11 @@
43 43 "mockjs": "^1.1.0",
44 44 "nprogress": "^0.2.0",
45 45 "path-to-regexp": "^6.2.0",
  46 + "print-js": "^1.6.0",
46 47 "qrcode": "^1.4.4",
47 48 "sortablejs": "^1.13.0",
48 49 "vditor": "^3.8.4",
49   - "vue": "^3.0.8",
  50 + "vue": "^3.0.9",
50 51 "vue-i18n": "^9.0.0",
51 52 "vue-router": "^4.0.5",
52 53 "vue-types": "^3.0.2",
... ... @@ -74,7 +75,7 @@
74 75 "@vitejs/plugin-legacy": "^1.3.2",
75 76 "@vitejs/plugin-vue": "^1.2.0",
76 77 "@vitejs/plugin-vue-jsx": "^1.1.2",
77   - "@vue/compiler-sfc": "^3.0.8",
  78 + "@vue/compiler-sfc": "^3.0.9",
78 79 "autoprefixer": "^10.2.5",
79 80 "body-parser": "^1.19.0",
80 81 "commitizen": "^4.2.3",
... ...
src/locales/lang/en/routes/demo/feat.ts
  View file @2f99892
... ... @@ -2,6 +2,7 @@ export default {
2 2 feat: 'Page Function',
3 3 icon: 'Icon',
4 4 tabs: 'Tabs',
  5 + print: 'Print',
5 6 contextMenu: 'Context Menu',
6 7 download: 'Download',
7 8 clickOutSide: 'ClickOutSide',
... ...
src/locales/lang/zh_CN/routes/demo/feat.ts
  View file @2f99892
... ... @@ -2,6 +2,7 @@ export default {
2 2 feat: '功能',
3 3 icon: '图标',
4 4 tabs: '标签页操作',
  5 + print: '打印',
5 6 contextMenu: '右键菜单',
6 7 download: '文件下载',
7 8 clickOutSide: 'ClickOutSide组件',
... ...
src/router/menus/modules/demo/charts.ts
  View file @2f99892
... ... @@ -6,31 +6,20 @@ const menu: MenuModule = {
6 6 menu: {
7 7 name: t('routes.demo.charts.charts'),
8 8 path: '/charts',
9   - tag: {
10   - content: 'new',
11   - },
  9 +
12 10 children: [
13 11 {
14 12 path: 'aMap',
15 13 name: t('routes.demo.charts.aMap'),
16   - tag: {
17   - dot: true,
18   - },
19 14 },
20 15  
21 16 {
22 17 path: 'baiduMap',
23 18 name: t('routes.demo.charts.baiduMap'),
24   - tag: {
25   - dot: true,
26   - },
27 19 },
28 20 {
29 21 path: 'googleMap',
30 22 name: t('routes.demo.charts.googleMap'),
31   - tag: {
32   - dot: true,
33   - },
34 23 },
35 24 {
36 25 path: 'apexChart',
... ...
src/router/menus/modules/demo/comp.ts
  View file @2f99892
... ... @@ -6,9 +6,7 @@ const menu: MenuModule = {
6 6 menu: {
7 7 name: t('routes.demo.comp.comp'),
8 8 path: '/comp',
9   - tag: {
10   - dot: true,
11   - },
  9 +
12 10 children: [
13 11 {
14 12 path: 'basic',
... ... @@ -123,9 +121,6 @@ const menu: MenuModule = {
123 121 {
124 122 path: 'timestamp',
125 123 name: t('routes.demo.comp.time'),
126   - tag: {
127   - content: 'new',
128   - },
129 124 },
130 125 {
131 126 path: 'transition',
... ... @@ -163,10 +158,7 @@ const menu: MenuModule = {
163 158 {
164 159 path: 'tree',
165 160 name: t('routes.demo.comp.tree'),
166   - tag: {
167   - dot: true,
168   - type: 'warn',
169   - },
  161 +
170 162 children: [
171 163 {
172 164 path: 'basic',
... ... @@ -175,10 +167,6 @@ const menu: MenuModule = {
175 167 {
176 168 path: 'editTree',
177 169 name: t('routes.demo.comp.editTree'),
178   - tag: {
179   - dot: true,
180   - type: 'warn',
181   - },
182 170 },
183 171 {
184 172 path: 'actionTree',
... ...
src/router/menus/modules/demo/feat.ts
  View file @2f99892
... ... @@ -14,16 +14,10 @@ const menu: MenuModule = {
14 14 {
15 15 path: 'icon',
16 16 name: t('routes.demo.feat.icon'),
17   - tag: {
18   - content: 'new',
19   - },
20 17 },
21 18 {
22 19 path: 'ws',
23 20 name: t('routes.demo.feat.ws'),
24   - tag: {
25   - content: 'new',
26   - },
27 21 },
28 22 {
29 23 path: 'tabs',
... ... @@ -39,6 +33,13 @@ const menu: MenuModule = {
39 33 name: t('routes.demo.feat.download'),
40 34 },
41 35 {
  36 + path: 'print',
  37 + name: t('routes.demo.feat.print'),
  38 + tag: {
  39 + content: 'new',
  40 + },
  41 + },
  42 + {
42 43 path: 'click-out-side',
43 44 name: t('routes.demo.feat.clickOutSide'),
44 45 },
... ... @@ -98,14 +99,14 @@ const menu: MenuModule = {
98 99 path: 'breadcrumb',
99 100  
100 101 children: [
101   - {
102   - path: 'flat',
103   - name: t('routes.demo.feat.breadcrumbFlat'),
104   - },
105   - {
106   - path: 'flatDetail',
107   - name: t('routes.demo.feat.breadcrumbFlatDetail'),
108   - },
  102 + // {
  103 + // path: 'flat',
  104 + // name: t('routes.demo.feat.breadcrumbFlat'),
  105 + // },
  106 + // {
  107 + // path: 'flatDetail',
  108 + // name: t('routes.demo.feat.breadcrumbFlatDetail'),
  109 + // },
109 110 {
110 111 path: 'children',
111 112 name: t('routes.demo.feat.breadcrumbChildrenDetail'),
... ...
src/router/menus/modules/demo/system.ts
  View file @2f99892
... ... @@ -6,9 +6,6 @@ const menu: MenuModule = {
6 6 menu: {
7 7 name: t('routes.demo.system.moduleName'),
8 8 path: '/system',
9   - tag: {
10   - content: 'new',
11   - },
12 9 children: [
13 10 {
14 11 path: 'account',
... ...
src/router/routes/modules/demo/feat.ts
  View file @2f99892
... ... @@ -30,6 +30,14 @@ const feat: AppRouteModule = {
30 30 },
31 31 },
32 32 {
  33 + path: 'print',
  34 + name: 'Print',
  35 + component: () => import('/@/views/demo/feat/print/index.vue'),
  36 + meta: {
  37 + title: t('routes.demo.feat.print'),
  38 + },
  39 + },
  40 + {
33 41 path: 'tabs',
34 42 name: 'TabsDemo',
35 43 component: () => import('/@/views/demo/feat/tabs/index.vue'),
... ...
src/views/demo/feat/print/index.vue 0 → 100644
  View file @2f99892
  1 +<template>
  2 + <PageWrapper title="打印示例">
  3 + <CollapseContainer title="json打印表格">
  4 + <a-button type="primary" @click="jsonPrint">打印</a-button>
  5 + </CollapseContainer>
  6 +
  7 + <a-button type="primary" class="mt-5" @click="imagePrint">Image Print</a-button>
  8 + </PageWrapper>
  9 +</template>
  10 +<script lang="ts">
  11 + import { defineComponent } from 'vue';
  12 + import { PageWrapper } from '/@/components/Page';
  13 + import { CollapseContainer } from '/@/components/Container/index';
  14 +
  15 + import printJS from 'print-js';
  16 +
  17 + export default defineComponent({
  18 + name: 'AppLogo',
  19 + components: { PageWrapper, CollapseContainer },
  20 + setup() {
  21 + function jsonPrint() {
  22 + printJS({
  23 + printable: [
  24 + { name: 'll', email: '123@gmail.com', phone: '123' },
  25 + { name: 'qq', email: '456@gmail.com', phone: '456' },
  26 + ],
  27 + properties: ['name', 'email', 'phone'],
  28 + type: 'json',
  29 + });
  30 + }
  31 +
  32 + function imagePrint() {
  33 + printJS({
  34 + printable: [
  35 + 'https://anncwb.github.io/anncwb/images/preview1.png',
  36 + 'https://anncwb.github.io/anncwb/images/preview2.png',
  37 + ],
  38 + type: 'image',
  39 + header: 'Multiple Images',
  40 + imageStyle: 'width:100%;',
  41 + });
  42 + }
  43 + return {
  44 + jsonPrint,
  45 + imagePrint,
  46 + };
  47 + },
  48 + });
  49 +</script>
... ...
yarn.lock
  View file @2f99892
... ... @@ -1995,14 +1995,14 @@
1995 1995 estree-walker "^2.0.1"
1996 1996 source-map "^0.6.1"
1997 1997  
1998   -"@vue/compiler-core@3.0.8":
1999   - version "3.0.8"
2000   - resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.8.tgz#8e24a63877232f7c5d00e97201609da7de1a3191"
2001   - integrity sha512-TFusP6wemgJPgmXyxHiYshtYci1PdAjX0bOSJqxPDXf2ykojRGq9RcTKj85b1fWyC9fnT5HK73OHe6rqZUa8vA==
  1998 +"@vue/compiler-core@3.0.9":
  1999 + version "3.0.9"
  2000 + resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.9.tgz#ec7efa676889aee006fc43739ee4a67a952ac623"
  2001 + integrity sha512-bHAPwfVoLhGx8d6KV/OfGf/3gwpymVirgfmSyhgv5YuXDybLa6BwjSLvhNMAyDP+4q4pp0p6g248LuoOy5W6OA==
2002 2002 dependencies:
2003 2003 "@babel/parser" "^7.12.0"
2004 2004 "@babel/types" "^7.12.0"
2005   - "@vue/shared" "3.0.8"
  2005 + "@vue/shared" "3.0.9"
2006 2006 estree-walker "^2.0.1"
2007 2007 source-map "^0.6.1"
2008 2008  
... ... @@ -2014,25 +2014,25 @@
2014 2014 "@vue/compiler-core" "3.0.7"
2015 2015 "@vue/shared" "3.0.7"
2016 2016  
2017   -"@vue/compiler-dom@3.0.8":
2018   - version "3.0.8"
2019   - resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.8.tgz#97b1a56998472247b8944b6ef71dacbdd708eb6c"
2020   - integrity sha512-uMUtpFqWOXlbnV167ihPJehVa/84k5xfTrYHJh2bqKaSL7sA2b1bkhFjTXAfOss9LcrGnQSk/CjOPZGZfExEVw==
  2017 +"@vue/compiler-dom@3.0.9":
  2018 + version "3.0.9"
  2019 + resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.9.tgz#1fd554097d9ab36eca73bc6d0d9607fecf94e71c"
  2020 + integrity sha512-tkq6umPSELaghvOExWfGNwrCRc7FTul3RLykKzBZWhb87sSESq0XxiKELfBOfEbzdhWg6BJ1WXKDeq+al/viEQ==
2021 2021 dependencies:
2022   - "@vue/compiler-core" "3.0.8"
2023   - "@vue/shared" "3.0.8"
  2022 + "@vue/compiler-core" "3.0.9"
  2023 + "@vue/shared" "3.0.9"
2024 2024  
2025   -"@vue/compiler-sfc@^3.0.8":
2026   - version "3.0.8"
2027   - resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.8.tgz#f3515814708895406c5215329c57f30571e39f01"
2028   - integrity sha512-KDSvOVopKwwxdVlktkUlCYv2KUvJz/2sgkflb1LmqSSNMwQ1Yso934fNstd4Su0u25JIYl1piqISBIcBnxtFBA==
  2025 +"@vue/compiler-sfc@^3.0.9":
  2026 + version "3.0.9"
  2027 + resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.9.tgz#0f993a6e159ca6ad351d8ee0c4734771d2590115"
  2028 + integrity sha512-meneFRb9xIDgv/gYWCr9xKryvPi0tVffQzLjCkyN4RF1EndqLS71xugUX9wQsS4F1SAP+zlZbcgMFmTSC4OpHw==
2029 2029 dependencies:
2030 2030 "@babel/parser" "^7.13.9"
2031 2031 "@babel/types" "^7.13.0"
2032   - "@vue/compiler-core" "3.0.8"
2033   - "@vue/compiler-dom" "3.0.8"
2034   - "@vue/compiler-ssr" "3.0.8"
2035   - "@vue/shared" "3.0.8"
  2032 + "@vue/compiler-core" "3.0.9"
  2033 + "@vue/compiler-dom" "3.0.9"
  2034 + "@vue/compiler-ssr" "3.0.9"
  2035 + "@vue/shared" "3.0.9"
2036 2036 consolidate "^0.16.0"
2037 2037 estree-walker "^2.0.1"
2038 2038 hash-sum "^2.0.0"
... ... @@ -2044,13 +2044,13 @@
2044 2044 postcss-selector-parser "^6.0.4"
2045 2045 source-map "^0.6.1"
2046 2046  
2047   -"@vue/compiler-ssr@3.0.8":
2048   - version "3.0.8"
2049   - resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.8.tgz#2be3221c82873c47a9d71311efe19f8de0f459aa"
2050   - integrity sha512-9xQO9IOK3B+7jCPIkqe8MmoRd17UxDvyjnsGXQfMkGrK+eONPB5/Ic6b1P2oZTXuTI2IAdnXnwDWXBSB6Cphag==
  2047 +"@vue/compiler-ssr@3.0.9":
  2048 + version "3.0.9"
  2049 + resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.9.tgz#aebce25e573b9db34964b682bb1631a7240ba43d"
  2050 + integrity sha512-99h5k6Up+s8AzTNH1ljtXE/QlnG8yaGLePwQ4XQaWfk23ESUnmGZWEC+y+ZXznf8pIfJ0uPeD9EVgQzQAyZ2aA==
2051 2051 dependencies:
2052   - "@vue/compiler-dom" "3.0.8"
2053   - "@vue/shared" "3.0.8"
  2052 + "@vue/compiler-dom" "3.0.9"
  2053 + "@vue/shared" "3.0.9"
2054 2054  
2055 2055 "@vue/devtools-api@^6.0.0-beta.5":
2056 2056 version "6.0.0-beta.7"
... ... @@ -2064,12 +2064,12 @@
2064 2064 dependencies:
2065 2065 "@vue/shared" "3.0.7"
2066 2066  
2067   -"@vue/reactivity@3.0.8":
2068   - version "3.0.8"
2069   - resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.8.tgz#c09afb698af2fc30fe47d2a9a918e7262e59288a"
2070   - integrity sha512-W0oEQ005rUa6r1Rq/fEw/Nx3FN+AoAYV2Kf+qI8RGOXHYuUdgVEf//o0UUmlT7ocnniOEf46l+eLfgvilWYJoA==
  2067 +"@vue/reactivity@3.0.9":
  2068 + version "3.0.9"
  2069 + resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.9.tgz#875f241b8c10262560b190ccdeff2d0ab7053e11"
  2070 + integrity sha512-W1AbGhzphVjY+TL32lQDwLDNvLzZKOcUgaIaLOoALWMtjzN4ExOUJzrR1FC3ynlpMHIEfcUo8GPgfnNmvMGdgQ==
2071 2071 dependencies:
2072   - "@vue/shared" "3.0.8"
  2072 + "@vue/shared" "3.0.9"
2073 2073  
2074 2074 "@vue/runtime-core@3.0.7":
2075 2075 version "3.0.7"
... ... @@ -2079,13 +2079,13 @@
2079 2079 "@vue/reactivity" "3.0.7"
2080 2080 "@vue/shared" "3.0.7"
2081 2081  
2082   -"@vue/runtime-core@3.0.8":
2083   - version "3.0.8"
2084   - resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.8.tgz#d17860ab416fd483ffe768a53b1065d9d5180789"
2085   - integrity sha512-H7d+s56RPFMWT7SOwabRo9Rx6auQ4AsoY7dZ0lmT2fmgwQ+knEnqmL1KWSPQIruleYU5yCtbgyqByVz8ej5e1A==
  2082 +"@vue/runtime-core@3.0.9":
  2083 + version "3.0.9"
  2084 + resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.9.tgz#9665f149468355a524a304cb8f260147a4d294e6"
  2085 + integrity sha512-j94xZ/wRZTVhqpoUgmxBTlojnPFu6TTXNw1Vw8oQkW1ZTGD0IwiJe3ycsKd1bpleXEMVt55GzGlCopI33/Gdmg==
2086 2086 dependencies:
2087   - "@vue/reactivity" "3.0.8"
2088   - "@vue/shared" "3.0.8"
  2087 + "@vue/reactivity" "3.0.9"
  2088 + "@vue/shared" "3.0.9"
2089 2089  
2090 2090 "@vue/runtime-dom@3.0.7":
2091 2091 version "3.0.7"
... ... @@ -2096,13 +2096,13 @@
2096 2096 "@vue/shared" "3.0.7"
2097 2097 csstype "^2.6.8"
2098 2098  
2099   -"@vue/runtime-dom@3.0.8":
2100   - version "3.0.8"
2101   - resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.8.tgz#6d39d1304a1b14f9a1422b394e8d3a5a7af7f0ad"
2102   - integrity sha512-ijW6ycxydtE92rx4nRZDLONhNxtPqX09fQXEukHYv2bNnvO1Q4qY/KZ0E6wqOG0d4ZEmIabjAzG9IbNzalkFnQ==
  2099 +"@vue/runtime-dom@3.0.9":
  2100 + version "3.0.9"
  2101 + resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.9.tgz#16a1d001dc746a9f346ee7fb9de90d52ad097b61"
  2102 + integrity sha512-6NCjpwa5hNBFDdokquAgMl2tNEYyQD6kBy9Mh6M2776bxYLXZCqL4/e0UrpBuBiHTrkAlUGODD7PyYGaqH6fyA==
2103 2103 dependencies:
2104   - "@vue/runtime-core" "3.0.8"
2105   - "@vue/shared" "3.0.8"
  2104 + "@vue/runtime-core" "3.0.9"
  2105 + "@vue/shared" "3.0.9"
2106 2106 csstype "^2.6.8"
2107 2107  
2108 2108 "@vue/shared@3.0.7":
... ... @@ -2110,10 +2110,10 @@
2110 2110 resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz#96d52988efc07444c108c7c6803ba7cc93e40045"
2111 2111 integrity sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==
2112 2112  
2113   -"@vue/shared@3.0.8":
2114   - version "3.0.8"
2115   - resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.8.tgz#b18d3a912299c0360c41bb42f03f502c5016bb1e"
2116   - integrity sha512-zDdHjJjzgWYFw8TTUW08JjdERTlBik5/N5LuTAqU0e4wS6wElcvftiNHrD0ONr79O3fi66Z3Ug4jgPhBomPQUA==
  2113 +"@vue/shared@3.0.9":
  2114 + version "3.0.9"
  2115 + resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.9.tgz#09882d745ded52b07e4481d036659d733edd2a9a"
  2116 + integrity sha512-lv20q1O5dybwro+V+vnxHCmSIxi9mvTORSgAbGrANGYK8zF4K1S9TOankIvdkcvfZ88IR95O2pTI2Pb3c3BaNg==
2117 2117  
2118 2118 "@vueuse/core@^4.6.2":
2119 2119 version "4.6.2"
... ... @@ -8708,6 +8708,11 @@ pretty-quick@^3.1.0:
8708 8708 mri "^1.1.5"
8709 8709 multimatch "^4.0.0"
8710 8710  
  8711 +print-js@^1.6.0:
  8712 + version "1.6.0"
  8713 + resolved "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
  8714 + integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
  8715 +
8711 8716 printj@~1.1.0, printj@~1.1.2:
8712 8717 version "1.1.2"
8713 8718 resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
... ... @@ -11115,14 +11120,14 @@ vue@^3.0.0:
11115 11120 "@vue/runtime-dom" "3.0.7"
11116 11121 "@vue/shared" "3.0.7"
11117 11122  
11118   -vue@^3.0.8:
11119   - version "3.0.8"
11120   - resolved "https://registry.npmjs.org/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
11121   - integrity sha512-EE6mfGnPkQgTl1A9Vl2Jld9i4cN7KUDYTC0xPSfNRff6mwYDAqjtesdFo+Sk4/BkRfFSPgR1VnzNB7YbMLdrjw==
  11123 +vue@^3.0.9:
  11124 + version "3.0.9"
  11125 + resolved "https://registry.npmjs.org/vue/-/vue-3.0.9.tgz#c68ffc0e4aa2b0f1905124a9037b6e352de469ad"
  11126 + integrity sha512-MOvqDpvDslMWJo5kyGW1nTsTIPAuSzgVqmlzSQInIEqkHOu16pNbXuTjnG7jc/yIvQYFSQZqv6Pvad0iO5QkyQ==
11122 11127 dependencies:
11123   - "@vue/compiler-dom" "3.0.8"
11124   - "@vue/runtime-dom" "3.0.8"
11125   - "@vue/shared" "3.0.8"
  11128 + "@vue/compiler-dom" "3.0.9"
  11129 + "@vue/runtime-dom" "3.0.9"
  11130 + "@vue/shared" "3.0.9"
11126 11131  
11127 11132 vuex-module-decorators@^1.0.1:
11128 11133 version "1.0.1"
... ...