修改sql开发页面样式 添加功能

src/views/scriptDevelopment/shellDevelopment/shellExecute/shellExecute.vue

@@ -11,76 +11,78 @@
     <div class="w-3/4 xl:w-4/5" style="padding-top: 20px">
       <BasicForm @register="registerForm">
         <template #formFooter>
-          <!--          新窗口运行-->
-          <Tooltip placement="top" title="新窗口运行">
-            <a-button
-              type="primary"
-              style="margin-right: 10px; margin-left: 500px"
-              @click="handleExecute"
-            >
-              <Icon icon="si:play-forward-duotone" :size="20" />
-            </a-button>
-          </Tooltip>
+          <div style="display: flex; justify-content: space-between">
+            <!--          新窗口运行-->
+            <Tooltip placement="top" title="新窗口运行">
+              <a-button
+                type="primary"
+                style="margin-right: 10px; margin-left: 500px"
+                @click="handleExecute"
+              >
+                <Icon icon="si:play-forward-duotone" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          运行-->
-          <Tooltip placement="top" title="运行">
-            <a-button type="primary" style="margin-right: 10px" @click="handleExecute">
-              <Icon icon="si:play-line" :size="20" />
-            </a-button>
-          </Tooltip>
+            <!--          运行-->
+            <Tooltip placement="top" title="运行">
+              <a-button type="primary" style="margin-right: 10px" @click="handleExecute">
+                <Icon icon="si:play-line" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          执行记录-->
-          <Tooltip placement="top" title="执行记录">
-            <a-button type="primary" style="margin-right: 10px" @click="handleRecord">
-              <Icon icon="si:clock-alt-line" :size="20" />
-            </a-button>
-          </Tooltip>
+            <!--          执行记录-->
+            <Tooltip placement="top" title="执行记录">
+              <a-button type="primary" style="margin-right: 10px" @click="handleRecord">
+                <Icon icon="si:clock-alt-line" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          提交版本-->
-          <Tooltip placement="top" title="提交版本">
-            <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
-              <Icon icon="majesticons:cloud-upload-line" :size="20" />
-            </a-button>
-          </Tooltip>
+            <!--          提交版本-->
+            <Tooltip placement="top" title="提交版本">
+              <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
+                <Icon icon="majesticons:cloud-upload-line" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          版本管理-->
-          <Tooltip placement="top" title="版本管理">
-            <a-button type="primary" style="margin-right: 10px" @click="handleVersion">
-              <Icon icon="majesticons:file-search-line" :size="20" />
-            </a-button>
-          </Tooltip>
+            <!--          版本管理-->
+            <Tooltip placement="top" title="版本管理">
+              <a-button type="primary" style="margin-right: 10px" @click="handleVersion">
+                <Icon icon="majesticons:file-search-line" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          参数配置-->
-          <Tooltip placement="top" title="参数配置">
-            <a-button type="primary" style="margin-right: 10px" @click="handleOptions">
-              <Icon icon="majesticons:link-circle-line" :size="20" />
-            </a-button>
-          </Tooltip>
+            <!--          参数配置-->
+            <Tooltip placement="top" title="参数配置">
+              <a-button type="primary" style="margin-right: 10px" @click="handleOptions">
+                <Icon icon="majesticons:link-circle-line" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          格式化-->
-          <Tooltip placement="top" title="格式化">
-            <a-button type="primary" style="margin-right: 10px" @click="handleChange">
-              <Icon icon="gg:align-left" :size="20" />
-            </a-button>
-          </Tooltip>
+            <!--          格式化-->
+            <Tooltip placement="top" title="格式化">
+              <a-button type="primary" style="margin-right: 10px" @click="handleChange">
+                <Icon icon="gg:align-left" :size="20" />
+              </a-button>
+            </Tooltip>
 
