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

<template>
  <vxe-modal v-model="value" id="splitModel" title="拆分订单" width="70%" height="80%" min-width="460" min-height="320" show-zoom resize transfer :show-footer="!hideBtn" v-loading="load">
    <by-table :propConfig="config" ref="table" id="split-table"> 
      <template v-slot:num="{row}">
        <vxe-input v-model="row.num" v-if="row.splitNum > 0" placeholder="请输入" type="integer" @input="onChangeRow(row)"></vxe-input>
      </template>
    </by-table>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</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 { splitQtyQuery,split } from '@/api/omsOrder'
@Component({components:{}})
export default class SplitModel extends Vue {
  value=false;
  load=false;
  billData:any=null;
  hideBtn=false;
  data:Array<any>=[]
  config:any={
    attr:{
      size:'small',
      seq:true
    },
    columns:[{
      title:'名称',
      field:'name',
      width:300
    },{
      title:'价格',
      field:'price',
      width:130
    },{
      title:'商品数量',
      field:'qty',
      width:130
    },{
      title:'可拆分数量',
      field:'splitNum',
      width:130
    },{
      title:'拆分数量',
      field:'num',
      slot:true,
      // component:'by-input',
      // compConfig:{
      //   attr:{
      //     size:'mini',
      //     type:'integer'
      //   }
      // }
    }]
  }

  setShow(v:boolean){
    this.hideBtn = false;
    this.value = v;
  }
  setData(data:any){
    if(data){
      this.billData = data;
      this.data = [];
      if(data.items) {
        for(const item of data.items){
          item.splitNum = item.qty - item.splitQty
          this.data.push(item)
        }
      }
      // this.getSplitNum(data);
    }else{
      this.billData = null;
      this.data = [];
    }
    this.$nextTick(()=>{
      let height = (document.getElementById('split-table') as any).parentNode.offsetHeight;
      this.config.attr.height=height - 36;
      if(this.$refs.table){
        (this.$refs.table as any).setConfig(this.config);
        (this.$refs.table as any).setValue(this.data);
      }
    })
  }
//获取可拆分数量
  getSplitNum(v:any){
    if(!v) return;
    let data = v.items?v.items:[];
    if(data.length == 0) return;
    this.load = true;
    splitQtyQuery({id:v.id}).then((res:any) => {
      this.load = false;
      if(res.data){
        let j = 0;
        for(const item of data){
          let n = Number(res.data[item.id]);
          if(n){
            item.splitNum = item.qty - n;
          }else{
            item.splitNum = item.qty;
          }
          this.data.push(item)
          if(item.splitNum == 0){
            j++
          }
        }
        if(j == this.data.length){
          this.hideBtn = true
        }
        (this.$refs.table as any).setValue(this.data);
      }
    }).catch((err:any) => {
      this.load = false
    })
  }

  btn(){
    let data = (this.$refs.table as any).getValue();
    let info:Array<any>=[];
    if(data.length == 0){
      this.$message('未有数据不能执行此操作！')
      return
    }
    for(const item of data){
      if(Number(item.num) > 0){
        info.push({
          qty:Number(item.num),
          orderItemId:item.id
        })
      }
    }
    if(info.length == 0){
      this.$message('请设置拆分数量！')
      return
    }
    this.load = true;
    split({
      id:this.billData.id,
      splitInfos:info
    }).then((res:any) => {
      this.load = false;
      this.$message({
        message:'拆分成功！',
        type:'success'
      })
      this.$emit('handleSuccess');
      this.value = false;
    }).catch(() => {
      this.load = false
    })
  }

  onChangeRow(row:any){
    if(Number(row.splitNum) < Number(row.num)){
      this.$message('拆分数量不能大于可拆分数量！');
      row.num = 0;
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>