ruoyi实用性改造--（一）ruoyi功能点修改

原创

已于 2024-07-20 11:19:51 修改 · 692 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-06-25 08:33:36 首次发布

ruoyi具有较大的用户群，且自动生成功能便利，可改造后用于自身脚手架使用。为顺应小程序的潮流，选择VUE版本，由于暂时VUE主线为2版本，且3版本的更新不是太及时，选择主支2版本。

修改点：

1、table生成相关

1.1 结果中关于详情按纽的添加

最终作用于ruoyi-ui目录－－VUE目录－－index.vue。找到ruoyi-generator目录－－resources目录－－vm目录－－vue目录－－index.vue.vm，对其中内容进行改造，一是添加按纽，二是添加对应的form，三是添加open2变量，保证详情弹窗的显示与关闭，四是添加显示详情页的js函数handelDetail，将open2置为显示，五是在cancel函数中，添加open2的关闭。

1.2 table列显示与否的功能添加

经查看ruoyi-ui/src/components/RightToolbar/index.vue ，对比user.vue可知，要显示列显示功能，只需一是在

<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" ></right-toolbar>属性中加入:columns="columns"，
二是在data(){return{...}}中加入
// 列信息
columns: [
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `用户名称`, visible: true },
  { key: 2, label: `用户昵称`, visible: true },
  ...  
],

三是在<el-table-column label="用户编号" align="center" key="userId" prop="userId"/>中加入 v-if="columns[0].visible"

即：生成vue中加入以上三段，即可，注意columns: []中不可跳编号，代码生成的不用担心。

生成模板代码如下：

#set($k=0)
// 列信息
visibleCols: [
  #foreach ($column in $columns)
      #if($column.list && !$column.pk)
      #set($parentheseIndex=$column.columnComment.indexOf("（"))
      #if($parentheseIndex != -1)
          #set($comment=$column.columnComment.substring(0, $parentheseIndex))
      #else