codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/100./345/246/202/344/275/225/344/275/277/347/224/250/346/207/222/345/212/240/350/275/275/345/256/236/347/216/260/346/240/221/347/212/266/350/241/250/346/240/274/345/261/225/347/244/272.md

@@ -0,0 +1,227 @@
+# 如何使用懒加载实现树状表格展示
+
+## 1. 场景介绍
+
+当数据表格中存在复杂层级关系时，比如公司组织结构，通常会使用树状表格来展示。普通的树状表格一次性加载所有数据，适合数据量较小的情况。然而，当数据量较大或者层级较深时，这种方式可能会导致性能问题并影响用户体验。 通过使用懒加载，可以在需要时动态加载数据，从而更高效地展示大量数据或深层次数据的树状结构，提供更好的用户体验。
+
+## 2. 设计思路
+
+如图：简易的公司组织结构图。
+
+<img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_1.png" class="imgStyle" style="" />
+
+**实现原理**：基于数据表格的树形模式，当用户与树状表格交互时，通过主节点的id查询是否有其他节点以该节点作为父节点，从而决定是否需要发送请求获取子节点数据，实现动态加载数据的效果。
+
+## 3. 数据建模
+
+### 3.1 新建实体
+
+需要准备体现层级关系的数据实体，如部门信息表，通过parentId标识父级组织。
+
+部门Department实体，其中包含以下属性：
+
+- name：组织名称，String文本类型；
+- parentId：父级组织id，Integer整数类型。
+
+<div class="highlight">
+
+实体属性name：可以设置为必填项，用于避免创建无效数据。另外为简化后续操作，可勾选显示在表格和显示在表单，这样在后续拖拽实体生成数据表格时平台会自动生成相关的组件。
+
+实体属性parentId：可以设置默认值为0或其他值，本案例演示属性parentId默认值设置为0，用于标识最外层组织即一级部门。
+
+</div>
+
+<img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_2.png" class="imgStyle" style="" />
+
+### 3.2 新建数据结构
+
+新建数据结构DepartmentInfo，其中包含以下属性：
+
+- department：组织信息，数据类型为实体Department。用于存储实体Department的信息，包括组织名称、父级组织id等实体信息。
+- hasChildren：是否有子级，数据类型为Boolean布尔值。用于标识该组织是否有子级，从而在前端展示数据时，可以根据该属性判断是否需要展开显示子级的信息。
+
+<img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_3.png" class="imgStyle" style="" />
+
+## 4. 操作步骤
+
+### 4.1 构建服务端逻辑
+
+1.  新建并编辑服务端逻辑loadTreeTableView，用于根据筛选条件查询部门数据。
+
+    添加输入参数id，数据类型为Integer整数。
+
+    添加输出参数result，无需设置数据类型。
+
+    使用数据查询组件查询Department实体数据，并将查询结果赋值给输出参数result。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_4.png" class="imgStyle" style="" />
+
+    编辑数据查询筛选条件，查询所有以输入参数id为父级组织id的数据。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_5.png" class="imgStyle" style="" />
+
+1.  新建并编辑服务端逻辑getAllParentIds，用于查询所有拥有子节点的组织信息ID列表。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_6.png" class="imgStyle" style="" />
+
+    编辑数据查询分组聚合，查询所有拥有子节点的组织信息ID列表。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_7.png" class="imgStyle" style="" />
+
+### 4.2 添加并编辑页面逻辑
+
+添加并编辑页面逻辑lazyLoading，用于在前端处理数据。
+
+1.  为页面逻辑lazyLoading添加变量
+
+    - 添加输入参数param1，数据类型手动选择为DataSourceParams。该输入参数必须放在首位。
+    - 添加输入参数current，数据类型手动选择为 current，用于存储当前点击行的数据。
+    - 添加局部变量departmentList，数据类型为平台自动推导，用于存储查询结果。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_8.png" class="imgStyle" style="" />
+
+2.  编辑lazyLoading核心逻辑。
+
+    1）判断当前行parentId是否为空：
+
+    为空时，即首次加载数据时，调用服务端逻辑loadTreeTableView，输入参数parentId为0。树状表格首次加载数据，只显示一级部门，案例中所有一级部门的parentId均为0；
+
+    不为空时，即点击某行展开子级时，调用服务端逻辑loadTreeTableView，输入参数parentId为当前行的id。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_9.png" class="imgStyle" style="" />
+ 
+    2）处理查询结果（局部变量departmentList）。
+
+    添加局部变量newDepartmentList，数据类型为平台自动推导，用于存储处理后的数据。
+
+    使用列表List内置函数transform转换局部变量departmentList数据结构，并将转换后的结果赋值给局部变量newDepartmentList。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_10.png" class="imgStyle" style="" />
+
+    3）添加局部变量allParentIDs，数据类型为平台自动推导，用于存储所有拥有子级的组织id列表。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_11.png" class="imgStyle" style="" />
+
+    4）使用Foreach循环处理查询结果（局部变量newDepartmentList），判断点击行是否有子级，为hasChildren赋值。具体步骤如下：
+
+    添加局部变量subNode，数据类型为平台自动推导，用于暂存判断结果。
+
+    使用内置函数Contains判断部门是否存在子部门，通过比对对应部门 ID 是否在拥有子级的部门列表中进行判断。
+
+    根据判断结果，执行对应yes/no分支逻辑：
+
+    - 判断结果为true，即有子部门，执行yes分支逻辑，将item.hasChildren赋值为true；
+    - 判断结果为false，即没有子部门，执行no分支逻辑，将item.hasChildren赋值为true。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_12.png" class="imgStyle" style="" />
+
+1.  将处理完的数据（局部变量newDepartmentList）输出。
+
+    添加输出参数result，数据类型为平台自动推导，用于存储最终处理完成的数据。
+
+    将处理完的数据赋值给输出参数result。
+ 
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_13.png" class="imgStyle" style="" />
+
+### 4.3 基础页面构建
+
+添加数据表格，并根据需求调整页面布局以及完成基本逻辑的编辑。
+
+1.  在页面上拖拽实体生成数据表格——列表（全）。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_14.png" class="imgStyle" style="" />
+
+1.  调整页面布局。
+
+    1）删除页面上多余组件，如“查询”按钮。
+
+    2）新增“添加子级”的链接组件。
+
+    最终页面布局如下：
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_15.png" class="imgStyle" style="" />
+
+1.  更改数据表格绑定数据源为页面逻辑lazyLoading。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_16.png" class="imgStyle" style="" />
+
+    注意：由于页面逻辑lazyLoading要使用的输入参数为数据表格自动生成，此时数据表格的数据源需绑定逻辑变量lazyLoading即页面逻辑返回值。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_17.png" class="imgStyle" style="" />
+
+    该案例中并未使用到拖拽实体生成数据表格时平台自动创建的服务端逻辑（如loadTreeLazyLoadingTableView\_4）和局部变量filter，可自行选择删除，注意删除时需将相关引用一并删除。
+
+1.  选中“添加子级”链接，添加点击事件。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_18.png" class="imgStyle" style="" />
+
+1.  编辑“添加子级”的点击事件逻辑。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_19.png" class="imgStyle" style="" />
+
+### 4.4 实现树状表格懒加载展示
+
+设置数据表格属性，以实现树状表格懒加载展示。
+
+1.  选中数据表格，开启树形模式，将包含子级值字段设置为hasChildren。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_20.png" class="imgStyle" style="" />
+
+1.  选中数据表格“组织名称”表格列，将列类型更改为“树形列”。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_21.png" class="imgStyle" style="" />
+
+    注意：树形表格无需分页，此时可关闭数据表格的分页功能。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_22.png" class="imgStyle" style="" />
+
+1.  发布预览。
+
+## 5. 效果演示
+
+<img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_23.gif" class="imgStyle" style="" />
+
+## 6. 其他说明
+
+在树状表格中，删除节点的操作需要谨慎处理，因为如果删除某个节点，其子节点将作为新的根节点，可能导致层级显示错误。为了避免这种情况，建议在在删除节点时提示用户 “请先删除子部门”。
+
+**具体操作步骤如下**：
+
+1.  选中删除链接，点击右侧点击事件，进入事件逻辑编辑区。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_24.png" class="imgStyle" style="" />
+
+1.  编辑“删除”点击事件。
+
+    根据当前节点是否有子节点决定执行yes/no分支的逻辑
+
+    当有子节点时，弹出消息提示用户 '请先删除子部门'。
+
+    当没有有子节点时，从数据源中的部门实体删除对应的节点数据，删除成功后，重新加载表格视图。
+
+    <img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_25.png" class="imgStyle" style="" />
+
+**最终效果演示**：
+
+当用户尝试删除一个有子节点的节点时，系统会弹出消息提示 “请先删除子部门”，阻止用户进行错误的删除操作。当用户删除一个没有子节点的节点时，系统会从数据源中删除对应的节点数据，并重新加载表格视图，显示更新后的树状表格。
+
+<img src="../assets/ruheshiyonglanjiazaishixianshuzhuangbiaogezhanshi_202408301613_26.gif" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">小白</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年08月30日</span>
+</div>
+
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/120./345/246/202/344/275/225/345/256/236/347/216/260/350/241/250/346/240/274/346/211/271/351/207/217/351/200/211/344/270/255/346/223/215/344/275/234/357/274/232/345/246/202/346/211/271/351/207/217/344/277/256/346/224/271/343/200/201/346/211/271/351/207/217/345/210/240/351/231/244.md

