| ... | ... | @@ -4,77 +4,102 @@ | 
| 4 | 4 | <!-- 待完善封装InputGroup --> | 
| 5 | 5 | <InputGroup compact> | 
| 6 | 6 | <Select | 
| 7 |  | -        v-if="type !== '2'" | 
|  | 7 | +        v-if="type !== RequestMethodTypeEnum.WEBSOCKET" | 
| 8 | 8 | placeholder="请求类型" | 
| 9 |  | -        :style="{ width: type !== '2' ? 15 + '%' : 0 + '%' }" | 
| 10 |  | -        v-model:value="valueObj.requestHttpType" | 
|  | 9 | +        :style="{ width: type !== RequestMethodTypeEnum.WEBSOCKET ? 15 + '%' : 0 + '%' }" | 
|  | 10 | +        v-model:value="requestTypeUrlValue.requestHttpType" | 
| 11 | 11 | :options="selectOptions" | 
| 12 | 12 | allowClear | 
| 13 | 13 | @change="emitChange" | 
| 14 | 14 | /> | 
| 15 | 15 | <Input | 
| 16 |  | -        @change="emitChange" | 
| 17 | 16 | placeholder="请输入接口地址" | 
| 18 |  | -        v-model:value="valueObj.requestUrl" | 
| 19 |  | -        :style="{ width: type !== '2' ? 85 + '%' : 100 + '%' }" | 
|  | 17 | +        v-model:value="requestTypeUrlValue.requestUrl" | 
|  | 18 | +        :style="{ width: type !== RequestMethodTypeEnum.WEBSOCKET ? 85 + '%' : 100 + '%' }" | 
|  | 19 | +        @change="emitChange" | 
| 20 | 20 | /> | 
| 21 | 21 | </InputGroup> | 
| 22 | 22 | </div> | 
| 23 | 23 | </template> | 
| 24 | 24 | <script lang="ts" setup> | 
| 25 |  | -  import { reactive, ref, watchEffect } from 'vue'; | 
|  | 25 | +  import { reactive, ref, PropType, watch } from 'vue'; | 
| 26 | 26 | import { InputGroup, Select, Input } from 'ant-design-vue'; | 
| 27 |  | -  import type { SelectValue } from 'ant-design-vue/lib/select'; | 
| 28 | 27 | import { findDictItemByCode } from '/@/api/system/dict'; | 
| 29 |  | -  import { propTypes } from '/@/utils/propTypes'; | 
|  | 28 | +  import { RequestMethodTypeEnum } from '/@/views/dataview/publicApi/config/enum'; | 
| 30 | 29 |  | 
| 31 |  | -  type TypeInputGroup = { | 
| 32 |  | -    requestHttpType: SelectValue | undefined; | 
|  | 30 | +  interface requestTypeUrlConfig { | 
|  | 31 | +    requestHttpType: undefined; | 
| 33 | 32 | requestUrl?: string; | 
| 34 | 33 | disabled?: boolean; | 
| 35 |  | -  }; | 
|  | 34 | +  } | 
| 36 | 35 |  | 
| 37 |  | -  type selectType = { label: string; value: string; disabled?: boolean }; | 
|  | 36 | +  type selectType = { | 
|  | 37 | +    label: string; | 
|  | 38 | +    value: string; | 
|  | 39 | +  }; | 
| 38 | 40 |  | 
| 39 | 41 | const props = defineProps({ | 
| 40 | 42 | type: { | 
| 41 | 43 | type: String, | 
|  | 44 | +      default: RequestMethodTypeEnum.COMMOM, | 
| 42 | 45 | }, | 
| 43 |  | -    value: propTypes.object.def({}), | 
|  | 46 | +    value: Object as PropType<requestTypeUrlConfig>, | 
| 44 | 47 | }); | 
| 45 | 48 |  | 
| 46 | 49 | const emits = defineEmits(['change', 'update:value']); | 
| 47 | 50 |  | 
| 48 | 51 | const selectOptions = ref<selectType[]>([]); | 
| 49 | 52 |  | 
| 50 |  | -  const getOptions = async (e) => { | 
| 51 |  | -    const res = await findDictItemByCode({ | 
| 52 |  | -      dictCode: e === '1' ? 'dataview_select_sql_request' : 'dataview_select_request', | 
|  | 53 | +  const getOptions = async (requestType) => { | 
|  | 54 | +    // 暂且排除SQL和WEBSOCKET | 
|  | 55 | +    const resItem = await findDictItemByCode({ | 
|  | 56 | +      dictCode: 'dataview_select_request', | 
| 53 | 57 | }); | 
| 54 |  | -    if (e === '1' || e === '0') { | 
| 55 |  | -      selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue })); | 
|  | 58 | +    if (requestType === RequestMethodTypeEnum.COMMOM) { | 
|  | 59 | +      selectOptions.value = resItem.map((m) => ({ label: m.itemText, value: m.itemValue })); | 
| 56 | 60 | } else { | 
| 57 | 61 | selectOptions.value = []; | 
| 58 | 62 | } | 
| 59 | 63 | }; | 
| 60 | 64 |  | 
| 61 |  | -  const valueObj = reactive<TypeInputGroup>({ | 
|  | 65 | +  const requestTypeUrlValue = reactive<requestTypeUrlConfig>({ | 
| 62 | 66 | requestHttpType: undefined, | 
| 63 | 67 | requestUrl: '', | 
| 64 | 68 | }); | 
| 65 | 69 |  | 
| 66 |  | -  watchEffect(() => { | 
| 67 |  | -    initVal(); | 
| 68 |  | -  }); | 
|  | 70 | +  watch( | 
|  | 71 | +    () => props.type, | 
|  | 72 | +    () => { | 
|  | 73 | +      initOption(); | 
|  | 74 | +    }, | 
|  | 75 | +    { | 
|  | 76 | +      immediate: true, | 
|  | 77 | +    } | 
|  | 78 | +  ); | 
|  | 79 | + | 
|  | 80 | +  watch( | 
|  | 81 | +    () => props.value, | 
|  | 82 | +    () => { | 
|  | 83 | +      initConfig(); | 
|  | 84 | +    }, | 
|  | 85 | +    { | 
|  | 86 | +      immediate: true, | 
|  | 87 | +    } | 
|  | 88 | +  ); | 
|  | 89 | + | 
|  | 90 | +  function initOption() { | 
|  | 91 | +    if (props.type) { | 
|  | 92 | +      getOptions(props.type); | 
|  | 93 | +    } | 
|  | 94 | +  } | 
| 69 | 95 |  | 
| 70 |  | -  async function initVal() { | 
| 71 |  | -    if (props?.type) await getOptions(props?.type); | 
| 72 |  | -    if (props?.value) for (let i in props.value) Reflect.set(valueObj, i, props.value[i]); | 
|  | 96 | +  function initConfig() { | 
|  | 97 | +    if (props?.value) | 
|  | 98 | +      for (let i in props.value) Reflect.set(requestTypeUrlValue, i, props.value[i]); | 
| 73 | 99 | } | 
| 74 | 100 |  | 
| 75 | 101 | function emitChange() { | 
| 76 |  | -    emits('change', valueObj); | 
| 77 |  | -    emits('update:value', valueObj); | 
|  | 102 | +    emits('change', requestTypeUrlValue); | 
|  | 103 | +    emits('update:value', requestTypeUrlValue); | 
| 78 | 104 | } | 
| 79 | 105 | </script> | 
| 80 |  | -<style scoped></style> | 
... | ... |  |