fair-web/views/admin_classify.ejs

<% this.adminPage = 'classify'; %>
<% include admin_header %>
<style>
    [v-cloak] {
        display: none;
    }
    .current-classify{
        margin-bottom: 20px;
    }
</style>
<div id="classify" v-cloak>
    <div class="ui modal classify">
        <i class="close icon"></i>
        <div class="header">
            {{calcModalTitle}}
        </div>
        <div class="content">
            <div class="ui form">
                <div class="field required" :class="{ error: classifyName.length > 20 }">
                    <label>练习阶段名称(20字以内)</label>
                    <input type="text" v-model="classifyName" placeholder="请输入分类名称">
                </div>
                <div class="field required" :class="{ error: classifyName.length > 100 }">
                    <label>练习阶段简介(100字以内)</label>
                    <input type="text" v-model="classifyIntro" placeholder="请输入分类简介">
                </div>
                <div class="field required" >
                    <label>练习阶段顺序</label>
                    <el-input-number disabled v-model="order" :min="1" :max="calcOrderMax" label="练习阶段顺序"></el-input-number>
                </div>
                <div class="field required" :class="{ error: problemIdArray.length === 0 }">
                    <label>题目选择(至少包含一道题)</label>
                    <el-select
                            style="width:100%"
                            v-model="problemIdArray"
                            multiple
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="remoteMethod"
                            :loading="loading">
                        <el-option
                                v-for="item in problemOptions"
                                :key="item.value"
                                :label="item.label"
                                :disabled="item.disabled"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <button class="ui button" @click="submitInfo">{{calcModalTitle}}</button>
            </div>
        </div>
    </div>
    <div v-if="classifyArray.length === 0">
        <div class="ui placeholder segment">
            <div class="ui icon header">
                <i class="sticky note icon"></i>
                暂无练习阶段
            </div>
        </div>
    </div>
    <div v-else>
        <div class="current-classify">
            <h4>目前练习阶段</h4>
            <div class="ui cards">
                <div class="card" v-for="item in classifyArray">
                    <div class="content">
                        <div class="header">{{item.name}}</div>
                        <div class="description">
                            {{item.intro}}
                        </div>
                    </div>
                    <div class="ui bottom attached button" @click="show(item.id)">
                        <i class="add icon"></i>
                        编辑练习阶段信息
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui labeled button" tabindex="0" @click="show()">
        <div class="ui button">
            <i class="plus icon"></i> 新增练习阶段
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new window.Vue({
    el: '#classify',
    data: {
      problemIdArray: [],
      order: 1,
      classifyName: '',
      classifyIntro: '',
      classifyArray: [],
      classifyId: -1,
      problemOptions: [],
      loading: false,
    },
    created: function() {
      this.getClassifyInfo();
    },
    methods: {
      remoteMethod(query) {
        let that = this;
        if (query !== '') {
          if (this.usedProblemId.includes(parseInt(query))) {
            this.$message({
              message: '这道题已经分配过',
              type: 'warning'
            });
          } else {
            this.loading = true;
            setTimeout(() => {
              $.ajax({
                url: `/api/v2/search/problems/${query}`,
                type: 'GET',
                success: function (data) {
                  that.problemOptions = data.results.map((item) => {
                    return {
                      id: item.value,
                      label: item.name,
                      value: item.value,
                    }
                  })
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert('创建失败');
                }
              });
              this.loading = false;
            }, 200);
          }
        } else {
          this.options = [];
        }
      },
      getClassifyInfo: function() {
        let that = this;
        $.ajax({
          url: '/api/practice/all',
          type: 'GET',
          success: function (data) {
            that.classifyArray = data.result;
            that.usedProblemId = data.problem.map(function(item){return item.p_id});
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('查询失败');
          }
        });
      },
      resetModal: function() {
        this.classifyName = '';
        this.classifyIntro = '';
        this.problemIdArray = [];
        this.classifyId = -1;
        this.problemOptions=[];
        this.order = this.calcOrderMax;
      },
      show: function(id){
        let that = this;
        if (id) {
          this.classifyId = id;
          $.ajax({
            url: `/api/practice/classify/${id}`,
            type: 'GET',
            success: function (data) {
              if (!data.error_code) {
                const {classifyInfo: {id, intro, name, order}, problem} = data;
                that.classifyName = name;
                that.classifyIntro = intro;
                that.problemIdArray = problem;
                that.order = order;
                problem.forEach(function(problemId) {
                  $.ajax({
                    url: `/api/v2/search/problems/${problemId}`,
                    type: 'GET',
                    success: function (data) {
                      that.problemOptions = data.results.map((item) => {
                        return {
                          id: item.value,
                          label: item.name,
                          disabled: true,
                          value: item.value,
                        }
                      })
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                      alert('创建失败');
                    }
                  });
                })
              }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert('创建失败');
            }
          });
        } else {
          this.resetModal();
        }
        $('.ui.modal.classify')
          .modal('show')
      },
      checkStringLength: function(string, maxLen) {
        return string.length > 0 && string.length <= maxLen;
      },
      submitInfo: function() {
        let that = this;
        let name = this.classifyName;
        let intro = this.classifyIntro;
        if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100) && this.problemIdArray.length > 0) {
          const obj = {
            name: this.classifyName,
            intro: this.classifyIntro,
            order: this.order,
            problemIdArray: this.problemIdArray
          }
          if (this.classifyId === -1) {
            $.ajax({
              url: '/api/practice/create',
              type: 'POST',
              async: true,
              data: obj,
              success: function (data) {
                if (data.error_code) {
                  alert('创建失败');
                } else {
                  alert('添加成功');
                  that.resetModal();
                  $('.ui.modal.classify')
                    .modal('hide')
                  that.getClassifyInfo();
                }
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('创建失败');
              }
            });
          } else {
            $.ajax({
              url: `/api/practice/classify/update/${that.classifyId}`,
              type: 'PUT',
              async: true,
              data: obj,
              success: function (data) {
                if (data.error_code) {
                  alert('更新失败');
                } else {
                  alert('更新成功');
                  that.resetModal();
                  $('.ui.modal.classify')
                    .modal('hide')
                  that.getClassifyInfo();
                }
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('更新时发生错误');
              }
            });
          }

        }
      }
    },
    computed: {
      calcModalTitle: function(){
        if (this.classifyId === -1) {
          return '新增练习阶段';
        } else {
          return '编辑练习阶段'
        }
      },
      calcOrderMax: function() {
        if (this.classifyId === -1) {
          return this.classifyArray.length + 1;
        } else {
          return this.classifyArray.length
        }
      }
    }
  })
</script>
<% include admin_footer %>