@@ -0,0 +1,119 @@
+# 如何实现表格批量选中操作：如批量修改、批量删除
+
+## 1. 场景介绍
+
+表格批量操作是指用户可以同时选择多个表格行，并对其执行相同的操作。这通常包括批量修改和批量删除等操作。
+
+1. 批量修改功能允许用户选择多个表格行，并对它们的某些属性进行统一修改。例如，在客户管理系统中，用户可以将多个客户的状态从"未注册"修改为"已注册"。
+2. 批量删除功能允许用户选择多个表格行，并一次性将它们从系统中删除。例如，在客户管理系统中，用户可以一次性删除多个不需要的客户记录。
+
+预期实现效果
+
+![0](../assets/updateORdelete_update1.gif)
+
+## 2. 前提条件
+
+1. 已有CustomerStatus枚举，包含未注册、已注册两个枚举值。
+
+   ![0](../assets/updateORdelete_update2.png)
+2. 已有客户实体Customer。
+
+   ![0](../assets/updateORdelete_update3.png)
+
+   实体表如下：
+
+   | 名称   | 标题     | 数据类型           |
+   | ------ | -------- | ------------------ |
+   | name   | 姓名     | String 字符串      |
+   | age    | 年龄     | Integer 整数       |
+   | sex    | 性别     | String 字符串      |
+   | phone  | 联系方式 | Integer 整数       |
+   | status | 注册状态 | CustomerStatus枚举 |
+3. 客户信息页面已有Customer实体数据对应的多选列表，以及批量修改客户状态、批量删除按钮。
+
+   ![0](../assets/updateORdelete_update4.png)
+
+## 3. 操作步骤
+
+### 3.1 监听数据表格的选中值变化
+
+1. 添加一个类型为List 的局部变量listSelected，将变量绑定到数据表格多选值属性。
+
+   提示：数据表格的值字段属性即为多选值对应的字段，此时值字段customer.id 为 Integer 类型，故多选值属性绑定变量即listSelected应为 List 类型。
+
+   ![0](../assets/updateORdelete_update5.png)
+
+### 3.2 批量修改
+
+1. 选中“**批量修改客户状态**”按钮组件，为其添加点击事件。
+
+   ![0](../assets/updateORdelete_update6.png)
+2. 添加局部变量update并将数据类型设置为Customer实体；选中“**批量修改客户状态**”按钮，选择右侧属性-事件，双击click进入按钮的点击事件逻辑。
+
+   ![0](../assets/updateORdelete_update7.png)
+3. 在“**批量修改客户状态**”按钮事件逻辑中拖入局部变量update，并将update.status赋值为CustomerStatus枚举“已注册”。
+
+   提示：在逻辑中拖入局部变量时，平台会自动生成赋值组件。
+
+   ![0](../assets/updateORdelete_update8.png)
+4. 在“**批量修改客户状态**”按钮事件逻辑中拖入调用逻辑组件并选择Customer实体对应的updateBy逻辑，
+
+   ![0](../assets/updateORdelete_update9.png)
+
+   配置updateBy实体逻辑输入参数：
+
+   在参数filter插槽中拖入in即范围内匹配组件，并设置范围内匹配条件；
+
+   在参数body插槽中拖入update局部变量，并选择更新方式和属性。
+
+   ![0](../assets/updateORdelete_update10.png)
+
+   具体配置方式如下：
+
+   ![0](../assets/updateORdelete_update11.gif)
+
+   注意：在使用调用逻辑组件时，平台会自动生成一个与调用实体同名的局部变量，例如调用实体Customer的逻辑updateBy时，平台会生成局部变量Customer，必须在定义更新条件时，使用该局部变量，否则调用逻辑不生效。
+
+   平台生成的局部变量Customer，只在参数filter插槽放置的表达式变量中可见，如下：
+
+   <img src="../assets/updateORdelete_update12.png" alt="0" style="width:350px;" />
+5. 拖入内置函数组件，并选择clear，struct参数插槽放置变量listSelected。在“**批量修改客户状态**”按钮事件逻辑中拖入调用逻辑组件，并调用数据表格内置逻辑reload。
+
+   ![0](../assets/updateORdelete_update13.png)
+6. 为批量修改逻辑添加非空判断。用于避免发起不必要的服务端逻辑调用，从而避免由于输入参数body为空导致的服务端逻辑接口报错。
+
+   a. 使用分支组件 `if` 进行非空判断，通过内置函数HasValue判断参数 `listSelected` 是否为有效值来决定分支走向。
+
+   ![0](../assets/updateORdelete_update14.png)
+
+   b. 如果为有效值，则执行批量修改、清空数据表格选中项和刷新数据表格操作；否则，否则，显示“请先选择需修改状态信息的客户！”的提示消息。
+
+   ![0](../assets/updateORdelete_update15.png)
+
+### 3.3 批量删除
+
+1. 选中“**批量删除**”按钮组件，为其添加点击事件。
+
+   ![0](../assets/updateORdelete_update16.png)
+2. 双击click进入“**批量删除**”按钮事件逻辑，并开始编辑。
+
+   a. 在逻辑中拖入调用逻辑组件并选择Customer实体对应的batchDelete逻辑，在batchDelete实体逻辑输入参数body插槽中拖入变量listSelected。
+
+   ![0](../assets/updateORdelete_update17.png)
+
+   b. 拖入内置函数组件，并选择clear，struct参数插槽放置变量listSelected。拖入调用逻辑组件，并调用数据表格内置逻辑reload。
+
+   ![0](../assets/updateORdelete_update18.png)
+3. 为批量删除逻辑添加非空判断。用于避免发起不必要的服务端逻辑调用，从而避免由于输入参数body为空导致的服务端逻辑接口报错。
+
+   a. 使用分支组件 `if` 进行非空判断，通过内置函数HasValue判断参数 `listSelected` 是否为有效值来决定分支走向。
+
+   ![0](../assets/updateORdelete_update19.png)
+
+   b. 如果为有效值，则执行批量删除、清空数据表格选中项和刷新数据表格操作；否则，显示“请先选择要删除的客户！”的提示消息。
+
+   ![0](../assets/updateORdelete_update20.png)
+
+## 4. 效果演示
+
+![0](../assets/updateORdelete_update1.gif)

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/121./345/246/202/344/275/225/345/212/250/346/200/201/346/226/260/345/242/236/350/241/250/346/240/274/350/241/214.md

