|
|
@@ -0,0 +1,198 @@
|
|
|
+<template>
|
|
|
+ <div style="margin: 20px">
|
|
|
+ <h1 align="center">发货单</h1>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <span style="font-size: 18px">下单时间：</span>
|
|
|
+ <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="—"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="this.$i18n.t('date.start')"
|
|
|
+ :end-placeholder="this.$i18n.t('date.end')"
|
|
|
+ :default-time="['00:00:00', '23:59:59']"></el-date-picker>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button type="primary" size="medium" @click="generatePrintData">生成</el-button>
|
|
|
+ <el-button type="success" size="medium" v-if="infoVisible" @click="doPrint">打印</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div style="display: inline">
|
|
|
+ <span style="font-size: 18px">数量上限：</span>
|
|
|
+ <el-input placeholder="请输入每一单的上限数量" v-model="formData.maxNum" style="width: 400px"></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div style="display: inline">
|
|
|
+ <span style="font-size: 18px">用户昵称：</span>
|
|
|
+ <el-input type="textarea" placeholder="逗号隔开" v-model="nickNameStr" style="width: 400px"></el-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div v-if="infoVisible">
|
|
|
+ <div style="margin-top: 30px">
|
|
|
+ <el-table
|
|
|
+ :data="printDataList"
|
|
|
+ style="width: 100%"
|
|
|
+ width="100%"
|
|
|
+ size="medium"
|
|
|
+ header-align="center"
|
|
|
+ height="600">
|
|
|
+ <el-table-column
|
|
|
+ fixed
|
|
|
+ label="序号"
|
|
|
+ type="index"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="nickName"
|
|
|
+ label="昵称"
|
|
|
+ width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="receiverName"
|
|
|
+ label="收件人"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="provinceCity"
|
|
|
+ label="省市"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="prodInfo"
|
|
|
+ label="商品信息"
|
|
|
+ width="700">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="prodNum"
|
|
|
+ label="数量"
|
|
|
+ width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="orderTime"
|
|
|
+ label="下单时间"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handlePrint(scope.row)">打印</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <!-- 设计器的 容器 -->
|
|
|
+ <div id="hiprint-printTemplate" hidden></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import AddOrUpdate from './orderLogistics-add-or-update'
|
|
|
+import {autoConnect, disAutoConnect, hiprint} from 'vue-plugin-hiprint'
|
|
|
+import customTemplate from './custom-template-data'
|
|
|
+import printData from './custom-print-data'
|
|
|
+autoConnect()
|
|
|
+hiprint.init()
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ customHiPrintTemplate: null,
|
|
|
+ dataList: [],
|
|
|
+ showPrintBtn: false,
|
|
|
+ page: {
|
|
|
+ total: 0, // 总页数
|
|
|
+ currentPage: 1, // 当前页数
|
|
|
+ pageSize: 10 // 每页显示多少条
|
|
|
+ },
|
|
|
+ printOrder: {
|
|
|
+ orderLogistics: {}
|
|
|
+ },
|
|
|
+ logisticsList: [],
|
|
|
+ // logisticsList:[{logisticsName: "申通快递", logisticsValue: "STO"}],
|
|
|
+ logistics: '',
|
|
|
+ deviceList: [],
|
|
|
+ deviceNo: null,
|
|
|
+ infoVisible: false,
|
|
|
+ lastInputStr: null,
|
|
|
+ scanOrderNo: null,
|
|
|
+ searchForm: {}, // 搜索
|
|
|
+ dataListLoading: false,
|
|
|
+ addOrUpdateVisible: false,
|
|
|
+ dateRange: [],
|
|
|
+ nickNameStr: '',
|
|
|
+ formData: {
|
|
|
+ beginTime: null,
|
|
|
+ endTime: null,
|
|
|
+ maxNum: 2,
|
|
|
+ nikeNameList: []
|
|
|
+ },
|
|
|
+ printDataList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ // AddOrUpdate
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // this.getDeviceList();
|
|
|
+ this.getLogisticsList()
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.buildCustomDesigner()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ generatePrintData () {
|
|
|
+ this.formData.beginTime = this.dateRange[0]
|
|
|
+ this.formData.endTime = this.dateRange[1]
|
|
|
+ this.formData.nickNameList = this.nickNameStr.split(',')
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/print/list'),
|
|
|
+ method: 'POST',
|
|
|
+ data: this.formData
|
|
|
+ }).then(({data}) => {
|
|
|
+ if (data) {
|
|
|
+ this.printDataList = data
|
|
|
+ if (this.printDataList.length > 0) {
|
|
|
+ this.infoVisible = true
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ doPrint(){
|
|
|
+ let _this = this
|
|
|
+ _this.printDataList.forEach(item => {
|
|
|
+ _this.customHiPrintTemplate.print2(printData.value(item))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buildCustomDesigner () {
|
|
|
+ $('#custom-hiprint-printTemplate').empty() // 先清空, 避免重复构建
|
|
|
+ this.customHiPrintTemplate = new hiprint.PrintTemplate({
|
|
|
+ // 如果使用 vue ref 创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
|
|
|
+ template: customTemplate, // 模板json(object)
|
|
|
+ settingContainer: '#PrintElementOptionSetting' // 元素参数容器
|
|
|
+ })
|
|
|
+ // 构建 并填充到 容器中
|
|
|
+ this.customHiPrintTemplate.design('#custom-hiprint-printTemplate')
|
|
|
+ },
|
|
|
+ handlePrint (item) {
|
|
|
+ this.customHiPrintTemplate.print2(printData.value(item))
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .col{
|
|
|
+ height: 40px;
|
|
|
+ border: gainsboro 1px solid;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+</style>
|
