图片，附件表格管理

src/components/myData/ThumbUrl.vue

@@ -0,0 +1,31 @@
+<template>
+  <span class="thumb">
+    <Image v-if="fileUrl" :src="fileUrl" :width="104" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Image } from 'ant-design-vue';
+
+  export default defineComponent({
+    components: { Image },
+    props: {
+      fileUrl: propTypes.string.def(''),
+      fileName: propTypes.string.def(''),
+    },
+  });
+</script>
+<style lang="less">
+  .thumb {
+    img {
+      position: static;
+      display: inline-block !important;
+      width: 40px;
+      height: 40px;
+      cursor: zoom-in;
+      border-radius: 4px;
+      object-fit: cover;
+    }
+  }
+</style>

src/components/myData/fileData.tsx

@@ -0,0 +1,130 @@
+import type { BasicColumn, ActionItem } from '/@/components/Table';
+
+import { PreviewFileItem } from '/@/components/Upload/src/types';
+import {
+  // checkImgType,
+  isImgTypeByName,
+} from '/@/components/Upload/src/helper';
+
+import TableAction from '/@/components/Table/src/components/TableAction.vue';
+import ThumbUrl from './ThumbUrl.vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+
+// 文件上传列表
+export function createTableColumns(): BasicColumn[] {
+  return [
+    // {
+    //   dataIndex: 'thumbUrl',
+    //   title: t('component.upload.legend'),
+    //   width: 70,
+    //   customRender: ({ record }) => {
+    //     const { thumbUrl } = (record as FileItem) || {};
+    //     return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
+    //   },
+    // },
+    {
+      title: t('component.upload.fileName'),
+      dataIndex: 'name',
+      editRow: true,
+      width: 180,
+    },
+    {
+      dataIndex: 'size',
+      title: t('component.upload.fileSize'),
+      width: 100,
+      customRender: ({ text = 0 }) => {
+        return text && (text / 1024).toFixed(2) + 'KB';
+      },
+    },
+    {
+      dataIndex: 'type',
+      title: '文件类型',
+      width: 100,
+    },
+    {
+      title: '上传日期',
+      dataIndex: 'time',
+      editRow: true,
+      width: 200,
+    },
+  ];
+}
+export function createActionColumn(handleRemove: Function): BasicColumn {
+  return {
+    width: 120,
+    title: t('component.upload.operating'),
+    dataIndex: 'action',
+    fixed: false,
+    customRender: ({ record }) => {
+      const actions: ActionItem[] = [
+        {
+          label: t('component.upload.del'),
+          icon: 'ic:outline-delete-outline',
+          color: 'error',
+          onClick: handleRemove.bind(null, record),
+        },
+      ];
+      // if (checkImgType(record)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
+      return <TableAction actions={actions} outside={true} />;
+    },
+  };
+}
+// 文件预览列表
+export function createPreviewColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'url',
+      title: t('component.upload.legend'),
+      width: 100,
+      customRender: ({ record }) => {
+        const { url } = (record as PreviewFileItem) || {};
+        return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
+      },
+    },
+    {
+      dataIndex: 'name',
+      title: t('component.upload.fileName'),
+      align: 'left',
+    },
+  ];
+}
+
+export function createPreviewActionColumn(handleRemove, handleDownload): BasicColumn {
+  return {
+    width: 80,
+    title: t('component.upload.operating'),
+    dataIndex: 'action',
+    fixed: false,
+    customRender: ({ record }) => {
+      // const { url } = (record || {}) as PreviewFileItem;
+
+      const actions: ActionItem[] = [
+        {
+          label: t('component.upload.del'),
+          color: 'error',
+          icon: 'ic:outline-delete-outline',
+          onClick: handleRemove.bind(null, record),
+        },
+        {
+          label: t('component.upload.download'),
+          color: 'success',
+          icon: 'ic:outline-download',
+          onClick: handleDownload.bind(null, record),
+        },
+      ];
+      // if (isImgTypeByName(url)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
+      return <TableAction actions={actions} outside={true} />;
+    },
+  };
+}

src/components/myData/imageData.tsx