@@ -0,0 +1,38 @@
+# 如何动态新增表格行
+
+## 1. 场景介绍
+
+当需要手动插入多条数据并统一保存时，可以通过动态新增行将数据保存到列表中，在需要保存时批量创建。
+
+## 2. 数据准备
+
+创建实体。示例实体如下：
+
+![0](../assets/rhdtxzh1.png)
+
+## 3. 操作步骤
+
+### 3.1 数据绑定
+
+1. 拖拽生成数据表格，创建List<实体>类型变量并绑定为数据表格的数据源。
+
+   ![0](../assets/rhdtxzh2.png)
+2. 为表格添加表格列，在表格列中拖入输入框，将输入框的值绑定为current下对应的实体属性。
+
+   ![0](../assets/rhdtxzh3.png)
+
+### 3.2 添加新增表格行事件
+
+通过点击按钮实现新增表格行。使用内置函数New方法添加ProductInfo实例化对象，并使用内置函数Add方法将实例化对象添加到列表中。
+
+![0](../assets/rhdtxzh4.png)
+
+### 3.3 添加创建实体事件
+
+通过点击按钮实现批量创建。调用**批量创建**逻辑，将list作为实体创建的body，即可将list中的每一项批量创建为实体。
+
+![0](../assets/rhdtxzh5.png)
+
+## 4. 效果演示
+
+![0](../assets/rhdtxzh6.gif)

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/122./345/246/202/344/275/225/345/256/236/347/216/260/346/225/260/346/215/256/350/241/250/346/240/274/347/232/204/345/215/225/351/200/211/345/222/214/345/244/232/351/200/211.md

