Merge branch 'perf/public-interfac-option' into 'main_dev'

perf: 优化公共接口下拉选项

See merge request yunteng/thingskit-view!93

@@ -40,6 +40,7 @@ export interface PublicInterfaceRecord {
   requestUrl: string,
   requestParams: string,
   filter?:string//FT 新增一个字段filter
+  interfaceType?: string
 }
 
 

+export enum InterfaceTypeEnum {
+    SYSTEM = 'SYSTEM',
+    CUSTOM = 'CUSTOM'
+}
+export enum InterfaceTypeNameEnum {
+  SYSTEM = '系统默认',
+  CUSTOM = '自定义'
+}

 <script lang="ts" setup>
 import { getAllPublicInterface } from '@/api/external/dynamicRequest'
-import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model';
+import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams } from '@/api/external/dynamicRequest/model';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { RequestContentTypeEnum, RequestContentTypeNameEnum, RequestEnum } from '@/enums/external/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
-import { NCard, NEllipsis, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NSpace, NTabPane, NTabs, SelectOption } from 'naive-ui';
+import { NCard, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane, NTabs, SelectOption } from 'naive-ui';
 import { ref, computed, unref, nextTick, h } from 'vue'
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
@@ -14,6 +14,7 @@ import { DynamicForm } from '../DynamicForm';
 import { extraPublicInterfaceInfo } from '../DynamicForm/utils';
 import { isArray } from '@/utils';
 import { useTargetData } from '../../../../hooks/useTargetData.hook';
+import { InterfaceTypeEnum, InterfaceTypeNameEnum } from '@/enums/external/interfaceEnum';
 
 const publicInterfaceList = ref<PublicInterfaceRecord[]>([])
 
@@ -44,15 +45,20 @@ const getSelectedInterfaceParams = computed(() => {
 
 const getPublicInterfaceList = async () => {
   if (unref(publicInterfaceList).length) return
-   /**
-   * ft 更换接口
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码  const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
-   * 修改后代码 const result = await getAllPublicInterface()
-   */
+  /**
+  * ft 更换接口
+  * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+  * 源代码  const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
+  * 修改后代码 const result = await getAllPublicInterface()
+  */
   const result = await getAllPublicInterface()
   //ft
-  publicInterfaceList.value = result
+  publicInterfaceList.value = result.map(item => {
+    return {
+      ...item,
+      class: 'interface-option'
+    }
+  })
 }
 
 const handleFilter = (query: string, option: SelectOption) => {
@@ -116,14 +122,14 @@ const setDynamicFormValue = (request: ExtraRequestConfigType) => {
   /**
    * ft 优化动态表单包含有entityType，则自动回填DEVICE
    */
-  if(typeof request.requestParams ==='string' && request.requestParams) {
-     const DEVICE='DEVICE'
-     const {Params:includeEntityTypeByParams}=JSON.parse(request.requestParams as unknown as string) 
-     const findEntityType = includeEntityTypeByParams.find((item:Record<string,string>)=>item.key==='scope' && item.value==='entityType')
-     if(!findEntityType) return
-     if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData({
-       [findEntityType?.value]:DEVICE
-     })
+  if (typeof request.requestParams === 'string' && request.requestParams) {
+    const DEVICE = 'DEVICE'
+    const { Params: includeEntityTypeByParams } = JSON.parse(request.requestParams as unknown as string)
+    const findEntityType = includeEntityTypeByParams.find((item: Record<string, string>) => item.key === 'scope' && item.value === 'entityType')
+    if (!findEntityType) return
+    if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData({
+      [findEntityType?.value]: DEVICE
+    })
   }
   //ft
 }
@@ -156,7 +162,7 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
    * 源代码 selectedPublicInterface.value = requestDataPondId
    * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||''
    */
-  selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||''
+  selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === requestDataPondId)?.id || ''
   //ft
   requestContentTypeRef.value = requestContentType
   requestHttpTypeRef.value = requestHttpType
@@ -169,26 +175,27 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
   setDynamicFormValue(request)
 }
 
-  /**
-   * ft 修改在公共接口下拉框里加上接口类型
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 属于新增代码，源代码无
-   * 修改后代码在//ft之间
-   */
+/**
+ * ft 修改在公共接口下拉框里加上接口类型
+ * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+ * 源代码 属于新增代码，源代码无
+ * 修改后代码在//ft之间
+ */
 
-const getHttpType = (httpType:RequestEnum, contentType:number) => {
-  if(contentType===0){
-    if (httpType === RequestEnum[httpType]) return RequestEnum[httpType] 
+const getHttpType = (httpType: RequestEnum, contentType: number) => {
+  if (contentType === 0) {
+    if (httpType === RequestEnum[httpType]) return RequestEnum[httpType]
   }
-  else if (contentType===2) return 'WebSocket'
+  else if (contentType === 2) return 'WebSocket' 
 }
 
 const renderOption = (option: SelectOption) => {
-  const httpType = getHttpType(option?.requestHttpType as RequestEnum, option?.requestContentType as number)
-  const interfaceTypeName = option?.interfaceType === 'SYSTEM' ? '系统默认' :option?.interfaceType === 'CUSTOM'? '自定义':''
-  return h(NSpace, { justify: 'space-between', wrap: false, style: 'padding: 0 15px; height: 28px; line-height: 28px; width:100%' }, () => [
-    h(NEllipsis, null, () => `${!httpType?'':httpType+'/'}${interfaceTypeName}`),
-    h(NEllipsis, null, () => option.interfaceName),
+  const interfaceType = option?.interfaceType as InterfaceTypeEnum
+  const interfaceTypeName = interfaceType ? InterfaceTypeNameEnum[interfaceType] : ''
+  const interfaceName = option.interfaceName as string
+  return h('div', { style: 'display: flex; justify-content: space-between;' }, [
+    h('div', { style: 'flex: 0 0 100px' }, interfaceTypeName),
+    h('div', { style: 'flex: 1 1 auto; text-align: right; text-overflow: ellipsis; overflow: hidden;' }, interfaceName)
   ])
 }
 //ft
@@ -206,7 +213,7 @@ defineExpose({
   <SettingItemBox name="公共接口" :alone="true" :item-right-style="{ gridTemplateColumns: '5fr 2fr 1fr' }">
     <SettingItem name="请求方式 & URL地址">
       <NInputGroup>
-    <!-- 
+        <!-- 
       /**
         * ft 修改在公共接口下拉框里加上接口类型
         * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
@@ -269,7 +276,7 @@ defineExpose({
       :disabled="true" />
 
   </SettingItemBox>
- <!-- 
+  <!-- 
   /**
    * ft 修改
    * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
@@ -278,7 +285,8 @@ defineExpose({
    * 优化普通和websocket表格长度不一样样式问题
    */
  -->
-  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET" :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
+  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET"
+    :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
         <DynamicForm ref="socketDynamicFormEl" :paramsItemList="getSelectedInterfaceParams" />
@@ -304,3 +312,9 @@ defineExpose({
   }
 }
 </style>
+
+<style lang="scss">
+.interface-option> div {
+  width: 100%;
+}
+</style>