fix: multiple data source issues: empty static data handling, length validation, and URL persistence

packages/plugins/datasource/src/DataSourceForm.vue

@@ -43,8 +43,10 @@ import { camelize, capitalize } from '@vue/shared'
 import { ButtonGroup, PluginSetting, SvgButton } from '@opentiny/tiny-engine-common'
 import DataSourceType from './DataSourceType.vue'
 import DataSourceName, { getDataSourceName } from './DataSourceName.vue'
+import { getServiceForm } from './DataSourceRemoteForm.vue'
 import DataSourceSettings from './DataSourceSettings.vue'
 import { close as closeRemoteResult, open as openRemoteResult } from './DataSourceSettingRemoteResult.vue'
+import { getRecordGrid } from './DataSourceSettingRecordList.vue'
 import {
   requestUpdateDataSource,
   requestAddDataSource,
@@ -203,12 +205,20 @@ export default {
       })
     }
 
-    const save = () => {
-      getDataSourceName().validate((valid) => {
-        if (valid) {
-          close()
-          closeRemoteResult()
+    const activeTabChange = (name) => {
+      emit('activeTab', name)
+    }
 
+    const save = async () => {
+      try {
+        // await validate() 如果验证不通过会抛出异常，而不是返回 false
+        await getServiceForm().validate()
+      } catch (error) {
+        activeTabChange('remote')
+        return
+      }
+      getDataSourceName().validate(async (valid) => {
+        if (valid) {
           const columns = state.dataSource.data.columns.map(({ name, title, type, format, field }) => {
             return {
               name,
@@ -219,6 +229,14 @@ export default {
             }
           })
 
+          try {
+            // await validate() 如果验证不通过会抛出异常，而不是返回 false
+            await getRecordGrid().fullValidate()
+          } catch (error) {
+            activeTabChange('record')
+            return
+          }
+
           settingRef.value.saveRecord().then((record) => {
             const editRequestData = {
               name: state.dataSource.name,
@@ -254,6 +272,7 @@ export default {
                 emit('save')
                 dataSourceState.dataSourceColumn = {}
                 dataSourceState.dataSourceColumnCopies = {}
+                dataSourceState.remoteConfig = {}
               })
             } else {
               requestAddDataSource({
@@ -270,12 +289,15 @@ export default {
                   emit('save')
                   dataSourceState.dataSourceColumn = {}
                   dataSourceState.dataSourceColumnCopies = {}
+                  dataSourceState.remoteConfig = {}
                 })
                 .catch((error) => {
                   message({ message: `数据源保存失败：${error?.message || ''}`, status: 'error' })
                 })
             }
           })
+          close()
+          closeRemoteResult()
         }
       })
     }
@@ -298,10 +320,6 @@ export default {
       emit('renderRemoteData', remoteData)
     }
 
-    const activeTabChange = (name) => {
-      emit('activeTab', name)
-    }
-
     watch(
       () => state.dataSource.data?.type,
       (value) => {

packages/plugins/datasource/src/DataSourceList.vue

@@ -33,6 +33,7 @@ import { onMounted, reactive, ref } from 'vue'
 import { useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { fetchDataSourceList, fetchDataSourceDetail } from './js/http'
 import { SvgButton } from '@opentiny/tiny-engine-common'
+import { getServiceForm } from './DataSourceRemoteForm.vue'
 
 const dataSourceList = ref([])
 const activeIndex = ref(-1)
@@ -74,6 +75,7 @@ export default {
           data: { ...item.data, type: 'remote' }
         }
         emit('edit', editData)
+        getServiceForm()?.clearValidate()
       })
     }
 

packages/plugins/datasource/src/DataSourceSettingRecordList.vue

@@ -73,6 +73,12 @@ import { fetchDataSourceDetail } from './js/http'
 import { downloadFn, handleImportedData, overrideOrMergeData, getDataAfterPage } from './js/datasource'
 import DataSourceRecordUpload from './DataSourceRecordUpload.vue'
 
+const grid = ref(null)
+
+export const getRecordGrid = () => {
+  return grid.value
+}
+
 export default {
   components: {
     TinyGrid: Grid,
@@ -90,7 +96,6 @@ export default {
   },
   emits: ['edit'],
   setup(props, { emit }) {
-    const grid = ref(null)
     const { confirm } = useModal()
     const { PLUGIN_NAME, getPluginByLayout } = useLayout()
     const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))

packages/plugins/datasource/src/DataSourceSettings.vue

@@ -20,6 +20,7 @@
           :data="state.currentData"
           ref="recordRef"
           @refresh="refresh()"
+          @edit="changeTab()"
         ></data-source-setting-record-list>
       </tiny-tab-item>
     </tiny-tabs>
@@ -93,6 +94,10 @@ export default {
       closeGlobalDataHandler()
     }
 
+    const changeTab = () => {
+      state.activeTabName = 'field'
+    }
+
     const tabClick = (e) => {
       state.activeTabName = e.name
       emit('activeTab', e.name)
@@ -144,6 +149,7 @@ export default {
       tabClick,
       renderRemoteData,
       refresh,
+      changeTab,
       saveRecord
     }
   }