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/160./345/246/202/344/275/225/344/275/277/347/224/250/351/252/214/350/257/201/345/231/250/345/257/271/350/241/250/346/240/274/344/270/255/347/232/204/346/225/260/346/215/256/345/201/232/346/225/264/344/275/223/346/240/241/351/252/214.md

@@ -0,0 +1,79 @@
+# 如何使用验证器对表格中的数据做整体校验
+
+## 1. 场景介绍
+
+当需要同时录入多条相同类型的数据时，可能需要借助于表格类工具并验证表格中每一条数据是否符合要求。本文将介绍如何对表格中的数据做整体校验。
+
+示例场景如下：
+
+设计页面可填写题目、答案和选项，用于创建试题。其中试题的可选项展示为数据表格，要求在数据表格中填写每一个选项的内容，点击“立即创建”时验证数据表格中所有选项不为空，验证通过时支持创建试题。
+
+<img src="../assets/rhsyyz_202406241022_1.png" class="imgStyle" style="" />
+
+若创建试题时要求题目、答案不为空，使用常规的表单整体校验即可，本示例不作详细说明，具体请参考[如何实现表单提交时整体校验](../30.表单场景/040.如何实现表单提交时整体校验.md)。
+
+## 2. 前提条件
+
+### 2.1 数据准备
+
+1. 创建数据结构QuestionStructure，包含属性option和content分别用于记录选项和内容。
+
+   <img src="../assets/rhsyyz_202406241022_2.png" class="imgStyle" style="" />
+2. 创建实体Question用于存储试题，包含属性title、answer和option分别用于记录题目、答案和具体选项，option的数据类型为`List<QuestionStructure>`。
+
+   <img src="../assets/rhsyyz_202406241022_3.png" class="imgStyle" style="" />
+
+### 2.2 搭建页面
+
+1. 搭建表单用于创建实体Question数据，表单样式自行设计。例如答案对应的表单项使用单选组，将单选组的“选中值”属性绑定为创建实体数据时的输入参数下的answer属性。
+
+   <img src="../assets/rhsyyz_202406241022_4.png" class="imgStyle" style="" />
+2. 创建`List<QuestionStructure>`类型局部变量optionList并绑定为数据表格的数据源。数据表格中包含两列，第一列中拖拽文本组件并绑定current.item.option用于展示选项序号，第二列中拖拽单行输入组件并绑定current.item.content用于填写选项内容。
+
+   <img src="../assets/rhsyyz_202406241022_5.png" class="imgStyle" style="" />
+
+   <img src="../assets/rhsyyz_202406241022_6.png" class="imgStyle" style="" />
+
+   <img src="../assets/rhsyyz_202406241022_7.png" class="imgStyle" style="" />
+3. 初始化数据表格数据。例如在进入页面时默认生成选项序号A、B、C、D。
+
+   > 下述步骤实现操作非唯一，仅作参考。
+   >
+
+   <img src="../assets/rhsyyz_202406241022_8.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+1. 拖拽验证器组件到选项内容对应表格列中，并将单行输入组件嵌入验证器中。此处验证器用于单独验证数据表格每一行输入。
+
+   <img src="../assets/rhsyyz_202406241022_9.png" class="imgStyle" style="" />
+2. 进入验证器“规则”属性的验证规则编辑界面，拖拽验证规则组件并选择filled。即要求每一行输入均不能为空。
+
+   <img src="../assets/rhsyyz_202406241022_10.png" class="imgStyle" style="" />
+
+   <img src="../assets/rhsyyz_202406241022_11.png" class="imgStyle" style="" />
+3. 拖拽验证器组件到页面中，并将数据表格组件嵌入验证器中。此处验证器用于整体验证数据表格所有输入。
+
+   <img src="../assets/rhsyyz_202406241022_12.png" class="imgStyle" style="" />
+4. 验证不通过时，仅需在单行输入组件处显示提示信息，无需在数据表格处显示，因此用于整体验证的验证器的“静默”属性可以填写message（静默提示消息）或all（静默所有）。
+
+   <img src="../assets/rhsyyz_202406241022_13.png" class="imgStyle" style="" />
+5. 在创建按钮的点击事件中，调用用于整体验证的验证器的组件逻辑validate，并使用If组件判断调用逻辑返回值的属性valid。
+
+   验证器有组件逻辑validate，调用逻辑返回结果为ValidateEvent类型，返回值的属性valid为true时表示验证通过。
+
+   <img src="../assets/rhsyyz_202406241022_14.png" class="imgStyle" style="" />
+6. 在yes分支上将数据表格数据源对应的局部变量optionList赋值给创建实体数据时的输入参数下的option属性，再调用实体的create逻辑创建实体数据。
+
+   <img src="../assets/rhsyyz_202406241022_15.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/rhsyyz_202406241022_16.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年06月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/170./345/246/202/344/275/225/346/240/271/346/215/256/346/225/260/346/215/256/350/241/250/346/240/274/345/210/227/345/255/227/346/256/265/346/230/276/347/244/272/345/220/204/350/241/214/347/232/204/351/200/211/344/270/255/347/212/266/346/200/201.md

