yos_web/src/SDrpManagement/salerOrder/modules/changeOrderReq.vue

<template>
  <div>
    <el-button type="primary" size="mini" :disabled="tableData.length === 0 || status != '审核' || tagChange" @click="onShow" @close="onClose">{{$t(`订单变更申请`)}}</el-button>
    <el-dialog :title="$t(`明细变更`)" 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="$t('产品名称')"
            width="180">
        </el-table-column>
        <el-table-column
            prop="itemno"
            :label="$t('产品编号')"
            width="180">
        </el-table-column>
        <el-table-column
            prop="erpitemno"
            :label="$t(`erp编号`)"
            width="180">
        </el-table-column>
        <el-table-column
            prop="model"
            :label="$t('型号')"
            width="150">
          <template slot-scope="scope">
            <p><span>{{scope.row.model}}</span></p>
          </template>
        </el-table-column>
        <el-table-column
            prop="spec"
            :label="$t('规格')"
            width="150">
          <template slot-scope="scope">
            <p><span>{{scope.row.spec}}</span></p>
          </template>

        </el-table-column>
        <el-table-column
            prop="qty"
            :label="$t(`原数量`)"
            width="180">
          <template slot-scope="scope">
            <span>{{scope.row.qty}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="qty"
            :label="$t(`已出货数量`)"
            width="180">
          <template slot-scope="scope">
            <span>{{scope.row.logisticsqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="deliedqty"
            :label="$t(`已发数量`)"
            width="180">
          <template slot-scope="scope">
            <span>{{scope.row.deliedqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="undeliqty"
            :label="$t(`未发数量`)"
            width="180">
          <template slot-scope="scope">
            <span>{{scope.row.undeliqty}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="newdeliverydate"
            v-if="siteid === 'HY'"
            :label="$t(`变更交期`)"
            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="$t('选择日期')">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
            prop="newvalue"
            :label="$t(`变更数量`)"
            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 ref="form" :model="form" :rules="rules" label-position="top" size="small">
        <el-form-item :label="$t(`变更原因`)" prop="typeclass" :label-width="formLabelWidth">
          <el-select v-model="form.typeclass" :placeholder="$t(`选择变更原因`)" style="width: 100%">
            <el-option
                v-for="item in changeReason"
                :key="item.value"
                :label="$t(item.value)"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t(`原因描述`)" prop="remarks" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" type="textarea" :autosize="{minRows:5}" :placeholder="$t(`输入原因描述`)" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose" size="small">{{$t('取 消')}}</el-button>
        <el-button type="primary" @click="submit" size="small">{{$t('确 定')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "changeOrderReq",
  props:['data','tableData','status','tagChange'],
  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:'',
        typeclass:'',
        remarks:''
      },
      deliverydate:'',
      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid,
      rules: {
        typeclass: [
          { required: true, message: this.$t("选择变更原因"), trigger: "change" },
        ],
        remarks: [
          { required: true, message: this.$t("输入原因描述"), trigger: "blur" },
        ],
      },
      changeReason:[]
    }
  },
  methods:{
    DateFocus(val){
      this.deliverydate = val
    },
    async onShow () {
      this.listData = this.tableData
      this.dialogVisible = true
      const res = await this.$store.dispatch('optiontypeselect','orderchangereason')
      this.changeReason = res.data
    },
    onClose(){
      this.form.remarks = ''
      this.form.qty = ''
      this.form.typeclass = ''
      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+this.$t("变更数量不能大于原数量"),
      //       type:"error",
      //       offset:index * 60
      //     })
      //     return row
      //   } else if (row.newvalue  < row.deliedqty) {
      //     this.$message({
      //       message:row.itemname+this.$t("变更数量不能小于已发货数量"),
      //       type:"error",
      //       offset:index * 60
      //     })
      //     return row
      //   }
      // })
      // if (arr.length > 0) {
      //   return false
      // } else {
      //   return true
      // }
      return valid
    },
    submit () {
      if (this.checkRowData()) {
        this.$refs.form.validate(async (valid)=>{
          if (!valid) return false
          const res = await this.$api.requested({
            "id": 2026033114502902,
            "content": {
              "sa_orderid":this.$route.query.id,//订单ID
              "type":'数量',//调整类型，目前只支持数量
              "typeclass":this.form.typeclass,
              "remarks":this.form.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.form.qty = ''
            this.form.typeclass = ''
            this.form.remarks = ''
            this.$emit('onSuccess')
          })
        })
      }
    },
  }
}
</script>

<style scoped>

</style>