From bf2bc188a58595dee19e51d222224f78e9ed7e4a Mon Sep 17 00:00:00 2001
From: Gene <Pacify.98@gmail.com>
Date: Mon, 26 Feb 2024 14:16:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E6=BA=90=E8=BF=9C?=
 =?UTF-8?q?=E7=A8=8B=E5=AD=97=E6=AE=B5=E8=A1=A8=E5=8D=95=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=20(#309)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 数据源远程字段表单验证样式修改
---
 .../datasource/src/DataSourceRemoteForm.vue   | 56 ++++++++++---------
 .../datasource/src/DataSourceRemotePanel.vue  | 15 ++---
 .../plugins/datasource/src/js/datasource.js   |  3 +-
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/packages/plugins/datasource/src/DataSourceRemoteForm.vue b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
index e38cc112..f011777e 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteForm.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
@@ -8,33 +8,29 @@
     :rules="rules"
     validate-type="text"
   >
-    <!-- <tiny-form-item label="名称" prop="name">
-      <tiny-input v-model="state.serviceForm.name" placeholder="只能包含数字字母及下划线"></tiny-input>
-    </tiny-form-item> -->
-
-    <tiny-form-item label="描述" prop="description">
-      <tiny-input v-model="state.serviceForm.description" placeholder="请输入"></tiny-input>
-    </tiny-form-item>
-
     <tiny-form-item label="请求地址" prop="uri">
       <div class="textarea-warp">
+        <tiny-select
+          class="selectResType"
+          v-model="state.serviceForm.method"
+          placeholder="请选择"
+          :options="state.requestData"
+        >
+        </tiny-select>
         <tiny-input class="border-input" v-model="state.serviceForm.uri" resize="none" placeholder="请输入">
-          <template #prepend>
-            <tiny-select class="selectResType" v-model="state.serviceForm.method" placeholder="请选择">
-              <tiny-option v-for="item in state.requestData" :key="item.value" :label="item.value" :value="item.value">
-              </tiny-option>
-            </tiny-select>
-          </template>
           <template #append><a class="requestBtn" type="info" @click="$emit('sendRequest')">发送请求</a></template>
         </tiny-input>
       </div>
     </tiny-form-item>
+    <tiny-form-item label="请求描述" prop="description">
+      <tiny-input v-model="state.serviceForm.description" placeholder="请输入"></tiny-input>
+    </tiny-form-item>
   </tiny-form>
 </template>
 
 <script>
 import { reactive, watchEffect, ref } from 'vue'
-import { Form, FormItem, Input, Select, Option } from '@opentiny/vue'
+import { Form, FormItem, Input, Select } from '@opentiny/vue'
 
 const serviceFormRef = ref(null)
 
@@ -47,8 +43,7 @@ export default {
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
-    TinySelect: Select,
-    TinyOption: Option
+    TinySelect: Select
   },
   props: {
     modelValue: {
@@ -60,21 +55,22 @@ export default {
     const state = reactive({
       serviceForm: {},
       requestData: [
-        { text: 'JSONP', value: 'JSONP' },
-        { text: 'GET', value: 'GET' },
-        { text: 'POST', value: 'POST' },
-        { text: 'PUT', value: 'PUT' },
-        { text: 'DELETE', value: 'DELETE' }
+        { label: 'JSONP', value: 'JSONP' },
+        { label: 'GET', value: 'GET' },
+        { label: 'POST', value: 'POST' },
+        { label: 'PUT', value: 'PUT' },
+        { label: 'DELETE', value: 'DELETE' }
       ]
     })
 
     watchEffect(() => {
       state.serviceForm = props.modelValue
+      state.serviceForm.method = state.serviceForm.method || state.requestData[0].value
     })
 
     const rules = {
-      uri: [{ required: true, message: '必填', trigger: 'change' }],
-      method: { required: true, message: '必选', trigger: 'change' }
+      uri: [{ required: true, message: '必填', trigger: ['change', 'blur'] }],
+      method: { required: true, message: '必选', trigger: ['change', 'blur'] }
     }
 
     return {
@@ -119,9 +115,11 @@ export default {
         }
       }
     }
-    :deep(.tiny-input-display-only) {
+    :deep(.tiny-input-suffix) {
+      width: 100px;
       .tiny-input__inner {
-        border-left: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
     :deep(.tiny-input-group__append) {
@@ -131,6 +129,12 @@ export default {
     .requestBtn {
       color: var(--ti-lowcode-datasource-respones-border-color-bg);
     }
+    :deep(.border-input) {
+      input {
+        border-radius: 0;
+        border-left: none;
+      }
+    }
   }
   .tiny-button-group {
     width: 100%;
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index 3d68648b..11028c63 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -46,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, useNotify } from '@opentiny/tiny-engine-controller'
+import { 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'
@@ -94,7 +94,6 @@ export default {
   emits: ['confirm'],
   setup(props, { emit }) {
     const dataSourceRemoteAdapteRef = ref(null)
-    const { confirm } = useModal()
     const { dataSourceState } = useDataSource()
 
     const state = reactive({
@@ -156,14 +155,10 @@ export default {
     }
 
     const sendRequest = async () => {
-      const valid = await getServiceForm().validate()
-
-      if (!valid) {
-        confirm({
-          title: '提示',
-          message: '请求地址和请求方式必填！！！'
-        })
-
+      try {
+        // await validate() 如果验证不通过会抛出异常，而不是返回 false
+        await getServiceForm().validate()
+      } catch (error) {
         return
       }
 
diff --git a/packages/plugins/datasource/src/js/datasource.js b/packages/plugins/datasource/src/js/datasource.js
index 27184f40..a41b44c4 100644
--- a/packages/plugins/datasource/src/js/datasource.js
+++ b/packages/plugins/datasource/src/js/datasource.js
@@ -82,9 +82,10 @@ export const getRequest = (config) => {
   }
 
   const errorHandler = (error) => {
-    createFn(config.errorHandler.value)(error)
+    const reject = createFn(config.errorHandler.value)(error)
     dataSource.status = 'error'
     dataSource.error = error
+    return reject
   }
 
   http.interceptors.request.use(willFetch, errorHandler)