@@ -0,0 +1,126 @@
+# 如何根据数据表格列字段显示各行的选中状态
+
+## 1. 场景介绍
+
+希望搭建如下表单用于创建试题。在查看已创建的试题时，试题选项展示在表格中并默认选中答案对应的表格行。
+
+<img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_1.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+已有数据结构OptionStructure用于记录试题中的每个选项，数据结构包含如下属性：
+
+- option：String类型，选项。
+- content：String类型，选项的内容。
+
+<img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_2.png" class="imgStyle" style="" />
+
+已有题库实体QuestionBank用于存储创建的试题，实体包含如下属性：
+
+- title：String类型，用于存储题目。
+- options：List类型，用于存储可选选项的列表。
+- answer：List类型，用于存储试题的答案。
+
+<img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_3.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 创建试题并存储到实体
+
+该步骤要求创建包含题目、选项即正确答案的试题。
+
+关键要素：
+
+- 提供一个单行输入组件，用户可在此输入试题的题干内容。
+- 提供一个数据表格，数据表格中包含选项列和选项内容列，选项默认为ABCD，选项内容列中包含单行输入，用户可在此输入选项的内容。
+- 数据表格包含多选列，允许用户指定勾选的选项为正确答案。
+- 提供一个“提交“按钮，用于提交创建的试题存储为实体。
+
+关键步骤：
+
+1.  创建实体QuestionBank类型变量questionBank。
+2.  题目对应的单行输入组件的值为questionBank.title。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_4.png" class="imgStyle" style="" />
+
+1.  选项对应的数据表格的数据源为questionBank.options。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_5.png" class="imgStyle" style="" />
+
+1.  数据表格的“值字段”属性为option，数据表格首列为多选列，用于将多选选项的option作为答案。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_6.png" class="imgStyle" style="" />
+
+1.  数据表格的第二列中拖拽文本并绑定“文本”属性为current.item.option，用于展示选项文本；第三列中拖拽单行输入组件并绑定“值”属性为current.item.content，用于填写选项的内容。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_7.png" class="imgStyle" style="" />
+
+1.  在页面的“进入时”事件中，初始化试题的选项为A、B、C、D。即变量questionBank的options属性赋值为长度为4的List，OptionStructure结构中的option属性分别为A、B、C、D。
+
+    > 下图所示实现方法非唯一。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_8.png" class="imgStyle" style="" />
+
+1.  在“立即创建”按钮的点击事件中，在满足表单验证通过且勾选的答案非空的情况下创建实体。
+
+    1.  调用表单的组件逻辑validate并判断valid属性为true即表示验证通过；
+    2.  使用内置函数HasValue判断数据表格的可访问属性values（多选值）为有效值即表示已勾选答案。
+
+        <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_9.png" class="imgStyle" style="" />
+
+    3. 在同时满足以上两者条件时，将变量questionBank中用于存储答案的answer属性赋值为数据表格的可访问属性values（多选值）；最后调用实体的create逻辑创建实体，逻辑的输入参数body为变量questionBank。
+
+        <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_10.png" class="imgStyle" style="" />
+
+1.  发布预览效果如下：
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_11.gif" class="imgStyle" style="" />
+
+### 3.2 查看已创建的试题
+
+该步骤要求在查看已创建试题详情时，选项展示在数据表格中并默认选中答案。
+
+关键要素：
+
+- 查询全量的题库并展示题库列表，提供“查看详情”链接允许用户进一步查看特定试题的详细信息。
+- 点击“查看详情”后在界面中（例如在“弹窗”中）展示试题详情，详情包含题干文字和一个用于展示选项的数据表格。
+
+关键步骤：
+
+1.  拖拽实体生成数据列表（简），操作列中添加链接用于触发查看。
+
+    选项列和答案列可以不展示在数据表格中，此处用于对比最终效果。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_12.png" class="imgStyle" style="" />
+
+1.  创建实体QuestionBank类型变量details。
+2.  在“查看”链接的点击事件中，调用实体的get逻辑获取当前试题的详情并赋值到变量details；调用弹窗的组件逻辑open打开弹窗。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_13.png" class="imgStyle" style="" />
+
+1.  在弹窗中，标题文本绑定变量details的title属性，用于展示题目。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_14.png" class="imgStyle" style="" />
+
+1.  数据表格的数据源为变量details的options属性，用于展示选项。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_15.png" class="imgStyle" style="" />
+
+1.  数据表格的“值字段”属性为option，数据表格首列为多选列，多选值为变量details的answer属性，用于将答案对应的表格行显示为选中状态。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_16.png" class="imgStyle" style="" />
+
+1.  数据表格的第二列中拖拽文本并绑定“文本”属性为current.item.option，用于展示选项文本；第三列中拖拽文本并绑定“文本”属性为current.item.content，用于展示选项内容文本。
+
+    <img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_17.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/ruhegenjushujubiaogelieziduanxianshigexingdexuanzhongzhuangtai_202408281627_18.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月28日</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/172./345/246/202/344/275/225/345/212/250/346/200/201/346/216/247/345/210/266/346/225/260/346/215/256/350/241/250/346/240/274/346/224/257/346/214/201/345/215/225/351/200/211/346/210/226/345/244/232/351/200/211.md

