sz-kjsxy-web/src/views/course/components/showAttendance.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'" :title="'考勤明细'" :form="form">
      <template v-slot:settings>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;width:0;display:none">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>
          </div>
          <div class="xy-table-item-content" style="flex-grow: 1;">
            <div class="txl">
              <div>
                <div>课程主题：{{keepsObj.theme?keepsObj.theme:''}}</div>
                <div>授课教师：{{keepsObj.teacher?keepsObj.teacher.name:''}}</div>
                <div>授课教室：{{keepsObj.address}}</div>
                <div>考勤日期：{{keepsObj.date}}</div>
              </div>
              <div style="display: flex;align-items: center;margin-bottom:15px">
                <div style="margin-right: 10px;">
                  <el-input v-model="select.name" placeholder="请输入学员姓名"></el-input>
                </div>
                <div style="margin-right: 10px;">
                  <el-select v-model="select.status" placeholder="请选择状态" clearable>
                    <el-option v-for="item in keep_options" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div style="margin-right: 10px;">
                  <el-button type="primary" size="small" @click="getList">查询</el-button>
                </div>
              </div>
              <div>
                <xy-table :list="list" :table-item="table_item" :isPage="false">
                  <template v-slot:status>
                    <el-table-column align='center' label="状态" header-align="center">
                      <template slot-scope="scope">
                        <div v-for="item in keep_options">
                           <el-tag :type="item.type" v-if="scope.row.status===item.id">{{item.value}}</el-tag>
                        </div>
                      </template>
                    </el-table-column>
                  </template>
                  <template v-slot:btns>
                    <div></div>
                  </template>
                </xy-table>
              </div>
            </div>
          </div>
        </div>
      </template>


      <template v-slot:footerContent>
        <el-button type="primary" plain style='margin-left:5px;margin-bottom:5px;' @click="isShow=false">关闭</el-button>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    index
  } from "@/api/course/courseKeeps.js"
  import myMixins from "@/mixin/selectMixin.js";
  export default {
    mixins: [myMixins],
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        select: {
          status: '',
          page: 1,
          page_size: 999
        },
        keepsObj:{},
        form: {
          settings: '',
        },
        list: [],
        table_item: [{
          prop: 'user.name',
          label: '学员姓名',
          align: 'center'
        }, {
          prop: 'time',
          label: '考勤时间',
          align: 'center'
        }, {
          prop: 'status',
          label: '状态',
          align: 'center',

        }]
      }
    },
    created() {},
    methods: {
      setRow(row, status) {
        this.keepsObj = row?row:{}
        this.select.status = status
        this.getList()
      },
      async getList() {
        const res = await index({
          page: this.select.page,
          page_size: this.select.page_size,
          show_relation:['user'],
          filter: [{
            key: 'course_content_id',
            op: 'eq',
            value: this.keepsObj.id
          }, {
            key: 'status',
            op: 'eq',
            value: this.select.status
          }],
        })
        console.log("res",res.data)
        this.list = res.data
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {

        } else {
          this.keepsObj = {}
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .settings {
    flex-basis: 100%;
  }
</style>