创建项目和修改项目时添加有效性验证

src/components/project/Project.vue

@@ -15,41 +15,14 @@
           <span v-if="!isModifyMode">{{project.name}}</span>
         </el-form-item>
 
-        <el-form-item size="small" label="联系人" prop="name">
+        <el-form-item size="small" label="联系人" prop="contactName">
           <el-input v-if="isModifyMode" v-model="project.contactName" placeholder="请输入联系人姓名"></el-input>
           <span v-if="!isModifyMode">{{project.contactName}}</span>
         </el-form-item>
-        <el-form-item size="small" label="联系人电话" prop="name">
+        <el-form-item size="small" label="联系人电话" prop="contactPhone">
           <el-input v-if="isModifyMode" v-model="project.contactPhone" placeholder="请输入联系人电话"></el-input>
           <span v-if="!isModifyMode">{{project.contactPhone}}</span>
         </el-form-item>
-        <!--<el-form-item label="联系方式" prop="contact">-->
-        <!--<div>-->
-        <!--<el-row :gutter="2">-->
-        <!--<el-col :span="2">-->
-        <!--<span>联系人</span>-->
-        <!--</el-col>-->
-        <!--<el-col :span="10">-->
-        <!--<el-input v-if="isModifyMode" v-model="project.contactName" placeholder="请输入联系人姓名"></el-input>-->
-        <!--<div v-if="!isModifyMode">{{project.contactName}}</div>-->
-        <!--</el-col>-->
-        <!--</el-row>-->
-        <!--<el-row :gutter="2">-->
-        <!--<el-col :span="2">-->
-        <!--<span>联系人电话</span>-->
-        <!--</el-col>-->
-        <!--<el-col :span="10">-->
-        <!--<el-input-->
-        <!--v-if="isModifyMode"-->
-        <!--v-model="project.contactPhone"-->
-        <!--placeholder="请输入联系人电话"-->
-        <!--&gt;</el-input>-->
-        <!--<div v-if="!isModifyMode">{{project.contactPhone}}</div>-->
-        <!--</el-col>-->
-        <!--</el-row>-->
-        <!--</div>-->
-        <!--</el-form-item>-->
-
         <el-form-item size="small" label="预算" prop="budget">
           <el-input v-if="isModifyMode" type="number" v-model="project.budget">
             ¥
@@ -57,7 +30,7 @@
           </el-input>
           <span v-if="!isModifyMode">{{project.budget}}¥</span>
         </el-form-item>
-        <el-form-item size="small" label="状态" prop="status">
+        <el-form-item v-if="!isModifyMode" size="small" label="状态" prop="status">
           <span v-if="!isModifyMode">{{project.status==1?'等待接收':(project.status==2?'已被接收':(project.status==3?'项目已提交':'项目已结束'))}}</span>
         </el-form-item>
         <el-form-item label="需求描述">
