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/130./345/246/202/344/275/225/345/256/236/347/216/260/347/202/271/345/207/273/346/225/260/346/215/256/350/241/250/346/240/274/344/277/256/346/224/271/346/225/260/346/215/256.md

@@ -0,0 +1,96 @@
+# 如何实现点击数据表格修改数据
+
+## 1. 场景介绍
+
+数据表格支持将表格列设为编辑列，使表格列中的实体数据支持在双击后直接修改，同时修改存储在数据库中的实体数据。在实际开发过程中，可以在应用自动生成的功能的基础上实现需要的业务功能。例如实现以下场景：
+
+已有实体ProductInfo用于存储商品信息，希望在数据表格中展示实体数据，同时在双击数据时支持修改数据，数据修改完成后更新实体中实际存储的数据。修改的数据包括但不限于日期、文本、数字和图片。
+
+<img src="../assets/sjbgxg_20240416_1557_1.gif" alt="0" style="border: 1px solid #ccc;" />
+
+## 2. 前提条件
+
+创建如下实体ProductInfo，包含如下属性：
+
+* listingDate：Date类型，用于存储商品的上架时间。
+* name：String类型，用于存储商品的名称。
+* price：Decimal类型，用于存储商品的单价。
+* photo：String类型，用于存储商品的图片链接，注意调整属性的最大长度。
+
+<img src="../assets/sjbgxg_20240416_1557_2.png" alt="0" style="border: 1px solid #ccc;" />
+
+## 3. 页面准备
+
+1. 拖拽实体生成列表（全）或列表（简），即使用数据表格展示实体数据。
+
+   <img src="../assets/sjbgxg_20240416_1557_3.png" alt="0" style="border: 1px solid #ccc;" />
+2. 删除商品图片列中的文本组件，拖拽图片展示组件，并将图片展示的“地址”属性绑定为current.item.productInfo.photo。即通过图片展示组件展示商品图片。
+
+   <img src="../assets/sjbgxg_20240416_1557_4.png" alt="0" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+### 4.1 实现表格编辑列
+
+1. 选中表格列，选择”列类型“为编辑列，编辑列支持在双击数据时将数据更改为编辑状态。
+
+   <img src="../assets/sjbgxg_20240416_1557_5.png" alt="0" style="border: 1px solid #ccc;" />
+
+   选择编辑列后应用自动生成在编辑状态下展示的插槽，插槽中包含用于编辑数据的组件，该组件由应用自动判断表格列“值字段”属性的数据类型后生成，例如上架时间为Date类型，生成的组件为日期选择，日期选择绑定“值”属性为current.item.productInfo.listingDate。
+
+   <img src="../assets/sjbgxg_20240416_1557_6.png" alt="0" style="border: 1px solid #ccc;" />
+
+   同时，应用自动生成数据修改后的事件，即生成实体数据更新的逻辑。例如在日期选择组件的“失去焦点”事件中，调用数据表格的组件逻辑resetEdit将数据更改为非编辑状态、调用实体的逻辑update更新数据存储。
+
+   <img src="../assets/sjbgxg_20240416_1557_7.png" alt="0" style="border: 1px solid #ccc;" />
+2. 发布预览。效果参考如下：
+
+   <img src="../assets/sjbgxg_20240416_1557_8.gif" alt="0" style="border: 1px solid #ccc;" />
+
+### 4.2 实现修改数据前的验证
+
+与在表单中创建数据类似，直接在数据表格中修改数据时也建议在数据验证通过后再保存数据。此时仅需要通过验证器组件添加验证规则，在验证通过时再执行数据更新的逻辑即可。
+
+1. 向插槽中拖拽验证器，再将用于编辑数据的组件拖拽至验证器中。
+
+   <img src="../assets/sjbgxg_20240416_1557_9.png" alt="0" style="border: 1px solid #ccc;" />
+2. 为验证器添加“失焦验证通过后”事件，在事件中实现实体数据更新的逻辑，即上述步骤4.1中的逻辑。
+
+   <img src="../assets/sjbgxg_20240416_1557_10.png" alt="0" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sjbgxg_20240416_1557_11.png" alt="0" style="border: 1px solid #ccc;" />
+3. 为了防止未通过验证时触发逻辑，需要删除用于编辑数据的组件的“失去焦点”事件，即理解为将逻辑实现迁移至验证通过后再执行。
+
+   若在表格列选择为编辑列时，编辑状态下展示的插槽中默认包含验证器，则实体数据更新的逻辑默认在验证器的“失焦验证通过后”事件中执行，即以上步骤 1-3 均无需手动完成。
+4. 在验证器中添加验证规则，例如商品单价不能小于0。
+
+   <img src="../assets/sjbgxg_20240416_1557_12.png" alt="0" style="border: 1px solid #ccc;" />
+
+   ![0](../assets/sjbgxg_20240416_1557_13.png)
+5. 发布预览。效果参考如下：
+
+   <img src="../assets/sjbgxg_20240416_1557_14.gif" alt="0" style="border: 1px solid #ccc;" />
+
+### 4.3 实现图片的修改
+
+由于实体中用于存储图片的属性为String，因此应用自动生成的用于编辑数据的组件为多行输入，并不符合要求。此时仅需要将组件更换为文件上传即可。
+
+1. 删除多行输入组件，向插槽中拖拽文件上传组件，文件上传的“值”属性绑定为current.item.productInfo.photo。
+
+   <img src="../assets/sjbgxg_20240416_1557_15.png" alt="0" style="border: 1px solid #ccc;" />
+2. 为文件上传添加“上传成功时“事件，在事件中实现实体数据更新的逻辑，即上述步骤4.1中的逻辑。
+
+   <img src="../assets/sjbgxg_20240416_1557_16.png" alt="0" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sjbgxg_20240416_1557_17.png" alt="0" style="border: 1px solid #ccc;" />
+3. 为了防止组件失焦时切换数据的编辑状态导致逻辑执行不成功，需要删除用于编辑数据的组件的“失去焦点”事件或验证器的“失焦验证通过后”事件，即理解为将逻辑实现迁移至文件上传成功后再执行。
+4. 发布预览。效果参考如下：
+
+   <img src="../assets/sjbgxg_20240416_1557_18.gif" alt="0" style="border: 1px solid #ccc;" />
+
+<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年04月16日</span>
+</div>

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/135./345/246/202/344/275/225/346/240/271/346/215/256/350/241/250/346/240/274/346/225/260/346/215/256/345/212/240/350/275/275/351/200/211/346/213/251/345/231/250/346/225/260/346/215/256.md