@@ -0,0 +1,101 @@
+# 如何动态控制数据表格支持单选或多选
+
+## 1. 场景介绍
+
+数据表格在实现表格行选中时，可以将任一表格列的“列类型”设为单选列或多选列来进行选中。但在部分场景中，功能需求并非局限于仅支持单选或多选。
+
+现有以下具体场景：在创建试题时，根据在单选组中勾选的试题类型，动态控制数据表格的首列支持单选或多选。
+
+<img src="../assets/xuanze_202501231802_1.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+搭建页面效果参考如下，其中单选组中包含两个单选项，选项文本内容分别为单选和多选，并为单选项设置不同的“选项值”，例如radio和checkbox。
+
+<img src="../assets/xuanze_202501231802_2.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 方法一：动态控制表格列显隐
+
+实现思路：准备两个表格列，分别用于单选和多选，根据制品用户在单选组中的选择，动态地对这两个表格列进行显示或隐藏的控制。
+
+1.  添加两个表格列，“列类型”属性分别设为单选列和多选列。
+
+    <img src="../assets/xuanze_202501231802_3.png" class="imgStyle" style="" />
+
+1.  在页面中添加局部变量，数据类型根据单选项的“选项值”属性设置，例如String类型局部变量type。将其绑定为单选组的“选中值”属性后，即可通过变量来动态获取选择内容。
+
+    <img src="../assets/xuanze_202501231802_4.png" class="imgStyle" style="" />
+
+1.  根据局部变量type为表格列设置“显示条件”属性。以列类型为单选列的表格列为例，其显示条件要求单选组的选中值为选项值radio，即局部变量type=“radio”；同理，列类型为多选组的表格列的显示条件为局部变量type=“checkbox”。
+
+    <img src="../assets/xuanze_202501231802_5.png" class="imgStyle" style="" />
+
+    <img src="../assets/xuanze_202501231802_6.png" class="imgStyle" style="" />
+
+1.  建议为单选组的选中值设置初始值，满足用于单选和多选的表格列其中之一默认显示。例如为局部变量type设置初始值为“radio”，表示数据表格默认支持单选。
+
+    <img src="../assets/xuanze_202501231802_7.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+### 方法二：动态控制表格列类型
+
+实现思路：准备一个表格列，根据制品用户在单选组中的选择，动态地切换表格列的“列类型”为单选或多选。
+
+1.  在页面中添加局部变量，数据类型根据单选项的“选项值”属性设置，例如String类型局部变量type。将其绑定为单选组的“选中值”属性后，即可通过变量来动态获取选择内容。
+
+    <img src="../assets/xuanze_202501231802_4.png" class="imgStyle" style="" />
+
+1.  选中表格首列，开启“列类型”属性的编辑表达式功能。
+
+    <img src="../assets/xuanze_202501231802_9.png" class="imgStyle" style="" />
+
+1.  在编辑表达式界面中，使用匹配组件匹配列类型，匹配条件为单选组的选中值，即局部变量type。
+
+    <img src="../assets/xuanze_202501231802_10.png" class="imgStyle" style="" />
+
+1.  根据单选项的选项值设置匹配结果，例如匹配分支为选项值checkbox时，匹配结果为多选列对应的标识checkbox；匹配分支不为选项值checkbox时，匹配结果为单选列对应的标识radio。
+
+    <div class="highlight">
+
+    点击“查看配置选项标识”即可查看不同的列类型对应的标识，支持直接复制。
+
+    <img src="../assets/xuanze_202501231802_11.png" class="imgStyle" style="" />
+
+    </div>
+
+    <img src="../assets/xuanze_202501231802_12.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+## 4. 效果演示
+
+<img src="../assets/xuanze_202501231802_13.gif" class="imgStyle" style="" />
+
+## 5. 补充说明
+
+数据表格具备“单选值”与“多选值”这两个属性。其中，“单选值”属性支持绑定数据类型为V的变量，而“多选值”属性则支持绑定数据类型为`List<V>`的变量。这里的V数据类型，与表格中“值字段”属性相关。
+
+当动态地将表格列更改为单选列或多选列后，相应地，需要分别借助“单选值”属性和“多选值”属性，来获取数据表格中的选中值。这两个属性在获取选中值的过程中，彼此独立，不会相互干扰。
+
+<img src="../assets/xuanze_202501231802_14.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);">2025年01月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/180./345/246/202/344/275/225/345/256/236/347/216/260/350/241/250/346/240/274/345/210/227/345/210/206/347/273/204/345/265/214/345/245/227.md