-          <!--          保存-->
-          <Tooltip placement="top" title="保存">
-            <a-button type="primary" style="margin-right: 10px" @click="handleSave">
-              <Icon icon="majesticons:save-line" :size="20" />
-            </a-button>
-          </Tooltip>
-          <Tooltip
-            placement="top"
-            :title="layout === 'single' ? '切换到对比布局' : '切换到单文件布局'"
-          >
-            <a-button type="primary" style="margin-right: 10px" @click="toggleLayout">
-              <Icon
-                :icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'"
-                :size="20"
-              />
-            </a-button>
-          </Tooltip>
+            <!--          保存-->
+            <Tooltip placement="top" title="保存">
+              <a-button type="primary" style="margin-right: 10px" @click="handleSave">
+                <Icon icon="majesticons:save-line" :size="20" />
+              </a-button>
+            </Tooltip>
+            <Tooltip
+              placement="top"
+              :title="layout === 'single' ? '切换到对比布局' : '切换到单文件布局'"
+            >
+              <a-button type="primary" style="margin-right: 10px" @click="toggleLayout">
+                <Icon
+                  :icon="layout === 'single' ? 'majesticons:user-line' : 'majesticons:users-line'"
+                  :size="20"
+                />
+              </a-button>
+            </Tooltip>
+          </div>
         </template>
       </BasicForm>
       <div>
@@ -88,11 +90,23 @@
           <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
         </div>
         <div v-else class="editor-container">
-          <div class="editor-left" ref="editorLeft">
-            <CodeEditor v-model:value="jsonDataLeft" :mode="MODE.JSON" />
-          </div>
-          <div class="editor-right" ref="editorRight">
-            <CodeEditor v-model:value="jsonDataRight" :mode="MODE.JSON" />
+          <div class="editor-wrapper" style="height: 600px">
+            <div
+              class="editor-left"
+              ref="editorLeft"
+              style="display: inline-block; width: 50%"
+              :scrollbar="false"
+            >
+              <CodeEditor v-model:value="jsonDataLeft" :mode="MODE.JSON" />
+            </div>
+            <div
+              class="editor-right"
+              ref="editorRight"
+              style="display: inline-block; width: 50%"
+              :scrollbar="false"
+            >
+              <CodeEditor v-model:value="jsonDataRight" :mode="MODE.JSON" />
+            </div>
           </div>
         </div>
       </div>
@@ -234,12 +248,12 @@
   .editor-left {
     flex: 1;
     height: 100%;
-    overflow-y: auto;
+    overflow-y: hidden;
   }
 
   .editor-right {
     flex: 1;
     height: 100%;
-    overflow-y: auto;
+    overflow-y: hidden;
   }
 </style>

src/views/scriptDevelopment/sqlDevelopment/importModal/importModal.vue

+<template>
+  <BasicModal
+    width="35%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #fileMethods="{ model, field }">
+        <div style="display: flex">
+          <div>
+            <a-button>下载模板</a-button>
+            <a-button type="primary" style="margin-left: 5px">选择文件</a-button>
+          </div>
+          <div style="width: 200px; margin-top: 6px; margin-left: 5px"
+            >数据质量只能导入单个zip文件</div
+          >
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { importFormSchema } from './tempalte.data';
+  import {onMountedOrActivated} from "@vben/hooks";
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: importFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  // onMounted(){}
+
+
+  // const getTitle = computed(() => '新建文件');
+  const getTitle = '导入文件选择';
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>

