feat:合并

src/components/drawers/AddGroup.vue

@@ -3,7 +3,7 @@
     :visible="Avisible"
     class="drawerStyle addgroup"
     placement="right"
-    width="70%"
+    width="660px"
     @after-visible-change="afterVisibleChange"
   >
     <div class="drawerMain">
@@ -33,6 +33,23 @@
             />
           </div>
         </div>
+        <div class="name">
+          <div class="star" style="margin-top: -4px">
+            <img
+              style="width: 10px; height: 10px"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+          </div>
+          <div class="inname">组员人数:</div>
+          <div class="in">
+            <a-input
+              v-model:value="valuen"
+              placeholder="请输入组员人数"
+              style="border-radius: 8px; height: 40px"
+              maxlength="20"
+            />
+          </div>
+        </div>
         <div class="name">
           <div class="star" style="margin-top: -4px">
             <img

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="btn1" @click="closeDrawer">取消</button>
-        <button class="btn2">确定</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,
     };
   },

src/views/system/SystemManage.vue

@@ -115,6 +115,9 @@
 
     <div @click="randomgroup">分组</div>
     <SubsetManage v-model:Svisible="Svisible" />
+    <!-- 创建小组抽屉 -->
+    <div @click="showAddGroup">创建小组</div>
+    <AddGroup v-model:Avisible="Avisible" />
   </div>
 </template>
 <script>
@@ -135,6 +138,7 @@ import html2canvas from "html2canvas";
 
 import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
 import SubsetManage from "../../components/drawers/SubsetManage.vue";
+import AddGroup from "../../components/drawers/AddGroup.vue";
 export default {
   name: "SystemManage",
   components: {
@@ -145,6 +149,7 @@ export default {
     QrcodeVue,
     TwoDimensionalCode,
     SubsetManage,
+    AddGroup,
   },
 
   setup() {
@@ -254,7 +259,8 @@ export default {
         },
       ],
       selectedRowKeys: [],
-      Svisible: true,
+      Svisible: false,
+      Avisible: false,
     });
 
     const showDrawer = () => {
@@ -437,6 +443,9 @@ export default {
     const randomgroup = () => {
       state.Svisible = true;
     };
+    const showAddGroup = () => {
+      state.Avisible = true;
+    };
     return {
       ...toRefs(state),
       showDrawer,
@@ -450,6 +459,7 @@ export default {
 
       onSelectChange,
       randomgroup,
+      showAddGroup,
     };
   },
 };