整理10.9

列知识

1. 设置列和table列的列内容相同

2. 设置列和table列都包含了：系统列、自定义列（文本列、图标列、图表列、其他列）、系统列-新增列

需求理解

需求一：新增

1. table组件添加 ‘新增’ 按钮，新增一条数据，该数据内容结构是：tableColumns对应的列，也就是系统列（包含新增的系统列）

2. 点击确定，通过表单验证之后，回调组件外传进去的AddData（）方法，调用创建接口，创建成功重新刷新列表

3. 表单提取数据的方式有

   • 时间类型：DATE，时间格式

   • 数字类型：NUMERICAL, 数字类型

   • 字符类型：CHARACTER 字符串

   • 时长类型：DURATION, 数字类型

未命名文件 (1).png

4. 表单布局：模块划分、栅格布局（可以规定某个数据提取模块的位置，默认顺序是最初始的table列顺序）

5. 对话框底部按钮：对话框底部四个按钮：取消、重置、确认、确认并新增下一个（连续创建）

需求二：列的编辑维护页

1. 列设置下拉框列表添加编辑按钮，弹出对话框，对话框内容为当前列对应的所有设置内容

2. 此需求的提出是为了解决列设置一行显示不全编辑的元素，弹出对话框，展示所有可编辑内容

实现方案

新增需求

1. 显示新增按钮:AddVisible="true"

2. 根据sortBy_old排序好this.items(所有列)的原始顺序

3. 通过遍历所有列根据fsyste === 1；筛选出系统列，并在最外层添加batchAdd = 'true'，决定是否批量新增

4. 根据筛选出来的系统列数据，在对话框渲染出对应表单元素

5. 根据batchAdd决定是否渲染按钮：确认并新增下一个（点击访问新建接口，响应成功后不关闭对话框）

6. 至于模块化渲染，则是在3中的每个item中国添加系字段model=“diy_model_name”,相同名称则是在一个模块中，具体实现方式是，遍历每个item，将每个model提取出来放在一个数组里面，最后去重，遍历该数组渲染出对应模块

7. 栅格化布局两种方法，一是传入<el-col :span="span">对应的span值，二是监听屏幕宽度的变化，设置对应一行放多少

8. 根据步骤3渲染出来每个元素对应的表单校验规则，添加校验方式

9. 用户点击新增按钮，弹出对话框，用户填写完表单，通过表单校验，整合数据，调用后端新增接口，接口响应成功，刷新页面，关闭对话框，交互结束。

10. 最终传到表单组件的数据格式如下

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n491" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, Menlo, Monaco, monospace, serif; font-size: 0.9rem; background: inherit; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; margin-left: 1em; padding-left: 1em; border: 1px solid rgb(221, 221, 221); padding-bottom: 8px; padding-top: 6px; margin-bottom: 1.5em; width: inherit;">{
 {
 prop: policy_[0].prop
 label: policy_[0].label,
 dataType: c.dataType, // 根据值是DATE、NUMERICAL、CHARACTER、BOOLEAN渲染不同DOM
 width: policy_[0].width,
 align: policy_[0].align,
 fixed: policy_[0].fixed,
 sortBy: policy_[0].sortBy,
 showType: c.showType,
 fshow: policy_[0].fshow,
 label_old: policy_[0].label,
 width_old: policy_[0].width,
 align_old: policy_[0].align,
 fixed_old: policy_[0].fixed,
 sortBy_old: policy_[0].sortBy,
 fshow_old: policy_[0].fshow,
 fsystem: 1,
 expressionIcon: [],
 chart: "",
 key: Math.random(),
 enumKey: c.enumKey,
 span:6, // 栅格化比例（新增字段）
 model:'baseInfo', // 属于哪个模块（新增字段）
 loadDataFun:()=>{retur res}, // 下拉框数据加载函数（新增字段）
 }，

 batchAdd = 'true' // 确认并新增下一个（新增字段）
}</pre>

列的编辑需求

1. 列设置每行添加编辑按钮，弹出对话框

2. 拿到该行数据，渲染到弹出的对话框内

3. 通过表单校验后，重新渲染列表