@@ -0,0 +1,70 @@
+# 如何实现数据表格的单选和多选
+
+数据表格支持单选和多选，以下通过两个场景分别介绍如何获取数据表格中被选择的数据。
+
+## 1. 数据表格的单选
+
+### 1.1 场景介绍
+
+希望在数据表格中完成单选后，将选择的学生信息展示在右侧输入框中。
+
+![0](../assets/dxhdx1.gif)
+
+### 1.2 数据准备
+
+1. 搭建如下页面，其中数据表格支持拖拽实体Student生成。
+
+   ![0](../assets/dxhdx2.png)
+2. 学生姓名和学生年龄对应的单行输入组件和数字输入组件分别开启“只读”属性。
+
+   ![0](../assets/dxhdx3.png)
+
+### 1.3 操作步骤
+
+1. 选中数据表格的首列，“列类型”属性选择单选列；删除表格列标题中的文本组件。
+
+   ![0](../assets/dxhdx4.png)
+2. 选中数据表格组件，将“值字段”设置为实体Student；创建实体Student类型局部变量student，开启“单选值”的编辑表达式功能，进入编辑表达式界面，将局部变量student作为单选值。
+
+   ![0](../assets/dxhdx5.png)
+
+   ![0](../assets/dxhdx6.png)
+3. 将单行输入组件和数字输入组件的“值”属性分别绑定为局部变量student下的对应属性。
+
+   ![0](../assets/dxhdx7.png)
+4. 发布预览效果。
+
+   ![0](../assets/dxhdx8.png)
+## 2. 数据表格的多选
+
+### 2.1 场景介绍
+
+希望在左侧数据表格中完成多选后，将选择的学生信息展示在右侧数据表格中。
+
+![0](../assets/dxhdx9.gif)
+
+### 2.2 数据准备
+
+搭建如下页面，其中左侧的数据表格支持拖拽实体Student生成；右侧的数据表格通过组件生成，手动添加两个表格列，暂未绑定数据源。
+
+![0](../assets/dxhdx10.png)
+
+### 2.3 操作步骤
+
+1. 选中数据表格的首列，“列类型”属性选择多选列；删除表格列标题中的文本组件。
+
+    ![0](../assets/dxhdx11.png)
+2. 选中数据表格组件，将“值字段”设置为实体Student；创建List类型局部变量studentList，开启“多选值”的编辑表达式功能，进入编辑表达式界面，将局部变量studentList作为多选值。
+
+    ![0](../assets/dxhdx12.png)
+
+    ![0](../assets/dxhdx13.png)
+3. 将右侧表格的数据源绑定为局部变量studentList。
+
+    ![0](../assets/dxhdx14.png)
+4. 分别为表格列的“值字段”绑定为实体的对应属性。
+
+    ![0](../assets/dxhdx15.png)
+5. 发布预览效果。
+
+    ![0](../assets/dxhdx8.png)

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/123./345/246/202/344/275/225/345/256/236/347/216/260/345/275/223/346/225/260/346/215/256/350/241/250/346/240/274/345/212/240/350/275/275/346/227/266/346/230/276/347/244/272/345/233/276/347/211/207/345/222/214/346/217/220/347/244/272/346/226/207/345/255/227.md

