高级表单优化

Ben Lin

2024-07-02 2069d53e9be24adec3c8d6717fd7317555bd9a52

 src/views/demo/table/EditCellTable.vue

@@ -8,15 +8,16 @@
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { optionsListApi } from '/@/api/demo/select';
<script lang="ts" setup>
  import { h } from 'vue';
  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 { demoListApi } from '@/api/demo/table';
  import { treeOptionsListApi } from '@/api/demo/tree';
  import { useMessage } from '@/hooks/web/useMessage';
  import { Progress } from 'ant-design-vue';

  const columns: BasicColumn[] = [
    {
      title: '输入框',
@@ -209,67 +210,56 @@
      width: 200,
    },
  ];
  export default defineComponent({
    components: { BasicTable },
    setup() {
      const [registerTable] = useTable({
        title: '可编辑单元格示例',
        api: demoListApi,
        columns: columns,
        showIndexColumn: false,
        bordered: true,
      });

      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');
      }

      return {
        registerTable,
        handleEditEnd,
        handleEditCancel,
        beforeEditSubmit,
      };
    },
  const [registerTable] = useTable({
    title: '可编辑单元格示例',
    api: demoListApi,
    columns: columns,
    showIndexColumn: false,
    bordered: true,
  });

  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');
  }
</script>