feat:合并

src/components/drawers/SubsetManage.vue

@@ -3,7 +3,7 @@
     :visible="Svisible"
     class="drawerStyle subset"
     placement="right"
-    width="640px"
+    width="660px"
     @after-visible-change="afterVisibleChange"
   >
     <div class="drawerMain">
@@ -19,30 +19,30 @@
         <div class="group">
           <span>创建：</span>
           <a-input-number
-            :min="0"
+            :min="1"
             :precision="0"
             style="width: 64px; height: 40px; border-radius: 8px"
-            v-model:value="inputV2"
+            v-model:value="groupNum"
           />
           <span style="margin-left: 8px">个小组，</span>
           <span>每组：</span>
           <a-input-number
-            :min="0"
+            :min="1"
             :precision="0"
             style="width: 64px; height: 40px; border-radius: 8px"
-            v-model:value="inputV2"
+            v-model:value="peopleNum"
           />
           <span style="margin-left: 8px">个学员</span>
-          <button class="sure">确定</button>
+          <button class="sure" @click="showAddGroup">确定</button>
         </div>
         <!-- <div class="groupl">小组：</div> -->
         <div>
-          <div class="groupin">
+          <div class="groupin" v-for="(value, index) in groupNum2" :key="index">
             <a-input
-              v-model:value="value1"
+              v-model:value="value.name"
               style="border-radius: 8px; height: 40px"
             />
-            <div class="peopleNum">20</div>
+            <div class="peopleNum">{{ peopleNum2 }}</div>
             <span style="margin-left: 3px">人</span>
             <div class="delete">删除</div>
           </div>
@@ -54,8 +54,8 @@
       </div> -->
       <!-- <div class="zhu">注：随机分组不对小组长生效</div> -->
       <div class="btnn">
-        <button class="btn1">取消</button>
-        <button class="btn2">确定</button>
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="addGroup">确定</button>
       </div>
     </div>
     <!-- 创建小组抽屉 -->
@@ -66,6 +66,7 @@
 <script>
 import { reactive, toRefs } from "vue";
 import AddGroup from "./AddGroup.vue";
+import { message } from "ant-design-vue";
 export default {
   name: "SubsetManage",
   components: { AddGroup },
@@ -81,6 +82,10 @@ export default {
       value1: "",
       value2: "",
       value3: "",
+      groupNum: null,
+      peopleNum: null,
+      groupNum2: [],
+      peopleNum2: 0,
     });
     const closeDrawer = () => {
       ctx.emit("update:Svisible", false);
@@ -94,8 +99,28 @@ export default {
       state.Svisible = true;
     };
 
+    // const showAddGroup = () => {
+    //   state.Avisible = true;
+    // };
+
+    //展示要增加的小组
     const showAddGroup = () => {
-      state.Avisible = true;
+      if (!state.groupNum) return message.warning("请输入要添加的小组数");
+      if (!state.peopleNum) return message.warning("请输入每组的人员数");
+      let arr = [];
+      for (let i = 0; i < state.groupNum; i++) {
+        let obj = {
+          name: "",
+          number: state.peopleNum,
+        };
+        arr.push(obj);
+      }
+      state.groupNum2 = arr;
+      state.peopleNum2 = state.peopleNum;
+    };
+    //添加小组
+    const addGroup = () => {
+      console.log("state.groupNum2", state.groupNum2);
     };
     return {
       ...toRefs(state),
@@ -103,6 +128,7 @@ export default {
       showDrawer,
       closeDrawer,
       showAddGroup,
+      addGroup,
       // change,
     };
   },