dy-admin-manager/src/views/categroyManager/generalSettings/vipParameterManager.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div> vip参数设置
    </h2>
    <div class="m-core">
      <div class="listWrap">
        <div class="left">
          <div class="newBand"
               @click="addGroupCategory">新建</div>
          <el-table :data='leftList'
                    :header-cell-style="{background:'#EDEEF0',color:'#444'}">
            <el-table-column label="课程形式"
                             prop="name"
                             width="180">
            </el-table-column>
            <el-table-column label="班级人数"
                             prop="studentNum"
                             width="180">
            </el-table-column>
            <el-table-column label="课程课时"
                             prop="singleClassMinutes"
                             width="180">
            </el-table-column>
            <el-table-column label="操作"
                             width="180">
              <template slot-scope="scope">
                <div>
                  <el-button type="text"
                             @click="resetGroupCategory(scope.row)">修改</el-button>
                  <el-popover placement="top"
                              width="160"
                              :ref="scope.row.id">
                    <p>您确定删除该课程形态吗?</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini"
                                 type="text"
                                 @click="scope._self.$refs[scope.row.id].doClose()">取消</el-button>
                      <el-button type="primary"
                                 size="mini"
                                 @click="removeGroupCategory(scope)">确定</el-button>
                    </div>
                    <el-button type="text"
                               slot="reference">删除</el-button>
                  </el-popover>

                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="right">
          <div class="newBand"
               @click="addVipTimer">新建</div>
          <el-table :data='rightList'
                    :header-cell-style="{background:'#EDEEF0',color:'#444'}">
            <el-table-column label="达到课时总数/次"
                             prop="maxClassTimes"
                             width="180">
            </el-table-column>
            <el-table-column label="可排课时间段"
                             prop="month"
                             width="180">
            </el-table-column>
            <el-table-column label="操作"
                             width="180">
              <template slot-scope="scope">
                <div>
                  <el-button type="text"
                             @click="resetTimerList(scope.row)">修改</el-button>
                  <el-popover placement="top"
                              width="160"
                              :ref="scope.row.id">
                    <p>您确定删除该周期循环吗?</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini"
                                 type="text"
                                 @click="scope._self.$refs[scope.row.id].doClose()">取消</el-button>
                      <el-button type="primary"
                                 size="mini"
                                 @click="removeDefaultClassesCycle(scope)">确定</el-button>
                    </div>
                    <el-button type="text"
                               slot="reference">删除</el-button>
                  </el-popover>

                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 课程类型新增弹窗 -->
    <el-dialog title="vip课程形式"
               class="courseMask"
               width="500px"
               :visible.sync="vipStatus">
      <el-form :model="vipStatusFrom"
               ref='vipStatus'>
        <el-form-item label="课程形式"
                      prop='name'
                      :label-width="formLabelWidth">
          <el-input v-model="vipStatusFrom.name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级人数"
                      prop="num"
                      :label-width="formLabelWidth">
          <el-input v-model="vipStatusFrom.num"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程课时"
                      prop="timer"
                      :label-width="formLabelWidth">
          <!-- <el-input v-model="vipStatusFrom.timer" 
                    autocomplete="off"></el-input> -->
          <el-tag :key="tag"
                  effect="dark"
                  type="info"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    style="width:100px;"
                    size="small"
                    @keyup.enter.native="handleInputConfirm">
          </el-input>
          <el-button v-if="!inputVisible"
                     class="button-new-tag"
                     size="small"
                     @click="showInput">+ 添加</el-button>
          <el-button v-if="inputVisible"
                     class="button-new-tag"
                     size="small"
                     @click="handleInputConfirm">保存</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="closeVipStatus">取 消</el-button>
        <el-button type="primary"
                   @click="addVipStatus">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 周期循环新增弹窗 -->
    <el-dialog title="vip时间段"
               width="500px"
               :visible.sync="timerStatus">
      <el-form :model="vipTimerFrom"
               ref='timerStatus'>
        <el-form-item label="达到课时总数/次"
                      prop='count'
                      :label-width="formLabelWidth">
          <el-input v-model="vipTimerFrom.count"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可排课时间段/月"
                      prop="timer"
                      :label-width="formLabelWidth">
          <el-input v-model="vipTimerFrom.timer"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="timerStatus=false">取 消</el-button>
        <el-button type="primary"
                   @click="addTimerStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { vipGroupCategory, getDefaultClassesCycle, addVipGroupCategory, resetVipGroupCategory, removeVipGroupCategory, addDefaultClassesCycle, resetDefaultClassesCycle, removeDefaultClassesCycle } from "@/api/vipSeting"
