dy-admin-manager/src/views/studentManager/modals/setMemberDate.vue

<template>
  <div>
    <!-- <p class="title">已选择{{ multipleSelection.length }}名学员</p> -->
    <el-form :model="memberForm" label-width="110px" ref="memberForm">
      <el-form-item label="学练宝版本" prop="memberRankSettingId" :rules="[
          { required: true, message: '请选择学练宝版本' }
        ]">
        <el-cascader
          v-model.trim="memberForm.memberRankSettingId"
          :options="memberRankList"
          :props="{ value: 'id', label: 'name'  }"
          :show-all-levels="false"
          style="width: 100% !important"
          collapse-tags
          clearable
          placeholder="请选择学练宝版本"
          @change="formatCloudInfo"
        ></el-cascader>
        <div v-if="selectItem.memberRankId">{{ selectItem.memberRankName }}剩余<span style="color: red;">{{ selectItem.remainingDays }}</span>天</div>
      </el-form-item>
      <el-form-item :label="`${staffText}周期`" prop="periodType" :rules="[
          { required: true, message: '请选择周期' }
        ]">
        <el-select
          placeholder="请选择周期"
          clearable
          v-model.trim="memberForm.periodType"
          style="width: 100% !important"
          :disabled="type !== 'add'"
        >
          <el-option v-if="type !== 'add'" label="天" value="DAY"></el-option>
          <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-select>
      </el-form-item>
      <el-form-item
        :label="`${staffText}数量`"
        prop="number"
        :rules="[
          { required: true, message: '请输入数量', trigger: 'blur' },
          { validator: validateNum, trigger: 'blur' }
        ]"
      >
        <el-input
          type="number"
          v-model="memberForm.number"
          placeholder="请输入数量"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        :label="`${staffText}原因`"
        prop="memo"
        :rules="[{ required: true, message: '请输入原因', trigger: 'blur' }]"
      >
        <el-input
          type="textarea"
          show-word-limit
          maxlength="100"
          :rows="3"
          v-model.trim="memberForm.memo"
          placeholder="请输入原因"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否发送推送" prop="pushFlag" :rules="[
          { required: true, message: '是否发送推送', trigger: 'blur' }
        ]">
        <el-radio-group v-model="memberForm.pushFlag">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { setStudentMembe } from "../api";
import { getmemberRankList, getAllMemberFindByOrganIds } from '@/views/categroyManager/productSystem/api'
export default {
  props: ["row", "type"],
  data() {
    return {
      memberRankList: [],
      memberForm: {
        studentId: null,
        memberRankSettingId: null,
        number: null,
        periodType: null,
        memo: null,
        pushFlag: 1
      },
      organId: null,
      rulesForm: null, // 范围
      memberFeeSetting: null,
      selectItem: {}
    };
  },
  computed: {
    staffText() {
      return this.type === 'add' ? '添加' : '扣减'
    }
  },
  mounted() {
    this.memberForm.studentId = this.row.student.userId;
    console.log(this.row, 'this.row')
    if(this.type !== "add") {
      this.memberForm.periodType = "DAY"
    }
    this.getMemberList()
  },
  methods: {
    validateNum(rule,  value, callback) {
      if(/^[1-9]\d*$/.test(value)) {
        return callback()
      } else {
        return callback(new Error(`请输入大于0的正整数`));
      }
    },
    async getMemberList() {
      try {
        if(this.type === 'add') {
          const { data } = await getAllMemberFindByOrganIds([this.row.student.organId], false)
          this.memberRankList = data || [];
        } else {
          const { data } = await getmemberRankList({  studentId: this.type === 'add' ? null : this.memberForm.studentId, delFlag: true })
          this.memberRankList = data || [];
        }
      } catch (e) {
        console.log(e);
      }
    },
    formatCloudInfo(val) {
      const vipInfo = this.row.vipInfo || []
      let rankId = val ? val[val.length - 1] : null
      let selectItem = {}
      vipInfo.forEach(item => {
        if(item.memberRankId === rankId) {
          selectItem = item
        }
      })
      this.selectItem = selectItem
    },
    onClose() {
      this.$emit("close");
    },
    onSubmit() {
      this.$refs.memberForm.validate(async (res) => {
        if (res) {
          try {
            const { memberRankSettingId, ...more } = this.memberForm
            let rankId = null;
            if(memberRankSettingId && memberRankSettingId.length > 0) {
              rankId = memberRankSettingId[memberRankSettingId.length - 1]
            }
            await setStudentMembe({ ...more, memberRankId: rankId, type: this.type === 'add' ? 2 : 3});
            this.$message.success("修改成功");
            this.$emit("close");
            this.$emit("confirm");
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 30px;
  font-size: 16px;
  color: #000;
}
</style>