@@ -0,0 +1,110 @@
+# 如何根据表格数据加载选择器数据
+
+## 1. 场景介绍
+
+当数据表格的行内容需要根据其属性实现动态展示时，可以通过current获取待查询的数据。
+
+本示例希望实现如下场景：
+
+* 已有商品类别实体ProductType，包含属性用于存储类别名称。
+* 已有商品实体Product，包含属性用于存储商品名称和商品类别。
+
+要求展示商品类别的数据表格，并在表格行的选择器中展示该商品类别下的所有商品。
+
+<img src="../assets/sjbg_20240423_1110_1.png" alt="0" style="border:1px solid #ccc;" />
+
+## 2. 前提条件
+
+1. 创建商品类别实体ProductType，包含String类型属性商品类型。
+
+   <img src="../assets/sjbg_20240423_1110_2.png" alt="0" style="border:1px solid #ccc;" />
+2. 创建商品实体Product，包含String类型属性商品名称、以及Integer类型属性商品类别用于关联商品类别实体的主键（id）。
+
+   <img src="../assets/sjbg_20240423_1110_3.png" alt="0" style="border:1px solid #ccc;" />
+3. 选中商品实体Product下的商品类别属性，将关联属性设置为商品类别实体ProductType的主键（id）。
+
+   <img src="../assets/sjbg_20240423_1110_4.png" alt="0" style="border:1px solid #ccc;" />
+
+## 3. 数据准备
+
+在IDE页面中拖拽实体并选择列表（全），用于展示数据。
+
+<img src="../assets/sjbg_20240423_1110_5.png" alt="0" style="border:1px solid #ccc;" />
+
+本示例中已创建如下数据：
+
+
+
+
+
+<img src="../assets/sjbg_20240423_1110_6.png" alt="0" style="width:450px;border:1px solid #ccc;" />
+
+<img src="../assets/sjbg_20240423_1110_7.png" alt="0" style="width:450px;border:1px solid #ccc;" />
+
+注意：由于在创建实体时已经设置了商品类别实体ProductType和商品实体Product的关联属性，因此在制品应用中创建商品时，即可选择商品类别实体ProductType中的数据，并将选择的商品类别的主键（id）作为商品实体的商品类别属性。
+
+![0](../assets/sjbg_20240423_1110_8.gif)
+
+## 4. 操作步骤
+
+### 4.1 在表格中展示商品类别
+
+1. 在页面中拖拽商品类别实体ProductType，选择列表（简）。
+
+   <img src="../assets/sjbg_20240423_1110_9.png" alt="0" style="border:1px solid #ccc;" />
+2. 删除多余的表格列，例如操作列；新增表格列用于展示对应商品类别下的商品。
+
+   <img src="../assets/sjbg_20240423_1110_10.png" alt="0" style="border:1px solid #ccc;" />
+
+### 4.2 根据商品类别查询商品数据
+
+1. 创建服务端逻辑loadProductByType，并为服务端逻辑添加Integer类型输入参数typeid和输出参数result，输出参数的数据类型由系统自动判断即可。
+
+   <img src="../assets/sjbg_20240423_1110_11.png" alt="0" style="border:1px solid #ccc;" />
+2. 拖拽数据查询组件，并将结果赋值给输出参数result。
+
+   <img src="../assets/sjbg_20240423_1110_12.png" alt="0" style="border:1px solid #ccc;" />
+3. 双击编辑数据查询，查询数据源选择商品实体Product。
+
+   <img src="../assets/sjbg_20240423_1110_13.png" alt="0" style="border:1px solid #ccc;" />
+4. 在筛选条件中，设置筛选条件为商品实体Product的商品类别属性等于输入参数typeid，即筛选商品类别与输入参数typeid相同的商品信息。
+
+   <img src="../assets/sjbg_20240423_1110_14.png" alt="0" style="border:1px solid #ccc;" />
+
+### 4.3 在选择器中加载商品数据
+
+1. 在表格列中拖拽选择器组件。
+
+   <img src="../assets/sjbg_20240423_1110_15.png" alt="0" style="border:1px solid #ccc;" />
+2. 选中选择器组件，开启选择器数据源的编辑表达式功能，进入编辑表达式页面，使用调用逻辑组件调用服务端逻辑loadProductByType。
+
+   <img src="../assets/sjbg_20240423_1110_16.png" alt="0" style="border:1px solid #ccc;" />
+3. 输入参数typeid填入变量current.item.productType.id，即传入商品类别实体ProductType的主键（id）用于筛选该商品类型的商品。
+
+   <img src="../assets/sjbg_20240423_1110_17.png" alt="0" style="border:1px solid #ccc;" />
+4. 设置选择器组件的“文本字段”属性为product.name，即在选择器中展示商品名称。
+
+   <img src="../assets/sjbg_20240423_1110_18.png" alt="0" style="border:1px solid #ccc;" />
+5. 为防止选择器下拉框高度大于表格高度时下拉框不可见，选择器的“弹出层位置依据”属性选择全局body。
+
+   <img src="../assets/sjbg_20240423_1110_19.png" alt="0" style="border:1px solid #ccc;" />
+6. 发布预览效果。
+
+## 5. 效果演示
+
+<img src="../assets/sjbg_20240423_1110_20.gif" alt="0" style="border:1px solid #ccc;" />
+
+<style>
+  h4 {
+    font-size: 18px;
+  }
+  h5 {
+    font-size: 16px;
+  }
+</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年04月24日</span>
+</div>

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/140./345/246/202/344/275/225/345/256/236/347/216/260/350/241/250/346/240/274/344/270/255/346/225/260/346/215/256/347/232/204/346/213/226/346/213/275/346/216/222/345/272/217.md

