一二三应用开发平台自定义查询设计与实现系列3——通用化重构

通用化重构

前面我们以一个实体为目标对象,完成了功能开发与调试。

在此基础上,我们对功能进行重构,使其成为平台的标准化、通用化的功能。

前端重构

首先,先把自定义组件挪到了平台公共组件目录下,如下:

然后将列表页面list.vue中原本写死的地方进行改造,原实现如下:

    // 打开自定义查询对话框
    customQuery() {
      //TODO 更换为动态变量
      this.$refs.customQuery.init('Template')
    }

平台原本的实体配置会统一输出当前的实体类型编码,不过遵循的是小驼峰命名,如下:

在工具类增加一个首字母转大写的方法,转换下就能实现通用化,如下:

    // 打开自定义查询对话框
    customQuery() {  
      this.$refs.customQuery.init(this.$StringUtil.capitalizeFirstLetter(this.entityType))
    }

完成上面工作,使用到自定义查询的列表页面list.vue,还是需要引入自定义查询组件。既然是通用标准化功能了,那就可以将其放到mixin中统一处理了,将自定义查询相关功能迁移到listMixin.js中,如下:

经过上述迁移改造后,各实体的列表页面还剩下两部分,功能按钮和页面定义,如下:

调整列表视图list.vue的代码模板,将自定义查询功能默认输出,让用户多一种选择,如某个实体确定不需要该功能,开发人员可以人工移除,删两行代码,1分钟内就能完成。

后续可以调整平台实体配置功能,将是否启用自定义查询功能变为可配置项,并通过代码模板根据配置项输出或不输出查询按钮和自定义查询组件。

此外,还有一个小地方需要修改,把自定义查询的api,加入到公共方法常量中去,如下:

后端重构

后端重构实际简单的多,复杂的查询转换都是公共方法类,需要在controller的代码模板中增加自定义查询的方法即可,如下:

    //region 扩展操作
    /**
    * 自定义查询
    */
    @PostMapping("/customQuery")
    @SystemLog(value = "${table.comment!}-自定义查询")
    @PreAuthorize("hasPermission(null,'${package.ModuleName}:${entity?uncap_first}:query')")
    public ResponseEntity<Result> customQuery(@RequestBody String customQueryString, PageInfo pageInfo, SortInfo sortInfo) {
        // 构造分页对象
        IPage<${entity}> page = new Page<${entity}>(pageInfo.getPageNum(), pageInfo.getPageSize());
        // 构造查询条件
        QueryWrapper<${entity}> queryWrapper = CustomQueryGenerator.generateQueryWrapper(${entity}.class, customQueryString, sortInfo);


        // 查询数据
        ${entity?uncap_first}Service.page(page, queryWrapper);
        // 转换vo
        IPage<${entity}VO> pageVO = mapperFacade.map(page, IPage.class);
        List<${entity}VO> ${entity?uncap_first}VOList=convert2VO(page.getRecords());
        pageVO.setRecords(${entity?uncap_first}VOList);
        return ResultUtil.success(pageVO);
     }

    //endregion

此外,需要将原先放在实体配置entityconfig模块下的工具类CustomQueryGenerator移动到平台最底层的通用模块platform-common下,以便上层模块使用(若放在entityconfig,受依赖关系限制,系统管理下的实体如用户,就无法使用该工具类),如下:

同理,还有三个与筛选器组件相关的vo对象,也需要移动到platform-common模块下,如下:

功能测试

使用系统管理模块(system)下的用户实体作为测试,生成代码如下:

