github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-01-23 17:50:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(print): add print example

Browse Source
This commit is contained in:
Vben 2021-03-28 00:04:19 +08:00
parent bb67692cfd
commit 2f99892d96
11 changed files with 139 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 Normal file
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"