Renderings:
Check the product and click Print to jump to the print page with the product information parameters and display the label name on the tab
Case realization process
1. Create a list page
<template>
<div class="mod-config">
<el-form>
<el-form-item>
<el-button-group>
<el-button size="mini" v-if="isAuth('sale:print:info')" :disabled="dataListSelections.length <= 0" type="qblue" @click="printNoBackground()"
class="iconfont icon-print">打印(无背景)</el-button>
</el-button-group>
</el-form-item>
</el-form>
<el-table :data="dataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
style="width: 100%;"
:header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
<el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column>
<el-table-column prop="productCode" header-align="center" align="center" label="产品编号">
</el-table-column>
<el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="150" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="genericName" header-align="center" align="center" label="通用名" v-if="false">
</el-table-column>
<el-table-column prop="standard" header-align="center" align="center" label="规格">
</el-table-column>
<el-table-column prop="unit" header-align="center" align="center" label="单位">
</el-table-column>
<el-table-column prop="barCode" header-align="center" align="center" label="条形码">
</el-table-column>
<el-table-column prop="producingArea" header-align="center" align="center" label="产地" width="150" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="produceFactory" header-align="center" align="center" label="生产单位" width="150" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="approvalNo" header-align="center" align="center" label="批准文号" width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="dosageForm" header-align="center" align="center" label="剂型">
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
import {
Loading } from "element-ui"
export default {
data() {
return {
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
}
},
activated() {
this.getDataList()
},
methods: {
// 获取数据列表
async getDataList() {
this.dataListLoading = true
let printDatas = JSON.parse(sessionStorage.getItem("printDatas"))
if(printDatas && printDatas.length > 0){
this.dataList = printDatas
}
this.dataListLoading = false
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
printNoBackground(){
let products = JSON.stringify(this.dataListSelections)
this.$router.push({
name:'printnoback',query: {
products}})
},
},
}
</script>
1.1) Bind the event printNoBackground to the button,
<el-button size="mini" v-if="isAuth('sale:print:info')" :disabled="dataListSelections.length <= 0" type="qblue" @click="printNoBackground()" class="iconfont icon-print">打印(无背景)</el-button>
1.2) Button binding event implementation
Jump to use this.$router.push
printNoBackground(){
let products = JSON.stringify(this.dataListSelections)
this.$router.push({
name:'printnoback',query: {
products}})
},
2. Create the page to be redirected
Receive difference products: this.$route.query.products
<template>
<div>
<h1>详情页面</h1>
<div>
<el-button type="primary" @click="toList">点击返回列表</el-button>
<div>传递参数：{
{
products}}</div>
</div>
</div>
</template>
<script>
export default {
name: "printnoback",
data() {
return {
products : this.$route.query.products
};
},
methods:{
toList(){
this.$router.push({
name: 'List',
})
}
}
}
</script>
3. Set the path in router.js
isTab: true indicates that it will be displayed in the tab bar after the jump
const mainRoutes = {
path: '/',
component: _import('main/main'),
name: 'main',
redirect: {
name: 'home'
},
meta: {
title: '主入口整体布局'
},
children: [
{
path: '/printnoback',
component: _import('modules/old/common/printnoback'),
name: 'printnoback',
meta: {
title: '标价签预览(无背景)',
isTab: true
}
},
]