fix: 数据源远程字段表单验证样式修改 (#309)

* fix: 数据源远程字段表单验证样式修改

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%;

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
       }
 

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)