编辑器在6.4.1版本下使用时弹窗列表内部分弹窗丢失且无法打开 #10269

ydiego · 2024-05-20T10:26:41Z

实现场景：

列表展示的数据为可选，每条数据对应某个类型，相同类型的数据不允许重复选择，selectChange事件中判断然后doaction修改选中项

存在的问题：

类似的逻辑，相同版本下官网下可以实现，使用sdk接入到项目中反而清空了，

当前方案：

此处为编辑器中自定义js代码框代码

const { data: { item, selectedItems } } = event;
if (selectedItems.filter(si => si.businessType == item.businessType).length >= 2) {
  doAction({
    actionType: 'toast',
    args: {
      msg: '相同类型不允许多选'
    }
  });
  const reSelectIds = selectedItems.filter(_ => _.id !== item.id).map(_ => _.id);
  console.log(reSelectIds, 233);
  doAction({
    actionType: "select",
    args: {
      selected: `[${reSelectIds}].includes(record.id)`
    }
  })
  return;
}
doAction({
  actionType: "setValue",
  args: {
    value: event.data.selectedItems
  },
  componentId: "khzc"
})

官网实现

{
  "type": "page",
  "body": {
    "type": "page",
    "body": {
      "type": "crud",
      "api": "/amis/api/mock2/sample",
      "syncLocation": false,
      "onEvent": {
        "selectedChange": {
          "actions": [
            {
              "script": "const { data: { item, selectedItems}} = event;console.log(selectedItems)\nif (selectedItems.some(si => si.id == 1)) {\n  doAction({\n    actionType: 'toast',\n    args: {\n      msg: 'xxxxx'\n}\n});\n  const reSelectIds = selectedItems.filter(_ => _.id !== 1).map(_ => _.id);\n  console.log(reSelectIds,233);\n  doAction({\n    actionType: \"select\",\n    args: {\n      selected: `[${reSelectIds}].includes(record.id)`\n    }\n  })\n  return;\n}\ndoAction({\n  actionType: \"setValue\",\n  args: {\n    value: event.data.selectedItems\n  },\n  componentId: \"khzc\"\n})",
              "actionType": "custom",
              "ignoreError": false
            }
          ]
        }
      },
      "bulkActions": [
        {
          "label": "批量删除",
          "actionType": "ajax",
          "api": "delete:/amis/api/mock2/sample/${ids|raw}",
          "confirmText": "确定要批量删除?"
        }
      ],
      "columns": [
        {
          "name": "id",
          "label": "ID"
        },
        {
          "name": "engine",
          "label": "Rendering engine"
        },
        {
          "name": "browser",
          "label": "Browser"
        },
        {
          "name": "platform",
          "label": "Platform(s)"
        },
        {
          "name": "version",
          "label": "Engine version"
        },
        {
          "name": "grade",
          "label": "CSS grade"
        }
      ]
    }
  }
}

此时均正常

再选类型为2时，就被清空了

The text was updated successfully, but these errors were encountered:

ydiego · 2024-05-21T01:39:03Z

这里还有个情况没说明编辑器那边用的版本是6.2.1。这个版本的schema在更新到6.4.1时，编辑上诉弹窗中的事件并保存时，弹窗列表中相关弹窗会丢失，此时预览下无法打开弹窗并报错
初始列表与对应编辑弹窗

打开事件编辑然后直接保存，弹窗列表就变更了

ydiego · 2024-05-21T02:10:41Z

清空问题找到原因了，issue改为6.4.1编辑保存弹窗问题

2betop · 2024-05-21T02:15:27Z

点选也没发现问题，用你的代码改成 platform 字段，也没能复现

ydiego · 2024-05-21T02:19:32Z

点选也没发现问题，用你的代码改成 platform 字段，也没能复现

这个问题我刚找到原因了，是因为模板字符串里数组转换后少了引号导致的，需要另外处理下，还有请教下 "selected": "data.rowIndex === 0"这个写法是不支持${}模板吗

2betop · 2024-05-21T02:26:36Z

表达式有两种语法，一种是纯 js，一种是用 ${ 和 } 包裹的表达式。
具体见：https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/expression