@@ -368,35 +341,61 @@ export default {
         ]
       },
       rules: {
-        // name: [
-        //   {required: true, message: '请输入项目名称', trigger: 'blur'}
-        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
-        // ],
-        // type: [
-        //   {
-        //     type: 'array',
-        //     required: true,
-        //     message: '请至少选择一种服务类型',
-        //     trigger: 'change'
-        //   }
-        // ],
-        // platform: [
-        //   {
-        //     type: 'array',
-        //     required: true,
-        //     message: '请至少选择一个平台',
-        //     trigger: 'change'
-        //   }
-        // ],
-        // desc: [{required: true, message: '请填写活动形式', trigger: 'blur'}],
-        // contact: [{validator: validatePass, trigger: 'blur'}],
-        // resource: [
-        //   {
-        //     required: true,
-        //     message: '请选择项目可见性',
-        //     trigger: 'change'
-        //   }
-        // ]
+        name: [
+          {required: true, message: '请输入项目名称', trigger: 'blur'},
+          {min: 5, max: 50, message: '项目名称长度在 5 到 50 个字符', trigger: 'blur'}
+        ],
+        contactName: [
+          {required: true, message: '请输入联系人姓名', trigger: 'blur'}
+          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
+        ],
+        contactPhone: [
+          {required: true, message: '请输入手机号', trigger: 'blur'},
+          //{min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
+        ],
+        type: [
+          {
+            type: 'array',
+            required: true,
+            message: '请至少选择一种服务类型',
+            trigger: 'change'
+          }
+        ],
+        platform: [
+          {
+            type: 'array',
+            required: true,
+            message: '请至少选择一个平台',
+            trigger: 'change'
+          }
+        ],
+        desc: [{required: false, message: '请填写描述', trigger: 'blur'}],
+        //price: [{required: true, message: '请填写价格', trigger: 'blur'}],
+        budget: [
+          {required: true, message: '预算不可为空', trigger: 'blur'},
+          {
+            validator: (rule, value, callback) => {
+              if (value <= 0) {
+                callback(new Error('请输入大于0的数'))
+              } else {
+                callback()
+              }
+            }, trigger: 'change'
+          },
+        ],
+        resource: [
+          {required: true},
+          {
+            validator: (rule, value, callback) => {
+              if (value == 0 && this.project.institution == null) {
+                callback(new Error('定向发布至少要选择一个区域管理员'))
+              } else {
+                callback()
+              }
+            }, trigger: 'change'
+          },
+        ],
+        datetime: [{required: true, message: '截止时间不可为空', trigger: 'blur'}],
       }
     }
   },