@@ -0,0 +1,131 @@
+# 如何实现表格中数据的拖拽排序
+
+## 1. 场景介绍
+
+数据表格组件支持开启“表格内可拖拽”属性，用于在当前表格发生表格行拖拽时，更改表格行的顺序。
+
+<img src="../assets/bgtzpx_0523_1401_1.png" style="border: 1px solid #ccc;" />
+
+参考效果如下：
+
+<img src="../assets/tuozhuai_202410231422_1.gif" class="imgStyle" style="border: 1px solid #ccc;" />
+
+
+然而当前拖拽后效果仅影响表格的当前展示效果，如果数据表格重新加载，数据表格中表格行的排列顺序将恢复为默认顺序。因此，本示例希望通过在拖拽后记录拖拽后顺序的方式，在重新加载表格时使表格行仍保持拖拽后的顺序。
+
+## 2. 设计思路
+
+<img src="../assets/tuozhuai_202410231422_2.png" class="imgStyle" style="border: 1px solid #ccc;" />
+
+
+1. 数据表格展示的数据记录为实体数据，为实体添加属性用于记录排序。
+2. 数据表格中的实体数据按照排序属性进行排序后展示。
+3. 发生拖拽后，通过数据表格的“拖拽放置时”事件的输入参数event中记录的被拖拽的数据、拖拽放置位置的数据来更改排序属性。事件中需要使用的属性介绍如下：
+
+   * event.source.index：被拖拽的数据的初始位置的下标。
+   * event.finalSource.index：被拖拽的数据放置位置的下标。
+   * event.finalSource.item：被拖拽的数据对象，item下包含数据实体以及实体属性。
+   * event.updateData.targetList：与拖拽放置位置同层级的数据对象的列表，列表顺序为拖拽放置后。
+
+   <img src="../assets/bgtzpx_0523_1401_3.png" style="width:600px;border: 1px solid #ccc;" />
+4. 重新加载表格数据。
+
+## 3. 数据准备
+
+1. 已有实体Project，为实体添加Integer类型属性sort，用于记录实体数据的排序。
+
+   <img src="../assets/bgtzpx_0523_1401_4.png" style="border: 1px solid #ccc;" />
+2. 在创建数据时，手动输入当前数据的排序或自动生成。例如在创建数据前，获取已有数据的最大排序值，将当前数据的排序属性赋值为最大排序值+1。
+
+   a. 创建服务端逻辑loadMaxSort用于获取已有数据的最大排序值。使用数据查询组件，查询数据源为实体Project，添加聚合属性Max求出sort属性的最大值；将数据查询的结果赋值给输出参数。
+
+   <img src="../assets/bgtzpx_0523_1401_5.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/bgtzpx_0523_1401_6.png" style="border: 1px solid #ccc;" />
+
+   b. 在调用实体的create逻辑创建实体数据之前，为当前创建数据的sort属性赋值，赋值即为服务端逻辑中查询的最大排序值+1。
+
+   <img src="../assets/bgtzpx_0523_1401_7.png" style="border: 1px solid #ccc;" />
+
+   > 当第一次创建数据时，查询数据为空，服务端逻辑输出结果为null，则属性赋值结果为null+1，即1。
+   >
+3. 发布预览效果。
+
+   <img src="../assets/bgtzpx_0523_1401_8.gif" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+### 4.1 排序展示数据
+
+通过数据表格的“初始化排序规则”实现数据行根据排序属性升序展示。
+
+<img src="../assets/bgtzpx_0523_1401_9.jpg" style="border: 1px solid #ccc;" />
+
+### 4.2 开启拖拽功能
+
+打开数据表格的“表格内可拖拽”属性。
+
+<img src="../assets/bgtzpx_0523_1401_1.png" style="border: 1px solid #ccc;" />
+
+### 4.3 实现拖拽后效果
+
+1. 为数据表格添加“拖拽放置时“事件。
+
+   <img src="../assets/bgtzpx_0523_1401_11.jpg" style="border: 1px solid #ccc;" />
+2. 获取拖拽起始位置的下标和拖拽放置位置的下标，用于获取筛选发生拖拽后排序受到影响的数据，并根据两个下标的大小分别存储为最大下标值和最小下标值。
+
+   a. 创建Integer局部变量maxIndex和minIndex，分别用于存储最大下标值和最小下标值。
+   b. 判断拖拽起始位置的下标（即event.source.index）和拖拽放置位置的下标（即event.finalSource.index），将对应大小的值赋值到局部变量maxIndex和minIndex中。
+
+   <img src="../assets/bgtzpx_0523_1401_12.png" style="border: 1px solid #ccc;" />
+3. 循环更改顺序后的数据，根据数据当前的下标更改数据的排序属性。
+
+   a. 创建 `List<实体>`类型的局部变量changeList，用于存储需要更改排序属性的数据。
+   b. 使用ForEach组件循环拖拽后的数据列表，可直接使用拖拽放置位置同层级的数据的的列表（即event.updateData.targetList)；展开ForEach组件的索引设置，起始值为局部变量minIndex，结束值为局部变量maxIndex+1，即只循环改变了顺序的数据。
+   c. 在循环中，根据当前数据的下标更改数据的排序属性，例如本示例中排序属性从1开始生成，下标从0开始，则当前数据的排序属性为数据的下标+1；更改后，使用内置函数Add将当前数据加入到局部变量changeList中。
+   <img src="../assets/bgtzpx_0523_1401_13.png" style="border: 1px solid #ccc;" />
+
+   <div class="highlight">
+
+   当全量数据较少时，也可以循环所有数据，根据数据的下标批量更改所有数据的排序属性。
+
+   即无需执行上述步骤2；循环拖拽后的数据列表(即event.updateData.targetList)时无需设置索引，默认循环所有数据即可。
+
+   <img src="../assets/tuozhuai_202410231422_3.png" class="imgStyle" style="border: 1px solid #ccc;" />
+
+   </div>
+
+   
+
+4. 使用调用逻辑组件调用实体的batchUpdate逻辑批量更改了排序属性的数据，即逻辑的body为局部变量changeList。
+
+   <img src="../assets/bgtzpx_0523_1401_14.png" style="border: 1px solid #ccc;" />
+5. 使用调用逻辑组件调用数据表格的组件逻辑reload重新加载表格。
+
+   <img src="../assets/bgtzpx_0523_1401_15.png" style="border: 1px solid #ccc;" />
+6. 发布预览效果。
+
+## 5. 效果演示
+
+<img src="../assets/tuozhuai_202410231422_4.gif" class="imgStyle" style="border: 1px solid #ccc;" />
+
+
+
+<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年05月23日</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/145./345/246/202/344/275/225/345/256/236/347/216/260/346/240/221/345/275/242/350/241/250/346/240/274/347/232/204/346/213/226/346/213/275.md

