Browse Source

yshop2.1.4,订单新增批量打印,图片修改为批量上传等

master
hupeng 5 years ago
parent
commit
9021519fe3
  1. 17
      src/components/material/index.vue
  2. 274
      src/views/shop/order/index.vue
  3. 189
      src/views/shop/order/print.vue

17
src/components/material/index.vue

@ -79,8 +79,9 @@
:on-progress="handleProgress"
:before-upload="beforeUpload"
:on-success="handleSuccess"
multiple
>
<el-button size="small" type="primary">点击上传</el-button>
<el-button size="small" type="primary">批量上传</el-button>
</el-upload>
</el-col>
</el-row>
@ -103,7 +104,7 @@
:src="item.url"
fit="contain"
:preview-src-list="[item.url]"
:z-index=999
:z-index="999"
/>
<div>
<el-checkbox class="material-name" :label="item.url">
@ -144,12 +145,12 @@
</template>
<script>
import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
export default {
name: 'MaterialList',
props: {
//
@ -456,7 +457,7 @@ export default {
this.listDialogVisible = false
}
}
}
}
</script>
<style lang="scss" scoped>

274
src/views/shop/order/index.vue

@ -1,5 +1,6 @@
<template>
<div class="app-container">
<div class="app-container" style="position: relative; height: calc(100vh - 117px);">
<div class="container">
<el-tabs v-model="status" type="card" @tab-click="handleOrder">
<el-tab-pane name="-9">
@ -46,6 +47,17 @@
:value="item.value"
/>
</el-select>
<el-date-picker
v-model="createTime"
:default-time="['00:00:00','23:59:59']"
type="daterange"
range-separator=":"
size="small"
class="date-item"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 新增 -->
<el-button
@ -62,9 +74,19 @@
<eRefund ref="form2" :is-add="isAdd" />
<editOrder ref="form3" :is-add="isAdd" />
<eRemark ref="form4" :is-add="isAdd" />
<ePrint ref="form5" :is-add="isAdd" :print-list="checkList" :to-query="toQuery"/>
<!--订单数据统计-->
<div class="order-caculate">
<a class="caculate-title">订单数 : <span class="caculate-num">{{caculateInfo.orderNum}}</span></a>
<a class="caculate-title">商品数 : <span class="caculate-num">{{caculateInfo.storeNum}}</span></a>
<a class="caculate-title">订单金额 : <span class="caculate-num">{{caculateInfo.orderPrice}}</span></a>
<a class="caculate-title">客户数 : <span class="caculate-num">{{caculateInfo.userNum}}</span></a>
</div>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
<el-table ref="multipleTable" v-loading="loading" :data="data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column :selectable="checkboxT" type="selection" width="50" />
<el-table-column prop="orderId" width="140" label="订单号">
<template slot-scope="scope">
<span>{{ scope.row.orderId }}</span>
@ -181,6 +203,28 @@
</template>
</el-table-column>
</el-table>
</div>
<!--添加订单打印及订单导出功能 2020.04.13 changxh-->
<el-footer class="footer-contains">
<div class="footer-search">
<el-checkbox v-model="printChecked" @change="batchSelection" style="margin-right: 20px;"></el-checkbox>
<el-select v-model="batchHandle" @change="handlePrintOption" clearable placeholder="批量操作" class="filter-item" style="width: 130px; margin-right: 8px;">
<el-option
v-for="item in handleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="batchExport" @change="handleExportOption" clearable placeholder="批量导出" class="filter-item" style="width: 130px">
<el-option
v-for="item in exportOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<!--分页组件-->
<el-pagination
:total="total"
@ -190,25 +234,29 @@
@size-change="sizeChange"
@current-change="pageChange"
/>
</el-footer>
</div>
</template>
<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del } from '@/api/yxStoreOrder'
import eForm from './form'
import eDetail from './detail'
import eRefund from './refund'
import editOrder from './edit'
import eRemark from './remark'
import { formatTime } from '@/utils/index'
export default {
components: { eForm, eDetail, eRefund, editOrder, eRemark },
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del } from '@/api/yxStoreOrder'
import eForm from './form'
import eDetail from './detail'
import eRefund from './refund'
import editOrder from './edit'
import eRemark from './remark'
import ePrint from './print'
import { formatTime } from '@/utils/index'
import { gett } from '@/api/visits'
export default {
components: { eForm, eDetail, eRefund, editOrder, eRemark, ePrint },
mixins: [initData],
data() {
return {
delLoading: false, status: '-9', orderType: '0',
delLoading: false, status: '-9', orderType: '0',createTime: '', checkList: [], printChecked: false, batchHandle: '', batchExport: '', listContent: [],
queryTypeOptions: [
{ key: 'orderId', display_name: '订单号' },
{ key: 'realName', display_name: '用户姓名' },
@ -231,7 +279,22 @@ export default {
{ value: '2', label: '拼团订单' },
{ value: '3', label: '秒杀订单' },
{ value: '4', label: '砍价订单' }
]
],
handleOptions: [
{value: '', label: '批量操作'},
{value: '0', label: '批量打印'},
],
exportOptions: [
{value: '', label: '批量导出'},
{value: '0', label: '导出全部'},
{value: '1', label: '导出选中'},
],
caculateInfo: {
orderNum : 0,
storeNum : 0,
orderPrice : 0,
userNum : 0,
},
}
},
created() {
@ -249,7 +312,7 @@ export default {
beforeInit() {
this.url = 'api/yxStoreOrder'
const sort = 'id,desc'
this.params = { page: this.page, size: this.size, sort: sort, orderStatus: this.status, orderType: this.orderType }
this.params = { page: this.page, size: this.size, sort: sort, orderStatus: this.status, orderType: this.orderType, addTime: this.createTime, listContent: this.listContent }
const query = this.query
const type = query.type
const value = query.value
@ -572,11 +635,186 @@ export default {
nickname: data.userDTO.nickname
}
_this.dialog = true
},
getCaculateInfo(){
gett().then(res => {
this.caculateInfo = {
orderPrice : res.priceCount,
orderNum : res.orderCount,
storeNum : res.goodsCount,
userNum : res.userCount,
};
})
},
clearCaculateInfo(){
this.caculateInfo = {
orderPrice : 0,
storeNum : 0,
orderNum : 0,
userNum : 0,
};
},
handleSelectionChange(val) {
this.checkList = val;
let orderPrice = 0, storeNum = 0, orderNum = 0, userNum = 0;
if(val.length !=0 ){
this.printChecked = true;
let user = [];
val.forEach((item,index)=>{
orderNum += 1;
orderPrice += item.totalPrice;
storeNum += item.totalNum;
user.push(item.userDTO.account);
})
user = Array.from(new Set(user));
this.caculateInfo = {
orderPrice : orderPrice.toFixed(2),
storeNum : storeNum,
orderNum : orderNum,
userNum : user.length,
};
}else {
this.printChecked = false;
this.clearCaculateInfo();
// this.getCaculateInfo();
}
},
batchSelection(val){
let rows = this.data;
if (val) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handlePrintOption(val){
switch (val) {
case '0':
this.getPrintList();
this.batchHandle = '';
break;
default:
break;
}
},
handleExportOption(val){
let list = this.checkList;
this.page = 0;
this.size = 10000;
switch (val) {
case "0":
this.listContent = "";
this.beforeInit();
this.downloadMethod();
break;
case "1":
if(list.length == 0){
this.$message({
message: '请选择订单',
type: 'warning'
});
}else {
this.listContent = [];
list.forEach((item) => {
this.listContent.push(item.orderId);
})
this.listContent = JSON.stringify(this.listContent);
this.beforeInit();
this.downloadMethod();
}
break;
default:
break;
}
this.batchExport = "";
},
getPrintList(){
let list = this.checkList;
if(list.length == 0){
this.$message({
message: '请选择订单',
type: 'warning'
});
}else {
const _this = this.$refs.form5;
_this.dialog = true
}
},
checkboxT(row, rowIndex) {
return row.id !== 1
},
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
.container {
height: calc(100% - 80px);
position: absolute;
overflow: auto;
width: calc(100% - 20px);
.order-caculate {
font-size: 14px;
color: #909399;
border-top: 1px solid #f0f0f0;
padding: 20px 10px;
.caculate-title {
display: inline-block;
margin-right: 50px;
}
.caculate-num {
font-size: 20px;
color: #ff4949;
}
}
.el-table th {
background-color: #fafafa;
}
}
.footer-contains {
position: absolute;
display: -ms-flexbox;
display: flex;
background-color: #f6f6f6;
bottom: 0;
flex-align: center;
align-items: center;
justify-content: space-between;
width: 100%;
z-index: 999;
padding: 0 20px 0 13px;
}
/*打印单样式编辑*/
.order-list {
/* height: 297mm;*/
margin: 0 auto;
width: 210mm;
.order-title {
height: 16mm;
line-height: 16mm;
font-size: 8mm;
font-weight: bolder;
text-align: center;
}
.order-info {
span {
display: inline-block;
padding: 0 0 10px 0;
font-size: 3mm;
}
span.info {
width: 60mm;
}
}
.el-table--small th, .el-table--small td {
padding: 4px 0;
}
}
</style>

189
src/views/shop/order/print.vue

@ -0,0 +1,189 @@
<template>
<el-dialog id="printDialog" :append-to-body="false" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="订单打印" width="220mm">
<el-button
type="warning"
class="filter-item"
size="mini"
icon="el-icon-printer"
onclick="doPrint()"
>打印</el-button>
<div id="printList">
<div class="order-list" v-for="(list, index) in printList">
<el-header class="order-title">订货单</el-header>
<div class="order-info">
<span class="info">{{list.orderId}}</span>
<span class="info">下单日期 : {{formatTimeTwo(list.addTime)}}</span>
<span>客户名称 : {{list.realName}}</span>
</div>
<div class="order-info">
<span class="info">联系人 : {{list.userDTO.account}}</span>
<span class="info">联系电话 : {{list.userPhone}}</span>
<span>收货地址 : {{list.userAddress}}</span>
</div>
<el-table border show-summary :data="list.cartInfoList" :summary-method="getSummaries" size="small" style="width: 100%;">
<el-table-column type="index" label="行号" :index="indexMethod" width="60mm"/>
<el-table-column prop="cartInfoMap.productInfo.productId" width="80mm" label="商品编号" />
<el-table-column prop="cartInfoMap.productInfo.storeName" width="172mm" label="商品名称" />
<el-table-column prop="cartInfoMap.productInfo.unitName" width="80mm" label="商品规格" />
<el-table-column prop="cartInfoMap.productInfo.unitName" width="80mm" label="单位" />
<el-table-column prop="cartInfoMap.productInfo.price" width="80mm" label="单价" />
<el-table-column prop="cartInfoMap.cartNum" width="80mm" label="数量" />
<el-table-column prop="cartInfoMap" width="80mm" label="小计(元)" >
<template slot-scope="scope">
<span>{{ scope.row.cartInfoMap.productInfo.price*scope.row.cartInfoMap.cartNum }}</span>
</template>
</el-table-column>
<el-table-column prop="cartInfoMap.mark" width="80mm" label="备注" />
</el-table>
</div>
</div>
</el-dialog>
</template>
<script>
import { formatTime, parseTime, formatTimeTwo } from '@/utils/index'
export default {
props: {
printList: {
type: Array,
required: true
},
toQuery: {
type: Function,
required: true
}
},
data() {
return {
loading: false, dialog: false
}
},
mounted() {
window.doPrint = this.doPrint;
},
methods: {
formatTime,
parseTime,
formatTimeTwo,
cancel() {
this.dialog = false
},
indexMethod(index){
return index+1;
},
doPrint(){
let printbox = document.querySelector("#printList").innerHTML;
document.querySelector("body").innerHTML = printbox;
window.print();
this.cancel();
// this.toQuery();
window.location.reload();
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}else if(index === 7){
const values = data.map(item => Number(item.cartInfoMap.productInfo.price*item.cartInfoMap.cartNum));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
}
});
return sums;
}
}
}
</script>
<style scoped lang="scss">
.container {
height: calc(100% - 80px);
position: absolute;
overflow: auto;
width: calc(100% - 20px);
.order-caculate {
font-size: 14px;
color: #909399;
border-top: 1px solid #f0f0f0;
padding: 20px 10px;
.caculate-title {
display: inline-block;
margin-right: 50px;
}
.caculate-num {
font-size: 20px;
color: #ff4949;
}
}
.el-table th {
background-color: #fafafa;
}
}
.footer-contains {
position: absolute;
display: -ms-flexbox;
display: flex;
background-color: #f6f6f6;
bottom: 0;
flex-align: center;
align-items: center;
justify-content: space-between;
width: 100%;
z-index: 999;
padding: 0 20px 0 13px;
}
/*打印单样式编辑*/
.order-list {
/* height: 297mm;*/
margin: 0 auto;
width: 210mm;
.order-title {
height: 16mm;
line-height: 16mm;
font-size: 8mm;
font-weight: bolder;
text-align: center;
}
.order-info {
span {
display: inline-block;
padding: 0 0 10px 0;
font-size: 3mm;
}
span.info {
width: 60mm;
}
}
.el-table--small th, .el-table--small td {
padding: 4px 0;
}
}
</style>
Loading…
Cancel
Save