fair-web/views/admin_classify.ejs

<% this.adminPage = 'classify'; %>
<% include admin_header %>
<style>
    [v-cloak] {
        display: none;
    }
    .current-classify{
        margin-bottom: 20px;
    }
    .classify{
        height:85%;
        overflow: auto;
    }
</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: multipleSelection.length === 0 }">
                    <label>题目选择(至少包含一道题)</label>
                    <el-table
                            ref="multipleTable"
                            :data="problemList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                                type="selection"
                                :selectable="disableCheckbox"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="题目id">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="题目标题">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handlePageChange"
                            layout="prev, pager, next"
                            :current-page.sync="currentPage"
                            :total="problemCount">
                    </el-pagination>
                </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,
      problemList: [],
      usedProblemId: [],
      multipleSelection: [],
      problemCount: -1,
      currentPage:1
    },
    created: function() {
      this.getClassifyInfo();
      this.getCount();
    },
    methods: {
      getCount: function(){
        let that = this;
        $.ajax({
          url: '/api/pagination/allproblem',
          type: 'GET',
          success: function (data) {
            that.problemCount = parseInt(data.problemInfo.count);
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('创建失败');
          }
        })
      },
      disableCheckbox: function(row) {
        const currentIdArray = this.problemIdArray.map((function(item){
          return item.id;
        }));
        function findDifference(source, target){
          return target.filter(function(item){
            return !source.includes(item);
          })
        }
        const disabledId = findDifference(currentIdArray, this.usedProblemId)
        return !disabledId.includes(row.id);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handlePageChange(page) {
        this.selectProblem();
        this.getProblemPagination(page);
        if (this.classifyId) {
          this.getClassifyInfos(this.classifyId);
        }
      },
      getProblemPagination(page) {
        let that = this;
        $.ajax({
          url: '/api/pagination',
          type: 'GET',
          data: {
            pagesize: 10,
            page: page - 1
          },
          success: function (data) {
            that.problemList = data.problemInfo;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('创建失败');
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = this.multipleSelection.concat(val);
      },
      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;
      },
      selectProblem: function() {
        this.toggleSelection(this.problemIdArray)
      },
      getClassifyInfos: function(id){
        let that = this;
        if (id !== -1) {
          $.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 = that.problemList.filter(function(problemItem){
                  return problem.includes(problemItem.id)
                });
                that.toggleSelection(that.problemIdArray)
                that.order = order;
              }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert('创建失败');
            }
          });
        }
      },
      show: function(id){
        let that = this;
        this.getProblemPagination(1)
        if (id) {
          this.classifyId = id;
          this.getClassifyInfos(id);
          this.currentPage = 1;
        } 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.multipleSelection.length > 0) {
          const obj = {
            name: this.classifyName,
            intro: this.classifyIntro,
            order: this.order,
            problemIdArray: [...new Set(this.multipleSelection.map(function(item){
              return item.id
            }))]
          }
          console.log(obj.problemIdArray);
          if (this.classifyId === -1) {
            $.ajax({
              url: '/api/practice/create',
              type: 'POST',
              async: true,
              data: obj,
              success: function (data) {
                if (data.error_code) {
                  alert('创建失败');
                  that.resetModal();
                } 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 %>