dy-admin-manager/src/views/indexErrDataRecord/components/errorCourse.vue

<template>
  <div>
    <div class="m-core">
      <!-- 搜索类型 -->
      <save-form
        :inline="true"
        class="searchForm"
        @submit="search"
        @reset="reset"
        ref="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item>
          <el-input
            type="number"
            v-model.trim="searchForm.courseIdSearch"
            clearable
            placeholder="课程编号"
          />
        </el-form-item>
        <el-form-item>
          <remote-search
            :commit="'setTeachers'"
            v-model="searchForm.teacherIdList"
          />
        </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.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-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-button
            :type="isSearch ? 'primary' : 'info'"
            icon="el-icon-circle-plus-outline"
            @click="showMove = true"
            >更多选项</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>
        </el-form-item>
      </save-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          ref="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          row-key="id"
        >
          >

          <el-table-column
            align="center"
            prop="organName"
            label="分部名称"
          ></el-table-column>
          <el-table-column
            align="center"
            width="170px"
            prop="musicGroupId"
            label="乐团/课程组编号"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="gotoCourse(scope.row)">
                <copy-text>{{ scope.row.musicGroupId }}</copy-text>
              </el-button>
            </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" label="产生时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.generateTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="处理时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.dealTime }}
              </div>
            </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>
                <auth auths="/teamCourseListDetail">
                  <el-button type="text" @click="lookDetail(scope.row)"
                    >查看</el-button
                  >
                </auth>
              </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="showMove"
      v-if="showMove"
      width="700px"
    >
      <el-form
        :inline="true"
        class="searchForm"
        @submit="search"
        @reset="reset"
        ref="searchForm2"
        :model.sync="searchForm"
        label-width="120px"
      >
        <el-form-item label="课程组编号/名称" prop="search">
          <el-input
            style="width: 180px"
            v-model.trim="searchForm.search"
            clearable
            placeholder="课程组编号/课程名称"
          />
        </el-form-item>
        <el-form-item label="教学点" prop="schoolId">
          <el-select
            style="width: 180px"
            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 label="分部" prop="organIdList">
          <el-select
            style="width: 180px"
            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 label="课程组类型" prop="groupType">
          <el-select
            style="width: 180px"
            v-model.trim="searchForm.groupType"
            clearable
            filterable
            placeholder="课程组类型"
          >
            <el-option
              v-for="item in courseListType"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学模式" prop="teachMode">
          <el-select
            style="width: 180px"
            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 label="合并课类型" prop="mergeCourseType">
          <el-select
            style="width: 180px"
            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 label="老师类型" prop="teachType">
          <el-select
            style="width: 180px"
            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 label="是否点名" prop="isCallNames">
          <el-select
            style="width: 180px"
            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 label="创建日期" prop="creatTimer">
          <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-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleMore">取 消</el-button>
        <el-button type="primary" @click="okMore">确 定</el-button>
      </span>
    </el-dialog>
    <!-- showMove -->
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  superFindCourseSchedules,
  cleanAttendance,
  cancelCourseMerge,
} from "@/api/buildTeam";
import { bathDelete } from "@/api/vipSeting";
import { workType, mergeCourseType } from "@/constant";
import { objectToOptions, getTimes } from "@/utils";
import { getTeacherPersonalAttendanceDetail } from "@/api/teacherManager";
import { courseType, courseListType } from "@/utils/searchArray";
import { permission } from "@/utils/directivePage";
import { getHistoryErrCourse } from "../api";
let nowTime = new Date();
nowTime =
  nowTime.getFullYear() +
  "-" +
  (nowTime.getMonth() + 1) +
  "-" +
  nowTime.getDate();

