2929 />
3030 </el-select >
3131 </el-form-item >
32- <el-form-item label =" Host/Ip" >
33- <el-input v-model =" config.host" />
34- </el-form-item >
35- <el-form-item label =" Port" >
36- <el-input v-model =" config.port" />
37- </el-form-item >
38- <el-form-item label =" Username" >
39- <el-input v-model =" config.username" />
40- </el-form-item >
41- <el-form-item label =" Password" >
42- <el-input v-model =" config.password" type =" password" show-password />
43- </el-form-item >
44- <el-form-item label =" Database" >
45- <el-input v-model =" config.database" />
46- </el-form-item >
47- <el-form-item label =" Extra JDBC String" >
48- <el-input v-model =" config.extraJdbc" />
49- </el-form-item >
50- <el-form-item label =" Schema" v-if =" form.type === 'sqlServer'" >
51- <el-input v-model =" config.dbSchema" />
52- <el-button link type =" primary" :icon =" Plus" v-if =" false" >Get Schema</el-button >
53- </el-form-item >
32+ <div v-if =" form.type === 'excel'" >
33+ <el-form-item label =" File" >
34+ <el-upload
35+ accept =" .xls, .xlsx, .csv"
36+ :headers =" headers"
37+ action =" http://localhost:8000/api/v1/datasource/uploadExcel"
38+ :before-upload =" beforeUpload"
39+ >
40+ <el-button >Upload</el-button >
41+ <template #tip >
42+ <div class =" el-upload__tip" >
43+ Only support .xls, .xlsx, .csv, size less than 50MB.
44+ </div >
45+ </template >
46+ </el-upload >
47+ </el-form-item >
48+ </div >
49+ <div v-else >
50+ <el-form-item label =" Host/Ip" >
51+ <el-input v-model =" config.host" />
52+ </el-form-item >
53+ <el-form-item label =" Port" >
54+ <el-input v-model =" config.port" />
55+ </el-form-item >
56+ <el-form-item label =" Username" >
57+ <el-input v-model =" config.username" />
58+ </el-form-item >
59+ <el-form-item label =" Password" >
60+ <el-input v-model =" config.password" type =" password" show-password />
61+ </el-form-item >
62+ <el-form-item label =" Database" >
63+ <el-input v-model =" config.database" />
64+ </el-form-item >
65+ <el-form-item label =" Extra JDBC String" >
66+ <el-input v-model =" config.extraJdbc" />
67+ </el-form-item >
68+ <el-form-item label =" Schema" v-if =" form.type === 'sqlServer'" >
69+ <el-input v-model =" config.dbSchema" />
70+ <el-button link type =" primary" :icon =" Plus" v-if =" false" >Get Schema</el-button >
71+ </el-form-item >
72+ </div >
5473 </el-form >
5574 </div >
5675 <div v-show =" active === 2" class =" container" >
6786 </div >
6887 <div style =" display : flex ;justify-content : flex-end ;margin-top : 20px ;" >
6988 <el-button @click =" close" >Cancel</el-button >
70- <el-button v-show =" !isCreate && !isEditTable" @click =" check" >Test Connect</el-button >
89+ <el-button v-show =" !isCreate && !isEditTable && form.type !== 'excel' " @click =" check" >Test Connect</el-button >
7190 <el-button v-show =" active === 1 && isCreate" type =" primary" @click =" next(dsFormRef)" >Next</el-button >
7291 <el-button v-show =" active === 2 && isCreate" @click =" preview" >Preview</el-button >
7392 <el-button v-show =" active === 2 || !isCreate" type =" primary" @click =" save(dsFormRef)" >Save</el-button >
@@ -81,7 +100,9 @@ import { encrypted, decrypted } from './js/aes'
81100import { ElMessage } from ' element-plus'
82101import type { FormInstance , FormRules } from ' element-plus'
83102import { Plus } from ' @element-plus/icons-vue'
103+ import { useCache } from ' @/utils/useCache'
84104
105+ const { wsCache } = useCache ()
85106const dsFormRef = ref <FormInstance >()
86107const emit = defineEmits ([' refresh' ])
87108const active = ref (1 )
@@ -90,6 +111,10 @@ const isEditTable = ref(false)
90111const checkList = ref <any >([])
91112const tableList = ref <any >([])
92113
114+ const token = wsCache .get (' user.token' )
115+ const headers = ref <any >({' X-SQLBOT-TOKEN' : ` Bearer ${token } ` })
116+
117+
93118const rules = reactive <FormRules >({
94119 name: [
95120 { required: true , message: ' Please input name' , trigger: ' blur' },
@@ -99,6 +124,7 @@ const rules = reactive<FormRules>({
99124
100125const dialogVisible = ref <boolean >(false )
101126const dsType = [
127+ {label:" Excel/CSV" , value:" excel" },
102128 {label:" MySQL" , value:" mysql" },
103129 {label:" SQL Server" , value:" sqlServer" }
104130]
@@ -246,28 +272,40 @@ const check = () => {
246272}
247273
248274const next = async (formEl : FormInstance | undefined ) => {
249- if (! formEl ) return
250- await formEl .validate ((valid ) => {
251- if (valid ) {
252- // check status if success do next
253- buildConf ()
254- datasourceApi .check (form .value ).then ((res : boolean ) => {
255- if (res ) {
256- active .value ++
257- // request tables
258- datasourceApi .getTablesByConf (form .value ).then ((res ) => {
259- tableList .value = res
260- })
261- }
262- })
263- }
264- })
275+ if (form .value .type === " excel" ) {
276+ // next, show tables
277+ } else {
278+ if (! formEl ) return
279+ await formEl .validate ((valid ) => {
280+ if (valid ) {
281+ // check status if success do next
282+ buildConf ()
283+ datasourceApi .check (form .value ).then ((res : boolean ) => {
284+ if (res ) {
285+ active .value ++
286+ // request tables
287+ datasourceApi .getTablesByConf (form .value ).then ((res ) => {
288+ tableList .value = res
289+ })
290+ }
291+ })
292+ }
293+ })
294+ }
265295}
266296
267297const preview = () => {
268298 active .value --
269299}
270300
301+ const beforeUpload = (rawFile : any ) => {
302+ if (rawFile .size / 1024 / 1024 > 50 ) {
303+ ElMessage .error (' File size can not exceed 50MB!' )
304+ return false
305+ }
306+ return true
307+ }
308+
271309defineExpose ({ open })
272310 </script >
273311<style lang="less" scoped>
0 commit comments