保存数据的时候 , 我们判断表单的rules规则 , 如果符合通过,那么提交数据并提示用户即可 。
// 保存数据处理async function submitData() {var formEl = editRef.value;if (!formEl) return;await formEl.validate(async (valid) => {if (valid) {//验证成功 , 执行下面方法var result = false;if (isAdd.value) {result = await menu.Create(editForm); //新增保存} else {result = await menu.Update(editForm); //编辑保存}if (result) {$u.success('操作成功!'); // 提示信息emit('submit'); // 提示刷新数据closeDialog(); // 重置窗口状态} else {$u.error('操作失败');}}});}编辑界面的效果如下所示 。
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/10252229A-6.png)
文章插图
3)导入界面的处理
导入界面,一般我们分为几个步骤,一个是提供导入模板下载 , 然后上传文件并显示数据,然后确认提交即可 。
由于导入数据的逻辑上大致类似,不同的是他们的业务数据和验证规则,因此我们通过自定义组件的方式,来简化相关的处理 。
我通过改造ele-import 的第三方组件,让它支持Vue3+Typescript语法,实现对业务数据的上传操作 。
<template><div class="main"><!--条件及列表展示--><Search ref="searchRef" @show-import="showImport" @show-add="showAdd" @show-view="showView" @show-edit="showEdit" /><import-data ref="importRef" @finish="finishImport" /></div></template>而在import.vue页面里面,我们的代码是使用ele-import来处理即可 。
<template><div><!-- 模板导入信息 --><ele-import :fields="importForm.fields" :filepath="importForm.filepath" :append="importForm.append":formatter="importForm.formatter" :rules="importForm.rules" :tips="importForm.tips" :title="importForm.title":visible="isVisible" :request-fn="saveImport" @close="close" @finish="finishImport" /></div></template>通过传入对应的数据,如导入字段 , 以及规则,以及下载文件等相关参数,就可以实现了文件的上传处理了 。
// 请求服务端处理上传数据,返回一个Promise对象const saveImport = async (data) => {// console.log(data);const result = await menu.SaveImport(data);// console.log(result);if (result) {return Promise.resolve();} else {return Promise.reject();}};同时,这也是一个弹出窗口,因此也需要暴露show方法给外部调用 。
//显示窗口const show = () => {isVisible.value = https://www.huyubaike.com/biancheng/true; //显示对话框};//暴露组件属性和方法defineExpose({show,});而这个组件的相关数据信息 , 定义在importForm中 , 我们来看看对应的数据格式 。
const importForm = reactive({// Excel 模板导入数据// 弹出层标题title: '功能菜单导入',// 提示信息tips: [], // ['商品编号 必填', '产品类型 必填', '商品名称 必填'],// 字段名称参照表fields: {// 字段根据需要裁剪pid: '父ID',name: '显示名称',icon: '图标',seq: '排序',url: 'Url地址',webIcon: '菜单图标',systemType_ID: '系统编号',tag: '特殊标签',},// 附加数据, 在每条记录上都会加这两个字段和值append: {// company: '广州爱奇迪',// leader: '伍华聪'},// 参数校检, 和 element-ui 中 form表单中传递的rules一样, 都是使用的 async-validator 库// https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zhengrules: {pid: { type: 'string', required: true, message: '父ID必填' },name: { type: 'string', required: true, message: '显示名称必填' },url: { type: 'string', required: true, message: 'Url地址必填' },webIcon: { type: 'string', required: true, message: '菜单图标必填' },systemType_ID: { type: 'string', required: true, message: '系统编号必填' },tag: { type: 'string', required: true, message: '特殊标签必填' },},// Excel模板下载地址 。注意, 只能是.xlsx的文件, .xls或者.cvs都会报错filepath: 'http://localhost:5043/UploadFiles/template/功能菜单.xlsx',});整个导入模块,会通过这个对象的数据格式 , 进行不同的显示和校验处理等操作 。界面效果如下所示 。
其中第一步提示信息 , 并提供模板文件下载
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/102522N10-7.png)
文章插图
第二步提供文件上传处理 。
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/1025222609-8.png)
文章插图
第三步确认数据并完成处理 。
这种统一的操作,我们通过封装 , 隔离了逻辑步骤的协调处理,只需要在业务组件中生成相关的数据即可,便于使用 。
2、利用代码生成工具快速生成通过上面的介绍 , 我们了解到整个页面的组件代码结构,因此可以利用它们和数据表之间的关系,生成对应的页面组件 , 利用代码生成工具Database2Sharp强大的数据库元数据和模板引擎,我们构建了对应的框架代码生成规则,因此统一生成即可 , 提高了代码开发的效能,同时也统一了代码的结构 , 便于大项目的维护 。
推荐阅读
- Explain:你见过这样的Sql吗?
- 实例分析Scheduled Thread Pool Executor与Timer的区别
- 原神团聚于此的意义怎么完成
- 元气骑士宙斯之矛怎么使用
- 原神妮露阵容怎么搭配
- 怎么游泳最快(公认的最快游泳姿势)
- 不会游泳的人如何自学游泳(一般人如何学习游泳)
- 如何正确游泳(快速游泳的正确方式)
- 如何能够快速的学会游泳(怎样迅速学会游泳)
- C++ 使用栈求解中缀、后缀表达式的值