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

<template>
  <vxe-modal v-model="value" id="synchronousOrderModal"  width="500" height="400" @hide="hide"  transfer show-footer v-loading="load">
    <template #title>
      <span>下载订单</span>
    </template>
    <template #default>
      <div class="type">
        <el-radio-group v-model="type">
          <el-radio :label="1">按线上订单号</el-radio>
          <el-radio :label="2">按时间段</el-radio>
          <!-- <el-radio :label="3">按订单状态</el-radio> -->
        </el-radio-group>
      </div>
      <div class="cont">
        <div class="title"><span>* </span>上游平台：</div>
        <div class="right-cont">
          <el-select v-model="sourceId" size="mini" style="width:100%" placeholder="请选择" clearable @change="shopChange">
            <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <template v-if="type == 1">
        <div class="cont">
          <div class="title"><span>* </span>线上订单：</div>
          <div class="right-cont">
            <el-input v-model="sourceIds" type="textarea" rows="4" size="mini" placeholder="每行一个单号,换行输入"></el-input>
          </div>
        </div>
      </template>
      <template v-if="type == 2">
        <div class="cont">
          <div class="title"><span>* </span>时间类型：</div>
          <div class="right-cont">
            <el-select v-model="dateType" size="mini" style="width:100%" placeholder="请选择" clearable>
              <el-option
                v-for="item in dateTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="cont">
          <div class="title"><span>* </span>时间：</div>
          <div class="right-cont">
            <el-date-picker
              v-model="time"
              style="width: 100%;"
              size="mini"
              type="datetimerange"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="开始日期"
              @change="change"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="cont">
          <div class="title"><span></span>店铺名称：</div>
          <div class="right-cont">
            <el-select v-model="shopid" size="mini" style="width:100%" placeholder="请选择" clearable @change="shopChange">
              <el-option
                v-for="item in shopOpions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="cont">
          <div class="title">订单状态：</div>
          <div class="right-cont">
            <el-select v-model="status" size="mini" style="width:100%" placeholder="请选择" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <!-- <template v-if="type == 3">
        <div class="cont">
          <div class="title"><span>* </span>订单状态：</div>
          <div class="right-cont">
            <el-select v-model="status" size="mini" style="width:100%" placeholder="请选择" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </template> -->
    </template>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" plain @click="clear">清空</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { pullOrder } from '@/api/omsOrder'
import { query,queryShop } from '@/api/sourceShop'
@Component
export default class LoadOrderModal extends Vue {
  load = false;
  value = false;
  type=1;
  sourceName = '';
  sourceId:any = null;
  sourceOptions:Array<any>=[
    // {
    // label:'犇云聚水潭店铺',
    // value:2
    // }
  ]
  shopid=''
  shopOpions:Array<any>=[]
  sourceIds=''; //线上订单号
  dateType:any='';
  dateTypeOptions=[{
    label:'修改时间',
    value:1
  },{
    label:'订单日期',
    value:3
  },{
    label:'发货时间',
    value:4
  }]
  beginDate='';
  endDate='';
  time:any=null;
  status='';
  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'
  }]
  setShow(v:boolean){
    this.value = v;
  }
  change(v:any){
    if(v){
      this.beginDate = v[0];
      this.endDate = v[1];
    }else{
      this.beginDate = '';
      this.endDate = '';
    }
  }
  shopChange(v:any){
    if(v){
      for(const item of this.sourceOptions){
        if(item.value == v){
          this.sourceName = item.label
          break;
        }
      }
      this.getSourceShopList()
    }else{
      this.sourceName=''
      this.shopid=''
      this.shopOpions=[]
    }
  }
  btn(){
    let value:any={};
    let msg = '';
    if(!this.sourceId){
      msg = '上游平台'
    }
    value.sourceId = this.sourceId;
    value.soueceName = this.sourceName;
    value.type = this.type;
    if(this.type == 1){
      if(!this.sourceIds){
        if(msg){
          msg = msg + '，线上订单'
        }else{
          msg = '线上订单'
        }
      }
      value.sourceIds = this.sourceIds.split('\n');
    }else if(this.type == 2){
      let isS=false;
      value.shopId = this.shopid
      for(const item of this.dateTypeOptions){
        if(item.value == this.dateType){
          isS = true;
          break
        }
      }
      // if(!this.status){
      //   if(msg){
      //     msg = msg + '，订单状态'
      //   }else{
      //     msg = '订单状态'
      //   }
      // }
      value.status = this.status;
      if(!isS){
        if(msg){
          msg = msg + '，时间类型'
        }else{
          msg = '时间类型'
        }
      }
      if(!this.time){
        if(msg){
          msg = msg + '，时间'
        }else{
          msg = '时间'
        }
      }
      value.dateType = Number(this.dateType) - 1;
      value.beginDate = this.beginDate;
      value.endDate = this.endDate;
    }
    if(msg){
      this.$message({
        message:msg + '不能为空！',
        type: 'warning'
      })
      return
    }
    this.load = true;
    pullOrder(value).then((res:any) => {
      this.load = false;
      this.value = false;
      if(res.data > 0){
        (this as any).$message({
          message: '成功更新' + res.data + '条数据！',
          type: 'success',
        });
        this.$emit('handleSuccess');
      }else{
        (this as any).$message({
          message: '未更新数据！',
          type: 'warning',
        });
      }
    }).catch((err:any) => {
      this.load = false;
    })
  }
  hide(){
    this.clear()
  }
  clear(){
    this.type = 1;
    this.sourceName = '';
    this.sourceId = '';
    this.sourceIds = '';
    this.dateType = '';
    this.beginDate = '';
    this.endDate = '';
    this.time = null;
    this.status = '';
    this.shopid = ''
  }
  //上游平台
  getSourceList() {
    this.sourceOptions = []
    this.load = true
    query({
      pageNo: 1,
      pageSize: 50
    }).then((res:any) => {
      this.load = false
      if (res.data && res.data.records) {
        for(const item of res.data.records) {
          this.sourceOptions.push({
            label: item.sourceName,
            value: item.id
          })
        }
      }
    }).catch(()=>{
      this.load = false
    })
  }
  //店铺
  getSourceShopList(){
    this.shopOpions = []
    queryShop({
      sourceId:this.sourceId
    }).then((res:any) => {
      this.load = false
      if (res.data) {
        for(const item of res.data) {
          this.shopOpions.push({
            label: item.shopName,
            value: item.shopId
          })
        }
      }
    }).catch(()=>{
      this.load = false
    })
  }
  created() {
    this.getSourceList()
  }
}
</script>

<style lang="scss" scoped>
.btn{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.type{
  width: 100%;
  padding: 8px 0;
}
.cont{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px 0;
  .title{
    width: 100px;
    text-align: right;
    margin: 0 !important;
    >span{
      color: #F00;
    }
  }
  .right-cont{
    width: calc(100% - 100px);
  }
}
</style>