# lilo-ui
**Repository Path**: bernieHua/lilo-ui
## Basic Information
- **Project Name**: lilo-ui
- **Description**: 1.部分基于element-ui的拓展ui组件。
2.业务系统生产中常用ui组件。
3.数据可视化系统生产种常用ui组件.
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 4
- **Created**: 2023-02-28
- **Last Updated**: 2023-03-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#lilo ui plugin
## 介绍
1. 业务系统生产中常用ui组件。
2. 数据可视化系统生产中常用ui组件。
3. 部分基于element-ui的拓展ui组件。。
4. advanced-data-form 高级表单，以下简称adf，用于可编辑的表单显示，包括常规表单组件、表格等。
5. data-form 一般表单，以下简称df，用于不可编辑的表单显示，一般用于详情展示，包括文本框、文本域、表格等。
6. form-table 高级表单 + 一般表单 的符合组件，以下简称ft，一般情况下，上部区域为搜索条件，下部区域为表格Table。
7. cute-table 非对外表格，在内部为adf、df中的table提供支撑。
## 更新日志
### 2023-02-28
1. adf和df的table中单行加入设置默认选中行功能，见示例【一般表单】
```
{
layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
field: 'ceshiTable',
// label: '核酸检测机构名称',
labelWidth: '0px',
component: {
name: 'Table',
// height: 200,
checked: true, //开启第一列勾选功能
checkedKey: 'id', //每一行记录的唯一标识字段名
checkedValue: "2", //默认选中的记录行唯一标识字段值[id=1]，该属性仅在单选中有效
checkedDisabled: false,
checkedMultiple: false,
...
}
}
```
```
// table单选时设置选中行，这里因为有2个table，所以需要设置第二个参数为1，一般情况下不用传。
// this.$refs.dataForm.setCheckedValue('1');
this.$refs.dataForm.setCheckedValue('1', 1);
```
### 2023-02-24
1. 多功能附件查看器新增showFileName，是否把文件名显示在图片下面，见示例【一般表单】
```
{
layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
field: 'ceshiAttachmentViewer',
label: '多功能附件查看器',
// labelWidth: '0px',
component: {
name: 'AttachmentViewer',
showFileName: true //默认值为true
}
}
```
### 2023-01-05
1. adf和df的table中增加第一列全选和单选功能，多选为checkBox，单选为radio，见示例【一般表单】
```
checked: true, //开启第一列勾选功能
checkedKey: 'id', //每一行记录的唯一标识字段名
checkedDisabled: false, //禁用功能
checkedMultiple: true, //是否多选
```
2. adf和df的table中支持音频，audio，见示例【一般表单】
```
{
field: 'mp3',
label: '录音',
templates: [
{
name: 'Audio',
srcKey: 'src',
emptyText: '无录音'
}
]
}
```
3. adf和df的table中支持图标，Image，见示例【一般表单】
```
{
field: 'icons',
label: '图标',
width: 160,
templates: [
{
name: 'Image',
width: '16px',
height: '16px',
tooltip: {
srcField: 'url', //默认为src
contentField: 'name', //默认为content
placement: 'top-start',
effect: 'light'
}
}
]
}
```
4. adf和df的table中支持单元格样式，cellStyle，见示例【一般表单】
```
cellStyle: ({row, column, rowIndex, columnIndex}) => {
if(columnIndex === 4) {
if(rowIndex === 0) {
return {
backgroundColor: 'rgba(0,0,255,0.2)'
}
} else {
return {
backgroundColor: 'rgba(255,0,0,0.2)'
}
}
}
}
```
5. adf和df的table中支持行样式，rowStyle，见示例【高级表单】
```
stripe: false, //设置rowStyle之前禁用斑马纹
rowStyle: ({ row, rowIndex }) => {
if(rowIndex === 1) {
return {
backgroundColor: 'rgba(255,0,0,0.2)'
}
}
}
```
6. adf和df的table中支持复杂tootip显示，见示例【高级表单】
```
tooltip: {
// contentField: 'bt', //默认为content
placement: 'top',
effect: 'dark',
textFormatter: (row, col, template) => {
// return row[template.tooltip.contentField]
return '性名：' + row.name + '
' + '年龄：' + row.age + '
' + '性别：' + row.sex;
}
}
```
7. adf和df的table中支持合计显示，见示例【高级表单】
```
showSummary: true,
sumText: '文本', //默认为合计
```
8. adf新增自定义的多选和单选下拉框，lilo-group-select，见示例【高级表单】【小组件】
```
{
layout: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
field: 'ceshiGroupSelect2',
label: '多选下拉框组',
component: {
name: 'GroupSelect',
// clearable: false,
// disabled: true,
multiple: true, //true多选，false反选
options: [
{
id: 1,
label: '热门城市',
checked: false,
isIndeterminate: false,
options: [
{
value: 'Shanghai',
label: '上海'
},
{
value: 'Beijing',
label: '北京'
}
]
},
{
id: 2,
label: '城市名',
checked: false,
isIndeterminate: false,
options: [
{
value: 'Chengdu',
label: '成都'
},
{
value: 'Shenzhen',
label: '深圳'
},
{
value: 'Guangzhou',
label: '广州'
},
{
value: 'Dalian',
label: '大连'
},
{
value: 'Huizhou',
label: '惠州'
}
]
}
],
change: val => {
console.log(val);
}
}
}
```
9. ft支持是否初始化自动查询，:auto-query="false"
10. ft支持各字段是否参与查询，showFieldChecked="true"，可以配合setCheckedData方法使用，见示例【搜索列表2】
```
{
layout: { xs: 24, sm: 24, md: 4, lg: 4, xl: 4 },
field: 'bh',
fieldChecked: true, //该字段默认是否参与查询
label: '编号',
component: {
name: 'Input',
placeholder: '请输入编号',
clearable: true
}
}
```
11. Upload上传组件支持多选multiple: true，见示例【高级表单】
12. ft上增加queryComplete事件回调，事件返回查询到的数据tablelist
13. ft上增加pageSizes属性
```
queryInfo: {
entity: Seo,
pageSizes: [ 10, 20, 30 ], //新增属性，分页控件自定义每页显示多少条，默认为[ 15, 20, 25, 30 ]
param: {
pageindex: 1,
pagesize: 10
},
requestField: {
index: 'pageindex',
size: 'pagesize'
},
responseField: {
data: 'rows',
total: 'total'
}
}
```
### 2022-12-22
1. 一体化表单组件增加tooltip功能拓展
2. 级联选择框功能拓展
3. 一体化表单组件增加getRefs功能拓展
4. 优化form-table在不同场景下的高度自适应能力
5. adf增加字段权限功能validator
6. cute-table增加单选功能Radio
7. cute-table增加column权限功能validator
8. 表单字段权限validator
9. checkBoxGroud动态设置options
10. checkbox disabled 问题
11. 增加Upload附件总共大小限制参数，totalSize（总大小）和size（单个大小）参数二选一
12. 一体化表单disabled支持方法返回
### 2022-11-18
1. 增加接收Html内容的节点
```
{
layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
field: 'hjanbmblhz',
label: '呼叫案件办理汇总',
component: {
name: 'Html',
style: {
color: '#ff0000',
fontWeight: 'bold'
},
validator: () => {
return this.$store.getters.outerMeta.baseInfo.ishy
}
}
}
```
2. adf的Template增加样式对象
```
{
layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
component: {
name: 'Template',
style: {
textAlign: 'end'
},
templates: [
{
name: 'Button',
label: '查询',
type: 'primary',
icon: 'el-icon-search',
click: this.query
}
]
}
}
```
3. adf新增setCheckedData方法
```
this.$refs.advancedDataForm.setCheckedData('field', true); //字段名
this.$refs.formTable.getForm().setCheckedData('*', false); //\*代表全部字段
```
4. adf新增 getFormDataAsync(keyword_args = 'files', fileTypeField = 'contenttype', data)方法
当附件需要反选编辑时，需要调用此方法来获取最终附件，服务端需要返回文件类型contenttype
该方法为异步方法，必须使用async和await对应
```
async submit() {
const data = await this.$refs.adf.getFormDataAsync(['bqfj', 'bhfj'], 'contenttype', this.dataProvider);//获取需要提交的数据
server_interface(data).then(res => {}) //调用接口
}
```