创建报告和修改报告时检测有效性

src/components/report/ProjectReport.vue

@@ -14,27 +14,15 @@
           </el-radio-group>
           <span v-if="!isModifyMode" class="badge">{{report.type}}</span>
         </el-form-item>
-        <el-form-item label="摘要" prop="abstract">
-          <div>
-            <el-row :gutter="2">
-              <el-col :span="2">
-                <span>测试对象</span>
-              </el-col>
-              <el-col :span="10">
-                <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.target"></el-input>
-                <span v-if="!isModifyMode">{{report.target}}</span>
-              </el-col>
-            </el-row>
-            <el-row :gutter="2">
-              <el-col :span="2">
-                <span>测试内容</span>
-              </el-col>
-              <el-col :span="10">
-                <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.content"></el-input>
-                <span v-if="!isModifyMode">{{report.content}}</span>
-              </el-col>
-            </el-row>
-          </div>
+
+        <el-form-item label="测试对象" prop="target">
+          <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.target"></el-input>
+          <span v-if="!isModifyMode">{{report.target}}</span>
+        </el-form-item>
+
+        <el-form-item label="测试内容" prop="content">
+          <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.content"></el-input>
+          <span v-if="!isModifyMode">{{report.content}}</span>
         </el-form-item>
         <el-form-item prop="file" label="报告文件">
           <el-upload
@@ -113,23 +101,22 @@ export default {
         conclusion: ''
       },
       rules: {
-        // name: [
-        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
-        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
-        // ],
-        // abstract: [
-        //   {
-        //     required: true,
-        //     message: '请输入摘要信息',
-        //     trigger: 'change'
-        //   }
-        // ],
-        // type: [
-        //   {required: true, message: '请选择报告类型', trigger: 'change'}
-        // ],
-        // conclusion: [
-        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
-        // ]
+        name: [
+          {required: true, message: '任务名称不可为空', trigger: 'blur'},
+          {min: 5, max: 50, message: '报告名称长度在 5 到 50 个字符', trigger: 'blur'}
+        ],
+        type: [
+          {required: true, message: '报告类型不可为空'},
+        ],
+        target: [
+          {required: true, message: '测试对象不可为空', trigger: 'blur'}
+        ],
+        content: [
+          {required: true, message: '测试内容不可为空', trigger: 'blur'}
+        ],
+        conclusion: [
+          {required: true, message: '结论不可为空', trigger: 'blur'}
+        ]
       }
     }
   },