export default {
  data () {
    return {
      leftList: [],
      rightList: [],
      vipStatus: false, // 课程形态弹窗状态
      formLabelWidth: '120px',
      vipStatusFrom: {
        name: '',
        num: '',
        timer: [],
        isAdd: true,
        id: ''
      }, // 弹窗内容
      statusRemovevisible: false,
      timerStatus: false, //课程时间段弹窗状态
      vipTimerFrom: {
        count: '',
        timer: '',
        isAdd: true,
        id: ''
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  mounted () {
    this.getVipGroupCategoryList()
    this.getDefaultClassesCycle()
  },
  methods: {
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm () {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    getVipGroupCategoryList () {
      // 获取默认左边参数
      vipGroupCategory().then(res => {
        if (res.code == 200) {
          this.leftList = res.data;
        }
      })
    },
    getDefaultClassesCycle () {
      // 获取默认右边参数
      getDefaultClassesCycle().then(res => {
        this.rightList = res.data;
      })
    },
    // 新增分类
    addGroupCategory () {

      this.vipStatus = true;
      this.vipStatusFrom.isAdd = true;
      this.vipStatusFrom.id = '';
      this.vipStatusFrom.name = ''
      this.vipStatusFrom.num = ''
      this.dynamicTags = [];
    },
    closeVipStatus () {
      this.vipStatus = false;
    },
    addVipStatus () {
      // 点击添加后 发送请求单独添加=> 刷新列表
      // 判断是添加还是修改
      if (this.vipStatusFrom.isAdd) {
        // 添加
        addVipGroupCategory({
          name: this.vipStatusFrom.name,
          singleClassMinutes: this.dynamicTags.join(','),
          studentNum: this.vipStatusFrom.num
        }).then(res => {
          if (res.code == 200) {
            this.getVipGroupCategoryList();
            this.vipStatus = false;
          }
        })
      } else {
        // 修改
        resetVipGroupCategory({
          name: this.vipStatusFrom.name,
          singleClassMinutes: this.dynamicTags.join(','),
          studentNum: this.vipStatusFrom.num,
          id: this.vipStatusFrom.id
        }).then(res => {
          this.getVipGroupCategoryList();
          this.vipStatus = false;
        })
      }
    },
    resetGroupCategory (row) {
      // 修改课程形式
      this.vipStatus = true;
      this.vipStatusFrom.name = row.name;

      this.vipStatusFrom.timer = row.singleClassMinutes.split(',');
      this.dynamicTags = row.singleClassMinutes.split(',');
      this.vipStatusFrom.num = row.studentNum;
      this.vipStatusFrom.id = row.id;
      this.vipStatusFrom.isAdd = false;
    },
    removeGroupCategory (scope) {
      // 删除 
      removeVipGroupCategory({
        id: scope.row.id
      }).then(res => {
        if (res.code == 200) {
          // scope._self.$refs[scope.$index].doClose();
          this.getVipGroupCategoryList();
        }
      })
    },
    // 新增时间段
    addVipTimer () {
      this.timerStatus = true;
      this.vipTimerFrom.isAdd = true;
      this.vipTimerFrom.id = '';
    },
    addTimerStatus () {
      // 点击添加后 发送请求单独添加=> 刷新列表
      // 判断是添加还是修改
      if (this.vipTimerFrom.isAdd) {
        // 添加
        addDefaultClassesCycle({
          organId: null,
          maxClassTimes: this.vipTimerFrom.count,
          month: this.vipTimerFrom.timer,
        }).then(res => {
          if (res.code == 200) {
            this.getDefaultClassesCycle();
            this.timerStatus = false;
          }
        })
      } else {
        // 修改
        resetDefaultClassesCycle({
          maxClassTimes: this.vipTimerFrom.count,
          month: this.vipTimerFrom.timer,
          id: this.vipTimerFrom.id
        }).then(res => {
          this.getDefaultClassesCycle();
          this.timerStatus = false;
        })
      }
    },
    resetTimerList (row) {
      this.timerStatus = true;
      this.vipTimerFrom.count = row.maxClassTimes;
      this.vipTimerFrom.timer = row.month;
      this.vipTimerFrom.id = row.id;
      this.vipTimerFrom.isAdd = false;
    },
    // 删除时间管理
    removeDefaultClassesCycle (scope) {
      removeDefaultClassesCycle({
        id: scope.row.id
      }).then(res => {
        if (res.code == 200) {
          scope._self.$refs[scope.row.id].doClose()
          this.getDefaultClassesCycle();
        }
      })
    },
  },
  watch: {
    vipStatus (val) {
      if (!val) {
        this.$refs['vipStatus'].resetFields();
      }
    },
    timerStatus (val) {
      if (!val) {
        this.$refs['timerStatus'].resetFields();
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.left {
  margin-right: 20px;
}
.listWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
<style lang="scss">
.courseMask {
  .el-tag.el-tag--info {
    margin-right: 4px;
  }
}
</style>