anrui/anrui-buscenter/anrui-buscenter-ui/src/views/xiaoshouguanli/jiaochebanli/trailerconfirmeddelivery.vue

<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <!--标题-->
      <div>{{ viewTitle }}</div>
      <!--start 添加修改按钮-->
      <div>
        <el-button type="primary" size="small" :disabled="submitdisabled" @click="handleConfirm()">确认
        </el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <div class="titwu">确认交付信息</div>
      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
        <el-row style="border-top: 1px solid #E0E3EB">
          <el-col :span="8">
            <div class="span-sty"><span><span class="icon">*</span>接收人</span></div>
            <el-form-item prop="recipient"><el-input v-model="formobj.recipient" clearable placeholder="" class="addinputInfo" style="width: 50%"/></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty"><span><span class="icon">*</span>身份证号</span></div>
            <el-form-item prop="idNo"><el-input v-model="formobj.idNo" clearable placeholder="" class="addinputInfo addinputw" style="width: 50%"/></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty"><span><span class="icon">*</span>联系电话</span></div>
            <el-form-item prop="mobile"><el-input v-model="formobj.mobile" clearable placeholder="" class="addinputInfo addinputw" style="width: 50%"/></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="span-sty"><span>车辆交付日期</span></div>
            <el-form-item><span class="addinputInfo">{{ formobj.deliverDate }}</span></el-form-item>
          </el-col>
          <el-col :span="16">
            <div class="span-sty"><span><span class="icon">*</span>车辆交付地点</span></div>
            <el-form-item prop="deliverAddress">
              <el-form-item prop="mobile"><el-input v-model="formobj.deliverAddress" clearable placeholder="" class="addinputInfo addinputw" style="width: 50%"/></el-form-item>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { saveGcVinBill } from '@/api/jiaochebanli/cardelivery'

export default {
  name: 'GuaCheJiaoFuQueRen',
  data() {
    return {
      viewTitle: '',
      submitdisabled: false,
      formobj: {
        sid: '',
        userSid: '',
        orgSidPath: '',
        recipient: '',
        idNo: '',
        mobile: '',
        deliverDate: '',
        deliverAddress: '',
      },
      rules: {
        recipient: [{ required: true, message: '接收人不能为空', trigger: 'blur' }],
        idNo: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
        deliverAddress: [{ required: true, message: '车辆交付地点不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    showInfo(row) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '确认交付'
      this.formobj.sid = row.sid
      this.formobj.userSid = window.sessionStorage.getItem('userSid')
      this.formobj.orgSidPath = window.sessionStorage.getItem('defaultOrgPath')
      var nowDate = new Date()
      var date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        day: nowDate.getDate()
      }
      this.formobj.deliverDate = date.year + '-' + (date.month >= 10 ? date.month : '0' + date.month) + '-' + (date.day >= 10 ? date.day : '0' + date.day)
    },
    handleConfirm() {
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.submitdisabled = true
          const loading = this.$loading({
            lock: true,
            text: '交付信息正在生成中,请稍等',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          saveGcVinBill(this.formobj).then((res) => {
            if (res.success) {
              loading.close()
              this.$message({ showClose: true, type: 'success', message: '操作成功' })
              this.handleReturn('true')
            }
          })
        }
      })
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj = {
        sid: '',
        userSid: '',
        orgSidPath: '',
        recipient: '',
        idNo: '',
        mobile: '',
        deliverDate: '',
        deliverAddress: ''
      }
      this.submitdisabled = false
      this.$refs['form_obj'].resetFields()
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 130px !important;
}
.addinputInfo {
  margin-left: 120px !important;
}
/deep/ .el-form-item__error {
  margin-left: 120px;
}
</style>