zc

src/views/safetyEducationExam/securityExam/exam/examInfo.vue

@@ -4,16 +4,24 @@
     <div class="page-container">
       <div class="page-form-title-box">
         <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
-          <el-form-item label="姓名" prop="joinUserName" label-width="50px">
+          <el-form-item label="" prop="joinUserName" label-width="50px">
             <el-input
               v-model="queryParams.joinUserName"
-              placeholder="请输入姓名"
-
-              size="small"
+              placeholder="输入姓名"
+              maxLength="8"
+              style="width:140px;"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="account" label-width="50px">
+            <el-input
+              v-model="queryParams.account"
+              placeholder="输入学号"
+              maxLength="30"
+              style="width:140px;"
             />
           </el-form-item>
-          <el-form-item label="通过状态" prop="passed">
-            <el-select v-model="queryParams.passed" placeholder="请选择通过状态"  size="small">
+          <el-form-item label="" prop="passed">
+            <el-select v-model="queryParams.passed" placeholder="选择通过状态" style="width:140px;">
               <el-option
                 v-for="item in passeds"
                 :key="item.type"
@@ -23,8 +31,61 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="" prop="majorId">
+            <el-select v-model="queryParams.majorId" placeholder="选择专业" style="width:140px;">
+              <el-option
+                v-for="item in majorList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="deptId">
+            <el-select v-model="queryParams.deptId" placeholder="学院单位" style="width:140px;">
+              <el-option
+                v-for="item in deptList"
+                :key="item.deptId"
+                :label="item.deptName"
+                :value="item.deptId"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="passedDemo">
+            <el-select v-model="queryParams.passedDemo" placeholder="考试状态" style="width:140px;">
+              <el-option label="已考" value="1"/>
+              <el-option label="缺考" value="2"/>
+              <el-option label="补考" value="3"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="dateRange">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="上报时间"
+              end-placeholder="上报时间"
+            ></el-date-picker>
+          </el-form-item>
           <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
           <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
+          <el-dropdown @command="exportButton" style="overflow: hidden;">
+            <div class="form-dropdown-box">
+              <img src="@/assets/ZDimages/basicsModules/icon_jzgxx_sc.png">
+              <p>导出</p>
+              <img src="@/assets/ZDimages/basicsModules/icon_jzggl_xljt.png">
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">导出全部数据</el-dropdown-item>
+              <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导出选中数据</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
           <p class="page-out-common-style-button"
              style="float: right;"
              @click="backPage"
@@ -32,12 +93,14 @@
         </el-form>
       </div>
       <div class="page-content-box">
-        <el-table :data="examList" border class="table-box" @selection-change="handleSelectionChange">
-          <el-table-column label="姓名" align="left" prop="joinUserName" />
-          <el-table-column label="最高分" align="left" prop="maxScore" />
-          <el-table-column label="通过状态" align="left" prop="passed" >
+        <el-table :data="examList" border class="table-box" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
+          <el-table-column type="selection" width="50" align="center"/>
+          <el-table-column label="姓名" align="left" prop="joinUserName"/>
+          <el-table-column label="最高分" align="left" prop="maxScore"/>
+          <el-table-column label="通过状态" align="left" prop="passed">
             <template slot-scope="scope">
-              <span v-for="(item,index) in passeds" :key="index" v-if="scope.row.passed==item.type">{{item.value}}</span>
+              <span v-for="(item,index) in passeds" :key="index"
+                    v-if="scope.row.passed==item.type">{{item.value}}</span>
             </template>
           </el-table-column>
           <el-table-column label="最后考试时间" align="left" prop="updateTime">
@@ -67,12 +130,17 @@
       </div>
     </div>
     <!-- 添加或修改考试对话框 -->
