js

src/views/OrderTrack/purAdd.vue

 <template>
   <section class="goods pagex">
     <div class="goods-con">
-      <el-form :inline="true" :model="formParam" label-width="90px">
+      <el-form :inline="true" :model="formParam" label-width="95px" :rules="rules" ref="ruleForm">
         <el-form-item>
-          <el-button type="primary" @click="submit">提交</el-button>
+          <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
           <el-button>取消</el-button>
         </el-form-item>
         <div class="tip-title" style="margin-top: 0">
           <p>基本信息</p>
         </div>
-        <el-form-item label="物流公司：">
-          <el-select v-model="formParam.shipping_id" placeholder="请选择">
+        <el-form-item label="物流公司：" prop="shipping_id">
+          <el-select v-model="formParam.shipping_id" placeholder="请选择" prop="shipping_id">
             <el-option value="13" label="联邦快递"></el-option>
             <el-option value="12" label="DHL国际快递"></el-option>
             <el-option value="1" label="顺丰速运"></el-option>
@@ -26,11 +26,11 @@
             <el-option value="17" label="UPS"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="物流单号：">
-          <el-input v-model="formParam.shipment_number" placeholder="请输入物流单号" @keyup.enter.native="submit"></el-input>
+        <el-form-item label="物流单号：" prop="shipment_number">
+          <el-input v-model="formParam.shipment_number" placeholder="请输入物流单号"></el-input>
         </el-form-item>
-        <el-form-item label="发货时间：">
-          <el-date-picker v-model="formParam.delivery_time" type="date" placeholder="请选择发货时间"></el-date-picker>
+        <el-form-item label="发货时间：" prop="delivery_time">
+          <el-date-picker v-model="formParam.delivery_time" type="date" placeholder="请选择发货时间" value-format="yyyy-MM-dd"></el-date-picker>
         </el-form-item>
         <el-form-item label="订货公司：">
           <span v-if="purOrderDetail.purchase_info">{{ purOrderDetail.purchase_info.company_name }}</span>
@@ -43,13 +43,13 @@
         </div>
       </el-form>
       <div class="data-box th-all">
-        <el-table :data="purOrderDetail.purchase_item_list" border max-height="600">
+        <el-table :data="purOrderDetail.purchase_item_list" border max-height="600" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" @select="onRowClick">
           <el-table-column fixed type="selection" width="37"></el-table-column>
           <el-table-column prop="goods_name" label="型号" min-width="15%"></el-table-column>
           <el-table-column prop="brand_name" label="品牌" min-width="15%"></el-table-column>
           <el-table-column prop="out_qty" label="发货数量" min-width="15%">
-            <template slot-scope="scope" >
-              <el-input v-model="formParam.itemlist[scope.$index].out_qty" placeholder="请输入内容"></el-input>
+            <template slot-scope="scope">
+              <el-input v-model="itemlist[scope.$index].out_qty" placeholder="请输入内容"></el-input>
             </template>
           </el-table-column>
           <el-table-column prop="no_out_qty" label="未发货数量" min-width="15%"></el-table-column>
@@ -77,6 +77,26 @@ export default {
     return {
       purOrderDetail: {},//基本信息,发货信息
       purchase_uid: '',
+      multipleSelection: [],//选中的数据
+      currentRowIndex: [],//选中数据的索引
+      rules: {
+        shipping_id: [{
+          required: true,
+          message: '请选择物流公司',
+          trigger: 'blur'
+        }],
+        shipment_number: [{
+          required: true,
+          message: '请输入物流单号',
+          trigger: 'blur'
+        }],
+        delivery_time: [{
+          required: true,
+          message: '请选择发货时间',
+          trigger: 'blur'
+        }]
+      },
+      itemlist: [],
       formParam: {
         company_id: '',
         shipping_id: '',
@@ -98,13 +118,13 @@ export default {
         if (res.code === 0) {
           this.purOrderDetail = res.data;
           this.formParam.company_id = res.data.purchase_info.company_id;
+          //组装formParam
           for (let i = 0; i < res.data.purchase_item_list.length; i++) {
-            this.formParam.itemlist.push({
+            this.itemlist.push({
               "purchase_item_id": res.data.purchase_item_list[i].purchase_item_id,
               "purchase_id": res.data.purchase_item_list[i].purchase_id,
               "out_qty": res.data.purchase_item_list[i].purchase_qty - res.data.purchase_item_list[i].out_qty
             })
-            console.log(this.formParam)
           }
         } else {
           this.$message({
@@ -121,17 +141,44 @@ export default {
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
-    submit() {
-      this.$http('POST', "/api/purchase/addSupDelivery", this.formParam).then(res => {
-        if (res.code === 0) {
+    tableRowClassName({row, rowIndex}) {
+      row.row_index = rowIndex
+    },
+    onRowClick(row) {
+      this.currentRowIndex = []
+      for (var i = 0; i < row.length; i++) {
+        this.currentRowIndex.push(row[i].row_index)
+      }
+    },
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.multipleSelection.length != 1) {
+            this.$message({
+              message: "请选择发货信息",
+              type: 'warning'
+            });
+            return false;
+          }
+
+          this.formParam.itemlist = JSON.stringify(this.itemlist);
+          this.$http('POST', "/api/purchase/addSupDelivery", this.formParam).then(res => {
+            if (res.code === 0) {
 
+            } else {
+              this.$message({
+                message: res.msg,
+                type: 'warning'
+              });
+            }
+          })
         } else {
-          this.$message({
-            message: res.msg,
-            type: 'warning'
-          });
+          console.log('error submit!!');
+          return false;
         }
-      })
+      });
+
+
     }
   },
   components: {