commit: 创建定义数据路链接

@@ -13,6 +13,10 @@ enum API {
   UPLOAD = '/oss/upload',
   //大屏公共接口
   DATA_VIEW_INTERFACE = '/data_view_interface',
+  DATA_VIEW_SQL = '/dbConnect',
+  DATA_SAVE_SQL = '/dbConnect/save',
+  DATA_DELETE_SQL = '/dbConnect/delete',
+  DATA_GET_SQL = '/dbConnect/get',
 
   SHARE = '/data_view/share',
 }
@@ -68,6 +72,27 @@ export const bigScreenCancelPublish = (id) => {
  * 大屏公共接口
  */
 
+export const getDataViewSqlPage = (params: queryPageParams) => {
+  return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_SQL);
+};
+export const saveDataViewSql = (params: BigScreenInterfaceParams) => {
+  return defHttp.post({
+    url: API.DATA_SAVE_SQL,
+    data: params,
+  });
+};
+export const deleteBigViewSql = (id: string) => {
+  return defHttp.get({
+    url: API.DATA_DELETE_SQL + '?id=' + id,
+  });
+};
+
+export const getBigViewSql = (id: string) => {
+  return defHttp.get({
+    url: API.DATA_GET_SQL + '?id=' + id,
+  });
+};
+
 export const getDataViewInterfacePage = (params: queryPageParams) => {
   return getPageData<BigScreenCenterItemsModel>(params, API.DATA_VIEW_INTERFACE);
 };

@@ -3,6 +3,7 @@ export default {
   buttonAddName: '新增大屏',
   buttonEditName: '编辑大屏',
   buttonManagement: '公共接口管理',
+  sqlManagement: '定义数据链接',
   textPreview: '预览',
   textCopyLink: '点击复制分享链接',
   textPublishStatus: '发布状态',
@@ -17,6 +18,25 @@ export default {
   isShareText: '公开性',
   shareAccess: '访问凭证',
 
+  // sql管理
+  sqlTitle: '定义数据链接页',
+  sqlName: '数据库名称',
+  sqlType: '数据库类型',
+  postName: '自定义数据库名称',
+  ipText: '主机IP',
+  portText: '端口号',
+  sqlAdd: '新增数据库连接',
+  username: '用户名',
+  password: '密码',
+  publicKey: '公钥',
+  privateKey: '私钥',
+  sshSetting: '使用SSH通道',
+  verifyMethod: '验证方法',
+  maxPoolSize: '最大链接数',
+  connectTimeout: '最大链接时间(毫秒)',
+  connectTestQuery: '校验语句',
+  minIdle: '最小空闲连接数',
+
   // 公共接口管理页
   publicTitle: '公共接口管理页',
   publicView: '查看',

@@ -22,6 +22,7 @@
   import { AuthIcon } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
   import { PublicApiDrawer } from './publicApi/index';
+  import { SqlApiDrawer } from './sqlApi/index';
   import { useModal } from '/@/components/Modal';
   import { ShareModal } from '/@/views/common/ShareModal';
   import { ViewTypeEnum } from '../common/ShareModal/config';
@@ -63,6 +64,7 @@
   const [registerDrawer, { openDrawer }] = useDrawer();
 
   const [registerPublicDrawer, { openDrawer: openPublicApiDrawer }] = useDrawer();
+  const [registerSqlDrawer, { openDrawer: openSqlApiDrawer }] = useDrawer();
 
   const { createMessage } = useMessage();
 
@@ -82,6 +84,7 @@
   };
 
   const handleCreateOrUpdatePublicApi = () => openPublicApiDrawer(true);
+  const handleCreateOrUpdateSqlApi = () => openSqlApiDrawer(true);
 
   const { largeDesignerPrefix } = useGlobSetting();
 
@@ -168,6 +171,14 @@
               t('visual.dataview.buttonManagement')
             }}</Button>
           </Authority>
+          <Authority
+            v-if="hasPublicInterfacePermission"
+            :value="ConfigurationPermission.PUBLISH_INTERFACE"
+          >
+            <Button type="primary" @click="handleCreateOrUpdateSqlApi()">{{
+              t('visual.dataview.sqlManagement')
+            }}</Button>
+          </Authority>
         </section>
       </template>
       <template #renderItem="{ item }: BasicCardListRenderItem<BigScreenCenterItemsModel>">
@@ -290,6 +301,7 @@
     <ShareModal @register="registerShareModal" :shareApi="shareLargeScreen" @success="reload()" />
     <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
     <PublicApiDrawer @register="registerPublicDrawer" />
+    <SqlApiDrawer @register="registerSqlDrawer" />
   </PageWrapper>
 </template>
 