@@ -0,0 +1,45 @@
+# 如何实现当数据表格加载时显示图片和提示文字
+
+## 1. 场景介绍
+
+数据表格支持自定义数据加载时展示的状态，本示例希望实现如下效果：
+
+* 加载时：在数据表格中展示如下“加载中”图片。
+
+  ![0](../assets/loading1.gif)
+* 加载完成时：若有数据，正常展示数据；若无数据，展示“请添加数据”文字。
+
+  ![0](../assets/loading2.png)
+
+## 2. 数据准备
+
+在页面中拖拽实体生成列表（全）。
+
+![0](../assets/loading3.png)
+
+## 3. 操作步骤
+
+### 3.1 实现“加载中”效果
+
+1. 选中数据表格组件，找到”加载状态设置“属性，选择加载中选项。
+
+   ![0](../assets/loading4.png)
+2. 向数据表格中的插槽拖入图片展示组件。
+
+   ![0](../assets/loading5.png)
+3. 选中图片展示组件，进入“地址”属性的编辑表达式界面，上传需要展示的图片；上传成功后选中图片并单击“确定”按钮。
+
+   ![0](../assets/loading6.png)
+
+### 3.2 实现“加载完成-无数据”效果
+
+1. 选中数据表格组件，找到”加载状态设置“属性，选择加载完成-暂无数据选项。
+
+   ![0](../assets/loading7.png)
+2. 在“暂无数据文案”属性中输入“请添加数据”。
+
+   ![0](../assets/loading8.png)
+
+### 3.3 发布预览效果
+
+![0](../assets/loading9.png)

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/124./345/246/202/344/275/225/345/256/236/347/216/260/346/225/260/346/215/256/350/241/250/346/240/274/345/220/210/345/271/266/345/215/225/345/205/203/346/240/274/345/220/216/347/232/204/346/211/271/351/207/217/346/223/215/344/275/234.md

