解决缺陷 【ID1017054】【现场】【web】安全责任书-新增，签署责任书类型选择联防协议书，乙方机构输入框提示语错误； 多次切换类型后 保存的数据会错乱

src/views/core/outIn/letter/dialog.addletter.vue

@@ -76,8 +76,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="备注" prop="description">
-                <el-input
+                <el-input type="textarea"
                   v-model="formData.description"
+                  :autosize="{ minRows: 8, maxRows: 8 }"
                   placeholder="请输入备注"
                   maxlength="100"
                 />

src/views/safetyBook/newBook/dialog.edit.vue

@@ -15,6 +15,8 @@
           label-position="right"
           label-width="180px"
           label-prefix=":"
+          :validate-on-rule-change="false"
+
         >
         <el-form-item prop="signLevel" label="签署层级:">
             <el-select
@@ -34,6 +36,7 @@
             <el-select
               v-model="formData.type"
               style="width: 100%"
+              @change="typeChanged"
               placeholder="请选择签署责任书类型"
             >
               <el-option
@@ -63,16 +66,17 @@
               ></el-input>
             </div>
           </el-form-item>
-          <el-form-item prop="partyAOrgName" label="甲方机构:" v-if="formData.type==1||formData.type==3">
+          <el-form-item ref="partyAOrgName" key="partyAOrgName" prop="partyAOrgName" label="甲方机构:" v-if="formData.type==1||formData.type==3">
             <div>
               <el-input
                 v-model="formData.partyAOrgName"
                 placeholder="请输入甲方所属机构"
                 maxlength="50"
+                @input="$event =>inputChange($event,'partyAOrgName')"
               ></el-input>
             </div>
           </el-form-item>
-          <el-form-item prop="partyAOrg" label="甲方机构:" v-if="formData.type==2">
+          <el-form-item ref="partyAOrg" key="partyAOrg" prop="partyAOrg" label="甲方机构:" v-if="formData.type==2">
             <tree-select
               v-model="formData.partyAOrg"
               :options="deptOptions"
@@ -91,14 +95,15 @@
               ></el-input>
             </div>
           </el-form-item>
-          <el-form-item prop="partyBOrgName" label="乙方机构:" v-if="formData.type==2">
+          <el-form-item ref="partyBOrgName" key="partyBOrgName" prop="partyBOrgName" label="乙方机构:" v-if="formData.type==2">
               <el-input
                 v-model="formData.partyBOrgName"
-                placeholder="请输入择乙方机构"
+                placeholder="请输入乙方机构"
                 maxlength="50"
+                @input="$event =>inputChange($event,'partyBOrgName')"
               ></el-input>
           </el-form-item>
-          <el-form-item prop="partyBOrg" label="乙方机构:" v-if="formData.type==1||formData.type==3">
+          <el-form-item ref="partyBOrg" key="partyBOrg" prop="partyBOrg" label="乙方机构:" v-if="formData.type==1||formData.type==3">
             <tree-select
               v-model="formData.partyBOrg"
               :options="deptOptions"
@@ -184,7 +189,7 @@ export default {
         type: [{ required: true, message: "请选择签署责任书类型" }],
         year: [{ required: true, message: "请选择所属年度" }],
         partyA: [{ required: true, message: "请输入甲方姓名" }],
-        partyAOrg: [{ required: true, message: "请选择甲方机构", trigger: "change" }],
+        partyAOrg: [{ required: true, message: "请选择甲方机构",}],
         partyAOrgName: [{ required: true, message: "请输入甲方机构" }],
         partyB: [{ required: true, message: "请输入乙方姓名" }],
         partyBOrg: [{ required: true, message: "请选择乙方机构", trigger: "change" }],
@@ -301,6 +306,62 @@ export default {
         this.isShow = false;
       });
     },
+    // 解决多次触发v-if 后 input 不能输入
+    inputChange(e,typeName){
+      this.$delete(this.formData,typeName);
+      this.$set(this.formData,typeName,e);
+    },
+    typeChanged()
+    {
+      // console.log("typeChanged",this.$refs)
+      if(this.formData.type==1|| this.formData.type==3){
+
+        // 处理甲方机构
+        if(this.$refs.partyAOrg){
+          this.$refs.partyAOrg.clearValidate();
+          this.$delete(this.formDataRules,'partyAOrg');
+          this.formData.partyAOrg=null;
+        }
+        if(!this.formDataRules.partyAOrgName){
+          this.$set(this.formDataRules,'partyAOrgName',[{ required: true, message: '请输入甲方机构', trigger:      
+          ['blur','change']}]);
+        }
+
+        // 处理乙方机构
+        if(this.$refs.partyBOrgName){
+          this.$refs["form"].clearValidate(["partyBOrgName"]);
+          this.$delete(this.formDataRules,'partyBOrgName');
+          this.formData.partyBOrgName=null;
+        }
+        if(!this.formDataRules.partyBOrg){
+          this.$set(this.formDataRules,'partyBOrg',[{ required: true, message: '请选择乙方机构', trigger:      
+          ['change']}]);
+        }
+
+      }else if(this.formData.type==2){
+        if(this.$refs.partyAOrgName){
+          this.$refs.partyAOrgName.clearValidate();
+          this.$delete(this.formDataRules,'partyAOrgName');
+          this.formData.partyAOrgName=null;
+        }
+        if(!this.formDataRules.partyAOrg){
+          this.$set(this.formDataRules,'partyAOrg',[{ required: true, message: '请选择甲方机构', trigger:      
+          ['blur','change']}]);         
+        }
+
+        // 处理乙方机构
+        if(this.$refs.partyBOrg){
+          this.$refs["form"].clearValidate(["partyBOrg"]);
+          this.$delete(this.formDataRules,'partyBOrg');
+          this.formData.partyBOrg=null;
+        }
+        if(!this.formDataRules.partyBOrgName){
+          this.$set(this.formDataRules,'partyBOrgName',[{ required: true, message: '请输入乙方机构', trigger:      
+          ['blur','change']}]);
+        }
+      }
+      this.$refs["form"].clearValidate();
+    }
 
     // 事件
     //apimark//