amis 定义右侧配置面板问题

uubf1zoe  于 4个月前  发布在  其他
关注(0)|答案(2)|浏览(58)
实现场景:

定开侧边栏,在侧边栏中新增一个“原子能力”的表单,通过后端数据展示下拉框,通过下拉框数据去动态渲染数据框

存在的问题:

目前遇到问题,如何同步我新增的侧边栏schema数据到主schema中

当前方案:

通过pipeOut拿到输入框中的值,但是无法把数据同步到schema中

panelBodyCreator = (context: BaseEventContext) => {

    const isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
    const isInDrawer = /(?:\/|^)drawer\/.+$/.test(context.path);

    // TODO: 旧方法无法判断,context 中没有 dropdown-button 的信息,临时实现
    // const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
    const isInDropdown = /^button-group\/.+$/.test(context.path);
    const buttonStateFunc = (visibleOn: string, state: string) => {
      return [
        getSchemaTpl('theme:font', {
          label: '文字',
          name: `themeCss.className.font:${state}`,
          visibleOn: visibleOn,
          editorThemePath: [
            `button1.type.\${level}.${state}.body.font-color`,
            `button1.size.\${size}.body.font`
          ]
        }),
        getSchemaTpl('theme:colorPicker', {
          label: '背景',
          name: `themeCss.className.background:${state}`,
          labelMode: 'input',
          needGradient: true,
          needImage: true,
          visibleOn: visibleOn,
          editorThemePath: `button1.type.\${level}.${state}.body.bg-color`
        }),
        getSchemaTpl('theme:border', {
          name: `themeCss.className.border:${state}`,
          visibleOn: visibleOn,
          editorThemePath: `button1.type.\${level}.${state}.body.border`
        }),
        getSchemaTpl('theme:paddingAndMargin', {
          name: `themeCss.className.padding-and-margin:${state}`,
          visibleOn: visibleOn,
          editorThemePath: `button1.size.\${size}.body.padding-and-margin`
        }),
        getSchemaTpl('theme:radius', {
          name: `themeCss.className.radius:${state}`,
          visibleOn: visibleOn,
          editorThemePath: `button1.size.\${size}.body.border`
        }),
        getSchemaTpl('theme:size', {
          label: '图标尺寸',
          name: `themeCss.iconClassName.iconSize:${state}`,
          visibleOn: visibleOn,
          editorThemePath: `button1.size.\${size}.body.icon-size`
        })
      ];
    };

    return getSchemaTpl('tabs', [
      {
        title: '属性',
        body: getSchemaTpl('collapseGroup', [
          {
            title: '基本',
            body: [
              getSchemaTpl('layout:originPosition', { value: 'left-top' }),
              getSchemaTpl('label', {
                label: '名称'
              }),
              {
                label: '类型',
                type: 'button-group-select',
                name: 'type',
                size: 'sm',
                visibleOn: 'type === "submit" || type === "reset" ',
                options: [
                  {
                    label: '按钮',
                    value: 'button'
                  },

                  {
                    label: '提交',
                    value: 'submit'
                  },

                  {
                    label: '重置',
                    value: 'reset'
                  }
                ]
              },

              getSchemaTpl('switch', {
                name: 'close',
                label: '是否关闭',
                clearValueOnHidden: true,
                labelRemark: `指定此次操作完后关闭当前 ${isInDialog ? 'dialog' : 'drawer'
                  }`,
                hidden: !isInDialog && !isInDrawer,
                pipeIn: defaultValue(false)
              }),

              {
                type: 'ae-switch-more',
                mode: 'normal',
                formType: 'extend',
                label: tipedLabel(
                  '二次确认',
                  '点击后先询问用户,由手动确认后再执行动作,避免误触。可从数据域变量中取值。'
                ),
                form: {
                  body: [
                    getSchemaTpl('textareaFormulaControl', {
                      label: '确认内容',
                      mode: 'normal',
                      name: 'confirmText'
                    })
                  ]
                }
              },

              {
                type: 'ae-switch-more',
                formType: 'extend',
                mode: 'normal',
                label: '气泡提示',
                hidden: isInDropdown,
                form: {
                  body: [
                    getSchemaTpl('textareaFormulaControl', {
                      name: 'tooltip',
                      mode: 'normal',
                      label: tipedLabel(
                        '正常提示',
                        '正常状态下的提示内容,不填则不弹出提示。可从数据域变量中取值。'
                      )
                    }),
                    getSchemaTpl('textareaFormulaControl', {
                      name: 'disabledTip',
                      mode: 'normal',
                      label: tipedLabel(
                        '禁用提示',
                        '禁用状态下的提示内容,不填则弹出正常提示。可从数据域变量中取值。'
                      ),
                      clearValueOnHidden: true,
                      visibleOn: 'data.tooltipTrigger !== "focus"'
                    }),
                    {
                      type: 'button-group-select',
                      name: 'tooltipTrigger',
                      label: '触发方式',
                      // visibleOn: 'data.tooltip || data.disabledTip',
                      size: 'sm',
                      options: [
                        {
                          label: '鼠标悬浮',
                          value: 'hover'
                        },
                        {
                          label: '聚焦',
                          value: 'focus'
                        }
                      ],
                      pipeIn: defaultValue('hover')
                    },
                    {
                      type: 'button-group-select',
                      name: 'tooltipPlacement',
                      // visibleOn: 'data.tooltip || data.disabledTip',
                      label: '提示位置',
                      size: 'sm',
                      options: [
                        {
                          label: '上',
                          value: 'top'
                        },
                        {
                          label: '右',
                          value: 'right'
                        },
                        {
                          label: '下',
                          value: 'bottom'
                        },
                        {
                          label: '左',
                          value: 'left'
                        }
                      ],
                      pipeIn: defaultValue('bottom')
                    }
                  ]
                }
              },

              getSchemaTpl('icon', {
                label: '左侧图标'
              }),

              getSchemaTpl('icon', {
                name: 'rightIcon',
                label: '右侧图标'
              }),
              getSchemaTpl('badge')
            ]
          },
          getSchemaTpl('status', {
            disabled: true
          })
        ])
      },
      {
        title: '外观',
        body: getSchemaTpl('collapseGroup', [
          {
            title: '基本',
            body: [
              getSchemaTpl('buttonLevel', {
                label: '样式',
                name: 'level',
                hidden: isInDropdown
              }),

              getSchemaTpl('buttonLevel', {
                label: '高亮样式',
                name: 'activeLevel',
                hidden: isInDropdown,
                visibleOn: 'data.active'
              }),

              getSchemaTpl('switch', {
                name: 'block',
                label: '块状显示',
                hidden: isInDropdown
              }),

              getSchemaTpl('size', {
                label: '尺寸',
                hidden: isInDropdown
              })
            ]
          },
          {
            title: '自定义样式',
            body: [
              {
                type: 'select',
                name: 'editorState',
                label: '状态',
                selectFirst: true,
                options: [
                  {
                    label: '常规',
                    value: 'default'
                  },
                  {
                    label: '悬浮',
                    value: 'hover'
                  },
                  {
                    label: '点击',
                    value: 'active'
                  }
                ]
              },
              ...buttonStateFunc(
                "${editorState == 'default' || !editorState}",
                'default'
              ),
              ...buttonStateFunc("${editorState == 'hover'}", 'hover'),
              ...buttonStateFunc("${editorState == 'active'}", 'active')
            ]
          },
          getSchemaTpl('theme:cssCode', {
            themeClass: [
              {
                value: '',
                state: ['default', 'hover', 'active']
              }
            ]
          })
        ])
      },
      {
        title: '事件',
        className: 'p-none',
        body:
          !!context.schema.actionType ||
            ['submit', 'reset'].includes(context.schema.type)
            ? [
              getSchemaTpl('eventControl', {
                name: 'onEvent',
                ...getEventControlConfig(this.manager, context)
              }),
              getOldActionSchema(this.manager, context)
            ]
            : [
              getSchemaTpl('eventControl', {
                name: 'onEvent',
                ...getEventControlConfig(this.manager, context)
              })
            ]
      },
      {
        title: '原子能力',
        className: 'p-none',
        body:
        {
          "type": "page",
          className: 'p-none',
          "body": [
            {
              title: '',
              "type": "form",
              "wrapWithPanel": false,
              "body": [
                {
                  "name": "mycustom",
                  "asFormItem": true,
                  component: CustomTypeofSource
                }
              ]
            }
          ]
        }
      }
    ]);
  };

希望得到回复,谢谢🌹🌹

shstlldc

shstlldc1#

啥意思,这个表单的输入输出就是页面的 schema 呢

qnakjoqk

qnakjoqk2#

抱歉☹️,可能是我的描述有问题,我的意思是在上述自定义组件‘CustomTypeofSource’中想把schema添加到context上下文中,有没有api去调用,我目前直接使用context.schema.xxx = xxxx,通过直接修改对象,添加我想要的属性,谢谢你的解答

相关问题