报表【面料损耗表】中页面逻辑小修改

src/views/reportForms/cost-allocation-add.vue

@@ -2,7 +2,7 @@
   <!-- 成本分配 （保存后数据到单证的成本分配汇总内）-->
   <div id="costAllocationAdd">
     <a-card :bordered="false">
-      <!-- 主表信息 -->
+      <!-- 主表信息 点击搜索后 全部回显--->
       <div class="table-page-search-wrapper">
         <a-form-model layout="inline" ref="form" :model="costAllocationAdd" :rules="validatorRules">
           <a-row :gutter="24">
@@ -17,16 +17,17 @@
                 />
               </a-form-model-item>
             </a-col>
-            <!-- 输入【计划单号】点击搜索后，回显以下所有信息，【备注】需要输入，后进行保存 -->
+            <!-- 输入【计划单号】点击搜索后，回显以下所有信息，【备注】需要输入，后进行保存 disabled -->
             <a-col :md="6" :sm="8">
               <a-form-model-item label="产品款号" prop="poStyleNum">
-                <a-input v-model="costAllocationAdd.poStyleNum" disabled></a-input>
+                产品款号AZ2445
+                <!-- <a-input v-model="costAllocationAdd.poStyleNum" disabled></a-input> -->
               </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
               <a-form-model-item label="外销员" prop="exportSales">
-                <a-input v-model="costAllocationAdd.exportSales" disabled></a-input>
+                <a-input v-model="costAllocationAdd.exportSales" ></a-input>
               </a-form-model-item>
             </a-col>
 
@@ -254,11 +255,20 @@
         </div>
       </div>
 
-      <!-- 备注信息 2 根据角色权限控制【填写】、【查看】-->
-      <!-- <div class="note-two" style="margin:40px 0 40px 0;">
+      <!-- 备注信息 2 根据角色判断 显示备注 1 或备注 2-->
+      <!-- <div class="note-one" style="marginTop:40px;">
         <h6 class="table-title">备注信息 2</h6>
         <div class="noteDetail">
-          <a-input type="textarea" v-model="noteTwo" placeholder="请输入备注 2" style="minHeight:100px;" />
+          <a-form-model ref="form" :model="costAllocationAdd" :rues="validatorRules">
+            <a-form-model-item prop="noteOne">
+              <a-input
+                type="textarea"
+                v-model="costAllocationAdd.noteTwo"
+                placeholder="请输入备注"
+                style="minHeight:100px;"
+              />
+            </a-form-model-item>
+          </a-form-model>
         </div>
       </div> -->
 
