JeecgBoot - 按钮事件文档

项目案例示例

（1）弹框

• 在列表页面【MdTestTaskList.vue】添加“新增”按钮（在页面操作按钮区域代码内添加）：
  

 <a-button @click="handleAddCont" type="primary" icon="plus">新增</a-button>

• 添加弹框表单页面【MdTestTaskForm.vue】
  
• 添加弹框需要的model页面【MdTestTaskModal.vue】
  
• 在列表页面【MdTestTaskList.vue】引入model页面【MdTestTaskModal.vue】并注册全局组件
  

引入MdTestTaskModal.vue页面
import MdTestTaskModal from './modules/MdTestTaskModal'

全局注册MdTestTaskModal.vue页面
components: {
	MdTestTaskModal
}

完成后在页面添加已经注册好的MdTestTaskModal.vue页面对应标签
<md-test-task-modal ref="modalForm" @ok="modalFormOk"></md-test-task-modal>

• 上面设置完成后在model页面的j-model标签中添加:visible="visible属性：默认规定次弹框是打开的
• 在model页面data中设置visible为关闭状态

data () {
	return {
		visible: false,
	}
},

• 在【MdTestTaskModalm.vue】中引用添加弹出框中需要展示的内容页面（如在列表页面引用model方法一样）：
  在model页面【MdTestTaskForm.vue】表单页面并注册全局组件
  

引入MdTestTaskForm.vue页面
import MdTestTaskForm from './MdTestTaskForm'

全局注册MdTestTaskForm.vue页面
components: {
	MdTestTaskForm
},

完成后在页面添加已经注册好的MdTestTaskForm.vue页面对应标签
<md-test-task-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></md-test-task-form>

（2）新增

• 在model页面添加弹框事件并绑定新增按钮事件，弹框默认值设置为关闭，在调用此方法时改变状态为打开
  

addCont () {
	this.visible=true
	this.$nextTick(()=>{ //数据更新，执行此函数，延迟加载
		this.$refs.realForm.addCont();
	})
}

• 在表单页面添加新增事件需要的url路径及事件
  

addCont: "/mdtestask/mdTestTask/add"

addCont () {
	this.edit(this.modelDefault);
}

• 在项目列表页面中新增按钮事件添加定义的【handleAddCont】方法
  

handleAddCont(){
	this.$refs.modalForm.addCont(); //调用model页面的addCont方法
	this.$refs.modalForm.title = "新增项目信息";
	this.$refs.modalForm.disableSubmit = false;
}

（3）编辑

• 在列表页面添加编辑按钮代码并绑定事件
  

<a-button @click="handleAddEdit" type="primary" icon="edit">编辑</a-button>

• 在model页面添加编辑弹框事件并绑定新增按钮事件，弹框默认值设置为关闭，在调用此方法时改变状态为打开
  

edit (record) {
	this.visible=true
	this.$nextTick(()=>{
		this.$refs.realForm.edit(record);
	})
}

• 在表单页面添加新增事件需要的url路径及事件
  

editCont: "/mdtestask/mdTestTask/edit"

editCont (record) {
	this.model = Object.assign({}, record);
	this.visible = true;
}

• 在项目列表页面中新增按钮事件添加定义的【handleAddEdit】方法
  

handleAddEdit (record) {
	if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else if(this.selectedRowKeys.length > 1){
          this.$message.warning('编辑最多选一条！');
          return;
	} else {
		this.$refs.modalForm.editCont(this.selectionRows[0]);
		this.$refs.modalForm.title = "编辑项目信息";
		this.$refs.modalForm.disableSubmit = false;
	}
},

（4）删除

• 在列表页面添加编辑按钮代码并绑定事件
  

<a-button @click="handleBatchDel" type="primary" icon="delete">删除</a-button>

• 在列表页面引入deleteAction
  

import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'

deleteAction(url,parameter) {
	return axios({
		url: url,
		method: 'delete',
		params: parameter
	})
}

• 添加删除按钮事件
  

handleBatchDel() {
		if (!this.url.deleteBatch) {
			this.$message.error("请设置url.deleteBatch属性!")
			return
		}
		if (this.selectedRowKeys.length <= 0) {
			this.$message.warning('请选择一条记录！');
			return;
		} else {
			var ids = "";
			for (var a = 0; a < this.selectedRowKeys.length; a++) {
				ids += this.selectedRowKeys[a] + ",";
			}
			var that = this;
			this.$confirm({
				title: "确认删除",
				content: "是否删除选中数据?",
				onOk: function () {
					that.loading = true;
					deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
					if (res.success) {
						//重新计算分页问题
						that.reCalculatePage(that.selectedRowKeys.length)
						that.loadData();
						that.onClearSelected();
					} else {
						that.$message.warning(res.message);
					}
				}).finally(() => {
					that.loading = false;
				});
			}
		});
	}
}

（5）导入

（6）导出

（7）上传

（8）下载

（9）刷新

• 以删除功能为例，在方法中添加页面定义的loadDatas()方法，引用自定义刷新样式进行页面刷新
  

that.loadDatas();

 loadDatas() {
      console.log(333,'加载成功')
      this.$message.info(<a-spin tip="正在加载新数据，请稍后..."></a-spin>, 2);
 }