# 通用表格组件 **Repository Path**: tanh-coding/generalTable ## Basic Information - **Project Name**: 通用表格组件 - **Description**: 通用表格组件 - **Primary Language**: HTML - **License**: CC-BY-SA-4.0 - **Default Branch**: master - **Homepage**: https://www.zjh336.cn/generalTable - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 6 - **Created**: 2022-07-04 - **Last Updated**: 2022-07-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 通用表格组件 [在线预览](https://www.zjh336.cn/generalTable) ## 一、组件概览以及背景 ​ 在数据表格报表设计和医嘱任务表格设计的需求背景下，诞生了通用表格组件。该组件主要用于解决自定义表格的设计以及动态渲染，可支持较为灵活的自定义样式配置。该组件是报表表格组件的升级版，移除部分定制功能，将个性功能抽离支持扩展，保留公共的基础功能，以便于后续的扩展。 ## 二、组件设计思路 1、核心思想：开发组件的目的就是提高开发效率，避免重复造轮子，将类似的功能通用化。 2、无论是数据报表，还是医嘱任务表格，又或者以后还有扩展需求，实际上都是先做表格设计，然后再做数据渲染。确定大方向，一个表格设计组件、一个表格渲染组件。 3、表格设计也可以抽象，分为三个部分，一个表格的数据来源处理，一个表格内容处理，一个表格属性处理。 4、数据来源部分，可以采用两级的树结构，支持拖拽数据，以及支持扩展功能，如增加图标显示，绑定事件。 5、表格内容部分，需要支持两种模式，一种简易模式，一种混合模式，以应对不同需求。 6、表格属性部分，支持表格属性的配置，以及单元格式属性的配置，以及一些扩展属性的配置。 7、表格渲染，根据设计组件生成的配置渲染出表格外观，再根据数据接口填充数据。 ## 三、组件结构 ### 1、目录结构图 ``` ├─GeneralTable #通用表格组件 │ │ generalTableConstant.js #配置常量 │ │ GeneralTableDesign.js #组件注册文件 │ │ GeneralTableDesign.vue #通用表格设计组件 │ │ GeneralTableRender.js #组件注册文件 │ │ GeneralTableRender.vue #通用表格渲染组件 │ │ generalTableUtils.js #表格工具方法 │ │ │ └─components │ │ DataTree.vue #数据树组件 │ │ evol-input.vue #自定义输入框组件 │ │ TableProperties.vue #表格属性组件 │ │ right-key-menu.vue #右键菜单 │ │ │ ├─blendModeTable #混合模式表格组件 │ │ blendTable.vue #表格主体 │ │ │ └─easyModeTable #简易模式表格组件 │ easyTable.vue #表格主体 ``` 整个通用表格组件分为三大部分 表格设计组件部分、表格渲染组件部分、依赖组件部分 表格设计组件：由三块区域组成，左侧数据区域(数据树组件)、中间表格区域(混合模式表格组件/简易模式表格组件，自定义输入框组件，右键菜单组件)、右侧表格属性区域(表格属性组件) 表格渲染组件：仅由表格区域组成(混合模式表格组件/简易模式表格组件，自定义输入框组件) 依赖组件部分：数据树组件、混合模式表格组件、简易模式表格组件、自定义输入框组件、右键菜单组件、表格属性组件 ### 2、组件页面效果图 ![generalTable1](images/generalTable1.png) ![generalTable2](images/generalTable2.png) ## 四、组件功能及实现 ### 1、表格设计组件 #### 1.1 属性绑定(v-bind) | 参数编码 | 参数名 | 必 填 | 参数描述 | 数据类型 | 示例 | | ---------------------- | -------------------- | ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | dataTree | 树数据 | 是 | 传入树结构的数据,其中:
label为标题;
key为字段编码；
dataSetCode表示数据集编码；
resultType表示结果类型，1表单条数据，2表示多条数据；
children表示子节点数据。
firstNode为一级节点标志；
其中部分字段编码可自定义，参考以下参数 | array | [{ 'label': '单条数据', 'firstNode': true, 'children': [{ 'label': '二级标题(单条)', resultType: 1, dataSetCode: 'code1', key: 'key1' }, { 'label': '二级标题2(单条)', resultType: 1, dataSetCode: 'code2', key: 'key2' }] }, { 'label': '多条数据', 'firstNode': true, 'children': [{ 'label': '二级标题3(多条)', resultType: 2, dataSetCode: 'code3', key: 'key3' }] }] | | treeFirstNode | 第一级节点标志 | 否 | 树节点以什么字段区分第一级 | string | firstNode | | treeDefaultProps | 数据树默认配置 | 否 | 自定义children节点和label节点 | object | {children:'children',label:'label'} | | tablePropertyHidden | 需要隐藏的表格属性 | 否 | 隐藏部分表格属性值 | array | [] | | cellPropertyHidden | 需要隐藏的单元格属性 | 否 | 隐藏部分单元格属性值 | array | [] | | screenHeight | 除去标题的高度 | 否 | 控制组件高度,实现滚动粘性布局 | int | 700 | | tableMode | 表格模式 | 是 | 表格组件模blend混合模式、easy简易模式 | string | blend | | tableContentBackground | 表格内容背景色 | 否 | 表格组件的背景色 | string | ‘#00000000’ | | saveMappingFunction | 保存映射关系的方法 | 否 | 自定义保存映射关系的方法(使用场景如:医嘱任务表格,输入项与拖入项建立映射关系) | function | (selectCells, renderTBodyData)=>{} | #### 1.2 事件绑定(v-on) | 事件名 | 回调参数 | 参数说明 | 事件说明 | | ------------- | -------- | ------------------------------------------------------------ | ---------------------------------- | | targetDropEnd | object | { renderTBodyData, content, selectFlag }表格数据,拖拽内容，单元格标记 | 拖拽回调：用于拖拽数据后的事件处理 | | clearContent | object | { renderTBodyData, selectCellsData }表格数据,选中的单元格 | 清空内容：用于清空内容后的事件处理 | #### 1.3 插槽(slot) | 插槽名 | 参数 | 参数说明 | 插槽说明 | | ------------------------- | ------------ | ------------------------------------------------------------ | -------------------------------------------- | | tableFirst | parentData | {belong} 所属类型(一级节点的label) | 一级菜单按钮：一级树节点 右侧按钮 | | tableSecond | childrenData | {data,bleong} 节点数据(二级节点数据) ，所属类型(一级节点的label) | 二级菜单按钮：二级树节点 右侧按钮 | | tableExtendedPropertyTop | data | {tableProperty} 表格属性 | 表格扩展属性顶部区域：位于顶部的表格扩展属性 | | tableExtendedProperty | data | {mode,treeData} 表格模式，树数据 | 位于底部的表格扩展属性 | | cellTableExtendedProperty | data | {mode,treeData,cellProperty} 表格模式,树数据,单元格属性 | 单元格扩展属性：单元格的扩展属性 | #### 1.4 核心方法(function) ##### 1.4.1暴露给外部调用 | 方法名 | 参数描述 | 方法描述 | | --------------------------- | ----------------------------------------------------- | --------------------------- | | componentInit(tableJson) | {Object} tableJson 表格配置json字符串 | 根据tableJson进行组件初始化 | | getTableJSON() | / | 向外提供获取表格json的方法 | | operateHistory(operateType) | operateType 操作类型 撤销(repeal) 或者 还原(restore) | 操作历史记录 | ##### 1.4.2内部核心方法 | 方法名 | 参数描述 | 方法描述 | | ----------------------------------------------------- | ------------------------------------------------------------ | ----------------------------- | | getTableRef() | / | 根据当前模式获取表格组件的ref | | getTablePropertiesRef() | / | 获取表格属性组件的ref | | setTable(options) | {Object} options generalTableConstant.TABLE_OPTIONS | 创建表格 | | changeTableSeting(e) | {Object} e {type:'',data:{}} | 表格和单元格的状态切换 | | changeTableOptions(e) | {Object} e {key:'',value:''} | 单个表格属性重新赋值 | | changeTableExtendOptions(e) | {Object} e {key:'',value:''} | 单个表格扩展属性重新赋值 | | changeCellOptions(e) | {Object} e {key:'',value:''} | 单个单元格属性重新赋值 | | tableJsonChange({ oldTableJsonObj, newTableJsonObj }) | oldTableJsonObj 修改前表格json配置
newTableJsonObj 修改后表格json配置 | 表格json对象变化 触发 | #### 1.5 核心功能说明 ##### 1.5.1 tableJson格式(不含数据项) ```json { "data": { "tdData": [ [{ "val": "手写内容", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-0-1-1" }, { "val": "", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-1-1-1" }] ] }, "options": { "color": "rgba(166,208,242,1)", "headRowNum": 0, "bodyRowNum": 1, "colNum": 2, "rowMax": 50, "colMax": 50, "headerFill": "#F9FAFB", "cellFill": "rgba(255, 255, 255, 0)", "rowBorderColor": "rgba(37,58,101,1)", "colBorderColor": "rgba(37,58,101,1)", "heightAdaptive": false, "isSelect": true, "isPage": false, "isFirstCreat": false, "isRowTotal": false, "isColTotal": false, "borderSize": "1", "configMode": "custom", "changeKey": ["configMode"] }, "extendOptions":{ "previewThemeColorCode":"green" } } ``` ##### 1.5.2 componentInit 组件初始化 ​ 表格设计组件初始化，调用componentInit方法，不传参数表示初始化默认表格，传入以上json字符串表示回显表格。方法内部调用子组件设置表格信息、表格属性、单元格属性。 ##### 1.5.3 getTableJSON 获取表格JSON ​ 获取调整后的表格json字符串，调用getTableJSON方法，返回以上json字符串。 ##### 1.5.4 operateHistory 历史记录以及撤销还原功能实现 ​ 由于历史记录和撤销还原功能应当属于表格设计组件，所以就在这里进行了实现，但是触发逻辑应该在表格属性组件和表格内容组件中，所以此处提供tableJsonChange方法供其他组件调用。另外撤销与还原操作也应该是由其他组件触发，如提供按钮点击进行撤销或者还原，又或者是通过快捷键。所以提供了operateHistory方法给外部调用，直接传入参数operateType即可。 ​ 实现思路很简单，以队列的形式保存数据，每操作一步将数据记录一条，并且设置索引值，当达到上限，则覆盖已有记录。当进行撤销、还原操作时，按索引取出数据，进行回显。 ​ 历史记录数据中储存了，记录的时间，与上一次记录间隔的秒数，表格的json字符串，当与上一次记录时间未超过一秒时，直接覆盖最后一条历史记录，避免快速变化内容导致历史记录过多。 ​ ### 2、表格渲染组件 #### 2.1 属性绑定(v-bind) | 参数编码 | 参数名 | 必 填 | 参数描述 | 数据类型 | 示例 | | ---------------------- | -------------- | ------ | ------------------------------------------------------------ | -------- | ------------------------------------------ | | tableMode | 表格模式 | 是 | 表格模式 easy 简易模式 blend 混合模式 | string | ‘blend’ | | tableContentBackground | 表格内容背景色 | 否 | 表格组件的背景色 | string | '#00000000' | | mappingFunction | 映射函数 | 否 | 两个单元格之间的映射关系函数 与表格设计组件中的保存映射关系相对应(使用场景如:医嘱任务表格,合计项映射关系,解析逻辑) | function | (item, singleDataMap, renderTBodyData)=>{} | #### 2.2 事件绑定(v-on) | 事件名 | 回调参数 | 参数说明 | 事件说明 | | ------------ | -------- | ----------------------------------------------------- | ------------------------------------------ | | dataComplete | object | { renderTHeadData, renderTBodyData }表头数据,表格数据 | 数据加载完成：用于数据加载完成后的逻辑处理 | #### 2.3 核心方法(function) ##### 2.3.1 暴露给外部调用 | 方法名 | 参数描述 | 方法描述 | | ----------------------------------------------------------- | ------------------------------------------------------------ | ---------- | | initTable(tableJson, callBack) | tableJson 表格配置信息，callBack 回调函数 | 初始化表格 | | resetTable() | / | 重置表格 | | refreshData(multipleDataArray, singleDataMap, hiddenNoData) | multipleDataArray 多数据数组,singleDataMap 单数据map,hiddenNoData 是否隐藏无数据效果 | 刷新数据 | ##### 2.3.2 内部核心方法 | 方法名 | 参数描述 | 方法描述 | | ------------- | -------- | ----------------------------- | | getTableRef() | / | 根据当前模式获取表格组件的ref | #### 2.4 核心功能说明 ##### 2.4.1 tableJson格式(含数据项) ```json { "data": { "tdData": [ [{ "val": "值(自定义项目)", "rowspan": 1, "colspan": 1, "key": 105, "cellType": "text", "label": "自定义项目", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-0-1-1", "tag": "td", "id": 105, "materialId": 95, "materialNo": "c-yzrw-202108281104013", "titleName": "自定义项目", "itemContent": "

