feat(Data Source): SQLBot supports custom data types in data sources #768

Author: dataeaseShu

frontend/src/api/datasource.ts

@@ -6,6 +6,7 @@ export const datasourceApi = {
   relationGet: (id: any) => request.post(`/table_relation/get/${id}`),
   relationSave: (dsId: any, data: any) => request.post(`/table_relation/save/${dsId}`, data),
   add: (data: any) => request.post('/datasource/add', data),
+  importToDb: (data: any) => request.post('/datasource/importToDb', data),
   list: () => request.get('/datasource/list'),
   update: (data: any) => request.post('/datasource/update', data),
   delete: (id: number, name: string) => request.post(`/datasource/delete/${id}/${name}`),

frontend/src/assets/svg/icon_expand-left_filled.svg

@@ -33,6 +33,9 @@
     "enter_variable_value": "Please Enter Variable Value"
   },
   "sync": {
+    "records":"Displaying {num} records out of {total}",
+    "confirm_upload":"Confirm Upload",
+    "field_details":"Field Details",
     "integration": "Platform integration needs to be enabled.",
     "the_existing_user": "If the user already exists, overwrite the existing user.",
     "sync_users": "Sync Users",
@@ -442,6 +445,9 @@
     "get_schema": "Get Schema"
   },
   "model": {
+    "int": "Integer",
+    "float": "Float",
+    "string": "String",
     "default_model": "Default model",
     "model_type": "Model type",
     "basic_model": "Basic model",

frontend/src/assets/svg/icon_expand-right_filled.svg

@@ -7,22 +7,6 @@
     "AI Model Configuration": "모델 구성",
     "Details": "세부"
   },
-  "sync": {
-    "integration": "플랫폼 통합을 활성화해야 합니다.",
-    "the_existing_user": "해당 사용자가 이미 존재하는 경우 기존 사용자를 덮어씁니다.",
-    "sync_users": "사용자 동기화",
-    "sync_wechat_users": "위챗 사용자 동기화",
-    "sync_dingtalk_users": "딩톡 사용자 동기화",
-    "sync_lark_users": "라크 사용자 동기화",
-    "sync_complete": "동기화 완료",
-    "synced_10_users": "{num}명 동기화 성공",
-    "failed_3_users": "{failed}명 동기화 성공, {success}명 동기화 실패",
-    "download_failure_list": "실패 목록 다운로드",
-    "sync_failed": "동기화 실패",
-    "failed_10_users": "{failed}명 동기화 실패",
-    "continue_syncing": "동기화 계속",
-    "return_to_view": "화면으로 돌아가기"
-  },
   "variables": {
     "please_select_date": "날짜를 선택하십시오",
     "number_variable_error": "올바른 숫자 범위를 입력하십시오.",
@@ -48,6 +32,25 @@
     "enter_variable_name": "변수 이름을 입력하세요",
     "enter_variable_value": "변수 값을 입력하세요"
   },
+  "sync": {
+    "records": "{total}개 중 {num}개의 레코드 표시",
+    "confirm_upload": "업로드 확인",
+    "field_details": "필드 세부 정보",
+    "integration": "플랫폼 통합을 활성화해야 합니다.",
+    "the_existing_user": "해당 사용자가 이미 존재하는 경우 기존 사용자를 덮어씁니다.",
+    "sync_users": "사용자 동기화",
+    "sync_wechat_users": "위챗 사용자 동기화",
+    "sync_dingtalk_users": "딩톡 사용자 동기화",
+    "sync_lark_users": "라크 사용자 동기화",
+    "sync_complete": "동기화 완료",
+    "synced_10_users": "{num}명 동기화 성공",
+    "failed_3_users": "{failed}명 동기화 성공, {success}명 동기화 실패",
+    "download_failure_list": "실패 목록 다운로드",
+    "sync_failed": "동기화 실패",
+    "failed_10_users": "{failed}명 동기화 실패",
+    "continue_syncing": "동기화 계속",
+    "return_to_view": "화면으로 돌아가기"
+  },
   "parameter": {
     "execution_details": "실행 세부 정보",
     "overview": "개요",
@@ -442,6 +445,9 @@
     "get_schema": "스키마 가져오기"
   },
   "model": {
+    "int": "정수",
+    "float": "소수",
+    "string": "문자열",
     "default_model": "기본 모델",
     "model_type": "모델 유형",
     "basic_model": "기본 모델",
@@ -948,4 +954,4 @@
     "to_doc": "API 보기",
     "trigger_limit": "최대 {0}개의 API 키 생성 지원"
   }
-}
+}

frontend/src/i18n/en.json

@@ -7,22 +7,6 @@
     "AI Model Configuration": "模型配置",
     "Details": "详情"
   },
