perf(views): 优化 “添加接口”步骤

1.删除接口支持对话框交互
2.列表无数据支持缺省页显示
3.修复添加接口传参异常问题

src/views/register-gateway/AddInterface.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, useTemplateRef, watch } from 'vue';
 import { message } from 'ant-design-vue';
 
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
@@ -24,10 +25,12 @@ import type {
 } from '@/types';
 
 const props = defineProps<UseGuideStepItemProps<RegisterGatewayForm>>();
-
+const modalComponentRef = useTemplateRef('modalComponent');
 const currentStep = props.steps[props.stepIndex];
-
+const interfaceId = ref<number>();
 const interfaceList = ref<ListInterfaces[]>([]);
+const protocolName = ref<string>('');
+const linkName = ref<string>('');
 
 const listPhysicalInterfaces = ref<ListPhysicalInterfaces[]>([]);
 
@@ -82,36 +85,44 @@ const addInterface = () => {
   }
 
   interfaceList.value.forEach((item) => {
-    if (item.id === props.form.protocolId) {
-      props.form.linkName = item.name;
+    if (item.id === props.form.interfaceId) {
+      linkName.value = item.name;
     }
   });
 
   listPhysicalInterfaces.value.forEach((item) => {
-    if (item.id === props.form.interfaceId) {
-      props.form.protocolName = item.protocolName;
+    if (item.id === props.form.protocolId) {
+      protocolName.value = item.protocolName;
     }
   });
 
   handleRequest(async () => {
     await gatewayLinkAdd({
       interfaceId: props.form.interfaceId,
-      linkName: props.form.linkName,
+      linkName: linkName.value,
       gatewayId: props.form.id,
-      protocolType: props.form.protocolName,
+      protocolType: protocolName.value,
     });
     postGetList();
   });
 };
 
-// 删除接口
-const addDelete = (value: number) => {
+const confirm = () => {
   handleRequest(async () => {
-    await gatewayLinkDelete(value);
-    postGetList();
+    if (interfaceId.value) {
+      await gatewayLinkDelete(interfaceId.value);
+      modalComponentRef.value?.hideView();
+      postGetList();
+    }
   });
 };
 
+// 删除接口
+const addDelete = (value: number) => {
+  interfaceId.value = value;
+  modalComponentRef.value?.showView();
+};
+
 const getListPhysicalInterfaces = (value: number) => {
   handleRequest(async () => {
     listPhysicalInterfaces.value = await obtainListPhysicalInterfaces(value);
@@ -168,7 +179,7 @@ onMounted(() => {
           />
         </AFormItem>
 
-        <AFormItem :label="$t('registerGateway.selectProtocolParameters')" name="protocolId">
+        <AFormItem :label="$t('setupProtocol.selectProtocolType')" name="protocolId">
           <ASelect
             ref="select"
             v-model:value="form.protocolId"
@@ -186,7 +197,13 @@ onMounted(() => {
     <AButton class="dev-but" type="primary" @click="addInterface">{{ $t('common.add') }}</AButton>
 
     <div class="use-guide-title">{{ $t('registerGateway.interfaceList') }}</div>
-    <AFlex wrap="wrap">
+    <AFlex v-if="interfaceData.length === 0" justify="center" align="center" class="empty-data">
+      <div>
+        <img src="@/assets/img/no-data.png" alt="" />
+        <div class="empty-text">{{ $t('common.noData') }}</div>
+      </div>
+    </AFlex>
+    <AFlex v-else wrap="wrap">
       <AFlex v-for="item in interfaceData" :key="item.id" class="interface-list" align="center">
         <AFlex class="interface-div" justify="space-between" align="center">
           <AFlex align="center">
@@ -208,10 +225,33 @@ onMounted(() => {
         </div>
       </AFlex>
     </AFlex>
+    <ConfirmModal
+      ref="modalComponent"
+      :title="$t('common.deleteConfirmation')"
+      :description-text="$t('common.confirmDeletion')"
+      :icon="{ name: 'delete' }"
+      :icon-bg-color="'#F56C6C'"
+      @confirm="confirm"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+.empty-text {
+  margin-top: 16px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #ccc;
+}
+
+.empty-data {
+  width: 814px;
+  height: 40vh;
+  text-align: center;
+}
+
 .interface-width {
   width: 364px;
 }