-    <el-dialog title="考试明细" :visible.sync="open" width="790px" class="scrollbar-box" append-to-body :close-on-click-modal="false">
-      <div v-for="(item,index) in infoData" :key="index" style="display: flex;" >
-        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:257px;">考试时间：<span style="font-size:14px;color:#CCCCCC;">{{item.createTime}}</span></p>
-        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:174px;">考试用时：<span style="font-size:14px;color:#CCCCCC;">{{item.userTime}}</span></p>
-        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:185px;">考试得分：<span style="font-size:14px;color:#CCCCCC;">{{item.userScore}}</span></p>
-        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:140px;">是否合格：<span style="font-size:14px;color:#CCCCCC;">{{item.userScore >= item.qualifyScore ?'是':'否'}}</span></p>
+    <el-dialog title="考试明细" :visible.sync="open" width="790px" class="scrollbar-box" append-to-body
+               :close-on-click-modal="false">
+      <div v-for="(item,index) in infoData" :key="index" style="display: flex;">
+        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:257px;">考试时间：<span
+          style="font-size:14px;color:#CCCCCC;">{{item.createTime}}</span></p>
+        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:174px;">考试用时：<span
+          style="font-size:14px;color:#CCCCCC;">{{item.userTime}}</span></p>
+        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:185px;">考试得分：<span
+          style="font-size:14px;color:#CCCCCC;">{{item.userScore}}</span></p>
+        <p style="margin:0;line-height:50px;font-size:16px;color:#333;width:140px;">是否合格：<span
+          style="font-size:14px;color:#CCCCCC;">{{item.userScore >= item.qualifyScore ?'是':'否'}}</span></p>
       </div>
       <div slot="footer" class="dialog-footer dialog-footer-box">
         <p class="dialog-footer-button-null"></p>
@@ -84,11 +152,16 @@
 </template>
 
 <script>
+  import {
+    getDeptDropList,
+    systemUserMajorSelect
+  } from '@/api/commonality/permission'
   import { Message } from 'element-ui'
-  import {examUserExamList, listPaper} from "@/api/safetyEducationExam/index";
+  import { examUserExamList, listPaper } from '@/api/safetyEducationExam/index'
+
   export default {
-    props:{
-      rowData:{},
+    props: {
+      rowData: {}
     },
     name: 'examInfo',
     data() {
@@ -97,120 +170,242 @@
         total: 10,
         // 查询参数
         queryParams: {
-          page: 1,
-          pageSize:20,
-          title: null,
-          content: null,
-          openType: null,
-          joinType: null,
-          level: null,
-          scopeType: null,
-          state: null,
-          convert: null,
-          timeLimit: null,
-          startTime: null,
-          endTime: null,
-          totalScore: null,
-          totalTime: null,
-          qualifyScore: null,
-          examId: null,
+          joinUserName: '',
+          account: '',
           passed: null,
-          joinUserName: null
+          majorId: null,
+          deptId: null,
+          passedDemo: null,
+          page: 1,
+          pageSize: 20
         },
         infoParams: {
           examId: null,
           joinUserId: null,
-          pageSize:-1,
+          pageSize: -1
         },
         // 考试详情
-        examList:[],
+        examList: [],
         // 弹出层
-        open:false,
+        open: false,
         // 考试明细
-        infoData:[],
+        infoData: [],
         passeds: [
-        {
-          type: 0,
-          value: "未通过",
-        },
-        {
-          type: 1,
-          value: "已通过",
-        },
-      ]
+          {
+            type: 0,
+            value: '未通过'
+          },
+          {
+            type: 1,
+            value: '已通过'
+          }
+        ],
+        deptList:[],
+        majorList:[],
+        dateRange: [],
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
       }
     },