@@ -0,0 +1,93 @@
+# 如何实现数据表格合并单元格后的批量操作
+
+## 1. 场景介绍
+
+数据表格的表格列支持合并相同的相邻数据，以下已有数据表格，希望合并相同的总公司名称，表格支持根据总公司名称进行多选，同时支持根据多选的总公司批量删除相同总公司的所有子公司。
+
+* 合并前效果
+
+  ![0](../assets/hbdyplcz1.png)
+* 合并后效果
+
+  ![0](../assets/hbdyplcz2.png)
+
+## 2. 前提条件
+
+已有企业实体Enterprise包含以下属性，在页面中拖拽生成列表（全）。
+
+* headOffice：存储总公司的名称，String类型。
+* subsidiary：存储子公司的名称，String类型。
+* numScale：存储子公司的规模，枚举类型。
+
+  ![0](../assets/hbdyplcz3.png)
+
+  ![0](../assets/hbdyplcz4.png)
+
+## 3. 操作步骤
+
+### 3.1 实现合并单元格
+
+1. 选中”总公司“表格列，开启“自动合并相同数据”属性。
+
+   ![0](../assets/hbdyplcz5.png)
+2. 选中表格首列，“值字段”属性选择实体下的headOffice属性，即总公司名称对应字段；删除表头中的“序号”文本组件，“列类型”属性选择多选列；开启“自动合并相同数据”属性。
+
+   ![0](../assets/hbdyplcz6.png)
+
+   ![0](../assets/hbdyplcz7.png)
+
+   ![0](../assets/hbdyplcz8.png)
+3. 发布预览效果。
+
+   ![0](../assets/hbdyplcz9.png)
+
+> 合并行后，点击多选框时仅获取合并行内第一行的选中值，例如上图中选中总公司A对应的多选框，仅获取子公司A-1对应的选中值。因此以下将通过判断数据的总公司名称是否包含在选中的总公司列表中来执行批量操作。
+
+### 3.2 实现批量删除
+
+#### 3.2.1 获取选中值
+
+1. 选中数据表格，“值字段”属性选择实体下的headOffice属性，即总公司名称对应字段。
+
+   ![0](../assets/hbdyplcz10.png)
+2. 创建List类型局部变量，开启“多选值”属性的编辑表达式，将局部变量绑定为多选值。即多选值为总公司名称的列表。
+
+   ![0](../assets/hbdyplcz11.png)
+
+#### 3.2.2 搭建删除功能页面效果
+
+1. 拖拽生成用于批量删除的按钮组件和用于删除确认的弹窗组件，参考效果如下：
+
+   ![0](../assets/hbdyplcz12.png)
+2. 为按钮组件添加点击事件，在事件中使用调用逻辑组件调用弹窗的组件逻辑open用于打开弹窗。
+
+   ![0](../assets/hbdyplcz13.png)
+
+#### 3.2.3 实现删除功能
+
+1. 为弹窗中的“确定”按钮添加点击事件，在点击事件中判断选中值长度是否大于0。
+
+   ![0](../assets/hbdyplcz14.png)
+2. 当选中值长度大于0时完成删除操作。使用调用逻辑组件调用实体Enterprise的deleteBy逻辑，判断实体数据的总公司名称包含在多选值内时，执行删除操作。
+
+   ![0](../assets/hbdyplcz15.png)
+
+   > 注意：调用deleteBy时，条件filter中的局部变量Enterprise由调用逻辑deleteBy自动生成，在本示例中需注意区分局部变量Enterprise和enterprise的使用。具体实体逻辑的使用说明请参考[实体逻辑](../../../20.应用开发/15.逻辑功能实现/10.逻辑IDE/15.逻辑分类/25.实体逻辑.md)。
+   >
+3. 判断结束后实现关闭弹窗和重新加载表格。
+
+   ![0](../assets/hbdyplcz16.png)
+4. 发布预览效果
+
+## 4. 效果演示
+
+![0](../assets/hbdyplcz17.gif)
+
+<style>
+  h4 {
+    font-size: 18px;
+  }
+  h5 {
+    font-size: 16px;
+  }
+</style>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/40./347/273/204/344/273/266/345/234/272/346/231/257/20./350/241/250/346/240/274/345/234/272/346/231/257/128./345/246/202/344/275/225/345/260/206/346/216/245/345/217/243/346/225/260/346/215/256/344/275/234/344/270/272/350/241/250/346/240/274/347/273/204/344/273/266/347/232/204/346/225/260/346/215/256/346/272/220.md

