## 学员详情组件

各业务平台学员详情组件

### 基本用法-1

当作页面组件

:::demo 学员详情有很多插槽

```html
<template>
  <div>
    <el-button @click='onUpdateArchives'>更新</el-button>
    <el-button @click='isShowEdit=!isShowEdit'>切换编辑状态</el-button>
    <klzz-student-detail
      ref='studentRef'
      :user_id="user_id"
      :base_info="baseInfo"
      :tabs_list="tabs_list"
      :tabs_components_list="tabs_components_list"
      :tabs_data="tabs_data"
      :base_info_config='base_info_config'
      :is_show_edit='isShowEdit'
      platform="klzz-01"
      @openTestDetails="openTestDetails"
      @on-archives-update="onRecordUpdate"
      @on-update-archives='onUpdateArchives'
      @on-course-report='onCourseReport'
      @get-student-details='getStudentDetails'
      @on-archives-again = 'updateBack'
    >
      <span slot="prepend-test" @click="getTelNum">
        <i class="el-icon-info"></i>
      </span>
      
      <span slot="append-test">
        <i class="el-icon-question"></i>
      </span>

      <el-button
        v-for="item in base_info_config"
        :key="item.key"
        :slot="`out-append-${item.append}`"
        type="text"
        size="medium"
        class="text-btn"
        @click="btnChange(item.key)"
      >
        [ 修改 ]
      </el-button>

    </klzz-student-detail>
  </div>
</template>
<script>
export default {
    data() {
      return {
        user_id: 219058926,
        baseInfo: [
          {
            desc: "所属LD",
            field: "s_ldName",
            show: true,
            order: 200
          },
          {
            desc: "预习完成率/月",
            field: "preview_rate",
            show: true,
            order: 201
          },
          {
            desc: "作业完成率/月",
            field: "homework_rate",
            show: true,
            order: 202
          },
          {
            desc: "专题测完成率/月",
            field: "evaluation_rate",
            show: true,
            order: 203
          },
          {
            desc: "出席率/月",
            field: "attend_rate",
            show: true,
            order: 204
          },
          {
            desc: "打卡赠课是否已满",
            field: "clock_in_over_flag_str",
            show: true,
            order: 206,
            class: "clock_in_over_flag_str",
            value: "未满"
          },
          {
            desc: "是否提醒双周打卡",
            field: "cw_card_flag_str",
            show: true,
            order: 207
          },
          {
            desc: "学员AB标签",
            field: "stu_ab_tag",
            show: true,
            order: 208,
            append: "stu_ab_tag"
          },
          {
            desc: "精彩瞬间",
            field: "screenshot",
            show: true,
            order: 209,
            prepend: "screenshot",
            append: "screenshot"
          },
          {
            field: "placeholder_01",
            desc: "占位符号1",
            show: true,
            order: 210,
            placeholder: true
          },
          {
            field: "placeholder_02",
            desc: "占位符号2",
            show: true,
            order: 211,
            placeholder: true
          },
          {
            field: "placeholder_03",
            desc: "占位符号2",
            show: true,
            order: 211,
            placeholder: true
          }
        ],
        tabs_list:[
           {
             label: "StudentArchives2",
              name: "回访记录",
              order: 19,
              show: true
            },
           {
             label: "StudentArchives3",
              name: "学生档案3",
              order: 20,
              show: true
            },
           {
             label: "StudentArchives4",
              name: "学生档案4",
              order: 21,
              show: true
            },
           {
             label: "StudentArchives5",
              name: "学生档案5",
              order: 22,
              show: true
            },
           {
             label: "StudentArchives6",
              name: "学生档案6",
              order: 23,
              show: true
            }
        ],
        tabs_components_list:[
            {
              component: '',// 组件名
              name: '回访记录',
              key: 'StudentArchives2',
            },
            {
              component: '',// 组件名
              name: '学生档案3',
              key: 'StudentArchives3',
            },
            {
              component: '',// 组件名
              name: '学生档案4',
              key: 'StudentArchives4',
            },
            {
              component: '',// 组件名
              name: '学生档案5',
              key: 'StudentArchives5',
            },
            {
              component: '',// 组件名
              name: '学生档案6',
              key: 'StudentArchives6',
            },
        ],
        tabs_data:{
          followData:{
            create_time_str:'custom'
          },
          courseInfoData:{
            details: true,
            examineReport: true
          }
        },

        base_info_config:{
         teacher_name:{
           class:'test',
           append:'teacher_name',
           prepend:'teacher_name'
         }
        },

        testStatus:false,
        isUpdate:false,
        isShowEdit:true
      };
    },

    created(){
      this.user_id = this.$route.query.userId|| '219058926'
    },

     methods: {
       getTelNum(){
         alert('点击了测试数据')
       },

       openTestDetails(row){
         this.testStatus = !this.testStatus;
         alert(`点击测评中心 详情按钮 ${this.testStatus?'执行传入事件':'执行组件库默认事件'}`)
         return this.testStatus
       },

       onRecordUpdate(){
          alert('点击 -- 学生档案 -- 更新按钮')
          this.$refs.studentRef.refreshArchives()
       },

       onCourseReport(){
         alert('点击 -- 直播课程信息 -- 查看报告按钮')
       },

       getStudentDetails(data){
         console.log('获取学员信息--',data)
       },

       btnChange(key){
           alert(`点击基础信息追加的插槽 插槽名为${key}`)
       },

       updateBack(){
         alert('执行 更新函数')
       },

       onUpdateArchives(){
         alert('调用更新数据')
       }
     }
  };
</script>
```

