jeecg 前端开发小记

jeecg 使用 antd 封装成 j- 开头的组件，如果 j- 组件功能没有实现 a- 组件的功能的，可以修改 j- 组件来实现。

JEditableTab

可以自动增加一行的 table

• columns 定义显示的列数

在 columns 中，不能使用 this，只能使用自带函数返回的变量，如

validateRules: [
    {
        // 自定义函数校验 handler
        handler(type, value, row, column, callback, target) {
            //target 行编辑的实例对象,可直接调用该实例内的方法
        }
    }
]

• FormTypes.slot 的事件传值 props

 methods: {
            /* a 标签的点击事件，删除当前选中的行 */
        handleDelete(props) {
                // 参数解释
                // props.index ：当前行的下标
                // props.text ：当前值，可能是defaultValue定义的值，也可能是从dataSource中取出的值
                // props.rowId ：当前选中行的id，如果是新增行则是临时id
                // props.column ：当前操作的列
                // props.getValue ：这是一个function，执行后可以获取当前行的所有值（禁止在template中使用）
                //                  例：const value = props.getValue()
                // props.target ：触发当前事件的实例，可直接调用该实例内的方法（禁止在template中使用）
                //例：target.add()
        }
}

• 使用 getValuesSync 获取 ‘rowId1’, ‘rowId2’ 这两行的值

let { error, values } = this.$refs.editableTable.getValuesSync({ validate: false, rowIds: ['rowId1', 'rowId2'] })
if (error === 0) {
    console.log('表单验证通过，数据：', values);
} else {
    console.log('未通过表单验证，数据：', values);
}

• 利用 target 改变值

setValues([
    {
        rowKey: id1, // 行的id
        values: { // 在这里 values 中的 name 是你 columns 中配置的 key
            'name': 'zhangsan'
        }
    }
])

• 多个 table 验证

import { validateTables, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
// 封装cases
let cases = []
cases.push(this.$refs.editableTable1)
cases.push(this.$refs.editableTable2)
cases.push(this.$refs.editableTable3)
cases.push(this.$refs.editableTable4)
cases.push(this.$refs.editableTable5)
// 同时验证并获取多个实例的值
validateTables(cases).then((all) => {
    // all 是一个数组，每项都对应传入cases的下标，包含values和deleteIds
    console.log('所有实例的值：', all)
}).catch((e = {}) => {
    // 判断表单验证是否未通过
    if (e.error === VALIDATE_NO_PASSED) {
        console.log('未通过验证的实例下标:', e.index)
    } else {
        console.error('发生异常:', e)
    }
})

• 有一个字段改变时，同步改变同行的其它字段，在 table 上使用 valueChange

 @valueChange="fnChange"

传的参数 { type, row, column, value, target } Event对象

JDictSelectTag

针对字典的使用，实现下拉和radio组件

<j-dict-select-tag v-model="queryParam.sex" placeholder="请输入用户性别" dictCode="sex"/>

<j-dict-select-tag v-model="queryParam.username" placeholder="请选择用户名称" dictCode="sys_user,realname,id,sex = '2'"/>  

JSearchSelectTag

字典表的搜索组件

<j-search-select-tag
        placeholder="选择字典"
        v-model="selectValue"
        :dictOptions="dictOptions">
</j-search-select-tag>

<j-search-select-tag
        placeholder="选择数据表"
        v-model="asyncSelectValue"
        dict="sys_depart,depart_name,id"
        :async="true">
</j-search-select-tag>

下拉选项遮挡、错位问题

增加 getPopupContainer 属性

<a-select
    placeholder="请选择"
    :options="dicts.displayTemplate"
    :getPopupContainer="node => node.parentNode"
/>

如果遇到 a-select 标签层级过深的情况，可能仍然会显示异常，只需要多加几个.parentNode （例：node => node.parentNode.parentNode.parentNode）

table 的封装

获取数据时候的排序，默认按 createTime，要修改需要看封装的组件是怎么写排序的

用了 isorter，这时给 isorter 传值，改变默认选项

{
   column: 'updateTime',
   order: 'desc',
}