订单

src/api/omsOrder.ts

@@ -39,4 +39,12 @@ export function unSmt(data:any){
 		method: 'POST',
 		data: data
 	})
+}
+
+export function getSingleData(params:any){
+	return request({
+    url: '/omsOrder/omsOrder/single/',
+		params:params,
+    method: 'GET'
+  })
 }

src/assets/styles/element-ui.scss

@@ -82,3 +82,6 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+.el-input__inner[type="number"]{
+  padding:0 4px !important;
+}

src/benyun/components/byArea/byArea.vue

@@ -110,7 +110,21 @@ export default class ByArea extends VueViews {
   mounted(){
     this.getProvince();
   }
-
+  clearValue(){
+    this.provinceCode='';
+    this.cityCode='';
+    this.countyCode='';
+    this.townCode='';
+    this.province='';
+    this.city='';
+    this.county='';
+    this.town='';
+    this.area='';
+    this.areaCode='';
+    this.optionsCity=[];
+    this.optionsCounty>=[];
+    this.optionsTown=[];
+  }
   onProvince(v:any){
     this.province = '';
     this.area = '';

src/benyun/components/byDatePicker/byDatePicker.vue

@@ -6,7 +6,7 @@
     :readonly="attrs.readonly"
     :disabled="attrs.disabled"
     :clearable="attrs.clearable"
-    :editable="attrs.editable"
+    :editable="attrs.editable?false:true"
     :format="attrs.format"
     :align="attrs.align"
     @change="onChange"
@@ -47,7 +47,7 @@ export default class ByDatePicker extends VueViews {
     }
   }
   mounted(){
-    
+    this.defaultHandle()
   }
 
   setValue(data:any){
@@ -64,7 +64,14 @@ export default class ByDatePicker extends VueViews {
 
   // 清空数据
   clearValue(){
-    this.value = ''
+    this.value = '';
+  }
+
+  defaultHandle(){
+    if(this.attrs.defaultNow){
+      this.value = this.setFormat(new Date());
+      this.onChange();
+    }
   }
 
   setFormat(v:any){

src/benyun/components/byForm/byForm.vue

@@ -37,7 +37,8 @@
           </el-form-item>
         </el-col>
       </el-row>
-  </el-form>
+    </el-form>
+    <!-- <el-button @click="getValueData">获取数据</el-button> -->
   </div>
 </template>
 
@@ -111,10 +112,11 @@ export default class ByForm extends VueViews {
     }
   }
   mounted(){}
-
+  getValueData(){
+    console.log('表单数据',this.value)
+  }
   //设置数据
   setValue(data:any){
-    this.clearChildrenComp();
     if(data){
       this.value = (this as any).$lodash.cloneDeep(data);
     }else{
@@ -123,6 +125,12 @@ export default class ByForm extends VueViews {
     this.setChildrenComValue();
   }
 
+  clearValue(){
+    this.value = {};
+    this.clearChildrenComp();
+    this.defaultHandle();
+  }
+
   //获取数据
   getValue(){
     return (this as any).$lodash.cloneDeep(this.value);
@@ -148,6 +156,14 @@ export default class ByForm extends VueViews {
       }
     }
   }
+  //下级组件默认值
+  defaultHandle(){
+    for(const key in this.$refs){
+      if(key.indexOf('Comp') >= 0 && (this as any).$refs[key][0] && (this as any).$refs[key][0].defaultHandle){
+        (this as any).$refs[key][0].defaultHandle()
+      }
+    }
+  }
 
   //设置下级组件值
   setChildrenComValue(){
@@ -171,9 +187,9 @@ export default class ByForm extends VueViews {
     }else{
       this.changeSetValue(code,v)
     }
-    
     this.$emit('formChange',{value:v,code:code})
   }
+  
   changeSetValue(code:string,v:any){
     if(this.value[code]){
       this.value[code] = v;
@@ -200,6 +216,10 @@ export default class ByForm extends VueViews {
         });
     })
   }
+  //清楚过滤提示
+  clearValidate(){
+    (this.$refs.byForm as any).clearValidate();
+  }
 }
 </script>
 

src/benyun/components/byInput/byInput.vue

@@ -9,6 +9,7 @@
     :show-password="attrs.showPassword"
     :disabled="attrs.disabled"
     :size="attrs.size"
+    :type="attrs.type"
     :prefix-icon="attrs.prefixIcon"
     :suffix-icon="attrs.suffixIcon"
     :rows="attrs.rows"

src/layout/components/AppMain.vue

@@ -44,7 +44,8 @@ export default {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
-    // height: calc(100vh - 84px);
+    height: calc(100vh - 84px);
+    overflow-y: auto;
   }
 
   .fixed-header+.app-main {

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

@@ -83,10 +83,11 @@
         </el-collapse-item>
       </el-collapse>
       <productDialog ref="product" @confirm="confirmProduct" />
+      <productDialog ref="productGift" @confirm="confirmProductGift" />
     </template>
     <template #footer>
       <div class="btn">
-        <el-button type="primary" size="small">确定并继续</el-button>
+        <el-button type="primary" size="small" @click="btn('continue')">确定并继续</el-button>
         <el-button type="primary" size="small" @click="btn">确定</el-button>
       </div>
     </template>
@@ -96,30 +97,28 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { addOrder } from '@/api/omsOrder'
+import { addOrder,getSingleData } from '@/api/omsOrder'
 import { add,multiply,subtract,divide } from '@/benyun/utils/accuracy'
 
 @Component
 export default class AddOrder extends Vue {
   value=false;
-  isValidate = true; //验证结果
   num:any=0;
   freeAmount="";
   productTotal:any=0;
   userName:any='';//用户信息
   orderValue:any={}; //新增订单值
   radioPay=0;
-  isHandleGift = false; //是否在操作赠品
   activeNames:Array<any> =['1','2','3','4','5'];
   config:any={
     attr:{
       size:'mini',
       rules:{
         shopName:[{
-          required: true, message: '店铺名称', trigger: 'blur'
+          required: true, message: '店铺名称不能为空！', trigger: 'blur'
         }],
         orderDate:[{
-          required: true, message: '请选择订单日期', trigger: 'blur'
+          required: true, message: '订单日期不能为空！', trigger: 'blur'
         }]
       }
     },
@@ -154,7 +153,8 @@ export default class AddOrder extends Vue {
         compConfig:{
           attr:{
             // placeholder:'请输入订单日期',
-            clearable:true
+            clearable:true,
+            defaultNow:true
           }
         }
       }],
@@ -166,6 +166,7 @@ export default class AddOrder extends Vue {
         compConfig:{
           attr:{
             placeholder:'请输入运费',
+            type:'number',
             clearable:true
           }
         }
@@ -192,12 +193,12 @@ export default class AddOrder extends Vue {
         }
       }],
       [{
-        label:'多标签',
-        prop:'labels',
+        label:'线下备注',
+        prop:'note',
         component:'by-input',
         compConfig:{
           attr:{
-            placeholder:'以逗号分隔，单个标签不能超过十个字符',
+            placeholder:'请输入线下备注',
             clearable:true
           }
         }
@@ -230,14 +231,17 @@ export default class AddOrder extends Vue {
     attr:{
       size:'mini',
       rules:{
-        shopName:[{
-          required: true, message: '请输入名称', trigger: 'blur'
+        buyerId:[{
+          required: true, message: '买家账号不能为空！', trigger: 'blur'
         }],
-        sourceId:[{
-          required: true, message: '请输入名称', trigger: 'blur'
+        receiverDistrictCode:[{
+          required: true, message: '收货地址不能为空！', trigger: 'blur'
         }],
-        orderDate:[{
-          required: true, message: '请输入名称', trigger: 'blur'
+        receiverAddress:[{
+          required: true, message: '详细地址不能为空！', trigger: 'blur'
+        }],
+        receiverMobile:[{
+          required: true, message: '手机号不能为空！', trigger: 'blur'
         }]
       }
     },
@@ -246,7 +250,7 @@ export default class AddOrder extends Vue {
         span:6,
         label:'买家账号',
         prop:'buyerId',
-        component:'by-buyer',
+        component:'by-input',
         compConfig:{}
       },{
         span:6,
@@ -254,7 +258,7 @@ export default class AddOrder extends Vue {
         prop:'receiverName',
         component:'by-input',
         rules:[{
-          required: true, message: '请输入名称', trigger: 'blur'
+          required: true, message: '收货人不能为空', trigger: 'blur'
         }],
         compConfig:{
           attr:{
@@ -267,7 +271,7 @@ export default class AddOrder extends Vue {
         span:24,
         label:'收货地址',
         // slot:true,
-        prop:'address',
+        prop:'receiverDistrictCode',
         component:'by-area',
         compConfig:{
           attr:{
@@ -386,7 +390,7 @@ export default class AddOrder extends Vue {
         audit:'',
         event:{
           click:(item:any) => {
-            console.log('该行数据：',item)
+            this.deletaProduct(item);
           }
         }
       }]
@@ -404,18 +408,10 @@ export default class AddOrder extends Vue {
       {
         name: '添加赠品', icon: 'el-icon-plus', event:{
           click:()=>{
-            this.isHandleGift = true;
-            (this.$refs.product as any).setShow(true);
+            (this.$refs.productGift as any).setShow(true);
           }
         }
-      },
-      // {
-      //   name: '导入商品', icon: 'el-icon-bottom', event:{
-      //     click:()=>{
-      //       console.log('新增123')
-      //     }
-      //   }
-      // }
+      }
     ]
   }
   invoicesConfig:any={
@@ -665,6 +661,16 @@ export default class AddOrder extends Vue {
   setShow(v:boolean){
     this.value = v;
   }
+  setDetail(data:any){
+    this.orderValue = data;
+    let infoConfig = (this as any).$lodash.cloneDeep(this.config);
+    for(const col of infoConfig.columns){
+      for(const item of col){
+        if(!item.compConfig.attr) item.compConfig.attr = {};
+        item.compConfig.attr.readonly = true;
+      }
+    }
+  }
   //订单支付情况单选值
   inputPay(v:number){
     this.orderValue.isPay = null;
@@ -674,12 +680,63 @@ export default class AddOrder extends Vue {
   }
   mounted(){
     this.userName = this.$store.getters.name;
-    
   }
   show(){
-    (this.$refs.baseform as any).setValue({
-      createBy:this.userName
-    });
+    if(this.orderValue.id){
+      let data = this.orderValue;
+      //基本信息
+      let info:any={};
+      info.shopName = data.shopName;
+      info.sourceId = data.sourceId;
+      info.orderDate = data.orderDate;
+      info.freight = data.freight;
+      info.logisticsCompany = data.logisticsCompany;
+      info.createBy = data.createBy;
+      info.note = data.note;
+      info.buyerMessage = data.buyerMessage;
+      info.remark = data.remark;
+      (this.$refs.baseform as any).setValue(info);
+      //买家
+      let buyerInfo:any={};
+      buyerInfo.buyerId = data.buyerId;
+      buyerInfo.receiverName = data.receiverName;
+      buyerInfo.province=data.receiverProvince;//省
+      buyerInfo.provinceCode=data.receiverProvinceCode; //省编码
+      buyerInfo.city=data.receiverCity;   //市
+      buyerInfo.cityCode=data.receiverCityCode;  //市编码
+      buyerInfo.county=data.receiverDistrict;  //县/区
+      buyerInfo.countyCode=data.receiverDistrictCode;   //县/区编码
+      buyerInfo.townCode=data.receiverTownCode;
+      buyerInfo.town=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(this.orderValue.isPay != 0 || this.orderValue.isPay != 1){
+        this.radioPay == 2
+      }
+      setTimeout(()=>{
+        if(this.$refs.payform && data.pays && data.pays[0]){
+          (this.$refs.payform as any).setValue(data.pays[0])
+        }
+      },500);
+
+      //发票
+      if(data.invoices && data.invoices[0]){
+        (this.$refs.invoicesform as any).setValue(data.invoices[0]);
+      }
+    }else{
+      let value:any = (this.$refs.baseform as any).getValue();
+      value.createBy = this.userName;
+      (this.$refs.baseform as any).setValue(value);
+    }
+    
     
   }
   //抵扣金额数值变化
@@ -719,7 +776,7 @@ export default class AddOrder extends Vue {
     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 = subtract(t, freight);
+    this.orderValue.payAmount = add(t, freight);
     this.orderValue.payAmount = this.orderValue.payAmount.toFixed(2);
   }
   //商品总数量
@@ -745,22 +802,29 @@ export default class AddOrder extends Vue {
   }
   //确定新增的商品
   confirmProduct(data:Array<any>){
+    this.productHandle(data,false);
+  }
+  //新增赠品
+  confirmProductGift(data:Array<any>){
+    this.productHandle(data,true);
+  }
+  //商品处理
+  productHandle(data:Array<any>,isGift:boolean){
     let nowData = (this.$refs.table as any).getValue();
     let ids='';
     if(data.length > 0){
       for(const item of data){
         let t = true;
-        if(!this.isHandleGift){
-          for(const t_item of nowData){
-            if(item.id == t_item.skuId){
-              if(!ids){
-                ids = item.id
-              }else{
-                ids = ids + ',' + item.id
-              }
-              t = false;
-              break;
+        let v = isGift ? 1 : 0;
+        for(const t_item of nowData){
+          if(item.id == t_item.skuId && t_item.isGift == v){
+            if(!ids){
+              ids = item.id
+            }else{
+              ids = ids + ',' + item.id
             }
+            t = false;
+            break;
           }
         }
         if(t){
@@ -769,7 +833,7 @@ export default class AddOrder extends Vue {
           obj.skuId = item.id; //商品编码
           obj.styleId = item.newNumber; //款式编码
           obj.qty = 1;
-          if(this.isHandleGift){
+          if(isGift){
             obj.price = 0;  //单价
             obj.isGift = 1;
           }else{
@@ -784,18 +848,44 @@ export default class AddOrder extends Vue {
         }
       }
       (this.$refs.table as any).setValue(nowData);
-      this.totalAmount();
-      this.amountChange();
-      this.payAmountChange();
+      if(!isGift){
+        this.totalAmount();
+        this.amountChange();
+        this.payAmountChange();
+      }
       this.totalNum();
       if(ids){
-        this.$alert('编码“'+ids+'”已添加！', '提示', {
+        let name = isGift ? '赠品' : '商品';
+        this.$alert(name+'“'+ids+'”已存在！', '提示', {
           confirmButtonText: '确定',
           callback: action => {}
         });
       }
     }
-    this.isHandleGift = false;
+  }
+  //删除商品
+  deletaProduct(row:any){
+    let n = row.isGift == 1 ? '赠品' : '商品';
+    this.$confirm('此操作将删除'+n+'“'+row.name+'”, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
+      let data = (this.$refs.table as any).getValue();
+      let index = -1;
+      for(const item of data){
+        index ++;
+        if(row.skuId == item.skuId && row.name == item.name && row.isGift == item.isGift){
+          break;
+        }
+      }
+      data.splice(index,1);
+      (this.$refs.table as any).setValue(data);
+      this.totalAmount();
+      this.amountChange();
+      this.payAmountChange();
+      this.totalNum();
+    }).catch(() => { });
   }
   //数量的变化
   qtyChange(v:any,row:any){
@@ -823,60 +913,92 @@ export default class AddOrder extends Vue {
   //清楚整个订单数据
   clearValue(){
     this.orderValue = {};
-    (this.$refs.baseform as any).setValue({});
-    (this.$refs.infoform as any).setValue({});
+    (this.$refs.baseform as any).clearValue();
+    (this.$refs.baseform as any).clearValidate();
+    (this.$refs.infoform as any).clearValue();
+    (this.$refs.infoform as any).clearValidate();
     (this.$refs.table as any).setValue([]);
     if(this.$refs.payform){
-      (this.$refs.payform as any).setValue({});
+      (this.$refs.payform as any).clearValue();
+      (this.$refs.infoform as any).clearValidate();
     }
-    (this.$refs.invoicesform as any).setValue({});
+    (this.$refs.invoicesform as any).clearValue();
+
     this.num = 0;
     this.productTotal = 0;
     this.radioPay = 0;
+    this.freeAmount = '';
   }
   getOrderValue(){
     // this.orderValue = {};
-    let r = true;
-    (this.$refs.baseform as any).validate({noMsg:true}).then(()=>{
-      let baseInfo = (this.$refs.baseform as any).getValue();
-      for(const key in baseInfo){
-        this.orderValue[key] = baseInfo[key]
-      }
-    }).catch(()=>{
-      if(r){
-        (this as any).$message({
-          message: '验证未通过，请检查！',
-          type: 'warning',
-        })
-      }
-      r = false
-    });
-    (this.$refs.infoform as any).validate({noMsg:true}).then(()=>{
-      let infoValue = (this.$refs.infoform as any).getValue();
-      for(const key in infoValue){
-        this.orderValue[key] = infoValue[key]
-      }
-    }).catch(()=>{
-      if(r){
-        (this as any).$message({
-          message: '验证未通过，请检查！',
-          type: 'warning',
-        })
-      }
-      r = false
-    });
-    if(this.$refs.table){
-      let productOrder:Array<any> = (this.$refs.table as any).getValue();
-      this.orderValue.items = productOrder;
-    }
-    if(this.radioPay != 2){
-      this.orderValue.isPay = this.radioPay;
-    }
-    if(this.radioPay == 2){
-      (this.$refs.payform as any).validate({noMsg:true}).then(()=>{
-        this.orderValue.pays = [];
-        let payFormValue = (this.$refs.payform as any).getValue();
-        this.orderValue.pays.push(payFormValue);
+    return new Promise((resolve:Function, reject:Function) => {
+      let r = true;
+      let a = (this.$refs.baseform as any).getValue();
+      //基本信息
+      (this.$refs.baseform as any).validate({noMsg:true}).then(()=>{
+        let baseInfo = (this.$refs.baseform as any).getValue();
+        for(const key in baseInfo){
+          this.orderValue[key] = baseInfo[key]
+        }
+        
+        //卖家信息
+        (this.$refs.infoform as any).validate({noMsg:true}).then(()=>{
+          let infoValue = (this.$refs.infoform as any).getValue();
+          for(const key in infoValue){
+            this.orderValue[key] = infoValue[key]
+          }
+          //商品
+          let productOrder:Array<any> = [];
+          if(this.$refs.table){
+            productOrder = (this.$refs.table as any).getValue();
+           
+          }
+          if(productOrder.length > 0){
+            this.orderValue.items = productOrder;
+          }else{
+            this.$message({
+              message: '商品订单不能为空！',
+              type: 'warning'
+            });
+            reject();
+          }
+          if(this.radioPay != 2){
+            this.orderValue.isPay = this.radioPay;
+            this.orderValue.pays = []
+          }
+
+          if(this.radioPay == 2){
+            (this.$refs.payform as any).validate({noMsg:true}).then(()=>{
+              this.orderValue.pays = [];
+              let payFormValue = (this.$refs.payform as any).getValue();
+              if(payFormValue.payDate){
+                payFormValue.payDate = payFormValue.payDate + ' 00:00:00'
+              }
+              this.orderValue.pays.push(payFormValue);
+              resolve();
+            }).catch(()=>{
+              if(r){
+                (this as any).$message({
+                  message: '验证未通过，请检查！',
+                  type: 'warning',
+                })
+              }
+              r = false;
+              reject();
+            });
+          }else{
+            resolve();
+          }
+        }).catch(()=>{
+          if(r){
+            (this as any).$message({
+              message: '验证未通过，请检查！',
+              type: 'warning',
+            })
+          }
+          r = false;
+          reject();
+        });
       }).catch(()=>{
         if(r){
           (this as any).$message({
@@ -884,33 +1006,37 @@ export default class AddOrder extends Vue {
             type: 'warning',
           })
         }
-        r = false
+        r = false;
+        reject();
       });
-    }
-    let invoiceValue = (this.$refs.invoicesform as any).getValue();
-    this.orderValue.invoices=[];
-    this.orderValue.invoices.push(invoiceValue);
-    this.isValidate = r;
+
+      let invoiceValue = (this.$refs.invoicesform as any).getValue();
+      this.orderValue.invoices=[];
+      this.orderValue.invoices.push(invoiceValue);
+    })
+    
   }
   //确定
-  btn(){
-    this.getOrderValue();
-    setTimeout(()=>{
-      if(this.isValidate){
-        if(this.orderValue.orderDate){
-          this.orderValue.orderDate = this.orderValue.orderDate + ' 00:00:00'
-        }
-        this.orderValue.receiverCountryCode = '86';
-        this.orderValue.receiverCountry="中华人民共和国";
-        addOrder(this.orderValue).then((res:any) => {
-          (this as any).$message({
-            message: '订单添加成功！',
-            type: 'success',
-          })
-        }).catch((err:any) => {})
+  btn(n?:string){
+    this.getOrderValue().then(()=>{
+      if(this.orderValue.orderDate){
+        this.orderValue.orderDate = this.orderValue.orderDate + ' 00:00:00'
       }
-    },500)
-    
+      this.orderValue.receiverCountryCode = '86';
+      this.orderValue.receiverCountry="中华人民共和国";
+      addOrder(this.orderValue).then((res:any) => {
+        if(n != 'continue'){
+          this.value = false;
+        }
+        
+        (this as any).$message({
+          message: '订单添加成功！',
+          type: 'success',
+        })
+        this.clearValue();
+        this.$emit('addSuccess');
+      }).catch((err:any) => {})
+    }).catch((err:any) => {})
   }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-input :placeholder="placeholder" v-model="value" class="input-with-select" size="mini" @input="input">
+  <el-input :placeholder="placeholder" v-model="value" class="input-with-select" size="mini" @input="input" clearable>
     <el-select v-model="select" slot="append" placeholder="请选择" @change="change">
       <el-option v-for="(item,index) of options" :key="index" :label="item.label" :value="item.value"></el-option>
     </el-select>

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

@@ -2,10 +2,15 @@
   <vxe-table
     size="mini"
     border
+    :height="height"
     :data="data">
-    <vxe-column type="seq" width="60" title="序号"></vxe-column>
     <vxe-column type="checkbox" width="50"></vxe-column>
-    <vxe-column field="sourceId" title="线上订单号" width="120"></vxe-column>
+    <vxe-column type="seq" width="60" title="序号"></vxe-column>
+    <vxe-column field="sourceId" title="线上订单号" width="130">
+      <template #default="{ row }">
+        <div class="detail" @click="detail(row)">{{ row.sourceId }}</div>
+      </template>
+    </vxe-column>
     <vxe-column field="type" title="订单类型" width="120">
       <template #default="{ row }">
         <span v-if="row.type == 'Common'">普通订单</span>
@@ -63,7 +68,11 @@
     <!-- <vxe-column field="buyerTaxNo" title="发票税号" width="120"></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"></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>
@@ -71,13 +80,31 @@
 
 <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
+
+  formatDate(v:string){
+    return Format(v,'yyyy-MM-dd');
+  }
+
+  mounted(){
+    this.$nextTick(() => {
+      this.height = (this as any).$el.offsetHeight;
+    })
+  }
+  detail(row:any){
+    this.$emit('detail',row)
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.detail{
+  color: #0089ff;
+  cursor: pointer;
+}
 </style>

src/views/oms/order/index.vue

@@ -1,139 +1,141 @@
 <template>
   <div class="order">
     <div class="order-left">
-      <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" ref="searchCom02" />
-          <input-select :options="buyerOptions" @input="parameChangeBase" ref="searchCom03" />
-        </el-collapse-item>
-        <order-checkbox title="订单状态" keyName="status" ref="searchCom04" :options="statusOptions" noLimit @checkboxChange="onChange($event,'status')" />
-        <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>
-        <el-collapse-item title="时间" name="time">
-          <div class="orderSelect">
-            <el-select v-model="value.dateType" placeholder="请选择时间类型" size="mini">
+      <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" />
+            <input-select :options="buyerOptions" @input="parameChangeInfo($event,'receiverInfo','receiverValue')" ref="searchCom03" />
+          </el-collapse-item>
+          <order-checkbox title="订单状态" keyName="status" ref="searchCom04" :options="statusOptions" noLimit @checkboxChange="onChange($event,'status')" />
+          <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>
+          <el-collapse-item title="时间" name="time">
+            <div class="orderSelect">
+              <el-select v-model="value.dateType" placeholder="请选择时间类型" size="mini">
+                <el-option
+                  v-for="item in dateTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <i class="el-icon-info" title="附加订单时间限制，许多仅限待发货订单的查询条件将自动取消限制"></i>
+            </div>
+            <filter-date @change="onChangeTime" ref="searchCom07" />
+            <div>付款后几小时未发货：</div>
+            <div class="order-time">
+              <el-input v-model="value.deliveryHours" class="deliveryHours-input" size="mini" type="number" style=""></el-input>
+              <i class="el-icon-info" title="单位小时，不支持小数位。如果数值大于0，强制为未发货订单。同时勾选店铺可以实现不同平台的未发货时效查询"></i>
+            </div>
+            <filterMinMax title="剩余发货时间(小时)" ref="searchCom08" minField="deliveryRemainingMin" maxField="deliveryRemainingMax" @change="parameChange" />
+          </el-collapse-item>
+          <!-- <el-collapse-item name="info">
+            <template slot="title">
+              商品信息
+              <i class="header-icon el-icon-info" 
+                title="包含商品信息，排除商品信息，商品名称包含关键字，颜色规则包含关键字，默认仅搜索前15天的订单，如需搜索15天前的订单，请在【订单时间】加上时间条件。">
+              </i>
+            </template>
+            <div>
+              <el-checkbox v-model="value.excludeRefund">不包括退款成功商品</el-checkbox>
+            </div>
+            <div>
+              <el-checkbox v-model="value.excludeSend">不包括发货成功商品</el-checkbox>
+            </div>
+            <el-select v-model="value.includeSkuType" placeholder="请选择包含的商品" size="mini" class="orderSelect">
               <el-option
-                v-for="item in dateTypeOptions"
+                v-for="item in includeSkuTypeOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
-            <i class="el-icon-info" title="附加订单时间限制，许多仅限待发货订单的查询条件将自动取消限制"></i>
-          </div>
-          <filter-date @change="onChangeTime" ref="searchCom07" />
-          <div>付款后几小时未发货：</div>
-          <div class="order-time">
-            <el-input v-model="value.deliveryHours" class="deliveryHours-input" size="mini" type="number" style=""></el-input>
-            <i class="el-icon-info" title="单位小时，不支持小数位。如果数值大于0，强制为未发货订单。同时勾选店铺可以实现不同平台的未发货时效查询"></i>
-          </div>
-          <filterMinMax title="剩余发货时间(小时)" ref="searchCom08" minField="deliveryRemainingMin" maxField="deliveryRemainingMax" @change="parameChange" />
-        </el-collapse-item>
-        <!-- <el-collapse-item name="info">
-          <template slot="title">
-            商品信息
-            <i class="header-icon el-icon-info" 
-              title="包含商品信息，排除商品信息，商品名称包含关键字，颜色规则包含关键字，默认仅搜索前15天的订单，如需搜索15天前的订单，请在【订单时间】加上时间条件。">
-            </i>
-          </template>
-          <div>
-            <el-checkbox v-model="value.excludeRefund">不包括退款成功商品</el-checkbox>
-          </div>
-          <div>
-            <el-checkbox v-model="value.excludeSend">不包括发货成功商品</el-checkbox>
-          </div>
-          <el-select v-model="value.includeSkuType" placeholder="请选择包含的商品" size="mini" class="orderSelect">
-            <el-option
-              v-for="item in includeSkuTypeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <order-product />
-          <filter-input title="商品名称" @input="onChange($event,'itemNameKeyword')" />
-          <filter-input title="颜色规格" @input="onChange($event,'itemStyleKeyword')" />
-          <filterMinMax title="数量范围" minField="qtyMin" maxField="qtyMax" />
-          <filterMinMax title="金额范围" minField="amountMin" maxField="amountMax" />
-          <filterMinMax title="重量范围" minField="weightMin" maxField="weightMax" />
-          <div class="info-row">
-            <el-checkbox v-model="value.onlyItemInfo">以上信息均为指定的商品</el-checkbox>
-            <i class="el-icon-info" 
-              title="如果指定了商品信息，则数量金额重量均为指定商品的数量金额重量，如果没有指定任何商品信息，则为整个订单的信息。">
-            </i>
-          </div>
-          <filterMinMax title="优惠金额范围" minField="freeAmountMin" maxField="freeAmountMax" />
-          <el-select v-model="value.excludeSkuType" placeholder="请选择排除的商品" size="mini" class="orderSelect">
-            <el-option
-              v-for="item in excludeSkuTypeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <order-product />
-        </el-collapse-item> -->
-        <order-checkbox title="平台订单状态" ref="searchCom09" keyName="shopStatusList" :options="shopStatusListOption" noLimit @checkboxChange="onChange($event,'shopStatusList')" />
-        <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')" />
-        <el-collapse-item title="付款方式 & 是否付款" name="codAndPay">
-          <div class="box01">
-            <el-radio-group v-model="radio" @input="colChange">
-              <el-radio :label="0">不限</el-radio>
-              <el-radio :label="1">在线支付</el-radio>
-              <el-radio :label="2">货到付款</el-radio>
-            </el-radio-group>
-          </div>
-          <div class="box01">
-            <el-radio-group v-model="radio2" @input="payChange">
-              <el-radio :label="0">不限</el-radio>
-              <el-radio :label="1">未付款</el-radio>
-              <el-radio :label="2">已付款</el-radio>
-            </el-radio-group>
-          </div>
-        </el-collapse-item>
-        <!-- <el-collapse-item title="标签&多标签 | 旗帜" name="flag">
-          <div>包含旗帜</div>
-          <div class="orderSelect">
-            <el-select v-model="value.includeFlags" multiple collapse-tags size="mini" placeholder="请选择旗帜" clearable>
+            <order-product />
+            <filter-input title="商品名称" @input="onChange($event,'itemNameKeyword')" />
+            <filter-input title="颜色规格" @input="onChange($event,'itemStyleKeyword')" />
+            <filterMinMax title="数量范围" minField="qtyMin" maxField="qtyMax" />
+            <filterMinMax title="金额范围" minField="amountMin" maxField="amountMax" />
+            <filterMinMax title="重量范围" minField="weightMin" maxField="weightMax" />
+            <div class="info-row">
+              <el-checkbox v-model="value.onlyItemInfo">以上信息均为指定的商品</el-checkbox>
+              <i class="el-icon-info" 
+                title="如果指定了商品信息，则数量金额重量均为指定商品的数量金额重量，如果没有指定任何商品信息，则为整个订单的信息。">
+              </i>
+            </div>
+            <filterMinMax title="优惠金额范围" minField="freeAmountMin" maxField="freeAmountMax" />
+            <el-select v-model="value.excludeSkuType" placeholder="请选择排除的商品" size="mini" class="orderSelect">
               <el-option
-                v-for="item in flagsOptions"
+                v-for="item in excludeSkuTypeOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
-          </div>
-          <div>排除旗帜</div>
-          <div class="orderSelect">
-            <el-select v-model="value.excludeFlags" multiple collapse-tags size="mini" placeholder="请选择旗帜" clearable>
-              <el-option
-                v-for="item in flagsOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </div>
-        </el-collapse-item> -->
-        <order-checkbox title="店铺" ref="searchCom13" keyName="shopIdList" :options="shopIdListOptions" @checkboxChange="onChange($event,'shopIdList')" />
+            <order-product />
+          </el-collapse-item> -->
+          <order-checkbox title="平台订单状态" ref="searchCom09" keyName="shopStatusList" :options="shopStatusListOption" noLimit @checkboxChange="onChange($event,'shopStatusList')" />
+          <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')" />
+          <el-collapse-item title="付款方式 & 是否付款" name="codAndPay">
+            <div class="box01">
+              <el-radio-group v-model="radio" @input="colChange">
+                <el-radio label="0">不限</el-radio>
+                <el-radio label="1">在线支付</el-radio>
+                <el-radio label="2">货到付款</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="box01">
+              <el-radio-group v-model="radio2" @input="payChange">
+                <el-radio label="0">不限</el-radio>
+                <el-radio label="1">未付款</el-radio>
+                <el-radio label="2">已付款</el-radio>
+              </el-radio-group>
+            </div>
+          </el-collapse-item>
+          <!-- <el-collapse-item title="标签&多标签 | 旗帜" name="flag">
+            <div>包含旗帜</div>
+            <div class="orderSelect">
+              <el-select v-model="value.includeFlags" multiple collapse-tags size="mini" placeholder="请选择旗帜" clearable>
+                <el-option
+                  v-for="item in flagsOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div>排除旗帜</div>
+            <div class="orderSelect">
+              <el-select v-model="value.excludeFlags" multiple collapse-tags size="mini" placeholder="请选择旗帜" clearable>
+                <el-option
+                  v-for="item in flagsOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-collapse-item> -->
+          <order-checkbox title="店铺" ref="searchCom13" keyName="shopIdList" :options="shopIdListOptions" @checkboxChange="onChange($event,'shopIdList')" />
 
-        <order-checkbox title="省份" ref="searchCom14" keyName="receiverProvinceCode" :options="provinceOptions" @checkboxChange="onChange($event,'receiverProvinceCodeList')" />
-      </el-collapse>
+          <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>
@@ -144,13 +146,13 @@
         <order-tool @addOrder="addOrder" @smt="smtOrder" @reSmt="reSmt"/>
       </div>
       <div class="table">
-        <order-table :data="data" ref="orderTable"/>
+        <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>
-      <add-order ref="addOrder" />
+      <add-order ref="addOrder" @addSuccess="addSuccess" />
     </div>
   </div>
 </template>
@@ -170,7 +172,7 @@ import { query,getProvince,smt,unSmt } from '@/api/omsOrder'
 @Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable,AddOrder,InputSelect,OrderProduct,filterMinMax}})
 export default class Order extends Vue {
   test={}
-  activeNames:Array<any>=['1']
+  activeNames:Array<any>=['1','status']
   radio=''
   radio2=''
   data:Array<any> = []
@@ -449,7 +451,7 @@ export default class Order extends Vue {
     this.getList()
     this.getProvince()
   }
-  resert(){
+  clearSearchValue(){
     this.value={};
     for(const key in this.$refs){
       if(key.indexOf('searchCom') >= 0 && (this.$refs[key] as any).clear){
@@ -459,6 +461,11 @@ export default class Order extends Vue {
     this.value.dateType = 1;
     this.value.includeSkuType = 1;
   }
+  resert(){
+   this.clearSearchValue();
+   this.page.pageNo = 1;
+   this.getList();
+  }
   search(){
     this.page.pageNo = 1;
     this.getList();
@@ -534,14 +541,25 @@ export default class Order extends Vue {
       }
     }
   }
-  parameChangeBase(parames:any){
+  parameChangeBase(parames:any,n1:string,n2:string){
     for(const key in parames){
       if(parames[key]){
-        this.value.idType = key;
-        this.value.idValue = parames[key].split(',');
+        this.value[n1] = key;
+        this.value[n2] = parames[key].split(',');
       }else{
-        this.value.idType = '';
-        this.value.idValue = [];
+        this.value[n1] = '';
+        this.value[n2] = [];
+      }
+    }
+  }
+  parameChangeInfo(parames:any,n1:string,n2:string){
+    for(const key in parames){
+      if(parames[key]){
+        this.value[n1] = key;
+        this.value[n2] = parames[key];
+      }else{
+        this.value[n1] = '';
+        this.value[n2] = '';
       }
     }
   }
@@ -582,6 +600,18 @@ export default class Order extends Vue {
 
     })
   }
+  //新增订单成功刷新页面
+  addSuccess(){
+    this.page.pageNo = 1;
+    this.clearSearchValue();
+    this.getList();
+  }
+  //订单详情
+  detail(row:any){
+    (this.$refs.addOrder as any).setShow(true);
+    (this.$refs.addOrder as any).setDetail(row);
+    
+  }
 
   handleSizeChange(v:number){
     this.page.pageSize = v;
@@ -598,26 +628,31 @@ export default class Order extends Vue {
 <style lang="scss" scoped>
 .order{
   width: 100%;
+  height: 100%;
   display: flex;
-  overflow-x: hidden;
+  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;
-    
+    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;
     }
     .box01{
       width: 100%;
@@ -636,19 +671,25 @@ export default class Order extends Vue {
     }
   }
   .order-right{
-    width: calc(100% - 240px);
+    width: calc(100% - 260px);
     box-sizing: border-box;
     padding-left: 8px;
+    height: 100%;
     .tool{
       width: 100%;
     }
     .table{
       width: 100%;
+      height: calc(100% - 40px);
+      .order-table{
+        width: 100%;
+        height: calc(100% - 48px);
+      }
       .page{
         width: 100%;
         display: flex;
         justify-content: flex-end;
-        padding: 16px;
+        padding: 8px;
         box-sizing: border-box;
       }
     }
@@ -692,4 +733,13 @@ export default class Order extends Vue {
     text-align: center;
   }
 }
+.search-content{
+  height: calc(100% - 44px);
+  div.el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+  .el-scrollbar__bar {
+    right: 0px;
+  }
+}
 </style>