归档+修改订单支付状态

src/api/omsOrder.ts

@@ -216,4 +216,12 @@ export const batchItem:any = (data:any) => {
 		method:'POST',
 		data:data
 	})
+}  
+//修改支付状态
+export const updateStatus:any = (data:any) => {
+	return request({
+		url:'/omsOrder/omsOrderPay/updateStatus',
+		method:'POST',
+		params:data
+	})
 }  

src/api/omsOrderHistory.ts

@@ -0,0 +1,18 @@
+import request from '@/benyun/utils/request'
+//查询
+export function query(params:any,data:any){
+	return request({
+		url: '/omsOrder/omsOrderHistory/query',
+		method: 'POST',
+    params:params,
+		data: data
+	})
+}
+//查询单条数据
+export function single(params:any){
+	return request({
+		url: '/omsOrder/omsOrderHistory/single',
+		method: 'GET',
+    params:params
+	})
+}

src/views/oms/order/components/addOrder.vue

@@ -22,7 +22,7 @@
               {{ getFromText(value.sourceFrom) }}
             </template>
             <template v-slot:labels="{value}">
-              <el-input placeholder="请选择标签" v-model="value.labels" :disabled="orderValue.id" size="small" class="myinpuy-with-select" clearable>
+              <el-input placeholder="请选择标签" v-model="value.labels" :disabled="orderValue.id?true:false" size="small" class="myinpuy-with-select" clearable>
                 <el-button slot="append" v-if="!orderValue.id" icon="el-icon-more" @click="showLabels"></el-button>
               </el-input>
             </template>
@@ -44,8 +44,11 @@
         <el-collapse-item title="订单支付情况" name="4" class="add-order-item" v-if="orderValue.id">
           <div class="pay-row" v-if="orderValue.status != 'Split' && orderValue.status != 'Merged' && orderValue.status != 'Cancelled'">
             <el-button type="text" v-if="!orderValue.pays || orderValue.pays.length == 0">快速支付</el-button>
-            <el-button type="text" v-if="!showPay" @click="showPay = true">添加手工支付</el-button>
-            <el-button v-else icon="el-icon-close" size="mini" circle @click="showPay = false"></el-button>
+            <div class="add-pay-btn">
+              <el-button type="text" v-if="!showPay" @click="showPay = true">添加手工支付</el-button>
+              <el-button v-else icon="el-icon-close" size="mini" circle @click="showPay = false"></el-button>
+            </div>
+            
           </div>
           <by-form v-if="showPay" :propConfig="payConfig" ref="payform"></by-form>
           <div class="pay-row" v-if="showPay && orderValue.status != 'Split' && orderValue.status != 'Merged' && orderValue.status != 'Cancelled'">
@@ -57,6 +60,13 @@
               <el-descriptions-item label="金额">{{item.amount}}</el-descriptions-item>
               <el-descriptions-item label="支付日期">{{item.payDate}}</el-descriptions-item>
               <el-descriptions-item label="状态">
+                <div class="payHandle" v-if="item.status == 'WaitConfirm'">
+                  <span @click="payStatusHandle(item,'Confirmed')">审核通过</span>
+                  <span @click="payStatusHandle(item,'Invalid')">作废</span>
+                </div>
+                <div class="payHandle" v-if="item.status == 'Confirmed'">
+                  <span @click="payStatusHandle(item,'WaitConfirm')">取消审核</span>
+                </div>
                 <el-tag v-if="item.status == 'Invalid'" type="info" size="mini">已失效</el-tag>
               </el-descriptions-item>
             </el-descriptions>
@@ -158,7 +168,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { addOrder,saveBaseOrder,single,delItem,addPay,batchItem } from '@/api/omsOrder'
+import { addOrder,saveBaseOrder,single,delItem,addPay,updateStatus } from '@/api/omsOrder'
 import { add,multiply,subtract,divide } from '@/benyun/utils/accuracy'
 import AddProductModal from "./addProductModal.vue";
 import EditProductModal from "./editProductModal.vue";
@@ -885,6 +895,24 @@ export default class AddOrder extends Vue {
     this.$emit('handleSuccess');
     this.getData();
   }
