dy-admin-manager/src/views/teamDetail/teamCourseList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>课表列表
    </h2>
    <div class="m-core">
      <!-- 搜索类型 -->
      <save-form :inline="true"
               class="searchForm"
               @submit="search"
               @reset="reset"
               ref="searchForm"
               :model.sync="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.search"
                    clearable
                    placeholder="课程(组)编号/课程名称" />
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.schoolId"
                     clearable
                     filterable
                     placeholder="请选择教学点">
            <el-option v-for="(item, index) in selects.schools"
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.teacherIdList"
                     clearable
                     filterable
                     placeholder="请选择老师">
            <el-option v-for="(item, index) in selects.teachers"
                       :key="index"
                       :value="item.id"
                       :label="item.realName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select class="multiple"
                     v-model.trim="searchForm.organIdList"
                     filterable
                     clearable
                     placeholder="请选择分部">
            <el-option v-for="(item,index) in selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.groupType"
                     clearable
                     filterable
                     placeholder="课程组类型">
            <el-option v-for="(item, index) in courseListType"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.courseType"
                     clearable
                     filterable
                     placeholder="课程类型">
            <el-option v-for="(item, index) in courseType"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.teachMode"
                     clearable
                     filterable
                     placeholder="教学模式">
            <el-option label="线上课"
                       value="ONLINE"></el-option>
            <el-option label="线下课"
                       value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.courseStatus"
                     clearable
                     filterable
                     placeholder="课程状态">
            <el-option label="未开始"
                       value="NOT_START"></el-option>
            <el-option label="进行中"
                       value="UNDERWAY"></el-option>
            <el-option label="已结束"
                       value="OVER"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.mergeCourseType"
                     clearable
                     filterable
                     placeholder="合并课程类型">
            <el-option v-for="(item, index) in mergeCourseTypeOptions"
                       :key="index"
                       :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.teachType"
                     clearable
                     filterable
                     placeholder="老师类型">
            <el-option v-for="item in workTypeOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.isCallNames"
                     clearable
                     filterable
                     placeholder="是否点名">
            <el-option label="是"
                       value="1"></el-option>
            <el-option label="否"
                       value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="searchForm.timer"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="上课开始日期"
                          end-placeholder="上课结束日期"
                          :picker-options="{
        firstDayOfWeek: 1
    }"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="searchForm.creatTimer"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="创建开始日期"
                          end-placeholder="创建结束日期"
                          :picker-options="{
        firstDayOfWeek: 1
    }"></el-date-picker>
        </el-form-item>
        <el-row type="flex" justify="space-around">
          <el-col>
            <el-button
              native-type="submit"
              type="primary"
            >搜索</el-button>
            <el-button
              native-type="reset"
              type="danger"
            >重置</el-button>
            <el-button
              v-permission="'export/superFindCourseSchedules'"
              @click="onCourseExport"
              type="primary"
            >导出课表</el-button>
          </el-col>
        </el-row>
      </save-form>
      <div class="btnWraps"></div>
      <!-- 列表 -->
      <div class="tableWrap" style="margin-top: 20px">
        <el-table :data="tableList"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align="center"
                           prop="organName"
                           label="分部名称"></el-table-column>
          <el-table-column align="center"
                           width="130px"
                           prop="musicGroupId"
                           label="乐团/课程组编号">
                              <template slot-scope="scope">
                                <copy-text>{{scope.row.musicGroupId}}</copy-text>
                              </template>
                           </el-table-column>
          <el-table-column align="center"
                           prop="id"
                           width="100px"
                           label="课程编号">
                              <template slot-scope="scope">
                                <copy-text>{{scope.row.id}}</copy-text>
                              </template>
                            </el-table-column>
          <el-table-column align="center"
                           width="200px"
                           label="上课时间">
            <template slot-scope="scope">{{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 16) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(11,5) : ''}}</template>
          </el-table-column>
          <el-table-column align="center"
                           prop="subjectName"
                           label="声部"></el-table-column>
          <el-table-column prop="name"
                           width="150px"
                           label="课程名称">
                            <template slot-scope="scope">
                              <copy-text>{{scope.row.name}}</copy-text>
                            </template>
                           </el-table-column>
          <el-table-column align="center"
                           width="150px"
                           label="课程类型">
            <template slot-scope="scope">
              <div>{{ scope.row.type | coursesType}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="教学模式">
            <template slot-scope="scope">
              <div>{{ scope.row.teachMode | teachMode}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="teacherName"
                           width="110"
                           label="主教老师"></el-table-column>
          <el-table-column align="center"
                           prop="schoolName"
                           label="教学点">
            <template slot-scope="scope">
              <div>{{scope.row.schoolName?scope.row.schoolName:'网络教室'}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="courseScheduleStatus"
                           label="课程状态">
            <template slot-scope="scope">
              <div>{{ scope.row.status | coursesStatus }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="考勤申诉">
            <template slot-scope="scope">
              <div>{{ scope.row.isComplaints==1?'是':'否'}}</div>
            </template>
          </el-table-column>

          <el-table-column align="center"
                           prop="isLock"
                           label="是否冻结">
            <template slot-scope="scope">{{ scope.row.isLock ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column align="center"
                           prop="newCourseId"
                           label="合并类型"
                           width="130px">
            <template slot-scope="scope">
              {{ scope.row.newCourseId > 0 && scope.row.newCourseId == scope.row.id ? '合并课' : null }}
              {{ scope.row.newCourseId > 0 && scope.row.newCourseId != scope.row.id ? '被合并课' : null }}
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="isCallNames"
                           label="是否点名"
                           fixed="right">
            <template slot-scope="scope">{{ scope.row.isCallNames ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column align="center"
                           label="详情"
                           fixed="right"
                           width="220px">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                  @click="removeCourse(scope.row)"
                  v-permission="'courseSchedule/batchDelete?page=teamCourseList'">删除</el-button>
                <el-button type="text"
                           v-if="permission('teamCourseList/details')"
                           @click="lookDetail(scope.row)">详情</el-button>
                <el-button type="text"
                           v-if="permission('courseSchedule/classStartDateAdjust?hight') && (!scope.row.isLock || scope.row.newCourseId > 0)"
                           @click="resetClass(scope.row)">调整</el-button>
                <el-button type="text" @click="common(scope.row)" v-if="scope.row.newCourseId > 0">
                  合并课
                </el-button>
                <el-button type="text"
                           @click="addCompound(scope.row)"
                           v-if="(scope.row.groupType=='MUSIC'&&scope.row.type!='MUSIC_NETWORK'&&scope.row.type!='HIGH_ONLINE'&&scope.row.status=='NOT_START'&&!isAddCom(scope.row)&&permission('courseSchedule/courseMerge')&&scope.row.newCourseId <= 0&&!scope.row.beMerged)">添加合课</el-button>
                <el-button type="text"
                           v-if="isAddCom(scope.row)&&permission('courseSchedule/courseMerge')"
                           @click="cancleCompound(scope.row)">取消合课</el-button>
                <el-button type="text"
                           v-if="
                           scope.row.status=='OVER'
                           &&
                           !scope.row.isSettlement
                           &&permission('courseSchedule/cleanAttendance')"
                           @click="clearAttend(scope.row)">清除考勤</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total.sync="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList"
                    sync />
      </div>
    </div>
    <el-dialog title="课表详情"
               :visible.sync="classVisible"
               width="1000px">
      <el-form :model="maskForm"
               :inline="true">
        <el-form-item label="老师姓名">
          <!-- <el-input v-model.trim="maskForm.teacherName"
          disabled></el-input>-->
          <div class="inputStyle">{{maskForm.teacherName}}</div>
        </el-form-item>
        <el-form-item label="课程模式">
          <!-- <el-input :value="maskForm.teachMode | teachMode"
          disabled></el-input>-->
          <div class="inputStyle">{{maskForm.teachMode| teachMode}}</div>
          <!-- <span>{{maskForm.teachMode }}</span> -->
        </el-form-item>
        <el-form-item label="课程类型">
          <!-- <el-input :value="maskForm.type |classType"
          disabled></el-input>-->
          <div class="inputStyle">{{maskForm.type|coursesType}}</div>
        </el-form-item>
        <!-- courseScheduleStatus -->
        <el-form-item label="课程状态">
          <!-- <el-input :value="maskForm.type |classType"
          disabled></el-input>-->
          <div class="inputStyle">{{maskForm.status | coursesStatus}}</div>
        </el-form-item>
        <!-- <el-form-item label="签到时间">
          <div class="inputStyle">{{maskForm.signInTime | dateForMinFormat}}</div>
        </el-form-item>
        <el-form-item label="签退时间">
          <div class="inputStyle">{{maskForm.signOutTime | dateForMinFormat}}</div>
        </el-form-item> -->
        <el-form-item label="是否点名">
          <!-- <el-input :value="maskForm.isCallNames | isCall"
          disabled></el-input>-->
          <div class="inputStyle">{{maskForm.isCallNames | isCall}}</div>
        </el-form-item>
        <!-- <el-form-item label="签到状态">
          <div class="inputStyle"
               :class="maskForm.isSignIn==1?'':'red'">{{ maskForm.isSignIn | attendanceType}}</div>
        </el-form-item>
        <el-form-item label="签退状态">
          <div class="inputStyle"
               :class="maskForm.isSignIn==1?'':'red'">{{ maskForm.isSignOut | attendanceOutType}}</div>
        </el-form-item> -->

        <el-form-item label="上课时间">
          {{ maskForm.startClassTime ? maskForm.startClassTime.substr(0, 16) : '' }}-{{ maskForm.endClassTime ? maskForm.endClassTime.substr(11,5) : ''}}
        </el-form-item>
        <el-form-item label="上课时长">

          <div class="inputStyle"
               :class=" (maskForm.attendClassTime <= 120)?'':'red'">{{ (maskForm.attendClassTime>=0?maskForm.attendClassTime:0)}}分钟 <el-tooltip placement="top"
                        popper-class="mTooltip">
              <div slot="content">
                学员和老师同时在教室里的时长。
              </div>
              <!-- <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt /> -->
              <i class="el-icon-question micon el-tooltip"
                 style="font-size: 18px; color: #F56C6C"
                 v-permission="'export/teacherSalary'"></i>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item v-if="maskForm.school" label="教学点">
          {{ maskForm.school.name }}
          <el-tooltip content="查看教学点" :open-delay=".5">
            <i @click="openLocation(maskForm.school)" class="el-icon-map-location" style="cursor: pointer;"></i>
          </el-tooltip>
        </el-form-item>

      </el-form>
      <!--  v-if="maskForm.status != 'NOT_START'" -->
      <el-tabs v-model.trim="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="学员列表"
                     name="first">
          <div v-if="activeName == 'first'">
            <!-- studentRollCall  -->
            <studentRollCall :courseScheduleId="maskForm.id"></studentRollCall>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="GPS定位"
                     v-if="maskForm.teachMode == 'OFFLINE'"
                     name="second">
          <div v-if="activeName == 'second'">
            <gpsLoction :courseScheduleId="maskForm.id"></gpsLoction>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="老师列表"
                     name="second">
          <div v-if="activeName == 'second'">
            <teacherList :courseScheduleId="maskForm.id"
                         :teachMode='maskForm.teachMode'></teacherList>
          </div>
        </el-tab-pane>
        <!--      v-if="maskForm.teachMode != 'OFFLINE'" -->
        <el-tab-pane label="作业"
                     name="third">
          <div v-if="activeName == 'third'">
            <studentWork :courseScheduleId="maskForm.id"></studentWork>
          </div>
        </el-tab-pane>
        <!--    v-if="maskForm.type == 'VIP' || maskForm.type == 'PRACTICE'" -->
        <el-tab-pane label="评论"
                     name="four">
          <div v-if="activeName == 'four'">
            <courseEvaluate :courseScheduleId="maskForm.id"></courseEvaluate>
          </div>
        </el-tab-pane>
        <el-tab-pane label="调整记录"
                     v-if="permission('courseSchedule/queryCourseAdjustDetail')"
                     name="five">
          <div v-if="activeName == 'five'">
            <infoMsg :courseScheduleId="maskForm.id"></infoMsg>
          </div>
        </el-tab-pane>
        <!-- infoMsg -->
      </el-tabs>
    </el-dialog>
    <el-dialog :visible.sync="show"
               width="400px">
      <resetClass :show="show"
                  v-if="show"
                  @closeReset='closeReset'
                  @getList='getList'
                  :id='id' />
    </el-dialog>
    <el-dialog title="查看教学点" :visible.sync="locationVisible">
      <school-location v-if="maskForm.school" :longitudeLatitude="maskForm.school.longitudeLatitude" :address="maskForm.school.address"/>
    </el-dialog>
    <addCompound :compoundList='compoundList' v-if="permission('courseSchedule/courseMerge')"
                 @clearCom='clearCom'
                 @getList='getList'
                 @cancleCompound='cancleCompound' />
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  getTeacher,
  getMusicGroupAllClass,
  superFindCourseSchedules,
  getEmployeeOrgan,
  cleanAttendance
} from "@/api/buildTeam";
import { bathDelete } from "@/api/vipSeting"
import { workType, mergeCourseType } from '@/constant'
import { objectToOptions, getTimes } from '@/utils'
import { getTeacherPersonalAttendanceDetail } from "@/api/teacherManager";
import { getSchool } from "@/api/systemManage";
import { courseType, courseListType } from "@/utils/searchArray";
import studentRollCall from "./componentCourse/studentRollCall";
import gpsLoction from "./componentCourse/gpsLocation";
import studentWork from "./componentCourse/studentWork";
import courseEvaluate from "./componentCourse/courseEvaluate";
import { permission } from "@/utils/directivePage";
import axios from "axios";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
import SchoolLocation from './components/modals/school-location'
import resetClass from './componentCourse/resetClass'
import teacherList from './componentCourse/teacherList'
import addCompound from './componentCourse/addCompound'
import infoMsg from './componentCourse/infoMsg'
let nowTime = new Date();
nowTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();

const initSearch = {
  teachMode: null, // 教学模式
  organIdList: null,
  courseStatus: null,
  courseType: null,
  timer: [nowTime, nowTime], // 时间
  class: null,
  teachType: null,
  mergeCourseType: null,
  isCallNames: null, // 是否点名
  search: null, // 乐团名称 编号 vip课名称
  teacherIdList: null, // 老师编号
  schoolId: null, // 教学点编号
  creatTimer: []
}
export default {
  data () {
    return {
      classVisible: false,
      timerVisible: false,
      courseVisible: false,
      locationVisible: false,
      courseType: courseType,
      mergeCourseType,
      courseListType: courseListType,
      searchForm: {...initSearch},
      tableList: [],
      searchLsit: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      teacherList: [],
      schoolList: [],
      maskForm: {},
      activeName: "first",
      id: null,
      show: false,
      compoundList: []
    };
  },
  components: {
    pagination,
    studentRollCall,
    gpsLoction,
    studentWork,
    courseEvaluate,
    resetClass,
    teacherList,
    addCompound,
    infoMsg,
    SchoolLocation
  },
  activated () {
    this.init();
  },
  computed: {
    workTypeOptions() {
      return objectToOptions(workType)
    },
    mergeCourseTypeOptions() {
      return objectToOptions(mergeCourseType)
    }
  },
  mounted () {
    this.$store.dispatch('setBranchs')
    this.$store.dispatch('setTeachers')
    this.$store.dispatch('setSchools')
    this.init();
  },
  methods: {
    init () {
      this.getList();
    },
    permission (str, parent) {
      return permission(str, parent);
    },
    async removeCourse(row) {
      console.log({...row})
      try {
        await this.$confirm('是否确认删除此数据?', '提示', {
          type: 'warning'
        })
        bathDelete({ courseScheduleIds: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        })
      } catch (error) {}
    },
    reset() {
      this.searchForm = {...initSearch}
      this.search()
    },
    search () {
      this.rules.page = 1;
      this.$refs.searchForm.save(this.searchForm)
      this.getList();
    },
    common(row) {
      this.searchForm = {
        ...initSearch,
        timer: [],
        search: row.newCourseId,
      }
      this.search()
    },
    getSearchForm() {
      let searchForm = this.searchForm;
      if (!searchForm.timer || searchForm.timer.length <= 0) {
        searchForm.timer = [];
        // this.$message.error("请选择时间段");
        // return;
      }
      if (!searchForm.creatTimer || searchForm.creatTimer.length <= 0) {
        searchForm.creatTimer = []
      }
      let count = 0
      for (let item in searchForm) {
        if (searchForm[item] && !Array.isArray(searchForm[item])) {
          count++
        } else if (Array.isArray(searchForm[item]) && searchForm[item].length > 0) {
          count++
        }
      }
      if (count <= 0) {
        this.$message.error('请至少选择一个搜索条件')
        return
      }
      const { creatTimer, timer, ...rest } = searchForm
      return {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
        ...getTimes(creatTimer, ['createStartDate', 'createEndDate']),
        ...getTimes(timer, ['startTime', 'endTime']),
      }
    },
    openLocation(school) {
      this.locationVisible = true
    },
    onCourseExport () {
      // 课表导出
      let url = "/api-web/export/superFindCourseSchedules";
      const options = {
        method: "get",
        headers: {
          Authorization: getToken()
        },
        params: this.getSearchForm(),
        url,
        responseType: "blob"
      };
      this.$confirm("您确定导出报表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then(res => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8"
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });
              let text = new Response(blob).text();
              text.then(res => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let fname = "课表列表" + new Date().getTime() + '.xls'; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch(error => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => { });
    },
    getList () {
      superFindCourseSchedules(this.getSearchForm()).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    lookDetail (row) {
      // this.maskForm = row;
      // 发请求 获取详情 row.id
      this.maskForm = row;
      this.activeName = "first";
      this.classVisible = true;
      getTeacherPersonalAttendanceDetail({ courseScheduleId: row.id }).then(res => {
        if (res.code == 200) {
          this.maskForm = { ...this.maskForm, ...res.data };
          this.maskForm.id = row.id;
          this.activeName = "first";
          this.classVisible = true;
        }
      })

    },
    handleClick (tab, event) {
      // console.log(tab, event);
    },
    resetClass (row) {
      console.log(row)
      this.id = row.id
      this.show = true
    },
    closeReset () {
      this.show = false
    },
    clearAttend (row) {
      this.$confirm("是否清除考勤记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          cleanAttendance({ courseScheduleIds: row.id }).then(
            res => {
              if (res.code == 200) {
                this.$message.success("清除成功");
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            }
          );
        })
        .catch(() => { });
    },
    addCompound (row) {
      this.compoundList.push(row)
      this.compoundList = [...new Set(this.compoundList)]
    },
    isAddCom (row) {
      let flag = false
      this.compoundList.forEach(com => {
        if (com.id == row.id) {
          flag = true
        }
      })
      return flag
    },
    cancleCompound (row) {
      let indexNum = null
      this.compoundList.forEach((com, index) => {
        if (com.id == row.id) {
          indexNum = index
        }
      })
      if (indexNum + '') {
        this.compoundList.splice(indexNum, 1)
      }
    },
    clearCom () {
      this.compoundList = []
    }

  },
  filters: {
    isCall (val) {
      if (val == 0) {
        return "未点名";
      } else if (val == 1) {
        return "已点名";
      }
    }
  },
  watch: {
    classVisible (val) {
      if (!val) {
        this.activeName = null;

      }
    }
  }
};
</script>
<style lang="scss" scoped>
.visible {
  visibility: hidden;
}
.cl-container {
  .topFrom {
    margin: 20px 30px 0;
    .classlist {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      ul {
        li {
          list-style: none;
        }
      }
    }
  }
  .searchForm {
    margin: 0 30px;
  }
}
.btnWraps {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 20px;
  }
}
.inputStyle {
  width: 180px;
}
.red {
  color: red;
}

.exportBtn {
  background: #13817a;
}
</style>