fe-manage/src/components/drawers/AllStuOver.vue

<template>
  <a-modal
    :visible="ASOvervisible"
    :closable="closable"
    centered="true"
    :footer="null"
    wrapClassName="AllStuOverModel"
    @cancel="closeModal"
  >
    <div class="head">
      <div class="inhead">
        <div class="left">
          <div class="gan"></div>
          <div class="tis">提示</div>
        </div>
        <div class="right" @click="closeModal"></div>
      </div>
    </div>
    <div class="main">确定将所选学员标记完成吗</div>
    <div class="butn">
      <button class="btn btn1" @click="closeModal">取消</button>
      <button class="btn btn2" @click="batchFinishTask">确定</button>
    </div>
  </a-modal>
</template>

<script>
import { toRefs, reactive } from "vue";
import { message } from "ant-design-vue";
import * as api from "../../api/index1";
export default {
  props: {
    ASOvervisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: null,
    },
    ids: {
      type: Array,
      default: () => [],
    },
    taskId: {
      type: Number,
      default: null,
    },
    pid: {
      type: Number,
      default: null,
    },
    taskType: {
      type: Number,
      default: null,
    },
    currentStageId: {
      type: Number,
      default: null,
    },
    getStudent: {
      type: Function,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      closable: false,
    });
    const closeModal = () => {
      ctx.emit("update:ASOvervisible", false);
    };

    //批量标记完成
    const batchFinishTask = () => {
      if (props.ids.length === 0) {
        message.destroy();
        message.warning("请选择学员");
        return;
      }

      let obj = {
        ids: props.ids,
        type: props.type,
        taskId: props.taskId,
        pid: props.pid,
        taskType: props.taskType,
        currentStageId: props.currentStageId,
      };
      // console.log("props.studentsId", props.ids, obj);
      api
        .batchFinishTask(obj)
        .then((res) => {
          console.log("批量标记结果", res);

          if (res.data.code === 200) {
            message.destroy();
            message.success("标记成功");
            closeModal();
            props.getStudent && props.getStudent();
            ctx.emit("update:ids", []);
            // console.log("props.getStudent", props.getStudent);
          }
        })
        .catch((err) => {
          console.log("批量标记失败", err);
        });
    };
    return {
      ...toRefs(state),
      closeModal,
      batchFinishTask,
    };
  },
};
</script>
<style lang="scss">
.AllStuOverModel {

  .ant-modal {
    z-index: 999;
    width: 424px;
    height: 258px;

    .ant-modal-content {
      width: 424px;
      height: 258px;

      .ant-modal-body {
        width: 424px;
        height: 258px;
        padding: 0px;

        .head {
          width: 424px;
          height: 68px;
          // position: absolute;
          // left: 0;
          // top: 0;
          background: linear-gradient(
            180deg,
            rgba(78, 166, 255, 0.2) 0%,
            rgba(78, 166, 255, 0) 100%
          );
          display: flex;

          justify-content: center;

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

            .left {
              display: flex;
              align-items: center;

              .gan {
                width: 16px;
                height: 16px;
                background-image: url(../../assets/images/taskpage/gan.png);
              }

              .tis {
                margin-left: 5px;
                width: 32px;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
              }
            }

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

        .main {
          margin-top: 20px;
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }

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

          .btn {
            width: 100px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
          }

          .btn1 {
            color: #387df7;

            background: #ffffff;
            border: 1px solid #387df7;
          }

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