:::

### 基本用法-2

当作弹窗组件

:::demo 学员详情有很多插槽

```html
<template>
  <el-button @click="open">学员详情</el-button>
  <el-dialog :visible="visible" @close="visible = false">
    <klzz-student-detail
      ref="studentDetial"
      :user_id="user_id"
    ></klzz-student-detail>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        user_id: 219058926
      };
    },
    methods: {
      open() {
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["studentDetial"].open();
        });
      }
    }
  };
</script>
```

:::

### Attributes

| 参数    | 说明    | 类型          | 可选值 | 默认值 |
| ------- | ------- | ------------- | ------ | ------ |
| user_id | 学员 id | string/number | —      | —      |
| platform | 平台 | string | —      | —      |
| gift_in_kind_type | 豌豆币 | string/number | —      | 3 代表的lp  |
| base_info_config | 基础信息配置 | Object | — | — |
| base_info | 基础信息 | Array | desc: 信息描述(必传)    field: 字段名(必传)     show: 是否展示    order:key值 (必传)     icon: 图标    value:信息描述对应的值    prepend: 信息描述前面的插槽    append: 信息描述后的插槽    class: value对应的标签类名    events: 事件| —      |
| tabs_list | 展示的底部table | Array | label/key:名称需保持一致 方便存储 name: tab对应的名字 order: 排序的key  show: 是否显示 | —      |
| tabs_components_list | 展示底部对应的实际内容 | Array | component: tab对应的组件名 方便存储 name: tab对应的名字 key:key值 | —      |
| tabs_data | 底部表单对应的数据对象| Object | {courseData:课程信息数据,testData:测试记录数据}     | —      |


### Slot

| Name                 | Description          |
| -------------------- | -------------------- |
| student-baseinfo     | 学员基本信息插槽     |
| header-content       | 头部区域插槽         |
| student-button       | 头部按钮插槽         |
| field-\${item.field} | 学员信息后缀插槽     |
| content-view         | 学员信息字段插槽     |
| student-detail       | 学员详情组件全局插槽 |
| student-tags       | 学员详情 头部标签插槽 |
| prepend-\${item.prepend}       | 基础信息: 描述文字后对应的插槽 |
| append-\${item.append}     | 基础信息: 描述文字 对应的值 后面的插槽 |

### Methods

| 方法 | 说明     | 参数 |
| ---- | -------- | ---- |
| open | 显示组件 | —    |
| openTestDetails | 测评中心 -- 查看| row: 当前这一列数据    |
| on-archives-update | 学生档案 -- 更新按钮|
| on-course-report | 直播课程信息 -- 查看报告|
| on-test-look | 测评中心 -- 查看|
| getStudentInfo | 获取学生基础信息(refs 调用)  |
| refreshArchives | 刷新学生档案信息(refs 调用)  |