2betop · 2024-05-21T02:27:46Z

弹窗问题没看明白，能否把页面配置脱敏发一下？

ydiego · 2024-05-21T02:31:00Z

表达式有两种语法，一种是纯 js，一种是用 ${ 和 } 包裹的表达式。具体见：https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/expression

{
  "type": "page",
  "data": {
    "list": [
      1,
      2,
      3
    ]
  },
  "body": [
    {
      "type": "button-toolbar",
      "className": "m-b",
      "buttons": [
        {
          "name": "trigger1",
          "id": "trigger1",
          "type": "action",
          "label": "设置表格第一项选中",
          "className": "ml-2",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "select",
                  "componentId": "table-select",
                  "description": "点击设置指定表格第一项内容选中",
                  "args": {
                    "selected": "${list.includes(record.id)}"
                  }
                }
              ]
            }
          }
        }
      ]
    },
    {
      "type": "service",
      "api": "/amis/api/mock2/sample?perPage=10",
      "body": [
        {
          "id": "table-select",
          "type": "table2",
          "source": "$rows",
          "selectable": true,
          "multiple": true,
          "columns": [
            {
              "name": "id",
              "label": "ID"
            },
            {
              "name": "browser",
              "label": "Browser"
            },
            {
              "name": "version",
              "label": "Version"
            }
          ]
        }
      ]
    }
  ]
}

举个例子这样是没发读到list变量的，如果放在自定义js里面的话, "${list.includes(record.id)}"这个字符串里面也是有外部变量，所以我才用模板字符串方式取实现

ydiego · 2024-05-21T02:31:57Z

弹窗问题没看明白，能否把页面配置脱敏发一下？

稍等我切个版本看整个简单demo看看

2betop · 2024-05-21T02:35:24Z

表达式有问题，如果你想用 js 语法那就是

"selected": "list.includes(record.id)"

如果想用第二种那就是

"selected": "${ARRAYINCLUDES(list, record.id)}"

ydiego · 2024-05-21T02:41:15Z

表达式有问题，如果你想用 js 语法那就是

"selected": "list.includes(record.id)"

如果想用第二种那就是

"selected": "${ARRAYINCLUDES(list, record.id)}"
这个明白了，我刚刚试了下在自定义js里面的

const reSelectIds = selectedItems.filter(_ => _.id !== item.id).map(_ => +_.id );
  console.log(reSelectIds, `[${reSelectIds}].includes(record.id)`, 233);
  doAction({
    actionType: "select",
    args: {
      selected: "${ARRAYINCLUDES(reSelectIds, +record.id)}"
    }
  })

这个好像不能生效

2betop · 2024-05-21T02:53:43Z

上下文中压根就没有 reSelectIds 这个变量，这个是这个 function的局部变量，应该这样写

const reSelectIds = selectedItems.filter(_ => _.id !== item.id).map(_ => +_.id );
console.log(reSelectIds, `[${reSelectIds}].includes(record.id)`, 233);
doAction({
    actionType: "select",
    args: {
      selected: `\${ARRAYINCLUDES(${JSON.stringify(reSelectIds)}, record.id)}`
    }
  })

ydiego · 2024-05-21T02:58:12Z

弹窗问题没看明白，能否把页面配置脱敏发一下？

