yg-yygl 0.0.1

package/dist/views/data/data-connect/constants.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 数据连接模块常量配置
+ */
+/**
+ * 数据库类型选项
+ */
+export declare const DB_TYPE_OPTIONS: readonly [{
+    readonly label: "DM";
+    readonly value: "DM";
+}, {
+    readonly label: "PostgreSQL";
+    readonly value: "PostgreSQL";
+}, {
+    readonly label: "KingbaseES";
+    readonly value: "KingbaseES";
+}, {
+    readonly label: "MySQL";
+    readonly value: "MySQL";
+}];
+/**
+ * Oracle 连接方式选项
+ */
+export declare const ORACLE_LINK_TYPE_OPTIONS: readonly [{
+    readonly label: "SERVICE";
+    readonly value: "SERVICE";
+}, {
+    readonly label: "SID";
+    readonly value: "SID";
+}, {
+    readonly label: "SCHEMA";
+    readonly value: "SCHEMA";
+}, {
+    readonly label: "TNS";
+    readonly value: "TNS";
+}];
+/**
+ * 数据库类型图标映射
+ */
+export declare const DB_TYPE_ICON_MAP: Record<string, string>;
+/**
+ * 连接状态类型
+ */
+export type ConnectionStatus = 'failed' | 'idle' | 'success' | 'testing';
+/**
+ * 列配置类型标识
+ */
+export declare const COLUMN_CONFIG_TYPE: "dataConnect";

package/dist/views/data/data-connect/constants.mjs

@@ -0,0 +1,21 @@
+export const DB_TYPE_OPTIONS = [
+  { label: "DM", value: "DM" },
+  { label: "PostgreSQL", value: "PostgreSQL" },
+  { label: "KingbaseES", value: "KingbaseES" },
+  { label: "MySQL", value: "MySQL" }
+];
+export const ORACLE_LINK_TYPE_OPTIONS = [
+  { label: "SERVICE", value: "SERVICE" },
+  { label: "SID", value: "SID" },
+  { label: "SCHEMA", value: "SCHEMA" },
+  { label: "TNS", value: "TNS" }
+];
+export const DB_TYPE_ICON_MAP = {
+  DM: "simple-icons:databricks",
+  PostgreSQL: "simple-icons:postgresql",
+  KingbaseES: "simple-icons:databricks",
+  MySQL: "simple-icons:mysql",
+  SQLServer: "simple-icons:microsoftsqlserver",
+  Oracle: "simple-icons:oracle"
+};
+export const COLUMN_CONFIG_TYPE = "dataConnect";

package/dist/views/data/data-connect/data-connect-form.d.vue.ts