-  "sync": {
-    "integration": "需开启平台对接",
-    "the_existing_user": "若用户已存在，覆盖旧用户",
-    "sync_users": "同步用户",
-    "sync_wechat_users": "同步企业微信用户",
-    "sync_dingtalk_users": "同步钉钉用户",
-    "sync_lark_users": "同步飞书用户",
-    "sync_complete": "同步完成",
-    "synced_10_users": "成功同步 {num} 个用户",
-    "failed_3_users": "成功同步 {success} 个用户，同步失败 {failed} 个用户，",
-    "download_failure_list": "下载失败列表",
-    "sync_failed": "同步失败",
-    "failed_10_users": "同步失败 {num} 个用户，",
-    "continue_syncing": "继续同步",
-    "return_to_view": "返回查看"
-  },
   "variables": {
     "please_select_date": "请选择日期",
     "number_variable_error": "请输入正确的数值范围",
@@ -48,6 +32,25 @@
     "enter_variable_name": "请输入变量名称",
     "enter_variable_value": "请输入变量值"
   },
+  "sync": {
+    "records":"显示 {num} 条数据，共 {total} 条",
+    "confirm_upload":"确定上传",
+    "field_details":"字段详情",
+    "integration": "需开启平台对接",
+    "the_existing_user": "若用户已存在，覆盖旧用户",
+    "sync_users": "同步用户",
+    "sync_wechat_users": "同步企业微信用户",
+    "sync_dingtalk_users": "同步钉钉用户",
+    "sync_lark_users": "同步飞书用户",
+    "sync_complete": "同步完成",
+    "synced_10_users": "成功同步 {num} 个用户",
+    "failed_3_users": "成功同步 {success} 个用户，同步失败 {failed} 个用户，",
+    "download_failure_list": "下载失败列表",
+    "sync_failed": "同步失败",
+    "failed_10_users": "同步失败 {num} 个用户，",
+    "continue_syncing": "继续同步",
+    "return_to_view": "返回查看"
+  },
   "parameter": {
     "execution_details": "执行详情",
     "overview": "概览",
@@ -442,6 +445,9 @@
     "get_schema": "获取Schema"
   },
   "model": {
+    "int": "整数",
+    "float": "小数",
+    "string": "字符串",
     "default_model": "默认模型",
     "model_type": "模型类型",
     "basic_model": "基础模型",

frontend/src/i18n/ko-KR.json

@@ -420,10 +420,13 @@ strong {
   }
 }
 