-    created(){
+    created() {
       this.queryParams.examId = this.rowData
-      this.getList()
+      this.getDeptDropList();
+      this.systemUserMajorSelect();
+      this.getList();
     },
     methods: {
-    /** 查询考试记录列表 */
-    getList() {
-      this.loading = true;
-      examUserExamList(this.queryParams).then(response => {
-        this.examList = response.data.records;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    /** 查询考试详情列表 */
-    getInfoList() {
-      this.loading = true;
-      listPaper(this.infoParams).then(response => {
-        this.infoData = response.data.records;
-        this.loading = false;
-      });
-    },
-      backPage(){
-        this.$parent.pageOff();
+      /** 查询考试记录列表 */
+      getList() {
+        this.loading = true
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        if (this.dateRange[0]) {
+          obj.startTime = this.dateRange[0] + 'T00:00:00'
+          obj.endTime = this.dateRange[1] + 'T23:59:59'
+        } else {
+          obj.startTime = ''
+          obj.endTime = ''
+        }
+        if(this.queryParams.passedDemo == 1 || this.queryParams.passedDemo == null){
+          examUserExamList(obj).then(response => {
+            this.examList = response.data.records
+            this.total = response.data.total
+            this.loading = false
+          })
+        }else{
+          this.examList = []
+          this.total = 0
+          this.loading = false
+        }
+      },
+      /** 查询考试详情列表 */
+      getInfoList() {
+        this.loading = true
+        listPaper(this.infoParams).then(response => {
+          this.infoData = response.data.records
+          this.loading = false
+        })
+      },
+      backPage() {
+        this.$parent.pageOff()
       },
       /** 搜索按钮操作 */
       handleQuery() {
-        this.queryParams.page = 1;
-        this.getList();
+        this.queryParams.page = 1
+        this.getList()
       },
       /** 重置按钮操作 */
       resetQuery() {
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.id)
-        this.single = selection.length!==1
-        this.multiple = !selection.length
+        this.$set(this, 'queryParams', {
+          examId : this.rowData,
+          joinUserName: '',
+          account: '',
+          passed: null,
+          majorId: null,
+          deptId: null,
+          passedDemo: null,
+          page: 1,
+          pageSize: 20
+        })
+        this.$set(this,'dateRange',[]);
+        this.$refs['table-box'].clearSelection();
+        this.handleQuery()
       },
       //开启按钮
-      openButton(row){
-        this.open = true;
+      openButton(row) {
+        this.open = true
         this.infoParams.examId = row.examId
         this.infoParams.joinUserId = row.joinUserId
         this.getInfoList()
       },
       //关闭按钮
-      cancel(){
-        this.open = false;
-        this.infoData = [];
+      cancel() {
+        this.open = false
+        this.infoData = []
+      },
+      /** 查询二级单位列表 */
+      getDeptDropList() {
+        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
+          this.$set(this, 'deptList', response.data);
+        })
+      },
+      /**查询专业*/
+      systemUserMajorSelect() {
+        systemUserMajorSelect({ type: 1 }).then(response => {
+          this.$set(this, 'majorList', response.data)
+        })
+      },
+      // 清空导出选项
+      clear(){
+        this.$set(this,'ids',[]);
+        this.$set(this,'single',true);
+        this.$set(this,'multiple',true);
+        this.$refs['multipleTable'].clearSelection();
+      },
+      /** 导出按钮操作 */
+      exportButton(item) {
+        let self = this;
+        let currentDate = this.getCurrentTime()
+        if(item.command == 1){
+          self.$confirm(`确认导出全部数据?`, "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(async () => {
+            let obj = {
+              examId:this.rowData
+            }
+            self.download(`/exam/user/exam/exportOut/`,obj, '考试成绩-'+currentDate+'.xlsx')
+            this.clear();
+          }).catch(() => {})
+        }else if(item.command == 2){
+          if(self.ids.length>0) {
+            self.$confirm(`确认导出选中数据?`, "提示", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning"
+            }).then(async () => {
+              let obj = {
+                examId:this.rowData,
+                ids :self.ids
+              }
+              self.download(`/exam/user/exam/exportOut/`,obj, '考试成绩-'+currentDate+'.xlsx')
+              this.clear();
+            }).catch(() => {})
+          }else {
+            this.msgError('请选择要导出的数据')
+          }
+        }
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id);
+        this.single = selection.length != 1;
+        this.multiple = !selection.length;
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.id
+      },
+      /** 当前时间 */
+      getCurrentTime () {
+        const yy = new Date().getFullYear()
+        const mm = new Date().getMonth() + 1
+        const dd = new Date().getDate()
+        const hh = new Date().getHours()
+        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
+        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
+        return yy + '-' + mm + '-' + dd
       },
     }
   }
 </script>
 
 <style lang="scss" scoped>
-  .examInfo{
-    flex:1;
+  /*导出按钮样式*/
+  .form-dropdown-box{
+    display: flex;
+    margin:0;
+    padding:0 10px;
+    cursor: pointer;
+    height:40px;
+    img:nth-child(1){
+      width:16px;
+      height:16px;
+      margin-top:12px;
+    }
+    p{
+      width:47px;
+      text-align: center;
+      font-size:14px;
+      margin:0;
+      line-height:40px;
+    }
+    img:nth-child(3){
+      width:10px;
+      height:6px;
+      margin-top:17px;
+    }
+  }
+  .examInfo {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    .form-box{
+    .form-box {
       display: flex;
-      .full-p{
-        flex:1;
+      .full-p {
+        flex: 1;
       }
     }
-    .button-min-box{
-      width:160px;
-      margin:0 auto;
+    .button-min-box {
+      width: 160px;
+      margin: 0 auto;
       display: flex;
     }
   }