@@ -0,0 +1,50 @@
+# 如何实现表格列分组嵌套
+
+## 1. 场景介绍
+
+已有商品销售额相关数据表格，希望将销售额根据销售地区分类。
+
+原始数据：
+
+<img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_1.png" class="imgStyle" style="" />
+
+希望实现效果：
+
+<img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_2.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+已有商品销售额实体SalesRevenue，在页面中拖拽生成列表（全）。
+
+<img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_3.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+1.  选中数据表格，添加表格列分组。
+
+    <img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_4.gif" class="imgStyle" style="" />
+
+1.  更改表格列分组标题，将表格列拖拽至表格列分组下方。
+
+    <img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_5.gif" class="imgStyle" style="" />
+
+1.  删除多余的表格列。
+
+    <img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_6.png" class="imgStyle" style="" />
+
+1.  重复上述操作，最后将操作列拖拽置表格最后放。
+
+    <img src="../assets/ruheshixianbiaogeliefenzuqiantao_202408281732_7.png" class="imgStyle" style="" />
+
+## 4. 其他说明
+
+如果分组下的表格列数量不固定，可以在表格列分组下添加表格动态列。
+
+实现相关效果建议提前了解如何使用表格动态列，参考场景如[如何设置表格动态列-1](../20.表格场景/086.如何设置表格动态列-1.md)、[如何设置表格动态列-2](../20.表格场景/086.如何设置表格动态列-2.md)。
+
+<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月28日</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/190./345/246/202/344/275/225/345/212/250/346/200/201/350/256/276/347/275/256/346/225/260/346/215/256/350/241/250/346/240/274/350/241/214/347/246/201/347/224/250.md

