Merge pull request baidu#9447 from yangwei9012/master

fix(editor)：修复部分选择类组件设置选项和默认值方面的问题
lhtuling · Jan 16, 2024 · ddf581a · ddf581a
2 parents 1b90148 + 290dbde
commit ddf581a
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 203 deletions.
diff --git a/packages/amis-editor-core/src/tpl.tsx b/packages/amis-editor-core/src/tpl.tsx
@@ -40,6 +40,7 @@ export function valuePipeOut(value: any) {
       return undefined;
     }
 
+    // 文本1会被转为数字1，值格式慎用
     return JSON.parse(value);
   } catch (e) {
     return value;

diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx
@@ -6,6 +6,7 @@ import './tpl/index';
 export * from './plugin';
 
 import './renderer/OptionControl';
+import './renderer/ValueFormatControl';
 import './renderer/NavSourceControl';
 import './renderer/KeyValueMapControl';
 import './renderer/NavBadgeControl';

diff --git a/packages/amis-editor/src/plugin/Form/Checkbox.tsx b/packages/amis-editor/src/plugin/Form/Checkbox.tsx
@@ -3,6 +3,7 @@ import {
   setSchemaTpl,
   getSchemaTpl,
   valuePipeOut,
+  undefinedPipeOut,
   EditorNodeType,
   EditorManager
 } from 'amis-editor-core';
@@ -138,44 +139,48 @@ export class CheckboxControlPlugin extends BasePlugin {
                 form: {
                   body: [
                     {
-                      type: 'input-text',
-                      label: '勾选值',
+                      type: 'ae-valueFormat',
                       name: 'trueValue',
+                      label: '勾选值',
                       pipeIn: defaultValue(true),
-                      pipeOut: valuePipeOut,
+                      pipeOut: undefinedPipeOut,
                       onChange: (
                         value: any,
                         oldValue: any,
                         model: any,
                         form: any
                       ) => {
-                        const defaultValue = form?.data?.value;
+                        const {value: defaultValue, trueValue} =
+                          form?.data || {};
                         if (isPureVariable(defaultValue)) {
                           return;
                         }
-                        if (oldValue === defaultValue) {
+                        if (trueValue === defaultValue && trueValue !== value) {
                           form.setValues({value});
                         }
                       }
                     },
                     {
-                      type: 'input-text',
-                      label: '未勾选值',
+                      type: 'ae-valueFormat',
                       name: 'falseValue',
+                      label: '未勾选值',
                       pipeIn: defaultValue(false),
-                      pipeOut: valuePipeOut,
+                      pipeOut: undefinedPipeOut,
                       onChange: (
                         value: any,
                         oldValue: any,
                         model: any,
                         form: any
                       ) => {
-                        const {value: defaultValue, trueValue} =
+                        const {value: defaultValue, falseValue} =
                           form?.data || {};
                         if (isPureVariable(defaultValue)) {
                           return;
                         }
-                        if (trueValue !== defaultValue) {
+                        if (
+                          falseValue === defaultValue &&
+                          falseValue !== value
+                        ) {
                           form.setValues({value});
                         }
                       }

diff --git a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx
@@ -4,7 +4,8 @@ import {
   getSchemaTpl,
   valuePipeOut,
   EditorNodeType,
-  EditorManager
+  EditorManager,
+  undefinedPipeOut
 } from 'amis-editor-core';
 import {registerEditorPlugin} from 'amis-editor-core';
 import {
@@ -173,11 +174,6 @@ export class CheckboxesControlPlugin extends BasePlugin {
                   ]
                 }
               ],
-              getSchemaTpl('valueFormula', {
-                rendererSchema: (schema: Schema) => schema,
-                useSelectMode: true, // 改用 Select 设置模式
-                visibleOn: 'this.options && this.options.length > 0'
-              }),
               getSchemaTpl('joinValues', {
                 visibleOn: true
               }),
@@ -199,6 +195,17 @@ export class CheckboxesControlPlugin extends BasePlugin {
               getSchemaTpl('optionControlV2', {
                 multiple: true
               }),
+              getSchemaTpl('valueFormula', {
+                rendererSchema: (schema: Schema) => ({
+                  ...schema,
+                  type: 'input-text'
+                }),
+                pipeOut: undefinedPipeOut,
+                // 默认值组件设计有些问题，自动发起了请求，接口数据作为了默认值选项，接口形式应该是设置静态值或者FX
+                needDeleteProps: ['source'],
+                // 当数据源是自定义静态选项时，不额外配置默认值，在选项上直接勾选即可，放开会有个bug：当去掉勾选时，默认值配置组件不清空，只是schema清空了value
+                visibleOn: 'this.selectFirst !== true && this.source != null'
+              }),
               // 自定义选项模板
               getSchemaTpl('optionsMenuTpl', {
                 manager: this.manager

diff --git a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
@@ -129,7 +129,8 @@ export class MatrixControlPlugin extends BasePlugin {
               getSchemaTpl('label'),
               getSchemaTpl('switch', {
                 name: 'multiple',
-                label: '可多选'
+                label: '可多选',
+                pipeIn: defaultValue(true)
               }),
               {
                 label: tipedLabel('模式', '行级、列级或者单个单元单选'),

diff --git a/packages/amis-editor/src/plugin/Form/Select.tsx b/packages/amis-editor/src/plugin/Form/Select.tsx
@@ -7,7 +7,8 @@ import {
   getSchemaTpl,
   BasePlugin,
   tipedLabel,
-  JSONPipeOut
+  JSONPipeOut,
+  undefinedPipeOut
 } from 'amis-editor-core';
 
 import {ValidatorTag} from '../../validator';
@@ -221,9 +222,6 @@ export class SelectControlPlugin extends BasePlugin {
                 ]
               }),
               getSchemaTpl('checkAll'),
-              getSchemaTpl('valueFormula', {
-                rendererSchema: (schema: Schema) => schema
-              }),
               getSchemaTpl('labelRemark'),
               getSchemaTpl('remark'),
               getSchemaTpl('placeholder'),
@@ -234,7 +232,29 @@ export class SelectControlPlugin extends BasePlugin {
             title: '选项',
             body: [
               getSchemaTpl('optionControlV2'),
-              getSchemaTpl('selectFirst'),
+              getSchemaTpl('selectFirst', {
+                onChange: (
+                  value: any,
+                  oldValue: any,
+                  model: any,
+                  form: any
+                ) => {
+                  if (value) {
+                    form.deleteValueByName('value');
+                  }
+                }
+              }),
+              getSchemaTpl('valueFormula', {
+                rendererSchema: (schema: Schema) => ({
+                  ...schema,
+                  type: 'input-text'
+                }),
+                pipeOut: undefinedPipeOut,
+                // 默认值组件设计有些问题，自动发起了请求，接口数据作为了默认值选项，接口形式应该是设置静态值或者FX
+                needDeleteProps: ['source'],
+                // 当数据源是自定义静态选项时，不额外配置默认值，在选项上直接勾选即可，放开会有个bug：当去掉勾选时，默认值配置组件不清空，只是schema清空了value
+                visibleOn: 'this.selectFirst !== true && this.source != null'
+              }),
               getSchemaTpl(
                 'loadingConfig',
                 {