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>课时名称：管理思维</div>
                <div>授课教师：王教授</div>
                <div>授课教室：功能教室1</div>
                <div>考勤日期：2023.3.2</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.type" 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">查询</el-button>
                </div>
              </div>
              <div>
                <xy-table :list="list" :table-item="table_item" :isPage="false">
                  <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
        },

        form: {
          settings: '',
        },
        list:[],
        table_item:[{
          prop: 'name',
          label: '学员姓名',
          align: 'center'
        },{
          prop: 'date',
          label: '考勤时间',
          align: 'center'
        },{
          prop: 'status',
          label: '状态',
          align: 'center',
          customFn: (cell) => {
            return ( <div style = {{color: cell.status=='1'?"blue":"red"}}
            >
            {
              cell.status?cell.status:''
            } </div> )
          }
        }]
      }
    },
    created() {},
    methods: {
      setRow(row,status){
        this.keepsObj = row
        this.select.status = status
        this.getList()
      },
      async getList() {
        const res = index({
          page:this.select.page,
          page_size:this.select.page_size,
          filter:[{
            key:'course_content_id',
            op:'eq',
            value:this.keepsObj.id
          },{
            key:'status',
            op:'eq',
            value:this.select.status
          },{
            key:'date',
            op:'eq',
            value:this.keepsObj.date
          }],

        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {

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

  }
</script>

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

</style>