@@ -0,0 +1,139 @@
+import type { BasicColumn, ActionItem } from '/@/components/Table';
+
+import { FileItem, PreviewFileItem } from '/@/components/Upload/src/types';
+import {
+  // checkImgType,
+  isImgTypeByName,
+} from '/@/components/Upload/src/helper';
+
+import TableAction from '/@/components/Table/src/components/TableAction.vue';
+import ThumbUrl from './ThumbUrl.vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+
+// 文件上传列表
+export function createTableColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'thumbUrl',
+      title: t('component.upload.legend'),
+      width: 70,
+      customRender: ({ record }) => {
+        const { thumbUrl } = (record as FileItem) || {};
+        return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
+      },
+    },
+    {
+      title: t('component.upload.imageName'),
+      dataIndex: 'name',
+      editRow: true,
+      width: 120,
+    },
+    {
+      dataIndex: 'size',
+      title: t('component.upload.imageSize'),
+      width: 80,
+      customRender: ({ text = 0 }) => {
+        return text && (text / 1024).toFixed(2) + 'KB';
+      },
+    },
+    {
+      dataIndex: 'type',
+      title: '文件类型',
+      width: 80,
+    },
+    {
+      title: '上传日期',
+      dataIndex: 'time',
+      editRow: true,
+      width: 120,
+    },
+  ];
+}
+export function createActionColumn(handleRemove: Function): BasicColumn {
+  return {
+    width: 120,
+    title: t('component.upload.operating'),
+    dataIndex: 'action',
+    fixed: false,
+    customRender: ({ record }) => {
+      const actions: ActionItem[] = [
+        {
+          label: t('component.upload.del'),
+          icon: 'ic:outline-delete-outline',
+          color: 'error',
+          onClick: handleRemove.bind(null, record),
+        },
+      ];
+      // if (checkImgType(record)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
+      return <TableAction actions={actions} outside={true} />;
+    },
+  };
+}
+// 文件预览列表
+export function createPreviewColumns(): BasicColumn[] {
+  return [
+    {
+      dataIndex: 'url',
+      title: t('component.upload.legend'),
+      width: 100,
+      customRender: ({ record }) => {
+        const { url } = (record as PreviewFileItem) || {};
+        return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
+      },
+    },
+    {
+      dataIndex: 'name',
+      title: t('component.upload.fileName'),
+      align: 'left',
+    },
+  ];
+}
+
+export function createPreviewActionColumn(
+  handleRemove,
+  handlePreview,
+  handleDownload
+): BasicColumn {
+  return {
+    width: 100,
+    title: t('component.upload.operating'),
+    dataIndex: 'action',
+    fixed: false,
+    customRender: ({ record }) => {
+      // const { url } = (record || {}) as PreviewFileItem;
+
+      const actions: ActionItem[] = [
+        {
+          label: t('component.upload.preview'),
+          icon: 'ant-design:eye-outlined',
+          onClick: handlePreview.bind(null, record),
+        },
+        {
+          label: t('component.upload.del'),
+          color: 'error',
+          icon: 'ic:outline-delete-outline',
+          onClick: handleRemove.bind(null, record),
+        },
+        {
+          label: t('component.upload.download'),
+          color: 'success',
+          icon: 'ic:outline-download',
+          onClick: handleDownload.bind(null, record),
+        },
+      ];
+      // if (isImgTypeByName(url)) {
+      //   actions.unshift({
+      //     label: t('component.upload.preview'),
+      //     onClick: handlePreview.bind(null, record),
+      //   });
+      // }
+      return <TableAction actions={actions} outside={true} />;
+    },
+  };
+}

src/components/myData/upload.vue

@@ -0,0 +1,49 @@
+<template>
+    <BasicForm @register="register" class="my-5" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicUpload } from '/@/components/Upload';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { PageWrapper } from '/@/components/Page';
+  import { Alert } from 'ant-design-vue';
+
+  import { uploadApi } from '/@/api/sys/upload';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'field1',
+      component: 'Upload',
+      label: '',
+      colProps: {
+        span: 8,
+      },
+      rules: [{ required: true, message: '请选择上传文件' }],
+      componentProps: {
+        api: uploadApi,
+      },
+    },
+  ];
+  export default defineComponent({
+    components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert },
+    setup() {
+      const { createMessage } = useMessage();
+      const [register] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 16,
+        },
+      });
+      return {
+        handleChange: (list: string[]) => {
+          createMessage.info(`已上传文件${JSON.stringify(list)}`);
+        },
+        uploadApi,
+        register,
+      };
+    },
+  });
+</script>

