tsai
/
vue-vben-admin
mirror of https://github.com/vbenjs/vue-vben-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat(print): add print example

pull/443/head
Vben 6 years ago
parent
bb67692cfd
commit
2f99892d96
11 changed files with 139 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.zh_CN.md
  2. 5
      package.json
  3. 1
      src/locales/lang/en/routes/demo/feat.ts
  4. 1
      src/locales/lang/zh_CN/routes/demo/feat.ts
  5. 13
      src/router/menus/modules/demo/charts.ts
  6. 16
      src/router/menus/modules/demo/comp.ts
  7. 29
      src/router/menus/modules/demo/feat.ts
  8. 3
      src/router/menus/modules/demo/system.ts
  9. 8
      src/router/routes/modules/demo/feat.ts
  10. 49
      src/views/demo/feat/print/index.vue
  11. 111
      yarn.lock

1
CHANGELOG.zh_CN.md
View File

@ -3,6 +3,7 @@
### ✨ Features
- 新增`headerTitle` slot
- 新增打印示例
### ✨ Refactor

5
package.json
View File

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

1
src/locales/lang/en/routes/demo/feat.ts
View File

@ -2,6 +2,7 @@ export default {
feat: 'Page Function',
icon: 'Icon',
tabs: 'Tabs',
print: 'Print',
contextMenu: 'Context Menu',
download: 'Download',
clickOutSide: 'ClickOutSide',

1
src/locales/lang/zh_CN/routes/demo/feat.ts
View File

@ -2,6 +2,7 @@ export default {
feat: '功能',
icon: '图标',
tabs: '标签页操作',
print: '打印',
contextMenu: '右键菜单',
download: '文件下载',
clickOutSide: 'ClickOutSide组件',

13
src/router/menus/modules/demo/charts.ts
View File

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

16
src/router/menus/modules/demo/comp.ts
View File

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

29
src/router/menus/modules/demo/feat.ts
View File

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

3
src/router/menus/modules/demo/system.ts
View File

@ -6,9 +6,6 @@ const menu: MenuModule = {
menu: {
name: t('routes.demo.system.moduleName'),
path: '/system',
tag: {
content: 'new',
},
children: [
{
path: 'account',

8
src/router/routes/modules/demo/feat.ts
View File

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

49
src/views/demo/feat/print/index.vue
View File

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

111
yarn.lock
View File

@ -1995,14 +1995,14 @@
estree-walker "^2.0.1"
source-map "^0.6.1"
"@vue/compiler-core@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.8.tgz#8e24a63877232f7c5d00e97201609da7de1a3191"
integrity sha512-TFusP6wemgJPgmXyxHiYshtYci1PdAjX0bOSJqxPDXf2ykojRGq9RcTKj85b1fWyC9fnT5HK73OHe6rqZUa8vA==
"@vue/compiler-core@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.9.tgz#ec7efa676889aee006fc43739ee4a67a952ac623"
integrity sha512-bHAPwfVoLhGx8d6KV/OfGf/3gwpymVirgfmSyhgv5YuXDybLa6BwjSLvhNMAyDP+4q4pp0p6g248LuoOy5W6OA==
dependencies:
"@babel/parser" "^7.12.0"
"@babel/types" "^7.12.0"
"@vue/shared" "3.0.8"
"@vue/shared" "3.0.9"
estree-walker "^2.0.1"
source-map "^0.6.1"
@ -2014,25 +2014,25 @@
"@vue/compiler-core" "3.0.7"
"@vue/shared" "3.0.7"
"@vue/compiler-dom@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.8.tgz#97b1a56998472247b8944b6ef71dacbdd708eb6c"
integrity sha512-uMUtpFqWOXlbnV167ihPJehVa/84k5xfTrYHJh2bqKaSL7sA2b1bkhFjTXAfOss9LcrGnQSk/CjOPZGZfExEVw==
"@vue/compiler-dom@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.9.tgz#1fd554097d9ab36eca73bc6d0d9607fecf94e71c"
integrity sha512-tkq6umPSELaghvOExWfGNwrCRc7FTul3RLykKzBZWhb87sSESq0XxiKELfBOfEbzdhWg6BJ1WXKDeq+al/viEQ==
dependencies:
"@vue/compiler-core" "3.0.8"
"@vue/shared" "3.0.8"
"@vue/compiler-core" "3.0.9"
"@vue/shared" "3.0.9"
"@vue/compiler-sfc@^3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.8.tgz#f3515814708895406c5215329c57f30571e39f01"
integrity sha512-KDSvOVopKwwxdVlktkUlCYv2KUvJz/2sgkflb1LmqSSNMwQ1Yso934fNstd4Su0u25JIYl1piqISBIcBnxtFBA==
"@vue/compiler-sfc@^3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.9.tgz#0f993a6e159ca6ad351d8ee0c4734771d2590115"
integrity sha512-meneFRb9xIDgv/gYWCr9xKryvPi0tVffQzLjCkyN4RF1EndqLS71xugUX9wQsS4F1SAP+zlZbcgMFmTSC4OpHw==
dependencies:
"@babel/parser" "^7.13.9"
"@babel/types" "^7.13.0"
"@vue/compiler-core" "3.0.8"
"@vue/compiler-dom" "3.0.8"
"@vue/compiler-ssr" "3.0.8"
"@vue/shared" "3.0.8"
"@vue/compiler-core" "3.0.9"
"@vue/compiler-dom" "3.0.9"
"@vue/compiler-ssr" "3.0.9"
"@vue/shared" "3.0.9"
consolidate "^0.16.0"
estree-walker "^2.0.1"
hash-sum "^2.0.0"
@ -2044,13 +2044,13 @@
postcss-selector-parser "^6.0.4"
source-map "^0.6.1"
"@vue/compiler-ssr@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.8.tgz#2be3221c82873c47a9d71311efe19f8de0f459aa"
integrity sha512-9xQO9IOK3B+7jCPIkqe8MmoRd17UxDvyjnsGXQfMkGrK+eONPB5/Ic6b1P2oZTXuTI2IAdnXnwDWXBSB6Cphag==
"@vue/compiler-ssr@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.9.tgz#aebce25e573b9db34964b682bb1631a7240ba43d"
integrity sha512-99h5k6Up+s8AzTNH1ljtXE/QlnG8yaGLePwQ4XQaWfk23ESUnmGZWEC+y+ZXznf8pIfJ0uPeD9EVgQzQAyZ2aA==
dependencies:
"@vue/compiler-dom" "3.0.8"
"@vue/shared" "3.0.8"
"@vue/compiler-dom" "3.0.9"
"@vue/shared" "3.0.9"
"@vue/devtools-api@^6.0.0-beta.5":
version "6.0.0-beta.7"
@ -2064,12 +2064,12 @@
dependencies:
"@vue/shared" "3.0.7"
"@vue/reactivity@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.8.tgz#c09afb698af2fc30fe47d2a9a918e7262e59288a"
integrity sha512-W0oEQ005rUa6r1Rq/fEw/Nx3FN+AoAYV2Kf+qI8RGOXHYuUdgVEf//o0UUmlT7ocnniOEf46l+eLfgvilWYJoA==
"@vue/reactivity@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.9.tgz#875f241b8c10262560b190ccdeff2d0ab7053e11"
integrity sha512-W1AbGhzphVjY+TL32lQDwLDNvLzZKOcUgaIaLOoALWMtjzN4ExOUJzrR1FC3ynlpMHIEfcUo8GPgfnNmvMGdgQ==
dependencies:
"@vue/shared" "3.0.8"
"@vue/shared" "3.0.9"
"@vue/runtime-core@3.0.7":
version "3.0.7"
@ -2079,13 +2079,13 @@
"@vue/reactivity" "3.0.7"
"@vue/shared" "3.0.7"
"@vue/runtime-core@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.8.tgz#d17860ab416fd483ffe768a53b1065d9d5180789"
integrity sha512-H7d+s56RPFMWT7SOwabRo9Rx6auQ4AsoY7dZ0lmT2fmgwQ+knEnqmL1KWSPQIruleYU5yCtbgyqByVz8ej5e1A==
"@vue/runtime-core@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.9.tgz#9665f149468355a524a304cb8f260147a4d294e6"
integrity sha512-j94xZ/wRZTVhqpoUgmxBTlojnPFu6TTXNw1Vw8oQkW1ZTGD0IwiJe3ycsKd1bpleXEMVt55GzGlCopI33/Gdmg==
dependencies:
"@vue/reactivity" "3.0.8"
"@vue/shared" "3.0.8"
"@vue/reactivity" "3.0.9"
"@vue/shared" "3.0.9"
"@vue/runtime-dom@3.0.7":
version "3.0.7"
@ -2096,13 +2096,13 @@
"@vue/shared" "3.0.7"
csstype "^2.6.8"
"@vue/runtime-dom@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.8.tgz#6d39d1304a1b14f9a1422b394e8d3a5a7af7f0ad"
integrity sha512-ijW6ycxydtE92rx4nRZDLONhNxtPqX09fQXEukHYv2bNnvO1Q4qY/KZ0E6wqOG0d4ZEmIabjAzG9IbNzalkFnQ==
"@vue/runtime-dom@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.9.tgz#16a1d001dc746a9f346ee7fb9de90d52ad097b61"
integrity sha512-6NCjpwa5hNBFDdokquAgMl2tNEYyQD6kBy9Mh6M2776bxYLXZCqL4/e0UrpBuBiHTrkAlUGODD7PyYGaqH6fyA==
dependencies:
"@vue/runtime-core" "3.0.8"
"@vue/shared" "3.0.8"
"@vue/runtime-core" "3.0.9"
"@vue/shared" "3.0.9"
csstype "^2.6.8"
"@vue/shared@3.0.7":
@ -2110,10 +2110,10 @@
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz#96d52988efc07444c108c7c6803ba7cc93e40045"
integrity sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg==
"@vue/shared@3.0.8":
version "3.0.8"
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.8.tgz#b18d3a912299c0360c41bb42f03f502c5016bb1e"
integrity sha512-zDdHjJjzgWYFw8TTUW08JjdERTlBik5/N5LuTAqU0e4wS6wElcvftiNHrD0ONr79O3fi66Z3Ug4jgPhBomPQUA==
"@vue/shared@3.0.9":
version "3.0.9"
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.9.tgz#09882d745ded52b07e4481d036659d733edd2a9a"
integrity sha512-lv20q1O5dybwro+V+vnxHCmSIxi9mvTORSgAbGrANGYK8zF4K1S9TOankIvdkcvfZ88IR95O2pTI2Pb3c3BaNg==
"@vueuse/core@^4.6.2":
version "4.6.2"
@ -8708,6 +8708,11 @@ pretty-quick@^3.1.0:
mri "^1.1.5"
multimatch "^4.0.0"
print-js@^1.6.0:
version "1.6.0"
resolved "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
printj@~1.1.0, printj@~1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
@ -11115,14 +11120,14 @@ vue@^3.0.0:
"@vue/runtime-dom" "3.0.7"
"@vue/shared" "3.0.7"
vue@^3.0.8:
version "3.0.8"
resolved "https://registry.npmjs.org/vue/-/vue-3.0.8.tgz#14fc72a9ab0291f8461c94450bf45b9df82fc45a"
integrity sha512-EE6mfGnPkQgTl1A9Vl2Jld9i4cN7KUDYTC0xPSfNRff6mwYDAqjtesdFo+Sk4/BkRfFSPgR1VnzNB7YbMLdrjw==
vue@^3.0.9:
version "3.0.9"
resolved "https://registry.npmjs.org/vue/-/vue-3.0.9.tgz#c68ffc0e4aa2b0f1905124a9037b6e352de469ad"
integrity sha512-MOvqDpvDslMWJo5kyGW1nTsTIPAuSzgVqmlzSQInIEqkHOu16pNbXuTjnG7jc/yIvQYFSQZqv6Pvad0iO5QkyQ==
dependencies:
"@vue/compiler-dom" "3.0.8"
"@vue/runtime-dom" "3.0.8"
"@vue/shared" "3.0.8"
"@vue/compiler-dom" "3.0.9"
"@vue/runtime-dom" "3.0.9"
"@vue/shared" "3.0.9"
vuex-module-decorators@^1.0.1:
version "1.0.1"

Write Preview
Loading…
Cancel
Save