const initSearch = {
  teachMode: null, // 教学模式
  organIdList: null,
  courseStatus: null,
  courseType: null,
  timer: [], // 时间
  class: null,
  teachType: null,
  mergeCourseType: null,
  isCallNames: null, // 是否点名
  search: null, // 乐团名称 编号 vip课名称
  teacherIdList: null, // 老师编号
  schoolId: null, // 教学点编号
  creatTimer: [],
  courseIdSearch: null,
};
export default {
  props:['searchType'],
  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: [],
      deleteList: [],
      isMainGo: false,
      isDetele: false,
      showMove: false,
    };
  },
  components: {
    pagination,
  },
  created() {
    // this.searchForm.timer = [nowTime, nowTime];
  },
  computed: {
    workTypeOptions() {
      return objectToOptions(workType);
    },
    mergeCourseTypeOptions() {
      return objectToOptions(mergeCourseType);
    },
    isSearch() {
      return (
        this.searchForm.search ||
        this.searchForm.schoolId ||
        this.searchForm.organIdList ||
        this.searchForm.groupType ||
        this.searchForm.teachMode ||
        this.searchForm.mergeCourseType ||
        this.searchForm.teachType ||
        this.searchForm.isCallNames ||
        this.searchForm.creatTimer?.length > 0
      );
    },
  },
  mounted() {
    const { query } = this.$route;
    if (query.start || query.end) {
      this.searchForm.timer = [query.start, query.end];
    } else {
      let flag = false;
      for (let item in this.searchForm) {
        if (typeof this.searchForm[item] == "object") {
          // 对象或者数组
          if (this.searchForm[item]?.length > 0) {
            flag = true;
          }
        } else {
          if (this.searchForm[item]) {
            flag = true;
          }
        }
      }
      if (!flag) {
        this.searchForm.timer = [];
      }
    }
    // 课程时间段异常，不需要时间搜索
    if (query.searchType == "COURSE_TIME_ERROR") {
      this.searchForm.timer = [];
    }

    if (query.organId) {
      this.searchForm.organIdList = Number(query.organId);
    }
    this.$store.dispatch("setBranchs");
    this.$store.dispatch("setTeachers");
    this.$store.dispatch("setSchools");

    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    setTimeForSearch() {
      const { query } = this.$route;
      if (query.start || query.end) {
        this.searchForm.timer = [query.start, query.end];
      } else {
        this.searchForm.timer = [];
      }
    },
    permission(str, parent) {
      return permission(str, parent);
    },
    reloadSearch(notSetTime) {
      if (!notSetTime) {
        this.searchForm.timer = [nowTime, nowTime];
      }
      this.rules.page = 1;
      this.getList();
    },

    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: [],
        courseIdSearch: 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 false;
      // }
      const { creatTimer, timer, ...rest } = searchForm;
      return {
        ...rest,
        page: this.rules.page,
        rows: this.rules.limit,
        searchType: this.searchType,
        ...getTimes(creatTimer, ["createStartDate", "createEndDate"]),
        ...getTimes(timer, ["startTime", "endTime"]),
      };
    },
    async getList() {
      if (!this.getSearchForm()) {
        return;
      }

      try {
        const res = await getHistoryErrCourse(this.getSearchForm());
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {
        console.log(e);
      }

      // superFindCourseSchedules(this.getSearchForm()).then((res) => {
      //   if (res.code == 200) {
      //     this.tableList = res.data.rows;
      //     this.rules.total = res.data.total;
      //     let idList = this.deleteList.map((course) => {
      //       return course.id;
      //     });
      //     this.isDetele = true;
      //     this.$nextTick(() => {
      //       this.tableList.forEach((course) => {
      //         if (idList.indexOf(course.id) != -1) {
      //           this.$refs.tableList.toggleRowSelection(course, true);
      //         }
      //       });
      //       this.isDetele = false;
      //     });

      //     // let arr = this.$helpers.lodash.differenceWith( this.tableList, this.deleteList,'id')
      //   }
      // });
    },
    lookDetail(row) {

      this.$router.push({path:'/teamCourseList'})
      // 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;
      //       this.isMainGo = this.$refs.filterSearch?.show;
      //     }
      //   }
      // );
    },

    resetClass(row) {
      this.id = row.id;
      this.show = true;
    },
    closeReset() {
      this.show = false;
    },
    gotoCourse(row) {
      if (row.groupType == "MUSIC") {
        this.$router.push({
          path: "/teamList",
          query: { search: row.musicGroupId },
        });
      } else if (row.groupType == "VIP") {
        this.$router.push({
          path: "/vipManager/vipList",
          query: { search: row.musicGroupId },
        });
      } else if (row.groupType == "PRACTICE") {
        this.$router.push({
          path: "/accompanyManager/accompany",
          query: { search: row.musicGroupId },
        });
      }
    },
  },
  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;
}
.green {
  color: #14928a;
}

.exportBtn {
  background: #13817a;
}
.newBand {
  margin-top: 30px;
}
</style>