Diboot 低代码开发平台

# CRUD快速集成

# 开始之前

  • 在diboot-mobile-ui中，我们对CRUD等常用功能进行了一些抽象，将常用的列表、详情、新建、更新、删除等功能需要的相关属性与方法都抽象成了mixins文件，这些文件在mixins文件夹下。
  • 也可以对已有的一些页面组件代码进行阅读，比如pages/demo文件夹下的相关组件代码。

    TIP

    在阅读文档之前，建议您准备好diboot-mobile-ui 最新版的环境 (opens new window)源码环境，搭配代码使用更佳。

# 列表页

  1. 引入列表的mixins文件，如下：
import list from '@/mixins/list'

export default {
  mixins: [list]
}
1
2
3
4
5
  1. 配置列表页的接口前缀，这个接口前缀在mixins的处理中，会自动拼接'/list'，如果后端代码是通过diboot自动生成的，这也是后端默认的接口规则；
  2. 自定义列表接口：如果您的列表接口最后面不是'/list'，而是'/getList'，那么可以在data中设置listApi属性，如下：
export default {
  data () {
    return {
        listApi: 'getList'
    }
  }
}
1
2
3
4
5
6
7
  1. 属性配置：
属性 说明 类型 默认值 版本
primaryKey 主键字段名 string id -
baseApi 请求接口基础路径（必须配置） String / -
listApi 列表数据接口 String '' -
deleteApiPrefix 删除接口前缀 String '' -
getListFromMixin 是否在页面初始化时自动加载列表数据 boolean true -
queryParam 与查询条件绑定的参数（会被查询表单重置和改变的参数） object {} -
triggered 下拉刷新的状态 Boolean false -
status load状态 [loadmore, loading, nomore] 默认 loadmore String {} -
loadText load状态描述 object {loadmore: '上拉加载更多',loading: '努力加载中',nomore: '没有更多了'} -
page 分页配置 object {pageIndex: 1, pageSize: 20, totalCount: 0} -
list 存储列表数据 array [] -
activeIndex 当前激活的项 Number -100 -
deleteShow 是否弹出删除框 Boolean false -
actionOptions 右滑菜单列表（配置参考：uview#SwipeAction#options配置） Array [{text: '编辑',type: 'handleUpdate',style: {backgroundColor: this.$color.warning}}, {text: '删除',type: 'handleDelete',style: {backgroundColor: this.$color.error}}] -
getMore 是否使mixin在当前业务的attachMore接口中自动获取关联数据
👉业务对象关联详解 代码见 /mixins/more.js		 boolean false -
attachMoreList 获取关联数据列表的配置列表
👉业务对象关联详解 代码见 /mixins/more.js		 array [] -
more 存储当前对象的关联数据对象
👉业务对象关联详解 代码见 /mixins/more.js		 object {} -
  1. 功能函数
名称 说明 参数 版本
handleCreate 打开新增页面 - -
handleDetail 打开详情页面 id -
handleUpdate 打开编辑页面） id -
handleDelete 打开删除确认弹框 id -
handleConfirmDel 确认删除 - -
handleCancelDel 取消删除 - -
handleActiveSwipeAction 打开左滑操作 index【当前项的id】 -
handleActionClick 点击左滑按钮 (index【当前项的id】, optionIdx【操作列表actionOptions的下标】) -
handlePullDownRefresh 下拉刷新 - -
handleOnreachBottom 触底加载 - -
getList 获取数据列表 (replace = false)是否重置list列表，默认否（追加） -
showToast 展示提示 (title, icon = 'error') -
attachMore 加载当前页面关联的对象或者字典，参考属性：getMore、attachMoreList、more 代码见 /mixins/more.js - -

# 新建与更新

  1. 引入表单的mixins文件，如下：
import form from '@/mixins/form'

export default {
  mixins: [form]
}
1
2
3
4
5
  1. 属性配置：
属性 说明 类型 默认值 版本
primaryKey 主键字段名 string id -
baseApi 请求接口基础路径(必须配置) String / -
createApi 新建接口，自动拼接在baseApi之后 String / -
updateApiPrefix 更新接口前缀，自动拼接在baseApi之后 String / -
form 更新时装载加载的原数据，新建时通过form表单自动装配 object {} -
activeColor 激活的颜色：保持风格统一 String this.$color.success -
isUpload 当前form是否包含上传
👉文件上传详解		 boolean false -
fileWrapper 文件包装容器
👉文件上传详解		 object {} -
fileUuidList 文件存储服务器后返回的唯一标识集合
👉文件上传详解		 array [] -
getMore 是否使mixin在当前业务的attachMore接口中自动获取关联数据
👉业务对象关联详解 代码见 /mixins/more.js		 boolean false -
attachMoreList 获取关联数据列表的配置列表
👉业务对象关联详解 代码见 /mixins/more.js		 array [] -
more 存储当前对象的关联数据对象
👉业务对象关联详解 代码见 /mixins/more.js		 object {} -
  1. 功能函数