@@ -0,0 +1,67 @@
+# 如何实现树形表格的拖拽
+
+## 1. 场景介绍
+
+数据表格组件支持开启“表格内可拖拽”属性，当开启“树形模式”的数据表格发生表格行拖拽时，与普通数据表格一样可以更改表格行的顺序，还可以更改表格行的树形关系。
+
+参考效果如下：
+
+<img src="../assets/sxbgtz_0523_1401_1.gif" style="border: 1px solid #ccc;" />
+
+然而当前拖拽后效果仅影响表格的当前展示效果，如果数据表格重新加载，数据表格中表格行的树形关系将恢复为初始状态。因此，本示例希望通过在拖拽后记录拖拽后树形关系的方式，在重新加载表格时使表格仍保持拖拽后的树形结构。
+
+## 2. 设计思路
+
+1. 数据表格展示的数据记录为实体数据，为实体添加两条属性分别用于记录当前数据的标识、当前数据的父级数据的标识。
+2. 发生拖拽后，通过数据表格的“拖拽放置时”事件的输入参数event中记录的数据，更改数据的父级标识。事件中需要使用的属性介绍如下：
+
+   * event.finalSource.parent：被拖拽的数据放置位置的父级数据对象，parent下包含数据实体以及实体属性。
+   * event.finalSource.item：被拖拽的数据对象，item下包含数据实体以及实体属性。
+
+   <img src="../assets/sxbgtz_0523_1401_2.png" style="width:600px;border: 1px solid #ccc;" />
+3. 重新加载表格数据。
+
+## 3. 数据准备
+
+1. 已有实体Department，其中包含String类型属性部门标识deptId、String类型属性父部门标识parentDeptId，用于构建和标识数据的树形结构。
+
+   <img src="../assets/sxbgtz_0523_1401_3.png" style="border: 1px solid #ccc;" />
+2. 为实体添加索引，属性选择部门标识deptId并勾选“是否唯一”，确保创建数据时标识唯一。
+
+   <img src="../assets/sxbgtz_0523_1401_4.png" style="border: 1px solid #ccc;" />
+3. 在页面中生成数据源为实体数据的数据表格后，开启数据表格的“树形模式”属性，值字段和父级值字段分别选择实体的部门标识属性deptId和父部门标识属性parentDeptId。即构建数据表格的树形结构。
+
+   <img src="../assets/sxbgtz_0523_1401_5.png" style="border: 1px solid #ccc;" />
+4. 发布预览效果。
+
+   <img src="../assets/sxbgtz_0523_1401_6.png" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+1. 为数据表格开启“表格间可拖拽”属性。
+
+   <img src="../assets/sxbgtz_0523_1401_7.png" style="border: 1px solid #ccc;" />
+2. 为数据表格添加“拖拽放置时“事件。
+
+   <img src="../assets/sxbgtz_0523_1401_8.png" style="border: 1px solid #ccc;" />
+3. 在事件中，更新被拖拽数据的父部门标识属性parentDeptId，即event.finalSource.item.department.parentDeptId。
+
+   a. 将拖拽后数据的父级数据的部门标识赋值给被拖拽数据的父部门标识属性。即event.finalSource.parent.department.deptId赋值给event.finalSource.item.department.parentDeptId。
+   b. 使用调用逻辑组件调用实体的update逻辑更新数据，body即event.finalSource.item.department。
+
+   <img src="../assets/sxbgtz_0523_1401_9.png" style="border: 1px solid #ccc;" />
+4. 使用调用逻辑组件调用表格的组件逻辑reload重新加载表格。
+
+   <img src="../assets/sxbgtz_0523_1401_10.png" style="border: 1px solid #ccc;" />
+5. 发布预览效果。
+
+## 5. 效果演示
+
+<img src="../assets/sxbgtz_0523_1401_11.gif" style="border: 1px solid #ccc;" />
+
+<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年05月23日</span>
+</div>

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/150./345/246/202/344/275/225/345/256/236/347/216/260/345/244/232/344/270/252/346/225/260/346/215/256/350/241/250/346/240/274/351/227/264/347/232/204/346/213/226/346/213/275.md

