lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加打印功能

This commit is contained in:
zouzhibing 2022-03-25 15:23:57 +08:00
parent 469b03f82d
commit 62d52d7223
13 changed files with 317 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -11,9 +11,11 @@
"echarts": "^5.3.1",
"element-plus": "^2.1.4",
"nprogress": "^0.2.0",
"print-js": "^1.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
"vuex": "^4.0.0-0",
"wangeditor": "^4.7.12"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.8",

BIN
src/assets/image/im1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

48
src/components/u-wangEdior/index.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="u-wangEditor">
<div id="wangEditor"></div>
</div>
</template>
<script lang="ts" setup>
// 引入 wangEditor
import wangEditor from 'wangeditor'
import {onBeforeUnmount, onMounted, watch} from "vue";
let editors = null
let emit = defineEmits(['update:modelValue'])
let props = defineProps({
modelValue:String
})
const getEditorData = () =>{
// 通过代码获取编辑器内容
let data = editors.txt.html()
alert(data)
}
onMounted(()=>{
watch(()=>props.modelValue,(value)=>{
editors.txt.html(value)
})
const editor = new wangEditor(`#wangEditor`)
// 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange = (newHtml) => {
emit('update:modelValue',newHtml)
}
// 创建编辑器
editor.create()
editors = editor
})
onBeforeUnmount(()=>{
// 调用销毁 API 对当前编辑器实例进行销毁
editors.destroy()
editors = null
})
</script>
<style>
</style>

16
src/layout/components/Sidebar/index.vue
View File