{
  "type": "page",
  "id": "u:810cedaa5d0a",
  "body": [
    {
      "id": "u:b83c8c29d713",
      "api": {
        "url": "/project/application/list",
        "method": "get"
      },
      "type": "crud",
      "columns": [
        {
          "id": "u:82037bc38ae6",
          "name": "guid",
          "type": "text",
          "label": "项目编号"
        },
        {
          "id": "u:b5ac20bda2b4",
          "type": "operation",
          "fixed": "right",
          "label": "操作",
          "buttons": [],
          "placeholder": "-"
        }
      ],
      "features": [
        "create",
        "delete",
        "update",
        "bulkDelete"
      ],
      "messages": {},
      "bulkActions": [],
      "itemActions": [],
      "primaryField": "guid",
      "syncLocation": false,
      "headerToolbar": [
        {
          "type": "button",
          "id": "u:5869a17803f9",
          "label": "申请立项",
          "level": "primary",
          "actionType": "drawer",
          "editorSetting": {
            "behavior": "create"
          },
          "drawer": {
            "type": "dialog",
            "id": "u:e0065617e77c",
            "body": [
              {
                "id": "u:2b4facf244b2",
                "api": {
                  "url": "/project/application",
                  "data": {
                    "&": "$$"
                  },
                  "method": "post",
                  "requestAdaptor": "const { xmpq, voucherUpload, projectTime, ...data } = context;\r\nconst [projectStartTime, projectEndTime] = projectTime.split(',')\r\nreturn {\r\n  ...api,\r\n  data: {\r\n    ...data,\r\n    status: '2',\r\n    projectStartTime,\r\n    projectEndTime\r\n  }\r\n}"
                },
                "body": [
                  {
                    "id": "u:12201254542d",
                    "body": [
                      {
                        "id": "u:36aded8a4d1a",
                        "type": "flex",
                        "items": [
                          {
                            "id": "u:51d261d3fc83",
                            "type": "flex",
                            "items": [
                              {
                                "id": "u:6c5e74b219b5",
                                "body": [
                                  {
                                    "id": "u:66b30a12c520",
                                    "type": "button",
                                    "label": "查看",
                                    "level": "enhance",
                                    "drawer": {
                                      "id": "u:92640348bfd7",
                                      "body": [
                                        {
                                          "id": "zccrud",
                                          "api": {
                                            "url": "",
                                            "method": "get"
                                          },
                                          "type": "crud",
                                          "columns": [
                                            {
                                              "id": "u:b5cf274ee5c1",
                                              "name": "id",
                                              "type": "text",
                                              "label": "客户政策ID"
                                            },
                                            {
                                              "id": "u:f2908da20cc5",
                                              "name": "businessType",
                                              "type": "text",
                                              "label": "业务类型"
                                            },
                                            {
                                              "id": "u:acbd187120cb",
                                              "tpl": "${effectiveStartPeriod}-${effectiveEndPeriod}",
                                              "name": "beforeRebateRatio",
                                              "type": "tpl",
                                              "label": "政策生效周期"
                                            },
                                            {
                                              "id": "u:728fed94066f",
                                              "name": "customerPolicyDesc",
                                              "type": "text",
                                              "label": "政策详情"
                                            }
                                          ],
                                          "onEvent": {
                                            "selectedChange": {
                                              "actions": [
                                                {
                                                  "script": "const { data: { item, selectedItems } } = event;\nif (selectedItems.filter(si => si.businessType == item.businessType).length >= 2) {\n  doAction({\n    actionType: 'toast',\n    args: {\n      msg: '相同类型政策不允许多选'\n    }\n  });\n  const reSelectIds = selectedItems.filter(_ => _.id !== item.id).map(_ => _.id );\n  doAction({\n    actionType: \"select\",\n    args: {\n      selected: `[${reSelectIds}].includes(+record.id)`\n    }\n  })\n  return;\n}\ndoAction({\n  actionType: \"setValue\",\n  args: {\n    value: event.data.selectedItems\n  },\n  componentId: \"khzc\"\n})",
                                                  "actionType": "custom",
                                                  "ignoreError": false
                                                }
                                              ]
                                            }
                                          },
                                          "messages": {},
                                          "bulkActions": [
                                            {
                                              "id": "u:452e99f4b136",
                                              "label": "",
                                              "wrapperCustomStyle": {
                                                "root": {
                                                  "visibility": "hidden"
                                                }
                                              }
                                            }
                                          ],
                                          "syncLocation": false,
                                          "headerToolbar": [
                                            {
                                              "id": "u:2091b99402d8",
                                              "type": "button",
                                              "label": "新增",
                                              "level": "primary",
                                              "dialog": {
                                                "id": "u:317eaf518f1e",
                                                "body": [
                                                  {
                                                    "id": "u:7f162cd1cdaa",
                                                    "body": [
                                                      {
                                                        "id": "u:4308e34d320e",
                                                        "gap": "sm",
                                                        "type": "grid",
                                                        "columns": []
                                                      }
                                                    ],
                                                    "feat": "Insert",
                                                    "type": "form",
                                                    "actions": [
                                                      {
                                                        "type": "submit",
                                                        "label": "提交",
                                                        "primary": true
                                                      }
                                                    ]
                                                  }
                                                ],
                                                "size": "md",
                                                "type": "dialog",
                                                "title": "新增政策",
                                                "actions": [
                                                  {
                                                    "id": "u:06b50db05e60",
                                                    "type": "button",
                                                    "label": "取消",
                                                    "actionType": "cancel"
                                                  },
                                                  {
                                                    "id": "u:b9892228b09f",
                                                    "type": "button",
                                                    "label": "确定",
                                                    "primary": true,
                                                    "actionType": "confirm"
                                                  }
                                                ],
                                                "draggable": false,
                                                "closeOnEsc": false,
                                                "showLoading": true,
                                                "showErrorMsg": true,
                                                "closeOnOutside": false,
                                                "showCloseButton": true
                                              },
                                              "actionType": "dialog",
                                              "editorSetting": {
                                                "behavior": "create"
                                              }
                                            },
                                            {
                                              "type": "bulk-actions"
                                            }
                                          ],
                                          "perPageAvailable": [
                                            10
                                          ],
                                          "keepItemSelectionOnPageChange": true
                                        }
                                      ],
                                      "size": "lg",
                                      "type": "drawer",
                                      "title": "查看客户政策",
                                      "actions": [
                                        {
                                          "id": "u:44f6f048f275",
                                          "type": "button",
                                          "label": "取消",
                                          "actionType": "cancel"
                                        },
                                        {
                                          "id": "u:64010c9f55b6",
                                          "type": "button",
                                          "label": "确定",
                                          "primary": true,
                                          "actionType": "cancel"
                                        }
                                      ],
                                      "draggable": false,
                                      "resizable": false,
                                      "closeOnEsc": false,
                                      "showLoading": true,
                                      "showErrorMsg": true,
                                      "closeOnOutside": false,
                                      "showCloseButton": true
                                    },
                                    "actionType": "drawer"
                                  },
                                  {
                                    "id": "u:2accd4bd1dad",
                                    "name": "projectDetails",
                                    "type": "hidden"
                                  },
                                  {
                                    "id": "u:26c1467c0dc0",
                                    "name": "customerVoucher",
                                    "type": "hidden"
                                  },
                                  {
                                    "id": "khzc",
                                    "name": "customerPolicyReportBoList",
                                    "type": "hidden",
                                    "clearValueOnHidden": true
                                  }
                                ],
                                "type": "control",
                                "label": "客户政策"
                              }
                            ],
                            "style": {
                              "width": "50%"
                            },
                            "themeCss": {
                              "baseControlClassName": {
                                "padding-and-margin:default": {
                                  "margin": 5
                                }
                              }
                            },
                            "direction": "column"
                          }
                        ],
                        "direction": "row"
                      }
                    ],
                    "type": "fieldSet",
                    "title": "基本配置",
                    "collapsable": true,
                    "bodyClassName": "p-b-sm"
                  }
                ],
                "feat": "Insert",
                "type": "form",
                "debug": true,
                "dsType": "api",
                "actions": []
              }
            ],
            "size": "lg",
            "title": "新增立项",
            "width": "80%",
            "actions": [
              {
                "id": "u:e4b029535169",
                "type": "submit",
                "label": "提交立项申请",
                "primary": true,
                "actionType": "confirm"
              },
              {
                "id": "u:29375b8bf0f0",
                "type": "button",
                "label": "保存草稿",
                "onEvent": {
                  "click": {
                    "weight": 0,
                    "actions": [
                      {
                        "outputVar": "validateResult",
                        "actionType": "validate",
                        "componentId": "u:2b4facf244b2",
                        "ignoreError": false
                      },
                      {
                        "script": "const { xmpq, voucherUpload, projectTime, ...resData } = context.props.data;\nconst d = { ...resData }\nif (projectTime) {\n  const [projectStartTime, projectEndTime] = projectTime.split(',')\n  d.projectStartTime = projectStartTime;\n  d.projectEndTime = projectEndTime\n}\ndoAction({\n  actionType: 'ajax',\n  args: {\n    api: {\n      url: '/project/application',\n      method: 'post',\n      data: d\n    }\n  }\n});\n",
                        "actionType": "custom",
                        "expression": "${!event.data.validateResult.error}",
                        "ignoreError": false
                      },
                      {
                        "groupType": "component",
                        "actionType": "cancel",
                        "expression": "${!event.data.validateResult.error}",
                        "componentId": "u:e0065617e77c"
                      }
                    ]
                  }
                }
              }
            ],
            "resizable": false,
            "actionType": "drawer",
            "closeOnOutside": false
          }
        },
        {
          "type": "bulk-actions"
        }
      ],
      "perPageAvailable": [
        10
      ]
    }
  ],
  "regions": [
    "body"
  ],
  "definitions": {}
}