/**
    * 自定义查询
    */
    @PostMapping("/customQuery")
    @SystemLog(value = "用户-自定义查询")
    @PreAuthorize("hasPermission(null,'system:user:query')")
    public ResponseEntity<Result> customQuery(@RequestBody String customQueryString, PageInfo pageInfo, SortInfo sortInfo) {
        // 构造分页对象
        IPage<User> page = new Page<User>(pageInfo.getPageNum(), pageInfo.getPageSize());
        // 构造查询条件
        QueryWrapper<User> queryWrapper = CustomQueryGenerator.generateQueryWrapper(User.class, customQueryString, sortInfo);


        // 查询数据
         userService.page(page, queryWrapper);
        // 转换vo
        IPage<UserVO> pageVO = mapperFacade.map(page, IPage.class);
        List<UserVO> userVOList=convert2VO(page.getRecords());
        pageVO.setRecords(userVOList);
        return ResultUtil.success(pageVO);
     }

在前端拷贝自定义查询按钮及自定义查询页面,运行如下:

整体无报错,但是发现BUG,查询方案的下拉列表显示的不仅仅是用户实体下的方案,连“模板”实体下的方案也显示出来了,推测是没加实体类型进行过滤,接下来修复该BUG。

BUG修复

修改查询方案的下拉列表,增加entityModelCode属性,监听该属性,如不为空则触发数据加载,如下:

<template>
  <el-select
    v-model="selectedValue"
    :size="size"
    clearable
    :disabled="readonly"
    style="width: 200px; margin: 20 auto"
    @change="change"
  >
    <el-option
      v-for="item in dictionaryItemList"
      :key="item.id"
      :value="item.id"
      :label="item.name"
    />
  </el-select>

</template>

<script>
export default {
  name: 'QueryPlanSelect',
  label: '查询方案下拉',
  props: {
    modelValue: {
      type: String,
      required: false,
      default: ''
    },
    code: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    entityModelCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dictionaryItemList: [],
      selectedValue: ''
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler: 'setSelected'
    },
    entityModelCode: {
      immediate: true,
      handler: 'loadData'
    }
  },
  methods: {
    change(value) {
      let rowData = null
      this.dictionaryItemList.forEach((item) => {
        if (item.id === value) {
          rowData = item
          return
        }
      })
      // 更新绑定值
      this.$emit('update:modelValue', value)
      // 注意,此处若命令为change,则可能会与底层实现冲突,导致执行两次
      this.$emit('my-change', value, rowData)
    },
    setSelected() {
      this.selectedValue = this.modelValue
    },
    loadData() {
      if (this.entityModelCode) {
        this.dictionaryItemList = []
        this.$api.system.queryPlan.list({ entityModelCode: this.entityModelCode }).then((res) => {
          this.dictionaryItemList = res.data
          if (this.dictionaryItemList.length == 1) {
            this.selectedValue = this.dictionaryItemList[0].id
            this.$emit('my-change', this.dictionaryItemList[0].id, this.dictionaryItemList[0])
          } else {
            this.selectedValue = ''
            this.$emit('my-change', '', null)
          }
        })
      }
    }
  }
}
</script>

然后在自定义查询页面中,将模型编码绑定到查询方案下拉组件的属性上,如下:

        <QueryPlanSelect
          @my-change="queryPlanChanged"
          :entity-model-code="entityModelCode"
          ref="queryPlanSelect"
          style="margin: auto 20px"
        ></QueryPlanSelect>

完成上述调整后,获取查询方案时就可以区分不同的实体了。

开源平台资料

平台名称:一二三开发平台
简介: 企业级通用开发平台
设计资料:[csdn专栏]
开源地址:[Gitee]
开源协议:MIT
如果您在阅读本文时获得了帮助或受到了启发,希望您能够喜欢并收藏这篇文章,为它点赞~
请在评论区与我分享您的想法和心得,一起交流学习,不断进步,遇见更加优秀的自己!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/908763.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

国标GB28181视频平台EasyCVR私有化视频平台工地防盗视频监控系统方案

一、方案背景 在当代建筑施工领域&#xff0c;安全监管和防盗监控是保障工程顺利进行和资产安全的关键措施。随着科技进步&#xff0c;传统的监控系统已不足以应对现代工地的安全挑战。因此&#xff0c;基于国标GB28181视频平台EasyCVR的工地防盗视频监控系统应运而生&#xf…