src/views/scriptDevelopment/sqlDevelopment/importModal/tempalte.data.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '数据源',
+    dataIndex: 'dataSource',
+    slots: { customRender: 'dataSource' },
+    width: 150,
+  },
+  {
+    title: '模板编号',
+    dataIndex: 'templateNumber',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 150,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 150,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 100,
+  },
+  {
+    title: '权属工作组',
+    dataIndex: 'workgroup',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+  },
+];
+
+/**移动*/
+export const MoveFormSchema: any[] = [
+  {
+    field: 'taskId',
+    label: '路径',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      // border: 'none',
+      fieldNames: {
+        label: 'QualityName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+];
+
+export const formSchemaNewFolder: any = [
+  {
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
+    componentProps: {
+      fieldNames: {
+        label: 'QualityName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  {
+    field: 'name',
+    label: '文件夹名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入文件夹名称',
+    },
+  },
+  {
+    field: 'fileType',
+    label: '权限模式',
+    component: 'RadioGroup',
+    defaultValue: '本级定义',
+    colProps: { span: 8 },
+    componentProps: {
+      options: [
+        { label: '本级定义', value: '本级定义' },
+        { label: '资源自定义', value: '资源自定义' },
+      ],
+      placeholder: '输入描述',
+    },
+  },
+  {
+    field: 'group',
+    label: '权属工作组',
+    component: 'Select',
+    defaultValue: '默认工作组',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入描述',
+      options: [{ label: '默认工作组', value: '默认工作组' }],
+    },
+  },
+];
+
+export const formSchemaTemplate: any = [
+  {
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
+    componentProps: {
+      fieldNames: {
+        label: 'QualityName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  {
+    field: 'name',
+    label: '文件名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入文件夹名称',
+    },
+    required: true,
+  },
+  {
+    field: 'fileType',
+    label: '文件类型',
+    component: 'Input',
+    defaultValue: '质量模板',
+    colProps: { span: 8 },
+    componentProps: {
+      readonly: true,
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  {
+    field: 'dataSource',
+    label: '支持数据源',
+    component: 'Select',
+    colProps: { span: 8 },
+    componentProps: {
+      mode: 'multiple',
+      options: [
+        { label: 'INCEPTOR', value: 'INCEPTOR' },
+        { label: 'IMPALA', value: 'IMPALA' },
+        { label: 'MYSQL', value: 'MYSQL' },
+      ],
+    },
+    required: true,
+  },
+  {
+    field: 'model',
+    label: '目录权属模式',
+    component: 'RadioGroup',
+    defaultValue: '本级定义',
+    colProps: { span: 8 },
+    componentProps: {
+      options: [
+        { label: '本级定义', value: '本级定义' },
+        { label: '资源自定义', value: '资源自定义' },
+      ],
+    },
+  },
+  {
+    field: 'group',
+    label: '权属工作组',
+    component: 'Select',
+    defaultValue: '默认工作组',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入描述',
+      options: [{ label: '默认工作组', value: '默认工作组' }],
+    },
+  },
+];
+export const importFormSchema: any[] = [
+  {
+    field: 'fileMethods',
+    label: '导入文件选择',
+    slot: 'fileMethods',
+    colProps: { lg: 24, md: 24, offset: 3 },
+  },
+  {
+    field: 'fileRename',
+    label: '文件重名',
+    component: 'RadioGroup',
+    required: true,
+    colProps: { lg: 24, md: 24, offset: 3 },
+    componentProps: {
+      options: [
+        { label: '全部放弃', value: '1' },
+        { label: '全部替换', value: '2' },
+        { label: '自动重命名', value: '3' },
+      ],
+    },
+  },
+];

src/views/scriptDevelopment/sqlDevelopment/index.vue

@@ -4,23 +4,41 @@
       <DataTree @select="handleSelect" style="height: 50%" />
       <GroupTree @select="handleGroupSelect" style="height: 50%" />
     </div>
-    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo" />
+    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          type="primary"
+          @click="handleExport"
+          >导出</a-button
+        >
+        <a-button type="primary" @click="handleImport">导入</a-button></template
+      >
+    </BasicTable>
+    <importModal @register="registerImport" @success="handleImportSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { reactive, onMounted } from 'vue';
   import { BasicTable, useTable } from '@/components/Table';
+  import { getRoleListByPage, deleteById, exportRoleList } from '@/api/system/role/role';
   import { PageWrapper } from '@/components/Page';
+  import { useModal } from '@/components/Modal';
   import DataTree from './DataTree.vue';
   import GroupTree from './GroupTree.vue';
   import { DataTreeData } from './sqlDevelopmentData';
   import { columns, searchFormSchema } from './data';
+  import importModal from './importModal/importModal.vue';
   import { router } from '@/router';
+  import { downloadByData } from '@/utils/file/download';
 
   defineOptions({ name: 'AccountManagement' });
-
+  const [registerImport, { openModal: openImportModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
-  const [registerTable, { reload, getSearchInfo, getForm }] = useTable({
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
     title: 'SQL文件',
     api: async (params) => {
       const response = {
@@ -46,6 +64,9 @@
     },
     columns,
     showIndexColumn: false,
+    rowSelection: {
+      type: 'checkbox',
+    },
     formConfig: {
       labelWidth: 10,
       schemas: searchFormSchema,
@@ -61,7 +82,23 @@
       return info;
     },
   });
+  /** 导出按钮*/
+  async function handleExport() {
+    console.log('导出----');
+    const params = Object.assign({}, getForm().getFieldsValue());
+    const data = await exportRoleList(params);
+    downloadByData(data, 'sql文件' + '.sql');
+  }
 
+  /** 导入成功*/
+  function handleImportSuccess() {
+    reload();
+  }
+
+  /** 导入按钮*/
+  function handleImport() {
+    openImportModal(true, {});
+  }
   /** 部门树的select*/
   function handleSelect(workSpaceName = '') {
     searchInfo.res = workSpaceName;

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/sqlExecute.vue

@@ -11,42 +11,66 @@
     <div class="w-3/4 xl:w-4/5" style="padding-top: 20px">
       <BasicForm @register="registerForm">
         <template #formFooter>
-          <!--          新窗口运行-->
-          <a-button
-            type="primary"
-            style="margin-right: 10px; margin-left: 500px"
-            @click="handleExecute"
-          >
-            <Icon icon="si:play-forward-duotone" :size="20"
-          /></a-button>
-          <!--          运行-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleExecute"
-            ><Icon icon="si:play-line" :size="20"
-          /></a-button>
-          <!--          执行记录-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleRecord"
-            ><Icon icon="si:clock-alt-line" :size="20"
-          /></a-button>
-          <!--          提交版本-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
-            ><Icon icon="majesticons:file-plus-line" :size="20"
-          /></a-button>
-          <!--          版本管理-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
-            ><Icon icon="majesticons:file-line" :size="20"
-          /></a-button>
-          <!--          参数配置-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleOptions"
-            ><Icon icon="majesticons:link-circle-line" :size="20"
-          /></a-button>
-          <!--          格式化-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleChange"
-            ><Icon icon="gg:align-left" :size="20"
-          /></a-button>
-          <!--          保存-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
-            ><Icon icon="majesticons:save-line" :size="20"
-          /></a-button>
+          <div style="display: flex; justify-content: space-between">
+            <!--          新窗口运行-->
+            <Tooltip placement="top" title="新窗口运行">
+              <a-button
+                type="primary"
+                style="margin-right: 10px; margin-left: 500px"
+                @click="handleExecute"
+              >
+                <Icon icon="si:play-forward-duotone" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          运行-->
+            <Tooltip placement="top" title="运行">
+              <a-button type="primary" style="margin-right: 10px" @click="handleExecute">
+                <Icon icon="si:play-line" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          执行记录-->
+            <Tooltip placement="top" title="执行记录">
+              <a-button type="primary" style="margin-right: 10px" @click="handleRecord">
+                <Icon icon="si:clock-alt-line" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          提交版本-->
+            <Tooltip placement="top" title="提交版本">
+              <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
+                <Icon icon="majesticons:file-plus-line" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          版本管理-->
+            <Tooltip placement="top" title="版本管理">
+              <a-button type="primary" style="margin-right: 10px" @click="handleVersion">
+                <Icon icon="majesticons:file-search-line" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          参数配置-->
+            <Tooltip placement="top" title="参数配置">
+              <a-button type="primary" style="margin-right: 10px" @click="handleOptions">
+                <Icon icon="majesticons:link-circle-line" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          格式化-->
+            <Tooltip placement="top" title="格式化">
+              <a-button type="primary" style="margin-right: 10px" @click="handleChange">
+                <Icon icon="gg:align-left" :size="20" />
+              </a-button>
+            </Tooltip>
+
+            <!--          保存-->
+            <Tooltip placement="top" title="保存">
+              <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
+                <Icon icon="majesticons:save-line" :size="20" />
+              </a-button> </Tooltip
+          ></div>
         </template>
       </BasicForm>
       <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />
@@ -55,10 +79,12 @@
     <resultModal @register="registerResultModal" />
     <PreviewModal @register="registerPreviewModal" />
     <RecordModal @register="registerRecordModal" />
+    <versionManagementModal @register="registerVersionManagementModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { ref, nextTick, watch, onMounted } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import GroupTree from '../GroupTree.vue';
   import { jsonData } from '../sqlDevelopmentData';
@@ -73,6 +99,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import Icon from '@/components/Icon/Icon.vue';
   import RecordModal from './executeRecordModal.vue';
+  import versionManagementModal from './versionManagementModal.vue';
 
   defineOptions({ name: 'AccountManagement' });
 
@@ -81,6 +108,7 @@
   const [registerModal, { openModal }] = useModal();
   const [registerResultModal, { openModal: openResultModal }] = useModal();
   const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+  const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
   const [registerRecordModal, { openModal: openRecordModal }] = useModal();
   const [registerForm] = useForm({
     labelWidth: 100,
@@ -109,6 +137,11 @@
       title: '执行记录',
     });
   }
+  function handleVersion() {
+    openVersionManagementModal(true, {
+      title: '版本管理',
+    });
+  }
   function handleSubmit() {
     createMessage.success('保存成功');
   }

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/version.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { DescItem } from '@/components/Description';
+
+export const versionColumns: BasicColumn[] = [
+  {
+    title: '版本标题',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '上传日期',
+    dataIndex: 'uploadDate',
+    width: 120,
+  },
+  {
+    title: '副标题',
+    dataIndex: 'subTitle',
+    width: 120,
+  },
+];
+export const versionSchema = [
+  {
+    name: 'V1',
+    uploadDate: '2022/01/01 12:24:22',
+    subTitle: 'v21',
+  },
+  {
+    name: 'V2',
+    uploadDate: '2022/01/02 13:30:00',
+    subTitle: 'v22',
+  },
+];

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/versionManagementModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <div style="display: flex">
+      <div class="w-full">
+        <BasicTable @register="registerTable">
+          <template #toolbar> </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ant-design:eye-outlined',
+                    tooltip: '查看详情',
+                    onClick: handleDetail,
+                  },
+                  {
+                    icon: 'ant-design:edit-outlined',
+                    tooltip: '编辑',
+                    onClick: modEdit,
+                  },
+                  {
+                    icon: 'ant-design:rollback-outlined',
+                    tooltip: '回退版本',
+                    popConfirm: {
+                      title: '是否确认回退版本',
+                      confirm: handleVersionRollback,
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { versionColumns, versionSchema } from './version.data';
+  import { message } from 'ant-design-vue';
+
+  const title = ref();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+  const [registerTable] = useTable({
+    dataSource: versionSchema,
+    columns: versionColumns,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+
+    showIndexColumn: false,
+  });
+  function handleDetail() {
+    console.log('查看详情');
+    closeModal();
+  }
+  function modEdit() {
+    console.log('编辑');
+    closeModal();
+  }
+  function handleVersionRollback() {
+    message.success('回退成功');
+    closeModal();
+  }
+  async function handleSubmit() {
+    closeModal();
+  }
+  onMounted(() => {});
+</script>