jeecg-boot(vue2版)自定义组件详解

              <j-select-depart
                v-model="formData.orgCodes"
                customReturnField="orgCode"
                :multi="true"
              ></j-select-depart>

2. 用户多选组件

<j-select-multi-user v-model="formData.multiUser" :query-config="selectUserQueryConfig"/>

v-model绑定，默认绑定username，显示realname

参数配置：

参数	类型	说明
valueKey	String	自定义用于存储的字段默认`username`
displayKey	String	自定义用于展示的字段默认`realname`
disabled	Boolean	是否禁用默认false
queryConfig	Array	自定义查询条件

查询条件参数配置：

使用示例：

selectUserQueryConfig: [{ key: 'phone', label: '电话' }],

3. 根据部门选择用户

<j-select-user-by-dep v-model="formData.userIds" :multi="true"></j-select-user-by-dep>

v-model绑定，默认绑定username，显示realname

参数配置：

4. 字典选择标签

下拉框类型：（默认类型）将字典中配置的code传入

<j-dict-select-tag v-model="formData.sex" title="性别" dictCode="sex" placeholder="请选择性别" />

选项类型：

              <j-dict-select-tag
                v-model="formData.sex"
                type="radioButton"
                title="性别"
                dictCode="sex"
              />

带条件的字典表下拉：

              <j-dict-select-tag
                v-model="formData.user2"
                placeholder="请选择用户"
                dictCode="sys_user,realname,id,username!='admin' order by create_time"
              />

字典搜索下拉框：

              <j-search-select-tag
                placeholder="请做出你的选择"
                v-model="formData.searchMultipleValue"
                :dictOptions="searchOptions"
                mode="multiple"  //多选，删掉则为单选模式
              >
              </j-search-select-tag>

或者

<j-multi-select-tag v-model="formData.selMuti" dictCode="sex" placeholder="请选择"> </j-multi-select-tag>

多选效果相同

5. 角色选择组件

<j-select-role v-model="formData.selectRole" @change="changeMe" />

6. 职务选择组件

<j-select-position :buttons="false" v-model="formData.selectPosition" />

7. 多选组合

<j-checkbox v-model="formData.jCheckbox" :options="jCheckboxOptions" />

data(){
    return{
      jCheckboxOptions: [
        { label: 'Jeecg', value: 'jeecg' },
        { label: 'Jeecg-Boot', value: 'jeecgboot' },
        { label: 'Spring', value: 'spring', disabled: true },
        { label: 'MyBaits', value: 'mybatis' },
      ],
    }
}

参数配置：

8. 代码输入框

              <j-code-editor
                language="javascript"
                v-model="formData.jCodeEditor"
                :fullScreen="true"
                style="min-height: 100px"
              />

9. 日期组件

<j-date v-model="formData.jDate" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss" />

参数配置：

10. 富文本编辑器

<j-editor v-model="formData.jEditor" />

11. 过长剪切并弹窗

<j-ellipsis :value="formData.jEllipsis" :length="30" /> //length为显示长度

12. 滑块验证

<j-slider @onSuccess="handleJSliderSuccess" />
//handleJSliderSuccess为成功的回调函数

13. 多选下拉框（无字典）

<j-select-multiple v-model="formData.jSelectMultiple" :options="jSelectMultipleOptions" />

      jSelectMultipleOptions: [
        { text: '字符串', value: 'String' },
        { text: '整数型', value: 'Integer' },
        { text: '浮点型', value: 'Double' },
        { text: '布尔型', value: 'Boolean' },
      ],

14. JModal弹窗

<a-form-model-item label="JModal弹窗">
//使用按钮绑定visible决定弹窗显隐
              <a-button style="margin-right: 8px" @click="() => (modal.visible = true)">点击弹出JModal</a-button>
              <span style="margin-right: 8px">全屏化：<a-switch v-model="modal.fullscreen" /></span>
              <span style="margin-right: 8px">允许切换全屏：<a-switch v-model="modal.switchFullscreen" /></span>
            </a-form-model-item>

            <j-modal
              :visible.sync="modal.visible"
              :width="1200"
              :title="modal.title"
              :fullscreen.sync="modal.fullscreen"  //默认是否全屏
              :switchFullscreen="modal.switchFullscreen" //是否允许切换全屏
            >
              <template v-for="(i, k) of 30">
                <p :key="k">这是主体内容，高度是自适应的</p>
              </template>
            </j-modal>

15. 分类字典树形下拉组件（单选）

<j-tree-dict v-model="formData.treeDict" placeholder="请选择树字典" parentCode="B01" />

参数配置：

16. 树形下拉组件

             <j-tree-select
                v-model="formData.treeSelect"
                placeholder="请选择菜单"
                dict="sys_permission,name,id"
                pidField="parent_id"
                hasChildField="is_leaf"
                pidValue=""
                multiple  //添加后组件变为多选模式
              />

参数配置：

17. 分类字典树（可搜索，但好像只能搜索类型编码值）

<j-category-select v-model="formData.selectCategory" pcode="B01" :multiple="true" />

参数配置：

18. 图片上传

<j-image-upload bizPath="scott/pic" v-model="formData.imgList"></j-image-upload>
//bizPath为上传的路径

参数配置：

19. 文件上传

<j-upload v-model="formData.fileList"></j-upload>

参数配置：
20. 特殊查询组件

<j-input v-model="formData.jInput" :type="jInput.type" />

jInput: {
        type: 'like',
        options: [
          { value: 'like', label: '模糊（like）' },
          { value: 'ne', label: '不等于（ne）' },
          { value: 'ge', label: '大于等于（ge）' },
          { value: 'le', label: '小于等于（le)' },
        ],
      },

根据类型会自动对输入内容进行修改

参数配置：

21. markdown编辑器

<j-markdown-editor v-model="formData.content"></j-markdown-editor>

22. 省市县级联组件

<j-area-linkage v-model="formData.areaLinkage1" type="cascader" /> //级联模式
<j-area-linkage v-model="formData.areaLinkage2" type="select" />  //下拉模式

参数配置：

23. 关闭当前页面（方法）

<a-button type="primary" @click="handleCloseCurrentPage">点击关闭当前页面</a-button>

inject: ['closeCurrent'],

    handleCloseCurrentPage() {
      // 注意：以下代码必须存在
      // inject:['closeCurrent'],
      this.closeCurrent()
    },

24. 弹窗选择组件（与online报表有关）

              <j-popup
                v-model="formData.jPopup"
                code="demo"
                field="name"
                orgFields="name"
                destFields="name"
                :multi="true"
              />

参数配置：

jpopup弹窗选择