@@ -372,7 +382,7 @@ export default {
     // --------------------------------------
     // 页面 保存
     save() {
-      console.log('保存该计划单号的备注、数据保存到单证【成本分配汇总】')
+      console.log('保存该计划单号的备注、数据保存到单证【成本分配汇总】，覆盖该计划单号之前的信息')
       const that = this
       this.$refs.form.validate(valid => {
         if (valid) {

src/views/reportForms/fabric-loss-table.vue

@@ -1,81 +1,96 @@
 <template>
   <!-- 面料损耗表 -->
   <div id="fabricLossTable">
-    <!-- 主要信息 -->
+    <!-- 主要信息 点击搜索后 全部回显-->
     <a-card title="主要信息">
       <a-row :gutter="24">
         <div class="table-page-search-wrapper">
-          <a-form layout="inline">
+          <a-form-model layout="inline" ref="form" :model="fabricLoss" :rules="validatorRules">
             <a-col :md="6" :sm="8">
-              <a-form-item label="计划单号">
-                <a-input v-model="fabricLoss.planNum"></a-input>
-              </a-form-item>
+              <a-form-model-item label="计划单号">
+                <a-input-search
+                  placeholder="请输入计划单号"
+                  enter-button
+                  v-model="fabricLoss.planNum"
+                  @search="onSearch"
+                />
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="款号" has-feedback>
-                <a-input v-model="fabricLoss.styleNum"></a-input>
-              </a-form-item>
+              <a-form-model-item label="款号" has-feedback>
+                款号68574
+                <!-- <a-input v-model="fabricLoss.styleNum"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="计划员">
-                <a-input v-model="fabricLoss.planner"></a-input>
-              </a-form-item>
+              <a-form-model-item label="计划员">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.planner"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="成衣合同号">
-                <a-input v-model="fabricLoss.garmentContractNo"></a-input>
-              </a-form-item>
+              <a-form-model-item label="成衣合同号">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.garmentContractNo"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="排单数量">
-                <a-input v-model="fabricLoss.singleRowNum"></a-input>
-              </a-form-item>
+              <a-form-model-item label="排单数量">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.singleRowNum"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="业务员">
-                <a-input v-model="fabricLoss.salesman"></a-input>
-              </a-form-item>
+              <a-form-model-item label="业务员">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.salesman"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="实际单件成本">
-                <a-input v-model="fabricLoss.actualUnitCost"></a-input>
-              </a-form-item>
+              <a-form-model-item label="实际单件成本">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.actualUnitCost"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="实际出库数量">
-                <a-input v-model="fabricLoss.actualOutQuantity"></a-input>
-              </a-form-item>
+              <a-form-model-item label="实际出库数量">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.actualOutQuantity"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="制单人">
-                <a-input v-model="fabricLoss.preparedBy"></a-input>
-              </a-form-item>
+              <a-form-model-item label="制单人">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.preparedBy"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="单件成本">
-                <a-input v-model="fabricLoss.costPerUnit"></a-input>
-              </a-form-item>
+              <a-form-model-item label="单件成本">
+                此处回显信息
+                <!-- <a-input v-model="fabricLoss.costPerUnit"></a-input> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="查询日期">
-                <a-date-picker style="width: 100%" v-model="fabricLoss.queryDate"></a-date-picker>
-              </a-form-item>
+              <a-form-model-item label="查询日期">
+                此处回显信息
+                <!-- <a-date-picker style="width: 100%" v-model="fabricLoss.queryDate"></a-date-picker> -->
+              </a-form-model-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
               <a-button type="primary">附件</a-button>
             </a-col>
-          </a-form>
+          </a-form-model>
         </div>
       </a-row>
     </a-card>
@@ -258,46 +273,66 @@
         </a-table>
       </div>
 
-      <!-- 备注信息 1 根据角色权限控制【填写】、【查看】-->
+      <!-- 备注信息 1 根据角色判断 显示备注 1 或备注 2-->
       <div class="note-one" style="marginTop:40px;">
         <h6 class="table-title">备注信息 1</h6>
         <div class="noteDetail">
-          <a-input type="textarea" v-model="noteOne" placeholder="请输入备注 1" style="minHeight:100px;" />
-          <a-button type="primary" @click="saveNoteOne">保存</a-button>
+          <a-form-model ref="form" :model="fabricLoss" :rues="validatorRules">
+            <a-form-model-item prop="noteOne">
+              <a-input type="textarea" v-model="fabricLoss.noteOne" placeholder="请输入备注" style="minHeight:100px;" />
+            </a-form-model-item>
+          </a-form-model>
         </div>
       </div>
 
-      <!-- 备注信息 2 根据角色权限控制【填写】、【查看】-->
-      <div class="note-two" style="marginTop:40px;">
+      <!-- 备注信息 2 根据角色判断 显示备注 1 或备注 2-->
+      <!-- <div class="note-one" style="marginTop:40px;">
         <h6 class="table-title">备注信息 2</h6>
         <div class="noteDetail">
-          <a-input type="textarea" v-model="noteTwo" placeholder="请输入备注 2" style="minHeight:100px;" />
-          <a-button type="primary" @click="saveNoteTwo">保存</a-button>
+          <a-form-model ref="form" :model="fabricLoss" :rues="validatorRules">
+            <a-form-model-item prop="noteOne">
+              <a-input
+                type="textarea"
+                v-model="fabricLoss.noteTwo"
+                placeholder="请输入备注"
+                style="minHeight:100px;"
+              />
+            </a-form-model-item>
+          </a-form-model>
         </div>
-      </div>
+      </div> -->
+
+      <!-- 页面底部保存 -->
+      <a-row :gutter="24" style="marginTop:40px;float:right">
+        <a-col :md="12" :sm="12">
+          <a-button type="primary" @click="save">
+            保存
+          </a-button>
+        </a-col>
+      </a-row>
 
-      <!-- 所有弹框 -->
+      <!-- 弹框 -->
       <div>
         <!-- 采购数量弹框  @ok="modalFormOk"-->
         <purchaseAmount-modal ref="purchaseAmountModal" :father="aa"></purchaseAmount-modal>
 
         <!-- 余纱 -->
-        <surplusYarn-modal ref="surplusYarnModal" :father="aa"></surplusYarn-modal>
+        <surplusYarn-modal ref="surplusYarnModal" :father="bb"></surplusYarn-modal>
 
         <!-- 委外订单国内弹框 -->
-        <materialsOutQuantity-modal ref="materialsOutQuantityModal" :father="aa"></materialsOutQuantity-modal>
+        <materialsOutQuantity-modal ref="materialsOutQuantityModal" :father="cc"></materialsOutQuantity-modal>
 
         <!-- 采购入库数量弹框 -->
-        <purchaseInQuantity-modal ref="purchaseInQuantityModal" :father="aa"></purchaseInQuantity-modal>
+        <purchaseInQuantity-modal ref="purchaseInQuantityModal" :father="dd"></purchaseInQuantity-modal>
 
         <!-- 发票号码弹框 -->
-        <invoiceNum-modal ref="invoiceNumModal" :father="aa"></invoiceNum-modal>
+        <invoiceNum-modal ref="invoiceNumModal" :father="ee"></invoiceNum-modal>
 
         <!-- 发票数量弹框 -->
-        <invoiceQuantity-modal ref="invoiceQuantityModal" :father="aa"></invoiceQuantity-modal>
+        <invoiceQuantity-modal ref="invoiceQuantityModal" :father="ff"></invoiceQuantity-modal>
 
         <!-- 事故单 -->
-        <accidentList-modal ref="accidentListModal" :father="aa"></accidentList-modal>
+        <accidentList-modal ref="accidentListModal" :father="gg"></accidentList-modal>
       </div>
     </a-card>
   </div>
@@ -332,9 +367,11 @@ export default {
   },
   data() {
     return {
-      fabricLoss: [], // 主表信息
+      fabricLoss: {}, // 主表信息
       loading: false, // 表格加载
-
+      validatorRules: {
+        planNum: [{ required: true, message: '请输入计划单号进行搜索', trigger: 'blur' }]
+      },
       // 采购订单 表头
       purchaseOrderColumns: [
         { title: '货物名称', width: 120, dataIndex: 'goodsName', className: 'replacecolor' },
@@ -652,6 +689,11 @@ export default {
   },
 
   methods: {
+    // 【计划单号】 搜索
+    onSearch(value) {
+      console.log('【计划单号】 ', value)
+      // 根据计划单号查询该页面所有信息且回显
+    },
     // 【采购数量】单元格 弹框
     purchaseQuantityCustomCell(record) {
       return {
@@ -819,17 +861,30 @@ export default {
         }
       }
     },
-    // ---------------------------------
-    // 保存备注 1
-    saveNoteOne() {
-      console.log('保存 备注 1')
-    },
-    // 保存备注 2
-    saveNoteTwo() {
-      console.log('保存 备注 2')
+
+    save() {
+      console.log('保存，数据保存到哪？')
+      const that = this
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //  alert('保存!')
+          console.log('备注信息:', this.fabricLoss.noteOne, '计划单号:', this.fabricLoss.planNum)
+          // that.$message.success(res.message)
+          that.$message.success('保存成功，数据添加到成本分配汇总')
+        } else {
+          this.$message.info('请选择计划单号、输入备注信息')
+        }
+      })
     },
 
-    aa() {} // father
+    // father
+    aa() {},
+    bb() {},
+    cc() {},
+    dd() {},
+    ee() {},
+    ff() {},
+    gg() {}
   },
 
   // 出现滚动条，合计栏跟随 table 滚动