初始版本提交

src/views/dataconfig/databaselink/components/DatabaseLinkModal.vue

@@ -0,0 +1,167 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
+    <template #insertFooter>
+      <a-button type="primary" danger @click="handleTest"> {{ t('测试链接') }} </a-button>
+    </template>
+  </BasicModal>
+</template>
+<script lang="tsx" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { FormSchema } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import {
+    addDatabaseLink,
+    getDatabaseLink,
+    updateDatabaseLink,
+    testDatabaseLink,
+  } from '/@/api/system/databaselink';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  const accountFormSchema: FormSchema[] = [
+    {
+      field: 'dbName',
+      label: t('数据库名称'),
+      component: 'Input',
+      required: true,
+      colProps: { span: 24 },
+    },
+    {
+      field: 'dbType',
+      label: t('数据库类型'),
+      component: 'Select',
+      required: true,
+      componentProps: {
+        options: [
+          { label: 'mysql', value: 'mysql' },
+          { label: 'sqlserver', value: 'sqlserver' },
+          { label: 'oracle', value: 'oracle' },
+          { label: 'pgsql', value: 'pgsql' },
+          { label: 'dm', value: 'dm' },
+          { label: 'mariadb', value: 'mariadb' },
+          { label: 'sqlite', value: 'sqlite' },
+          { label: 'gbase', value: 'gbase' },
+          { label: 'oceanbase', value: 'oceanbase' },
+          { label: 'h2', value: 'h2' },
+        ],
+      },
+      colProps: { span: 24 },
+    },
+    {
+      field: 'dbVersion',
+      label: t('数据库版本'),
+      component: 'Input',
+      colProps: { span: 24 },
+    },
+    {
+      field: 'host',
+      label: t('链接'),
+      required: true,
+      component: 'InputTextArea',
+      colProps: { span: 24 },
+    },
+    {
+      field: 'username',
+      label: t('账号'),
+      component: 'Input',
+      required: true,
+      colProps: { span: 24 },
+    },
+    {
+      field: 'password',
+      label: t('密码'),
+      component: 'InputPassword',
+      componentProps: {
+        visibilityToggle: true,
+      },
+      required: true,
+      colProps: { span: 24 },
+    },
+  ];
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { notification } = useMessage();
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const loading = ref(false);
+
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    schemas: accountFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false, width: '40%' });
+
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      rowId.value = data.id;
+      console.log(rowId.value);
+      const record = await getDatabaseLink(data.id);
+
+      setFieldsValue({
+        ...record,
+      });
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? t('新增数据库链接') : t('编辑数据库链接')));
+
+  const handleTest = async () => {
+    const values = await validate();
+    console.log('handleTest');
+
+    const ok = await testDatabaseLink(values);
+    loading.value = true;
+    if (!ok) {
+      notification.error({
+        message: t('提示'),
+        type: 'warning',
+        description: t('未能连接上数据库'),
+      }); //提示消息
+    } else {
+      notification.success({
+        message: t('提示'),
+        description: t('成功'),
+      }); //提示消息
+    }
+    loading.value = false;
+  };
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      if (!unref(isUpdate)) {
+        //false 新增
+        await addDatabaseLink(values);
+        notification.success({
+          message: t('提示'),
+          description: t('数据库连接新增成功！'),
+        }); //提示消息
+      } else {
+        values.id = unref(rowId);
+        await updateDatabaseLink(values);
+        notification.success({
+          message: t('提示'),
+          description: t('数据库连接修改成功！'),
+        }); //提示消息
+      }
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/dataconfig/databaselink/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate" v-auth="'databaselink:add'">{{
+          t('新增')
+        }}</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              auth: 'databaselink:edit',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              auth: 'databaselink:delete',
+              color: 'error',
+              popConfirm: {
+                title: t('是否确认删除'),
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <DatabaseLinkModal @register="registerModal" @success="handleSuccess" :width="800" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
+  import { deleteDatabaseLink, getDatabaselinkPage } from '/@/api/system/databaselink';
+  import { PageWrapper } from '/@/components/Page';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useModal } from '/@/components/Modal';
+  import DatabaseLinkModal from './components/DatabaseLinkModal.vue';
+  // import DeptTree from './components/DeptTree.vue';
+  const { t } = useI18n();
+  const searchFormSchema: FormSchema[] = [
+    {
+      field: 'keyword',
+      label: t('数据库名称'),
+      component: 'Input',
+      colProps: { xs: 16, md: 8 },
+      componentProps: {
+        placeholder: t('请输入数据库名称'),
+      },
+    },
+  ];
+
+  const columns: BasicColumn[] = [
+    {
+      title: t('数据库名称'),
+      dataIndex: 'dbName',
+      width: '15%',
+      sorter: true,
+      align: 'left',
+    },
+
+    {
+      title: t('数据库类型'),
+      dataIndex: 'dbType',
+      width: '15%',
+      sorter: true,
+      align: 'left',
+    },
+    {
+      title: t('数据库版本'),
+      dataIndex: 'dbVersion',
+      width: '15%',
+      sorter: true,
+      align: 'left',
+    },
+    // {
+    //   title: '驱动',
+    //   dataIndex: 'driver',
+    //   width: 180,
+    //   sorter: true,
+    // },
+    {
+      title: t('链接'),
+      dataIndex: 'host',
+      sorter: true,
+      align: 'left',
+    },
+  ];
+
+  const { notification } = useMessage();
+
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload }] = useTable({
+    title: t('数据库链接'),
+    api: getDatabaselinkPage,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      rowProps: {
+        gutter: 16,
+      },
+      schemas: searchFormSchema,
+      showResetButton: false,
+    },
+    useSearchForm: true,
+    striped: false,
+    showTableSetting: true,
+    actionColumn: {
+      width: 80,
+      title: t('操作'),
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    tableSetting: {
+      size: false,
+      setting: false,
+    },
+  });
+
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      id: record.id,
+      isUpdate: true,
+    });
+  }
+
+  function handleDelete(record: Recordable) {
+    deleteDatabaseLink([record.id]).then((_) => {
+      reload();
+      notification.success({
+        message: t('提示'),
+        description: t('删除成功'),
+      }); //提示消息
+    });
+  }
+
+  function handleSuccess() {
+    reload();
+  }
+</script>