BasicTable的数字输入单元格编辑在BasicModal中展示时会出现bug

[coconutiY]

版本号：

3.7.2 （master分支 截至【issues/7561】 开头的提交）

问题描述：

<BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="1024px" @ok="handleSubmit">
<basic-table
@register="registerTable"
:rowSelection="rowSelection"
@edit-end="handleEditEnd"
@edit-cancel="handleEditCancel"
:beforeEditSubmit="beforeEditSubmit"
/>

这种方式展示数据，点击单元格触发编辑后按数字0-9或del键会立即退出编辑状态，并且无法触发basic-table的任何事件，并且会触发BasicModal的 setModalHeight 方法

错误截图：

友情提示：

• 未按格式要求发帖、描述过于简单的，会被直接删掉;
• 描述问题请图文并茂，方便我们理解并快速定位问题;
• 如果使用的不是master，请说明你使用的分支;

[zhangdaiscott]

zy

[jeecgDeveloper]

无法复现，请提供可运行的例子。

测试代码：
index.vue

<template>
  <div class="basicModal-container">
    <div>
      <a-alert showIcon message="ssss"></a-alert>
      <a-button type="primary" @click="handleOpenModal01">弹窗01</a-button>
    </div>
    <modal01 @register="register" @openChange="handleChange"></modal01>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import modal01 from './modal01.vue';
  import { useModal } from '/@/components/Modal';

  const [register, { openModal, setModalProps }] = useModal();
  const handleOpenModal01 = (params) => {
    openModal(true);
    setModalProps({ title: '外部打开弹窗01', loading: false });
  };
  const handleChange = (value) => {
    console.log('外部弹窗显示/隐藏：', value);
  };
</script>

<style lang="less" scoped>
  .basicModal-container {
    padding: 10px;
    display: flex;
    flex-direction: column;
    > div {
      margin-bottom: 10px;
      .ant-btn {
        margin-top: 10px;
      }
    }
  }
</style>

modal01.vue

<template>
  <div>
    <BasicModal @register="register" v-bind="$attrs" @openChange="handleOpenChange" width="1024px">
      <BasicTable @register="registerTable" @edit-end="handleEditEnd" @edit-cancel="handleEditCancel" :beforeEditSubmit="beforeEditSubmit" />
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  const [register, { closeModal, setModalProps }] = useModalInner();

  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { optionsListApi } from '/@/api/demo/select';

  import { demoListApi } from '/@/api/demo/table';
  import { treeOptionsListApi } from '/@/api/demo/tree';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { mapTableTotalSummary } from "@/utils/common/compUtils";

  const handleTitle = () => {
    setModalProps({ title: '弹窗01' });
  };
  const handleOpenChange = (visible) => {
    console.log('内部显示/隐藏：', visible);
  };

  const columns: BasicColumn[] = [
    {
      title: '输入框',
      dataIndex: 'name',
      edit: true,
      editComponentProps: {
        prefix: '$',
      },
      width: 200,
    },
    {
      title: '默认输入状态',
      dataIndex: 'name7',
      edit: true,
      editable: true,
      width: 200,
    },
    {
      title: '输入框校验',
      dataIndex: 'name1',
      edit: true,
      // 默认必填校验
      editRule: true,
      width: 200,
    },
    {
      title: '输入框函数校验',
      dataIndex: 'name2',
      edit: true,
      editRule: async (text) => {
        if (text === '2') {
          return '不能输入该值';
        }
        return '';
      },
      width: 200,
    },
    {
      title: '数字输入框',
      dataIndex: 'id',
      edit: true,
      editRule: true,
      editComponent: 'InputNumber',
      width: 200,
    },
    {
      title: '下拉框',
      dataIndex: 'name3',
      edit: true,
      editComponent: 'Select',
      editComponentProps: {
        options: [
          {
            label: 'Option1',
            value: '1',
          },
          {
            label: 'Option2',
            value: '2',
          },
        ],
      },
      width: 200,
    },
    {
      title: '远程下拉',
      dataIndex: 'name4',
      edit: true,
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
        resultField: 'list',
        labelField: 'name',
        valueField: 'id',
      },
      width: 200,
    },
    {
      title: '远程下拉树',
      dataIndex: 'name71',
      edit: true,
      editComponent: 'ApiTreeSelect',
      editRule: false,
      editComponentProps: {
        api: treeOptionsListApi,
        resultField: 'list',
      },
      width: 200,
    },
    {
      title: '日期选择',
      dataIndex: 'date',
      edit: true,
      editComponent: 'DatePicker',
      editComponentProps: {
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
      },
      width: 200,
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      edit: true,
      editComponent: 'TimePicker',
      editComponentProps: {
        valueFormat: 'HH:mm',
        format: 'HH:mm',
      },
      width: 200,
    },
    {
      title: '勾选框',
      dataIndex: 'name5',
      edit: true,
      editComponent: 'Checkbox',
      editValueMap: (value) => {
        return value ? '是' : '否';
      },
      width: 200,
    },
    {
      title: '开关',
      dataIndex: 'name6',
      edit: true,
      editComponent: 'Switch',
      editValueMap: (value) => {
        return value ? '开' : '关';
      },
      width: 200,
    },
  ];
  const [registerTable] = useTable({
    title: '可编辑单元格示例',
    api: demoListApi,
    columns: columns,
    showIndexColumn: false,
    bordered: true,
    showSummary: true,
    summaryFunc: onSummary,
  });

  const { createMessage } = useMessage();

  function handleEditEnd({ record, index, key, value }: Recordable) {
    console.log(record, index, key, value);
    return false;
  }

  // 模拟将指定数据保存
  function feakSave({ value, key, id }) {
    createMessage.loading({
      content: `正在模拟保存${key}`,
      key: '_save_fake_data',
      duration: 0,
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        if (value === '') {
          createMessage.error({
            content: '保存失败：不能为空',
            key: '_save_fake_data',
            duration: 2,
          });
          resolve(false);
        } else {
          createMessage.success({
            content: `记录${id}的${key}已保存`,
            key: '_save_fake_data',
            duration: 2,
          });
          resolve(true);
        }
      }, 2000);
    });
  }

  async function beforeEditSubmit({ record, index, key, value }) {
    console.log('单元格数据正在准备提交', { record, index, key, value });
    return await feakSave({ id: record.id, key, value });
  }

  function handleEditCancel() {
    console.log('cancel');
  }

  function onSummary(tableData: Recordable[]) {
    // 可用工具方法自动计算合计
    const totals = mapTableTotalSummary(tableData, ['id']);
    return [totals];
  }
</script>

<style scoped></style>

测试效果：

[coconutiY]

复现以及可运行代码，详见压缩包

nestedForm.zip