@@ -0,0 +1,119 @@
+# 如何动态设置数据表格行禁用
+
+## 1. 场景介绍
+
+数据表格中的行数据要实现禁止选择，可以修改数据源返回的数据类型，给每行数据新增一个Boolean 类型的属性 disabled，该属性名称唯一。当disabled值为true时，该行数据禁止选择；当disabled值为false时，该行数据允许选择。
+
+本文实现的场景为，在商品管理页面根据商品的状态来控制该商品数据是否禁止选择。当商品为上架状态时，该商品数据允许选择；当商品为下架状态时，该商品数据禁止选择。如下图所示：
+
+<img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_1.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+1.  新建枚举用于定义商品的状态。例如，新建枚举并命名为GoodsStatus，枚举项包含下架和上架。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_2.png" class="imgStyle" style="" />
+
+1.  新建Goods实体，包含以下属性：
+
+    - id：存储商品的唯一标识，Integer类型。
+    - goodsName：存储商品的名称，String类型。
+    - price：存储商品的价格，Decimal类型。
+    - status：存储商品的状态，GoodsStatus枚举型。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_3.png" class="imgStyle" style="" />
+
+2.  拖拽“Goods”实体到页面中，选择列表（全）。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_4.gif" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 新建数据结构
+
+新建数据结构，例如TableStructure。添加两条属性，分别为“Goods”实体类型的goods，用于在数据源中定义表格的数据；Boolean类型的disabled，用于在数据源中定义数据是否禁止被选择。
+
+disabled属性名称不可更改，用于控制数据是否禁止被选择。当disabled为true时，数据将被禁止选择；当disabled为false时，数据可被选择。
+
+<img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_5.png" class="imgStyle" style="" />
+
+### 3.2 实现表格数据多选
+
+1.  点击序号表格列，在右侧属性面板下，将列类型改为多选列。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_6.png" class="imgStyle" style="" />
+
+1.  删除序号表格列中的文本组件。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_7.gif" class="imgStyle" style="" />
+
+### 3.3 修改数据表格的数据类型
+
+1.  进入数据表格绑定的数据源对应的服务端逻辑。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_8.gif" class="imgStyle" style="" />
+
+1.  新建goodsList变量，将查询的分页数据结果赋值给goodsList变量，使查询到的数据暂存在变量中。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_9.gif" class="imgStyle" style="" />
+
+1.  通过内置函数中的列表函数下的Transform方法批量将查询到的实体数据转化为 TableStructure 结构，并将结果赋值给result。Transform函数下的list参数插槽放置需要被转换的原始数据列表，即上一步骤中查询结果包含的 list，因此list参数插槽放置的是 goodsList.list。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_10.png" class="imgStyle" style="" />
+
+1.  Transform函数下的by参数插槽用于定义需要转化的数据类型及数据内容。拖入“新建”组件，在新建下拉框中选择实体/数据结构。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_11.gif" class="imgStyle" style="" />
+
+1.  在左侧下拉框中选择 TableStructure 数据结构，在右侧中添加item变量，item 代表循环中的每条实体数据。并将 TableStructure 数据结构下的 goods 属性和 item 下的 goods 属性相连接。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_12.png" class="imgStyle" style="" />
+
+1.  由于本文场景实现的是当商品状态为下架状态时，该行数据禁止选择。因此需拖入“=”组件，判断商品的状态是否为下架状态，并将判断的赋值表达式与 TableStructure 数据结构的 disabled 属性相连接。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_13.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+## 4. 效果演示
+
+1.  修改状态为上架的商品，将该商品的状态设置为下架状态。修改成功后，该商品记录颜色置灰，且禁止选择。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_14.gif" class="imgStyle" style="" />
+
+1.  修改状态为下架的商品，将该商品的状态设置为上架状态。修改成功后，该商品记录颜色不再置灰，且允许选择。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_15.gif" class="imgStyle" style="" />
+
+## 5. 补充说明
+
+### 5.1 表格行内组件的禁用说明
+
+本场景着重于实现数据表格中行数据的选择禁用，如需控制表格行内其他组件，需要单独控制其组件的禁用状态。以修改链接为例，实现禁止选择的数据无法进行修改操作，具体操作可参考以下步骤：
+
+1.  在画布区域，点击修改链接，给右侧属性面板下的**禁用**属性配置表达式 `current.item.disabled` ，即如果当前行数据的disabled为true，则该行数据的修改链接将禁用。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_16.gif" class="imgStyle" style="" />
+
+1.  禁止选择的数据的“链接”组件置灰，不再触发点击事件。
+
+    <img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_17.png" class="imgStyle" style="" />
+
+### 5.2 更多使用场景说明
+
+除数据表格以外，其他支持选择的组件同样可以针对其选项单独控制禁用状态。例如：
+
+- 实现单/多选组中选项的禁用状态；
+- 实现选择器中选项的禁用状态；
+- 实现树形视图中树形节点的禁用状态。
+
+以多选组为例：多选组绑定绑定数据源时，给选项数据新增一个Boolean 类型的属性 disabled 用于控制其禁用状态，操作方法参考上文；多选组手动添加多选项时，支持选中多选项，单独配置其“禁用”属性。
+
+<img src="../assets/ruhedongtaishezhishujubiaogexingjinyong_202501101744_18.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);">Y有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年01月10日</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/195./345/246/202/344/275/225/344/277/256/346/224/271/346/225/260/346/215/256/350/241/250/346/240/274/351/200/211/344/270/255/350/241/214/347/232/204/350/203/214/346/231/257/350/211/262.md

