oms/src/views/demo/order/order.vue

<template>
  <div class="order">
    <div class="order-left">
      <el-collapse v-model="activeNames" class="my-collapse">
        <el-collapse-item title="基本信息" name="1">
          <filter-input title="线上订单号" @input="onChange($event,'sourceId')" />
          <filter-input title="买家昵称" @input="onChange($event,'shopBuyerId')" />
          <filter-input title="买家ID" @input="onChange($event,'buyerId')" />
        </el-collapse-item>
        <el-collapse-item title="物流" name="2">
          <filter-input title="快递单号" @input="onChange($event,'logisticsId')" />
          <filter-input title="快递公司" @input="onChange($event,'logisticsCompany')" />
          <filter-input title="国际单号" @input="onChange($event,'internationalLogisticsId')" />
          <filter-input title="跨境物流" @input="onChange($event,'shipment')" />
        </el-collapse-item>
        <el-collapse-item title="时间" name="time">
          <filter-date title="计划发货时间" @change="onChange($event,'planDeliveryDate')" />
          <filter-date title="发货日期" @change="onChange($event,'sendDate')" />
          <filter-date title="预计送达时间" @change="onChange($event,'signTime')" />
          <filter-date title="确认收货时间" @change="onChange($event,'endTime')" />
        </el-collapse-item>
        <el-collapse-item title="分销和供应" name="3">
          <filter-input title="分销商编号" @input="onChange($event,'drpCoIdFrom')" />
          <filter-input title="供销商编号" @input="onChange($event,'drpCoIdTo')" />
        </el-collapse-item>
        <order-radio title="是否已提交" keyName="isSubmitte" :options="isSubmittedOptions" noLimit @radioChange="onChange($event,'isSubmitte')" />
        <order-radio title="订单来源" keyName="sourceFrom" :options="sourceFromOptions" noLimit @radioChange="onChange($event,'sourceFrom')" />
        <order-radio title="订单类型" keyName="type" :options="typeOption" noLimit @radioChange="onChange($event,'type')" />
        <order-radio title="订单状态" keyName="status" :options="statusOptions" noLimit @radioChange="onChange($event,'status')" />
        <order-checkbox title="省份" keyName="receiverProvinceCode" :options="provinceOptions" @checkboxChange="onChange($event,'receiverProvinceCode')" />
      </el-collapse>
      <div class="searchHandle">
        <el-button size="mini">重置</el-button>
        <el-button type="primary" size="mini">搜索</el-button>
      </div>
    </div>
    <div class="order-right">
      <div class="tool">
        <order-tool />
      </div>
      <div class="table">
        <order-table :data="data"/>
        
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import filterInput from './components/filterInput.vue'
import OrderCheckbox from "./components/orderCheckbox.vue";
import OrderRadio from './components/orderRadio.vue'
import filterDate from './components/filterDate.vue'
import OrderTool from "./components/orderTool.vue";
import OrderTable from "./components/orderTable.vue";
@Component({components:{filterInput,OrderCheckbox,OrderRadio,filterDate,OrderTool,OrderTable}})
export default class Order extends Vue {
  activeNames:Array<any>=['1']
  data:Array<any> = []
  value:any={
    sourceId:'',  //线上订单号
    shopBuyerId:'', //买家昵称
    buyerId:'', //买家ID
    logisticsId:'', //快递单号
    logisticsCompany:'', //快递公司
    internationalLogisticsId:'', //国际物流单号
    isSubmitte:'', //数据是否已提交
    drpCoIdFrom:'', //分销商编号
    drpCoIdTo:'', //供销商编号
    sourceFrom:'', //订单来源
    type:'', //订单类型
    status:'' , //订单状态
  }
  //数据是否已提交options
  isSubmittedOptions:Array<any>=[{
    label:'未提交(暂存)',
    value:0
  },{
    label:'已提交',
    value:1
  }]

  //订单来源
  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:'普通订单'
  },{
    label:'补发订单'
  },{
    label:'分销Plus'
  },{
    label:'供销Plus'
  },{
    label:'换货订单'
  }]

  //订单状态 
  statusOptions:Array<any>=[{
    label:'待付款',
    value:'WaitPay'
  },{
    label:'发货中',
    value:'Delivering'
  },{
    label:'被合并',
    value:'Merged'
  },{
    label:'异常',
    value:'Question'
  },{
    label:'被拆分',
    value:'Split'
  },{
    label:'等供销商|外仓发货',
    value:'WaitOuterSent'
  },{
    label:'已付款待审核',
    value:'WaitConfirm'
  },{
    label:'已客审待财审',
    value:'WaitFConfirm'
  },{
    label:'已发货',
    value:'Sent'
  },{
    label:'取消',
    value:'Cancelled'
  }]

  //省份
  provinceOptions:Array<any>=[{
    label:'北京',
    value:'1'
  },{
    label:'天津',
    value:'2'
  },{
    label:'上海',
    value:'3'
  },{
    label:'河北省',
    value:'4'
  },{
    label:'广西壮族自治区',
    value:'5'
  }]

  //组件返回事件
  onChange(v:any,code:string){
    this.value[code] = v;
  }

}
</script>

<style lang="scss" scoped>
.order{
  width: 100%;
  display: flex;
  overflow-x: hidden;
  .order-left{
    width: 240px;
    flex-shrink: 0;
    background-color: #f0f0f0;
    border-right: solid 1px #CCC;
    box-sizing: border-box;
    padding: 4px;
    .my-collapse{
      padding: 0 4px;
      background: #FFF;
    }
    .searchHandle{
      display: flex;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      padding: 8px;
    }
  }
  .filter-box{
    width: calc(100% - 8px);
    background-color: #FFF;
    box-sizing: border-box;
    padding: 8px;
    border:solid 1px #EEE;
    
    .filter-row:last-child{
      padding: 0;
    }
  }
  .order-right{
    width: 100%;
    box-sizing: border-box;
    padding-left: 8px;
    .tool{
      width: 100%;
    }
    .table{
      width: 100%;
    }
  }
}
</style>