baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.22k stars 2.5k forks source link

picker的内嵌模式,选中值会丢失,非内嵌模式不会丢 #5122

Open cbz20000 opened 2 years ago

cbz20000 commented 2 years ago

描述问题:

picker的内嵌模式,选中值会丢失,非内嵌模式不会丢

截图或视频:

image image image image 非内嵌模式从第三步返回第二步 第二步选中的数据不会丢 image image image 内嵌模式从第三步返回第二步 第二步选中的数据会丢

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? sdk

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在 v1.10.0

  3. 粘贴有问题的完整 amis schema 代码:

    drawer: {
            title: '新增订单',
            size: 'xl',
            actions: [],
            data: [],
            body: {
              type: 'wizard',
              api: 'post:/fac/outstore/doAdd',
              debug: true,
              // mode: 'vertical',
              onEvent: {
                stepChange: {
                  actions: [
                    {
                      actionType: 'custom',
                      script:
                        'console.log(context);if(event.data.step==3 && context.props.data.items){var sumPlanQuantity = 0;context.props.data.items.forEach((item)=>{item.planQuantity = item.unlockQuantity;item.diffQuantity = item.unlockQuantity;sumPlanQuantity+=item.planQuantity});context.props.data.planQuantity=sumPlanQuantity;context.props.data.outstoreQuantity=0;context.props.data.diffQuantity=sumPlanQuantity;}else{context.props.data.planQuantity=0;context.props.data.outstoreQuantity=0;context.props.data.diffQuantity=0;};',
                    },
                  ],
                },
              },
              steps: [
                {
                  title: '创建订单',
                  body: [
                    {
                      type: 'group',
                      label: false,
                      body: [
                        {
                          type: 'input-text',
                          name: 'planNo',
                          label: '计划单号',
                          disabledOn: '${1==1}',
                        },
                        {
                          type: 'input-text',
                          name: 'brand',
                          label: '品牌',
                          disabledOn: '${1==1}',
                        },
                        {
                          type: 'input-date',
                          name: 'planDate',
                          label: '制单日期',
                          format: 'YYYY-MM-DD',
                          value: 'today',
                          maxDate: 'today',
                          required: true,
                        },
                      ],
                    },
                  ],
                },
                {
                  title: '挑选库存',
                  body: [
                    {
                      type: 'picker',
                      name: 'items',
                      joinValues: false,
                      valueField: 'stockId',
                      labelField: 'stockId',
                      multiple: true,
                      embed: false,
                      value: '',
                      source: {
                        method: 'get',
                        url: '/fac/outstore/getStockRealForMulti',
                        data: {
                          '&': '$$',
                          planDate: '${planDate}',
                        },
                      },
                      size: 'lg',
                      pickerSchema: {
                        mode: 'table',
                        name: 'thelist',
                        primaryField: 'stockId',
                        filter: {
                          title: '',
                          submitText: '',
                          wrapWithPanel: false,
                          type: 'form',
                          mode: 'horizontal',
                          horizontal: {
                            leftFixed: 'sm',
                          },
                          body: [
                            {
                              type: 'group',
                              label: false,
                              body: [
                                {
                                  type: 'select',
                                  name: 'brand',
                                  label: '品牌',
                                  source: '/fac/stock/getBrandValset',
                                  clearable: true,
                                  columnRatio: 3,
                                  submitOnChange: true,
                                },
                                {
                                  type: 'input-text',
                                  name: 'position',
                                  label: '库位',
                                  columnRatio: 3,
                                  submitOnChange: true,
                                },
                                {
                                  type: 'input-text',
                                  name: 'sku',
                                  label: 'SKU',
                                  columnRatio: 3,
                                  submitOnChange: true,
                                },
                                {
                                  label: '关键字',
                                  type: 'input-text',
                                  name: 'keyword',
                                  submitOnChange: true,
                                },
                              ],
                            },
                          ],
                        },
                        columns: [
                          {
                            name: 'peroid',
                            label: '月份',
                            type: 'text',
                            toggled: true,
                          },
                          {
                            name: 'position',
                            label: '库位',
                            sortable: true,
                            type: 'text',
                            toggled: true,
                          },
                          {
                            name: 'sku',
                            label: 'SKU',
                            sortable: true,
                            type: 'text',
                            toggled: true,
                          },
                          {
                            name: 'msku',
                            label: 'MSKU',
                            sortable: true,
                            type: 'text',
                            toggled: true,
                          },
                          {
                            name: 'quantity',
                            label:
                              '<span class="text-primary">当期库存(<span class="text-danger">锁定</span>/<span class="text-success">可用</span>)</span>',
                            sortable: true,
                            type: 'tpl',
                            tpl: '<span class="text-primary">${quantity}(<span class="text-danger">${lockQuantity}</span>/<span class="text-success">${unlockQuantity}</span>)</span>',
                            toggled: true,
                          },
                        ],
                      },
                      clearable: true,
                    },
                  ],
                },
                {
                  title: '计划明细',
                  body: [
                    {
                      type: 'group',
                      label: false,
                      body: [
                        {
                          type: 'input-number',
                          name: 'planQuantity',
                          label: '计划数量',
                          disabledOn: '${1==1}',
                        },
                        {
                          type: 'input-number',
                          name: 'outstoreQuantity',
                          label: '实拣数量',
                          disabledOn: '${1==1}',
                        },
                        {
                          type: 'input-number',
                          name: 'diffQuantity',
                          label: '差异数量',
                          disabledOn: '${1==1}',
                        },
                      ],
                    },
                    {
                      type: 'group',
                      label: false,
                      body: [
                        {
                          type: 'select',
                          source:
                            '/system/valset/getValList?valsetId=FAC_SEND_WAY',
                          labelField: 'val',
                          valueField: 'valId',
                          searchable: true,
                          clearable: true,
                          required: true,
                          name: 'sendWay',
                          label: '物流渠道',
                          columnRatio: 4,
                        },
                        {
                          type: 'input-text',
                          name: 'remark',
                          label: '备注',
                          inputClassName: 'text-red',
                          columnRatio: 8,
                        },
                      ],
                    },
                    { type: 'uuid', name: 'id' },
                    {
                      type: 'formula',
                      name: 'planQuantity',
                      formula: '${items|pick:planQuantity|sum}',
                      initSet: true,
                      autoSet: true,
                    },
                    {
                      type: 'formula',
                      name: 'outstoreQuantity',
                      formula: '${items|pick:outstoreQuantity|sum}',
                      initSet: true,
                      autoSet: true,
                    },
                    {
                      type: 'formula',
                      name: 'diffQuantity',
                      formula: '${planQuantity - outstoreQuantity}',
                      initSet: true,
                      autoSet: true,
                    },
                    {
                      type: 'input-table',
                      name: 'items',
                      label: false,
                      required: true,
                      // combineNum: 3,
                      columnsTogglable: false,
                      needConfirm: false,
                      addable: true,
                      editable: true,
                      removable: true,
                      showAddBtn: true,
                      columns: [
                        {
                          quickEdit: {
                            type: 'picker',
                            required: true,
                            valueField: 'id',
                            labelField: 'position',
                            multiple: false,
                            source: {
                              method: 'get',
                              url: '/fac/outstore/getStockReal',
                              data: {
                                '&': '$$',
                                planDate: '${planDate}',
                              },
                            },
                            size: 'lg',
                            pickerSchema: {
                              mode: 'table',
                              name: 'thelist',
                              filter: {
                                title: '',
                                submitText: '',
                                wrapWithPanel: false,
                                type: 'form',
                                mode: 'horizontal',
                                horizontal: {
                                  leftFixed: 'sm',
                                },
                                body: [
                                  {
                                    type: 'group',
                                    label: false,
                                    body: [
                                      {
                                        type: 'select',
                                        name: 'brand',
                                        label: '品牌',
                                        source: '/fac/stock/getBrandValset',
                                        clearable: true,
                                        columnRatio: 3,
                                        submitOnChange: true,
                                      },
                                      {
                                        type: 'input-text',
                                        name: 'position',
                                        label: '库位',
                                        columnRatio: 3,
                                        submitOnChange: true,
                                      },
                                      {
                                        type: 'input-text',
                                        name: 'sku',
                                        label: 'SKU',
                                        columnRatio: 3,
                                        submitOnChange: true,
                                      },
                                      {
                                        label: '关键字',
                                        type: 'input-text',
                                        name: 'keyword',
                                        submitOnChange: true,
                                      },
                                    ],
                                  },
                                ],
                              },
                              columns: [
                                {
                                  name: 'peroid',
                                  label: '月份',
                                  type: 'text',
                                  toggled: true,
                                },
                                {
                                  name: 'position',
                                  label: '库位',
                                  sortable: true,
                                  type: 'text',
                                  toggled: true,
                                },
                                {
                                  name: 'sku',
                                  label: 'SKU',
                                  sortable: true,
                                  type: 'text',
                                  toggled: true,
                                },
                                {
                                  name: 'msku',
                                  label: 'MSKU',
                                  sortable: true,
                                  type: 'text',
                                  toggled: true,
                                },
                                {
                                  name: 'quantity',
                                  label:
                                    '<span class="text-primary">当期库存(<span class="text-danger">锁定</span>/<span class="text-success">可用</span>)</span>',
                                  sortable: true,
                                  type: 'tpl',
                                  tpl: '<span class="text-primary">${quantity}(<span class="text-danger">${lockQuantity}</span>/<span class="text-success">${unlockQuantity}</span>)</span>',
                                  toggled: true,
                                },
                              ],
                            },
                            autoFill: {
                              position: '${position}',
                              sku: '${sku}',
                              msku: '${msku}',
                              planQuantity: '${unlockQuantity}',
                            },
                            clearable: true,
                            onEvent: {
                              change: {
                                actions: [
                                  {
                                    actionType: 'custom',
                                    script:
                                      'console.log(event.data);context.props.formStore.setValues({});',
                                  },
                                ],
                              },
                            },
                          },
                          name: 'stockId',
                          label: '库位',
                        },
                        {
                          quickEdit: false,
                          name: 'position',
                          label: '库位',
                          toggled: false,
                        },
                        {
                          quickEdit: false,
                          name: 'sku',
                          label: 'SKU',
                        },
                        {
                          quickEdit: false,
                          name: 'msku',
                          label: 'MSKU',
                        },
                        {
                          quickEdit: {
                            type: 'input-number',
                            min: 0,
                            size: 'xs',
                            required: true,
                            onEvent: {
                              change: {
                                actions: [
                                  {
                                    actionType: 'custom',
                                    script:
                                      'context.props.data.diffQuantity = (event.data?.value||0) - (context.props.data?.outstoreQuantity||0);',
                                  },
                                ],
                              },
                            },
                          },
                          name: 'planQuantity',
                          label: '计划发出数量',
                          width: 100,
                        },
                        {
                          quickEdit: {
                            type: 'input-number',
                            min: 0,
                            size: 'xs',
                            onEvent: {
                              change: {
                                actions: [
                                  {
                                    actionType: 'custom',
                                    script:
                                      'context.props.data.diffQuantity = (context.props.data?.planQuantity||0) - (event.data?.value||0);',
                                  },
                                ],
                              },
                            },
                          },
                          name: 'outstoreQuantity',
                          label: '仓库实拣数量',
                          value: 0,
                          width: 100,
                        },
                        {
                          quickEdit: false,
                          name: 'diffQuantity',
                          label: '差异数量',
                          value: 0,
                          width: 100,
                        },
                        {
                          quickEdit: {
                            type: 'select',
                            size: 'sm',
                            source:
                              '/system/valset/getValList?valsetId=FAC_OUTSTORE_EMP',
                            labelField: 'val',
                            valueField: 'valId',
                            searchable: true,
                            clearable: true,
                            requiredOn:
                              'this.outstoreQuantity!=null && this.outstoreQuantity!= 0',
                          },
                          name: 'outstoreEmp',
                          label: '拣货人',
                          width: 150,
                        },
                        {
                          quickEdit: {
                            type: 'input-date',
                            format: 'YYYY-MM-DD',
                            maxDate: 'today',
                            size: 'xs',
                            requiredOn:
                              'this.outstoreQuantity!=null && this.outstoreQuantity!= 0',
                          },
                          name: 'outstoreDate',
                          label: '拣货日期',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          },
  4. 操作步骤 请简单描述一下复现的操作步骤...

cbz20000 commented 2 years ago

经测试,内嵌模式会把数据域中picker对应的name的变量的变量值清空,把变量值备份等待picker初始化完成后再延迟赋值可以解决此问题,但是延迟多长时间不好确定。 onEvent: { stepChange: { actions: [ { actionType: 'custom', script: 'console.log(context);if(event.data.step==2 && context.props.data.items){var itemsBak = context.props.data.items; setTimeout(function(){console.log("itemsBak=",itemsBak);doAction({"actionType": "setValue","componentId": "wizard", args: {"value": {"items":itemsBak}}});},itemsBak.length*100>1000?itemsBak.length*100:1000);};', }, ], }, },