fix: 修改远程字段发送请求无效 (#278)

* fix：修复修改远程字段发送请求无效

* fix：修复请求参数处理函数未生效

* fix：修复数据源表单校验提前退出

* fix：修改提示语

* fix：按review添加注释

packages/plugins/datasource/src/DataSourceForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen" title="添加数据源">
+  <plugin-setting v-if="isOpen" title="设置数据源">
     <template #header>
       <button-group>
         <tiny-button class="field-save" type="primary" @click="save">保存</tiny-button>

packages/plugins/datasource/src/DataSourceList.vue

@@ -13,7 +13,7 @@
           <div class="item-handler">
             <svg-button
               class="set-page"
-              tips="全局设置"
+              tips="设置数据源"
               name="text-source-setting"
               v-if="state.showSetting && index === state.hoverIndex"
               @mousedown.stop.prevent="openDataSourceForm(item, index)"

packages/plugins/datasource/src/DataSourceRemoteDataAdapter.vue

@@ -81,7 +81,7 @@ export default {
 
     watch(
       () => [state.dataHandler, state.willFetch, state.shouldFetch, state.errorHandler],
-      ({ dataHandler, willFetch, shouldFetch, errorHandler }) => {
+      ([dataHandler, willFetch, shouldFetch, errorHandler]) => {
         emit('update:modelValue', { dataHandler, willFetch, shouldFetch, errorHandler })
       }
     )

packages/plugins/datasource/src/DataSourceRemoteDataResult.vue

@@ -9,7 +9,7 @@
         class="life-cycle-alert"
       ></tiny-alert>
     </div>
-    <div class="data-editor">
+    <div id="remote-data-editor" class="data-editor">
       <monaco-editor ref="editor" :value="state.value" class="monaco-editor" :options="state.options" />
     </div>
   </div>

packages/plugins/datasource/src/DataSourceRemotePanel.vue

@@ -3,7 +3,10 @@
     <plugin-setting title="获取远程字段" :isSecond="true" @cancel="closePanel" @save="saveRemote">
       <template #content>
         <div class="create-config">
-          <data-source-remote-form v-model="state.remoteData.options"></data-source-remote-form>
+          <data-source-remote-form
+            v-model="state.remoteData.options"
+            @sendRequest="sendRequest"
+          ></data-source-remote-form>
           <data-source-remote-autoload v-model="state.remoteData.options.isSync"></data-source-remote-autoload>
           <div class="tabBox">
             <tiny-tabs v-model="state.activeNameTabs">
@@ -22,7 +25,7 @@
           <div>
             <tiny-collapse v-model="state.activeName">
               <tiny-collapse-item name="result">
-                <template #title> 请求结果</template>
+                <template #title>请求结果</template>
                 <data-srouce-remote-data-result v-model="state.remoteData.result"></data-srouce-remote-data-result>
               </tiny-collapse-item>
             </tiny-collapse>
@@ -43,7 +46,7 @@ import DataSourceRemoteAutoload from './DataSourceRemoteAutoload.vue'
 import DataSourceRemoteAdapter from './DataSourceRemoteDataAdapter.vue'
 import DataSrouceRemoteDataResult, { getResponseData } from './DataSourceRemoteDataResult.vue'
 import { open as openRemoteMapping } from './DataSourceRemoteMapping.vue'
-import { useModal, useDataSource } from '@opentiny/tiny-engine-controller'
+import { useModal, useDataSource, useNotify } from '@opentiny/tiny-engine-controller'
 import { isEmptyObject } from '@opentiny/vue-renderless/common/type'
 import { obj2String, string2Obj } from '@opentiny/tiny-engine-controller/adapter'
 import { getRequest } from './js/datasource'
@@ -152,17 +155,17 @@ export default {
       })
     }
 
-    const sendRequest = () => {
-      getServiceForm().validate((valid) => {
-        if (!valid) {
-          confirm({
-            title: '提示',
-            message: '请求地址和请求方式必填！！！'
-          })
+    const sendRequest = async () => {
+      const valid = await getServiceForm().validate()
 
-          return
-        }
-      })
+      if (!valid) {
+        confirm({
+          title: '提示',
+          message: '请求地址和请求方式必填！！！'
+        })
+
+        return
+      }
 
       const options = { ...state.remoteData.options }
 
@@ -181,9 +184,24 @@ export default {
         .load()
         .then((res) => {
           state.remoteData.result = Array.isArray(res?.data?.items) ? res.data.items[0] : res?.data || res
+
+          useNotify({
+            type: 'success',
+            title: '请求成功',
+            message: '返回已填充到"请求结果"'
+          })
+
+          // "请求结果"代码编辑框
+          const remoteDataEditor = document.querySelector('#remote-data-editor')
+
+          remoteDataEditor.scrollIntoView()
         })
         .catch((error) => {
-          useModal().message({ message: error.message || '请求失败，请确认请求地址是否正确！', status: 'error' })
+          useNotify({
+            type: 'error',
+            title: '请求失败',
+            message: error.message || '请求失败，请确认请求地址是否正确！'
+          })
         })
     }