@@ -0,0 +1,64 @@
+# 如何修改数据表格选中行的背景色
+
+## 1. 场景介绍
+
+已有如下数据表格，希望实现修改被选中的表格行的背景颜色，例如#ff7b3180。
+
+- 原始效果：
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_1.png" class="imgStyle" style="" />
+
+- 期望效果：
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_2.png" class="imgStyle" style="" />
+
+## 2. 实现思路
+
+数据表格能够借助其自带的 “表格行动态样式” 属性动态设置表格行样式。针对场景需求，具体的实现方式为：通过判断表格行的值字段是否被包含在选中值内，进而对那些被包含的表格行定义背景色。
+
+## 3. 前提条件
+
+已有如下查询商品数据productInfo的数据表格，数据表格的值字段为商品的 id 属性。
+
+<img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_3.png" class="imgStyle" style="" />
+
+数据表格的首列的列类型为“多选列”。
+
+<img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_4.png" class="imgStyle" style="" />
+
+## 4. 操作步骤
+
+1.  由于数据表格值字段的数据类型为Integer类型，因此在页面中创建List类型局部变量，例如局部变量values，并将其绑定为数据表格的多选值，用于获取被选中的表格行的值的列表。
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_5.png" class="imgStyle" style="" />
+
+1.  进入数据表格“表格行动态样式”属性的编辑表达式界面，其中匿名数据结构中的backgroundColor属性即用于定义数据表格行的背景色。
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_6.png" class="imgStyle" style="" />
+
+1.  通过匹配组件为表格行匹配背景色。
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_7.png" class="imgStyle" style="" />
+
+1.  匹配条件即判断表格行的值字段是否被包含在选中值内。使用内置函数Contains进行判断，指定判断的列表及选中值绑定的局部变量values，指定判断的项即当前表格行的值`current.item.productInfo.id`。
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_8.png" class="imgStyle" style="" />
+
+1.  匹配结果为true时，表示当前表格行的值包含在选中值中，使用文本组件为其填写背景色为#ff7b3180；匹配结果为false时使用默认背景色，在匹配结果处拖拽放置内容为空的文本组件即可。
+
+    <img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_9.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+## 5. 效果演示
+
+<img src="../assets/ruhexiugaishujubiaogexuanzhonghangdebeijingse_202502211510_10.gif" class="imgStyle" style="" />
+
+数据表格的“表格行动态样式”属性支持自定义包含背景颜色、文本颜色在内的多种表格行样式效果，相关使用场景请参考文档[如何实现动态展示表格行样式](../../80.业务场景/145.如何实现动态展示表格行样式.md)。
+
+<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);">2025年02月21日</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/30./350/241/250/345/215/225/345/234/272/346/231/257/005./345/246/202/344/275/225/345/256/236/347/216/260/345/217/230/351/207/217/345/212/250/346/200/201/350/216/267/345/217/226/347/273/204/344/273/266/350/276/223/345/205/245/345/200/274.md