@@ -0,0 +1,83 @@
+# 如何实现多个数据表格间的拖拽
+
+## 1\. 场景介绍
+
+数据表格组件支持开启“表格间可拖拽”属性，拖拽后支持在事件中记录被拖拽的数据。
+
+本示例希望实现场景如下：
+
+已有实体数据包含属性用于分类，数据表格中的数据根据分类展示。当发生拖拽时，将拖拽数据的分类更改为对应表格的分类并展示在对应表格内。
+
+<img src="../assets/sjbgjtz_0523_1401_1.png" style="border: 1px solid #ccc;" />
+
+## 2\. 设计思路
+
+1.  当发生拖拽时，通过数据表格的“拖拽放置时”事件的输入参数event中记录的数据，更改数据用于分类的属性。事件中需要使用的属性介绍如下：
+
+    * event.source.item：被拖拽的数据对象，item下包含数据实体以及实体属性。
+
+2.  重新加载表格数据。
+
+## 3. 数据准备
+
+1.  已有枚举，用于数据分类。本示例创建枚举ProjectEnum包含四类枚举值用于分类项目状态。
+
+    <img src="../assets/sjbgjtz_0523_1401_2.png" style="border: 1px solid #ccc;" />
+
+2.  已有实体，用于存储数据。其中包含枚举ProjectEnum类型属性项目状态status。
+
+    <img src="../assets/sjbgjtz_0523_1401_3.png" style="border: 1px solid #ccc;" />
+
+3.  在数据表格中分类展示数据。
+
+    a. 进入数据表格数据源绑定的服务端逻辑，添加枚举ProjectEnum类型输入参数filterStatus，用于筛选不同枚举类型的实体数据。
+    b. 进入查询数据的筛选条件，查询实体的项目状态属性status是否等于输入参数filterStatus。
+
+    <img src="../assets/sjbgjtz_0523_1401_4.png" style="border: 1px solid #ccc;" />
+
+    c. 返回数据表格的数据源，根据当前表格需要展示的分类填写输入参数filterStatus。
+
+    <img src="../assets/sjbgjtz_0523_1401_5.png" style="border: 1px solid #ccc;" />
+
+4.  复制多个数据表格，用于展示不同分类的数据。复制后修改输入参数filterStatus即可展示为不同分类。
+5.  发布预览效果。
+
+    <img src="../assets/sjbgjtz_0523_1401_6.png" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+1.  为数据表格开启“表格间可拖拽”属性。
+
+    <img src="../assets/sjbgjtz_0523_1401_7.png" style="border: 1px solid #ccc;" />
+
+2.  为数据表格添加“拖拽放置时“事件。
+
+    <img src="../assets/sjbgjtz_0523_1401_8.png" style="border: 1px solid #ccc;" />
+
+3.  在事件中，更新被拖拽数据的项目状态属性status，即event.source.item.project.status。
+
+    a. 将当前数据表格分类的枚举赋值给event.source.item.project.status。
+    b. 使用调用逻辑组件调用实体的update逻辑更新数据，body即event.source.item.project。
+
+    <img src="../assets/sjbgjtz_0523_1401_9.png" style="border: 1px solid #ccc;" />
+
+4.  使用调用逻辑组件调用表格的组件逻辑reload重新加载表格。能够实现当前表格间拖拽效果的数据表格均重新加载。
+
+    <img src="../assets/sjbgjtz_0523_1401_10.png" style="border: 1px solid #ccc;" />
+
+5.  同理，为其他分类展示数据的表格开启“表格间可拖拽”属性、添加“拖拽放置时“事件；事件中操作步骤相同，仅需修改项目状态属性status的赋值即可。
+
+    > 当不同的事件中包含多个相同步骤时，可以创建页面逻辑，在页面逻辑中实现相同的步骤，再在不同的事件需要实现步骤时调用页面逻辑。即实现功能的封装。
+
+6.  发布预览效果。
+
+## 5. 效果演示
+
+<img src="../assets/sjbgjtz_0523_1401_11.gif" style="border: 1px solid #ccc;" />
+
+<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年05月23日</span>
+</div>

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/155./345/246/202/344/275/225/350/256/241/347/256/227/346/225/260/346/215/256/350/241/250/346/240/274/344/270/255/346/225/260/346/215/256/347/232/204/346/200/273/345/222/214.md