@@ -0,0 +1,11 @@
+import type { EditData } from '../../../api/data-connect/types';
+/**
+ * 组件 Props
+ */
+type __VLS_Props = {
+    editData?: EditData;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/data/data-connect/data-connect-form.vue

@@ -0,0 +1,477 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type {
+  DataConnectCreateParams,
+  DataConnectUpdateParams,
+} from '../../../api/data-connect/types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import { Form } from '@udp/component-ui';
+
+import { Check, Close, Loading } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import {
+  createDataConnect,
+  testDataConnect,
+  updateDataConnect,
+} from '../../../api/data-connect';
+
+import {
+  DB_TYPE_OPTIONS,
+  ORACLE_LINK_TYPE_OPTIONS,
+  type ConnectionStatus,
+} from './constants';
+import type { EditData } from '../../../api/data-connect/types';
+
+/**
+ * 组件 Props
+ */
+const props = defineProps<{
+  editData?: EditData;
+}>();
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+const formRef = ref();
+
+// 连接状态
+const connectionStatus = ref<ConnectionStatus>('idle');
+const connectionMessage = ref('');
+
+/**
+ * 表单初始值
+ */
+const initialValues = reactive({
+  id: '',
+  fullName: '',
+  dbType: '',
+  userName: '',
+  serviceName: '',
+  password: '',
+  port: '',
+  host: '',
+  dbSchema: '',
+  tableSpace: '',
+  oracleExtend: 0,
+  oracleLinkType: '',
+  oracleService: '',
+  oracleRole: '',
+  dbSort: 1,
+});
+
+/**
+ * 表单配置
+ */
+const formItems = reactive<FormItemConfig[]>([
+  {
+    prop: 'dbType',
+    label: '连接驱动',
+    type: 'select',
+    required: true,
+    options: DB_TYPE_OPTIONS,
+    rules: [
+      {
+        required: true,
+        message: '请选择驱动类型',
+        trigger: ['blur', 'change'],
+      },
+    ],
+  },
+  {
+    prop: 'fullName',
+    label: '连接名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入连接名称',
+    trim: true,
+    rules: [
+      { required: true, message: '请输入连接名称', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '连接名称长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'host',
+    label: '主机地址',
+    type: 'input',
+    required: true,
+    placeholder: '请输入主机地址',
+    trim: true,
+    rules: [
+      { required: true, message: '请输入主机地址', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '主机地址长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'port',
+    label: '端口',
+    type: 'input',
+    required: true,
+    placeholder: '请输入端口',
+    trim: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入端口',
+        trigger: ['blur', 'input'],
+        pattern:
+          /^(\d|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
+      },
+    ],
+  },
+  {
+    prop: 'userName',
+    label: '用户',
+    type: 'input',
+    required: true,
+    placeholder: '请输入用户',
+    trim: true,
+    rules: [
+      { required: true, message: '请输入用户', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '用户长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'password',
+    label: '密码',
+    type: 'password',
+    required: true,
+    placeholder: '请输入密码',
+    trim: true,
+    rules: [
+      { required: true, message: '请输入密码', trigger: ['blur', 'input'] },
+    ],
+  },
+  {
+    prop: 'serviceName',
+    label: '库名',
+    type: 'input',
+    required: true,
+    placeholder: '请输入库名',
+    trim: true,
+    slot: 'serviceName',
+    condition: (values) =>
+      values.dbType === 'MySQL' ||
+      values.dbType === 'SQLServer' ||
+      values.dbType === 'PostgreSQL' ||
+      values.dbType === 'KingbaseES',
+    rules: [
+      { required: true, message: '请输入库名', trigger: ['blur', 'input'] },
+    ],
+  },
+  {
+    prop: 'dbSchema',
+    label: '模式',
+    type: 'input',
+    placeholder: '请输入模式',
+    trim: true,
+    slot: 'dbSchema',
+    condition: (values) => values.dbType !== 'MySQL',
+    rules: [{ message: '请输入模式', trigger: ['blur', 'input'] }],
+  },
+  {
+    prop: 'oracleExtend',
+    label: '更多',
+    type: 'switch',
+    condition: (values) => values.dbType === 'Oracle',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+  {
+    prop: 'oracleLinkType',
+    label: '连接方式',
+    type: 'select',
+    condition: (values) => values.dbType === 'Oracle' && !!values.oracleExtend,
+    options: ORACLE_LINK_TYPE_OPTIONS,
+    rules: [
+      {
+        required: true,
+        message: '请选择连接方式',
+        trigger: ['blur', 'change'],
+      },
+    ],
+  },
+  {
+    prop: 'oracleRole',
+    label: '连接方式',
+    type: 'select',
+    condition: (values) => values.dbType === 'Oracle' && !!values.oracleExtend,
+    options: ORACLE_LINK_TYPE_OPTIONS,
+    rules: [
+      {
+        required: true,
+        message: '请选择连接方式',
+        trigger: ['blur', 'change'],
+      },
+    ],
+  },
+  {
+    prop: 'oracleService',
+    label: '服务名',
+    type: 'input',
+    placeholder: '请输入服务名',
+    condition: (values) => values.dbType === 'Oracle' && !!values.oracleExtend,
+    rules: [
+      { required: true, message: '请输入服务名', trigger: ['blur', 'input'] },
+    ],
+  },
+  {
+    prop: 'dbSort',
+    label: '排序',
+    type: 'number',
+    required: false,
+    props: {
+      min: 1,
+    },
+  },
+]);
+
+/**
+ * 提交表单
+ */
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    const submitData = formRef.value?.getValues();
+
+    // 调用 API
+    await (isEdit.value
+      ? updateDataConnect(submitData as unknown as DataConnectUpdateParams)
+      : createDataConnect(submitData as unknown as DataConnectCreateParams));
+    ElMessage.success(isEdit.value ? '更新数据连接成功!' : '创建数据连接成功!');
+    return true;
+  } catch (error) {
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/**
+ * 初始化表单数据
+ */
+const initFormData = (data?: EditData) => {
+  if (data?.id) {
+    Object.assign(initialValues, {
+      id: data.id || '',
+      fullName: data.fullName || '',
+      dbType: data.dbType || '',
+      userName: data.userName || '',
+      serviceName: data.serviceName || '',
+      password: data.password || '',
+      port: data.port || '',
+      host: data.host || '',
+      dbSchema: data.dbSchema || '',
+      tableSpace: data.tableSpace || '',
+      oracleExtend: data.oracleExtend === null ? 0 : Number(data.oracleExtend),
+      oracleLinkType: data.oracleLinkType || '',
+      oracleService: data.oracleService || '',
+      oracleRole: data.oracleRole || '',
+      dbSort: data.dbSort || 1,
+    });
+  }
+};
+
+/**
+ * 监听编辑数据变化
+ */
+watch(
+  () => props.editData,
+  (newData) => {
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+/**
+ * 处理字段变化
+ */
+const handleFieldChange = (prop: string, value: unknown) => {
+  if (prop === 'dbType') {
+    switch (value) {
+      case 'SQLServer': {
+        formRef.value?.setValue('dbSchema', 'dbo');
+        break;
+      }
+      default: {
+        formRef.value?.setValue('dbSchema', '');
+        break;
+      }
+    }
+  }
+};
+
+/**
+ * 测试连接
+ */
+const testConnect = async () => {
+  connectionStatus.value = 'testing';
+  connectionMessage.value = '正在测试连接...';
+
+  try {
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      connectionStatus.value = 'failed';
+      connectionMessage.value = '请检查表单数据';
+      return false;
+    }
+    const submitData = formRef.value?.getValues();
+
+    // 调用测试连接 API
+    const response = await testDataConnect(
+      submitData as unknown as DataConnectCreateParams,
+    );
+    if (response.connect) {
+      connectionStatus.value = 'success';
+      connectionMessage.value = '连接测试成功!';
+    } else {
+      connectionStatus.value = 'failed';
+      connectionMessage.value = '连接测试失败!';
+    }
+    return true;
+  } catch (error) {
+    connectionStatus.value = 'failed';
+    connectionMessage.value = '连接测试失败，请重试';
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 生命周期
+onMounted(() => {
+  // 组件挂载完成
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>
+
+<template>
+  <div>
+    <!-- 连接状态指示器 -->
+    <div
+      v-if="connectionStatus !== 'idle'"
+      class="connection-status-indicator mb-4"
+    >
+      <div
+        class="flex items-center gap-2 rounded-lg p-3"
+        :class="{
+          'bg-blue-50 text-blue-600': connectionStatus === 'testing',
+          'bg-green-50 text-green-600': connectionStatus === 'success',
+          'bg-red-50 text-red-600': connectionStatus === 'failed',
+        }"
+      >
+        <el-icon class="animate-spin" v-if="connectionStatus === 'testing'">
+          <Loading />
+        </el-icon>
+        <el-icon v-else-if="connectionStatus === 'success'">
+          <Check />
+        </el-icon>
+        <el-icon v-else-if="connectionStatus === 'failed'">
+          <Close />
+        </el-icon>
+        <span class="font-medium">{{ connectionMessage }}</span>
+      </div>
+    </div>
+
+    <Form
+      ref="formRef"
+      :items="formItems"
+      :initial-values="initialValues"
+      :show-actions="false"
+      label-width="auto"
+      @submit="handleSubmit"
+      @field-change="handleFieldChange"
+    >
+      <template #dbSchema="{ model }">
+        <el-input
+          v-model="model.dbSchema"
+          class="connect-test-input"
+          clearable
+          :placeholder="model.dbType === 'Oracle' ? '与用户同名' : ''"
+          :disabled="
+            model.dbType !== 'KingbaseES' &&
+            model.dbType !== 'PostgreSQL' &&
+            model.dbType !== 'DM'
+          "
+        >
+          <template #append>
+            <el-button
+              type="primary"
+              class="!bg-[var(--el-color-primary)] !border-[var(--el-color-primary)] !text-white hover:!opacity-90 active:!opacity-80"
+              @click="testConnect"
+            >
+              连接测试
+            </el-button>
+          </template>
+        </el-input>
+      </template>
+      <template #serviceName="{ model }">
+        <el-input
+          v-if="model.dbType === 'MySQL'"
+          v-model="model.serviceName"
+          class="connect-test-input"
+          clearable
+          placeholder="库名"
+        >
+          <template #append>
+            <el-button
+              type="primary"
+              class="!bg-[var(--el-color-primary)] !border-[var(--el-color-primary)] !text-white hover:!opacity-90 active:!opacity-80"
+              @click="testConnect"
+            >
+              连接测试
+            </el-button>
+          </template>
+        </el-input>
+        <el-input
+          v-else
+          v-model="model.serviceName"
+          clearable
+          placeholder="库名"
+        />
+      </template>
+    </Form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.connect-test-input .el-input-group__append) {
+  background-color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+
+:deep(.connect-test-input .el-input-group__append .el-button) {
+  color: #fff;
+}
+</style>

package/dist/views/data/data-connect/data-connect-form.vue.d.ts

@@ -0,0 +1,11 @@
+import type { EditData } from '../../../api/data-connect/types';
+/**
+ * 组件 Props
+ */
+type __VLS_Props = {
+    editData?: EditData;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    handleSubmit: () => Promise<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/data/data-connect/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;