dy-admin-manager/src/views/teamDetail/components/modals/createMember.vue

<template>
  <div>
    <!-- <p class="title">已选择{{ multipleSelection.length }}名学员</p> -->
    <el-form :model="memberForm" label-width="120px" ref="memberForm">
      <el-form-item
        label="赠送会员类型"
        prop="addType"
        :rules="[
          { required: true, message: '请选择赠送会员类型', trigger: 'blur' },
        ]"
      >
        <el-select
          placeholder="赠送会员类型"
          clearable
          v-model.trim="memberForm.addType"
          style="width: 100% !important"
        >
          <el-option label="月度" value="MONTH"></el-option>
          <el-option label="季度" value="QUARTERLY"></el-option>
          <el-option label="半年" value="YEAR_HALF"></el-option>
          <el-option label="年度" value="YEAR"></el-option>
          <el-option label="固定天数" value="DAY"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="赠送数量"
        prop="times"
        :rules="[
          { required: true, message: '请输入赠送数量', trigger: 'blur' },
        ]"
      >
        <el-input
          type="number"
          onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          v-model="memberForm.times"
          placeholder="请输入赠送数量"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { cloudAddStudents } from "../../api";
export default {
  props: ["multipleSelection"],
  data() {
    return {
      memberForm: {
        times: null,
        addType: null,
      },
      studentIds: [],
    };
  },
  mounted() {
    this.studentIds = this.multipleSelection
      .map((stu) => {
        return stu.userId;
      });
  },
  methods: {
    submit() {
      this.$refs.memberForm.validate(async (res) => {
        if (res) {
          try {
            const { times, addType } = this.memberForm
            await cloudAddStudents({
              times: Number(times),
              addType,
              studentIds: this.studentIds,
            });
            this.$message.success('添加会员成功')
            this.$emit("close");
            this.$emit("submited");
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 30px;
  font-size: 16px;
  color: #000;
}
</style>