feat(form-page): add form page demo

src/views/demo/table/EditRowTable.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    renderEditableRow,
+    EditTableHeaderIcon,
+    EditRecordRow,
+  } from '/@/components/Table';
+
+  import { demoListApi } from '/@/api/demo/table';
+  const columns: BasicColumn[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      customRender: renderEditableRow({ dataIndex: 'id' }),
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      customRender: renderEditableRow({
+        dataIndex: 'name',
+      }),
+    },
+  ];
+  export default defineComponent({
+    components: { BasicTable, EditTableHeaderIcon, TableAction },
+    setup() {
+      const currentEditKeyRef = ref('');
+
+      const [registerTable] = useTable({
+        title: '可编辑行示例',
+        api: demoListApi,
+        columns: columns,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 160,
+          title: 'Action',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+
+      function handleEdit(record: EditRecordRow) {
+        currentEditKeyRef.value = record.key;
+        record.editable = true;
+      }
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.editable = false;
+        record.onCancel && record.onCancel();
+      }
+
+      function handleSave(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.editable = false;
+        record.onSubmit && record.onSubmit();
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          return [
+            {
+              label: '编辑',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              onClick: handleEdit.bind(null, record),
+            },
+          ];
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+
+      return {
+        registerTable,
+        handleEdit,
+        createActions,
+      };
+    },
+  });
+</script>