anrui/anrui-scm/anrui-scm-ui/src/views/ruzhang/ruzhangguanli/ruzhangAdd.vue

<template>
  <div class="app-container">
    <div>
      <!--标题按钮部分开始-->
      <div class="tab-header webtop">
        <!--标题-->
        <div>{{ viewTitle }}</div>
        <!--start 添加修改按钮-->
        <div>
          <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveEdit()">保存</el-button>
          <el-button type="primary" size="small" @click="submitVehicleApply()">提交</el-button>
          <el-button type="info" size="small" @click="handleReturn()">返回</el-button>
        </div>
      </div>
      <!--标题按钮部分结束-->
      <!--Start 新增修改部分-->
      <div class="listconadd">
        <div class="wlInfo"><span>车辆入账单</span></div>
        <el-form ref="form_obj" :model="formobj" :rules="rules" label-position="top">
          <el-row class="lineone">
            <el-col :span="3" class="el-form-item-right"><el-form-item label="申请编号:" /></el-col>
            <el-col :span="5">
              <el-form-item><el-input v-model="formobj.applicationCode" readonly /></el-form-item>
            </el-col>
            <el-col :span="3" class="el-form-item-right"><el-form-item label="采购订单编号:" /></el-col>
            <el-col :span="5">
              <el-form-item><el-input v-model="formobj.purchaseOrderNo" readonly /></el-form-item>
            </el-col>
            <el-col :span="3" class="el-form-item-right"><el-form-item label="申请人:" /></el-col>
            <el-col :span="5">
              <el-form-item><el-input v-model="formobj.applicationName" readonly /></el-form-item>
            </el-col>
          </el-row>
          <el-row class="linetwo">
            <el-col :span="3" class="el-form-item-right"><el-form-item label="车型:" /></el-col>
            <el-col :span="21">
              <el-form-item><el-input v-model="formobj.modelName" readonly /></el-form-item>
            </el-col>
          </el-row>
          <el-row class="linetwo">
            <el-col :span="3" class="el-form-item-right"><el-form-item label="常用配置:" /></el-col>
            <el-col :span="21">
              <el-form-item><el-input v-model="formobj.configName" readonly /></el-form-item>
            </el-col>
          </el-row>
          <div class="tableStyle"><div style="margin-left: 5px;font-weight: bold">车辆列表</div></div>
          <el-table :key="tableKey" :data="formobj.vehicleList" :index="index" border style="width: 100%">
            <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center" />
            <el-table-column label="车架号" align="left" header-align="center">
              <template slot-scope="scope" prop="vehicleName">
                <el-input v-model="scope.row.vinNo" placeholder="" class="addinputw" clearable />
              </template>
            </el-table-column>
            <el-table-column label="备注" header-align="center">
              <template slot-scope="scope" prop="remarks">
                <el-input v-model="scope.row.remarks" placeholder="" class="addinputw" clearable />
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top: 10px">
            <el-col>
              <el-col :span="3" class="el-form-item-right"><el-form-item label="厂家发车日期:" /></el-col>
              <el-col :span="21">
                <el-form-item><el-date-picker v-model="formobj.departureDate" value-format="yyyy-MM-dd" clearable type="date" placeholder="开始日期" /></el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row class="linethree">
            <el-col :span="3" class="el-form-item-right"><el-form-item label="备注:" /></el-col>
            <el-col :span="21">
              <el-form-item><el-input v-model="formobj.remarks" clearable /></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--End 添加修改部分-->
  </div>
</template>