流程就是在弹窗列表中打开客户政策那个弹窗，编辑crud事件中的自定义js，不用做任何处理点击确认再点击弹窗的确认，此时弹窗列表中的弹窗就发生变化了。或者点击新增政策然后直接点保存，也能复现

ydiego · 2024-05-21T02:59:07Z

上下文中压根就没有 reSelectIds 这个变量，这个是这个 function的局部变量，应该这样写

const reSelectIds = selectedItems.filter(_ => _.id !== item.id).map(_ => +_.id );
console.log(reSelectIds, `[${reSelectIds}].includes(record.id)`, 233);
doAction({
    actionType: "select",
    args: {
      selected: `\${ARRAYINCLUDES(${JSON.stringify(reSelectIds)}, record.id)}`
    }
  })

对就是这个意思非常感谢解答！

2betop · 2024-05-21T06:31:43Z

原因是这不一致，后续编辑会兼容这种错误配置。

ydiego · 2024-05-21T06:35:02Z

原因是这不一致，后续编辑会兼容这种错误配置。

原来如此，万分感谢，这个页面配了近万行了，完全没注意到这样的细节

ydiego changed the title ~~crud手动设置select时全取消了~~ crud手动设置select时，选中状态被清空 May 20, 2024

ydiego changed the title ~~crud手动设置select时，选中状态被清空~~ 编辑器在6.4.1版本下使用时弹窗列表内部分弹窗丢失且无法打开 May 21, 2024

