创建采购单前端优化

jnpf-java-boot/jnpf-web/src/views/yys/yysmaterialprocurementplan/form.vue

@@ -33,6 +33,14 @@
           >
             保 存</el-button
           >
+          <el-button
+            type="success"
+            @click="dataFormSubmit()"
+            :loading="btnLoading"
+            :disabled="continueBtnLoading"
+          >
+            提交</el-button
+          >
           <el-button @click="goBack"> 取 消</el-button>
         </div>
       </div>
@@ -321,7 +329,7 @@
                       <el-button
                         size="mini"
                         type="text"
-                        @click="fnCreateProcurementOrder(scope.row)"
+                        @click="fnProcurementOrderCreate(scope.row)"
                         >生成采购单</el-button
                       >
                     </template>
@@ -401,7 +409,10 @@
           </template>
         </el-form>
         <el-col :span="24">
-          <el-row :style="{ margin: '0 auto', width: '100%' }">
+          <el-row
+            v-if="isOrdering == true"
+            :style="{ margin: '0 auto', width: '100%' }"
+          >
             <el-col :span="3"><div style="height:10px;"></div></el-col>
             <el-col :span="16">
               <el-row :style="{ margin: '0 auto', width: '100%' }">
@@ -411,24 +422,24 @@
                 <el-col :span="24">
                   <el-row style="padding: 20px 0px;">
                     <el-col :span="5"
-                      >物料编码：{{ purchaseOrderItem.materialCode }}</el-col
+                      >物料编码：{{ procurementOrderItem.materialCode }}</el-col
                     >
                     <el-col :span="5"
-                      >物料名称：{{ purchaseOrderItem.materialName }}</el-col
+                      >物料名称：{{ procurementOrderItem.materialName }}</el-col
                     >
                     <el-col :span="5"
-                      >物料类型：{{ purchaseOrderItem.materialType }}</el-col
+                      >物料类型：{{ procurementOrderItem.materialType }}</el-col
                     >
                     <el-col :span="5"
-                      >欠缺量：{{ purchaseOrderItem.lackNumber }}</el-col
+                      >欠缺量：{{ procurementOrderItem.lackNumber }}</el-col
                     >
                     <el-col :span="4"
-                      >计量单位：{{ purchaseOrderItem.unit }}</el-col
+                      >计量单位：{{ procurementOrderItem.unit }}</el-col
                     >
                   </el-row>
                 </el-col>
                 <el-col :span="24">
-                  <el-table :data="purchaseOrderList" size="mini" border>
+                  <el-table :data="procurementOrderList" size="mini" border>
                     <el-table-column
                       type="index"
                       width="50"
@@ -439,7 +450,28 @@
                       <template slot="header">
                         <span class="required-sign">*</span> 供应商
                       </template>
-                      <template slot-scope="scope"> </template>
+                      <template slot-scope="scope">
+                        <JnpfPopupSelect
+                          v-model="dataForm.planNumber"
+                          @change="changeData('planNumber', -1)"
+                          :rowIndex="null"
+                          :formData="dataForm"
+                          :templateJson="interfaceRes.planNumber"
+                          placeholder="请选择"
+                          propsValue="plan_number"
+                          popupWidth="800px"
+                          popupTitle="选择数据"
+                          popupType="dialog"
+                          relationField="plan_number"
+                          field="planNumber"
+                          interfaceId="591169965881556997"
+                          :pageSize="20"
+                          :columnOptions="planNumbercolumnOptions"
+                          clearable
+                          :style="{ width: '100%' }"
+                        >
+                        </JnpfPopupSelect>
+                      </template>
                     </el-table-column>
                     <el-table-column label="下单数量" prop="orderQuantity">
                       <template slot="header">
@@ -481,6 +513,22 @@
                     <el-button type="text" icon="el-icon-plus">添加</el-button>
                   </div>
                 </el-col>
+                <el-col
+                  :span="24"
+                  :style="{ textAlign: 'center', margin: '30px 0px' }"
+                >
+                  <el-button
+                    :style="{ margin: '0px 30px' }"
+                    @click="fnProcurementOrderCancel"
+                    >取消</el-button
+                  >
+                  <el-button
+                    type="primary"
+                    :style="{ margin: '0px 30px' }"
+                    @click="fnProcurementOrderSub"
+                    >提交</el-button
+                  >
+                </el-col>
               </el-row>
             </el-col>
           </el-row>
@@ -604,7 +652,8 @@ export default {
         yysmaterialprocurementitemprocurementPlanNumber: [],
         yysmaterialprocurementitemunit: []
       },
-      purchaseOrderItemO: {
+      isOrdering: false,
+      procurementOrderItemO: {
         orderNumber: undefined,
         orderDate: undefined,
         procurementNumber: undefined,
@@ -625,7 +674,7 @@ export default {
         orderStatus: undefined,
         orderFiles: []
       },
-      purchaseOrderItem: {
+      procurementOrderItem: {
         orderNumber: undefined,
         orderDate: undefined,
         procurementNumber: undefined,
@@ -646,7 +695,7 @@ export default {
         orderStatus: undefined,
         orderFiles: []
       },
-      purchaseOrderList: []
+      procurementOrderList: []
     };
   },
   computed: {
@@ -660,18 +709,26 @@ export default {
   },
   mounted() {},
   methods: {
-    fnCreateProcurementOrder(row) {
+    fnProcurementOrderCreate(row) {
-      this.purchaseOrderItem = { ...this.purchaseOrderItemO };
+      this.procurementOrderItem = { ...this.procurementOrderItemO };
-      this.purchaseOrderItem.materialCode = row.materialCode;
+      this.procurementOrderItem.materialCode = row.materialCode;
-      this.purchaseOrderItem.materialName = row.materialName;
+      this.procurementOrderItem.materialName = row.materialName;
-      this.purchaseOrderItem.materialType = row.materialType;
+      this.procurementOrderItem.materialType = row.materialType;
-      this.purchaseOrderItem.lackNumber = row.lackNumber;
+      this.procurementOrderItem.lackNumber = row.lackNumber;
-      this.purchaseOrderItem.unit = row.unit;
+      this.procurementOrderItem.unit = row.unit;
-      this.purchaseOrderList = [];
+      this.procurementOrderList = [];
-      this.purchaseOrderList.push(this.purchaseOrderItem);
+      this.procurementOrderList.push({ ...this.procurementOrderItem });
+      this.isOrdering = true;
     },
     fnProcurementOrderItemAdd() {
-      this.purchaseOrderList.push(this.purchaseOrderItem);
+      this.procurementOrderList.push({ ...this.procurementOrderItem });
+    },
+    fnProcurementOrderCancel() {
+      this.procurementOrderList = [];
+      this.isOrdering = false;
+    },
+    fnProcurementOrderSub() {
+      console.log(this.procurementOrderList);
     },
     prev() {
       this.index--;