zc

src/views/safetyEducationExam/trainingCourse/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="app-container trainingCourse">
+    <div class="title-box">
+      <el-form class="form-box" :model="queryParams" ref="examineForm" :inline="true" label-width="65px">
+
+        <el-form-item label="" prop="name">
+          <div class="query-type-box">
+            <p @click="queryTypeClick(1)" :class="queryParams.type == 1?'check-p':''">全部</p>
+            <p @click="queryTypeClick(2)" :class="queryParams.type == 2?'check-p':''">待开课</p>
+            <p @click="queryTypeClick(3)" :class="queryParams.type == 3?'check-p':''">已开课</p>
+          </div>
+        </el-form-item>
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            maxlength="10"
+            v-model="queryParams.searchValue"
+            placeholder="课程名称/主讲老师"
+            clearable
+            size="small"/>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="onSearch">查询</p>
+          <p class="reset-button-one" @click="resetForm">重置</p>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="content-box">
+      <el-table border :data="tableData" ref="multipleTable">
+        <el-table-column type="selection" width="50" align="center"/>
+        <el-table-column label="序号" prop="code" width="140"/>
+        <el-table-column label="检查项目" prop="name"/>
+        <el-table-column label="检查要点" prop="mainPoint" width="700" show-overflow-tooltip/>
+        <el-table-column label="操作" width="180">
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p" v-if="scope.row.level != 3" v-hasPermi="['check:option:add']"
+                 @click="addDialogOpen(2,scope.row)">新增</p>
+              <p class="table-button-p" @click="addDialogOpen(3,scope.row)" v-hasPermi="['check:option:edit']">编辑</p>
+              <p class="table-button-p" @click="delItem(scope.row)" v-hasPermi="['check:option:remove']">删除</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'trainingCourse',
+    data(){
+      return{
+        // 遮罩层
+        loading: false,
+        queryParams:{
+          type:1,
+          searchValue:"",
+          page:1,
+          pageSize:20,
+        },
+        tableData: [],
+        total:0,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.getList();
+    },
+    methods:{
+      queryTypeClick(type){
+        if(this.queryParams.type != type){
+          this.$set(this.queryParams,'type',type);
+          this.getList();
+        }
+      },
+      onSearch(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      resetForm(){
+        this.$set(this,'queryParams',{
+          type:1,
+          searchValue:'',
+          page:1,
+          pageSize:20,
+        });
+        this.onSearch();
+      },
+      // 查询数据列表
+      getList() {
+        this.loading = true;
+        // checkOptionList(this.queryParams).then( response => {
+        //
+        //   this.loading = false;
+        // });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingCourse{
+    flex:1;
+    display: flex!important;
+    flex-direction: column;
+    overflow: hidden;
+    font-weight: 500;
+    .title-box{
+      padding-top:20px;
+      .form-box{
+        border-bottom:1px solid #E0E0E0;
+        .query-type-box{
+          margin-left:20px;
+          display: flex;
+          p{
+            line-height:40px;
+            font-size:14px;
+            color:#333;
+            width:80px;
+            text-align: center;
+            cursor: pointer;
+          }
+          p:nth-child(1){
+            border:1px solid #E0E0E0;
+            border-radius: 4px 0 0 4px
+          }
+          p:nth-child(2){
+            border-top:1px solid #E0E0E0;
+            border-bottom:1px solid #E0E0E0;
+          }
+          p:nth-child(3){
+            border:1px solid #E0E0E0;
+            border-radius: 0 4px 4px 0
+          }
+          .check-p{
+            color:#fff;
+            background: #0045AF;
+            border-color:#0045AF!important;
+          }
+        }
+      }
+    }
+    .content-box{
+      flex:1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      padding:20px;
+    }
+  }
+</style>