征程 6 工具链性能分析与优化 2|模型性能优化建议

01 引言 为了应对低、中、高阶智驾场景&#xff0c;以及当前 AI 模型在工业界的应用趋势&#xff0c;地平线推出了征程 6 系列芯片。 在软硬件架构方面&#xff0c;征程 6 不仅保持了对传统 CNN 网络的高效支持能力&#xff0c;还强化了对 Transformer 类型网络的支持&#xf…

【真题笔记】16年系统架构设计师要点总结

【真题笔记】16年系统架构设计师要点总结 存储部件接口嵌入式处理器产品配置配置管理用户文档系统文档CMM&#xff08;能力成熟度模型&#xff09;螺旋模型敏捷软件开发的方法学软件工具面向对象的分析模型设计模型COP&#xff08;面向构件的编程&#xff09;构件原子构件模块S…

GR2——在大规模视频数据集上预训练且机器人数据上微调,随后预测动作轨迹和视频(含GR1详解)

前言 上个月的24年10.9日&#xff0c;我在朋友圈看到字节发了个机器人大模型GR2&#xff0c;立马去看了下其论文(当然了&#xff0c;本质是个技术报告) 那天之后&#xff0c;我就一直想解读这个GR2来着 然&#xff0c;意外来了&#xff0c;如此文《OmniH2O——通用灵巧且可全…

Autocad2018

链接: https://pan.baidu.com/s/1MTd0gc5Q5zoKFnPNwk1VXw 提取码: x15v

把握数字化新趋势,迎接生态架构新时代——The Open Group 2024生态系统架构·可持续发展年度大会参会指南

距离大会还有&#xff1a;22天 在数字化转型的浪潮中&#xff0c;如何抓住机遇&#xff0c;实现可持续发展&#xff0c;已成为各行各业关注的焦点。The Open Group 2024生态系统架构可持续发展年度大会&#xff0c;将于2024年11月22日在北京国贸大酒店隆重举行。本次大会汇聚全…

OpenGL入门006——着色器在纹理混合中的应用

本节将理解顶点和片段着色器在纹理混合中的应用 文章目录 一些概念纹理时间依赖动画 实战简介dependenciesshader.fsshader.vsteenager.pngtex.png utilswindowFactory.hshader.hRectangleModel.hRectangleModel.cpp main.cppCMakeLists.txt最终效果 一些概念 纹理 概述&…

Spring Cloud Bus快速入门Demo

1.什么是Spring Cloud Bus&#xff1f; Spring Cloud Bus 是一个用于将分布式系统的节点连接起来的框架&#xff0c;它使用了轻量级消息代理来实现节点之间的通信。Spring Cloud Bus 可以将配置变更事件、状态变更事件和其他管理事件广播到系统中的所有节点&#xff0c;以便于…

通过Wireshark抓包分析,体验HTTP请求的一次完整交互过程

目录 一、关于Wireshark 1.1、 什么是Wireshark 1.2、下载及安装 二、HTTP介绍 2.1、HTTP请求过程介绍 2.2 、TCP协议基础知识 2.2.1、概念介绍 2.2.2、TCP协议的工作原理 2.2.3、三次握手建立连接 2.3.4、四次挥手断开连接 2.3、Wireshark抓包分析过程 2.3.1、三次握…

聚观早报 | 比亚迪腾势D9登陆泰国;苹果 iOS 18.2 将发布

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 11月5日消息 比亚迪腾势D9登陆泰国 苹果 iOS 18.2 将发布 真我GT7 Pro防尘防水细节 小米15 Ultra最快明年登场 …

tomcat 开启远程debug模式

