src/views/TestPaper/TestPaperList.vue

<template>
  <div class="app-container">
    <div class="seetingsDiv" style="">
      <el-button type="primary" @click="dialogAddTestPaperVIsible=true">添加试卷
      </el-button>
    </div>
    <el-table :data="testpaperlist" id="QuestionTable" border
      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="50">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="试卷标题" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.TestPaperTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="试卷总分" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.TotalScore }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="单选题数量" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.SingleNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="多选题数量" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.MultipleNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="主观题数量" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.SubjectiveNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="语音题数量" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.VoiceNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="工种" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.UserTypeOfWorkName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="TestPaperClassId" label="分类" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.TestPaperClassId | typeFilters}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="FLevelTitle" label="等级" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.FLevelTitle  }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="原价" width="80" v-show="false">
        <template slot-scope="scope">
          <span>{{ scope.row.OriginalPrice/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="现价" width="80"  v-show="false">
        <template slot-scope="scope">
          <span>{{ scope.row.PresentPrice/100 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="会员价" width="80" v-show="false">
        <template slot-scope="scope">
          <span>{{ scope.row.MembershipPrice/100 }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="name" label="试卷说明" :show-overflow-tooltip=true>
        <template slot-scope="scope">
          <span>{{ scope.row.Describe }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <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="addquestion">题目维护</el-dropdown-item> -->
                <el-dropdown-item command="update">编辑</el-dropdown-item>
                <!-- <el-dropdown-item command="b">锁定</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="dialogAddTestPaperVIsible" @close="closeClassDialog" width="600px"
      :close-on-click-modal="false">
      <div class="grid-content bg-purple">
        <el-form ref="form" class="testPaper-manager" :rules="rules"  :model="TestPaper" label-width="100px">
          <el-form-item label="试卷名称:" class="el-form-item-custom"  prop="TestPaperTitle">
            <el-input v-model="TestPaper.TestPaperTitle" placeholder="请输入试卷标题"></el-input>
          </el-form-item>
          <el-form-item label="分类" class="el-form-item-custom" prop="TestPaperClassId">
            <el-cascader class="testpaper-input" v-model="TestPaper.TestPaperClassId" style="width:400px;"
              :props="{emitPath:false}" :clearable=true :options="QuestionClass">
            </el-cascader>
          </el-form-item>
          <!-- <el-form-item label="板块分类" class="el-form-item-custom">
            <el-select v-model="TestPaper.PlateClass" placeholder="请选择板块分类">
              <el-option label="面试题" value="4"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="工种" class="el-form-item-custom"  prop="UserTypeOfWork" >
            <el-select v-model="TestPaper.UserTypeOfWork" placeholder="请选择工种">
              <el-option v-for="item in usertypelist" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="有效时间"  >
            <el-form-item prop="date" required>
              <el-date-picker v-model="TestPaper.date" @change="changetimestartend" type="datetimerange"
                format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始时间" style="width:100%"
                end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="总时长控制" :prop="AnswerTime" required>
            <el-input class="testpaper-input" type="number" placeholder="总时长控制(分钟)" v-model="TestPaper.AnswerTime">
            </el-input>
          </el-form-item>
          <el-form-item label="试卷原价:" prop="OriginalPrice" v-show="false">
            <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="TestPaper.OriginalPrice" :precision="0">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="试卷价格:" prop="PresentPrice" v-show="false">
            <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="TestPaper.PresentPrice">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="会员价:" prop="MembershipPrice" v-show="false">
            <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="TestPaper.MembershipPrice">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="试卷简介:">
            <el-input class="testpaper-input" :rows="10" type="textarea" v-model="TestPaper.Describe">
            </el-input>
          </el-form-item>
          <el-button type="primary" style="float: right;" @click="SubmitTestPaper">保存1
          </el-button>
          <div style="clear: both;"></div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getTestPaperList,
    GetToplevel,
    EditTestPaper,
    TestPaperUpdate,
    getTestPaperClassList,
    DeleteTestPaper
  } from '@/api/TestPaper'
  import {
    GetTypeSetting
  } from '@/api/user'
  import { formatTime } from '@/utils/util'
  let that = {};
  let list = [];
  export default {
    data() {
      return {
        parameter: {
          pageIndex: 1,
          pageSize: 12,
          // sort: "id",
          // sortOrder: 1,
          keyword: "",
          QuestionClassId: 0,
          status: 1
        },
        Count: 0,
        testpaperlist: [],
        dialogAddTestPaperVIsible: false,
        dialogQuestionVlsible: false,
        QuestionClass: [],
        usertypelist: [],
        TestPaper: {
          TestPaperTitle: "",
          PlateClass: 4,
          TestPaperClassId: 0,
          TotalScore: 0,
          Describe: "",
          SingleNumber: 0,
          MultipleNumber: 0,
          SubjectiveNumber: 0,
          OriginalPrice: "0",
          PresentPrice: "0",
          MembershipPrice: "0",
          QuestionBankIds: []
        },
        treeData: [{
          value: 0,
          label: "全部"
        }],
        value: '',
        rules: {
          OriginalPrice: [
            {
              required: true,
              message: "不能为空",
            },
          ],   
          PresentPrice: [
            {
              required: true,
              message: "不能为空",
            },
          ],
          UserTypeOfWork: [
            {
              required: true,
              message: "请选择工种",
            },
          ], QuestionClassId: [
            {
              required: true,
              message: "请选择分类", 
            },
          ],date: [
            {
              required: true,
              message: "请选择时间段", 
            },
          ],
          TestPaperTitle: [
            {
              required: true,
              message: "请填写试卷名称", 
            } 
          ],
          TestPaperClassId: [
            {
              required: true,
              message: "分类必须选择", 
            },
 
          ],
          AnswerTime: [
            {
              required: true,
              message: "请填写试总时长控制", 
            },
 
          ]
         }   
      }
    },
    computed: {
    },
    created() {
      let parameter = {
        pageIndex: 1,
        pageSize: 10000,
        // sort: "id",
        // sortOrder: 1,
        keyword: ""
      }
      GetToplevel(parameter).then(res => {
        console.log('gettoplevel', res);
        list = res.data.data;
        this.$forceUpdate();
      });
      GetTypeSetting({}).then(res => {
        if (res.data) {
          this.usertypelist = res.data || [];
        }
      });
    },
    filters: {
      typeFilters(val) {
        try {
          return list.find(t => t.id == val).ClassTitle || '未知';
        } catch (e) {
          console.log(e);
          return '未知'
        }
      }
    },
    beforeCreate() {
      that = this
    },
    mounted() {
      let ContentAreaHight = window.innerHeight - document.getElementById("QuestionTable").offsetTop;
      let lineNumber = ContentAreaHight - 50 - 40;
      this.parameter.pageSize = Math.floor(lineNumber / 49)
      this.getTestPaperListHeadler();
      this.getQuestionClassListHeadler();
    },
    methods: {
      changetimestartend(val, aa) {
        this.TestPaper.EffectiveStartTime = formatTime(val[0])
        this.TestPaper.EffectiveEndTime = formatTime(val[1])
      },
      closeClassDialog() {
        this.dialogAddTestPaperVIsible = false
        this.TestPaper = {
          TestPaperTitle: "",
          PlateClass: "4",
          TestPaperClassId: 0,
          TotalScore: 0,
          Describe: "",
          SingleNumber: 0,
          MultipleNumber: 0,
          SubjectiveNumber: 0,
          OriginalPrice: "0",
          PresentPrice: "0",
          MembershipPrice: "0",
          QuestionBankIds: []
        }
      },
      //添加试卷基本信息
     async SubmitTestPaper() {
        if(!this.TestPaper.TestPaperTitle){
         this.$message.warning('试卷名称不能为空！');
        return;
        }
        if(!this.TestPaper.AnswerTime){
         this.$message.warning('请填写总时长！');
        return;
        }
        
        if (this.value == '') {
          EditTestPaper(this.TestPaper).then(res => {
            if (res.data.code == 200) {
              this.$confirm('添加试卷基本信息成功！', '消息');
              this.getTestPaperListHeadler();
              this.dialogAddTestPaperVIsible = false
            } else {
              this.$confirm('添加试卷基本信息失败！', '消息')
            }
          });
        } else if (this.value == 'update') {
          TestPaperUpdate(this.TestPaper).then(res => {
            if (res.data.code == 200) {
              this.$confirm('编辑试卷基本信息成功！', '消息');
              this.getTestPaperListHeadler();
              this.dialogAddTestPaperVIsible = false
            } else {
              this.$confirm('编辑试卷基本信息失败！', '消息')
            }
          })
        }
      },
      getTestPaperListHeadler() {
        getTestPaperList(this.parameter).then(res => {
          this.testpaperlist = res.data.data;
          this.Count = res.data.totalCount;
        });
      },
      currentchange(page) {
        this.parameter.pageIndex = page;
        this.getTestPaperListHeadler();
      },
      getQuestionClassListHeadler() {
        let _this = this;
        GetToplevel().then(res => {
          var gettree = function (titem) {
            titem.children = []
            let childrenList = res.data.data.filter(u => u.ParentId == titem.value);
            if (childrenList.length == 0)
              titem.children = undefined;
            res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => {
              var model = {
                value: item.id,
                label: item.ClassTitle
              };
              gettree(model);
              titem.children.push(model);
            })
          }
          res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => {
            var model = {
              value: item.id,
              label: item.ClassTitle
            };
            gettree(model);
            _this.QuestionClass.push(model);
            _this.treeData.push(model)
          })
        });
      },
      handleCommand(value, val) {
        this.value = value
        if (value == 'addquestion') {
          console.log(val)
          this.$router.push({
            path: '/moduleIndex/index',
            query: {
              val: val.id
            }
          })
        } else if (value == 'update') {
          this.dialogAddTestPaperVIsible = true
          if (val.EffectiveStartTime && val.EffectiveEndTime) {
            val.date = [];
            val.date.push(val.EffectiveStartTime)
            val.date.push(val.EffectiveEndTime)
          }
          this.TestPaper = val
        }
        else if (value == 'del') {
          this.$confirm(
            "确认删除该试卷吗？",
            "提示消息",
            {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              callback: (action) => {
                if (action == "confirm") {
                  DeleteTestPaper(val.id).then(res => {
                    // this.$message.success('删除成功！');
                    if (res.data.success) {
                    this.$message.success("删除成功！"); 
                    this.getTestPaperListHeadler();
                  } else {
             
                    this.$message.error(res.data.message || "发送失败");
                  }
                    this.getTestPaperListHeadler();
                  })
                }
              },
            }
          );
        }
      }
    }
  }
</script>
<style scoped>
  .seetingsDiv {
    width: 100%;
    height: 60px;
    background: #efefef;
    line-height: 60px;
    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: right;
    margin-top: 12px;
    margin-right: 10px;
  }
</style>