<script>
import req from '@/api/ruzhang/scmapplyinbound'
export default {
  name: 'RuzhangAdd',
  data() {
    return {
      viewTitle: '',
      index: 0,
      tableKey: 0,
      // 表单数据
      formobj: {
        sid: '', // 一条数据的sid
        userSid: window.sessionStorage.getItem('userSid'), // 用户人sid
        orgSidPath: window.sessionStorage.getItem('orgSidPath'),
        staffSid: window.sessionStorage.getItem('staffSid'),
        applicationCode: '', // 申请编号
        configName: '',
        departureDate: '',
        modelName: '',
        modelSid: '',
        purchaseOrderNo: '',
        remarks: '', // 备注
        vehicleOrderSid: '',
        taskId: '',
        vehicleList: [],
        businessSid:'',
        instanceId: ''
      },
      rules: {},
      submitdisabled: false
    }
  },
  methods: {
    showEdit(sid, row) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '【编辑】入账单'
      console.log('编辑回显', sid, row)
      req
        .fetchBySid(sid)
        .then(resp => {
          const data = resp.data
          this.formobj.applicationSid = data.applicationSid
          this.formobj.applicationName = data.applicationName
          this.formobj.applicationCode = data.applicationCode
          this.formobj.remarks = data.remarks
          this.formobj.sid = sid
          this.formobj.businessSid = sid
          this.formobj.configName = data.configName
          this.formobj.departureDate = data.departureDate
          this.formobj.modelName = data.modelName
          this.formobj.modelSid = data.modelSid
          this.formobj.purchaseOrderNo = data.purchaseOrderNo
          this.formobj.vehicleOrderSid = data.vehicleOrderSid
          this.formobj.taskId = data.taskId
          if (data.inboundVehicleList.length > 0) {
            data.inboundVehicleList.forEach(e => {
              this.formobj.vehicleList.push({
                applySid: e.applySid,
                remarks: e.remarks,
                modelSid: e.modelSid,
                sid: e.sid,
                vinNo: e.vinNo
              })
            })
          }
          // else {
          //   for (var i = 0; i < row[0].vehicleNum; i++) {
          //     this.formobj.vehicleList.push({
          //       applySid: '',
          //       remarks: '',
          //       modelSid: this.formobj.modelSid,
          //       sid: '',
          //       vinNo: ''
          //     })
          //   }
          // }
        })
        .catch(e => {
          this.formobj = row
        })
    },
    saveEdit() {
      console.log(this.formobj, 636363)
      this.$refs['form_obj'].validate(valid => {
        if (valid) {
          this.submitdisabled = true
          req
            .saveOrUpdate(this.formobj)
            .then(resp => {
              this.submitdisabled = false
             /* this.$message({
                showClose: true,
                type: 'success',
                message: resp.msg
              })*/
              if(resp.success){
                this.handleReturn('true')
              }
            })
            .catch(() => {
              this.submitdisabled = false
            })
        } else {
          return false
        }
      })
    },
    submitVehicleApply() {
      if(this.formobj.departureDate===''){
        alert('厂家发车日期不能为空');
        return ;
      }
      req.submitVehicleApply(this.formobj).then(res => {
        console.log(res.code, res.success)
        if (res.code === '200' && res.success) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '提交成功'
          })
          this.handleReturn('true')
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '提交失败'
          })
        }
      })
    },
    // 返回（===既判断又赋值）
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj.departureDate = ''
      this.formobj.remarks = '' // 备注
      this.formobj.vehicleList = []
      this.$refs['form_obj'].resetFields()
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.wlInfo {
  text-align: center;
  font-size: 28px;
  line-height: 90px;
}
.lineone {
  border-bottom: 2px solid #e0e3eb;
}
.lineone .el-form-item {
  margin-bottom: -10px;
}
.lineone >>> .el-input__inner {
  border: 0;
}
.linetwo {
  margin-top: 10px;
}
.linetwo .el-form-item {
  margin-bottom: 0px !important;
}
.linetwo >>> .el-input__inner {
  border: 0;
}
.linethree .el-form-item {
  margin-bottom: 0px !important;
}
.tableStyle {
  background-color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #dfe4ed;
  height: 40px;
}
.el-form-item-right {
  /* padding: 0 10px 0 0; */
  text-align: right;
}
</style>