fe-manage/src/components/student/OnlineClassModelStudent.vue

<template>
  <a-modal
    :visible="visiable"
    :centered="true"
    width="70%"
    title="学员管理"
    @cancel="closeDrawer"
  >
    <div class="header-content">
      <div style="font-size: 16px">
        {{ formData.name }} 课程
      </div>
      <div>
        <span
          style="color:#999">内容分类</span>：{{
          (sysTypeOption1?.name || "") + "/" + (sysTypeOption2?.name || "") + (sysTypeOption3?.name || "")
        }}
      </div>
      <div>
        <span style="color:#999">授课教师</span>：{{ formData.teacherName || "" }}
      </div>
      <div>
        <span style="color:#999">审核状态</span>：{{
          {
            1: "草稿",
            2: "待审核",
            3: "审核不通过",
            5: "审核通过"
          }[formData.status] || ""
        }}
      </div>
    </div>
    <div class="TableStudent">
      <a-row
        type="flex"
        gutter="12"
        style="padding-left: 20px; margin-right: 0px"
      >
        <a-col>
          <a-form-item title="学员名称：">
            <a-input
              class="cus-input"
              v-model:value="searchParams.studentName"
              placeholder="请输入学员名称"
            />
          </a-form-item>
        </a-col>
        <a-col>
          <a-button
            class="cus-btn"
            style="background: #4ea6ff; color: #fff; width: 100px"
            @click="searchStu"
          >
            <template #icon><img style="margin-right: 10px" src="../../assets/images/courseManage/search0.png"/>
            </template>
            搜索
          </a-button>
        </a-col>
        <a-col :span="2">
          <a-button class="cus-btn white" style="width: 100px" @click="reset">
            <template #icon><img style="margin-right: 10px" src="../../assets/images/leveladd/reset.png"/></template>
            重置
          </a-button>
        </a-col>
      </a-row>

      <a-row
        type="flex"
        gutter="12"
        style="padding-left: 20px; margin-right: 0px"
      >
        <a-col :span="1.5">
          <CommonStudent
            :type="type"
            title="添加在线课学员"
            :id="formData.id"
            @finash="submitCall"
            :stage="stage"
          >
            <a-button class="cus-btn" style="background: #4ea6ff; color: #fff" :loading="stuAsyncLoading">
              <template #icon><img style="margin-right: 10px" src="../../assets/images/courseManage/add0.png"/>
              </template>
              添加学员
            </a-button>
          </CommonStudent>
        </a-col>
        <a-col>
          <a-button class="cus-btn" style="background: #4ea6ff; color: #fff; width: 100px" @click="exportStu">
            <template #icon><img style="margin-right: 10px" src="../../assets/images/courseManage/search0.png"/>
            </template>
            导出
          </a-button>
        </a-col>
      </a-row>
      <div style="margin-top: 20px">
        <a-table
          :columns="columns"
          :data-source="studentList"
          :pagination="stuPagination"
          :loading="loading"
          row-key="id"
        >
          <template #action="{ record }">
            <a-space :size="2">
              <slot name="extension" v-bind:data="{ record }"></slot>
              <a-button v-if="checkPer(permissions)" @click="del(record.courseStuId)" type="link" danger>删除</a-button>
            </a-space>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import {computed, defineExpose, defineProps, ref, watch} from "vue";
import {boeRequest, request, usePage} from "@/api/request";
import {ONLINE_COURSE_TEACHER, STUDENT_LIST} from "@/api/apis";
import CommonStudent from "@/components/student/CommonStudent";
import {checkPer} from "@/utils/utils";
import dialog from "@/utils/dialog";
import {ONLINE_COURSE_DEL} from "@/api/ThirdApi";
import {useStore} from "vuex";
import {useAsyncStu, useResetRef} from "@/utils/useCommon";

const props = defineProps({
  permissions: {
    type: String,
    default: ""
  },
  type: Number,
  stage: {
    type: Array,
    default: () => [],
  },
  types: {
    type: Array,
    default: () => [],
  },
});

const visiable = ref(false);
const store = useStore();

const searchParams = useResetRef({
  studentName: "",
  pageNo: 1,
  pageSize: 10,
  type: props.type || "",
  types: props.types,
  pid: "",
});

const columns = ref([
  {
    title: "姓名",
    dataIndex: "studentName",
    key: "studentName",
    width: 50,
    align: "center",
    ellipsis: true,
  },
  {
    title: "工号",
    dataIndex: "studentUserNo",
    key: "studentUserNo",
    width: 50,
    align: "center",
    ellipsis: true,
  },
  {
    title: "部门",
    dataIndex: "studentDepartName",
    key: "studentDepartName",
    width: 80,
    align: "center",
    ellipsis: true,
  },
  {
    title: "岗位",
    dataIndex: "studentJobName",
    key: "studentJobName",
    width: 80,
    align: "center",
    ellipsis: true,
  },
  {
    title: "Band",
    dataIndex: "studentBandDesc",
    key: "studentBandDesc",
    width: 80,
    align: "center",
    ellipsis: true,
  },
  {
    title: "报名状态",
    dataIndex: "studentDepartName",
    key: "studentDepartName",
    width: 80,
    align: "center",
    ellipsis: true,
    customRender: () => "已报名",
  },
  {
    title: "加入方式",
    dataIndex: "studentDepartName",
    key: "studentDepartName",
    width: 80,
    align: "center",
    ellipsis: true,
    customRender: () => "手动加入",
  },
  {
    title: "数据来源",
    dataIndex: "id",
    key: "id",
    width: 80,
    align: "center",
    ellipsis: true,
    customRender: () => "-",
  },
  // {
  //   title: "评估状态",
  //   dataIndex: "status",
  //   key: "status",
  //   width: 80,
  //   align: "center",
  //   ellipsis: true,
  //   customRender: () => "-",
  // },
  // {
  //   title: "考试成绩",
  //   dataIndex: "score",
  //   key: "score",
  //   width: 80,
  //   align: "center",
  //   ellipsis: true,
  //   customRender: ({ record: { score } }) => score || "-",
  // },
  {
    title: "状态",
    dataIndex: "finishStatus",
    key: "finishStatus",
    width: 80,
    align: "center",
    ellipsis: true,
    customRender: ({ record: { finishStatus } }) => finishStatus==9 ? "已完成" : finishStatus==2 ? "进行中": '未开始',
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 50,
    align: "center",
    slots: { customRender: "action" },
  },
]);

