oms/src/views/audit/synchronous/components/synchronousOrderModal.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">按sku拉取</el-radio>
          <el-radio :label="2">按款拉取</el-radio>
          <el-radio :label="3">按时间段拉取</el-radio>
        </el-radio-group>
      </div>
      <div class="cont">
        <div class="t-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 shopOptions"
              :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="t-title"><span>* </span>sku：</div>
          <div class="right-cont">
            <el-input v-model="skus" type="textarea" rows="4" size="mini" placeholder="每行一个单号,换行输入"></el-input>
          </div>
        </div>
      </template>
      <template v-if="type == 2">
        <div class="cont">
          <div class="t-title"><span>* </span>款式编码：</div>
          <div class="right-cont">
            <el-input v-model="styles" type="textarea" rows="4" size="mini" placeholder="每行一个编码,换行输入"></el-input>
          </div>
        </div>
      </template>
      <template v-if="type == 3">
        <div class="cont">
          <div class="t-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="t-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>
      </template>
      
    </template>
    <template #footer>
      <div class="btn">
        <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 { pullItem } from '@/api/maindataMaterialRelevancy'
@Component
export default class SynchronousOrderModal extends Vue {
  load = false;
  value = false;
  type=1;
  shopName = '';
  shopId:any = null;
  shopOptions=[{
    label:'犇云聚水潭店铺',
    value:2
  }]
  skus=''; //skus
  styles=''; //款式编码
  dateType:any=null;
  dateTypeOptions=[{
    label:'修改时间',
    value:1
  },{
    label:'创建时间',
    value:2
  }]
  beginDate='';
  endDate='';
  time:any=null;

  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.shopOptions){
        if(item.value = v){
          this.shopName = item.label
          break
        }
      }
    }else{
      this.shopName = ''
    }
  }
  btn(){
    let value:any={};
    let msg = '';
    if(!this.shopId){
      msg = '店铺名称'
    }else{
      value.shopId = this.shopId;
      value.showName = this.shopName;
    }
    
    value.type = this.type;
    if(this.type == 1){
      msg = this.msgInfo(this.skus,msg,'sku')
      value.skus = this.skus.split('\n');
    }else if(this.type == 2){
      msg = this.msgInfo(this.styles,msg,'款式编码')
      value.styles = this.styles.split('\n');
    }else if(this.type == 3){
      if(this.dateType < 1 || this.dateType > 2){
        if(msg){
          msg = msg + '，时间类型'
        }else{
          msg = '时间类型'
        }
      }
      msg = this.msgInfo(this.time,msg,'时间')
      value.dateType = this.dateType;
      value.beginDate = this.beginDate;
      value.endDate = this.endDate;
    }
    if(msg){
      this.$message({
        message:msg + '不能为空！',
        type: 'warning'
      })
      return
    }
    this.load = true;
    pullItem(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;
    })
  }
  msgInfo(data:any,msg:string,title:string){
    if(!data){
      if(msg){
        msg = msg + '，' + title;
      }else{
        msg = title
      }
    }
    return msg
  }
  hide(){
    this.clear();
  }
  clear(){
    this.type = 1;
    this.shopName = '';
    this.shopId = '';
    this.skus = '';
    this.dateType = '';
    this.beginDate = '';
    this.endDate = '';
    this.time = null;
    this.styles = '';
  }
}
</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;
  .t-title{
    width: 100px;
    text-align: right;
    >span{
      color: #F00;
    }
  }
  .right-cont{
    width: calc(100% - 100px);
  }
}
</style>