+import {FormSchema} from "/@/components/Form";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {BasicColumn} from "/@/components/Table";
+const { t } = useI18n();
+import {uploadThumbnail} from "/@/api/configuration/center/configurationCenter";
+import { FileItem } from '/@/components/Upload/src/typing';
+import {createImgPreview} from "/@/components/Preview";
+// 类型定义
+// type JDBCPatterns = Record<string, RegExp>;
+
+// URL生成器（可复用）
+// const generateJdbcUrl = (
+//   type: string,
+//   ip: string,
+//   port: string,
+//   dbName: string
+// ): string => {
+//   const connectors: Record<string, string> = {
+//     MySql: `jdbc:mysql://${ip}:${port}/${dbName}`,
+//     SQLServer: `jdbc:sqlserver://${ip}:${port};databaseName=${dbName}`,
+//     Postgresql: `jdbc:postgresql://${ip}:${port}/${dbName}`,
+//     Oracle: `jdbc:oracle:thin:@${ip}:${port}:${dbName}`
+//   };
+//   return connectors[type] || '';
+// };
+
+const typeOptions = [
+  {
+    label: 'MySql',
+    value: 'MySql',
+  },
+  {
+    label: 'Postgresql',
+    value: 'Postgresql',
+  },
+  {
+    label: 'Oracle',
+    value: 'Oracle',
+  },
+  {
+    label: 'SQLServer',
+    value: 'SQLServer',
+  },
+]
+
+export const schemas = (): FormSchema[] => {
+  // const { isPlatformAdmin, isSysadmin } = useRole();
+  return [
+    {
+      field: 'name',
+      label: t('visual.dataview.postName'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: t('common.inputText') + t('visual.dataview.postName'),
+      },
+    },
+    {
+      field: 'type',
+      label: t('visual.dataview.sqlType'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Select',
+      componentProps: {
+        options: typeOptions,
+        placeholder: t('common.chooseText') + t('visual.dataview.sqlType'),
+      },
+    },
+    {
+      field: 'ip',
+      label: t('visual.dataview.ipText'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.ipText'),
+      },
+    },
+    {
+      field: 'port',
+      label: t('visual.dataview.portText'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.portText'),
+      },
+    },
+    {
+      field: 'dbName',
+      label: t('visual.dataview.sqlName'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.sqlName'),
+      },
+    },
+    {
+      field: 'userName',
+      label: t('visual.dataview.username'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.username'),
+      },
+    },
+    {
+      field: 'password',
+      label: t('visual.dataview.password'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.password'),
+      },
+    },
+    {
+      field: 'url',
+      label: 'URL',
+      colProps: {span: 24},
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + 'URL',
+      },
+    },
+    // {
+    //   field: 'url',
+    //   label: 'URL',
+    //   colProps: { span: 24 },
+    //   required: true,
+    //   component: 'Input',
+    //   componentProps: ({ formModel }) => ({
+    //     placeholder: t('common.inputText') + 'URL',
+    //     // 自动组合值
+    //     defaultValue: '666',
+    //     // 允许手动输入
+    //     allowInput: true,
+    //     // 双向绑定更新
+    //     onChange: (e: ChangeEvent) => {
+    //       const [port = '', dbName = ''] = e.target.value.split('/');
+    //       formModel.port = port;
+    //       formModel.dbName = dbName;
+    //     }
+    //   }),
+    //   // // 表单值处理
+    //   // dynamicValue: (values) =>
+    //   //   `${values.port || ''}/${values.dbName || ''}`.replace(/\/$/, ''),
+    //   // 自动更新规则
+    //   dependencies: ['port', 'dbName']
+    // },
+    // {
+    //   field: 'url',
+    //   label: 'URL',
+    //   component: 'Input',
+    //   required: true,
+    //   colProps: { span: 24 },
+    //   componentProps: ({ formModel }) => {
+    //     console.log(formModel,'formModel')
+    //     // 在函数体内计算URL
+    //     let generatedUrl = '';
+    //     if (formModel.type) {
+    //       switch (formModel.type) {
+    //         case 'MySql':
+    //           generatedUrl = `jdbc:mysql://${formModel.ip}:${formModel.port}/${formModel.dbName}`;
+    //           break;
+    //         case 'SQLServer':
+    //           generatedUrl = `jdbc:sqlserver://${formModel.ip}:${formModel.port};databaseName=${formModel.dbName}`;
+    //           break;
+    //         case 'Postgresql':
+    //           generatedUrl = `jdbc:postgresql://${formModel.ip}:${formModel.port}/${formModel.dbName}`;
+    //           break;
+    //         case 'Oracle':
+    //           generatedUrl = `jdbc:oracle:thin:@${formModel.ip}:${formModel.port}:${formModel.dbName}`;
+    //           break;
+    //         default:
+    //           generatedUrl = '';
+    //       }
+    //     }
+    //     console.log(generatedUrl,'generatedUrl')
+    //     return {
+    //       placeholder: t('common.inputText') + 'URL',
+    //       value: generatedUrl,
+    //       allowInput: true,
+    //       // 添加输入提示
+    //       title: '可手动修改URL，格式需符合当前数据库类型要求',
+    //       // 更智能的逆向解析（需要根据不同类型处理）
+    //       onChange: (e: ChangeEvent) => {
+    //         const manualUrl = e.target.value;
+    //         // 解析逻辑需要根据不同类型处理（此处以MySQL为例）
+    //         if (formModel.type === 'MySql') {
+    //           const matches = manualUrl.match(/jdbc:mysql:\/\/(.+):(\d+)\/(.+)/);
+    //           if (matches) {
+    //             formModel.ip = matches[1];
+    //             formModel.port = matches[2];
+    //             formModel.dbName = matches[3];
+    //           }
+    //         }
+    //         // 其他类型需要单独处理...
+    //       }
+    //     };
+    //   },
+    //   // 声明依赖字段
+    //   dependencies: ['type', 'ip', 'port', 'dbName'],
+    //
+    // },
+    {
+      field: 'openSsh',
+      label: t('visual.dataview.sshSetting'),
+      colProps: { span: 24 },
+      component: 'Checkbox',
+    },
+    {
+      field: 'ssh_ip',
+      label: t('visual.dataview.ipText'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.ipText'),
+      },
+      ifShow: ({ values }) => values['openSsh'],
+
+    },
+    {
+      field: 'ssh_port',
+      label: t('visual.dataview.portText'),
+      colProps: { span: 24 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.portText'),
+      },
+      ifShow: ({ values }) => values['openSsh'],
+    },
+    {
+      field: 'ssh_sshName',
+      label: t('visual.dataview.username'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'Input',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.username'),
+      },
+      ifShow: ({ values }) => values['openSsh'],
+    },
+    {
+      field: 'ssh_verifyMethod',
+      label: t('visual.dataview.verifyMethod'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: t('visual.dataview.password'),
+            value: 'PASSWORD',
+          },
+          {
+            label: t('visual.dataview.publicKey'),
+            value: 'PUBLIC_KEY',
+          },
+        ],
+        placeholder: t('common.chooseText') + t('visual.dataview.verifyMethod'),
+      },
+      ifShow: ({ values }) => values['openSsh'],
+    },
+    {
+      field: 'ssh_privateKey',
+      label: t('visual.dataview.privateKey'),
+      component: 'ApiUpload',
+      changeEvent: 'update:fileList',
+      valueField: 'fileList',
+      componentProps: ({ formModel }) => {
+        return {
+          listType: 'text',
+          maxFileLimit: 1,
+          accept: '.txt,.doc,.docx,.xls,.xlsx',
+          api: async (file: File) => {
+            try {
+              const formData = new FormData();
+              formData.set('file', file);
+              const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+              return {
+                uid: fileStaticUri,
+                name: fileName,
+                url: fileStaticUri,
+              };
+            } catch (error) {
+              return {};
+            }
+          },
+          // showUploadList: true,
+          onDownload() {},
+          onPreview: (fileList: FileItem) => {
+            //@ts-ignore
+            createImgPreview({ imageList: [fileList.url!] });
+          },
+          onDelete(url: string) {
+            formModel.deleteLogoUrl = url!;
+          },
+        };
+      },
+      colProps: { span: 12 },
+      required: true,
+      ifShow: ({ values }) => values['ssh_verifyMethod'] === 'PUBLIC_KEY' && values['openSsh'],
+    },
+    {
+      field: 'ssh_sshPassword',
+      label: t('visual.dataview.password'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: t('common.inputText') + t('visual.dataview.password'),
+      },
+      ifShow: ({ values }) => values['openSsh'],
+    },
+    {
+      field: 'maxPoolSize',
+      label: t('visual.dataview.maxPoolSize'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'InputNumber',
+      componentProps: {
+        style: { width: '100%' },
+        placeholder: t('common.chooseText') + t('visual.dataview.maxPoolSize'),
+      },
+    },
+    {
+      field: 'connectTestQuery',
+      label: t('visual.dataview.connectTestQuery'),
+      colProps: { span: 12 },
+      component: 'Input',
+      componentProps: {
+        placeholder: '为空使用默认语句',
+      },
+    },
+    {
+      field: 'connectTimeout',
+      label: t('visual.dataview.connectTimeout'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'InputNumber',
+      componentProps: {
+        style: { width: '100%' },
+        placeholder: t('common.chooseText') + t('visual.dataview.connectTimeout'),
+      },
+    },
+    {
+      field: 'minIdle',
+      label: t('visual.dataview.minIdle'),
+      colProps: { span: 12 },
+      required: true,
+      component: 'InputNumber',
+      componentProps: {
+        style: { width: '100%' },
+        placeholder: t('common.chooseText') + t('visual.dataview.minIdle'),
+      },
+    },
+]
+}
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: t('visual.dataview.postName'),
+    component: 'Input',
+    componentProps: {
+      maxLength: 36,
+      placeholder: t('common.inputText') + t('visual.dataview.postName'),
+    },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: t('visual.dataview.postName'),
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: t('visual.dataview.sqlName'),
+    dataIndex: 'dbName',
+    width: 150,
+  },
+  {
+    title: t('visual.dataview.sqlType'),
+    dataIndex: 'type',
+    width: 80,
+  },
+  {
+    title: t('visual.dataview.ipText'),
+    dataIndex: 'ip',
+    width: 80,
+  },
+  {
+    title: t('visual.dataview.portText'),
+    dataIndex: 'port',
+    width: 80,
+  }
+]

