fe-manage/src/components/student/ChangeGroupModal.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-12-20 17:00:37
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-02-11 15:06:13
 * @FilePath: /fe-manage/src/components/student/ChangeLevelModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal style="padding: 0" :closable="true" :visible="changegroupV" :footer="null" centered="true"
    wrapClassName="changeModal">
    <div class="con">
      <div class="header">
        <div class="inhe">
          <div class="mod"></div>
          <div class="tz">换组</div>
          <div class="mg" @click="closeChangeModal"></div>
        </div>
      </div>
      <div class="mid">
        <div class="inher">
          <!-- <div class="cur">当前关卡：关卡2</div> -->
          <div class="select">
            <a-select v-model:value="selectGroupId" style="width: 100%" placeholder="请选择小组" :options="option" allowClear
              @change="selectGroup"></a-select>
          </div>
          <div class="btn">
            <button class="sameb btn1" @click="closeChangeModal" style="cursor: pointer">
              取消
            </button>
            <button class="sameb btn2" @click="changeGroup" style="cursor: pointer">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { computed, defineEmits, defineProps, ref } from "vue";
import * as api from "@/api/index1";
import { message } from "ant-design-vue";
// import { message } from "ant-design-vue";

const props = defineProps({
  changegroupV: {
    type: Boolean,
    default: false,
  },
  groupList: {
    type: Array,
    default: () => [],
  },
  checkgroupStuId: {
    type: Number,
    default: null,
  },
});

const option = computed(() => {
  debugger
  console.log("props.groupList", props.groupList);
  return props.groupList.map((e) => ({
    label: e.groupName,
    value: e.projectGroupId,
  }));
});
console.log("changegroupV", props.changegroupV);
const selectGroupId = ref();
const selectGroupName = ref();
const emit = defineEmits({});

const closeChangeModal = () => {
  emit("update:changegroupV", false);
  selectGroupId.value = null;
};
const selectGroup = (e, v) => {
  console.log("选择小组", e, v);
  selectGroupName.value = v.label;
};
//确认换组
const changeGroup = (item) => {
  // debugger
  console.log("换组", selectGroupId.value, item);
  props.checkgroupStuId.forEach(stu => {
    let obj = {
      groupId: selectGroupId.value,
      groupName: selectGroupName.value,
      studentId: stu,
    };
    console.log("换组obj", obj);
    api
      .changeGroupByStudentId(obj)
      .then((res) => {
        console.log("换组成功", res);
        if (res.data.code === 200) {
          message.success("换组成功");
          closeChangeModal();
        }
      })
      .catch((err) => {
        console.log("换组失败", err);
      });
  })

};
</script>

<style  lang="scss">
.changeModal {
  .ant-modal {
    width: 549px !important;
    height: 245px !important;

    .ant-modal-close-x {
      display: none;
    }

    .ant-modal-content {
      width: 549px !important;
      height: 245px !important;

      .ant-modal-body {
        padding: 0 !important;
        width: 549px !important;
        height: 245px !important;

        .con {
          // background-color: #bfa;
          width: 100%;
          height: 100%;

          .header {
            width: 100%;
            display: flex;
            height: 68px;
            position: relative;
            justify-content: center;

            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
                rgba(78, 166, 255, 0) 100%);

            .inhe {
              width: 80%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .mod {
                left: 30px;
                top: 27px;
                position: absolute;
                width: 18px;
                height: 17px;
                background-image: url(../../assets/images/leveladd/mod.png);
              }

              .tz {
                color: #000000;
                font-weight: 400;
                font-size: 16px;
              }

              .mg {
                width: 20px;
                height: 20px;
                background-image: url(../../assets/images/basicinfo/close22.png);
                background-size: 100% 100%;
                cursor: pointer;
              }
            }
          }

          .mid {
            width: 100%;
            display: flex;
            height: 100%;
            justify-content: center;

            .inher {
              width: 80%;
              height: 100%;

              .cur {
                color: #6f6f6f;
                font-size: 14px;
              }

              .select {
                margin-top: 10px;
              }

              .btn {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 30px;

                .sameb {
                  width: 100px;
                  height: 40px;
                  font-size: 14px;

                  border-radius: 8px;
                }

                .btn1 {
                  color: #4ea6ff;
                  background: #ffffff;
                  border: 1px solid #4ea6ff;
                }

                .btn2 {
                  margin-left: 16px;
                  border: 0;
                  color: #ffffff;
                  background: #4ea6ff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>