黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第二章三 [打印本页]

---

作者: 我是楠楠    时间: 2019-10-23 15:34
标题: 【郑州校区】传智健康项目讲义第二章三


【郑州校区】传智健康项目讲义第二章预约管理-检查项管理三
3. 新增检查项
3.1 完善页面
检查项管理页面对应的是checkitem.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。
3.1.1 弹出新增窗口
页面中已经提供了新增窗口，只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true就可以显示出新增窗口。
新建按钮绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。

[AppleScript] 纯文本查看 复制代码

// 重置表单

resetForm() {

this.formData = {};

},

// 弹出添加窗口

handleCreate() {

this.resetForm();

this.dialogFormVisible = true;

} 

3.1.2 输入校验

[AppleScript] 纯文本查看 复制代码

rules: {//校验规则

code: [{ required: true, message: '项目编码为必填项', trigger: 'blur'

}],

name: [{ required: true, message: '项目名称为必填项', trigger: 'blur'

}]

} 

3.1.3 提交表单数据
点击新增窗口中的确定按钮时，触发handleAdd方法，所以需要在handleAdd方法中进行完善。

[AppleScript] 纯文本查看 复制代码

handleAdd () {

//校验表单输入项是否合法

this.$refs['dataAddForm'].validate((valid) => {

if (valid) {

//表单数据校验通过，发送ajax请求将表单数据提交到后台

axios.post("/checkitem/add.do",this.formData).then((response)=> {

//隐藏新增窗口

this.dialogFormVisible = false;

//判断后台返回的flag值，true表示添加操作成功，false为添加操作失败

if(response.data.flag){

this.$message({

message: response.data.message,

type: 'success'

});

}else{

this.$message.error(response.data.message);

}

}).finally(()=> {

this.findPage();

});

} else {

this.$message.error("表单数据校验失败");

return false;

}

});

} 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2