const formData = ref({});

watch(formData, () => {
  request(ONLINE_COURSE_TEACHER, { courseId: formData.value.id }).then(res => {
    formData.value.teacherName = res.data;
  });
});

const sysTypeOption1 = computed(() => store.state.content_type?.find(({ code }) => code == formData.value.sysType1));
const sysTypeOption2 = computed(() => sysTypeOption1.value?.children ? sysTypeOption1.value?.children?.find(({ code }) => code == formData.value.sysType2) : {});
const sysTypeOption3 = computed(() => sysTypeOption2.value?.children ? sysTypeOption2.value?.children?.find(({ code }) => code == formData.value.sysType3) : {});

const { data: studentList, fetch: searchStu, total, loading } = usePage(STUDENT_LIST, searchParams, false);
const { loading: stuAsyncLoading, start } = useAsyncStu(formData.value.id, props.type, searchStu);

const stuPagination = computed(() => ({
  total: total.value,
  showSizeChanger: false,
  current: searchParams.value.pageNo,
  pageSize: searchParams.value.pageSize,
  onChange: changePagination
}));

const openDrawer = (raw) => {
  console.log(raw);
  searchParams.value.pid = raw.id;
  formData.value = raw;
  visiable.value = true;
  searchStu();
};

const changePagination = (page) => {
  searchParams.value.pageNo = page;
  searchStu();
};

function del(id) {
  dialog({
    content: "确定删除?", ok: async () => {
      if (id) {
        loading.value = true;
        await boeRequest(ONLINE_COURSE_DEL(id, formData.value.id));
        searchStu();
      }
    }
  });
}

function submitCall(flag) {
  flag && start({ id: formData.value.id });
  flag && searchStu();
}

const closeDrawer = () => {
  visiable.value = false;
};

function reset() {
  searchParams.reset({ pid: searchParams.value.pid });
  searchStu();
}

function exportStu() {
  window.open(`${process.env.VUE_APP_BASE_API}/admin/student/exportOnlineStudent?type=3&&thirdType=8&pid=${searchParams.value.pid}`);
}

defineExpose({
  searchStu,
  loading,
  closeDrawer,
  openDrawer
});
</script>
<style lang="scss">
.header-content {
  padding: 20px;
  border: 1px solid #eef9f3;
  margin-bottom: 20px;

  div {
    margin-top: 10px;
  }
}

.cus-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border: 1px solid #4ea6ff;
  border-radius: 8px;
  background: #4ea6ff;
  cursor: pointer;
  color: #fff;
}

.white {
  background: #fff;
  color: #4ea6ff;
}

.cus-input {
  height: 40px;
  border-radius: 8px;
}

.cus-select {
  height: 40px;
  border-radius: 8px;
}

.CommonStudent {
  .ant-btn-primary {
    background-color: #4ea6ff !important;
  }

  .cus-select {
    height: 40px;
    border-radius: 8px;
  }

  .tableBox .ant-table-row .ant-table-cell {
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    color: #4f5156;
    line-height: 29px;
    padding: 0px;
  }

  .tableBox .ant-table-thead tr th {
    font-size: 14px;
  }

  .ant-tabs-tabpane {
    height: 100%;
  }

  .ant-tabs {
    overflow: visible;
  }

  .right1 {
    border-left: 1px solid #f2f6fe;
    margin-left: 20px;

    .onerow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 40px;
      flex-wrap: wrap;

      width: 100%;

      .onleft {
        display: flex;
        text-align: center;

        .already {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
          margin-left: 32px;
          white-space: nowrap;
          // margin-bottom: 20px;
        }

        .count {
          color: #4ea6ff;
          font-size: 16px;
          margin: 0 6px;
        }

        .peo {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
        }
      }

      .clbox {
        margin-right: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 104px;
        height: 32px;
        border-radius: 4px;
        background: #4ea6ff;

        .colose {
          width: 16px;
          height: 16px;
          // border-radius: 8px;
          // background: #ffffff;
          // position: relative;
          background-image: url(../../assets/images/basicinfo/ch.png);
          background-size: 100%;
          margin-right: 4px;
        }

        .allclear {
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
        }
      }
    }

    .selecteds {
      display: flex;
      flex-wrap: wrap;
      margin-left: 32px;

      .person {
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid #f2f6fe;
      }

      .chose {
        width: 64px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .ch {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .ifsw {
        display: flex;
        align-items: end;
        justify-content: center;
        color: #4ea6ff;
      }

      .sw {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: justify;
        color: #4ea6ff;
        margin-top: 23px;
        margin-left: 10px;
      }

      .dept {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose1 {
        //width: 90px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch1 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .group {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose2 {
        //width: 120px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch2 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }
    }
  }
}
</style>