@@ -0,0 +1,120 @@
+# 如何计算数据表格中数据的总和
+
+## 1. 场景介绍
+
+当制品用户存储数据后，可能需要对数据进行统计，包括但不限于数据的数量、数据某一属性的总和。
+
+本示例希望实现如下场景：
+
+已有订单实体OrderInfo，包含属性用于存储订单名称和订单金额，要求在数据看板中展示订单总数、订单总金额、当前表格分页展示的订单数、当前表格分页展示的订单总金额。
+
+<img src="../assets/jssjzh_0523_1457_1.png" style="border: 1px solid #ccc;" />
+
+## 2. 前提条件
+
+1.  创建订单实体OrderInfo，包含String类型属性订单名称、以及Decimal类型属性订单金额。
+
+    <img src="../assets/jssjzh_0523_1457_2.png" style="border: 1px solid #ccc;" />
+
+2.  搭建页面，示例中包含文本组件用于展示各数据总和、拖拽订单实体OrderInfo生成列表（全）用于展示数据表格以及分页时更新当前表格展示的数据和。
+
+    <img src="../assets/jssjzh_0523_1457_3.jpg" style="border: 1px solid #ccc;" />
+
+## 3. 操作步骤
+
+根据场景要求，以下将所有数据的统计、分页数据的统计分为两大功能实现，两者之间不会相互影响。
+
+### 3.1 计算所有数据
+
+#### 3.1.1 统计数据
+
+1.  为了方便对数据的统计，创建数据结构TotalStructure，包含属性totalQuantity用于记录订单总数、属性totalAmount用于记录订单总金额。
+
+    <img src="../assets/jssjzh_0523_1457_4.png" style="border: 1px solid #ccc;" />
+
+2.  创建服务端逻辑loadOrderTotal用于获取统计数据，需要为逻辑添加TotalStructure类型输出参数。
+
+    <img src="../assets/jssjzh_0523_1457_5.png" style="border: 1px solid #ccc;" />
+
+3.  使用数据查询组件查询订单实体OrderInfo的总数并赋值给输出参数的属性totalQuantity。数据查询的查询数据源为实体OrderInfo；在数据查询的分组聚合中添加聚合属性，使用Count计数统计订单名称的数量，即统计订单的总数量。
+
+    <img src="../assets/jssjzh_0523_1457_6.png" style="border: 1px solid #ccc;" />
+
+    <img src="../assets/jssjzh_0523_1457_7.png" style="border: 1px solid #ccc;" />
+
+4.  使用数据查询组件查询订单实体OrderInfo的总金额并赋值给输出参数的属性totalAmount。数据查询的查询数据源为实体OrderInfo；在数据查询的分组聚合中添加聚合属性，使用Sum求和统计订单金额的总数，即统计订单的总总额。
+
+    <img src="../assets/jssjzh_0523_1457_8.png" style="border: 1px solid #ccc;" />
+
+    <img src="../assets/jssjzh_0523_1457_9.png" style="border: 1px solid #ccc;" />
+
+#### 3.1.2 展示数据
+
+1.  在页面下创建TotalStructure类型局部变量OrderTotal，用于在页面中获取统计的数据。
+
+    <img src="../assets/jssjzh_0523_1457_10.png" style="border: 1px solid #ccc;" />
+
+2.  为数据表格添加“加载后”事件，在事件中调用服务端逻辑loadOrderTotal并将结果赋值给局部变量OrderTotal。
+
+    <img src="../assets/jssjzh_0523_1457_11.png" style="border: 1px solid #ccc;" />
+
+3.  将局部变量OrderTotal的两个属性分别绑定为文本组件的“文本”属性，即展示统计的数据。
+
+    <img src="../assets/jssjzh_0523_1457_12.png" style="border: 1px solid #ccc;" />
+
+### 3.2 计算分页数据
+
+#### 3.2.1 统计分页数据
+
+1.  为了方便对数据的统计，创建数据结构PageTotalStructure，包含属性pageQuantity用于记录分页下的订单总数、属性pageAmount用于记录分页下的订单总金额。
+
+    <img src="../assets/jssjzh_0523_1457_13.png" style="border: 1px solid #ccc;" />
+
+2.  创建服务端逻辑loadOrderTotalByPage用于获取统计数据，需要为逻辑添加PageTotalStructure类型输出参数，以及Integer类型输入参数page、Integer类型输入参数size用于获取分页大小。
+
+    <img src="../assets/jssjzh_0523_1457_14.png" style="border: 1px solid #ccc;" />
+
+3.  创建局部变量OrderInfoList用于承接分页查询结果。使用数据查询组件查询订单实体OrderInfo，使用分页组件嵌套数据查询，页数为输入参数page、每页记录数为输入参数size，将分页结果赋值给局部变量OrderInfoList，即查询并获取当前分页的全部实体数据。
+
+    <img src="../assets/jssjzh_0523_1457_15.png" style="border: 1px solid #ccc;" />
+
+4.  （可选）如果页面中的数据表格包含筛选功能，则添加实体类型输入参数filter，并为数据查询添加筛选条件。筛选条件与数据表格的数据源保持一致即可。此步骤即用于确保根据数据表格展示的分页数据来统计。
+
+    <img src="../assets/jssjzh_0523_1457_16.png" style="border: 1px solid #ccc;" />
+
+5.  将局部变量OrderInfoList中列表的长度赋值给输出参数的属性pageQuantity，即获取分页查询数据的总条数并作为当前分页展示的订单数量。
+
+    <img src="../assets/jssjzh_0523_1457_17.png" style="border: 1px solid #ccc;" />
+
+6.  使用内置函数Transform获取局部变量OrderInfoList中订单金额属性的列表，再使用内置函数Sum统计订单金额列表的总和并赋值给输出参数的属性pageAmount，即获取分页查询数据的金额的总和并作为当前分页展示的订单总金额。
+
+    <img src="../assets/jssjzh_0523_1457_18.png" style="border: 1px solid #ccc;" />
+
+#### 3.2.2 展示数据
+
+1.  在页面下创建PageTotalStructure类型局部变量OrderTotalByPage，用于在页面中获取统计的分页数据；创建Integer类型局部变量page和size用于获取当前页数和分页大小。
+
+    <img src="../assets/jssjzh_0523_1457_19.png" style="border: 1px solid #ccc;" />
+
+2.  为数据表格添加“切换分页后”事件。在事件中将事件的输入参数event下的number属性和size属性分别赋值给局部变量page和size。输入参数event下的number属性和size属性即为切换分页后的当前页数和分页大小。
+
+    <img src="../assets/jssjzh_0523_1457_20.png" style="border: 1px solid #ccc;" />
+
+3.  为数据表格添加“加载后”事件，在事件中调用服务端逻辑loadOrderTotalByPage并将结果赋值给局部变量OrderTotalByPage，输入参数page和size即上述局部变量。
+
+    <img src="../assets/jssjzh_0523_1457_21.png" style="border: 1px solid #ccc;" />
+
+4.  将局部变量OrderTotalByPage的两个属性分别绑定为文本组件的“文本”属性，即展示统计的分页数据。
+
+    <img src="../assets/jssjzh_0523_1457_22.jpg" style="border: 1px solid #ccc;" />
+
+## 4. 效果演示
+
+<img src="../assets/jssjzh_0523_1457_23.gif" style="border: 1px solid #ccc;" />
+
+<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年05月23日</span>
+</div>