fix(forward): Fix the problem of duplicate creation of port forwardin… (#7975)

Refs #7969

Author: ssongliu

backend/app/dto/firewall.go

@@ -30,7 +30,8 @@ type PortRuleOperate struct {
 }
 
 type ForwardRuleOperate struct {
-	Rules []struct {
+	ForceDelete bool `json:"forceDelete"`
+	Rules       []struct {
 		Operation  string `json:"operation" validate:"required,oneof=add remove"`
 		Num        string `json:"num"`
 		Protocol   string `json:"protocol" validate:"required,oneof=tcp udp tcp/udp"`

backend/app/service/firewall.go

@@ -381,6 +381,10 @@ func (u *FirewallService) OperateForwardRule(req dto.ForwardRuleOperate) error {
 				TargetIP:   r.TargetIP,
 				TargetPort: r.TargetPort,
 			}, r.Operation); err != nil {
+				if req.ForceDelete {
+					global.LOG.Error(err)
+					continue
+				}
 				return err
 			}
 		}

frontend/src/api/modules/host.ts

@@ -98,7 +98,7 @@ export const operateFire = (operation: string) => {
 export const operatePortRule = (params: Host.RulePort) => {
     return http.post<Host.RulePort>(`/hosts/firewall/port`, params, TimeoutEnum.T_40S);
 };
-export const operateForwardRule = (params: { rules: Host.RuleForward[] }) => {
+export const operateForwardRule = (params: { rules: Host.RuleForward[]; forceDelete: boolean }) => {
     return http.post<Host.RulePort>(`/hosts/firewall/forward`, params, TimeoutEnum.T_40S);
 };
 export const operateIPRule = (params: Host.RuleIP) => {

frontend/src/views/host/firewall/forward/index.vue

@@ -77,7 +77,18 @@
             </div>
         </div>
 
-        <OpDialog ref="opRef" @search="search" />
+        <OpDialog ref="opRef" @search="search" @submit="onSubmitDelete()">
+            <template #content>
+                <el-form class="mt-4 mb-1" ref="deleteForm" label-position="left">
+                    <el-form-item>
+                        <el-checkbox v-model="forceDelete" :label="$t('website.forceDelete')" />
+                        <span class="input-help">
+                            {{ $t('website.forceDeleteHelper') }}
+                        </span>
+                    </el-form-item>
+                </el-form>
+            </template>
+        </OpDialog>
         <OperateDialog @search="search" ref="dialogRef" />
     </div>
 </template>
@@ -91,6 +102,7 @@ import { operateForwardRule, searchFireRule } from '@/api/modules/host';
 import { Host } from '@/api/interface/host';
 import i18n from '@/lang';
 import { GlobalStore } from '@/store';
+import { MsgSuccess } from '@/utils/message';
 
 const globalStore = GlobalStore();
 
@@ -107,6 +119,8 @@ const fireName = ref();
 const fireStatusRef = ref();
 
 const opRef = ref();
+const forceDelete = ref(false);
+const operateRules = ref();
 
 const data = ref();
 const paginationConfig = reactive({
@@ -180,18 +194,32 @@ const onDelete = async (row: Host.RuleForward | null) => {
             });
         }
     }
+    operateRules.value = rules;
     opRef.value.acceptParams({
         title: i18n.global.t('commons.button.delete'),
         names: names,
         msg: i18n.global.t('commons.msg.operatorHelper', [
             i18n.global.t('firewall.forwardRule'),
             i18n.global.t('commons.button.delete'),
         ]),
-        api: operateForwardRule,
-        params: { rules: rules },
+        api: null,
+        params: null,
     });
 };
 
+const onSubmitDelete = async () => {
+    loading.value = true;
+    await operateForwardRule({ rules: operateRules.value, forceDelete: forceDelete.value })
+        .then(() => {
+            loading.value = false;
+            MsgSuccess(i18n.global.t('commons.msg.deleteSuccess'));
+            search();
+        })
+        .catch(() => {
+            loading.value = false;
+        });
+};
+
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
@@ -208,6 +236,7 @@ const buttons = [
 ];
 
 onMounted(() => {
+    forceDelete.value = false;
     if (fireName.value !== '-') {
         loading.value = true;
         fireStatusRef.value.acceptParams();