组件

diboot组件基于Element进行二次封装和调整，搭配devtools生成的后端接口，一键生成前端代码，数倍提效。

TIP

以下内容为组件概述，实际开发时，建议直接使用devtools生成前端代码。

import 导入组件

路径：src/components/diboot/components/excel/import.vue

功能：提供excel导入、示例下载、数据预览等功能

• 属性

名称	说明	类型	默认值	必填
exampleUrl	示例文件地址	string	-	Y
uploadUrl	上传地址	string	-	Y
previewUrl	预览地址	string	-	Y
previewSaveUrl	预览后保存地址	string	-	Y
fieldsRequired	提交时候必须的参数	object	{}	N

• 事件

名称	说明
finishedUpload	数据上传至数据库成功后触发

• 示例

<el-dialog
      class="excel-import"
      :visible.sync="visible"
      title="数据上传"
      @closed="close"
    >
    <excel-import
      v-if="visible"
      :example-url="`${baseApi}/downloadExample`"
      :upload-url="`${baseApi}/upload`"
      :preview-url="`${baseApi}/preview`"
      :preview-save-url="`${baseApi}/previewSave`"
      @finishedUpload="handleFinishedUpload"
    ></excel-import>
    <div slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
    </div>
</el-dialog>

<script>
import ExcelImport from '@/components/diboot/components/excel/import'
export default {
  name: 'ImportExample',
  data() {
    return {
      baseApi: '/importExample/excel',
      visible: false
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    /**
     * 刷新数据
     */
    handleFinishedUpload() {
      //触发上传完成，告知list组件
      this.$emit('complete')
      this.visible = false
    },
    close() {
      this.visible = false
    }
  },
  components: {
    ExcelImport
  }
}
</script>

export 导出组件

since v2.4.0

路径：src/components/diboot/components/excel/export.vue

功能：提供excel导功能，其中包含动态导出列（可选择需要的列进行导出）

• 属性

名称	说明	类型	默认值	必填
exportUrl	导出文件地址	string	-	Y
tableHeadUrl	获取表头地址	string	-	Y
params	数据过滤参数	string	-	Y
options	自定导出选项	array	[]	N
width	提交时候必须的参数	string	50%	N

• 示例

<template>
  <!-- ... -->
  <excel-export
      :export-url="`${baseApi}/excel/export`"
      :table-head-url="`${baseApi}/excel/tableHead`"
      :params="buildQueryParam"
      :options="[{title:'导出用户联系方式',columns:['realname','userNum','mobilePhone']}]"
  />
  <!-- ... -->
</template>

<script>
import list from '@/components/diboot/mixins/list'
import ExcelExport from '@/components/diboot/components/excel/export'

export default {
  mixins: [list],
  components: {
    ExcelExport
  },
  data() {
    return {
      baseApi: '/exportExample',
    }
  }
}
</script>

richText 富文本组件

概述：富文本组件基于tinymce封装，提供简单的富文本功能

路径：src/components/diboot/components/richText/**.vue

功能：RichEditor.vue(富文本组件) 和 RichRender.vue(渲染富文本组件)

• RichEditor.vue属性

名称	说明	类型
value	v-model绑定的值	string
relObjType	富文本框上传数据需要的对象类型	string
relObjId	富文本框上传数据需要的对象id	string number

• RichEditor.vue事件

名称	说明
change	更改值触发

• RichEditor.vue示例

<!--v-if主要为了强制刷新富文本子组件，否则在打开更新的时候不会更新字段值-->
<rich-editor
        v-if="state.visible"
        rel-obj-type="Demo"
        :rel-obj-id="form.id"
        v-model="form.richText"
>
</rich-editor>

• RichRender.vue属性

名称	说明	类型
content	富文本内容	string

• RichRender.vue示例

 <rich-render :content="model.richText"></rich-render>

upload 上传组件

概述：基于element-ui的upload组件封装，更加贴合diboot接口服务

路径：src/components/diboot/components/upload/Upload.vue

功能：增加图片form校验、增强与后端接口交互，简化代码流程

• 属性

名称	说明	类型	默认值	必填
prefix	地址前缀（axios的baseUrl），用于图片回显	string	-	N
action	向后端发送的请求地址	string	-	Y
relObjType	绑定的业务对象类名	string	-	Y
relObjField	绑定业务对象的属性	string	-	Y
fileList	文件存储位置	array	-	Y
listType	上传列表的内建样式，支持text/picture-card	string	text(isImage为true时，使用picture-card)	N
limitCount	上传数量限制）	number	1	N
limitType	上传类型限制，不传默认所有文件，限制多个使用','分割	string	-	N
limitSize	单个文件上传大小(M)	number	2	N
isImage	是否是图片，默认不是图片类型（主要用户上传后构建值）	boolean	false	N
uploadText	上传框里面的文本	string	上传	N
value	v-model绑定的值	string	-	Y

• 事件

名称	说明
input	直接使用v-model绑定属性值即可

• 示例

<el-form-item label="轮播图" >
  <upload
    v-if="state.visible"
    :prefix="filePrefix"
    :action="fileAction"
    :file-list="fileWrapper.slideshowImgsList"
    :rel-obj-type="relObjType"
    rel-obj-field="slideshowImgs"
    :limit-count="9"
    :is-image="true"
    list-type="picture-card"
    v-model="form.slideshowImgs"
  ></upload>
</el-form-item>

<el-form-item label="附件" >
  <upload
    v-if="state.visible"
    :prefix="filePrefix"
    :action="fileAction"
    :file-list="fileWrapper.attachmentList"
    :rel-obj-type="relObjType"
    rel-obj-field="attachment"
    :limit-count="1"
    v-model="form.attachment"
  ></upload>
</el-form-item>
<script>
import form from '@/components/diboot/mixins/form'
import Upload from '@/components/diboot/components/upload/Upload'
import { dibootApi } from '@/utils/request'
export default {
  name: 'UploadExampleForm',
  components: {
    Upload
  },
  mixins: [form],
  data() {
    return {
      baseApi: '/uploadExample',
      filePrefix: '/api',
      fileAction: '/uploadFile/upload/dto',
      //当前业务对象类名
      relObjType: 'UploadExample',
      fileWrapper: {
        //轮播图存放位置
        slideshowImgsList: [],
        //附件存放位置
        attachmentList: [],
      },
      isUpload: true
    }
  },
  methods: {
    enhance(values) {
      // 设置文件uuid
      this.__setFileUuidList__(values)
    },
    /**
     * 打开表单之后的操作， 加载
     * @param id
     */
    afterOpen(id) {
      if (id) {
        // 更新的时候加载上传的轮播图
        dibootApi.get(`/uploadFile/getList/${id}/${this.relObjType}/slideshowImgs`).then(res => {
          if (res.code === 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(data => {
                this.fileWrapper.slideshowImgsList.push(this.fileFormatter(data))
              })
            }
          }
        })
        // 更新的时候回显 附件
        if (this.model.attachmentFileList && this.model.attachmentFileList.length > 0) {
          this.fileWrapper.attachmentList = this.model.attachmentFileList.map(file => this.fileFormatter(file))
        }
      }
    },
    /**
     * 数据转化
     */
    fileFormatter(data) {
      const file = {
        uid: data.uuid,
        name: data.fileName || ' ', // 文件名
        filePath: data.accessUrl,
        url: `${this.filePrefix}${data.accessUrl}/image`
      }
      return file
    }
  },
}
</script>