2betop added a commit to 2betop/amis that referenced this issue May 21, 2024

chore: 弹窗配置纠错 Close: baidu#10269

edd19f0

2betop mentioned this issue May 21, 2024

chore: 弹窗配置纠错 Close: #10269 #10277

Merged

2betop self-assigned this May 21, 2024

2betop closed this as completed in #10277 May 31, 2024

2betop added a commit that referenced this issue May 31, 2024

chore: 弹窗配置纠错 Close: #10269 (#10277)

b08c31d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

编辑器在6.4.1版本下使用时弹窗列表内部分弹窗丢失且无法打开 #10269

编辑器在6.4.1版本下使用时弹窗列表内部分弹窗丢失且无法打开 #10269

ydiego commented May 20, 2024 •

edited

ydiego commented May 21, 2024 •

edited

ydiego commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024

2betop commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024 •

edited

ydiego commented May 21, 2024

2betop commented May 21, 2024 •

edited

ydiego commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024 •

edited

ydiego commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024

编辑器在6.4.1版本下使用时弹窗列表内部分弹窗丢失且无法打开 #10269

编辑器在6.4.1版本下使用时弹窗列表内部分弹窗丢失且无法打开 #10269

Comments

ydiego commented May 20, 2024 • edited

实现场景：

存在的问题：

当前方案：

ydiego commented May 21, 2024 • edited

ydiego commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024

2betop commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024 • edited

ydiego commented May 21, 2024

2betop commented May 21, 2024 • edited

ydiego commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024 • edited

ydiego commented May 21, 2024

2betop commented May 21, 2024

ydiego commented May 21, 2024

ydiego commented May 20, 2024 •

edited

ydiego commented May 21, 2024 •

edited

ydiego commented May 21, 2024 •

edited

2betop commented May 21, 2024 •

edited

ydiego commented May 21, 2024 •

edited