pty静态交易完善

src/utils/index.js

@@ -152,6 +152,12 @@ export default class Utils {
         return output.join('');
     }
 
+    /**
+     * 执行checkAll之后根据返回的错误信息定位
+     * @param {Object} fieldErrors 错误信息
+     * @param {Array} formFields 表单字段
+     * @returns El-Tab实例
+     */
     static positioningErrorMsg(fieldErrors, formFields) {
         if (Object.keys(fieldErrors).length === 0) {
             return null;
@@ -189,7 +195,60 @@ export default class Utils {
             }
             if (firstErrorTab) {
                 const tabs = firstErrorTab.$parent
-                tabs.value = firstErrorTab.name
+                tabs.currentName = firstErrorTab.name
+            }
+            if (collapsePanel && collapsePanel.collapse.activeNames.indexOf(collapsePanel.name) < 0) {
+                collapsePanel.collapse.activeNames.push(collapsePanel.name)
+            }
+            setTimeout(() => {
+                // 滚动到指定节点
+                firstErrorItem.$el.scrollIntoView({
+                    // 值有start,center,end，nearest，当前显示在视图区域中间
+                    block: 'center', 
+                    // 值有auto、instant,smooth，缓动动画（当前是慢速的）
+                    behavior: 'smooth' 
+                })
+            }, 0)
+        }
+        return firstErrorTab;
+    }
+
+    /**
+     * 表单自身的validate方法执行后，错误提示定位
+     * @param {Array} formFields 表单字段
+     * @returns El-Tab实例
+     */
+    static formValidateTips(formFields) {
+        let firstErrorItem = null
+        // 顺序
+        for (let i = 0; i < formFields.length; i++) {
+            const field = formFields[i];
+            if (field.validateState === 'error') {
+                firstErrorItem = field
+                break;
+            }                
+        }
+        let firstErrorTab = null, collapsePanel = null
+        if (firstErrorItem) {
+            let parentVC = firstErrorItem
+            while(!firstErrorTab) {
+                const vcName = parentVC.$options.componentName
+                // 没有Tabs的表单
+                if (vcName === "ElForm") {
+                    break;
+                }
+                if (vcName === "ElTabPane") {
+                    firstErrorTab = parentVC
+                    break;
+                }
+                if (vcName === "ElCollapseItem") {
+                    collapsePanel = parentVC;
+                }
+                parentVC = parentVC.$parent;
+            }
+            if (firstErrorTab) {
+                const tabs = firstErrorTab.$parent
+                tabs.currentName = firstErrorTab.name
             }
             if (collapsePanel && collapsePanel.collapse.activeNames.indexOf(collapsePanel.name) < 0) {
                 collapsePanel.collapse.activeNames.push(collapsePanel.name)

src/views/Statics/Dbapty/index.vue

 <template>
-	<m-pty title="dbapty" type="add"></m-pty>
+	<m-pty ref="pty" title="dbapty" type="add"></m-pty>
 </template>
 
 <script>
@@ -13,6 +13,11 @@ export default {
   data() {
     return {};
   },
+  mounted() {
+    this.$refs.pty.rules['ptaList'] = [
+      { type: 'array', required: true, min: 1, message: '地址信息栏不能为空' }
+    ]
+  }
 };
 </script>
 

src/views/Statics/Dbipty/Adr.js

@@ -47,6 +47,9 @@ export default class Pty {
 			namelc: "",
 			adrelc: "",
 			dtgcid: "",
+			// pat
+			usgpat: '',
+			adrstapat: ''
 		}
 	}
 }

src/views/Statics/Dbipty/AdrList.vue

@@ -3,37 +3,39 @@
     <div style="text-align: right">
       <c-button size="small" type="primary" @click="adrAdd()"> 新增 </c-button>
     </div>
-    <c-table :columnsConfig="columns" :list="model.ptaList">
-      <c-table-column fixed="right" prop="op" label="操作" width="200px">
-        <template slot-scope="{ scope }">
-          <button
-            class="el-button el-button--default el-button--small"
-            style="margin-left: 0"
-            size="small"
-            :disabled="false"
-            @click.prevent="adrInfo(scope.$index, scope.row)"
-          >
-            <span>详情</span>
-          </button>
-          <c-button
-            style="margin-left: 5px"
-            size="small"
-            type="primary"
-            @click="adrEdit(scope.$index, scope.row)"
-          >
-            修改
-          </c-button>
-          <c-button
-            style="margin-left: 5px"
-            size="small"
-            type="primary"
-            @click="adrDelete(scope.$index, scope.row)"
-          >
-            删除
-          </c-button>
-        </template>
-      </c-table-column>
-    </c-table>
+    <el-form-item label="" label-width="0" prop="ptaList">
+      <c-table :columnsConfig="columns" :list="model.ptaList">
+        <c-table-column fixed="right" prop="op" label="操作" width="200px">
+          <template slot-scope="{ scope }">
+            <button
+              class="el-button el-button--default el-button--small"
+              style="margin-left: 0"
+              size="small"
+              :disabled="false"
+              @click.prevent="adrInfo(scope.$index, scope.row)"
+            >
+              <span>详情</span>
+            </button>
+            <c-button
+              style="margin-left: 5px"
+              size="small"
+              type="primary"
+              @click="adrEdit(scope.$index, scope.row)"
+            >
+              修改
+            </c-button>
+            <c-button
+              style="margin-left: 5px"
+              size="small"
+              type="primary"
+              @click="adrDelete(scope.$index, scope.row)"
+            >
+              删除
+            </c-button>
+          </template>
+        </c-table-column>
+      </c-table>
+    </el-form-item>
 
     <el-dialog
       :title="
@@ -86,6 +88,7 @@ export default {
   components: {
     "m-adr-info": AdrInfo,
   },
+  inject: ["root"],
   props: ["model"],
   data() {
     return {
@@ -110,23 +113,35 @@ export default {
     };
   },
   methods: {
+    /**
+     * 详情
+     */
     adrInfo(index, row) {
       this.adr = { ...row };
       this.operate = "details";
       this.operateIdx = index;
       this.adrDialog = true;
     },
+    /**
+     * 新增
+     */
     adrAdd() {
       this.adr = new Adr().data;
       this.operate = "add";
       this.adrDialog = true;
     },
+    /**
+     * 修改
+     */
     adrEdit(index, row) {
       this.adr = { ...row };
       this.operate = "edit";
       this.operateIdx = index;
       this.adrDialog = true;
     },
+    /**
+     * 删除
+     */
     adrDelete(index, row) {
       this.$confirm("是否真的删除？", "提示", {
         confirmButtonText: "确认",
@@ -164,23 +179,33 @@ export default {
         }
       });
     },
+    /**
+     * Adr新增有2种情况
+     * 1. pty的新增界面下，此时pty的inr为空，adr需要在pty插入之后，才能执行新增，
+     *    所以我们在这里不能直接调用新增接口，将adr添加到ptaList中，随着这个pty一起传入接口。
+     * 2. pty的修改界面下，可直接新增 ；
+     */
     saveAdr() {
-      this.$refs.adr.$refs.modelForm.validate((validated) => {
-        if (validated) {
-          addAdrData(this.model.inr, this.adr)
-            .then((res) => {
-              if (res) {
-                this.$message.success("保存地址信息成功！");
-                // this.model.ptaList.push(res);
-                this.model.ptaList = res.ptaList;
-                this.handleClose();
-              }
-            })
-            .catch((error) => {
-              this.$message.error("保存地址信息失败！");
-            });
-        }
-      });
+      if (this.root.type === "add") {
+        this.model.ptaList.push(this.adr);
+        this.handleClose();
+      } else {
+        this.$refs.adr.$refs.modelForm.validate((validated) => {
+          if (validated) {
+            addAdrData(this.model.inr, this.adr)
+              .then((res) => {
+                if (res && res.inr) {
+                  this.$message.success("保存地址信息成功！");
+                  this.model.ptaList = res.ptaList;
+                  this.handleClose();
+                }
+              })
+              .catch((error) => {
+                this.$message.error("保存地址信息失败！");
+              });
+          }
+        });
+      }
     },
     handleClose(done) {
       this.adrDialog = false;

src/views/Statics/Dbipty/index.vue

@@ -68,6 +68,7 @@
 </template>
 
 <script>
+import Utils from "~/utils";
 import Pty, { Pattern } from "./Pty.js";
 
 import PtyInfo from "./PtyInfo.vue";
@@ -138,6 +139,8 @@ export default {
             .catch((err) => {
               this.$message.error("保存失败！");
             });
+        } else {
+          Utils.formValidateTips(this.$refs.modelForm.fields)
         }
       });
     },
@@ -152,6 +155,8 @@ export default {
             .catch((err) => {
               this.$message.error("保存失败！");
             });
+        } else {
+          Utils.formValidateTips(this.$refs.modelForm.fields)
         }
       });
     },
@@ -185,6 +190,7 @@ export default {
       this.$store.dispatch("TagsView/delView", this.$route);
       this.$router.push({ name: "StaticsInfpty", params: { update } });
     },
+
   },
 };
 </script>