editTableCell 表格行编辑组件

路径：src/components/diboot/components/editTableCell.vue

功能：提供table表格行编辑功能

• 属性

名称	说明	类型	默认值	必填
editable	是否编辑中	Boolean	false	Y
value	编辑/非编辑显示的值	{String Boolean Number}	-	Y
label	非编辑显示的值（优先级最高）	string	-	N
formType	表单类型:[INPUT、INPUT_NUMBER、TEXTAREA、S_SELECT、SWITCH、DATEPICKER、DATETIMEPICKER,TREE]	string	-	Y
isBoolean	是否是布尔类型的单元格	Boolean	false	N
options	选择情况下需要传入LabelValueList	Array	[]	N
ellipsis	非编辑状态超长是否省略	Boolean	false	N
placeholder	导出文件地址	string	-	N
baseUrl	基础请求路径（加载远程树结构数据基础路径，拼接/list，无树结构可不配，有树结构必须配置）	string	-	N
fullUrl	完整请求路径(加载远程树结构数据，覆盖baseUrl，无树结构可不配，有树结构必须配置)	string	-	N
treeValueField	树的value字段	String	id	N
treeTitleField	树的显示字段	string	'label'	N

• 示例

<template>
  <el-table-column>
    <template slot-scope="scope">
      <el-form-item>
        <edit-table-cell
            form-type="INPUT"
            placeholder="name"
            :editable="currentPrimaryValue === record[primaryKey]"
            v-model="scope.row.name"
        />
      </el-form-item>
    </template>
  </el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-form-item>
        <edit-table-cell
            form-type="INPUT"
            placeholder="name"
            form-type="TREE"
            base-url="/testTree"
            :label="scope.row.parentName"
            :editable="currentPrimaryValue === record[primaryKey]"
            v-model="scope.row.parentId"
        />
      </el-form-item>
    </template>
  </el-table-column>  
</template>

<script>
import list from '@/components/diboot/mixins/list'
import EditTableCell from '@/components/diboot/components/editTableCell'

export default {
  mixins: [list],
  components: {
    EditTableCell
  },
  data() {
    return {
      baseApi: '/exportExample',
      columns: [
        {
          title: 'name',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' } },
        {
          title: '父级',
          dataIndex: 'parentName',
          scopedSlots: { customRender: 'parentName' }
        }
      ]
    }
  }
}
</script>

FlatTree 平冠树组件

路径：src/components/FlatTree/index.vue

功能：树的叶子节点扁平化，用法与 UI 库的 Tree 组件一致

protectField 保护字段组件

路径：src/components/diboot/components/protectField/index.vue

功能：提供保护字段的查看与编辑功能

使用相当于el-form-item与el-input的结合，可参考数据保护的前端案例