src/views/table/attachment/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="p-4">
+    <BasicTable
+      ref="tableRef"
+      @register="registerTable"
+      :bordered="true"
+      rowKey="id"
+    >
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+      <!-- <template #action="{ record, column }">
+      </template> -->
+      <template #form-custom > custom-slot </template>
+
+      <template #toolbar>
+        <Upload>
+        <!-- action="http://localhost:8000/api/upload/" -->
+        <!-- method="POST" -->
+        <!-- :showUploadList="false" -->
+        <!-- class="upload-modal-toolbar__btn" -->
+        <a-button type="primary">
+           t('component.upload.uploadBtn')
+        </a-button>
+      </Upload>
+      </template>
+    </BasicTable>
+    <!-- <Model @register="addRegister" :modelData="modelData" /> -->
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, unref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { createTableColumns, createPreviewActionColumn } from '/@/components/myData/fileData';
+  import { FileItem } from '/@/components/Upload/src/types';
+  //  import { Upload, Alert } from 'ant-design-vue';
+  import Upload from '/@/components/myData/upload.vue'
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+    TableActionType
+  } from '/@/components/Table';
+
+
+  // const columns: BasicColumn[] = [
+  //   {
+  //     title: 'id',
+  //     dataIndex: 'id',
+  //     editRow: true,
+  //     // 默认必填校验
+  //     editRule: true,
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '姓名',
+  //     dataIndex: 'name',
+  //     edit: true, // 点击修改当前单元格
+  //     editComponentProps: {
+  //       prefix: '$',
+  //     },
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '地址',
+  //     dataIndex: 'addr',
+  //     editRow: true,
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '年龄',
+  //     dataIndex: 'age',
+  //     editRow: true,
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '开关',
+  //     dataIndex: 'name6',
+  //     editRow: true,
+  //     editComponent: 'Switch',
+  //     editValueMap: (value) => {
+  //       return value ? '开' : '关';
+  //     },
+  //     width: 200,
+  //   },
+  // ];
+
+  interface ModelData {
+    title: string,
+  }
+  export default defineComponent({
+    components: { BasicTable, TableAction, Upload },
+    setup() {
+       const modelData = reactive<ModelData>({
+        title: '',
+      })
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const currentEditKeyRef = ref('');
+      const [registerTable] = useTable({
+        title: "基础示例",
+        titleHelpMessage: "温馨提醒",
+        rowSelection: { type: 'checkbox' },
+        columns: createTableColumns(),
+        clickToRowSelect: false, // 点击行不勾选
+        // showTableSetting: true,
+        // columns: [{title:'Id',dataIndex:'id',width:150},{title:'姓名',dataIndex:'name',width:200},{title:'地址',dataIndex:'addr',width:250}],
+        dataSource: [{id:1,name:'文件1',thumbUrl:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1999921673,816131569&fm=26&gp=0.jpg', size: 1504},
+        {id:2,thumbUrl:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg',name:'未知', size: 351},{id:3,name:'文件2',addr:'未知地点', size: 155528}],
+        showIndexColumn: false,
+        actionColumn: createPreviewActionColumn(handleRemove, handleDownload),
+      });
+      const [addRegister, { openModal: openAdd }] = useModal();
+      const rowClick = (e: any) => {
+        console.log(e)
+      }
+
+      function getTableAction() { // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+
+       function getSelectRowList() { // 获取选中行
+        console.log(getTableAction().getSelectRows());
+      }
+      function getSelectRowKeyList() { // 获取选中行的key --- id
+        console.log(getTableAction().getSelectRowKeys());
+      }
+
+      function addColumn() {
+        modelData.title = '添加'
+        openAdd(true, {
+          name: '',
+          age: '',
+          addr: '',
+        });
+      }
+
+      function handleSubmit() {
+        console.log('handleSubmit')
+        // console.log(data)
+      }
+
+      function deleteSelect() {
+        console.log('删除选中行')
+        let data = getTableAction().getSelectRowKeys()
+        // console.log(getTableAction().getSelectRowKeys());
+        data.map((item) => {
+          console.log(item)
+        })
+      }
+
+
+
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        const pass = await record.onEdit?.(false, true);
+        console.log('------- 保存 ----------')
+        console.log(record)
+        console.log('------- 保存 ----------')
+        if (pass) {
+          currentEditKeyRef.value = '';
+        }
+      }
+
+       // 删除
+      function handleRemove(record: FileItem) {
+        console.log('点击了删除')
+        console.log(record)
+        console.log('点击了删除')
+      }
+
+       // 下载
+      function handleDownload(record: FileItem) {
+        console.log('点击了下载')
+        console.log(record)
+        console.log('点击了下载')
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log('点击了删除', record);
+        const data = getTableAction().getDataSource()
+        getTableAction().setTableData(data.filter(item => item.id !== record.id))
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          return [
+            {
+              label: '删除',
+              color: 'error',
+              icon: 'ic:outline-delete-outline',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ];
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+      return {
+        modelData,
+        // ...toRefs(state),
+        tableRef,
+        registerTable,
+        rowClick,
+        addColumn,
+        deleteSelect,
+        createActions,
+        getTableAction,
+        getSelectRowList,
+        getSelectRowKeyList,
+        addRegister,
+        handleSubmit
+
+      };
+    },
+  });
+</script>

src/views/table/editTable/model.vue

@@ -0,0 +1,116 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" @ok="confirm" :title="title">
+    <BasicForm @register="registerForm" :model="model" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, toRefs } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { adapt } from '/@/utils/adapt'
+
+
+  interface ModelData {
+    title: string
+  }
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+     modelData: {
+        type: Object as PropType<ModelData> ,
+        default: {},
+     }
+    },
+    setup(props) {
+      const modelRef = ref({});
+      const adaptWidth = adapt()
+      const modelData:ModelData = props.modelData
+      const schemas: FormSchema[] = [
+        {
+          field: 'name',
+          component: 'Input',
+          label: '姓名',
+          labelWidth: adaptWidth.labelWidth,
+          colProps: {
+            span: adaptWidth.elContainer,
+          }
+        },
+        {
+          field: 'age',
+          component: 'Input',
+          label: '年龄',
+          labelWidth: adaptWidth.labelWidth,
+          colProps: {
+            span: adaptWidth.elContainer,
+          }
+        },
+        {
+          field: 'addr',
+          component: 'Input',
+          label: '地址',
+          labelWidth: adaptWidth.labelWidth,
+
+          colProps: {
+            span: adaptWidth.elContainer,
+          },
+        },
+      ];
+
+      const [
+        registerForm,
+        {
+          getFieldsValue,
+          // setProps
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      const [register, { closeModal } ] = useModalInner((data) => {
+        // 方式1
+        // setFieldsValue({
+        //   field2: data.data,
+        //   field1: data.info,
+        // });
+
+        // 方式2
+        modelRef.value = { name: data.name, age: data.age, addr: data.addr };
+
+        // setProps({
+        //   model:{ field2: data.data, field1: data.info }
+        // })
+      });
+
+      function confirm() {
+        console.log('确定')
+        console.log(getFieldsValue())  // 表单数据
+
+        closeModal()  // 关闭弹窗
+      }
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        confirm,
+        adaptWidth,
+        ...toRefs(modelData)
+      };
+    },
+  });
+</script>
+<style lang='less'>
+.ant-form-item-label {
+  text-align: center !important;
+}
+@media (max-width: 639px) {
+  .ant-form-item-label {
+  line-height: 2.5715 !important;
+  text-align: center !important;
+ }
+}
+</style>

src/views/table/imageTable/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="p-4">
+    <BasicTable
+      ref="tableRef"
+      @register="registerTable"
+      :bordered="true"
+      rowKey="id"
+    >
+      <template #action="{ record, column }">
+        <TableAction :actions="createActions(record, column)" />
+      </template>
+      <!-- <template #action="{ record, column }">
+      </template> -->
+      <template #form-custom > custom-slot </template>
+
+      <template #toolbar>
+        <Upload>
+        <!-- action="http://localhost:8000/api/upload/" -->
+        <!-- method="POST" -->
+        <!-- :showUploadList="false" -->
+        <!-- class="upload-modal-toolbar__btn" -->
+        <a-button type="primary">
+          t('component.upload.uploadBtn')
+        </a-button>
+      </Upload>
+      </template>
+    </BasicTable>
+    <!-- <Model @register="addRegister" :modelData="modelData" /> -->
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, unref } from 'vue';
+  import { useModal } from '/@/components/Modal';
+  import { createTableColumns, createPreviewActionColumn } from '/@/components/myData/imageData';
+  import { FileItem } from '/@/components/Upload/src/types';
+  //  import { Upload, Alert } from 'ant-design-vue';
+  import Upload from '/@/components/myData/upload.vue'
+  import {
+    BasicTable,
+    useTable,
+    TableAction,
+    BasicColumn,
+    ActionItem,
+    EditRecordRow,
+    TableActionType,
+  } from '/@/components/Table';
+
+
+  // const columns: BasicColumn[] = [
+  //   {
+  //     title: 'id',
+  //     dataIndex: 'id',
+  //     editRow: true,
+  //     // 默认必填校验
+  //     editRule: true,
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '姓名',
+  //     dataIndex: 'name',
+  //     edit: true, // 点击修改当前单元格
+  //     editComponentProps: {
+  //       prefix: '$',
+  //     },
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '地址',
+  //     dataIndex: 'addr',
+  //     editRow: true,
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '年龄',
+  //     dataIndex: 'age',
+  //     editRow: true,
+  //     width: 200,
+  //   },
+  //   {
+  //     title: '开关',
+  //     dataIndex: 'name6',
+  //     editRow: true,
+  //     editComponent: 'Switch',
+  //     editValueMap: (value) => {
+  //       return value ? '开' : '关';
+  //     },
+  //     width: 200,
+  //   },
+  // ];
+
+  interface ModelData {
+    title: string,
+  }
+  export default defineComponent({
+    components: { BasicTable, TableAction, Upload },
+    setup() {
+       const modelData = reactive<ModelData>({
+        title: '',
+      })
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const currentEditKeyRef = ref('');
+      const [registerTable] = useTable({
+        title: "基础示例",
+        titleHelpMessage: "温馨提醒",
+        rowSelection: { type: 'checkbox' },
+        columns: createTableColumns(),
+        clickToRowSelect: false, // 点击行不勾选
+        // showTableSetting: true,
+        // columns: [{title:'Id',dataIndex:'id',width:150},{title:'姓名',dataIndex:'name',width:200},{title:'地址',dataIndex:'addr',width:250}],
+        dataSource: [{id:1,name:'图片1',thumbUrl:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1999921673,816131569&fm=26&gp=0.jpg', size: 205},
+        {id:2,thumbUrl:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg',name:'图片2', size: 342},{id:3,name:'图片3',thumbUrl:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg', size: 18}],
+        showIndexColumn: false,
+        actionColumn: createPreviewActionColumn(handleRemove, handlePreview, handleDownload),
+      });
+      const [addRegister] = useModal();
+      const rowClick = (e: any) => {
+        console.log(e)
+      }
+
+      function getTableAction() { // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+
+       function getSelectRowList() { // 获取选中行
+        console.log(getTableAction().getSelectRows());
+      }
+      function getSelectRowKeyList() { // 获取选中行的key --- id
+        console.log(getTableAction().getSelectRowKeys());
+      }
+
+
+
+      function handleSubmit() {
+        console.log('handleSubmit')
+        // console.log(data)
+      }
+
+      function deleteSelect() {
+        console.log('删除选中行')
+        let data = getTableAction().getSelectRowKeys()
+        // console.log(getTableAction().getSelectRowKeys());
+        data.map((item) => {
+          console.log(item)
+        })
+      }
+
+
+
+
+      function handleCancel(record: EditRecordRow) {
+        currentEditKeyRef.value = '';
+        record.onEdit?.(false, false);
+      }
+
+      async function handleSave(record: EditRecordRow) {
+        const pass = await record.onEdit?.(false, true);
+        console.log('------- 保存 ----------')
+        console.log(record)
+        console.log('------- 保存 ----------')
+        if (pass) {
+          currentEditKeyRef.value = '';
+        }
+      }
+
+       // 删除
+      function handleRemove(record: FileItem) {
+        console.log('点击了删除')
+        console.log(record)
+        console.log('点击了删除')
+      }
+      // 预览
+       function handlePreview(record: FileItem) {
+        // const { thumbUrl = '' } = record;
+        // createImgPreview({
+        //   imageList: [thumbUrl],
+        // });
+        console.log(record)
+      }
+       // 下载
+      function handleDownload(record: FileItem) {
+        console.log('点击了下载')
+        console.log(record)
+        console.log('点击了下载')
+      }
+
+      function handleDelete(record: Recordable) {
+        console.log('点击了删除', record);
+        const data = getTableAction().getDataSource()
+        getTableAction().setTableData(data.filter(item => item.id !== record.id))
+      }
+
+      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+        if (!record.editable) {
+          return [
+            {
+              label: '删除',
+              color: 'error',
+              icon: 'ic:outline-delete-outline',
+              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ];
+        }
+        return [
+          {
+            label: '保存',
+            onClick: handleSave.bind(null, record, column),
+          },
+          {
+            label: '取消',
+            popConfirm: {
+              title: '是否取消编辑',
+              confirm: handleCancel.bind(null, record, column),
+            },
+          },
+        ];
+      }
+      return {
+        modelData,
+        // ...toRefs(state),
+        tableRef,
+        registerTable,
+        rowClick,
+        deleteSelect,
+        createActions,
+        getTableAction,
+        getSelectRowList,
+        getSelectRowKeyList,
+        addRegister,
+        handleSubmit
+
+      };
+    },
+  });
+</script>