-.text-variables.text-variables {
+.text-variables.text-variables,
+.string-variables.string-variables {
   color: #3370ff;
 }
-.number-variables.number-variables {
+.number-variables.number-variables,
+.int-variables.int-variables,
+.float-variables.float-variables {
   color: #04b49c;
 }
 .datetime-variables.datetime-variables {

frontend/src/i18n/zh-CN.json

@@ -17,6 +17,8 @@ import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import icon_fileExcel_colorful from '@/assets/datasource/icon_excel.png'
 import IconOpeDelete from '@/assets/svg/icon_delete.svg'
 import { useCache } from '@/utils/useCache'
+import ExcelDetailDialog from './ExcelDetailDialog.vue'
+import icon_visible_outlined from '@/assets/embedded/icon_visible_outlined.svg'
 
 const props = withDefaults(
   defineProps<{
@@ -34,6 +36,7 @@ const props = withDefaults(
 )
 
 const dsFormRef = ref<FormInstance>()
+const excelDetailDialogRef = ref<InstanceType<typeof ExcelDetailDialog>>()
 const emit = defineEmits(['refresh', 'changeActiveStep', 'close'])
 const isCreate = ref(true)
 const isEditTable = ref(false)
@@ -44,7 +47,7 @@ const tableListLoading = ref(false)
 const tableListLoadingV1 = ref(false)
 const checkLoading = ref(false)
 const dialogTitle = ref('')
-const getUploadURL = import.meta.env.VITE_API_BASE_URL + '/datasource/uploadExcel'
+const getUploadURL = import.meta.env.VITE_API_BASE_URL + '/datasource/parseExcel'
 const saveLoading = ref<boolean>(false)
 const uploadLoading = ref(false)
 const { t } = useI18n()
@@ -54,7 +57,7 @@ const rules = reactive<FormRules>({
   name: [
     {
       required: true,
-      message: t('datasource.please_enter') + t('common.empty') + t('ds.form.name'),
+      message: t('datasource.please_enter') + t('common.empty') + t('ds.name'),
       trigger: 'blur',
     },
     { min: 1, max: 50, message: t('ds.form.validate.name_length'), trigger: 'blur' },
@@ -166,9 +169,7 @@ const initForm = (item: any, editTable: boolean = false) => {
           ? configuration.lowVersion
           : true
       form.value.ssl =
-        configuration.ssl !== null && configuration.ssl !== undefined
-          ? configuration.ssl
-          : false
+        configuration.ssl !== null && configuration.ssl !== undefined ? configuration.ssl : false
     }
 
     if (editTable) {
@@ -431,15 +432,26 @@ const beforeUpload = (rawFile: any) => {
   uploadLoading.value = true
   return true
 }
-
+let fileDetail: any = null
 const onSuccess = (response: any) => {
-  form.value.filename = response.data.filename
-  form.value.sheets = response.data.sheets
-  tableList.value = response.data.sheets
+  fileDetail = response.data
+  excelDetailDialogRef.value?.init(response.data)
   excelUploadSuccess.value = true
   uploadLoading.value = false
 }
 
+const openFile = () => {
+  onSuccess({
+    data: fileDetail,
+  })
+}
+
+const saveExcel = (excel: any) => {
+  form.value.filename = excel.filename
+  form.value.sheets = excel.sheets
+  tableList.value = excel.sheets
+}
+
 const onError = (e: any) => {
   ElMessage.error(e.toString())
   uploadLoading.value = false
@@ -552,6 +564,26 @@ defineExpose({
         :rules="rules"
         @submit.prevent
       >
+        <el-form-item :label="t('ds.name')" prop="name">
+          <el-input
+            v-model="form.name"
+            clearable
+            :placeholder="$t('datasource.please_enter') + $t('common.empty') + t('ds.name')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('ds.form.description')">
+          <el-input
+            v-model="form.description"
+            :placeholder="
+              $t('datasource.please_enter') + $t('common.empty') + t('ds.form.description')
+            "
+            :rows="2"
+            show-word-limit
+            maxlength="200"
+            clearable
+            type="textarea"
+          />
+        </el-form-item>
         <div v-if="form.type === 'excel'">
           <el-form-item prop="sheets" :label="t('ds.form.file')">
             <div v-if="form.filename" class="pdf-card">
@@ -560,9 +592,22 @@ defineExpose({
                 <div class="name">{{ form.filename }}</div>
                 <div class="size">{{ form.filename.split('.')[1] }} - {{ fileSize }}</div>
               </div>
-              <el-icon v-if="!form.id" class="action-btn" size="16" @click="clearFile">
-                <IconOpeDelete></IconOpeDelete>
-              </el-icon>
+              <div
+                style="
+                  width: 40px;
+                  margin-left: auto;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                "
+              >
+                <el-icon v-if="!form.id" class="action-btn" size="16" @click="openFile">
+                  <icon_visible_outlined></icon_visible_outlined>
+                </el-icon>
+                <el-icon v-if="!form.id" class="action-btn" size="16" @click="clearFile">
+                  <IconOpeDelete></IconOpeDelete>
+                </el-icon>
+              </div>
             </div>
             <el-upload
               v-if="form.filename && !form.id"
@@ -602,26 +647,6 @@ defineExpose({
             <span v-if="!form.filename" class="not_exceed">{{ $t('common.not_exceed_50mb') }}</span>
           </el-form-item>
         </div>
-        <el-form-item :label="t('ds.form.name')" prop="name">
-          <el-input
-            v-model="form.name"
-            clearable
-            :placeholder="$t('datasource.please_enter') + $t('common.empty') + t('ds.form.name')"
-          />
-        </el-form-item>
-        <el-form-item :label="t('ds.form.description')">
-          <el-input
-            v-model="form.description"
-            :placeholder="
-              $t('datasource.please_enter') + $t('common.empty') + t('ds.form.description')
-            "
-            :rows="2"
-            show-word-limit
-            maxlength="200"
-            clearable
-            type="textarea"
-          />
-        </el-form-item>
         <div v-if="form.type !== 'excel'" style="margin-top: 16px">
           <el-form-item
             :label="form.type !== 'es' ? t('ds.form.host') : t('ds.form.address')"
@@ -694,11 +719,7 @@ defineExpose({
           >
             <el-checkbox v-model="form.lowVersion" :label="t('ds.form.low_version')" />
           </el-form-item>
-          <el-form-item
-            v-if="form.type === 'mysql'"
-            :label="t('ds.form.ssl')"
-            prop="ssl"
-          >
+          <el-form-item v-if="form.type === 'mysql'" :label="t('ds.form.ssl')" prop="ssl">
             <el-switch v-model="form.ssl" />
           </el-form-item>
           <el-form-item v-if="form.type !== 'es'" :label="t('ds.form.extra_jdbc')">
@@ -829,6 +850,7 @@ defineExpose({
       </el-button>
     </div>
   </div>
+  <ExcelDetailDialog ref="excelDetailDialogRef" @finish="saveExcel" />
 </template>
 
 <style lang="less" scoped>
@@ -898,10 +920,6 @@ defineExpose({
         }
       }
 
-      .action-btn {
-        margin-left: auto;
-      }
-
       .ed-icon {
         position: relative;
         cursor: pointer;