@@ -0,0 +1,53 @@
+# 如何将接口数据作为表格组件的数据源
+
+## 场景介绍
+
+将第三方接口的调用结果使用数据表格组件展示在页面。
+
+## 实现思路
+
+调用接口可选择在前端或服务端调用：
+
+- **在前端调用接口**：在页面逻辑中调用接口作为逻辑的输出参数，表格组件的数据源绑定该逻辑。
+- **在服务端调用接口**：不希望接口调用过程暴露在页面，或者需要为接口添加鉴权参数、敏感参数时，可在服务端逻辑中调用接口，将服务端逻辑作为表格组件的数据源。
+
+本案例示范在前端调用接口展示为数据表格，在服务端调用接口的案例可参考：[在逻辑中调用第三方接口](../../50.逻辑场景/50.在逻辑中调用第三方接口.md)。
+
+## 操作示例
+
+1.  已有第三方接口用于查询书籍信息，query参数为用于分页的page和size。
+   
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_1.png" class="imgStyle" style="" />
+
+2.  创建页面，在页面中添加逻辑，逻辑中添加两个Integer类型输入参数，分别对应接口参数page、size，添加输出参数result。
+
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_2.png" class="imgStyle" style="" />
+
+3.  使用调用接口组件，选择需要的接口，并将其赋值给输出参数。
+
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_3.png" class="imgStyle" style="" />
+
+4.  为页面添加数据表格组件，组件的数据源属性绑定上文创建的页面逻辑，使用当前组件的page和size属性作为逻辑的输入参数。
+
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_4.png" class="imgStyle" style="" />
+
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_5.png" class="imgStyle" style="" />
+
+5.  为数据表格添加表格列，并在每列中添加列名和要展示的current字段。
+
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_6.png" class="imgStyle" style="" />
+
+    <img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_7.png" class="imgStyle" style="" />
+
+6.  发布预览，验证效果。
+
+## 效果演示
+
+<img src="../assets/ruhejiangjiekoushujuzuoweibiaogezujiandeshujuyuan_202406181420_8.png" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">老王</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2024年6月18日</span>
+</div>