1.修改位置 CATALINA_OPTS"-Xdebug -Xrunjdwp:transportdt_socket,address*:8000,servery,suspendn"2.修改环境变量的方式 apache-tomcat-9.0.86/bin/setenv.sh export JAVA_HOME/opt/jdk1.8.0_171 export CATALINA_HOME/opt/apache-tomcat-9.0.86 export JAVA_OP…

【工具变量】中国制造2025试点城市数据集(2000-2023年)

数据简介&#xff1a;《中国制造2025》是中国ZF于2015年5月8日印发的一项战略规划&#xff0c;旨在加快制造业的转型升级&#xff0c;提升制造业的质量和效益&#xff0c;实现从制造大国向制造强国的转变。该规划是中国实施制造强国战略的第一个十年行动纲领&#xff0c;明确提…

VScode的C/C++点击转到定义,不是跳转定义而是跳转声明怎么办?(内附详细做法)

以最简单的以原子的跑马灯为例&#xff1a; 1、点击CtrlShiftP&#xff0c;输入setting&#xff0c;然后回车 2、输入Browse 3、点击下面C_Cpp > Default > Browse:Path里面添加你的工程路径 然后就可以愉快地跳转定义啦~ 希望对你有帮助&#xff0c;如果还不可以的话&a…

java常用框架介绍

1. Spring Boot 特点&#xff1a;Spring Boot是Spring家族中的一个新成员&#xff0c;它基于Spring 4.0设计&#xff0c;提供了默认配置、简化依赖管理以及内嵌式容器等特性&#xff0c;使得开发者能够快速创建独立的、生产级别的Spring应用。 用途&#xff1a;Spring Boot特别…

Leetcode328奇偶链表,Leetcode21合并两个有序链表,Leetcode206反转链表 三者综合题

题目描述 思路分析 这题的思路就和我们的标题所述一样&#xff0c;可以看作是这3个题的合并&#xff0c;但是稍微还有一点点区别 比如&#xff1a;奇偶链表这道题主要是偶数链在了奇数后面&#xff0c;字节这个的话是奇偶链表分离了 所以字节这题的大概思路就是&#xff1a; …

自监督学习:机器学习的未来新方向

引言 自监督学习&#xff08;Self-Supervised Learning, SSL&#xff09;是近年来机器学习领域的一个重要发展方向&#xff0c;迅速成为许多研究和应用的热点。与传统的监督学习不同&#xff0c;自监督学习利用未标注数据&#xff0c;通过设计自我生成标签的任务&#xff0c;帮…

【算法】Prim最小生成树算法

目录 一、思想 二、代码 在阅读本文前推荐优先食用&#xff1a; 【算法】Kruskal最小生成树算法-CSDN博客https://blog.csdn.net/Eristic0618/article/details/143312482?spm1001.2014.3001.5501 一、思想 Kruskal算法基于边的选择&#xff0c;因此更适用于稀疏图。而对于…

CPU用户时间百分比

在计算机系统中&#xff0c;"CPU用户时间百分比&#xff08;CPU User Time&#xff09;"是一个性能监控指标&#xff0c;它描述了CPU在用户模式下执行的累积时间与总的CPU时间的比例。这个指标可以帮助我们了解系统在执行用户态程序时的负载情况。下面是一些关于CPU用…

java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl

用大模型做车牌号识别&#xff0c;最简单高效 在Java场景中&#xff0c;java识别车牌号的需求非常普遍。过去&#xff0c;我们主要依赖OCR等传统方法来实现java识别车牌号&#xff0c;但这些方法的效果往往不稳定。随着技术的发展&#xff0c;现在有了更先进的解决方案——大模…

IoTDB时序数据库使用

简介 Apache IoTDB 是一款低成本、高性能的物联网原生时序数据库。它可以解决企业组建物联网大数据平台管理时序数据时所遇到的应用场景复杂、数据体量大、采样频率高、数据乱序多、数据处理耗时长、分析需求多样、存储与运维成本高等多种问题。 IoTDB官网 1. 连接数据库 官方…