+<template>
+  <div>
+    <BasicDrawer
+      destroyOnClose
+      showFooter
+      v-bind="$attrs"
+      @register="registerDrawer"
+      width="50%"
+      @ok="handleSubmit"
+    >
+      <BasicForm @register="registerForm">
+
+      </BasicForm>
+    </BasicDrawer>
+  </div>
+</template>
+<script lang="ts" setup name="sqlApi">
+import {
+  getBigViewSql,
+  saveDataViewSql
+} from "/@/api/bigscreen/center/bigscreenCenter";
+import {BasicDrawer, useDrawerInner} from "/@/components/Drawer";
+import {BasicForm, useForm} from "/@/components/Form";
+import {schemas} from "/@/views/dataview/sqlApi/config/config";
+import {nextTick, ref} from "vue";
+import {useUtils} from "/@/views/dataview/publicApi/hooks/useUtils";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {useMessage} from "/@/hooks/web/useMessage";
+import {buildUUID} from "/@/utils/uuid";
+const { t } = useI18n();
+const isUpdate = ref(false);
+const { createMessage } = useMessage();
+const emits = defineEmits(['success', 'register']);
+const putId = ref('');
+const sshId = ref('');
+const sslId = ref('');
+const {
+  resetReqHttpType,
+  resetUpdateSchema,
+} = useUtils();
+
+const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  await resetFields();
+  await nextTick();
+  setFieldsValue(resetReqHttpType);
+  const title = `${
+    !data.isUpdate ? t('visual.dataview.addtext') : t('visual.dataview.editText')
+  }${t('visual.dataview.publicInterface')}`;
+  setDrawerProps({ title });
+  updateSchema(resetUpdateSchema);
+  isUpdate.value = data.isUpdate;
+  !isUpdate.value ? (putId.value = '') : (putId.value = data.record?.id);
+  if (isUpdate.value) {
+    const _data = await getBigViewSql(data?.record?.id)
+    !isUpdate.value ? (sshId.value = '') : (sshId.value = _data?.ssh?.id);
+    !isUpdate.value ? (sslId.value = '') : (sslId.value = _data?.ssl?.id);
+    console.log(_data,'_data')
+    await setFieldsValue({
+      ..._data,
+      ssh_ip: _data?.ssh?.ip,
+      ssh_port: _data?.ssh?.port,
+      ssh_sshName: _data?.ssh?.sshName,
+      ssh_privateKey: _data?.ssh?.privateKey ? [{ uid: buildUUID(), name: '公钥文件', url: _data?.ssh?.privateKey }] : [],
+      ssh_sshPassword: _data?.ssh?.sshPassword,
+      ssh_verifyMethod: _data?.ssh?.verifyMethod
+    });
+  }
+  });
+
+const [registerForm, { resetFields, validate, setFieldsValue, updateSchema }] = useForm({
+  labelWidth: 160,
+  schemas: schemas(),
+  showActionButtonGroup: false,
+});
+
+const handleSubmit = async () => {
+  try {
+    setDrawerProps({ loading: true });
+    const values = await validate();
+    if (!values) return;
+    const processedData = {
+      ...values,
+      id: !putId.value ? null : putId.value,
+      ssl: !sslId.value ? null : {id: sslId.value},
+      ssh: {
+        id: !sshId.value ? null : sshId.value,
+        ip: values.ssh_ip,
+        port: values.ssh_port,
+        sshName: values.ssh_sshName,
+        privateKey: values.ssh_privateKey?.[0]?.url || '',
+        privateKeyFileName: values.ssh_privateKey?.[0]?.name || '',
+        sshPassword: values.ssh_sshPassword,
+        verifyMethod: values.ssh_verifyMethod
+      }
+    }
+    delete processedData.ssh_ip
+    delete processedData.ssh_port
+    delete processedData.ssh_privateKey
+    delete processedData.ssh_sshPassword
+    delete processedData.ssh_verifyMethod
+    const res = await saveDataViewSql(processedData);
+    if (res?.id) {
+      createMessage.success(t('common.createSuccessText'));
+      closeDrawer();
+      emits('success');
+    }else {
+      createMessage.error(t('common.createFailedText'))
+    }
+  } finally {
+    setDrawerProps({ loading: false });
+  }
+}
+</script>

