Skip to content

E
ElectricitySheep
Commit b004312c authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent c47fd0fb
Hide whitespace changes
Inline Side-by-side
Showing with 1268 additions and 0 deletions
src/components/UserMan/distributionOrder.vue 0 → 100644
View file @ b004312c
<template>
<div class="orderList distributionOrder">
<div class="head-title">
订单列表
<el-button @click="dialogVisible=true" style="float:right;margin-top: -5px;" size="small" type="primary">批量导出</el-button>
</div>
<div class="content">
<div>
<span>下单时间：</span>
<el-date-picker
v-model="dateList"
@change="getList"
size="small"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<span style="margin-left:15px">所属平台：</span>
<el-select class="w120" @change="getList" style="margin-right: 10px;" v-model="msg.OrderSource" size="small" placeholder="请选择">
<el-option label="全部平台" :value="0"></el-option>
<el-option
v-for="item in platList"
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
<span style="margin-left:15px">配送方式：</span>
<el-select class="w120" @change="getList" style="margin-right: 10px;" v-model="msg.DeliveryMethod" size="small" placeholder="请选择">
<el-option label="全部订单" :value="0"></el-option>
<el-option
v-for="item in deliveryList"
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
<el-input @clear="getList" clearable style="margin-left:15px;width:300px" class="input-with-select" placeholder="请输入内容" v-model="msgVal" size="small">
<el-select class="pendSelect" @change="ChangeId" v-model="msgId" slot="prepend" placeholder="请选择">
<el-option
v-for="item in option"
:key="item.Id"
:label="item.name"
:value="item.Id">
</el-option>
</el-select>
</el-input>
</div>
<div>
<el-tabs style="margin-top:20px" v-model="activeName" @tab-click="handleClick">
<el-tab-pane :dataId="0" label="全部" name="first"></el-tab-pane>
<el-tab-pane v-for="item in orderTypeList" :key="item.Id" :dataId="item.Id" :label="item.Name"></el-tab-pane>
</el-tabs>
<div class="app-order-title">
<div style="width: 55%;">商品信息</div>
<div style="width: 20%;">实付金额</div>
<div style="width: 20%;">分销状态</div>
<div style="width: 20%;">分销情况</div>
</div>
<div v-loading="loading" class="app-order-list">
<el-card v-for="(item,index) in tableData" :key="index" class="app-order-item" shadow="never">
<div slot="header" class="clearfix">
<div flex="cross:center" class="app-order-head">
<div class="app-order-time">{{item.CreateDate}}</div>
<div class="app-order-user">
<span class="app-order-time">订单号：</span>{{item.OrderNo}}
</div>
<div flex="cross:center" class="app-order-user">
<img v-if="item.OrderSource==1" src="../../assets/img/userman/wx.png" alt="">
<span>{{item.UserName}}</span>
</div>
<div flex="dir:left wrap:wrap" class="app-order-offline">
<div class="express-send-box">
<span class="el-tag el-tag--small el-tag--light">{{item.DeliveryMethodName}}</span>
</div>
<el-tag v-if="item.PaymentTime==''" style="margin-left:5px" size="small" type="warning">未付款</el-tag>
<el-tag v-else style="margin-left:5px" size="small" type="warning">已付款</el-tag>
<el-tag v-if="item.DeliveryTime=='' && item.ReceivingTime==''" style="margin-left:5px" size="small" type="success">未发货</el-tag>
<el-tag v-if="item.DeliveryTime!='' && item.ReceivingTime==''" style="margin-left:5px" size="small" type="success">待发货</el-tag>
<el-tag v-if="item.ReceivingTime!=''" style="margin-left:5px" size="small" type="success">已收货</el-tag>
<el-tag v-if="item.ReceivingTime!=''" style="margin-left:5px" size="small" type="success">已完成</el-tag>
<el-tag v-if="item.OrderStatus==7" style="margin-left:5px" size="small" type="danger">已取消</el-tag>
</div>
</div>
</div>
<div class="app-order-body">
<div class="goods-item" style="width: 55%;">
<div v-for="(list,index2) in item.DetailList" :key="index2" class="goods">
<img :src="domainManager().ImageUrl+list.CoverImagePath" class="goods-image">
<div flex="dir:left">
<div class="goods-info">
<div class="goods-name">
<div class="app-ellipsis">
<div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">
<span class="el-tag el-tag--warning el-tag--mini el-tag--light is-hit" style="margin-right: 5px;">
{{list.OrderTypeName}}
</span>
{{list.GoodsName}}
</div>
</div>
</div>
<div style="margin-bottom: 24px;">
<span style="margin-right: 10px;">
规格：
<el-tag style="top: 5px;position: relative;margin-right: 5px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" size="mini">
{{list.Specification}}
</el-tag>
</span>
</div>
<div class="app-order-goods-price">
<span>货号：{{list.ProductCode}}</span>
</div>
</div>
<div flex="dir:left box:mean" style="width: 250px;">
<div flex="cross:center main:center">
<span>小计：￥{{list.Final_Price}}
</span>
</div>
<div flex="cross:center main:center">数量：x {{list.Number}}</div>
</div>
</div>
</div>
</div>
<div flex="cross:center" class="app-order-info" style="width: 15%;">
<div flex="dir:top">
<div>
<span style="font-size: 16px;">￥{{item.Income}}</span>
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
:content="'商品小计 '+ item.Income">
<img slot="reference" src="../../assets/img/userman/price.png" alt="">
</el-popover>
</div>
<div class="express-price"><span>
<span style="color: rgb(144, 147, 153);">(含运费￥{{item.FreightMoney}})
</span>
</span></div>
<div><el-tag effect="dark" type="warning" size="mini">{{item.PaymentWayName}}</el-tag></div>
</div>
</div>
<div flex="main:center cross:center" class="app-box-info" style="width: 10%;border-right: 1px solid #EBEEF5;">
<div>待结算</div>
</div>
<div flex="main:center cross:center" class="app-order-info" style="border-right: 0px; width: 15%;">
<div>
<div v-for="(list,index2) in item.OrderCommissionList" :key="index2" shadow="never" style="margin: 10px;">
<div>
<span v-if="list.Grade==0">自购返利</span>
<span v-if="list.Grade==1">一级佣金</span>
<span v-if="list.Grade==2">二级佣金</span>
<span v-if="list.Grade==3">三级佣金</span>
<span class="price">￥{{list.Commission}}</span>
</div>
<div>昵称：{{list.Name}}</div>
<div>姓名：{{list.UserName}}</div>
<div>手机：{{list.Mobile}}</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div>
<div flex="dir:left">
<div class="address-box">收货人: {{item.Consignee}} 电话：{{item.Mobile}} 地址：{{item.ShoppingAddress}}</div>
</div>
</div>
<div v-if="item.Remark!=''" class="seller-remark">商家备注：{{item.Remark}}</div>
</div>
</el-card>
<el-card v-if="tableData.length==0" class="app-order-item" shadow="never">
<div style="height:100px;line-height:100px;text-align:center">
暂无订单信息
</div>
</el-card>
</div>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<!-- 选择导出信息 -->
<el-dialog
title="选择导出信息"
:visible.sync="dialogVisible"
width="960px">
<el-form style="border: 1px solid #F0F2F7;" :model="addMsg" ref="addMsg" label-width="100px">
<div style="box-sizing: border-box;background-color: #F3F5F6;width: 100%;padding-left: 20px;height: 50px;line-height: 50px;">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</div>
<div style="margin: 15px 0;"></div>
<div style="padding: 10px 25px 20px;">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox style="margin-bottom:10px" v-for="city in cities" :label="city.Id" :key="city.Name">{{city.Name}}</el-checkbox>
</el-checkbox-group>
</div>
</el-form>
<div style="text-align:right;margin-top:20px">
<el-button size="small" type="primary" @click="Export">导出</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "orderList",
data(){
return{
orderStatusList:[],
checkAll: false,
checkedCities: [],
cities: [],
cityOptions: [],
isIndeterminate: true,
addMsg:{},
dialogVisible:false,
activeName:'first',
msgVal:'',
dateList:[],
msg:{
pageIndex:1,
pageSize:15,
OrderSource:0,
OrderType:0,
DeliveryMethod:0,
OrderId:0,
StartTime:'',
EndTime:'',
OrderStatus:0,
OrderNo:'',
UserName:'',
UserId:0,
GoodsName:'',
},
platList:[],
option:[
{Id:1,name:'订单号'},
{Id:2,name:'用户名'},
{Id:3,name:'用户ID'},
{Id:4,name:'商品名称'}
],
msgId:1,
ExpressList:[],
provinceList:[],
cityList:[],
areaList:[],
tableData:[],
total:0,
deliveryList:[],
orderTypeList:[],
loading:false,
checkfhList:[],
moresendDig:false,
moresendtips:'',
hszDig:false,
hszMsg:{},
}
},
created(){
this.getList();
this.getplat();
this.getDown();
this.getOrderStatus();
this.getDelivery();
this.getOrderType();
},
mounted(){},
methods:{
ChangeId(val){
let msgVal=this.msgVal;
if(val==1){
this.msg.OrderNo=msgVal;
this.msg.UserName='';
this.msg.UserId='';
this.msg.GoodsName='';
}
if(val==2){
this.msg.OrderNo='';
this.msg.UserName=msgVal;
this.msg.UserId='';
this.msg.GoodsName='';
}
if(val==3){
this.msg.OrderNo='';
this.msg.UserName='';
this.msg.UserId=msgVal;
this.msg.GoodsName='';
}
if(val==4){
this.msg.OrderNo='';
this.msg.UserName='';
this.msg.UserId='';
this.msg.GoodsName=msgVal;
}
this.getList();
},
Export(){
this.msg.ExcelEnumIds=this.checkedCities;
let msg = JSON.parse(JSON.stringify(this.msg));
this.JavaGetLocalFile(
"/api/order/GetDistributionOrdersToExcel",
msg,
"分销订单列表.xls"
);
},
getDown(){
this.cityOptions=[];
this.apipost("/api/order/GetDistributionOrdersExportEnumList",{}, res => {
this.cities=res.data.data;
let data=res.data.data;
data.forEach(item=>{
this.cityOptions.push(item.Id)
})
})
},
handleCheckAllChange(val) {
this.checkedCities = val ? this.cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
handleClick(val){
let dataId=val.$attrs.dataId;
this.msg.OrderStatus=dataId;
this.getList();
},
getList(){
if(!this.msgVal || this.msgVal==''){
this.msg.OrderNo='';
this.msg.UserName='';
this.msg.UserId=0;
this.msg.GoodsName='';
}
if(this.dateList && this.dateList.length>0){
this.msg.StartTime=this.dateList[0];
this.msg.EndTime=this.dateList[1];
}else{
this.msg.StartTime='';
this.msg.EndTime='';
}
this.loading=true;
this.apipost("/api/order/GetDistributionOrdersPageList", this.msg, res => {
this.loading=false;
if(res.data.resultCode==1){
this.total=res.data.data.count;
let pageData=res.data.data.pageData;
this.tableData=pageData;
}
})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getOrderStatus(){
this.apipost("/api/order/GetOrderStatusEnumList",{}, res => {
this.orderStatusList=res.data.data;
console.log("this.orderStatusList",this.orderStatusList)
})
},
getDelivery(){
this.apipost("/api/order/GetOrderDeliveryMethodEnumList",{}, res => {
this.deliveryList=res.data.data;
})
},
getOrderType(){
this.apipost("/api/order/GetOrderTypeEnumList",{}, res => {
this.orderTypeList=res.data.data;
})
},
getplat(){
this.apipost("/api/user/GetMemberUserSourceEnumList",{}, res => {
this.platList=res.data.data;
})
},
},
};
</script>
<style>
.orderList .pendSelect .el-input {
width: 100px;
}
.hszDigClass .el-dialog__body{
padding: 0 10px 20px 0;
}
.sendDigClass .el-dialog__body{
padding: 0 10px 10px 0;
}
.app-order-list .card-footer .seller-remark {
margin-top: 10px;
color: #E6A23C;
}
.app-send .el-table__header-wrapper th {
background-color: #f5f7fa;
}
.app-send .title-box .text {
background-color: #FEFAEF;
color: #E6A23C;
padding: 6px;
}
.app-send .title-box {
margin: 15px 0;
}
.app-order-list .app-order-item .el-button {
padding: 0;
}
.app-order-list .card-footer .address-box {
margin-right: 10px;
}
.app-order-list .card-footer {
background: #F3F5F6;
padding: 10px 20px;
}
.app-order-list .app-order-info > div {
width: 100%;
}
.app-order-icon {
margin-right: 5%;
margin-bottom: 10px;
cursor: pointer;
}
.app-order-body {
display: flex;
flex-wrap: nowrap;
}
.app-order-list .app-order-info {
display: flex;
align-items: center;
width: 15%;
text-align: center;
border-right: 1px solid #EBEEF5;
justify-content: center;
}
.app-order-list .el-card__body {
padding: 0;
}
.app-order-list .express-price {
height: 30px;
line-height: 30px;
}
.app-order-list .goods-item {
border-right: 1px solid #EBEEF5;
}
.app-order-list .app-order-info {
display: flex;
align-items: center;
width: 15%;
text-align: center;
border-right: 1px solid #EBEEF5;
}
.app-order-list .goods-item .goods .app-order-goods-price {
height: 24px;
margin-top: 10px;
position: absolute;
bottom: 20px;
left: 125px;
}
.app-order-list .goods-item .goods-info .goods-name {
margin-bottom: 5px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.app-order-list .goods-item .goods-info {
width: 50%;
margin-top: 5px;
}
.app-order-list .goods-image {
height: 90px;
width: 90px;
margin-right: 15px;
float: left;
}
.app-order-list .goods-item .goods {
position: relative;
padding: 20px;
min-height: 130px;
border-top: 1px solid #EBEEF5;
}
.app-order-list .goods-item .goods:first-of-type {
border-top: 0;
}
.orderList .app-order-list .app-order-item:hover .app-order-btnimg{
display: block;
}
.orderList .app-order-list .app-order-item:hover{
border: 1px solid #3399FF;
}
.orderList .app-order-btnimg {
position: absolute;
top: 20px;
right:25px;
color: #7C868D;
font-size: 18px;
padding: 0;
display: none;
}
.orderList .app-order-offline {
margin-left: 30px;
margin-top: -2px;
}
.orderList .app-order-user img {
height: 20px;
width: 20px;
display: block;
float: left;
border-radius: 50%;
margin-right: 10px;
}
.orderList .app-order-list .app-order-time {
color: #909399;
}
.orderList .app-order-user {
margin-left: 30px;
}
.orderList .app-order-list .app-order-time {
color: #909399;
}
.orderList .app-order-list .app-order-item .el-card__header {
padding: 0;
}
.orderList .app-order-list .app-order-item {
margin-top: 20px;
min-width: 750px;
}
.orderList .app-order-list .app-order-head {
padding: 20px;
background-color: #F3F5F6;
color: #303133;
min-width: 750px;
display: flex;
position: relative;
}
.orderList .app-order-title div {
text-align: center;
}
.orderList .app-order-title {
background-color: #F3F5F6;
height: 40px;
line-height: 40px;
display: flex;
min-width: 750px;
}
.orderList .content{
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>
src/components/orderMan/afterSalesOrder.vue 0 → 100644
View file @ b004312c
<template>
<div class="orderList afterSalesOrder">
<div class="head-title">
订单列表
<el-button @click="dialogVisible=true" style="float:right;margin-top: -5px;" size="small" type="primary">批量导出</el-button>
</div>
<div class="content">
<div>
<span>下单时间：</span>
<el-date-picker
v-model="dateList"
@change="getList"
size="small"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<span style="margin-left:15px">所属平台：</span>
<el-select class="w120" @change="getList" style="margin-right: 10px;" v-model="msg.OrderSource" size="small" placeholder="请选择">
<el-option label="全部平台" :value="0"></el-option>
<el-option
v-for="item in platList"
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
<span style="margin-left:15px">配送方式：</span>
<el-select class="w120" @change="getList" style="margin-right: 10px;" v-model="msg.DeliveryMethod" size="small" placeholder="请选择">
<el-option label="全部订单" :value="0"></el-option>
<el-option
v-for="item in deliveryList"
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
<el-input @clear="getList" clearable style="margin-left:15px;width:300px" class="input-with-select" placeholder="请输入内容" v-model="msgVal" size="small">
<el-select class="pendSelect" @change="ChangeId" v-model="msgId" slot="prepend" placeholder="请选择">
<el-option
v-for="item in option"
:key="item.Id"
:label="item.name"
:value="item.Id">
</el-option>
</el-select>
</el-input>
</div>
<div>
<el-tabs style="margin-top:20px" v-model="activeName" @tab-click="handleClick">
<el-tab-pane :dataId="0" label="全部" name="first"></el-tab-pane>
<el-tab-pane v-for="item in orderTypeList" :key="item.Id" :dataId="item.Id" :label="item.Name"></el-tab-pane>
</el-tabs>
<div class="app-order-title">
<div style="width: 55%;">商品信息</div>
<div style="width: 20%;">实付金额</div>
<div style="width: 20%;">分销状态</div>
<div style="width: 20%;">分销情况</div>
</div>
<div v-loading="loading" class="app-order-list">
<el-card v-for="(item,index) in tableData" :key="index" class="app-order-item" shadow="never">
<div slot="header" class="clearfix">
<div flex="cross:center" class="app-order-head">
<div class="app-order-time">{{item.CreateDate}}</div>
<div class="app-order-user">
<span class="app-order-time">订单号：</span>{{item.OrderNo}}
</div>
<div flex="cross:center" class="app-order-user">
<img v-if="item.OrderSource==1" src="../../assets/img/userman/wx.png" alt="">
<span>{{item.UserName}}</span>
</div>
<div flex="dir:left wrap:wrap" class="app-order-offline">
<div class="express-send-box">
<span class="el-tag el-tag--small el-tag--light">{{item.DeliveryMethodName}}</span>
</div>
<el-tag v-if="item.PaymentTime==''" style="margin-left:5px" size="small" type="warning">未付款</el-tag>
<el-tag v-else style="margin-left:5px" size="small" type="warning">已付款</el-tag>
<el-tag v-if="item.DeliveryTime=='' && item.ReceivingTime==''" style="margin-left:5px" size="small" type="success">未发货</el-tag>
<el-tag v-if="item.DeliveryTime!='' && item.ReceivingTime==''" style="margin-left:5px" size="small" type="success">待发货</el-tag>
<el-tag v-if="item.ReceivingTime!=''" style="margin-left:5px" size="small" type="success">已收货</el-tag>
<el-tag v-if="item.ReceivingTime!=''" style="margin-left:5px" size="small" type="success">已完成</el-tag>
<el-tag v-if="item.OrderStatus==7" style="margin-left:5px" size="small" type="danger">已取消</el-tag>
</div>
</div>
</div>
<div class="app-order-body">
<div class="goods-item" style="width: 55%;">
<div v-for="(list,index2) in item.DetailList" :key="index2" class="goods">
<img :src="domainManager().ImageUrl+list.CoverImagePath" class="goods-image">
<div flex="dir:left">
<div class="goods-info">
<div class="goods-name">
<div class="app-ellipsis">
<div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">
<span class="el-tag el-tag--warning el-tag--mini el-tag--light is-hit" style="margin-right: 5px;">
{{list.OrderTypeName}}
</span>
{{list.GoodsName}}
</div>
</div>
</div>
<div style="margin-bottom: 24px;">
<span style="margin-right: 10px;">
规格：
<el-tag style="top: 5px;position: relative;margin-right: 5px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" size="mini">
{{list.Specification}}
</el-tag>
</span>
</div>
<div class="app-order-goods-price">
<span>货号：{{list.ProductCode}}</span>
</div>
</div>
<div flex="dir:left box:mean" style="width: 250px;">
<div flex="cross:center main:center">
<span>小计：￥{{list.Final_Price}}
</span>
</div>
<div flex="cross:center main:center">数量：x {{list.Number}}</div>
</div>
</div>
</div>
</div>
<div flex="cross:center" class="app-order-info" style="width: 15%;">
<div flex="dir:top">
<div>
<span style="font-size: 16px;">￥{{item.Income}}</span>
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
:content="'商品小计 '+ item.Income">
<img slot="reference" src="../../assets/img/userman/price.png" alt="">
</el-popover>
</div>
<div class="express-price"><span>
<span style="color: rgb(144, 147, 153);">(含运费￥{{item.FreightMoney}})
</span>
</span></div>
<div><el-tag effect="dark" type="warning" size="mini">{{item.PaymentWayName}}</el-tag></div>
</div>
</div>
<div flex="main:center cross:center" class="app-box-info" style="width: 10%;border-right: 1px solid #EBEEF5;">
<div>待结算</div>
</div>
<div flex="main:center cross:center" class="app-order-info" style="border-right: 0px; width: 15%;">
<div>
<div v-for="(list,index2) in item.OrderCommissionList" :key="index2" shadow="never" style="margin: 10px;">
<div>
<span v-if="list.Grade==0">自购返利</span>
<span v-if="list.Grade==1">一级佣金</span>
<span v-if="list.Grade==2">二级佣金</span>
<span v-if="list.Grade==3">三级佣金</span>
<span class="price">￥{{list.Commission}}</span>
</div>
<div>昵称：{{list.Name}}</div>
<div>姓名：{{list.UserName}}</div>
<div>手机：{{list.Mobile}}</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div>
<div flex="dir:left">
<div class="address-box">收货人: {{item.Consignee}} 电话：{{item.Mobile}} 地址：{{item.ShoppingAddress}}</div>
<button v-if="item.OrderStatus==2" @click="ExitshAdress(item)" type="button" class="el-button el-button--text is-circle"><i class="el-icon-edit"></i></button>
</div>
</div>
<div v-if="item.Remark!=''" class="seller-remark">商家备注：{{item.Remark}}</div>
</div>
</el-card>
<el-card v-if="tableData.length==0" class="app-order-item" shadow="never">
<div style="height:100px;line-height:100px;text-align:center">
暂无订单信息
</div>
</el-card>
</div>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
<!-- 选择导出信息 -->
<el-dialog
title="选择导出信息"
:visible.sync="dialogVisible"
width="960px">
<el-form style="border: 1px solid #F0F2F7;" :model="addMsg" ref="addMsg" label-width="100px">
<div style="box-sizing: border-box;background-color: #F3F5F6;width: 100%;padding-left: 20px;height: 50px;line-height: 50px;">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</div>
<div style="margin: 15px 0;"></div>
<div style="padding: 10px 25px 20px;">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox style="margin-bottom:10px" v-for="city in cities" :label="city.Id" :key="city.Name">{{city.Name}}</el-checkbox>
</el-checkbox-group>
</div>
</el-form>
<div style="text-align:right;margin-top:20px">
<el-button size="small" type="primary" @click="Export">导出</el-button>
</div>
</el-dialog>
<!-- 修改收货地址 -->
<el-dialog title="修改收货地址" :visible.sync="shDig" width="600px">
<el-form :model="shMsg" :rules="shMsgrule" ref="shMsg" label-width="80px">
<el-form-item label="收件人" prop="Consignee">
<el-input size="small" v-model="shMsg.Consignee"></el-input>
</el-form-item>
<el-form-item label="电话" prop="Mobile">
<el-input type="number" size="small" v-model="shMsg.Mobile"></el-input>
</el-form-item>
<el-form-item label="所在区域" prop="Province">
<el-select size="small" @change="shMsg.City='',getCity(shMsg.Province)" v-model="shMsg.Province" style="width:144px" filterable placeholder="请选择">
<el-option
v-for="item in provinceList"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
<el-select size="small" @change="shMsg.District='',getArea(shMsg.City)" v-model="shMsg.City" style="width:144px" filterable placeholder="请选择">
<el-option
v-for="item in cityList"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
<el-select size="small" v-model="shMsg.District" style="width:144px" filterable placeholder="请选择">
<el-option
v-for="item in areaList"
:key="item.ID"
:label="item.Name"
:value="item.ID">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="详细地址" prop="ShippingAddress">
<el-input size="small" v-model="shMsg.ShippingAddress"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="shDig = false">取 消</el-button>
<el-button size="small" type="primary" @click="shsubmitForm('shMsg')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "orderList",
data(){
return{
orderStatusList:[],
checkAll: false,
checkedCities: [],
cities: [],
cityOptions: [],
isIndeterminate: true,
addMsg:{},
dialogVisible:false,
activeName:'first',
msgVal:'',
dateList:[],
msg:{
pageIndex:1,
pageSize:15,
OrderSource:0,
OrderType:0,
DeliveryMethod:0,
OrderId:0,
StartTime:'',
EndTime:'',
OrderStatus:0,
OrderNo:'',
UserName:'',
UserId:0,
GoodsName:'',
},
platList:[],
option:[
{Id:1,name:'订单号'},
{Id:2,name:'用户名'},
{Id:3,name:'用户ID'},
{Id:4,name:'商品名称'}
],
msgId:1,
ExpressList:[],
provinceList:[],
cityList:[],
areaList:[],
tableData:[],
total:0,
deliveryList:[],
orderTypeList:[],
loading:false,
checkfhList:[],
moresendDig:false,
moresendtips:'',
hszDig:false,
hszMsg:{},
shDig:false,
shMsg:{
OrderId:0,
Consignee:'',
Mobile:'',
Province:'',
City:'',
District:'',
ShippingAddress:'',
},
shMsgrule:{
Province: [
{ required: true, message: '请选择省', trigger: 'change' }
],
ShippingAddress: [
{ required: true, message: '请输入详细地址', trigger: 'blur' }
],
Mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
Consignee: [
{ required: true, message: '请输入收件人', trigger: 'blur' }
],
},
}
},
created(){
this.getList();
this.getplat();
this.getDown();
this.getOrderStatus();
this.getDelivery();
this.getOrderType();
},
mounted(){},
methods:{
// 修改收货地址
ExitshAdress(item){
this.shDig=true;
this.shMsg={
OrderId:item.OrderId,
Consignee:item.Consignee,
Mobile:item.Mobile,
Province:item.Province,
City:item.City,
District:item.District,
ShippingAddress:item.ShippingAddress,
}
this.getCity(item.Province);
this.getArea(item.City);
},
ChangeId(val){
let msgVal=this.msgVal;
if(val==1){
this.msg.OrderNo=msgVal;
this.msg.UserName='';
this.msg.UserId='';
this.msg.GoodsName='';
}
if(val==2){
this.msg.OrderNo='';
this.msg.UserName=msgVal;
this.msg.UserId='';
this.msg.GoodsName='';
}
if(val==3){
this.msg.OrderNo='';
this.msg.UserName='';
this.msg.UserId=msgVal;
this.msg.GoodsName='';
}
if(val==4){
this.msg.OrderNo='';
this.msg.UserName='';
this.msg.UserId='';
this.msg.GoodsName=msgVal;
}
this.getList();
},
Export(){
this.msg.ExcelEnumIds=this.checkedCities;
let msg = JSON.parse(JSON.stringify(this.msg));
this.JavaGetLocalFile(
"/api/order/GetDistributionOrdersToExcel",
msg,
"分销订单列表.xls"
);
},
getDown(){
this.cityOptions=[];
this.apipost("/api/order/GetDistributionOrdersExportEnumList",{}, res => {
this.cities=res.data.data;
let data=res.data.data;
data.forEach(item=>{
this.cityOptions.push(item.Id)
})
})
},
handleCheckAllChange(val) {
this.checkedCities = val ? this.cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
handleClick(val){
let dataId=val.$attrs.dataId;
this.msg.OrderStatus=dataId;
this.getList();
},
getList(){
if(!this.msgVal || this.msgVal==''){
this.msg.OrderNo='';
this.msg.UserName='';
this.msg.UserId=0;
this.msg.GoodsName='';
}
if(this.dateList && this.dateList.length>0){
this.msg.StartTime=this.dateList[0];
this.msg.EndTime=this.dateList[1];
}else{
this.msg.StartTime='';
this.msg.EndTime='';
}
this.loading=true;
this.apipost("/api/order/GetDistributionOrdersPageList", this.msg, res => {
this.loading=false;
if(res.data.resultCode==1){
this.total=res.data.data.count;
let pageData=res.data.data.pageData;
this.tableData=pageData;
}
})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getOrderStatus(){
this.apipost("/api/order/GetOrderStatusEnumList",{}, res => {
this.orderStatusList=res.data.data;
})
},
getDelivery(){
this.apipost("/api/order/GetOrderDeliveryMethodEnumList",{}, res => {
this.deliveryList=res.data.data;
})
},
getOrderType(){
this.apipost("/api/order/GetOrderTypeEnumList",{}, res => {
this.orderTypeList=res.data.data;
})
},
getplat(){
this.apipost("/api/user/GetMemberUserSourceEnumList",{}, res => {
this.platList=res.data.data;
})
},
getArea(val){
this.apipost("/api/Destination/GetChildList",{Id:val}, res => {
this.areaList=res.data.data;
})
},
getCity(val){
this.apipost("/api/Destination/GetChildList",{Id:val}, res => {
this.cityList=res.data.data;
if(this.cityList.length>0){
this.getArea(this.cityList[0].ID)
}
})
},
getProvince(){
this.apipost("/api/Destination/GetChildList",{Id:2}, res => {
this.provinceList=res.data.data;
if(this.provinceList.length>0){
this.getCity(this.provinceList[0].ID)
}
})
},
},
};
</script>
<style>
.orderList .pendSelect .el-input {
width: 100px;
}
.hszDigClass .el-dialog__body{
padding: 0 10px 20px 0;
}
.sendDigClass .el-dialog__body{
padding: 0 10px 10px 0;
}
.app-order-list .card-footer .seller-remark {
margin-top: 10px;
color: #E6A23C;
}
.app-send .el-table__header-wrapper th {
background-color: #f5f7fa;
}
.app-send .title-box .text {
background-color: #FEFAEF;
color: #E6A23C;
padding: 6px;
}
.app-send .title-box {
margin: 15px 0;
}
.app-order-list .app-order-item .el-button {
padding: 0;
}
.app-order-list .card-footer .address-box {
margin-right: 10px;
}
.app-order-list .card-footer {
background: #F3F5F6;
padding: 10px 20px;
}
.app-order-list .app-order-info > div {
width: 100%;
}
.app-order-icon {
margin-right: 5%;
margin-bottom: 10px;
cursor: pointer;
}
.app-order-body {
display: flex;
flex-wrap: nowrap;
}
.app-order-list .app-order-info {
display: flex;
align-items: center;
width: 15%;
text-align: center;
border-right: 1px solid #EBEEF5;
justify-content: center;
}
.app-order-list .el-card__body {
padding: 0;
}
.app-order-list .express-price {
height: 30px;
line-height: 30px;
}
.app-order-list .goods-item {
border-right: 1px solid #EBEEF5;
}
.app-order-list .app-order-info {
display: flex;
align-items: center;
width: 15%;
text-align: center;
border-right: 1px solid #EBEEF5;
}
.app-order-list .goods-item .goods .app-order-goods-price {
height: 24px;
margin-top: 10px;
position: absolute;
bottom: 20px;
left: 125px;
}
.app-order-list .goods-item .goods-info .goods-name {
margin-bottom: 5px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.app-order-list .goods-item .goods-info {
width: 50%;
margin-top: 5px;
}
.app-order-list .goods-image {
height: 90px;
width: 90px;
margin-right: 15px;
float: left;
}
.app-order-list .goods-item .goods {
position: relative;
padding: 20px;
min-height: 130px;
border-top: 1px solid #EBEEF5;
}
.app-order-list .goods-item .goods:first-of-type {
border-top: 0;
}
.orderList .app-order-list .app-order-item:hover .app-order-btnimg{
display: block;
}
.orderList .app-order-list .app-order-item:hover{
border: 1px solid #3399FF;
}
.orderList .app-order-btnimg {
position: absolute;
top: 20px;
right:25px;
color: #7C868D;
font-size: 18px;
padding: 0;
display: none;
}
.orderList .app-order-offline {
margin-left: 30px;
margin-top: -2px;
}
.orderList .app-order-user img {
height: 20px;
width: 20px;
display: block;
float: left;
border-radius: 50%;
margin-right: 10px;
}
.orderList .app-order-list .app-order-time {
color: #909399;
}
.orderList .app-order-user {
margin-left: 30px;
}
.orderList .app-order-list .app-order-time {
color: #909399;
}
.orderList .app-order-list .app-order-item .el-card__header {
padding: 0;
}
.orderList .app-order-list .app-order-item {
margin-top: 20px;
min-width: 750px;
}
.orderList .app-order-list .app-order-head {
padding: 20px;
background-color: #F3F5F6;
color: #303133;
min-width: 750px;
display: flex;
position: relative;
}
.orderList .app-order-title div {
text-align: center;
}
.orderList .app-order-title {
background-color: #F3F5F6;
height: 40px;
line-height: 40px;
display: flex;
min-width: 750px;
}
.orderList .content{
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment