数据源管理增加文件form

src/views/dataSource/Detail.vue

@@ -16,21 +16,19 @@
       <div class="detail-main">
         <span class="detail-part-title">基础信息</span>
         <my-form :form-data="form.basicInfo" class="form-detail" ref="basicInfo"></my-form>
-
         <span class="detail-part-title">详细信息</span>
-        <my-form :form-data="form.extentInfo" class="form-detail" ref="extentInfo"></my-form>
-
+        <my-form :form-data="selectedFormData" class="form-detail" ref="extentInfo"></my-form>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, onBeforeMount } from 'vue'
+import { computed, onBeforeMount, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { DataTypeArr, DatabaseTypeArr } from '../../utils/data/select-data'
+import { DatabaseTypeArr, DataTypeArr } from '../../utils/data/select-data'
 import MyForm from '../../components/Form.vue'
-import { GetSourceDetail, AddSource, EditSource } from '../../services/baseInfo'
+import { AddSource, EditSource, GetSourceDetail } from '../../services/baseInfo'
 
 const route = useRoute()
 const router = useRouter()
@@ -38,53 +36,73 @@ const router = useRouter()
 const form = reactive({
   basicInfo: [
     { fieldName: 'sourceName', label: '数据源名称', value: '', isRequired: true, type: 'input' },
-    { fieldName: 'sourceType', label: '类别', value: '1', isRequired: true, type: 'select', options: DataTypeArr, disabled: true },
+    { fieldName: 'sourceType', label: '类别', value: '1', isRequired: true, type: 'select', options: DataTypeArr, disabled: false },
     { fieldName: 'des', label: '数据源简介', value: '', isRequired: false, type: 'textarea', class: 'textarea-row' },
   ],
-  extentInfo: [
+  DBExtentInfo: [
     { fieldName: 'type', label: '数据库类型', value: '', isRequired: true, type: 'select', options: DatabaseTypeArr },
     { fieldName: 'ip', label: '数据源IP', value: '', isRequired: true, type: 'input' },
     { fieldName: 'port', label: '数据源port', value: '', isRequired: true, type: 'input' },
     { fieldName: 'username', label: '数据源用户名', value: '', isRequired: true, type: 'input' },
     { fieldName: 'password', label: '数据源密码', value: '', isRequired: true, type: 'input' },
     { fieldName: 'schema', label: 'scheam', value: '', isRequired: true, type: 'input' },
-  ]
+  ],
+  fileExtentInfo: [
+    { fieldName: 'ip', label: '数据源IP', value: '', isRequired: true, type: 'input' },
+    { fieldName: 'port', label: '数据源port', value: '', isRequired: true, type: 'input' },
+    { fieldName: 'username', label: '用户名', value: '', isRequired: true, type: 'input' },
+    { fieldName: 'password', label: '密码', value: '', isRequired: true, type: 'input' },
+    { fieldName: 'remarks', label: '备注', value: '', isRequired: true, type: 'input' },
+  ],
 })
 
-function handleClose() {
+const selectedFormData = computed(() => {
+  const type = form.basicInfo.find(item => item.fieldName === 'sourceType').value
+  if (type === '1') {
+    return form.DBExtentInfo
+  } else if (type === '3') {
+    return form.fileExtentInfo
+  } else {
+    // 其他情况，可以根据需要返回一个默认的表单数据
+    // 或者返回空对象 {}
+    return {}
+  }
+})
+
+function handleClose () {
   router.push({
-    name: 'DataSourceManage'
+    name: 'DataSourceManage',
   })
 }
 
 const basicInfo = ref(null)
 const extentInfo = ref(null)
 
-function handleSave() {
+function handleSave () {
   Promise.all([basicInfo.value.validateForm(), extentInfo.value.validateForm()]).then(valid => {
-    if(valid.findIndex(val => val===false)===-1) {
+    if (valid.findIndex(val => val === false) === -1) {
       // 校验通过
-      let pForm={}
+      let pForm = {}
       form.basicInfo.forEach(i => {
         pForm[i.fieldName] = i.value
       })
       form.extentInfo.forEach(i => {
         pForm[i.fieldName] = i.value
       })
-      if(route.params.type==='edit') {
+      if (route.params.type === 'edit') {
         // 编辑
         pForm['sourceId'] = route.params.id
         EditSource(pForm).then(res => {
-          if(res.code=='200'&&res.success) {
-            ElMessage({type:'success', message: '修改成功'})
+          if (res.code == '200' && res.success) {
+            ElMessage({ type: 'success', message: '修改成功' })
             handleClose()
           }
         })
       } else {
         // 新增
         AddSource(pForm).then(res => {
-          if(res.code=='200'&&res.success) {
-            ElMessage({type:'success', message: '新增成功'})
+          if (res.code == '200' && res.success) {
+            ElMessage({ type: 'success', message: '新增成功' })
             handleClose()
           }
         })
@@ -93,10 +111,10 @@ function handleSave() {
   })
 }
 
-onBeforeMount(()=> {
-  if(route.params.type!=='add') {
+onBeforeMount(() => {
+  if (route.params.type !== 'add') {
     GetSourceDetail(route.params.id).then(res => {
-      if(res.code=='200'&&res.success) {
+      if (res.code == '200' && res.success) {
         form.basicInfo.forEach(i => {
           i.value = res.data[i.fieldName]
         })
@@ -112,7 +130,7 @@ onBeforeMount(()=> {
 
 <style scoped lang="scss">
 #res-cata-detail {
-  
+
 }
-  
+
 </style>