@ -3,9 +3,9 @@
<logo :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
default-active="2"
:default-active="activeMenu"
active-text-color="#ffd04b"
background-color="#545c64"
background-color="#304156"
text-color="#fff"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@ -19,17 +19,29 @@
<script lang="ts" setup>
import SidebarItem from './SidebarItem.vue'
import logo from './Logo.vue'
import {useRoute} from 'vue-router'
import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
import { ref,computed } from 'vue'
// 在setup中获取store
const store = useStore()
const route = useRoute()
console.log('route',route)
// 获取路由
const permission_routes = computed(()=>{
return store.state.permission.routes
})
const activeMenu = computed(()=>{
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
})
// 是否折叠
const isCollapse = computed(()=>{
return store.state.app.isCollapse

1
src/layout/components/UHeader/index.vue
View File

@ -93,6 +93,7 @@
}
.m-layout-header{
height: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;

13
src/router/index.ts
View File

@ -1,11 +1,11 @@
import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory } from 'vue-router'
import Layout from "@/layout/index.vue";
// 引入组件
import chartsRouter from './modules/charts'
import chatRouter from './modules/chat'
import componentsRouter from './modules/components'
import othersRouter from './modules/other'
export const constantRoutes: Array<RouteRecordRaw> = [
{
@ -31,12 +31,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
]
// 异步组件
export const asyncRoutes = [
chartsRouter,
chatRouter
chatRouter,
componentsRouter,
othersRouter
]
const router = createRouter({
// history: createWebHistory(process.env.BASE_URL), // history
history: createWebHashHistory(), // hash

30
src/router/modules/components.ts Normal file
View File

@ -0,0 +1,30 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
const componentsRouter = {
path: '/components',
component: Layout,
redirect: 'noRedirect',
name: 'components',
meta: {
title: '组件',
icon: 'chart'
},
children: [
{
path: 'editor',
component: () => import('@/views/components-demo/editor.vue'),
name: 'editor',
meta: { title: '富文本编辑器', noCache: true }
},
{
path: 'mark-down',
component: () => import('@/views/components-demo/mark-down.vue'),
name: 'mark-down',
meta: { title: 'markDown', noCache: true }
},
]
}
export default componentsRouter

30
src/router/modules/other.ts Normal file
View File

@ -0,0 +1,30 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
const othersRouter = {
path: '/other',
component: Layout,
redirect: 'noRedirect',
name: 'other',
meta: {
title: '其他',
icon: 'chart'
},
children: [
{
path: 'print',
component: () => import('@/views/other/print.vue'),
name: 'print',
meta: { title: '打印', noCache: true }
},
{
path: 'cropper',
component: () => import('@/views/other/cropper.vue'),
name: 'cropper',
meta: { title: '头像裁剪', noCache: true }
},
]
}
export default othersRouter

1
src/store/modules/permission.ts
View File

@ -1,7 +1,6 @@
import {Module} from "vuex";
import { asyncRoutes, constantRoutes } from '@/router/index'
/**
* Use meta.role to determine if the current user has permission
* @param roles

74
src/views/components-demo/editor.vue
View File

@ -1 +1,75 @@
<template>
<el-form
ref="formRef"
:model="dynamicValidateForm"
label-width="80px"
class="demo-dynamic"
>
<el-form-item
prop="title"
label="标题"
:rules="[
{ required: true, message: '请输入标题', trigger: 'blur', },
]"
>
<el-input v-model="dynamicValidateForm.title" />
</el-form-item>
<el-form-item
prop="content"
label="标题"
:rules="[
{ required: true, message: '请输入内容', trigger: 'blur', },
]"
>
<u-wang-edior v-model="dynamicValidateForm.content"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(formRef)">保存</el-button>
<!-- <el-button @click="preview">预览</el-button>-->
<el-button @click="resetForm(formRef)">取消</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import UWangEdior from '@/components/u-wangEdior/index.vue'
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
title: string,
content:string
}>({
title: '',
content:''
})
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate((valid) => {
console.log('valid',valid)
if (valid) {
ElMessage.success('保存成功')
} else {
console.log('error submit!')
return false
}
})
}
const preview = ()=>{
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>

1
src/views/login/index.vue
View File

@ -69,6 +69,7 @@
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
console.log('valid==',valid)
if (valid) {
// 登录
await store.dispatch('user/login',ruleForm)

75
src/views/other/print.vue
View File

@ -0,0 +1,75 @@
<template>
<div>
<el-button type="primary" @click="print(1)">打印图片</el-button>
<el-button type="primary" @click="print(2)">打印表格</el-button>
</div>
<div style="margin-top: 20px">
<img :src="im1" style="width: 50%;"/>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="名字" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</div>
</template>
<script lang="ts" setup>
import printJS from 'print-js'
import im1 from '@/assets/image/im1.jpeg'
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
const print = (type)=>{
switch (type) {
case 1:
printJS({
type:'image',
printable:im1,
documentTitle: '打印图片'
})
break;
case 2:
printJS({
type:'json',
documentTitle: '打印表格',
printable: tableData,
gridStyle: 'text-align: center;border: 1px solid lightgray;font-size: 12px;',
properties: [
{ field: 'date', displayName: '日期' },
{ field: 'name', displayName: '名字' },
{ field: 'address', displayName: '地址' },
],
})
break;
case 3:
break;
}
}
</script>
<style>
</style>

34
yarn.lock
View File

@ -892,7 +892,15 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
"@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
"@babel/runtime-corejs3@^7.11.2":
version "7.17.8"
resolved "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.8.tgz#d7dd49fb812f29c61c59126da3792d8740d4e284"
integrity sha512-ZbYSUvoSF6dXZmMl/CYTMOvzIFnbGfv4W3SEHYgMvNsFTeLaF2gkGAF4K2ddmtSK4Emej+0aYcnSC6N5dPCXUQ==
dependencies:
core-js-pure "^3.20.2"
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
version "7.17.8"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
@ -2890,6 +2898,11 @@ core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-compat@^3.6.5:
browserslist "^4.19.1"
semver "7.0.0"
core-js-pure@^3.20.2:
version "3.21.1"
resolved "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.21.1.tgz#8c4d1e78839f5f46208de7230cebfb72bc3bdb51"
integrity sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
core-js@^3.6.5:
version "3.21.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
@ -6679,6 +6692,11 @@ pretty-error@^2.0.2:
lodash "^4.17.20"
renderkid "^2.0.4"
print-js@^1.6.0:
version "1.6.0"
resolved "https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@ -7941,6 +7959,11 @@ tslib@^1.8.0, tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.1.0:
version "2.3.1"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
tslint@^5.20.1:
version "5.20.1"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
@ -8319,6 +8342,15 @@ vuex@^4.0.0-0:
dependencies:
"@vue/devtools-api" "^6.0.0-beta.11"
wangeditor@^4.7.12:
version "4.7.12"
resolved "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.12.tgz#96fb73822a937588d82c3a84249549ae99cecf3e"
integrity sha512-5KOIpQ0+idKvDTkjZOp7RHYXA97FyJ9mjwy+zQUdMUCqZItlEXzvVOYtOlHkJr/HcbwgIz/7f/trGFggZK5X4g==
dependencies:
"@babel/runtime" "^7.11.2"
"@babel/runtime-corejs3" "^7.11.2"
tslib "^2.1.0"
watchpack-chokidar2@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"