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 type_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>
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        select:{
          name:'',
          type:''
        },
        form: {
          settings: '',
        },
        type_options:[{
          id:0,
          value:'正常'
        },{
          id:1,
          value:'缺勤'
        }],
        list:[{
          name:'王同学',
          time:'9:10',
          status:'正常'
        },{
          name:'李同学',
          time:'',
          status:'缺勤'
        }],
        table_item:[{
          prop: 'name',
          label: '学员姓名',
          align: 'center'
        },{
          prop: 'time',
          label: '考勤时间',
          align: 'center'
        },{
          prop: 'status',
          label: '状态',
          align: 'center',
          customFn: (cell) => {
            return ( < div style = {{color: cell.status=='正常'?"blue":"red"}}
            >
            {
              cell.status?cell.status:''
            } </div> )
          }
        }]
      }
    },
    created() {},
    methods: {

      getDetail() {
        show({
          id: this.id,
          table_name: 'new_plans',
        }).then(res => {

        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            // this.getDetail()
          }
        } else {
          this.id = ''
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

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

</style>