# lilo-ui

**Repository Path**: binyylovesino/lilo-ui

## Basic Information

- **Project Name**: lilo-ui
- **Description**: 1.一体化，配置化，低代码化表单，快速生成表单。
2.部分基于element-ui的拓展ui组件。
3.业务系统生产中常用ui组件。
4.数据可视化系统生产种常用ui组件.
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 71
- **Forks**: 4
- **Created**: 2023-02-22
- **Last Updated**: 2025-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#lilo ui plugin

## 插件概要

### 简介

- 一体化，配置化，低代码化表单，快速生成表单。

- 业务系统生产中常用ui组件。

- 数据可视化系统生产中常用ui组件。

- 部分基于element-ui的拓展ui组件。

- advanced-data-form 高级表单，以下简称adf，用于可编辑的表单显示，包括常规表单组件、表格等。

- data-form 一般表单，以下简称df，用于不可编辑的表单显示，一般用于详情展示，包括文本框、文本域、表格等。

- form-table 高级表单 + 一般表单 的符合组件，以下简称ft，一般情况下，上部区域为搜索条件，下部区域为表格Table。

- cute-table 非对外表格，在内部为adf、df中的table提供支撑。

### 安装
```
npm install
```

### 运行
```
npm run serve
```

### 打包
```
npm run build
```

## 我的主页

[点击进入我的博客主页](https://www.cnblogs.com/loveFlex/)

## 效果展示

![输入图片说明](public/demo/3089d19302effd727d556994241279a.png)

![输入图片说明](public/demo/ccf8081b174afb4cd1215850572ed7b.png)

![输入图片说明](public/demo/1939eb36632ed2a4a88449cd438bf26.png)

![输入图片说明](public/demo/7dcf48cd15fa666b14a9a4ee1b986f5.png)

![输入图片说明](public/demo/130589e52fa3944e1d752493627c44b.png)

![输入图片说明](public/demo/021992ccb6b29695016289c7d65a48c.png)

![输入图片说明](public/demo/50897f92e74d921fa47fadbcfb17027.png)

![输入图片说明](public/demo/cee3aeb68813c0cd309948ebf70aad2.png)


## 更新日志

### 2023-08-28
#### 1. 新增日历组件calendar，见示例【日历组件】

```
<template>
	<div class="calendar-container">
		<lilo-calendar 
			:default-selected-dates="defaultSelectedDates" 
			:current-date="currentDate" 
			:start-of-week="startOfWeek"
			:cell-height="cellHeight"
			:can-select="canSelect"
			@date-selected="dateSelected">
			<!-- <template #title> -->
				<!-- 标题栏可以设置插槽 -->
				<!-- <div class="custom-title">2023-08</div> -->
			<!-- </template> -->
		</lilo-calendar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultSelectedDates: [ '2023-08-01', '2023-08-03' ], //默认选中的日期
				currentDate: '2023-08', //当前月份
				startOfWeek: 1, //从星期几开始,
					// 1: '一',
					// 2: '二',
					// 3: '三',
					// 4: '四',
					// 5: '五',
					// 6: '六',
					// 0: '日'
				cellHeight: '120px', //日期单元的高度
				canSelect: true //是否可以选中，选中之后触发date-selected事件
			}
		},
		methods: {
			dateSelected(val) {
				console.log(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-container {
		padding: 20px;
		.custom-title {
			width: 100%;
			padding: 8px;
			color: #409eff;
			font-weight: bold;
			font-size: 1.1rem;
			border-bottom: 1px solid #0000001f;
		}
	}
</style>
```

![输入图片说明](public/demo/example/calendar.png)

#### 2. 提供基于【日历组件】的【节假日管理】功能整合，见示例【节假日管理】

![输入图片说明](public/demo/example/holidays.png)

#### 3. 新增drag-list组件，可拖动排序的列表，见示例【可拖动列表】

```
<template>
	<div class="drag-list">
		<lilo-drag-list :dataProvider="dataProvider" draggable :valueKey="valueKey" @sorted="sorted">
			<template slot-scope='{ item, index }'>
				<div>
					<span class="list-item">index：{{ index }}</span>
					<span class="list-item">id：{{ item.id }}</span>
					<span class="list-item">name：{{ item.name }}</span>
					<span class="list-item">address：{{ item.address }}</span>
				</div>
			</template>
		</lilo-drag-list>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				draggable: true, //是否可拖动，默认为true
				valueKey: 'id', //数据项的唯一标识
				dataProvider: [
					{ id: 'S001', name: '张三', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S002', name: '李四', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S003', name: '王五', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S004', name: '张飞', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S005', name: '关羽', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S006', name: '嬴政', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S007', name: '廉颇', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S008', name: '蒙恬', address: '湖北省武汉市江岸区百步亭花园现代城3区' },
					{ id: 'S009', name: '韩非', address: '湖北省武汉市江岸区百步亭花园现代城3区' }
				]
			}
		},
		methods: {
			sorted(list) { //拖动完成之后触发
				console.log(list) //改变后的数组顺序
				console.log(this.dataProvider) //原数据顺序不会被改变
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drag-list {
		padding: 10px;
		.list-item {
			margin: 0 5px;
		}
	}
</style>
```

### 2023-07-31
#### 1. responsive-dialog新增最大化、最小化功能

### 2023-07-24
#### 1. adf的Upload模板新增fileNameLength属性，文件名的长度验证，默认为30，见示例【高级表单】

```
{
	layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
	field: 'ceshiUpload',
	label: '测试图片上传',
	component: {
		name: 'Upload',
		// disabled: true,
		multiple: true, //是否多选，默认为true
		limit: 6,
		// accept: '.jpg, .jpeg, .png, .gif, .webp',
		size: 4 ,//mb
		// totalSize: 4//mb
		showFileName: true, //是否底部显示文件名，默认为true
		fileNameLength: 10 //文件名的长度验证，默认为30
	}
}
```

### 2023-05-12
#### 1. adf的Upload模板新增showFileName属性，是否把文件名显示在图片下面，见示例【高级表单】

```
{
	layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
	field: 'ceshiUpload',
	label: '测试图片上传',
	component: {
		name: 'Upload',
		// disabled: true,
		multiple: true, //是否多选，默认为true
		limit: 6,
		// accept: '.jpg, .jpeg, .png, .gif, .webp',
		size: 4 ,//mb
		// totalSize: 4//mb
		showFileName: true //是否底部显示文件名，默认为true
	}
}
```

### 2023-04-02
#### 1. df中Input插槽加入click事件，并且同时支持新的写法，见示例【一般表单】

```
{
	layout: { xs: 24, sm: 24, md: 12, lg: 12, xl: 6 },
	field: 'lxdh',
	label: '联系电话',
	component: {
		name: 'Input',
		clearable: true,
		//slotName: 'append',
		//slotContent: '<i class="el-icon-user" style="cursor:pointer;"></i>',
		slot: {
			name: 'append',
			content: '<i class="el-icon-search" style="cursor:pointer;"></i>',
			click: e => {
				console.log(e)
				console.log(this.dataProvider.zjhm)
				alert('input插槽')
			}
		}
	}
}
```

### 2023-03-01
#### 1. adf和df的table中文本支持v-html
#### 2. adf和df的table中单行加入设置默认选中行功能（多选），见示例【一般表单】

```
// table单选时设置选中行。
this.$refs.dataForm.setCheckedValues(['1', '2']);
```

### 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 + '<br/>' + '年龄：' + row.age + '<br/>' + '性别：' + 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. CheckBoxGroup动态设置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: { //styleObject该字段已弃用，建议用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 => {}) //调用接口
		}
```