<template>
<div class="userView">
<!-- 页眉颜色统一 -->
<div class="buttonTop"></div>
<div class="main">
<!--工具栏-->
<div class="center" style="overflow: hidden;">
<el-button @click="updateOrderInvoiceBatch" type="success">批量设置拣货中</el-button>
<div class="input" style="float:right">
<span>发货单状态：</span>
<el-select clearable style="width:100px;" v-model="data.sts" placeholder="发货单状态" size="small">
<el-option label="取消" value="0"></el-option>
<el-option label="未支付" value="1"></el-option>
<el-option label="已支付" value="2"></el-option>
<el-option label="拣货中" value="3"></el-option>
<el-option label="已发货" value="4"></el-option>
</el-select>
<el-input placeholder="请输入名称" v-model="data.name" clearable size="small"></el-input>
<el-button @click="select" type="success">检索</el-button>
<el-button @click="emptyData" type="info">清空</el-button>
</div>
</div>
<!--列表table展示-->
<el-table
:data="orderInvoiceList.rows"
@selection-change="changeTable"
border
style="width: 100%; margin-top: 10px">
<el-table-column type="selection" min-width="35"></el-table-column>
<el-table-column prop="price" label="货价" min-width="50"></el-table-column>
<el-table-column prop="postFee" label="运费" min-width="50"></el-table-column>
<el-table-column prop="totalPrice" label="总价" min-width="50"></el-table-column>
<el-table-column prop="isCanceled" label="是否取消" min-width="60" :formatter="booleanMsgFun"></el-table-column>
<el-table-column prop="isSettled" label="费用是否结清" min-width="80" :formatter="booleanMsgFun"></el-table-column>
<el-table-column prop="isSettledFee" label="运费是否结清" min-width="80" :formatter="booleanMsgFun"></el-table-column>
<el-table-column prop="isPost" label="是否发货" min-width="60" :formatter="booleanMsgFun"></el-table-column>
<el-table-column prop="customerAddress" label="地址" min-width="220"></el-table-column>
<el-table-column prop="customerPhone" label="电话" min-width="85"></el-table-column>
<el-table-column prop="customerName" label="名称" min-width="60"></el-table-column>
<el-table-column prop="waybillNo" label="运单号" min-width="110"></el-table-column>
<el-table-column prop="carrier" label="承运人" min-width="60"></el-table-column>
<el-table-column prop="startPickTime" label="开始拣货时间" min-width="100"></el-table-column>
<el-table-column prop="postTime" label="发货时间" min-width="100"></el-table-column>
<el-table-column label="操作" min-width="60">
<template slot-scope="scope">
<el-button size="mini" @click.native="editOrderInvoice(scope.$index, scope.row)">发货</el-button>
<el-button
size="mini"
type="danger"
@click="updateOrderInvoice(scope.$index,scope.row)">拣货中</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="page">
<el-pagination
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40 , 50, 100]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="orderInvoiceList.total">
</el-pagination>
</div>
<!-- 编辑dialog对象 -->
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" size="tiny">
<span slot="title" class="el-dialog__title">
{{‘发货‘}}
</span>
<el-form ref="dialogData" :model="dialogData" label-width="150px">
<!-- <el-form-item label="地址">
<el-input v-model="dialogData.customerAddress"></el-input>
</el-form-item>
<el-form-item label="电话" >
<el-input v-model="dialogData.customerPhone"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="dialogData.customerName"></el-input>
</el-form-item>-->
<el-form-item label="运单号">
<el-input v-model="dialogData.waybillNo"></el-input>
</el-form-item>
<el-form-item label="承运人">
<el-input v-model="dialogData.carrier"></el-input>
</el-form-item>
<!--<el-form-item label="开始拣货时间" >
<el-col :span="10">
<el-date-picker type="datetime" placeholder="选择时间" v-model="dialogData.startPickTime" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="发货时间" >
<el-col :span="10">
<el-date-picker type="datetime" placeholder="选择时间" v-model="dialogData.postTime" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="是否取消" label-width="150px">
<el-col :span="4">
<el-switch
v-model="canceled"
on-color="#13ce66"
on-text="是"
off-text="否"
off-color="#666666"
@change=‘changeIsCanceledStatus($event)‘>
</el-switch>
</el-col>
</el-form-item>
<el-form-item label="费用是否结清" label-width="150px">
<el-col :span="4">
<el-switch
v-model="settled"
on-color="#13ce66"
on-text="是"
off-text="否"
off-color="#666666"
@change=‘changeIsSettledStatus($event)‘>
</el-switch>
</el-col>
</el-form-item>
<el-form-item label="运费是否结清" label-width="150px">
<el-col :span="4">
<el-switch
v-model="settledFee"
on-color="#13ce66"
on-text="是"
off-text="否"
off-color="#666666"
@change=‘changeIsSettledFeeStatus($event)‘>
</el-switch>
</el-col>
</el-form-item>
<el-form-item label="是否发货" label-width="150px">
<el-col :span="4">
<el-switch
v-model="post"
on-color="#13ce66"
on-text="是"
off-text="否"
off-color="#666666"
@change=‘changeIsPostStatus($event)‘>
</el-switch>
</el-col>
</el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editOrderInvoiceSubmit">保存并关闭</el-button>
<el-button @click.native="dialogVisible = false">取消</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import util from ‘../../common/js/util‘
import NProgress from ‘nprogress‘
import http from ‘../../api/http‘
export default {
data(){
return{
page:1,
rows:10,
data:{
id:"",
name:"",
sts:null
},
// 弹出框的数据
dialogData:{
id:‘‘,
/*customerAddress:‘‘,
customerPhone:‘‘,
customerName:‘‘,*/
waybillNo:‘‘,
carrier:‘‘,
/* startPickTime:"",
postTime:"",
canceled:false,
settled:false,
settledFee:false,
post:false*/
},
multipleSelection:[],
orderInvoiceList:{},
/*canceled:false,
settled:false,
settledFee:false,
post:false,*/
dialogVisible: false
}
},
methods:{
loadOrderInvoiceList(){
let obj = {
page : this.page,
rows : this.rows,
name : this.data.name,
sts : this.data.sts
}
this.apiPost(‘/order/invoiceList‘,obj).then(res=>{
this.handelResponse(res, (data) => {
this.orderInvoiceList = data
})
})
},
handleSizeChange(val) {
this.rows = val
this.loadOrderInvoiceList();
},
handleCurrentChange(val) {
this.page = val;
this.loadOrderInvoiceList();
},
clearable(){
this.data.name = ‘‘;
this.data.sts = null;
this.loadOrderInvoiceList();
},
changeTable(val){
this.multipleSelection = val;
},
// 检索
select(){
this.loadOrderInvoiceList()
},
//清空按钮操作
emptyData(){
this.data.name = "";
this.data.sts = null;
this.select()
},
//布尔类型数据格式化显示
booleanMsgFun(row, column,value){
if(value){
return "是";
}else{
return "否";
}
},
//主要功能打开编辑页面，回显当前行信息,包括图片
editOrderInvoice(index,row) {
this.apiPost(‘/order/orderInvoice/‘+row.id+‘/get‘,{}).then((res) => {
this.handelResponse(res, (data) => {
this.dialogData=data
/*if(data.startPickTime){
this.dialogData.startPickTime=new Date(data.startPickTime);
}else{
this.dialogData.startPickTime=null;
}
if(data.postTime){
this.dialogData.postTime=new Date(data.postTime);
}else{
this.dialogData.postTime=null;
}
this.canceled=data.isCanceled;
this.settled=data.isSettled;
this.settledFee=data.isSettledFee;
this.post=data.isPost;*/
this.dialogVisible=true;
})
});
},
//发货单编辑页面的保存方法
editOrderInvoiceSubmit() {
/*this.dialogData.canceled=this.canceled;
this.dialogData.settled=this.settled;
this.dialogData.settledFee=this.settledFee;
this.dialogData.post=this.post;*/
this.apiPost(‘/order/orderInvoice/‘+this.dialogData.id+‘/updateIsPost‘,this.dialogData).then((res) => {
this.handelResponse(res, (data) => {
this.dialogVisible=false;
_g.toastMsg(‘success‘,‘提交成功‘);
this.loadOrderInvoiceList();
})
});
},
//清空表单的回显值问题
newData(){
this.dialogData.id="",
/*this.dialogData.customerAddress="",
this.dialogData.customerPhone="",
this.dialogData.customerName="",*/
this.dialogData.waybillNo="",
this.dialogData.carrier=""
/*this.dialogData.startPickTime=null,
this.dialogData.postTime=null,
this.dialogData.canceled=false,
this.dialogData.settled=false,
this.dialogData.settledFee=false,
this.dialogData.post=false*/
},
/*changeIsCanceledStatus($event){
this.canceled=$event;
},
changeIsSettledStatus($event){
this.settled=$event;
},
changeIsSettledFeeStatus($event){
this.settledFee=$event;
},
changeIsPostStatus($event){
this.post=$event;
}*/
//修改当前记录状态为拣货中
updateOrderInvoice(index,row) {
this.$confirm(‘确认修改当前选中记录状态为拣货中吗？‘, ‘提示‘, {
type: ‘warning‘
}).then(() => {
this.apiPost(‘/order/orderInvoice/‘+row.id+‘/updateStartPick‘,{}).then((res) => {
this.handelResponse(res, (data) => {
_g.toastMsg(‘success‘,‘修改成功‘);
this.loadOrderInvoiceList();
})
});
}).catch(() => {
});
},
//批量修改当前记录状态为拣货中
updateOrderInvoiceBatch(){
if(this.multipleSelection.length == 0){
this.$message.error(‘请至少选中一行数据‘);
return
}
let id = []
for(let i = 0;i < this.multipleSelection.length;i ++){
id[i] = this.multipleSelection[i].id
}
let obj = {
ids : id
}
console.log("aaabbb:"+JSON.stringify(obj));
this.$confirm(‘确认修改当前选中记录状态为拣货中吗？‘, ‘提示‘, {
type: ‘warning‘
}).then(() => {
this.apiPost(‘/order/orderInvoice/updateStartPickBatch‘,obj).then(res=>{
this.handelResponse(res, (data) => {
_g.toastMsg(‘success‘,‘修改成功‘);
this.loadOrderInvoiceList();
})
});
}).catch(() => {
});
},
},
mounted(){
this.loadOrderInvoiceList();
},
mixins: [http],
}
</script>
<style lang="scss" scoped>
.userView{
.buttonTop{
padding: 6px 10px 0;
background: #545c64;
height: 56px;
overflow: hidden;
border-bottom: 1px solid rgb(255, 208, 75);
color: #fff;
}
.main{
padding: 0 15px;
.center{
margin-top: 10px;
margin-bottom: 20px;
}
}
.input{
float: left;
margin: 8px 0;
margin-right: 32px;
}
}
.page {
/* width: 600px; */
margin: 10px auto 10px;
}
</style>
原文地址：https://www.cnblogs.com/mr-wuxiansheng/p/8861995.html
时间： 2024-10-09 20:38:21