低代码配置-列表页组件设计

• 保存

  • 表单属性存放 — bill
  • 筛选项配置存放 — filterLayout
  • 列表按钮存放 — buttonLayout
  • 列表布局存放 — listLayout
  • api存放 — api

• 数据结构

layout:{

	// 存放表单基础配置
	bill:{
	},
	
	// 存放按钮基础配置
	buttonLayout:{
	// inSide 行内按钮 
	// outSide 全局按钮
	},
	
	// 存放表格列配置数据
	listLayout:{
	},
	
	//存放api数据
	api:{
	}
}

• 表单属性数据来源
  建议从保存数据中直接修改，利用对象的存放规则；按照这个思路，我们可以从组件列表中将所需要的配置抛出( 整理成单个对象 )

因此：
在获取完后端返回的数据后，组件，提交到父级组件中，更新表单属性面板属性，且不受后续其他操作影响。

• 定义提交数据格式

const submitData = ref({
// 存放表单基础配置
  bill: {
    ifForm: false, // 展示筛选区域
  },

  // 存放按钮基础配置
  buttonLayout: {
    outsideButton: [],
    insideButton: [],
  },

  filterLayout: {
    defaultSpan: 8,
    fields: [],
    filterButtons: [],
    gutter: [8, 8],
    labelWidth: 60,
  },

  // 存放表格列配置数据
  listLayout: {
    ifOperate: false,
    ifRowSelect: false,
    operateWidth: 80,
    pageScroll: false,
    selectKey: '',
    title: '明细列表',
    fields: [],
    config: {
      sortingList: [],
    },
  },

  // 存放api数据
  api: {
  },
})

• 获取列表页数据时组装数据并提交

submitData.value = layout
emit('updateFormProperties', submitData.value)

列表页表单属性设计

这一块主要是提供给用户简单、便捷、高效的配置。因此设计方面采用了归纳分类的方法，每个布局组件都需要设计一个表单属性，不用理会通用的问题，此处只针对列表页做讲解，基础属性配置如下：

- 显示筛选区域 ( 显示类的放在最上面 )
- 列表标题( 未启用、根据个人需求 )
- 表格明细标题
- 操作列配置
	- 操作列显示
	- 列宽度(默认值：80px)
	- 固定位置(左/右)
	- 内容对齐方向(左/中/右)
	- ...
- 表格配置
	- 行选择
		- 开关
		- 选择器类型( 单选/多选 )
		- 数据行key ( 选择器选中的行数据唯一值 )
- 数据相关
	- 表格排序
	- API
	- 列配置项
		- 动态删减列
		- 修改列属性
			- 列名称
			- 列宽度
			- 超出省略
			- 超出省略提示
			- 列数据排序 ( 接口排序 )
			- 开启排序按钮 ( 表格功能 )