src/views/TestPaper/TestPaperClass.vue

<template>
  <div class="app-container">
    <div class="seetingsDiv" style="">
      <el-button type="primary" @click="dialogClassIVIsible=true">添加分类
      </el-button>
    </div>
    <el-table :data="testpaperlist" id="QuestionTable" border row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe='true'>
      <el-table-column prop="date" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="分类名称" width="150" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.ParentId==0">{{ scope.row.ClassTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="下级分类">
        <template slot-scope="scope">
          <span v-if="scope.row.ParentId!=0">{{ scope.row.ClassTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="100" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="(e)=>{handleCommand(e,scope.row)}">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="update">编辑</el-dropdown-item>
                <el-dropdown-item command="add" v-if="scope.row.ParentId==0">添加下级</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--  <el-pagination background @current-change="currentchange"
      style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.parameter.pageSize"
      layout="total,prev, pager, next" :total="Count">
    </el-pagination> -->
    <el-dialog title="分类维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="400px"
      :close-on-click-modal="false">
      <el-form ref="TestPaperClassInfo" :model="TestPaperClassInfo" label-width="70px">
        <el-form-item label="上级分类" v-if="TestPaperClassInfo.ParentId && TestPaperClassInfo.Parent">
          <el-input :disabled="true" v-model="TestPaperClassInfo.Parent"></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="TestPaperClassInfo.ClassTitle" placeholder="请输入分类名称"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="CreateTestPaperClassHealder" style="margin: 10px 0 0 0 ;float:right" type="primary" :disabled="loading">确定
      </el-button>
      <div style="clear: both;"></div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getTestPaperClassList,
    GetTestPaperClassById,
    UpdateTestPaperClass,
    DeleteTestPaperClass,
    CreateTestPaperClass
  } from '@/api/TestPaper'
  import {
    parseTime
  } from '@/utils/index.js'
  export default {
    data() {
      return {
        loading:false,
        parameter: {
          pageIndex: 1,
          pageSize: 20,
          sort: "id",
          sortOrder: 1,
          keyword: ""
        },
        Count: 0,
        testpaperlist: [],
        dialogClassIVIsible: false,
        TestPaperClassInfo: {
          id: 0,
          ParentId: 0,
          Parent: '',
          ClassTitle: "",
          Addtime: "",
          UpdateTime: "",
          State: 1
        },
      }
    },
    computed: {
    },
    created() {
this.getTestPaperClassListHeadler();
    },
    mounted() {
      // let ContentAreaHight = window.innerHeight - document.getElementById("QuestionTable").offsetTop;
      // let lineNumber = ContentAreaHight - 50 - 40;
      // // this.parameter.pageSize = Math.floor(lineNumber / 49)
      // this.parameter.pageSize = 100;
      // this.getTestPaperClassListHeadler();
    },
    methods: {
      CreateTestPaperClassHealder() {
        this.loading = true;
        if (this.TestPaperClassInfo.id == 0) {
          this.TestPaperClassInfo.Addtime = parseTime(new Date(), "");
          this.TestPaperClassInfo.Addtime = parseTime(new Date(), "");
          CreateTestPaperClass(this.TestPaperClassInfo).then(res => {
            this.$confirm(res.data.message, '消息')
            this.TestPaperClassInfo = {};
             this.dialogClassIVIsible=false
            this.getTestPaperClassListHeadler();
          setTimeout(()=>{
              this.loading = false;
            },1000);
          })
        } else {
          UpdateTestPaperClass(this.TestPaperClassInfo).then(res => {
            this.$confirm(res.data.message, '消息')
            this.dialogClassIVIsible=false
             this.TestPaperClassInfo = {};
            this.getTestPaperClassListHeadler();
            setTimeout(()=>{
              this.loading = false;
            },1000);
          });
        }
      },
      getTestPaperClassListHeadler() {
        let _this = this;
        this.testpaperlist=[]
        getTestPaperClassList(this.parameter).then(res => {
          var gettree = function(titem) {
            titem.children = []
            let childrenList = res.data.data.filter(u => u.ParentId == titem.id);
            if (childrenList.length == 0) {
              titem.children = undefined;
            }
            res.data.data.filter(u => u.ParentId == titem.id).forEach((item, i) => {
              gettree(item);
              titem.children.push(item);
              titem.children=titem.children.sort((a,b)=>{
                return a.id-b.id
              })
            })
          }
          res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => {
            gettree(item);
            _this.testpaperlist.push(item)
          })
        });
      },
      closeClassDialog() {
        this.TestPaperClassInfo = {
          id: 0,
          ParentId: 0,
          Parent: '',
          ClassTitle: "",
          Addtime: "",
          UpdateTime: "",
          State: 1
        };
        // this.getTestPaperClassListHeadler();
      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.getTestPaperClassListHeadler();
      },
      //表格右边的操作按钮
      handleCommand(value, val) {
        let that = this;
        if (value == "update") {
          // alert("编辑操作"+val)
          this.dialogClassIVIsible = true;
          GetTestPaperClassById(val.id).then(res => {
            that.TestPaperClassInfo = res.data.data;
          });
        }
        if (value == "del") {
          this.$confirm('确定删除该分类？', '消息', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            callback: (action) => {
              if (action == "confirm") {
                DeleteTestPaperClass(val.id).then(res => {
                  if (res.data.code == 200) {
                    this.$confirm(res.data.message, '消息')
                    this.getTestPaperClassListHeadler();
                  }
                });
              }
            },
          })
        }
        if (value == 'add') {
          this.TestPaperClassInfo.ParentId = val.id
          this.TestPaperClassInfo.Parent = val.ClassTitle
          this.dialogClassIVIsible = true
        }
      },
    }
  }
</script>
<style scoped>
  .seetingsDiv {
    width: 100%;
    height: 60px;
    background: #efefef;
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
  }
  .seetingsDiv button {
    background-color: #304156;
    border: 0px;
    margin-left: 10px;
    box-shadow: 0 0 5px #cdcdcd;
    float: left;
    margin-top: 12px;
    margin-right: 10px;
  }
</style>