# 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: 值来源于getMoreattachMoreList 配置请求接口后返回的结果;
    • getMore: 开启关联数据会从当前业务的/attachMore接口中读取,可与attachMoreList结合使用;
    • attattachMoreList: 实现关联数据从/common/attachMore接口统一获取,配置如下:
      // 未指定 label 属性时,为关联字典,指定 label 属性时则为关联对象
      attattachMoreList: [
          {
            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
      • 特殊场景attattachMore的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
                    }
                ]
            },
            "msg":"操作成功"
        }
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
  • 文件上传详解

    以下属性讲解,基于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: 如果包含上传,那么会自动构建文件的提交数据用于绑定当前对象