@@ -464,66 +463,64 @@ export default {
     },
     //提交修改
     submitForm (formName) {
-      this.showLoading()
-      const newProject = {
-        userId: this.user.userVO.id,
-        name: this.project.name,
-        type: this.project.type,
-        platform: this.project.platform,
-        desc: this.project.desc,
-        resource: this.project.resource,
-        location: getProvinceNameByProvinceCode(this.project.location.provinceCode, this.project.location.cityCode),
-        institution: this.project.institution == null ? null : this.project.institution.id,
-        contactName: this.project.contactName,
-        contactPhone: this.project.contactPhone,
-        doc: this.project.requireDocUrl,
-        file: this.project.fileUrl,
-        budget: this.project.budget,
-        price: this.project.price,
-        datetime: this.project.datetime,
-        usage: this.project.usage,
-      }
-      Http.put(Apis.PROJECT.UPDATE_PROJECT.replace('{projectId}', this.projectId), newProject).then((res) => {
-        console.log('bb')
-        console.log(res)
-        this.projectId = res.projectDetails.id
-        this.project.name = res.projectDetails.name
-        this.project.contactName = res.projectDetails.contactName
-        this.project.contactPhone = res.projectDetails.contactPhone
-        this.project.type = res.projectDetails.type
-        this.project.platform = res.projectDetails.platform
-        this.project.desc = res.projectDetails.desc
-        this.project.doc = []
-        this.project.file = []
-        this.project.resource = res.projectDetails.resource
-        this.project.location = getProvinceCodeByProvinceName(res.projectDetails.location.provinceCode, res.projectDetails.location.cityCode)
-        this.project.institution = res.projectDetails.institution
-        this.project.datetime = new Date(res.projectDetails.datetime)
-        this.project.price = res.projectDetails.price
-        this.project.budget = res.projectDetails.budget
-        this.project.usage = res.projectDetails.usage
-        this.project.fileUrl = res.projectDetails.file
-        this.project.requireDocUrl = res.projectDetails.doc
+      this.$refs['project'].validate(valid => {
+        if (valid) {
+          this.showLoading()
+          const newProject = {
+            userId: this.user.userVO.id,
+            name: this.project.name,
+            type: this.project.type,
+            platform: this.project.platform,
+            desc: this.project.desc,
+            resource: this.project.resource,
+            location: getProvinceNameByProvinceCode(this.project.location.provinceCode, this.project.location.cityCode),
+            institution: this.project.institution == null ? null : this.project.institution.id,
+            contactName: this.project.contactName,
+            contactPhone: this.project.contactPhone,
+            doc: this.project.requireDocUrl,
+            file: this.project.fileUrl,
+            budget: this.project.budget,
+            price: this.project.price,
+            datetime: this.project.datetime,
+            usage: this.project.usage,
+          }
+          Http.put(Apis.PROJECT.UPDATE_PROJECT.replace('{projectId}', this.projectId), newProject).then((res) => {
+            console.log('bb')
+            console.log(res)
+            this.projectId = res.projectDetails.id
+            this.project.name = res.projectDetails.name
+            this.project.contactName = res.projectDetails.contactName
+            this.project.contactPhone = res.projectDetails.contactPhone
+            this.project.type = res.projectDetails.type
+            this.project.platform = res.projectDetails.platform
+            this.project.desc = res.projectDetails.desc
+            this.project.doc = []
+            this.project.file = []
+            this.project.resource = res.projectDetails.resource
+            this.project.location = getProvinceCodeByProvinceName(res.projectDetails.location.provinceCode, res.projectDetails.location.cityCode)
+            this.project.institution = res.projectDetails.institution
+            this.project.datetime = new Date(res.projectDetails.datetime)
+            this.project.price = res.projectDetails.price
+            this.project.budget = res.projectDetails.budget
+            this.project.usage = res.projectDetails.usage
+            this.project.fileUrl = res.projectDetails.file
+            this.project.requireDocUrl = res.projectDetails.doc
 
-        this.task = res.taskList
-        this.reportList = res.reportList
-        this.isModifyMode = false
-        this.hideLoading()
-        notify('success', '项目修改成功')
-      }).catch(error => {
-        this.hideLoading()
-        notify('error', error.data)
-        console.log(error)
+            this.task = res.taskList
+            this.reportList = res.reportList
+            this.isModifyMode = false
+            this.hideLoading()
+            notify('success', '项目修改成功')
+          }).catch(error => {
+            this.hideLoading()
+            notify('error', error.data)
+            console.log(error)
+          })
+        } else {
+          notify('error', '表单填写错误!')
+          return false
+        }
       })
-      // this.$refs[formName].validate(valid => {
-      //   if (valid) {
-      //
-      //     //提交 project
-      //   } else {
-      //     console.log('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     //重置表单
     resetForm (formName) {
@@ -645,10 +642,10 @@ export default {
       this.$confirm('确认删除该任务?')
         .then(_ => {
           //done()
-          notify('success','删除成功')
+          notify('success', '删除成功')
         })
         .catch(_ => {
-          notify('error','删除失败')
+          notify('error', '删除失败')
         })
       //this.task.splice(index, 1)
     },

src/components/project/ProjectCreate.vue

@@ -49,7 +49,7 @@
             style="max-height: 200px;"
           >
             <el-tab-pane :label="resourceType[0]" name="0">
-              <el-radio-group v-model="project.institution">
+              <el-radio-group v-model="project.institution" prop="institution">
                 <el-radio :label="item" name="type" v-for="item,index in institutionArray" :key="index">{{item.name}}
                 </el-radio>
               </el-radio-group>
@@ -215,16 +215,16 @@ export default {
       },
       rules: {
         name: [
-          {required: true, message: '请输入项目名称', trigger: 'blur'}
-          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
+          {required: true, message: '请输入项目名称', trigger: 'blur'},
+          {min: 5, max: 50, message: '项目名称长度在 5 到 50 个字符', trigger: 'blur'}
         ],
         contactName: [
           {required: true, message: '请输入联系人姓名', trigger: 'blur'}
           // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
         ],
         contactPhone: [
-          {required: true, message: '请输入手机号', trigger: 'blur'}
-          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
+          {required: true, message: '请输入手机号', trigger: 'blur'},
+          //{min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
         ],
         type: [
           {
@@ -243,15 +243,32 @@ export default {
           }
         ],
         desc: [{required: false, message: '请填写描述', trigger: 'blur'}],
-        price: [{required: true, message: '请填写价格', trigger: 'blur'}],
-        budget: [{required: true, message: '请填写预算', trigger: 'blur'}],
-        // resource: [
-        //   {
-        //     required: true,
-        //     message: '请选择项目可见性',
-        //     trigger: 'change'
-        //   }
-        // ]
+        //price: [{required: true, message: '请填写价格', trigger: 'blur'}],
+        budget: [
+          {required: true, message: '预算不可为空', trigger: 'blur'},
+          {
+            validator: (rule, value, callback) => {
+              if(value <= 0){
+                callback(new Error('请输入大于0的数'))
+              } else {
+                callback()
+              }
+            }, trigger: 'change'
+          },
+        ],
+        resource: [
+          {required: true},
+          {
+            validator: (rule, value, callback) => {
+              if (value == 0 && this.project.institution.id == null) {
+                callback(new Error('定向发布至少要选择一个区域管理员'))
+              } else {
+                callback()
+              }
+            }, trigger: 'change'
+          },
+        ],
+        datetime:[{required: true, message: '截止时间不可为空', trigger: 'blur'}],
       }
     }
   },
@@ -318,54 +335,51 @@ export default {
       //   this.platformType.push(PlatformType[item])
       // })
     },
-    submitForm (formName) {
-      //console.log(this.project)
-      this.showLoading()
-      const newLocation = getProvinceNameByProvinceCode(this.project.location.provinceCode, this.project.location.cityCode)
-      const newProject = {
-        userId: this.user.userVO.id,
-        name: this.project.name,
-        type: this.project.type,
-        platform: this.project.platform,
-        desc: this.project.desc,
-        resource: this.project.resource,
-        location: newLocation,
-        institution: this.project.institution.id,
-        contactName: this.project.contactName,
-        contactPhone: this.project.contactPhone,
-        doc: this.project.requireDocUrl,
-        file: this.project.fileUrl,
-        budget: this.project.budget,
-        datetime: this.project.datetime,
-        usage: this.project.usage,
-        price: this.project.price
-      }
-      Http.post(Apis.PROJECT.CREATE_PROJECT, newProject).then((res) => {
-        //notify('success', '创建成功')
-        this.hideLoading()
-        this.createProjectSuccess(res.projectDetails.id)
-        // if (window.history.length <= 1) {
-        //   this.$router.push({path: '/'})
-        //   return false
-        // } else {
-        //   this.$router.go(-1)
-        // }
-      }).catch(error => {
-        //console.log(error)
-        notify('error', error.data)
+    submitForm () {
+      this.$refs['project'].validate(valid => {
+        if (valid) {
+          //console.log(this.project)
+          this.showLoading()
+          const newLocation = getProvinceNameByProvinceCode(this.project.location.provinceCode, this.project.location.cityCode)
+          const newProject = {
+            userId: this.user.userVO.id,
+            name: this.project.name,
+            type: this.project.type,
+            platform: this.project.platform,
+            desc: this.project.desc,
+            resource: this.project.resource,
+            location: newLocation,
+            institution: this.project.institution.id,
+            contactName: this.project.contactName,
+            contactPhone: this.project.contactPhone,
+            doc: this.project.requireDocUrl,
+            file: this.project.fileUrl,
+            budget: this.project.budget,
+            datetime: this.project.datetime,
+            usage: this.project.usage,
+            price: this.project.price
+          }
+          Http.post(Apis.PROJECT.CREATE_PROJECT, newProject).then((res) => {
+            //notify('success', '创建成功')
+            this.hideLoading()
+            this.createProjectSuccess(res.projectDetails.id)
+            // if (window.history.length <= 1) {
+            //   this.$router.push({path: '/'})
+            //   return false
+            // } else {
+            //   this.$router.go(-1)
+            // }
+          }).catch(error => {
+            //console.log(error)
+            notify('error', error.data)
 
+          })
+        } else {
+          console.log(valid)
+          notify('error','表单填写错误！')
+          return false
+        }
       })
-      // this.$refs[formName].validate(valid => {
-      //   if (valid) {
-      //     Http.post(Apis.PROJECT.CREATE_PROJECT, this.project).then((res) => {
-      //       console.log(res.status)
-      //     })
-      //     //提交 project
-      //   } else {
-      //     console.log('error submit!!')
-      //     return false
-      //   }
-      // })
     },
     resetForm (formName) {
       this.$refs[formName].resetFields()