名称 说明 参数 版本
open 打开表单 (根据参数id存在与否，设置为更新or新建操作) function(id) -
validate 提交前的验证流程 - -
add 新建记录的提交 function(values) -
update 更新记录的提交 function(values) -
onSubmit 表单提交事件 - -
fileFormatter 将返回值data转化成上传组件需要的文件格式 function(data) -
transformStr2Arr 将属性值转化为数组 function(str, separator = ',') -
attachMore 加载当前页面关联的对象或者字典，参考属性：getMore、attachMoreList、more - -
setFileUuidList 设置文件uuid，参考属性：isUpload、fileWrapper、fileUuidList - -
defaultFileWrapperKeys 初始化fileWrapper - -
  1. 钩子函数
名称 说明 参数 版本
afterOpen 在组件打开后，或者更新时数据加载完毕后，执行该函数 function(id) -
enhance 在校验完成后，对提交数据进行处理的函数 function(values) -
submitSuccess 提交成功后，执行该函数，默认提示操作成功，并返回上一级 function(result) -
submitFailed 提交失败后，执行该函数，默认提示错误消息 function(result) -

# 查看详情

  1. 引入详情的mixins文件，如下：
import detail from '@/mixins/detail'

export default {
  mixins: [detail]
}
1
2
3
4
5
  1. 属性配置
属性 说明 类型 默认值 版本
baseApi 请求接口基础路径(必须配置) String / -
model 当前详情框详情数据 object {} -

3.功能函数

名称 说明 参数 版本
open 打开详情（加载服务端数据） function(id) -
previewImage 预览图片 function(path) -

# 详解

  • 业务对象关联详解

    • more: 值来源于getMore、attachMoreList 配置请求接口后返回的结果；
    • getMore: 开启关联数据会从当前业务的/attachMore接口中读取，可与attachMoreList结合使用；
    • attachMoreList: 实现关联数据从/common/attachMore接口统一获取，配置如下：
      // 未指定 label 属性时，为关联字典，指定 label 属性时则为关联对象
attachMoreList: [
    {
      target: 'GENDER'      // 指向字典 type = GENDER 的字典值
    },
    {
      target: 'IamUser',    // 指向IamUser对象（cloud：指定module中对象）
      label: 'name',        // 指向IamUser#name属性，需要查询作为label的属性名称
      value: 'id',          // 指向IamUser#id属性，需要查询作为value的属性名称
      ext: 'userNum',       // 指向IamUser#userNum，需要查询作为ext的属性名称 (扩展值，一般用于特殊情景)
      additional: {         // 附加条件，多个条件and连接（选项的过滤条件，用于特殊场景扩展）
        status: 'A',           // 状态为A的 在职(A)员工（后端SQL是eq比较）
        orgId: [1,2,3],        // 组织ID是 1或2或3 的用户(后端SQL是in查询)
        email: null            // 邮箱为空的用户（后端SQL是is null）
      }
    }
]
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      • 特殊场景attachMore的additional无法满足时，可通过开启getMore结合当前业务的/attachMore接口获取数据；如需要全局自定义附加条件规则，后端可尝试在CommonController中重写protected List<LabelValue> attachMoreRelatedData(AttachMoreDTO attachMoreDTO)方法。
      • attachMoreList 返回值会自动绑定至more属性中，上述配置样例返回值为(⚠️data的key规则是上述target的小驼峰命名 + Options)：
        {
    "code":0,
    "data":{
        "genderOptions":[
            {
                "label":"女",
                "value":"F"
            },
            {
                "label":"男",
                "value":"M"
            }
        ],
        "iamUserOptions":[
            {
                "label":"超级管理员",
                "value":10000,
                "ext": '000'
            }
        ]
    },
    "msg":"操作成功"
}
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23

  • 文件上传详解

    以下属性讲解，基于Upload组件 👉 Upload.vue组件概述

    • isUpload: 标记当前form表单中是否包含上传属性，默认不包含，如果引入组件，请手动开启：
     data() {
   return {
     isUpload: true
   }
 }
    1
    2
    3
    4
    5
    • fileWrapper: 所有文件的集合都放置与fileWrapper对象中，提交的时候会自动遍历，然后提交至服务端进行数据处理：
      • template内容
      <di-upload
 v-model="form.picture"
 :file-list="fileWrapper.pictureList"
 rel-obj-field="picture"
 rel-obj-type="Demo"/>
      1
      2
      3
      4
      5
      • script内容
        data() {
    return {
      // 包含属性
      fileWrapper: {
       //存储form.pictureList属性对应的文件集合
       pictureList: []
      }
    }
  }
      1
      2
      3
      4
      5
      6
      7
      8
      9
    • fileUuidList: 如果包含上传，那么会自动构建文件的提交数据用于绑定当前对象

← devtools介绍 →