自定义项目

", "updateUserId": "5bb2f84bde244a22841967f49ccd1e05", "updateUserName": "系统管理员", "updateTime": "2021-09-12 09:55:27", "deleteBit": false, "usedFlag": 1, "dataSetCode": "custom-105", "dataSetName": "自定义项目-自定义项目", "resultType": 1, "displayOrder": 0 }, { "val": "值(医嘱项目)", "rowspan": 1, "colspan": 1, "key": 229, "cellType": "text", "label": "医嘱项目", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-1-1-1", "tag": "td", "id": 229, "titleName": "医嘱项目", "materialId": 95, "materialNo": "c-yzrw-202108281104013", "orderCategory": "long,stat", "showType": "bedNo", "titleShowTotal": false, "deleteBit": false, "exitsMapping": true, "usedFlag": true, "dataSetCode": "execute-229", "dataSetName": "医嘱项目-医嘱项目", "resultType": 1, "displayOrder": 0 }, { "val": "值(二级护理)", "rowspan": 1, "colspan": 1, "key": 70, "cellType": "text", "label": "二级护理", "otherVal": "", "otherSelect": "", "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(255, 255, 255, 0)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-2-1-1", "tag": "td", "id": 70, "titleName": "二级护理", "dataSetCode": "internal-70", "dataSetName": "内置项目-二级护理", "dataSetFieldCode": "twoLevel", "dataSetFieldName": "二级护理人数", "updateUserId": "5bb2f84bde244a22841967f49ccd1e05", "updateUserName": "系统管理员", "updateTime": "2021-09-08 16:21:53", "deleteBit": false, "typeId": 6, "titleShowTotal": true, "usedFlag": 1, "materialNo": null, "materialName": null, "typeName": "医嘱内置", "resultType": 1, "displayOrder": 0 }] ] }, "options": { "color": "rgba(22, 91, 147, 1)", "headRowNum": 0, "bodyRowNum": 1, "colNum": 3, "rowMax": 50, "colMax": 50, "headerFill": "#F9FAFB", "cellFill": "rgba(255, 255, 255, 0)", "rowBorderColor": "rgba(37,58,101,1)", "colBorderColor": "rgba(37,58,101,1)", "heightAdaptive": false, "isSelect": true, "isPage": false, "isFirstCreat": false, "isRowTotal": false, "isColTotal": false, "borderSize": "1", "configMode": "custom", "changeKey": ["color"] } } ``` ##### 2.4.2 singleDataMap数据 ```json { "custom-105": [{ "custom-105&105": "

自定义项目

" }], "execute-229": [{ "execute-229&229": "01,09,12,16,18,33" }], "internal-70": [{ "internal-70&70": "1" }] } ``` ##### 2.4.3 multipleDataArray数据 ```json [{ "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&levelName": "业务查房", "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&sort": "1", "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&id": "1" }, { "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&levelName": "行政查房", "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&sort": "2", "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&id": "2" }, { "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&levelName": "教学查房", "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&sort": "3", "98ed2a4b-4d1e-41f8-8075-e302cf028c7b&id": "3" }] ``` ##### 2.4.4 initTable 表格初始化 ​ 表格组件初始化，调用initTable方法，传入表格json配置以及回调函数。回调函数常用于渲染完成表格后，立即加载数据。 ##### 2.4.5 resetTable 重置表格 ​ 使用空表格，重新渲染表格组件。 ##### 2.4.6 refreshData 刷新表格数据 ​ 加载表格数据，数据来源包括多数据数组、单数据map，可以支持隐藏无数据显示效果。表格配置的data.tdData中，数据单元格有dataSetCode字段以及key字段。 ​ 在singleDataMap中，dataSetCode与singleDataMap中的key值对应，singleDataMap的value值是一个只有一个元素的数组。元素对象的属性名就是dateSetCod+’&‘+key，属性值就是对应的数据。 ​ 在multipleDataArray中，每个元素的属性名都是由dataSetCode+’&‘+key组成，属性值就对应的数据。 ​ 组件内部调用的是tableSetValue方法 ### 3、数据树组件 #### 3.1 组件效果 ![generalTable3](images\generalTable3.png) 第一个框为一级节点插槽，第二个框为二级节点插槽，如果设置了插槽，鼠标移入显示，移出隐藏 #### 3.2 属性绑定(v-bind) | 参数编码 | 参数名 | 必 填 | 参数描述 | 数据类型 | 示例 | | ------------ | -------------- | ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | title | 数据树标题 | 是 | 数据树标题 | string | '项目元素' | | dataTree | 树数据 | 是 | 传入树结构的数据,其中:
label为标题;
key为字段编码；
dataSetCode表示数据集编码；
resultType表示结果类型，1表单条数据，2表示多条数据；
children表示子节点数据。
firstNode为一级节点标志；
其中部分字段编码可自定义，参考以下参数 | array | [{ 'label': '单条数据', 'firstNode': true, 'children': [{ 'label': '二级标题(单条)', resultType: 1, dataSetCode: 'code1', key: 'key1' }, { 'label': '二级标题2(单条)', resultType: 1, dataSetCode: 'code2', key: 'key2' }] }, { 'label': '多条数据', 'firstNode': true, 'children': [{ 'label': '二级标题3(多条)', resultType: 2, dataSetCode: 'code3', key: 'key3' }] }] | | firstNode | 第一级节点标志 | 否 | 树节点以什么字段区分第一级 | string | 'firstNode' | | defaultProps | 数据树默认配置 | 否 | 自定义children节点和label节点 | object | {children:'children',label:'label'} | | screenHeight | 除去标题的高度 | 否 | 控制组件高度,实现滚动粘性布局 | int | 700 | | defaultLabel | 默认添加label | 否 | 假如后台传的数据没有叫label的，是否对数据进行label的添加 | boolean | false | #### 3.3 插槽(slot) | 插槽名 | 参数 | 参数说明 | 插槽说明 | | ------------- | ------------ | ------------------------------------------------------------ | --------------------------------- | | parent-icon | parentData | {belong} 所属类型(一级节点的label) | 一级菜单按钮：一级树节点 右侧按钮 | | children-icon | childrenData | {data,bleong} 节点数据(二级节点数据) ，所属类型(一级节点的label) | 二级菜单按钮：二级树节点 右侧按钮 | #### 3.4 核心方法(function) | 方法名 | 参数描述 | 方法描述 | | ------------------------- | -------------------------- | ---------------------------------------------- | | handleDragStart(node, ev) | {Object} node，{Object} ev | 将需要传递的数据写进了事件对象的dataTransfer里 | #### 3.5 核心功能说明 ##### 3.5.1 dataTransferData 拖拽节点数据 ```json { "id": 229, "titleName": "医嘱项目", "materialId": 95, "materialNo": "c-yzrw-202108281104013", "orderCategory": "long,stat", "showType": "bedNo", "titleShowTotal": false, "deleteBit": false, "exitsMapping": true, "usedFlag": true, "dataSetCode": "execute-229", "dataSetName": "医嘱项目-医嘱项目", "key": 229, "label": "医嘱项目", "resultType": 1 } ``` ##### 3.5.2 dataTransferData 拖拽节点方法 ​ 树节点拖拽时，通过eventBus触发dataTransferData 方法，修改表格设计组件中的dataTransferData数据，缓再将数据传入到表格组件中进行赋值。 ### 4、表格属性组件 #### 4.1 组件效果 ![generalTable4](images\generalTable4.png)![generalTable5](images\generalTable5.png) #### 4.2 基本功能 ##### 4.2.1 表格属性 **表格初始化**：输入行列，点击按钮生成表格 **边框线粗细**：整体表格的边框线粗细，内置三种线条粗细 **高度自适应**：在设计的表格未超过一屏高度时，开启高度自适应则会占满整个屏幕，未开启则是表格自身高度 **单元格填充**：整体表格的背景色，支持设置透明度 **横向边框线**：整体表格横线的颜色，支持设置透明度 **纵向边框线**：整体表格竖线的颜色，支持设透明度 文本颜色：整体表格的文字颜色 ##### 4.2.2 单元格属性 **单元格宽度**：调整选中单元格的宽度百分比 **单元格高度**：调整选中单元格的高度，单元格高度会自动根据内容撑高，如果设置高度大于内容高度，则以设置高度为准 **单元格填充**：调整选中单元格的背景色，优先级比表格属性高 **下边框颜色**：调整选中单元格的下边框颜色，支持设置透明度，优先级比表格属性的高 **右边框颜色**：调整选中单元格的右边框颜色，支持设置透明度，优先级比表格属性的高 **文本颜色**：调整选中单元格的文本颜色，支持设置透明度，优先级比表格属性的高 **字体大小**：调整选中单元格的字体大小，内置三种字体大小 **水平对齐**：调整选中单元格的水平对齐方式，内置居左、居中、居右 **垂直对齐**：调整选中单元格的垂直对齐方式，内置居上、居中、居下 **字体样式**：调整选中单元格内容的字体样式，支持加粗、斜体、下划线 ##### 4.2.3 扩展属性 根据需求定制，医嘱任务的主题色、配色模式设置，内容映射字段配置 #### 4.3 属性绑定(v-bind) | 参数编码 | 参数名 | 必 填 | 参数描述 | 数据类型 | 示例 | | ------------------- | ---------------- | ------ | ------------------------------------------------- | -------- | ------- | | state | 状态 | 是 | 区分是表格属性还是单元格属性 table表格 cell单元格 | string | 'table' | | tablePropertyHidden | 隐藏的表格属性 | 否 | 设置需要隐藏的表格属性 | array | [] | | cellPropertyHidden | 隐藏的单元格属性 | 否 | 树节点以什么字段区分第一级 | array | [] | | mode | 表格模式 | 是 | 表格模式 easy简易模式 blend混合模式 | string | 'blend' | | treeData | 数据树 | 是 | 数据树组件的原始数据 | array | [] | | screenHeight | 除去标题的高度 | 否 | 控制组件高度,实现滚动粘性布局 | int | 700 | | repealDisabled | 撤销禁用标识 | 否 | 撤销操作到底后需要禁用点击 | boolean | true | | restoreDisabled | 还原禁用标识 | 否 | 还原操作到底后需要禁用点击 | boolean | true | #### 4.4 插槽(slot) | 插槽名 | 参数 | 参数说明 | 插槽说明 | | ------------------------- | ---- | ------------------------------------------------------- | -------------------------------------------- | | tableExtendedPropertyTop | data | {tableProperty} 表格属性 | 表格扩展属性顶部区域：位于顶部的表格扩展属性 | | tableExtendedProperty | data | {mode,treeData} 表格模式 树数据 | 表格扩展属性底部区域：位于底部的表格扩展属性 | | cellTableExtendedProperty | data | {mode,treeData,cellProperty} 表格模式 树数据 单元格属性 | 单元格扩展属性：单元格的扩展属性 | #### 4.5 事件绑定(v-on) event | 事件名 | 回调参数 | 参数说明 | 事件说明 | | ------------------ | -------- | ------------------------------------------------------------ | ---------------------------------------- | | changeTableOptions | e | {key:'',value:''}单个表格属性键值对 generaltableConstant.TABLE_OPTIONS | 表格属性变化：表格属性变化后触发的方法 | | changeCellOptions | e | {key:'',value:''} 单个单元格属性键值对 generaltableConstant.CELL_OPTIONS | 表格属性变化：单元格属性变化后触发的方法 | function | 事件名 | 回调参数 | 参数说明 | 事件说明 | | -------------- | ------------- | ----------------------------------------------- | -------------------------------------------- | | operateHistory | operateType | 操作类型 撤销(repeal) 或者 还原(restore) | 操作历史记录：点击撤销、还原按钮后触发的方法 | | createTable | tableProperty | 表格配置数据 generaltableConstant.TABLE_OPTIONS | 表格属性变化：点击创建表格触发的方法 | #### 4.6 核心方法(function) ##### 4.6.1暴露给外部调用 | 方法名 | 参数描述 | 方法描述 | | ----------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | | updatePanelData(dataObj = {}) | dataObj 属性map对象 key值范围 generaltableConstant.TABLE_OPTIONS | 提供一个方法给外面，更新全局的面板数据 传入需要更新的键值对 | ##### 4.6.2内部核心方法 | 方法名 | 参数描述 | 方法描述 | | -------------------------------- | --------------------------------------- | ------------------ | | tablePropertyChange($event, key) | $event 修改的属性值 ，key 修改的属性key | 表格属性改变触发 | | cellPropertyChange($event, key) | {Object} $event，{Object} key | 单元格属性改变触发 | #### 4.7 核心功能说明 ##### 4.7.1 tableOptions、cellOptions、defaultOptions ```vue // 表格配置 export const TABLE_OPTIONS = { color: 'rgba(20, 0, 0, 1)', // 整体文字颜色 headRowNum: 0, // 表头 bodyRowNum: 10, // 行 colNum: 10, // 列 rowMax: 50, // 行最大值 colMax: 50, // 列最大值 headerFill: '#F9FAFB', // 表头颜色 cellFill: 'rgba(254, 254, 254, 1)', // 单元格填充 rowBorderColor: '#DFE6EC', // 横向边框线颜色 colBorderColor: '#DFE6EC', // 纵向边框线颜色 heightAdaptive: false, // 高度自适应 isSelect: true, // 是否默认进行查询 isPage: false, // 是否分页 isFirstCreat: true, // 是否为第一次创建 isRowTotal: false, // 是否开启行合计数 isColTotal: false, // 是否开启列合计数 borderSize: '1', // 边框线粗细 configMode: 'official'// 配置模式 } // 单元格配置 export const CELL_OPTIONS = { id: '', size: '大', // 文字大小 color: '', // 文字颜色 align: '中', // 文字对齐方式 isWeight: false, // 是否加粗 isItalic: false, // 是否斜体 underline: false, // 是否下划线 cellFill: '', // 单元格颜色 topBorderColor: '', // 单元格上边框颜色 bottomBorderColor: '', // 单元格下边框颜色 leftBorderColor: '', // 单元格左边框颜色 rightBorderColor: '', // 单元格右边框颜色 isColorChange: false, // 颜色是否进行了更改 content: { // 内容 dataSetCode: '', // dataSetName: '', // key: '', // 字段编码 label: '', // 字段名称 resultType: '' // 返回类型 }, isShow: false, // 是否显示 changeKey: [] // 更改的属性 } // 默认单元格内容 export const DEFAULT_CELL = { val: '', rowspan: 1, colspan: 1, key: '', cellType: 'text', // text radio checkbox result label: '', otherVal: '', otherSelect: '', isRemove: false, isEditCell: false, // 用户是否可以编辑 text单元默认可编辑 在setTable中设置 size: '中', isColorChange: false, color: 'rgba(20, 0, 0, 1)', isWeight: false, isItalic: false, underline: false, align: '中', valign: '中', cellFill: '', topBorderColor: '', // 单元格上边框颜色 bottomBorderColor: '', // 单元格下边框颜色 leftBorderColor: '', // 单元格左边框颜色 rightBorderColor: '' // 单元格右边框颜色 } ``` ##### 4.7.2 updatePanelData 修改面板数据 ​ 在外部需要修改表格属性的某几项值时，可以调用updatePanelData 方法。使用场景，比如：医嘱任务表格，配色模式(表格顶部扩展属性插槽)的回显设置；医嘱任务表格，预览主题色(表格底部扩展属性插槽)，切换主题色，一键修改单元格填充色、横向边框线、纵向边框线、文本颜色。、 ##### 4.7.3 tablePropertyChange 表格属性修改方法 ​ 当表格属性值发生变化后，需要同步修改表格组件中对应的样式，组件内部会触发changeTableOptions事件。在表格设计组件中，调用方法修改表格组件提供的同步样式方法。 ##### 4.7.4 cellPropertyChange 单元格属性修改方法 ​ 当单元格属性值发生变化后，需要同步修改表格组件中对应的样式，组件内部会触发changeCellOptions事件。在表格设计组件中，修改对应的单元格样式。 ### 5、表格组件-混合模式 #### 5.1 组件效果 ![generalTable6](images\generalTable6.png) #### 5.2 基本功能 ##### 5.2.1单元格输入 ​ 支持tab键切换 ##### 5.2.2 右键功能 右键UI使用右键组件 **合并单元格**：选中单元格进行合并，合并后的单元格可以再次进行合并 **拆分单元格**：选中合并单元进行拆分，拆分的单元格为最细粒度的单元格 **插入整行**：可选上、下，在选中的单元格上方或者下方插入一行 ​ 所选单元格为合并单元格，且选中向上，则在合并单元格的上方插入一行 ​ 所选单元格为合并单元格，且选中向下，则在合并单元格的下方插入一行 ​ 所选单元格所在行存在合并列，且当前行不属于合并列的首尾行，则插入的行在相应位置也会合并列 ​ 所选单元格所在行存在合并列，且(当前行属于合并列首行且向上，或者当前行属于合并列尾行且向下)，则插的行不会进行合并列 **插入整列**：可选左、右，在选中的单元格左方或者右方插入一列 ​ 所选单元格为合并单元格，且选中向左，则在合并单元格的左方插入一列 ​ 所选单元格为合并单元格，且选中向右，则在合并单元格的右方插入一列 ​ 所选单元格所在列存在合并行，且当前列不属于合并行的首位列，则插入的行在相应位置也会合并行 ​ 所选单元格所在列存在合并行，且(当前列属于合并行首列且向左，或者当列属于合并行尾列且向右)，则插入的列不会进行合并行 **删除整行**：删除行暂未支持多选 ​ 所选单元格为合并单元格，则删除当前合并单元格的所有行 ​ 所选单元格所在行存在合并列，删除该行后，合并列行数-1 **删除整列**：删除列暂未支持多选 ​ 所选单元格为合并单元格，则删除当前合并单元格的所有列 ​ 所选单元格所在列存在合并行，删除该列后，合并和列数-1 **清空样式**：清空所选单元格中，设置的单元格样式 **清空内容**：清空所选单元格中，拖拽的数据项内容 **保存映射**：保存两个单元格的映射关系，根据需求定制 #### 5.3 属性绑定(v-bind) | 参数编码 | 参数名 | 必 填 | 参数描述 | 数据类型 | 示例 | | ------------------- | ------------------------------ | ------ | ------------------------------------------------------------ | -------- | ------------------------------------------ | | isEdit | 是否为编辑 | 否 | 是否为编辑模式 默认编辑模式 预览时需要设置为false | boolean | true | | options | 表格配置 | 是 | 表格配置 generalTableConstant.TABLE_OPTIONS | object | {} | | cellOptions | 单元格配置 | 是 | 单元格配置generalTableConstant.CELLE_OPTIONS | object | {} | | isShow | 每一个单元格中的isShow是否生效 | 否 | 传入该标识 则根据单元格配置单元格是否生效 一般表格设计时false,表格渲染时true | boolean | false | | dataTransferData | 当前拖拽的数据 | 否 | 拖拽的节点数据 | object | {} | | saveMappingFunction | 保存映射关系的方法 | 否 | 自定义保存映射关系的方法 (使用场景如:医嘱任务表格,输入项与拖入项建立映射关系) | function | (selectCells, renderTBodyData)=>{} | | mappingFunction | 映射函数 | 否 | 两个单元格之间的映射关系函数 与表格设计组件中的保存映射关系相对应(使用场景如:医嘱任务表格,合计项映射关系,解析逻辑) | function | (item, singleDataMap, renderTBodyData)=>{} | #### 5.4 事件绑定(v-on) event | 事件名 | 回调参数 | 参数说明 | 事件说明 | | --------------- | -------- | ------------------------------------------------------------ | ------------------------------------------ | | targetDropEnd | object | { renderTBodyData, content, selectFlag } 表格数据,拖拽内容，单元格标记 | 拖拽数据完成：用于拖拽数据后的事件处理 | | clearContent | object | { renderTBodyData, selectCellsData } 表格数据,选中的单元格 | 清空内容：用于清空内容后的事件处理 | | tableJsonChange | object | { oldTableJsonObj, newTableJsonObj } 变化前json值,变化后json值 | 表格JSON变化：用于表格内容变化后的处理 | | dataComplete | object | { renderTHeadData, renderTBodyData } 表头数据 表格数据 | 数据加载完成：用于数据加载完成后的逻辑处理 | function | 事件名 | 回调参数 | 参数说明 | 事件说明 | | ----------------- | -------- | -------------------------------------------------- | ------------------------------------------------------------ | | changeTableSeting | object | { type, data } 表格设置状态(cell、table) 表格配置 | 切换表格设置状态(单元格属性、表格属性)：用于组件内部触发外部方法切换表格设置状态 | #### 5.5 核心方法(function) ##### 5.5.1暴露给外部调用 | 方法名 | 参数描述 | 方法描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | setTable(headRowNum, bodyRowNum, colNum) | headRowNum，bodyRowNum,colNum 表头行数、单元格行数、列数 | 初始化设置表格 常用于编辑模式下初始化设置 | | echoTable(tableJson) | tableJson 表格json配置 | 表格回显 (会触发表格加载完成、默认设置数据未加载) 常用于渲染表格模式下的表格回显 | | refreshTable(tableJson) | tableJson 表格json配置 | 刷新表格 (仅刷新表格配置) 常用于编辑模式下的刷新表格 | | tableSetValue(multipleDataArray, singleDataMap, hiddenNoData = false) | multipleDataArray 多条数据集，singleDataMap 单条数据集，hiddenNoData 隐藏无数据展示 | 加载表格数据 常用于渲染模式下的加载表格数据 | | getTableJSON() | / | 获取表格JSON方法 | | changeTableExtendOptions(e) | e {key:'',value:''} | 修改表格扩展属性值 | ##### 5.5.2内部核心方法 | 方法名 | 参数描述 | 方法描述 | | --------------------------------------------- | ------------------------------------------------------------ | ---------------------------------------------------- | | getVal(tag, item, row, col) | tag th表头、td单元格,
item 单元格数据，
row 行索引,
col 列索引 | 获取输入框值以及生成单元格唯一标识 | | cellPropertyChange($event, key) | {Object} $event，{Object} key | 单元格属性改变触发 | | getMenu(event) | event | 获取右键菜单 | | handleTargetDragOver(e) | {Object} e | 拖拽移入 拖拽到td内触发 | | handleTargetDrop(e) | {Object} e | 拖拽放置(可拖拽至任意位置) 拖拽到可放置的td内后触发 | | setTableStyle() | / | 设置表格整体的样式 | | setSelectCellStyle() | / | 设置选中单元格的样式 | | mouseDown(event) | {Object} event | 扩选功能-鼠标按下 | | mouseMove(event) | {Object} event | 扩选功能-鼠标移动 | | mouseUp(event) | {Object} event | 扩选功能-鼠标松开 | | clearContent(empty) | {Object} empty | 清空内容 | | cellInfoParse(currSelect) | currSelect selectFlag值 | 单元格信息解析 | | removeSingleRow(dataArr, indexInfo) | dataArr 数据数组 表头数据 或者 表体数据
indexInfo 索引信息 | 删除单个表格行 | | removeRow() | / | 删除行 | | removeSingleCol(dataArr, indexInfo) | dataArr 数据数组 表头数据 或者 表体数据
indexInfo 索引信息 | 删除单个表格列 | | removeCol() | / | 删除列 | | getRowColIndexArray(type = 'col', tag = 'td') | type 类型 col/row tag标签 td/th | 获取行列索引数组 | | insertCol(direction) | direction 位置 | 插入列 | | insertRow(direction) | direction 位置 | 插入行 | | cellSpilt() | / | 单元格拆分 | | mergingCell() | / | 合并单元格 | #### 5.6 核心功能说明 ##### 5.6.1 混合模式tableJson示例 ```json { "data": { "tdData": [ [{ "val": "医嘱项目", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-0-1-1" }, { "val": "值(医嘱项目)", "rowspan": 1, "colspan": 1, "key": 229, "cellType": "text", "label": "医嘱项目", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-0-1-1-1", "tag": "td", "id": 229, "titleName": "医嘱项目", "materialId": 95, "materialNo": "c-yzrw-202108281104013", "orderCategory": "long,stat", "showType": "bedNo", "titleShowTotal": false, "deleteBit": false, "exitsMapping": false, "usedFlag": false, "dataSetCode": "execute-229", "dataSetName": "医嘱项目-医嘱项目", "resultType": 1, "displayOrder": 0 }], [{ "val": "自定义项目", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-1-0-1-1" }, { "val": "值(自定义项目)", "rowspan": 1, "colspan": 1, "key": 105, "cellType": "text", "label": "自定义项目", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-1-1-1-1", "tag": "td", "titleName": "自定义项目", "itemContent": "

自定义项目

", "id": 105, "initTitleName": "内置项目", "initItemContent": "

内置项目

", "materialId": 95, "materialNo": "c-yzrw-202108281104013", "updateUserId": "5bb2f84bde244a22841967f49ccd1e05", "updateUserName": "系统管理员", "updateTime": "2021-09-12 09:55:27", "deleteBit": null, "dataSetCode": "custom-105", "dataSetName": "自定义项目-自定义项目", "resultType": 1, "displayOrder": 0 }], [{ "val": "内置项目", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-2-0-1-1" }, { "val": "值(二级护理)", "rowspan": 1, "colspan": 1, "key": 70, "cellType": "text", "label": "二级护理", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-2-1-1-1", "tag": "td", "id": 70, "titleName": "二级护理", "dataSetCode": "internal-70", "dataSetName": "内置项目-二级护理", "dataSetFieldCode": "twoLevel", "dataSetFieldName": "二级护理人数", "updateUserId": "5bb2f84bde244a22841967f49ccd1e05", "updateUserName": "系统管理员", "updateTime": "2021-09-08 16:21:53", "deleteBit": false, "typeId": 6, "titleShowTotal": true, "usedFlag": null, "materialNo": null, "materialName": null, "typeName": "医嘱内置", "resultType": 1, "displayOrder": 0 }], [{ "val": "手写内容", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-3-0-1-1" }, { "val": "", "rowspan": 1, "colspan": 1, "key": "", "cellType": "text", "label": "", "otherVal": "", "otherSelect": false, "isRemove": false, "isEditCell": false, "size": "中", "isColorChange": false, "color": "rgba(20, 0, 0, 1)", "isWeight": false, "isItalic": false, "underline": false, "align": "中", "valign": "中", "cellFill": "rgba(254, 254, 254, 1)", "topBorderColor": "", "bottomBorderColor": "", "leftBorderColor": "", "rightBorderColor": "", "isShow": true, "selectFlag": "td-3-1-1-1" }] ] }, "options": { "color": "rgba(166,208,242,1)", "headRowNum": 0, "bodyRowNum": 4, "colNum": 2, "rowMax": 50, "colMax": 50, "headerFill": "#F9FAFB", "cellFill": "rgba(255, 255, 255, 0)", "rowBorderColor": "rgba(37,58,101,1)", "colBorderColor": "rgba(37,58,101,1)", "heightAdaptive": false, "isSelect": true, "isPage": false, "isFirstCreat": false, "isRowTotal": false, "isColTotal": false, "borderSize": "1", "configMode": "internal", "changeKey": ["isFirstCreat"] } } ``` ##### 5.6.2 加载完成标识说明 ​ 表格加载完成标识(tableComplete):表格加载完成之后，才会开始监听表格配置变化，进而触发历史记录操作。由于本身的回显表格也会导致表格配置变化，所以增加该标识进行拦截。 ​ 数据加载完成标识(dataComplete):数据加载完成后会修改值，一般用于数据加载完成后的loading关闭。 ##### 5.6.3 setTable 初始化创建表格 ​ 根据表头行数、表体行数、表体列数创建初始表格，常用于编辑模式下，没有tableJosn配置的空白表格创建，会触发表格加载完成标识。 ##### 5.6.3 echoTable 表格回显 ​ 根据tableJson配置进行表格回显。常用于渲染模式下的表格回显。会设置数据未加载，表格加载完成。 ##### 5.6.4 refreshTable 刷新表格配置 ​ 根据tableJson配置进行表格回显。常用于编辑模式下的表格回显。 ##### 5.6.5 tableSetValue 加载表格数据 ​ 根据多数据数组、单数据map、是否隐藏无数据展示标记，加载表格数据。加载完成后触发dataComplete方法。 ##### 5.6.6 getTableJSON 获取表格JSON ​ 获取调整后的表格json字符串 ##### 5.6.7 changeTableExtendOptions 修改表格扩展属性配置 ​ 由于表格扩展属性配置不属于通用表格的配置，属于定制化需求，所以表格扩展属性值并没有存入tableJson中，是单独进行保存的。但是扩展属性的修改也需要纳入历史记录操作的监测中，所以在组件内部储存了表格扩展属性对象，并且提供方法给外部调用，允许外部修改扩展属性值。 ### 6、表格组件-简易模式 建设中！！！ ### 7、表格组件-动态列模式 建设中！！！ ### 8、公共内容 #### 8.1 generalTableConstant 通用表格常量 TABLE_OPTIONS： 表格配置 CELL_OPTIONS：单元格配置 DEFAULT_CELL：默认单元格配置 #### 8.2 generalTableUtils 提供一些外部需要的方法 resetTableItemContent 清空表格项目内容: 复制医嘱任务表格时，需要清空数据项内容 setTableJsonExtendOptions 设置表格扩展属性：提供设置表格扩展属性的方法 ```javascript // 清空表格项目内容 export const resetTableItemContent = function(tableJson) { // 清空项目内容方法 const resetItemContent = (item) => { item['val'] = '' item['dataSetCode'] = '' item['dataSetName'] = '' item['key'] = '' item['label'] = '' item['resultType'] = '' item['tag'] = '' item['displayOrder'] = null return item } if (!tableJson) { return tableJson } // 获取表格配置对象 const tableJsonObj = JSON.parse(tableJson) // 获取数据对象 const data = tableJsonObj.data // 表格数据 const tdData = data.tdData || [] // 重置表格中的项目数据 tdData.forEach((row, rowIndex) => { row.forEach((item, colIndex) => { // 如果包含内容(由左侧项目拖拽生成的) if (item.dataSetCode) { // 重置项目内容 item = resetItemContent(item) // 赋值 tdData[rowIndex][colIndex] = item } }) }) // 表头数据 const thData = data.thData || [] thData.forEach((row, rowIndex) => { row.forEach((item, colIndex) => { // 如果包含内容(由左侧项目拖拽生成的) if (item.dataSetCode) { // 重置项目内容 item = resetItemContent(item) // 赋值 tdData[rowIndex][colIndex] = item } }) }) tableJsonObj.data.tdData = tdData tableJsonObj.data.thData = thData // 返回处理后的json return JSON.stringify(tableJsonObj) } /** * 设置tableJson的扩展属性值extendOptions (扩展属性值仅用作参数传递,不作存储以及回显) * @param tableJson * @param key * @param value * @returns {string|*} */ export const setTableJsonExtendOptions = (tableJson, key, value) => { if (!tableJson) { return tableJson } // 转换js对象 const tableJsonObj = JSON.parse(tableJson) // 获取表格扩展属性对象 const extendOptions = tableJsonObj.extendOptions || {} // 设置键值对 extendOptions[key] = value // 重设到js对象中 tableJsonObj.extendOptions = extendOptions // 重新转换json字符串 tableJson = JSON.stringify(tableJsonObj) return tableJson } ``` ## 五、使用案例 ### 1、简易示例-表格设计 ```vue ``` ### 2、简易示例-表格渲染 ```vue ``` ### 3、医嘱任务表格设计(content-design.vue) ```vue import * as orderTaskConstant from '@/views/wisdom-screen/content-material/order-task-manage/orderTaskConstant' import { setTableJsonExtendOptions } from '@/components/GeneralTable/generalTableUtils' export default { data() { return { dataTree: [], treeDefaultProps: { children: 'children', label: 'titleName' }, previewThemeColorCode: 'default', // 预览主题色 previewThemeColorMap: { // 预览主题色值 'default': '#101B37', // 默认色 'green': '#B1DAB1', // 护眼绿 'white': '#F6F6F6', // 天使白 'pink': '#FFF5FD' // 天使白 }, screenHeight: 750, tablePropertyHidden: ['isPage'], } }, methods: { saveMappingFunction(selectCells, renderTBodyData) { }, // 项目元素拖拽完成 targetDropEnd({ renderTBodyData, content, selectFlag }) { }, // 清空内容方法 clearContent({ renderTBodyData, selectCellsData }) { }, /** * 编辑数据中转处理 */ dataProcessing(id, belong, state) { } } } ``` ### 4、医嘱任务表格渲染(content-preview.vue) ```vue ``` ## 六、后续计划 1、报表设计的表格组件替换为通用表格组件。 2、完善简易模式功能 3、完善删除行、删除列，支持多选删除。 4、增加一个动态列模式表格组件 大致思路： a、需要标识动态单元格，可在单元格内填写文字内容，该单元格右侧自动扩展列，下方自动扩展行。 扩展列规则：如果动态单元格右方还有单元格，则这些单元格作为静态单元格显示，在静态单元格前进行扩展，复制动态单元格的样式。 扩展行规则：如果动态单元格下方还有单元格，且当前开启了分页模式，则下方有多少格每页页数就是多少。若未开启分页模式，则一页显示全数据，且扩展行复制最后一行样式。 b、需要增加一种数据绑定模式，分为动态列数据集、动态行数据集、结果数据集，可在右侧扩展属性中选择。 c、表格渲染时，根据配置规则生成行列数据，再根据结果数据集填充数据。