dy-admin-manager/src/views/musicInspection/modals/lookDetail.vue

<template>
  <div>
    <descriptions :column="3">
      <descriptions-item label="所属分部：">
        {{ detail.organName }}
      </descriptions-item>
      <descriptions-item label="合作单位：">
        {{ detail.cooperationName }}
      </descriptions-item>
      <descriptions-item label="巡查乐团：">
        {{ detail.musicGroupName }}
      </descriptions-item>
      <descriptions-item label="乐团主管：">
        {{ detail.realName }}
      </descriptions-item>
      <descriptions-item label="巡查时间：">
        {{ dayjs(detail.planStart).format("YYYY-MM-DD HH:mm") }}~
        {{ dayjs(detail.planEnd).format("HH:mm") }}
      </descriptions-item>
      <descriptions-item label="提交时间：">
        {{ detail.submitedTime }}
      </descriptions-item>
      <descriptions-item label="处理方式：">
        {{ detail.memo }}
      </descriptions-item>
    </descriptions>

    <el-table style="margin-top: 15px" :data="tableData">
      <el-table-column
        prop="name"
        fixed="left"
        label="巡查项目"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column label="课前管理" align="center">
               <el-table-column
          width="200px"
          align="center"
          label="老师是否提前20分钟到校？"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[1] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          width="200px"
          align="center"
          label="老师是否提前准备板书（本课内容、训练）"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[2] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          width="200px"
          align="center"
          label="老师是否提前准备板书（本课内容、训练）"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[3] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="2"
          width="160px"
          label="老师是否佩戴工牌"
          align="center"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[2] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="3"
          width="180px"
          label="老师是否仪容仪表整洁"
          align="center"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[3] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="4"
          width="160px"
          label="老师是否携带乐器"
          align="center"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[4] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="5"
          width="160px"
          align="center"
          label="老师是否携带教学资料、设备"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[5] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="课中管理" align="center">
        <el-table-column
          prop="6"
          width="160px"
          align="center"
          label="老师是否合理安排学员座位"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[6] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="7"
          width="160px"
          align="center"
          label="乐器箱包、书包是否摆放整齐"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[7] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="8"
          width="180px"
          align="center"
          label="课堂纪律是否保持良好"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[8] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="9"
          width="180px"
          align="center"
          label="老师是否全程站立教学"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[9] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="10"
          width="160px"
          align="center"
          label="老师是否全程使用节拍器或教学音频"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[10] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="11"
          width="160px"
          align="center"
          label="未发现私换乐器"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[11] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="12"
          width="160px"
          align="center"
          label="老师是否将上课照片/视频发送到声部群"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[12] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="课后管理" align="center">
        <el-table-column
          prop="13"
          width="160px"
          align="center"
          label="老师是否保持教室环境卫生"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[13] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="14"
          width="160px"
          align="center"
          label="老师是否关好所有电源、门窗"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[14] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="15"
          width="160px"
          align="center"
          label="老师是否有序组织学员放学"
        >
          <template slot-scope="scope">
            <i
              :class="scope.row[15] == 1 ? 'el-icon-check' : 'el-icon-close'"
            ></i>
          </template>
        </el-table-column>
      </el-table-column>
      <template #empty>
        <empty />
      </template>
    </el-table>
  </div>
</template>
<script>
import numeral from "numeral";
import dayjs from "dayjs";
import descriptions from "@/components/Descriptions";
import { getPlanConclusion } from "../api";
export default {
  props: ["detail"],
  components: { descriptions },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    dayjs,
    numeral,
    async init() {
      try {
        let detail = this.detail;
        // if(!detail) {
        //   return
        // }
        const res = await getPlanConclusion({ planId: detail.id });
        this.tableData = res.data;
      } catch (err) {}
    },
  },
};
</script>
<style lang="less" scoped>
.alert {
  margin: 10px 0;
}
::v-deep .el-icon-close,
::v-deep .el-icon-check {
  font-size: 18px;
  font-weight: bold;
}
::v-deep .el-icon-close {
  color: red;
}
::v-deep .el-icon-check {
  color: var(--color-primary);
}
</style>