项目案例示例
(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();
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);
}