@@ -151,37 +138,36 @@ export default {
       this.isModifyMode = true
     },
     submitForm (formName) {
-      this.showLoading()
-      const newReport = {
-        name: this.report.name,
-        scope: this.taskId == null ? 0 : 1,
-        type: this.report.type,
-        dependencyCode: this.taskId == null ? this.projectId : this.taskId,
-        target: this.report.target,
-        content: this.report.content,
-        file: '123.pdf',
-        conclusion: this.report.conclusion
-      }
-      console.log(newReport)
-      Http.put(Apis.REPORT.UPDATE_PROJECT_REPORT.replace('{projectId}', this.projectId).replace('{reportId}', this.reportId), newReport).then((res) => {
-        console.log(res)
-        notify('success', '修改成功')
-        this.hideLoading()
-        this.isModifyMode = false
-      }).catch((error) => {
-        this.hideLoading()
-        notify('error', error.data)
+      this.$refs['report'].validate(valid => {
+        if (valid) {
+          this.isModifyMode = false
+          this.showLoading()
+          const newReport = {
+            name: this.report.name,
+            scope: this.taskId == null ? 0 : 1,
+            type: this.report.type,
+            dependencyCode: this.taskId == null ? this.projectId : this.taskId,
+            target: this.report.target,
+            content: this.report.content,
+            file: '123.pdf',
+            conclusion: this.report.conclusion
+          }
+          console.log(newReport)
+          Http.put(Apis.REPORT.UPDATE_PROJECT_REPORT.replace('{projectId}', this.projectId).replace('{reportId}', this.reportId), newReport).then((res) => {
+            console.log(res)
+            notify('success', '修改成功')
+            this.hideLoading()
+            this.isModifyMode = false
+          }).catch((error) => {
+            this.hideLoading()
+            notify('error', error.data)
+          })
+          //提交 report
+        } else {
+          notify('error', '表单填写有误')
+          return false
+        }
       })
-      // this.$refs[formName].validate(valid => {
-      //   if (valid) {
-      //     this.isModifyMode = false
-      //
-      //     //提交 report
-      //   } else {
-      //     console.log('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     resetForm (formName) {
       this.$refs[formName].resetFields()

src/components/report/ProjectReportCreate.vue

@@ -102,26 +102,22 @@ export default {
         conclusion: ''
       },
       rules: {
-        // name: [
-        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
-        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
-        // ],
-        // abstract: [
-        //   {
-        //     required: true,
-        //     message: '请输入摘要信息',
-        //     trigger: 'change'
-        //   }
-        // ],
-        // type: [
-        //   {required: true, message: '请选择报告类型', trigger: 'change'}
-        // ],
-        // file: [
-        //   {required: true, message: '请上传报告文件', trigger: 'change'}
-        // ],
-        // conclusion: [
-        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
-        // ]
+        name: [
+          {required: true, message: '任务名称不可为空', trigger: 'blur'},
+          {min: 5, max: 50, message: '报告名称长度在 5 到 50 个字符', trigger: 'blur'}
+        ],
+        type: [
+          {required: true, message: '报告类型不可为空'},
+        ],
+        target: [
+          {required: true, message: '测试对象不可为空', trigger: 'blur'}
+        ],
+        content: [
+          {required: true, message: '测试内容不可为空', trigger: 'blur'}
+        ],
+        conclusion: [
+          {required: true, message: '结论不可为空', trigger: 'blur'}
+        ]
       }
     }
   },
@@ -140,34 +136,33 @@ export default {
       this.setReportType()
     },
     submitForm (formName) {
-      this.showLoading()
-      const newReport = {
-        name: this.report.name,
-        scope: this.scope,
-        type: this.report.type,
-        dependencyCode: this.dependencyCode,
-        target: this.report.target,
-        content: this.report.content,
-        file: this.report.fileUrl,
-        conclusion: this.report.conclusion
-      }
-      console.log(newReport)
-      Http.post(Apis.REPORT.CREATE_PROJECT_REPORT.replace('{projectId}', this.projectId), newReport).then((res) => {
-        this.hideLoading()
-        this.createReportSuccess(res.crowdReportVO.code)
-      }).catch((error) => {
-        this.hideLoading()
-        notify('error', '报告创建失败：' + error.data)
+      this.$refs['report'].validate(valid => {
+        if (valid) {
+          this.showLoading()
+          const newReport = {
+            name: this.report.name,
+            scope: this.scope,
+            type: this.report.type,
+            dependencyCode: this.dependencyCode,
+            target: this.report.target,
+            content: this.report.content,
+            file: this.report.fileUrl,
+            conclusion: this.report.conclusion
+          }
+          console.log(newReport)
+          Http.post(Apis.REPORT.CREATE_PROJECT_REPORT.replace('{projectId}', this.projectId), newReport).then((res) => {
+            this.hideLoading()
+            this.createReportSuccess(res.crowdReportVO.code)
+          }).catch((error) => {
+            this.hideLoading()
+            notify('error', '报告创建失败：' + error.data)
+          })
+          //提交 report
+        } else {
+          notify('error', '表单填写有误')
+          return false
+        }
       })
-      // this.$refs[formName].validate(valid => {
-      //   if (valid) {
-      //
-      //     //提交 report
-      //   } else {
-      //     console.log('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     resetForm (formName) {
       this.$refs[formName].resetFields()

src/components/report/TaskReport.vue

@@ -14,27 +14,13 @@
           </el-radio-group>
           <span v-if="!isModifyMode" class="badge">{{report.type}}</span>
         </el-form-item>
-        <el-form-item label="摘要" prop="abstract">
-          <div>
-            <el-row :gutter="2">
-              <el-col :span="2">
-                <span>测试对象</span>
-              </el-col>
-              <el-col :span="10">
-                <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.target"></el-input>
-                <span v-if="!isModifyMode">{{report.target}}</span>
-              </el-col>
-            </el-row>
-            <el-row :gutter="2">
-              <el-col :span="2">
-                <span>测试内容</span>
-              </el-col>
-              <el-col :span="10">
-                <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.content"></el-input>
-                <span v-if="!isModifyMode">{{report.content}}</span>
-              </el-col>
-            </el-row>
-          </div>
+        <el-form-item label="测试对象" prop="target">
+          <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.target"></el-input>
+          <span v-if="!isModifyMode">{{report.target}}</span>
+        </el-form-item>
+        <el-form-item label="测试内容" prop="content">
+          <el-input autosize v-if="isModifyMode" type="textarea" v-model="report.content"></el-input>
+          <span v-if="!isModifyMode">{{report.content}}</span>
         </el-form-item>
         <el-form-item prop="file" label="报告文件">
           <el-upload
@@ -113,23 +99,22 @@ export default {
         conclusion: ''
       },
       rules: {
-        // name: [
-        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
-        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
-        // ],
-        // abstract: [
-        //   {
-        //     required: true,
-        //     message: '请输入摘要信息',
-        //     trigger: 'change'
-        //   }
-        // ],
-        // type: [
-        //   {required: true, message: '请选择报告类型', trigger: 'change'}
-        // ],
-        // conclusion: [
-        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
-        // ]
+        name: [
+          {required: true, message: '任务名称不可为空', trigger: 'blur'},
+          {min: 5, max: 50, message: '报告名称长度在 5 到 50 个字符', trigger: 'blur'}
+        ],
+        type: [
+          {required: true, message: '报告类型不可为空'},
+        ],
+        target: [
+          {required: true, message: '测试对象不可为空', trigger: 'blur'}
+        ],
+        content: [
+          {required: true, message: '测试内容不可为空', trigger: 'blur'}
+        ],
+        conclusion: [
+          {required: true, message: '结论不可为空', trigger: 'blur'}
+        ]
       }
     }
   },
@@ -151,36 +136,35 @@ export default {
       this.isModifyMode = true
     },
     submitForm (formName) {
-      this.showLoading()
-      const newReport = {
-        name: this.report.name,
-        scope: this.taskId == null ? 0 : 1,
-        type: this.report.type,
-        dependencyCode: this.taskId == null ? this.projectId : this.taskId,
-        target: this.report.target,
-        content: this.report.content,
-        file: '123.pdf',
-        conclusion: this.report.conclusion
-      }
-      console.log(newReport)
-      Http.put(Apis.REPORT.UPDATE_TASK_REPORT.replace('{projectId}', this.projectId).replace('{taskId}', this.taskId).replace('{reportId}', this.reportId), newReport).then((res) => {
-        console.log(res)
-        this.hideLoading()
-        this.isModifyMode = false
-      }).catch((error) => {
-        this.hideLoading()
-        notify('error', error.data)
+      this.$refs['report'].validate(valid => {
+        if (valid) {
+          this.isModifyMode = false
+          this.showLoading()
+          const newReport = {
+            name: this.report.name,
+            scope: this.taskId == null ? 0 : 1,
+            type: this.report.type,
+            dependencyCode: this.taskId == null ? this.projectId : this.taskId,
+            target: this.report.target,
+            content: this.report.content,
+            file: this.report.fileUrl,
+            conclusion: this.report.conclusion
+          }
+          console.log(newReport)
+          Http.put(Apis.REPORT.UPDATE_TASK_REPORT.replace('{projectId}', this.projectId).replace('{taskId}', this.taskId).replace('{reportId}', this.reportId), newReport).then((res) => {
+            console.log(res)
+            this.hideLoading()
+            this.isModifyMode = false
+          }).catch((error) => {
+            this.hideLoading()
+            notify('error', error.data)
+          })
+          //提交 report
+        } else {
+          notify('error', '表单填写有误')
+          return false
+        }
       })
-      // this.$refs[formName].validate(valid => {
-      //   if (valid) {
-      //     this.isModifyMode = false
-      //
-      //     //提交 report
-      //   } else {
-      //     console.log('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     resetForm (formName) {
       this.$refs[formName].resetFields()

src/components/report/TaskReportCreate.vue

@@ -13,32 +13,12 @@
             </span>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="测试对象" prop="name">
+        <el-form-item label="测试对象" prop="target">
           <el-input autosize style="width: 400px" type="textarea" v-model="report.target"></el-input>
         </el-form-item>
-        <el-form-item label="测试内容" prop="name">
+        <el-form-item label="测试内容" prop="content">
           <el-input autosize style="width: 400px" type="textarea" v-model="report.content"></el-input>
         </el-form-item>
-        <!--<el-form-item label="摘要" prop="abstract">-->
-        <!--<div>-->
-        <!--<el-row :gutter="2">-->
-        <!--<el-col :span="2">-->
-        <!--<span>测试对象</span>-->
-        <!--</el-col>-->
-        <!--<el-col :span="10">-->
-        <!--<el-input type="textarea" v-model="report.target"></el-input>-->
-        <!--</el-col>-->
-        <!--</el-row>-->
-        <!--<el-row :gutter="2">-->
-        <!--<el-col :span="2">-->
-        <!--<span>测试内容</span>-->
-        <!--</el-col>-->
-        <!--<el-col :span="10">-->
-        <!--<el-input type="textarea" v-model="report.content"></el-input>-->
-        <!--</el-col>-->
-        <!--</el-row>-->
-        <!--</div>-->
-        <!--</el-form-item>-->
         <el-form-item prop="file" label="报告文件">
           <el-upload
             drag
@@ -103,26 +83,22 @@ export default {
         conclusion: ''
       },
       rules: {
-        // name: [
-        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
-        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
-        // ],
-        // abstract: [
-        //   {
-        //     required: true,
-        //     message: '请输入摘要信息',
-        //     trigger: 'change'
-        //   }
-        // ],
-        // type: [
-        //   {required: true, message: '请选择报告类型', trigger: 'change'}
-        // ],
-        // file: [
-        //   {required: true, message: '请上传报告文件', trigger: 'change'}
-        // ],
-        // conclusion: [
-        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
-        // ]
+        name: [
+          {required: true, message: '任务名称不可为空', trigger: 'blur'},
+          {min: 5, max: 50, message: '报告名称长度在 5 到 50 个字符', trigger: 'blur'}
+        ],
+        type: [
+          {required: true, message: '报告类型不可为空'},
+        ],
+        target: [
+          {required: true, message: '测试对象不可为空', trigger: 'blur'}
+        ],
+        content: [
+          {required: true, message: '测试内容不可为空', trigger: 'blur'}
+        ],
+        conclusion: [
+          {required: true, message: '结论不可为空', trigger: 'blur'}
+        ]
       }
     }
   },
@@ -141,35 +117,32 @@ export default {
       this.setReportType()
     },
     submitForm (formName) {
-      this.showLoading()
-      const newReport = {
-        name: this.report.name,
-        scope: this.scope,
-        type: this.report.type,
-        dependencyCode: this.dependencyCode,
-        target: this.report.target,
-        content: this.report.content,
-        file: this.report.fileUrl,
-        conclusion: this.report.conclusion
-      }
-      console.log(newReport)
-      Http.post(Apis.REPORT.CREATE_TASK_REPORT.replace('{projectId}', this.projectId).replace('{taskId}', this.taskId), newReport).then((res) => {
-        this.hideLoading()
-        this.createReportSuccess(res.crowdReportVO.code)
-      }).catch((error) => {
-        this.hideLoading()
-        notify('error', '报告创建失败：' + error.data)
+      this.$refs['report'].validate(valid => {
+        if (valid) {
+          this.showLoading()
+          const newReport = {
+            name: this.report.name,
+            scope: this.scope,
+            type: this.report.type,
+            dependencyCode: this.dependencyCode,
+            target: this.report.target,
+            content: this.report.content,
+            file: this.report.fileUrl,
+            conclusion: this.report.conclusion
+          }
+          console.log(newReport)
+          Http.post(Apis.REPORT.CREATE_TASK_REPORT.replace('{projectId}', this.projectId).replace('{taskId}', this.taskId), newReport).then((res) => {
+            this.hideLoading()
+            this.createReportSuccess(res.crowdReportVO.code)
+          }).catch((error) => {
+            this.hideLoading()
+            notify('error', '报告创建失败：' + error.data)
+          })
+        } else {
+          notify('error', '表单填写有误')
+          return false
+        }
       })
-
-      // this.$refs[formName].validate(valid => {
-      //   if (valid) {
-      //
-      //     //提交 report
-      //   } else {
-      //     console.log('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     resetForm (formName) {
       this.$refs[formName].resetFields()