fix(props): isolate gift send forms

src/views/props/props-send-tool/index.vue

@@ -1,35 +1,67 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10">
-      <!-- 赠送道具 -->
-      <el-col v-if="buttonPermissions.includes('send:props')">
-        <send-props />
-      </el-col>
-      <!-- 赠送徽章 -->
-      <el-col v-if="buttonPermissions.includes('send:props:badge')">
-        <send-badge />
-      </el-col>
-      <!-- 赠送道具券 -->
-      <el-col v-if="buttonPermissions.includes('send:props:coupon')">
-        <send-ticket />
-      </el-col>
-    </el-row>
+    <el-tabs v-if="giftTabs.length" v-model="activeGiftTab" type="border-card">
+      <el-tab-pane
+        v-for="tab in giftTabs"
+        :key="tab.name"
+        :label="$t(tab.titleKey)"
+        :name="tab.name"
+      >
+        <!-- 只挂载当前赠送表单，避免未选择的赠送类型显示和参与必填校验。 -->
+        <component :is="tab.component" v-if="activeGiftTab === tab.name" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
-import SendProps from "./send-props";
-import SendBadge from "./send-badge";
-import SendTicket from "./send-ticket";
-import { mapGetters } from "vuex";
+import SendProps from './send-props'
+import SendBadge from './send-badge'
+import SendTicket from './send-ticket'
+import { mapGetters } from 'vuex'
 
 export default {
   components: { SendProps, SendBadge, SendTicket },
   data() {
-    return {};
+    return {
+      activeGiftTab: '',
+      giftTabDefinitions: [
+        {
+          name: 'props',
+          titleKey: 'pages.propsSendTool.title.props',
+          permission: 'send:props',
+          component: 'SendProps'
+        },
+        {
+          name: 'badge',
+          titleKey: 'pages.propsSendTool.title.badge',
+          permission: 'send:props:badge',
+          component: 'SendBadge'
+        },
+        {
+          name: 'ticket',
+          titleKey: 'pages.propsSendTool.title.ticket',
+          permission: 'send:props:coupon',
+          component: 'SendTicket'
+        }
+      ]
+    }
   },
   computed: {
-    ...mapGetters(["buttonPermissions"])
+    ...mapGetters(['buttonPermissions']),
+    giftTabs() {
+      return this.giftTabDefinitions.filter(tab => this.buttonPermissions.includes(tab.permission))
+    }
   },
-  created() {}
-};
+  watch: {
+    giftTabs: {
+      immediate: true,
+      handler(tabs) {
+        // 权限变化时始终落到第一个可用页签，保证页面只出现一个可提交的表单。
+        if (!tabs.some(tab => tab.name === this.activeGiftTab)) {
+          this.activeGiftTab = tabs.length ? tabs[0].name : ''
+        }
+      }
+    }
+  }
+}
 </script>