+import SqlApiList from './list.vue'
+import SqlApiDrawer from './index.vue';
+import SqlApiForm from './form.vue';
+
+export {SqlApiList, SqlApiDrawer, SqlApiForm};

+<template>
+  <div>
+    <BasicDrawer
+      v-bind="$attrs"
+      @register="registerDrawer"
+      :title="t('visual.dataview.sqlTitle')"
+      width="50%"
+    >
+      <SqlApiList ref="sqlApiListRef" />
+    </BasicDrawer>
+  </div>
+</template>
+<script setup lang="ts" name="sqlApi">
+import {BasicDrawer, useDrawerInner} from "/@/components/Drawer";
+import { SqlApiList }  from './index'
+import {useI18n} from "/@/hooks/web/useI18n";
+const { t } = useI18n();
+
+const [registerDrawer] = useDrawerInner();
+</script>

+<template>
+  <div>
+    <BasicTable
+      @register="registerTable"
+      class="bg-neutral-100 dark:bg-dark-700"
+    >
+      <template #toolbar>
+        <Authority :value="PublicInterface.CREATE">
+          <a-button type="primary" @click="handleCreateOrEdit(null)">
+            {{ t('visual.dataview.sqlAdd') }}
+          </a-button>
+        </Authority>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+        :actions="[
+            {
+              label: t('common.editText'),
+              icon: 'clarity:note-edit-line',
+              auth: PublicInterface.UPDATE,
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+                        {
+              label: t('common.delText'),
+              icon: 'ant-design:delete-outlined',
+              auth: PublicInterface.DELETE,
+              color: 'error',
+              popConfirm: {
+                title: t('common.isDelete'),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            }]"
+        />
+          
+      </template>
+    </BasicTable>
+  </div>
+  <SqlApiForm @register="registerDrawer" @success="handleSuccess"/>
+</template>
+<script lang="ts" setup name="list">
+import {BasicTable, TableAction, useTable} from "/@/components/Table";
+import {
+  deleteBigViewSql,
+  getDataViewSqlPage
+} from "/@/api/bigscreen/center/bigscreenCenter";
+import {columns, searchFormSchema} from "/@/views/dataview/sqlApi/config/config";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {PublicInterface} from "/@/views/dataview/config";
+import {Authority} from "/@/components/Authority";
+import {useDrawer} from "/@/components/Drawer";
+import {SqlApiForm} from "./index";
+import {useMessage} from "/@/hooks/web/useMessage";
+const { t } = useI18n();
+const [registerDrawer, { openDrawer }] = useDrawer();
+const { createMessage } = useMessage();
+const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+  api: getDataViewSqlPage,
+  columns,
+  showIndexColumn: false,
+  clickToRowSelect: false,
+  showTableSetting: true,
+  bordered: true,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    baseColProps: { span: 9 },
+    actionColOptions: { span: 6 },
+  },
+  useSearchForm: true,
+  actionColumn: {
+    width: 180,
+    title: t('common.actionText'),
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+});
+
+const handleCreateOrEdit = (record) => {
+  const isUpdate = record === null ? false : true;
+  const recordContent = record === null ? null : record;
+  openDrawer(true, {
+    isUpdate,
+    record: recordContent,
+  });
+}
+
+const handleSuccess = () => {
+  reload();
+}
+
+const handleDeleteOrBatchDelete = async (record) => {
+  try {
+    const ids =  record?.id;
+    await deleteBigViewSql(ids);
+    createMessage.success(
+      `${ t('common.delText')}${t(
+        'common.successText'
+      )}`
+    );
+  } finally {
+    handleSuccess();
+  }
+}
+</script>
+<script setup lang="ts">
+</script>