alibaba / x-render

🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
https://xrender.fun
6.98k stars 988 forks source link

多选框联动控制显示 #1433

Closed xyy7260 closed 10 months ago

xyy7260 commented 10 months ago
image

图片上面C、D药。 默认没有影藏

"hidden": "{{!formData.xh_yydx.xh_yyym_choices.xh_yyym }}"

如果换成 rootValue 则可以影藏

"hidden": "{{!rootValue.xh_yydx.xh_yyym_choices.xh_yyym }}"

第二个问题 把下面json复制到 playground 打开, 联动都不起作用。

联动逻辑就是 多选框选择 第一个 第二个 出现 xh_yy_cy

选择 第三 第四个出现 xh_yy_dy 因为我本地做了国际化所以在网页中打开全是英文 谢谢老大

{
  "type": "object",
  "title": "用药多选信息",
  "properties": {
    "xh_yydx": {
      "param": "xh_yydx",
      "title": "xh_yydx",
      "type": "object",
      "keys": "info",
      "readOnlyWidget": "ReadonlyObj",
      "properties": {
        "xh_yyym_choices": {
          "param": "xh_yyym_choices",
          "widget": "card",
          "type": "object",
          "title": "xh_yyym",
          "properties": {
            "xh_yyym": {
              "param": "xh_yyym",
              "title": "xh_yyym",
              "type": "array",
              "keys": "info",
              "readOnlyWidget": "ReadonlyArrays",
              "hiddenParams": ["xh_yy_ay#xh_yyym_0", "xh_yy_by#xh_yyym_1", "xh_yy_cy#xh_yyym_2", "xh_yy_dy#xh_yyym_3"],
              "props": {
                "options": [
                  {
                    "label": "xh_yyym_0",
                    "value": "xh_yyym_0"
                  },
                  {
                    "label": "xh_yyym_1",
                    "value": "xh_yyym_1"
                  },
                  {
                    "label": "xh_yyym_2",
                    "value": "xh_yyym_2"
                  },
                  {
                    "label": "xh_yyym_3",
                    "value": "xh_yyym_3"
                  }
                ]
              },
              "defaultValue": []
            },
            "xh_yy_cy": {
              "param": "xh_yy_cy",
              "title": "xh_yy_cy",
              "type": "string",
              "keys": "info",
              "readOnlyWidget": "ReadonlySelect",
              "props": {
                "options": [
                  {
                    "label": "xh_yy_cy_0",
                    "value": "xh_yy_cy_0"
                  },
                  {
                    "label": "xh_yy_cy_1",
                    "value": "xh_yy_cy_1"
                  },
                  {
                    "label": "xh_yy_cy_2",
                    "value": "xh_yy_cy_2"
                  },
                  {
                    "label": "xh_yy_cy_3",
                    "value": "xh_yy_cy_3"
                  }
                ]
              },

              "hidden": "{{!formData?.xh_yydx?.xh_yyym_choices?.xh_yyym || formData?.xh_yydx?.xh_yyym_choices?.xh_yyym?.include('xh_yyym_0') || formData?.xh_yydx?.xh_yyym_choices?.xh_yyym.include('xh_yyym_1')}}",
              "parentParam": "xh_yydx.xh_yyym_choices"
            },
            "xh_yy_dy": {
              "param": "xh_yy_dy",
              "title": "xh_yy_dy",
              "type": "string",
              "keys": "info",
              "readOnlyWidget": "ReadonlySelect",
              "props": {
                "options": [
                  {
                    "label": "xh_yy_dy_0",
                    "value": "xh_yy_dy_0"
                  },
                  {
                    "label": "xh_yy_dy_1",
                    "value": "xh_yy_dy_1"
                  },
                  {
                    "label": "xh_yy_dy_2",
                    "value": "xh_yy_dy_2"
                  },
                  {
                    "label": "xh_yy_dy_3",
                    "value": "xh_yy_dy_3"
                  }
                ]
              },

              "hidden": "{{!formData.xh_yydx.xh_yyym_choices.xh_yyym || formData.xh_yydx.xh_yyym_choices.xh_yyym.include('xh_yyym_3') || formData.xh_yydx.xh_yyym_choices.xh_yyym.include('xh_yyym_2')}}",
              "parentParam": "xh_yydx.xh_yyym_choices"
            }
          },
          "parentParam": "xh_yydx"
        }
      }
    }
  }
}
lhbxs commented 10 months ago

看能不能用 watch 我调试发现 include不能被执行

xyy7260 commented 10 months ago

@lhbxs 我表单代码都是用通过Excel生辰的,如果改成watch 类似手写代码了呢。 [捂脸], 大约有2-3千个表单😭。未来还有十几个项目都需要用Excel去生成

lhbxs commented 10 months ago

后面我看下

xyy7260 commented 10 months ago

@lhbxs 好呢老大, 这个项目要上线 很急很急 😭 可以把这个优先级提高一下不 , 很多项目都在等这个功能work

lhbxs commented 10 months ago

你或者可以尝试着先解一下,核心代码 parseExpression 函数

xyy7260 commented 10 months ago

@lhbxs 我这边尝试了一下
"hidden": "{{ !formData.xh_yydx.xh_yyym_choices.xh_yyym.length }}" 后面得加length 这样可以判断是否有值在第一次加载时候会隐藏, 至于 formData.xh_yydx.xh_yyym_choices.xh_yyym.include('xh_yyym_3') 不能被执行

xyy7260 commented 10 months ago

@lhbxs 我知道怎么处理了,

"hidden": "{{ !formData.xh_yydx.xh_yyym_choices.xh_yyym  || 
!formData.xh_yydx.xh_yyym_choices.xh_yyym?.includes('xh_yyym_3') }}"

注意后面要添加 ?.include

lhbxs commented 10 months ago

前面也可以加,例如 "hidden": "{{ formData.a?.b?.c?.includes('0') || formData.a?.b?.c.includes('1')}}",

但是 formData?. 这个不能加,加了解析会有问题。

xyy7260 commented 10 months ago

@lhbxs OK