如果是查看详细的视图中有树形列表,我们还可以在onMounted的处理中,添加获取树列表的数据即可,如下代码所示 。
//挂载的时候初始化数据onMounted(() => {// 设置默认值getTree();});// 初始化树列表let treedata = https://www.huyubaike.com/biancheng/ref([]);const getTree = () => {// 树列表数据获取menu.GetAll().then((data) => {treedata.value = []; // 树列表清空var list = data?.items;if (list) {var newTreedata = $u.util.getJsonTree(list, {id:'id',pid: 'pid',label: 'name',children: 'children',});treedata.value = https://www.huyubaike.com/biancheng/newTreedata;}});};而查看视图的触发 , 往往在列表的操作按钮中 , 或者双击表格行进行触发,界面如下所示 。
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/102522D59-2.png)
文章插图
界面如下代码所示 。
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/102522J15-3.png)
文章插图
而调用查看详细页面的事件,传递对应的id并调用组件实例抛出的方法即可 。如下代码所示 。
// 显示查看对话框处理const viewRef = ref<InstanceType<typeof ViewData>>();function showView(id) {viewRef.value.show(id);}至此,一个独立的视图页面组件,以及如何触发调用就完成了,视图页面单独维护,便于代码的管理,同时也隔离了复杂的页面逻辑 。
视图页面效果如下所示 。
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/1025221W2-4.png)
文章插图
2)新增编辑视图页面
在常规的处理中,往往编辑和新增的界面是差不多的,差异不同的地方,我们可以通过条件 if 的方式进行处理即可 。因此可以把两者放在一个组件中实现对话框内容和逻辑处理 。
刚才我们提到了Index.vue页面,是对几个组件的统筹处理,如下代码所示 。
<template><div class="main"><!--条件及列表展示--><Search ref="searchRef" @show-import="showImport" @show-add="showAdd" @show-view="showView" @show-edit="showEdit" /><!--查看详细组件界面--><view-data ref="viewRef" /><!--新增、编辑组件界面--><edit-data ref="editRef" @submit="refreshData" /><!--模板导入信息--><import-data ref="importRef" @finish="finishImport" /></div></template>从上面代码我们看到,在HTML代码中,我们引入对应的组件,并在主查询页面中触发事件即可,如下所示 。
其中showAdd和ShowEdit类似,都是调用编辑/新增的对话框,不同的是 , 通过传递id来辨别是否为新增,如果需要传入pid的父节点信息,那么我们也可以创建一个showAdd的方法 。
//新增、编辑表单引用const editRef = ref<InstanceType<typeof EditData>>();//显示新增对话框function showAdd(pid?: string | number) {editRef.value.showAdd(pid);}// 显示编辑对话框function showEdit(id) {editRef.value.show(id);}//新增/更新后刷新function refreshData() {searchRef.value.getlist();}编辑业务数据的对话框和查看详细的类似 , 不过这里是需要使用输入控件进行内容编辑修改处理的 。
![15 基于SqlSugar的开发框架循序渐进介绍-- 整合代码生成工具进行前端界面的生成](http://img.zhejianglong.com/231018/1025223396-5.png)
文章插图
对于一些复杂控件 , 我们可以自定义组件来简化在界面上的使用 , 尽可能的快捷、简单 。
我们在组件中定义showAdd和show的方法,便于父组件的调用即可,如果传递了id值,我们根据业务对象的get方法获取详细的数据,赋值到表单对象上就可以正常显示了 。
//默认标题为[编辑信息],当show传入id为空的时候,为[新建信息]let title = ref('编辑信息');let isAdd = ref(false); //是否新增状态//显示窗口(编辑/新建)const showAdd = async (pid?: string | number) => {title.value = 'https://www.huyubaike.com/biancheng/新建信息';isAdd.value = https://www.huyubaike.com/biancheng/true;resetFields(); //清空表单editForm.pid = pid +'';isVisible.value = https://www.huyubaike.com/biancheng/true; //显示对话框};const show = async (id?: string | number) => {if (!$u.test.isNullOrUnDef(id)) {title.value ='编辑信息';isAdd.value = https://www.huyubaike.com/biancheng/false;await menu.Get(id).then((data) => {Object.assign(editForm, data);});} else {title.value ='https://www.huyubaike.com/biancheng/新建信息';isAdd.value = https://www.huyubaike.com/biancheng/true;resetFields(); //清空表单}isVisible.value = true; //显示对话框};抛出这两个实例的方法,供外面调用 。
//暴露组件属性和方法defineExpose({show,showAdd,});为了承载表单的数据模型,我们创建相关的业务对象
const editRef = ref<FormInstance>(); //表单引用// 表单属性定义(初始化)let editForm = reactive({id: '',pid: '',name: '',icon: '',functionId: '',winformType: '',url: '',seq: '001',isTop: false,expand: 1,visible: 1,webIcon: '',tag: 'web', // Web专用});
推荐阅读
- Explain:你见过这样的Sql吗?
- 实例分析Scheduled Thread Pool Executor与Timer的区别
- 原神团聚于此的意义怎么完成
- 元气骑士宙斯之矛怎么使用
- 原神妮露阵容怎么搭配
- 怎么游泳最快(公认的最快游泳姿势)
- 不会游泳的人如何自学游泳(一般人如何学习游泳)
- 如何正确游泳(快速游泳的正确方式)
- 如何能够快速的学会游泳(怎样迅速学会游泳)
- C++ 使用栈求解中缀、后缀表达式的值