+  //修改支付单号[]
+  payStatusHandle(item:any,status:string){
+    this.load = true;
+    updateStatus({id:item.id, status}).then((res:any)=>{
+      this.load = false;
+      if(res && res.code == 200){
+        this.$message({
+          message:'操作成功！',
+          type:'success'
+        })
+        item.status = status;
+        this.$forceUpdate();
+        this.$emit('handleSuccess');
+      }
+    }).catch(()=>{
+      this.load = false;
+    })
+  }
   //添加手工支付
   addPay(){
     (this.$refs.payform as any).validate({noMsg:true}).then(()=>{
@@ -1495,6 +1523,7 @@ export default class AddOrder extends Vue {
 .pay-row{
   display: flex;
   justify-content: flex-end;
+  padding-bottom: 8px;
 }
 .order-step{
   padding-bottom: 8px;
@@ -1516,6 +1545,24 @@ export default class AddOrder extends Vue {
   justify-content: flex-end;
   padding-bottom: 8px;
 }
+.add-pay-btn{
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+}
+.payHandle{
+  display: flex;
+  align-items: center;
+  >span{
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #198cf8;
+  }
+  >span:hover{
+    text-decoration: underline;
+  }
+}
 </style>
 
 <style lang="scss">

src/views/oms/order/components/inputSelect.vue

@@ -13,7 +13,7 @@ export default class InputSelect extends Vue {
   value:any='';
   select='';
   placeholder='';
-
+  format:any=''
   @Prop()
   options!:Array<any>
 
@@ -21,6 +21,7 @@ export default class InputSelect extends Vue {
     if(this.options){
       this.select = this.options[0].value;
       this.placeholder = this.options[0].label;
+      this.format = this.options[0].format;
     }
   }
 
@@ -31,14 +32,20 @@ export default class InputSelect extends Vue {
   change(v:any){
     for(const item of this.options){
       if(item.value == v){
-        this.placeholder = item.label
+        this.placeholder = item.label;
+        this.format = item.format;
       }
     }
   }
   input(v:any){
+    if(this.format && v){
+      console.log(this.format.test(v));
+      v=v.replace(this.format,'');
+      console.log(v);
+    }
     let obj:any={};
-    obj[this.select] = v
-    this.$emit('input',obj)
+    obj[this.select] = v;
+    this.$emit('input',obj);
   }
 }
 </script>
@@ -56,5 +63,9 @@ export default class InputSelect extends Vue {
     background-color: #fff !important;
     width: 110px !important;
   }  
+  .el-input__inner[type=number]{
+    padding-left: 15px !important;
+  }
 }
+
 </style>

src/views/oms/order/index.vue

@@ -261,7 +261,8 @@ export default class Order extends Vue {
   }
   myOptions=[{
     label:'内部订单号',
-    value:'orderId'
+    value:'orderId',
+    format:/^\d*(,\d*)*$/
   }]
   outLineOptions=[{
     label:'线上订单号',
@@ -854,10 +855,14 @@ export default class Order extends Vue {
   }
   parameChange(parames:any){
     for(const key in parames){
-      if(this.value[key]){
-        this.value[key] = parames[key]
+      if(parames[key]){
+        if(this.value[key]){
+          this.value[key] = parames[key].split(',')
+        }else{
+          Vue.set(this.value, key, parames[key].split(','));
+        }
       }else{
-        Vue.set(this.value, key, parames[key]);
+        delete this.value[key]
       }
     }
   }

src/views/oms/orderHistory/components/detailOrder.vue

@@ -0,0 +1,673 @@
+<template>
+  <vxe-modal v-model="value" id="addOrder" @show="show" width="70%" height="80%" show-zoom resize transfer @hide="hide" v-loading="load">
+    <template #title>
+      <span>创建新订单</span>
+    </template>
+    <template #default>
+      <div class="order-step" v-if="orderValue.id">
+        <el-steps :active="stepActive" align-center finish-status="success" v-if="stepCon.indexOf(orderValue.status) >= 0" size="mini">
+          <el-step title="1.待付款"></el-step>
+          <el-step title="2.已付款待审核"></el-step>
+          <el-step title="3.已客审待财审"></el-step>
+          <el-step title="4.等供销商|外仓发货"></el-step>
+          <el-step title="5.已发货"></el-step>
+        </el-steps>
+        <div class="other" v-else>{{ stepTypeName(orderValue.status) }}</div>
+      </div>
+      <el-collapse v-model="activeNames">
+        <el-collapse-item title="基本信息" name="1" class="add-order-item">
+          <by-form :propConfig="config" ref="baseform">
+            <template v-slot:sourceFrom_desc='{ value }'>
+              {{ getFromText(value.sourceFrom) }}
+            </template>
+           
+          </by-form>
+        </el-collapse-item>
+        <el-collapse-item title="买家信息" name="2" class="add-order-item">
+          <by-form :propConfig="config2" ref="infoform">
+            <template v-slot:receiverProvinceCode_desc='{ value }'>
+              {{ value.receiverProvince + '-' + value.receiverCity + '-' + value.receiverDistrict + (value.receiverTown?'-'+value.receiverTown:'') }}
+            </template>
+          </by-form>
+        </el-collapse-item>
+        <el-collapse-item title="发票信息" name="5" class="add-order-item">
+          <by-form :propConfig="invoicesConfig" ref="invoicesform"></by-form>
+        </el-collapse-item>
+
+        <el-collapse-item title="订单支付情况" name="4" class="add-order-item" >
+          <div class="pay-info">
+            <el-descriptions v-for="(item,index) of orderValue.pays" :key="index" :title="item.payment" size="mini" :column="4">
+              <el-descriptions-item label="单号">{{item.outerPayId}}</el-descriptions-item>
+              <el-descriptions-item label="金额">{{item.amount}}</el-descriptions-item>
+              <el-descriptions-item label="支付日期">{{item.payDate}}</el-descriptions-item>
+              <el-descriptions-item label="状态">
+                <el-tag v-if="item.status == 'Invalid'" type="info" size="mini">已失效</el-tag>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+          
+        </el-collapse-item>
+        <el-collapse-item title="商品订单" name="3" class="add-order-item">
+          <div class="addProductTool">
+            <div></div>
+            <div class="preferential">
+              <span>{{ freeAmount }}</span>
+            </div>
+          </div>
+          <by-table :propConfig="tableConfig" ref="table">
+            <template v-slot:name='{ row }'>
+              <div class="product-cont">
+                <div class="product-name">{{ row.name }} <el-tag v-if="row.isGift == 1" size="mini" type="success">赠</el-tag></div>
+              </div>
+            </template>
+            
+          </by-table>
+          <div class="product-row">
+            <div class="p-left">数量：{{ num }}</div>
+            <div class="p-right">
+              <div class="amount-title">商品成交总金额：</div>
+              <div class="amount-price">¥{{ productTotal }}</div>
+            </div>
+          </div>
+          <div class="product-row">
+            <div class="p-left"></div>
+            <div class="p-right">
+              <div class="amount-title">抵扣金额：</div>
+              <div class="amount-price">¥{{orderValue.freeAmount?orderValue.freeAmount:'0.00'}}</div>
+            </div>
+          </div>
+          <div class="product-row">
+            <div class="p-left"></div>
+            <div class="p-right">
+              <div class="amount-title">运费：</div>
+              <div class="amount-price">¥{{orderValue.freight?orderValue.freight:'0.00'}}</div>
+            </div>
+          </div>
+          <div class="product-row">
+            <div class="p-left"></div>
+            <div class="p-right">
+              <div class="amount-title">应付总金额：</div>
+              <div class="amount-price" style="color:#F00; font-size: 14px;">¥{{orderValue.payAmount?orderValue.payAmount:'0.00'}}</div>
+            </div>
+          </div>
+          <div class="product-row" v-if="orderValue.paidAmount">
+            <div class="p-left"></div>
+            <div class="p-right">
+              <div class="amount-title">实付总金额：</div>
+              <div class="amount-price" style="color:#F00; font-size: 14px;">¥{{orderValue.paidAmount?orderValue.paidAmount:'0.00'}}</div>
+            </div>
+          </div>
+        </el-collapse-item>
+       
+      </el-collapse>
+      
+    </template>
+  </vxe-modal>
+  
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { single,delItem,addPay,batchItem } from '@/api/omsOrder'
+import { add,multiply,subtract,divide } from '@/benyun/utils/accuracy'
+@Component({components:{}})
+export default class DetailOrder extends Vue {
+  value=false;
+  num:any=0;
+  load = false;
+  freeAmount="";
+  productTotal:any=0;
+  userInfo:any='';//用户信息
+  orderValue:any={}; //新增订单值
+  stepActive:number=0;
+  stepCon=['WaitPay','WaitConfirm','WaitFConfirm','WaitOuterSent','Sent']
+  activeNames:Array<any> =['1','2','3','4','5','save'];
+  sourceFrom:any={
+    'ERP':'手工下单',
+    'COPY':'复制',
+    'MERGE':'合并',
+    'SPLIT':'拆分；拆分还原',
+    'MOBILE':'导入',
+    'drp-s':'供销推送',
+    'drp-d':'分销推送',
+    'KWAISHOP':'快手；微商城',
+    'PINDUODUO':'拼多多',
+    'TOUTIAOFXG':'头条放心购',
+    'JUSHUITAN':'聚水潭'
+  }
+  config:any={
+    attr:{
+      showType:'desc',
+      size:'small',
+      itemCount:4,
+    },
+    columns:[
+      [{
+        span:6,
+        label:'店铺名称',
+        prop:'shopName'
+      },{
+        span:6,
+        label:'线上订单',
+        prop:'sourceId'
+      },{
+        span:6,
+        label:'订单日期',
+        prop:'orderDate'
+      }],
+      [{
+        span:6,
+        label:'运费',
+        prop:'freight'
+      },{
+        span:6,
+        label:'快递公司',
+        prop:'logisticsCompany'
+      },{
+        span:6,
+        label:'业务员',
+        prop:'createBy'
+      }],
+      [{
+        span:6,
+        label:'订单来源',
+        prop:'sourceFrom',
+        descSlot:true,
+        colspan:2
+      },{
+        label:'标签',
+        prop:'labels',
+        span:12,
+        colspan:2,
+        slot:true
+      }],
+      [{
+        label:'线下备注',
+        prop:'note',
+        colspan:2
+      }],
+      [{
+        label:'买家留言',
+        prop:'buyerMessage',
+        colspan:2
+      }],
+      [{
+        label:'卖家备注',
+        prop:'remark',
+        colspan:4
+      }]
+    ]
+  }
+  config2:any={
+    attr:{
+      size:'small',
+      itemCount:4
+    },
+    columns:[
+      [{
+        span:6,
+        label:'买家账号',
+        prop:'buyerId',
+        component:'by-input',
+        compConfig:{}
+      },{
+        span:6,
+        label:'收货人',
+        prop:'receiverName',
+        component:'by-input',
+        rules:[{
+          required: true, message: '收货人不能为空', trigger: 'blur'
+        }],
+        compConfig:{
+          attr:{
+            placeholder:'请输入收货人',
+            clearable:true
+          }
+        }
+      }],
+      [{
+        span:24,
+        label:'收货地址',
+        // slot:true,
+        prop:'receiverProvinceCode',
+        component:'by-area',
+        colspan:2,
+        descSlot:true,
+        compConfig:{
+          attr:{
+            province:'receiverProvince', //省
+            provinceCode:'receiverProvinceCode', //省编码
+            city:'receiverCity',   //市
+            cityCode:'receiverCityCode',  //市编码
+            county:'receiverDistrict',  //县/区
+            countyCode:'receiverDistrictCode',   //县/区编码
+            townCode:'receiverTownCode',
+            town:'receiverTown',
+            // show:'county'
+          }
+        }
+      }],
+      [{
+        span:24,
+        label:'详细地址',
+        prop:'receiverAddress',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入详细地址',
+            clearable:true
+          }
+        }
+      }],
+      [{
+        span:6,
+        label:'手机',
+        prop:'receiverMobile',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入手机',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'电话',
+        prop:'receiverPhone',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入电话',
+            clearable:true
+          }
+        }
+      },{
+        span:6,
+        label:'邮编',
+        prop:'receiverZip',
+        component:'by-input',
+        compConfig:{
+          attr:{
+            placeholder:'请输入邮编',
+            clearable:true
+          }
+        }
+      }]
+    ]
+  }
+  tableConfig:any={
+    attr:{
+      size:'mini',
+      align:'center',
+    },
+    columns:[{
+      title:'名称',
+      field:'name',
+      slot:true,
+      width:300
+    },{
+      title:'数量',
+      field:'qty',
+      width:100,
+      slot:true
+    },{
+      title:'单价',
+      field:'price',
+      width:100,
+      slot:true
+    },{
+      title:'原价',
+      field:'basePrice',
+      width:100
+    },{
+      title:'成交金额',
+      field:'amount',
+      width:100
+    }]
+  }
+  invoicesConfig:any={
+    attr:{
+      showType:'desc',
+      size:'small',
+      itemCount:4,
+    },
+    columns:[
+      [{
+        span:6,
+        label:'发票类型',
+        prop:'type'
+      },{
+        span:6,
+        label:'发票抬头',
+        prop:'title'
+      },{
+        span:6,
+        label:'发票税号',
+        prop:'taxNo'
+      }],
+      [{
+        span:6,
+        label:'发票地址',
+        prop:'address'
+      },{
+        span:6,
+        label:'专票银行',
+        prop:'bank'
+      },{
+        span:6,
+        label:'发票电话',
+        prop:'phone'
+      }],
+      [{
+        span:6,
+        label:'专票账户',
+        prop:'account'
+      },{
+        span:6,
+        label:'专票邮箱',
+        prop:'email'
+      },{
+        span:6,
+        label:'专票人',
+        prop:'userName'
+      }],
+      [{
+        span:6,
+        label:'专票电话',
+        prop:'userPhone'
+      },{
+        span:12,
+        label:'专票地址',
+        prop:'userAddress'
+      }]
+    ]
+  }
+  //订单来源转换文字信息
+  getFromText(f:any){
+    let t='';
+    if(f){
+      let arr:Array<any>=f.split(',');
+      for(const item of arr){
+        if(this.sourceFrom[item]){
+          if(t){
+            t = t + ' , ' + this.sourceFrom[item]
+          }else{
+            t = this.sourceFrom[item]
+          }
+        }
+      }
+    }
+    return t;
+  }
+  stepTypeName(n:string){
+    let t = '';
+    if(n == 'Merged'){
+      t = '被合并'
+    }
+    if(n == 'Question'){
+      t = '异常'
+    }
+    if(n == 'Split'){
+      t = '被拆分'
+    }
+    if(n == 'Cancelled'){
+      t = '已取消'
+    }
+    return t;
+  }
+  setShow(v:boolean){
+    this.value = v;
+  }
+  setDetail(data:any){
+    this.orderValue = data;
+  }
+  created(){
+    this.userInfo = this.$store.getters.userInfo;
+  }
+  //获取数据
+  getData(){
+    if(!this.orderValue.id){
+      return
+    }
+    this.load = true;
+    single({
+      id:this.orderValue.id
+    }).then((res:any) => {
+      this.load = false;
+      this.orderValue = res.data;
+      this.show();
+      this.$forceUpdate();
+    }).catch(()=>{
+      this.load = false
+    })
+  }
+  show(){
+    let data = this.orderValue;
+    this.freeAmount = this.orderValue.freeAmount;
+    //基本信息
+    let info:any={};
+    info.shopName = data.shopName;
+    info.sourceId = data.sourceId;
+    info.orderDate = data.orderDate;
+    info.freight = Number(data.freight)?Number(data.freight):0;
+    info.logisticsCompany = data.logisticsCompany;
+    info.createBy = data.createBy;
+    info.note = data.note;
+    info.buyerMessage = data.buyerMessage;
+    info.remark = data.remark;
+    info.sourceFrom = data.sourceFrom;
+    (this.$refs.baseform as any).setValue(info);
+    //买家
+    let buyerInfo:any={};
+    buyerInfo.buyerId = data.buyerId;
+    buyerInfo.receiverName = data.receiverName;
+    buyerInfo.receiverProvince=data.receiverProvince;//省
+    buyerInfo.receiverProvinceCode=data.receiverProvinceCode; //省编码
+    buyerInfo.receiverCity=data.receiverCity;   //市
+    buyerInfo.receiverCityCode=data.receiverCityCode;  //市编码
+    buyerInfo.receiverDistrict=data.receiverDistrict;  //县/区
+    buyerInfo.receiverDistrictCode=data.receiverDistrictCode;   //县/区编码
+    buyerInfo.receiverTownCode=data.receiverTownCode;
+    buyerInfo.receiverTown=data.receiverTown;
+    buyerInfo.receiverAddress = data.receiverAddress;
+    buyerInfo.receiverPhone = data.receiverPhone;
+    buyerInfo.receiverMobile = data.receiverMobile;
+    buyerInfo.receiverZip = data.receiverZip;
+    (this.$refs.infoform as any).setValue(buyerInfo);
+    //商品
+    const productData:Array<any> = data.items ? data.items : [];
+    (this.$refs.table as any).setValue(productData);
+    //付款
+    this.orderValue.isPay = data.isPay;
+    //发票
+    if(data.invoices && data.invoices[0]){
+      (this.$refs.invoicesform as any).setValue(data.invoices[0]);
+    }
+
+    this.totalAmount();
+    this.amountChange();
+    // this.payAmountChange();
+    this.totalNum();
+    if(this.stepCon.indexOf(data.status) >=0 ){
+      this.stepActive = this.stepCon.indexOf(data.status) 
+    }
+    
+  }
+  hide(){
+
+  }
+  //抵扣金额数值变化
+  freeAmountChange(v:any){
+    this.orderValue.freeAmount = 0;
+    this.amountChange();
+    this.payAmountChange();
+  }
+  //商品成交总金额
+  totalAmount(){
+    let nowData = (this.$refs.table as any).getValue();
+    this.productTotal = 0;
+    for(const item of nowData){
+      if(Number(item.amount) && item.isGift != 1){
+        this.productTotal = add(item.amount, this.productTotal)
+      }
+    }
+    this.productTotal = this.productTotal.toFixed(2);
+  }
+  //具体折扣数目
+  amountChange(){
+    if(this.freeAmount){
+      if(Number(this.freeAmount) >= 0){
+        this.orderValue.freeAmount = Number(this.freeAmount)
+      }else{
+        let arr:Array<any> = this.freeAmount.split("%");
+        if(arr.length == 2 && Number(arr[0]) > 0){
+          const n = divide(Number(arr[0]),100)
+          this.orderValue.freeAmount = multiply(this.productTotal,n)
+        }
+      }
+      this.orderValue.freeAmount = this.orderValue.freeAmount.toFixed(2);
+    }
+  }
+  //应付总金额
+  payAmountChange(){
+    const freight = Number(this.orderValue.freight)?Number(this.orderValue.freight):0;
+    const freeAmount = Number(this.orderValue.freeAmount)?Number(this.orderValue.freeAmount):0;
+    let t = subtract(this.productTotal, freeAmount);
+    this.orderValue.payAmount = add(t, freight);
+    this.orderValue.payAmount = this.orderValue.payAmount.toFixed(2);
+  }
+  //商品总数量
+  totalNum(){
+    let nowData = (this.$refs.table as any).getValue();
+    this.num = 0;
+    for(const item of nowData){
+      if(Number(item.qty)){
+        this.num = add(Number(item.qty), Number(this.num))
+      }
+    }
+  }
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.btn{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.btn-save{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 0;
+  border-bottom: 1px solid #e6ebf5;
+}
+.updateBuyer{
+  padding: 0 16px;
+}
+.addProductTool{
+  width: 100%;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  .preferential{
+    width: 240px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    .pre-title{
+      width: 80px;
+      flex-shrink: 0;
+    }
+  }
+}
+.payType{
+  padding-bottom: 16px;
+}
+.product-cont{
+  width: 100%;
+  .product-name{
+    font-size: 12px;
+    // padding-bottom: 4px;
+    color: #000;
+  }
+  .other-info{
+    font-size: 12px;
+    span{
+      padding: 0 8px;
+    }
+  }
+}
+.product-row{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 4px 0;
+  .p-left,.p-right{
+    width: 50%;
+  }
+  .p-left{
+    text-align: right;
+  }
+  .p-right{
+    display: flex;
+    align-items: center;
+    .amount-title{
+      width: 70%;
+      text-align: right;
+      box-sizing: border-box;
+      padding-right: 8px;
+    }
+    .amount-price{
+      width: 30%;
+    }
+  }
+}
+.pay-info{
+  width: 100%;
+}
+.pay-row{
+  display: flex;
+  justify-content: flex-end;
+}
+.order-step{
+  padding-bottom: 8px;
+  width: 100%;
+  .other{
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 16px;
+    font-size: 14px;
+    color: #FFF;
+    background-color: #198cf8;
+  }
+}
+.updata-btn-row{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 8px;
+}
+</style>
+
+<style lang="scss">
+.add-order-item{
+  .el-collapse-item__content{
+    padding-bottom: 0;
+  }
+}
+.pay-info{
+  .el-descriptions{
+    padding-bottom: 8px;
+    .el-descriptions__header{
+      margin-bottom: 0 !important;
+      .el-descriptions__title{
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/oms/orderHistory/components/orderTable.vue

@@ -0,0 +1,229 @@
+<template>
+  <vxe-table
+    size="mini"
+    border
+    stripe
+    ref="table"
+    :height="height"
+    :row-config="{isCurrent: true,isHover: true}"
+    :data="data">
+    <vxe-column field="id" title="内部订单号" width="100" fixed="left">
+      <template #default="{ row }">
+        <div class="col-cont">
+          <span>{{ row.id }}</span>
+          <div class="update">
+            <div class="tag-update" @click="detail(row)">详</div>
+          </div>
+        </div>
+      </template>
+    </vxe-column>
+    <vxe-column field="sourceId" title="线上订单号" width="140"> </vxe-column>
+    <vxe-column field="product" title="商品" width="140">
+      <template #default="{ row }">
+        <el-badge :value="item.qty" class="item-pro" type="primary" :max="99" v-for="(item,index) of row.items" :key="index">
+          <el-image  style="width: 28px; height: 28px">
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </el-badge>
+      </template>
+    </vxe-column>
+    <vxe-column field="type" title="订单类型" width="120">
+      <template #default="{ row }">
+        <span v-if="row.type == 'Common'">普通订单</span>
+        <span v-if="row.type == 'Reissue'">补发订单</span>
+        <span v-if="row.type == 'DistributionPlus'">分销Plus</span>
+        <span v-if="row.type == 'SupplyPlus'">供销Plus</span>
+        <span v-if="row.type == 'Exchange'">换货订单</span>
+      </template>
+    </vxe-column>
+    <vxe-column field="status" title="订单状态" width="120">
+      <template #default="{ row }">
+        <span v-if="row.status == 'WaitPay'">待付款</span>
+        <span v-if="row.status == 'Delivering'">发货中</span>
+        <span v-if="row.status == 'Merged'">被合并</span>
+        <span v-if="row.status == 'Question'" style="color:red">异常</span>
+        <span v-if="row.status == 'Split'">被拆分</span>
+        <span v-if="row.status == 'WaitOuterSent'">等供销商|外仓发货</span>
+        <span v-if="row.status == 'WaitConfirm'">已付款待审核</span>
+        <span v-if="row.status == 'WaitFConfirm'">已客审待财审</span>
+        <span v-if="row.status == 'Sent'">已发货</span>
+        <span v-if="row.status == 'Cancelled'">取消</span>
+      </template>
+    </vxe-column>
+    <vxe-column field="sourceFrom" title="订单来源" width="120">
+      <template #default="{ row }">
+        {{ getFromText(row.sourceFrom) }}
+      </template>
+    </vxe-column>
+    <vxe-column field="shipment" title="跨境买家指定物流" width="120"></vxe-column>
+    <vxe-column field="chosenChannel" title="实发快递渠道" width="120"></vxe-column>
+    <vxe-column field="logisticsId" title="快递单号" width="120"></vxe-column>
+    <vxe-column field="logisticsCompany" title="快递公司" width="120"></vxe-column>
+    <vxe-column field="logisticsCompanyId" title="物流公司编码" width="120"></vxe-column>
+    <vxe-column field="internationalLogisticsId" title="国际物流单号" width="120"></vxe-column>
+    <vxe-column field="skus" title="skus" width="120"></vxe-column>
+    <vxe-column field="weight" title="重量" width="70"></vxe-column>
+    <vxe-column field="isCod" title="是否货到付款" width="120">
+      <template #default="{ row }">
+        {{ row.isCod == 1 ? '是' :' 否' }}
+      </template>
+    </vxe-column>
+    <vxe-column field="sendDate" title="发货日期" width="120"></vxe-column>
+    <vxe-column field="signTime" title="预计送达时间" width="120"></vxe-column>
+    <vxe-column field="endTime" title="确认收货时间" width="120"></vxe-column>
+    <vxe-column field="receiverAddress" title="收货地址" width="120"></vxe-column>
+    <vxe-column field="receiverName" title="收件人" width="120"></vxe-column>
+    <vxe-column field="receiverMobile" title="手机" width="120"></vxe-column>
+    <vxe-column field="buyerMessage" title="买家留言" width="120"></vxe-column>
+    <vxe-column field="wmsCoId" title="发货仓编号" width="120"></vxe-column>
+    <vxe-column field="payDate" title="支付时间" width="140"></vxe-column>
+    <vxe-column field="freeAmount" title="抵扣金额" width="120"></vxe-column>
+    <vxe-column field="payAmount" title="应付+运费" width="120">
+      <template #default="{ row }">
+        <span>{{ row.payAmount }}</span> <br/>
+        <span style="color: #b9b8b8;">{{ row.freight?row.freight:0 }}</span>
+      </template>
+    </vxe-column>
+    <vxe-column field="paidAmount" title="实付金额" width="120"></vxe-column>
+    <vxe-column field="shopBuyerId" title="买家昵称" width="120"></vxe-column>
+    <vxe-column field="openId" title="平台买家唯一值" width="120"></vxe-column>
+    <vxe-column field="buyerPaidAmount" title="总买家实付" width="120"></vxe-column>
+    <vxe-column field="sellerIncomeAmount" title="总卖家实收" width="120"></vxe-column>
+    <vxe-column field="questionType" title="问题类型" width="120"></vxe-column>
+    <vxe-column field="questionDesc" title="问题描述" width="120"></vxe-column>
+    <vxe-column field="shopName" title="店铺" width="120"></vxe-column>
+    <!-- <vxe-column field="invoiceType" title="发票类型" width="120"></vxe-column> -->
+    <vxe-column field="invoiceTitle" title="发票抬头+税号" width="120">
+      <template #default="{ row }">
+        <span>{{ row.invoiceTitle }}</span> <br/>
+        <span style="color: #b9b8b8;">{{ row.buyerTaxNo }}</span><br/>
+        <span>{{ row.invoiceType }}</span>
+      </template>
+    </vxe-column>
+    <vxe-column field="drpCoIdFrom" title="分销商编号" width="120"></vxe-column>
+    <vxe-column field="drpCoIdTo" title="供销商编号" width="120"></vxe-column>
+    <vxe-column field="orderDate" title="订单日期" width="120">
+      <template #default="{ row }">
+        {{ formatDate(row.orderDate) }}
+      </template>
+    </vxe-column>
+    <vxe-column field="remark" title="订单备注" width="120"></vxe-column>
+    <vxe-column field="note" title="线下备注" width="120"></vxe-column>
+  </vxe-table>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import Format from '@/benyun/utils/dateFormat'
+@Component
+export default class OrderTable extends Vue {
+  @Prop()
+  data!:Array<any>
+  height=null
+
+  sourceFrom:any={
+    'ERP':'手工下单',
+    'COPY':'复制',
+    'MERGE':'合并',
+    'SPLIT':'拆分；拆分还原',
+    'MOBILE':'导入',
+    'drp-s':'供销推送',
+    'drp-d':'分销推送',
+    'KWAISHOP':'快手；微商城',
+    'PINDUODUO':'拼多多',
+    'TOUTIAOFXG':'头条放心购',
+    'JUSHUITAN':'聚水潭'
+  }
+  //订单来源转换文字信息
+  getFromText(f:any){
+    let t='';
+    if(f){
+      let arr:Array<any>=f.split(',');
+      for(const item of arr){
+        if(this.sourceFrom[item]){
+          if(t){
+            t = t + ' , ' + this.sourceFrom[item]
+          }else{
+            t = this.sourceFrom[item]
+          }
+        }
+      }
+    }
+    return t;
+  }
+  formatDate(v:string){
+    return Format(v,'yyyy-MM-dd');
+  }
+  mounted(){
+    this.$nextTick(() => {
+      this.height = (this as any).$el.offsetHeight;
+      (this.$refs.table as any).recalculate();
+    })
+  }
+  detail(row:any){
+    this.$emit('detail',row)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail{
+  color: #0089ff;
+  cursor: pointer;
+}
+.col-cont{
+  // display: flex;
+  // justify-content: space-between;
+  // align-items: center;
+  // flex-direction: column;
+  .update{
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    visibility: hidden;
+  }
+  .tag-update{
+    height: 24px;
+    width: 24px;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background-color:#2d99f7;
+    color: #FFF;
+    flex-shrink: 0;
+    margin-left: 4px;
+    cursor: pointer;
+  }
+  .tag-update:hover{
+    opacity: 0.7;
+  }
+}
+</style>
+
+<style lang="scss">
+.row--hover{
+  .update{
+    visibility:visible !important;
+  }
+}
+.row--current{
+  .update{
+    visibility:visible !important;
+  }
+}
+.image-slot{
+  .el-icon-picture-outline{
+    font-size: 28px;
+    color: #999;
+  }
+}
+.item-pro{
+  .el-badge__content{
+    z-index: 1;
+  }
+}
+</style>

src/views/oms/orderHistory/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="history-order" id="orderHistory">
+    <div class="order-left">
+      <el-scrollbar class="search-content">
+        <el-collapse v-model="activeNames" class="my-collapse">
+          <el-collapse-item title="基本信息" name="1">
+            <input-select :options="myOptions" @input="parameChange" ref="searchCom01" />
+            <input-select :options="outLineOptions" @input="parameChangeBase($event,'idType','idValue')" ref="searchCom02" />
+          </el-collapse-item>
+          <order-radio title="买家留言" keyName="buyerMessageFilter" ref="searchCom05" :options="buyerMessageOptions" noLimit @radioChange="onChange($event,'buyerMessageFilter')">
+            <template v-slot:buyerMessage>
+              <el-input style="width: 140px;" v-model="value.buyerMessageContent" size="mini" placeholder="留言内容"></el-input>
+            </template>
+          </order-radio>
+          <order-radio title="卖家备注" keyName="remarkFilter" ref="searchCom06" :options="remarkFilterOptions" noLimit @radioChange="onChange($event,'remarkFilter')">
+            <template v-slot:remarkFilter>
+              <el-input style="width: 140px;" v-model="value.remarkContent" size="mini" placeholder="备注内容"></el-input>
+            </template>
+          </order-radio>
+          <order-radio title="线下备注" ref="searchCom10" keyName="noteFilter" :options="noteFilterOptions" noLimit @radioChange="onChange($event,'noteFilter')">
+            <template v-slot:noteContent>
+              <el-input style="width: 140px;" v-model="value.noteContent" size="mini" placeholder="备注内容"></el-input>
+            </template>
+          </order-radio>
+          <order-radio title="订单来源" keyName="sourceFrom" ref="searchCom11" :options="sourceFromOptions" noLimit @radioChange="onChange($event,'sourceFrom')" />
+          <order-checkbox title="订单类型" keyName="type" ref="searchCom12" :options="typeOption" noLimit @checkboxChange="onChange($event,'type')" />
+          <order-checkbox title="省份" ref="searchCom14" keyName="receiverProvinceCode" :options="provinceOptions" @checkboxChange="onChange($event,'receiverProvinceCodeList')" />
+        </el-collapse>
+      </el-scrollbar>
+      <div class="searchHandle">
+        <el-button size="mini" @click="resert">重置</el-button>
+        <el-button type="primary" size="mini" @click="search">搜索</el-button>
+      </div>
+    </div>
+    <div class="order-right">
+      <order-table :data="data" ref="orderTable" class="order-table" @detail="detail"/>
+      <div class="page">
+        <el-pagination v-if="page.total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :page-size="page.pageSize"
+          :layout="'total, sizes, prev, pager, next, jumper'" :total="page.total"></el-pagination>
+      </div>
+    </div>
+    <detail-order ref="detailOrder" /> 
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import filterInput from '../order/components/filterInput.vue'
+import OrderCheckbox from "../order/components/orderCheckbox.vue";
+import OrderRadio from '../order/components/orderRadio.vue'
+import orderTable from  './components/orderTable.vue'
+import InputSelect from "../order/components/inputSelect.vue";
+import DetailOrder from './components/detailOrder.vue'
+import {getProvince } from '@/api/omsOrder'
+import { query } from '@/api/omsOrderHistory'
+@Component({components:{filterInput,OrderCheckbox,OrderRadio,orderTable,DetailOrder,InputSelect}})
+export default class OrderHistory extends Vue {
+  value:any={}
+  activeNames:Array<any>=['1','buyerMessageFilter','remarkFilter','noteFilter']
+  page:any={
+    pageNo: 1, //当前页
+    pageSize: 20, //每页条数
+    total: 0 //总条数
+  }
+  load = false;
+  data:Array<any>=[]
+  myOptions=[{
+    label:'内部订单号',
+    value:'orderId',
+    type:'number'
+  }]
+  outLineOptions=[{
+    label:'线上订单号',
+    value:'sourceId'
+  },{
+    label:'支付单号',
+    value:'outerPayId'
+  }]
+   //买家留言
+   buyerMessageOptions=[{
+    label:'无留言',
+    value:1
+  },{
+    label:'未处理的留言',
+    value:2
+  },{
+    slotName:'buyerMessage',
+    label:'有留言',
+    value:3
+  }]
+  //卖家备注
+  remarkFilterOptions=[{
+    label:'无备注',
+    value:1,
+  },{
+    label:'未处理的备注',
+    value:2,
+  },{
+    label:'有备注',
+    slotName:'remarkFilter',
+    value:3,
+  }]
+  noteFilterOptions:Array<any>=[{
+    label:'无备注',
+    value:1,
+  },{
+    label:'有备注',
+    slotName:'noteContent',
+    value:2,
+  }]
+
+  //订单来源
+  sourceFromOptions:Array<any>=[{
+    label:'手工下单',
+    value:'ERP'
+  },{
+    label:'复制',
+    value:'COPY'
+  },{
+    label:'合并',
+    value:'MERGE'
+  },{
+    label:'拆分；拆分还原',
+    value:'SPLIT'
+  },{
+    label:'手机',
+    value:'MOBILE'
+  },{
+    label:'导入',
+    value:'IMPORT'
+  },{
+    label:'供销推送',
+    value:'drp-s'
+  },{
+    label:'快手；微商城',
+    value:'KWAISHOP'
+  },{
+    label:'拼多多',
+    value:'PINDUODUO'
+  },{
+    label:'头条放心购',
+    value:'TOUTIAOFXG'
+  },{
+    label:'聚水潭',
+    value:'JUSHUITAN'
+  }]
+   //订单类型
+  typeOption:Array<any>=[{
+    label:'普通订单',
+    value:'Common'
+  },{
+    label:'补发订单',
+    value:'Reissue'
+  },{
+    label:'分销Plus',
+    value:'DistributionPlus'
+  },{
+    label:'供销Plus',
+    value:'SupplyPlus'
+  },{
+    label:'换货订单',
+    value:'Exchange'
+  }]
+  provinceOptions:Array<any>=[]
+
+  mounted(){
+    this.getProvince();
+    this.getList();
+  }
+  //订单详情
+  detail(row:any){
+    let data = (this as any).$lodash.cloneDeep(row);
+    (this.$refs.detailOrder as any).setShow(true);
+    (this.$refs.detailOrder as any).setDetail(data); 
+  }
+
+  handleSizeChange(v:number){
+    this.page.pageSize = v;
+    this.getList();
+  }
+  handleCurrentChange(v:number){
+    this.page.pageNo = v;
+    this.getList();
+  }
+  getProvince(){
+    this.provinceOptions = [];
+    getProvince({
+      parentCode:'86'
+    }).then((res:any) => {
+      if(res.data){
+        for(const item of res.data){
+          this.provinceOptions.push({
+            label:item.name,
+            value:item.code
+          })
+        }
+      }
+    })
+  }
+
+  parameChange(parames:any){
+    for(const key in parames){
+      if(this.value[key]){
+        this.value[key] = parames[key]
+      }else{
+        Vue.set(this.value, key, parames[key]);
+      }
+    }
+  }
+  parameChangeBase(parames:any,n1:string,n2:string){
+    for(const key in parames){
+      if(parames[key]){
+        this.value[n1] = key;
+        this.value[n2] = parames[key].split(',');
+      }else{
+        this.value[n1] = '';
+        this.value[n2] = [];
+      }
+    }
+  }
+  //组件返回事件
+  onChange(v:any,code:string){
+    this.value[code] = v;
+  }
+  //重置搜索数据
+  clearSearchValue(){
+    this.value={};
+    for(const key in this.$refs){
+      if(key.indexOf('searchCom') >= 0 && (this.$refs[key] as any).clear){
+        (this.$refs[key] as any).clear()
+      }
+    }
+    this.value.dateType = 1;
+    this.value.includeSkuType = 1;
+  }
+  resert(){
+   this.clearSearchValue();
+
+   this.page.pageNo = 1;
+   this.getList();
+  }
+  //搜索
+  search(){
+    this.page.pageNo = 1;
+    this.getList();
+  }
+
+  getList(){
+    let data:any = (this as any).$lodash.cloneDeep(this.value);
+    let params:any={};
+
+    params.pageNo = this.page.pageNo;
+    params.pageSize = this.page.pageSize;
+    this.load = true;
+    query(params,data).then((res:any) => {
+      this.data = res.data.records;
+      this.page.pageNo = res.data.current;
+      this.page.total = res.data.total;
+      this.load = false;
+      this.$forceUpdate();
+    }).catch((err:any) => {
+      this.load = false;
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.history-order{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  .order-left{
+    width: 260px;
+    height: 100%;
+    flex-shrink: 0;
+    background-color: #f0f0f0;
+    border-right: solid 1px #CCC;
+    box-sizing: border-box;
+    padding: 4px 4px 0;
+    position: relative;
+    .my-collapse{
+      padding: 0 4px;
+      background: #FFF;
+    }
+    .searchHandle{
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px;
+      background-color: #f0f0f0;
+    }
+  }
+  .order-right{
+    width: calc(100% - 260px);
+    box-sizing: border-box;
+    padding: 8px 8px 0 8px;
+    height: 100%;
+    .order-table{
+      width: 100%;
+      height: calc(100% - 48px);
+    }
+    .page{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      padding: 8px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.order-left{
+  .el-collapse-item__content{
+    padding-bottom: 0;
+  }
+  .el-collapse-item__header{
+    font-weight: 700 !important;
+  }
+}
+.search-content{
+  height: calc(100% - 44px);
+  div.el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+  .el-scrollbar__bar {
+    right: 0px;
+  }
+}
+</style>