@@ -0,0 +1,67 @@
+# 如何实现变量动态获取组件输入值
+
+## 1. 场景介绍
+
+组件支持根据输入值的变化而变化。本示例希望根据用户的输入值计算总和。
+
+## 2. 页面准备
+
+为实现数字相加的场景，在页面中搭建如下组件，包括数字输入框和文本：
+
+<img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_1.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 方式一：使用[可访问属性](../../../20.应用开发/10.页面设计/19.组件可访问属性.md)
+
+1.  选中计算总和的文本，打开动态绑定。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_2.png" class="imgStyle" style="" />
+
+1.  在动态绑定页面先拖入加法组件，在加法组件的插槽中分别放置两个数字输入框组件的[可访问属性](../../../20.应用开发/10.页面设计/19.组件可访问属性.md)value。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_3.png" class="imgStyle" style="" />
+
+### 方式二：使用[变量](../../../20.应用开发/05.数据建模/10.变量.md)
+
+1.  在页面右键添加局部变量，变量num1和num2，数据类型为Integer整数类型。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_4.png" class="imgStyle" style="" />
+
+1.  选中数字输入框，打开值的动态绑定并进入到动态绑定页面，拖入局部变量num1，另一个数字输入框同样操作，动态绑定局部变量num1。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_5.png" class="imgStyle" style="" />
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_6.png" class="imgStyle" style="" />
+
+1.  选中计算总和的文本，打开动态绑定。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_7.png" class="imgStyle" style="" />
+
+      在动态绑定页面先拖入加法组件，再拖入变量num1和num2。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_8.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+使用可访问属性：
+
+<img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_9.gif" class="imgStyle" style="" />
+
+使用变量：
+
+<img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_10.gif" class="imgStyle" style="" />
+
+## 5. 说明
+
+1.  每个组件的属性中文本、颜色、尺寸等都有动态绑定，需要内容根据值的变化而变化就需要打开动态绑定，并设定动态展示规则。
+2.  输入“/”快捷插入对应的组件，例如使用变量组件可以输入“/bl”找到组件，快捷键为中文拼音的第一个字母组合；或从右侧组件库拖入。
+
+      <img src="../assets/ruheshixianbianliangdongtaihuoquzujianshuruzhi_202408161515_11.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年08月16日</span>
+</div>