src/views/oms/print/label/Index.vue
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>标签</span>
</div>
<el-row>
<el-col :span="24">
<el-form ref="searchForm" class="el-form-col search-form" :model="search">
<el-row :gutter="15">
<el-col :lg="4" :md="6">
<el-form-item prop="orderNo" >
<el-input v-model="search.orderNo" type="textarea" :rows="4" clearable
placeholder="关联订单 (支持多单查询，用英文逗号分隔)"></el-input>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6">
<el-form-item prop="consigneName">
<el-input v-model="search.consigneName" placeholder="客户姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6">
<el-form-item prop="consignePhone">
<el-input v-model="search.consignePhone" placeholder="客户电话" clearable></el-input>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6">
<el-form-item prop="cargoOwnerName">
<el-input v-model="search.cargoOwnerName" placeholder="商家名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
<el-form-item>
<el-row class="search-btns" :gutter="5">
<el-col :span="12">
<el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
</el-col>
<el-col :span="12">
<el-button @click="reset('searchForm')" plain>重置</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6">
<el-form-item prop="orderType">
<el-select v-model="search.orderType" placeholder="关联订单类型">
<el-option v-for="item in orderTypeArr"
:key="item.value"
:label="item.text"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
<el-form-item>
<el-row class="search-btns" :gutter="5">
<el-col :span="12">
<el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
</el-col>
<el-col :span="12">
<el-button @click="reset('searchForm')" plain>重置</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :lg="4" :md="6">
<el-form-item prop="storageTypeCode">
<el-select v-model="search.storageTypeCode" placeholder="仓储类型">
<el-option v-for="item in storageTypeCodeArr"
:key="item.value"
:label="item.text"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</el-card>
<el-card class="show">
<div slot="header" class="clearfix">
<span>列表</span>
<el-button class="pull-right" type="primary" @click.prevent="labelPrint">批量打印</el-button>
</div>
<el-row :gutter="15">
<el-col :span="24">
<el-table
ref="dataTable"
:data="dataTable"
:header-cell-style="{'text-align': 'center'}"
:cell-style="{'text-align': 'center'}"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
fixed="left"
type="selection">
</el-table-column>
<el-table-column
fixed="left"
width="180"
prop="orderNo"
label="关联订单">
<template slot-scope="scope">
<a href="javascript:;" class="blue-color" @click="showDetail(scope.row)">{{scope.row.orderNo}}</a>
</template>
</el-table-column>
<el-table-column
prop="consigneName"
label="客户姓名">
</el-table-column>
<el-table-column
prop="consignePhone"
label="客户电话">
</el-table-column>
<el-table-column
prop="orderType"
label="关联订单类型">
<template slot-scope="scope">
{{scope.row.orderType | filterDataBaseDictionary}}
</template>
</el-table-column>
<el-table-column
prop="warehouse"
label="入库仓">
</el-table-column>
<el-table-column
prop="storageTypeCode"
label="仓储类型">
<template slot-scope="scope">
{{scope.row.storageTypeCode | filterDataBaseDictionary}}
</template>
</el-table-column>
<el-table-column
prop="cargoOwnerName"
label="商家名称">
</el-table-column>
<el-table-column
prop="totalPackage"
label="总包件">
</el-table-column>
<el-table-column
prop="totalVolume"
label="总体积">
</el-table-column>
<el-table-column
prop="totalWeight"
label="总重量">
</el-table-column>
<el-table-column
prop="foundtime"
label="下单时间">
<template slot-scope="scope">
{{scope.row.foundtime | unixTimestampFilter}}
</template>
</el-table-column>
<el-table-column
width="80"
prop="printNum"
label="打印次数">
</el-table-column>
<el-table-column
width="150"
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="show(scope.row)">详情</el-button>
<el-button type="text" @click="labelPrint(scope.row)">打印标签</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
</el-card>
<Label-modal ref="LabelModal" :printData="printData" @refresh="getTableData"></Label-modal>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import LabelModal from '@/views/oms/print/label/LabelModal'
import {copy, merge, alert} from '@/utils'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {getSubDictListOfParentCode} from '@/utils/selectOptions'
export default {
name: 'printLabelIndex',
components: {
LabelModal,
Pagination
},
filters: {
unixTimestampFilter,
filterDataBaseDictionary
},
data() {
return {
isOpen: false,
visible: false,
searchLoading: false,
search: {
orderNo: '',
consigneName: '',
consignePhone: '',
cargoOwnerName: '',
orderType: '',
storageTypeCode: ''
},
orderTypeArr: [],
storageTypeCodeArr: [],
dataTable: [],
checkedData: [],
printData: [],
searchOpen: false,
totalItem: 0,
params: {
pageSize: 20,
pageNum: 1
}
}
},
created() {
getSubDictListOfParentCode('STORAGEORDERTYPE').then(arr => {
this.orderTypeArr = arr || []
})
getSubDictListOfParentCode('CARGOSOURCETYPE').then(arr => {
this.storageTypeCodeArr = arr || []
})
this.getTableData()
},
methods: {
pagination(page) {
this.params.pageNum = page
this.getTableData()
},
sizeChange(size) {
this.params.pageSize = size
this.getTableData()
},
handleSelectionChange(data) {
this.checkedData = data
},
searchFunc(search) {
this.getTableData()
},
// reset 重置搜索框
reset(searchForm) {
this.$refs.searchForm.resetFields()
},
getTableData() {
let data = copy(this.search, true)
data = merge(data, this.params)
this.searchLoading = true
this.$ajax.table('/ms-terminal-order/labelPrint/findLabelPrintList', data).then(response => {
this.dataTable = response.data || []
this.totalItem = response.totalItem
}).finally(_ => {
this.searchLoading = false
})
},
labelPrint(single) {
this.printData = []
if (single.orderId) {
this.printData.push(single)
} else {
if (!this.checkedData.length) {
alert('请选择需打印的订单', '提示', 'warning')
return
}
this.printData = this.checkedData
}
this.$refs.LabelModal.show()
},
showDetail(data) {
// boolTrunk:true(干线)
this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
},
show(data) {
if (data.boolTrunk) {
// 干线的订单详情
this.$router.push({path: '/ss-oms/orders/service-orders/show/' + data.orderId})
} else {
// 直营的 打印详情：
this.$router.push({path: '/ss-oms/print/label/show/' + data.orderId})
}
}
}
}
</script>