yos_web/src/HDrpManagement/orderManage/details/tabs/changeOrderMx.vue

<template>
  <div>
    <el-button type="primary" size="small" :disabled="tableData.length === 0" @click="onShow">明细变更</el-button>
    <el-dialog title="明细变更" append-to-body :visible.sync="dialogVisible" width="900px">
      <el-table
        class="normal-margin"
        :data="listData"
        style="width: 100%"
        @close="onClose"
        border
        size="small">
        <el-table-column
          prop="itemname"
          label="产品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="itemno"
          label="产品编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="erpitemno"
          label="erp编号"
          width="180">
        </el-table-column>
        <el-table-column
            prop="model"
          label="型号"
          width="150">
          <template slot-scope="scope">
            <p><span>{{scope.row.model}}</span></p>
          </template>
        </el-table-column>
        <el-table-column
            prop="spec"
            label="规格"
            width="150">
          <template slot-scope="scope">
            <p><span>{{scope.row.spec}}</span></p>
          </template>

        </el-table-column>
         <el-table-column
          prop="qty"
          label="原数量"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.qty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deliedqty"
          label="已发数量"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.deliedqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="undeliqty"
          label="未发数量"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.undeliqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
            v-if="siteid === 'HY'"
            prop="newdeliverydate"
            label="变更交期"
            width="175"
            fixed="right">
          <template slot-scope="scope">
            <el-date-picker
                size="mini"
                style="width: 150px"
                v-model="scope.row.newdeliverydate"
                @focus="DateFocus(scope.row.deliverydate)"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                :picker-options="pickerOptions"
                placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          prop="newvalue"
          label="变更数量"
          width="180"
          fixed="right">
          <template slot-scope="scope">
            <el-input size="mini" @input="onInput(scope.row,scope.$index)"  v-model="scope.row.newvalue" ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-form :model="form" label-position="top" size="small">
        <el-form-item label="变更备注" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" type="textarea" :autosize="{minRows:5}" placeholder="输入变更备注" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props:['data','tableData'],
  data () {
    let that = this
    return {
      pickerOptions:{
        disabledDate(time){
          let newDate = new Date(that.deliverydate)
          newDate = newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate()
          let newTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
          if (time < new Date(new Date().getTime() - 24 * 60 * 60 * 1000 ) || newTime === newDate) {
            return true; // 禁用日期
          }
          return false; // 可选日期
        }
      },
      formLabelWidth:'80px',
      listData:[],
      dialogVisible:false,
      form:{
        qty:''
      },
      deliverydate:'',
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid
    }
  },
  methods:{
    DateFocus(val){
      this.deliverydate = val
    },
    onShow () {
      this.listData = this.tableData.map(e=>{
        e.newvalue = this.siteid === 'HY'?'':0
        return e
      })
      this.dialogVisible = true

    },
    onClose(){
      this.form.remarks = ''
      this.listData = this.tableData.map(e=>{
        e.newvalue = ''
        e.newdeliverydate = ''
        return e
      })
      this.dialogVisible = false
    },
    onInput(row,index) {
      row.newvalue = row.newvalue.replace(/[^\d]/g, '');
      this.$set(this.listData,index,row)
    },
    checkRowData () {
      let valid = true
      let arr = this.listData.filter((row,index)=>{
        if (row.newvalue > row.qty) {
          this.$message({
            message:row.itemname+"变更数量不能大于原数量",
            type:"error",
            offset:index * 60
          })
          return row
        } else if (row.newvalue  < row.deliedqty) {
          this.$message({
            message:row.itemname+"变更数量不能小于已发货数量",
            type:"error",
            offset:index * 60
          })
          return row
        }
      })
      if (arr.length > 0) {
        return false
      } else {
        return true
      }
    },
    async submit () {
      if (this.checkRowData()) {
        const res = await this.$api.requested({
          "id": 20221110145302,
          "content": {
            "sa_orderid":this.data.sa_orderid,//订单ID
            "type":"数量",//调整类型，目前只支持数量
            "remarks":this.data.remarks,
            "itemifnos":this.listData.map(e=>{
              return {
                sa_orderitemsid:e.sa_orderitemsid,
                itemid:e.itemid,
                newvalue:e.newvalue,
                newdeliverydate:e.newdeliverydate?e.newdeliverydate:''
              }
            })
          }
        })
        this.tool.showMessage(res,()=>{
          this.dialogVisible = false
          this.$emit('onSuccess')
        })
      }
    }
  }
}

</script>
<style>
</style>