fe-manage/src/components/drawers/ActiveAttendance.vue

<template>
  <a-drawer :visible="AAvisible" class="largeDrawerStyle" placement="right" width="80%"
    @after-visible-change="afterVisibleChange">
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">【{{ datasource.type == 6 ? "直播" : "活动" }}】考勤</div>
        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer" />
      </div>
      <div class="centermain">
        <div class="titl">
          <div class="endtime">
            起止时间：{{
              datasource.info && datasource.info.liveStartTime ? datasource.info.liveStartTime : "-"
            }}
            ～
            {{ datasource.info && datasource.info.liveEndTime ? datasource.info.liveEndTime : "-" }}
          </div>

          <div class="endtime" style="margin-left: 64px">签到时间：{{ beginTime }}</div>
          <div class="endtime" style="margin-left: 40px">签退时间：{{ endTime }}</div>
        </div>

        <div class="search">
          <div class="leftchoose">
            <div class="namecon" style="margin-right: 30px">
              <div class="name">姓名：</div>
              <a-input v-model:value="name" style="width: 270px; height: 40px; border-radius: 8px" placeholder="请输入姓名"
                maxlength="20" />
            </div>
            <!-- <div class="namecon" style="margin-right: 30px">
              <div class="name">考勤：</div>
              <div class="select">
                <a-select
                  v-model:value="projectName"
                  style="width: 160px"
                  placeholder="请选择"
                  :options="projectNameList"
                  @change="selectProjectName"
                  allowClear
                  showSearch
                ></a-select>
              </div>
            </div> -->
            <div class="namecon">
              <div class="name">签到状态：</div>
              <div class="select">
                <a-select v-model:value="projectName2" style="width: 160px" placeholder="请选择" :options="projectNameList2"
                  @change="selectProjectName2" allowClear></a-select>
              </div>
            </div>
          </div>

          <div class="btns">
            <div class="btn btn1" style="margin-right: 20px" @click="searchTaskList">
              <div class="img1"></div>
              <div class="wz">搜索</div>
            </div>
            <div class="btn btn2" @click="resetTaskList">
              <div class="img2"></div>
              <div class="wz">重置</div>
            </div>
          </div>
        </div>
        <div class="btnss" style="margin-top: 20px">
          <div class="btn btn1" @click="signQR">
            <div class="wz">签到二维码</div>
          </div>
          <div class="btn btn2" @click="showqdModal">
            <div class="wz">批量签到</div>
          </div>
          <div class="btn btn1" @click="exportTaskStu">
            <div class="img2"></div>
            <div class="wz">导出数据</div>
          </div>
        </div>
        <!-- <div class="line">
          <div class="inline">
            <div class="left">
              <div class="img"></div>
              <div class="text" style="margin-left: 10px">已选择</div>
              <div class="text2">{{ selectedRowKeys.length }}</div>
              <div class="text">项</div>
              <div class="text3">列表选项总计：</div>
              <div class="text4">{{ tableData.length }}条</div>
            </div>
            <div class="right" @click="clearLine">清空</div>
          </div>
        </div> -->

        <div class="tableBox" style="margin-top: 30px">
          <a-table style="border: 1px solid #f2f6fe" :columns="tableDataFunc()" :data-source="tableData"
            :loading="tableDataTotalLoading" :scroll="{ x: 1300 }" :pagination="false" :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }" />
        </div>
      </div>
      <div class="btnn">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="closeDrawer">确定</button>
      </div>
    </div>
  </a-drawer>
  <!-- 批量签到弹窗 -->
  <a-modal v-model:visible="qdModal" :footer="null" :closable="closeCopy" wrapClassName="CopyModal" centered="true">
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>提示</span>
          <div class="close_exit" @click="closeqdModal"></div>
        </div>
        <div class="body">
          <span>您确定要批量签到吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1" @click="closeqdModal">
            <div class="btnText">取消</div>
          </div>
          <div class="del_btn btn2" @click="batchSign">
            <div class="btnText">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>

  <!-- 单独签到弹窗 -->
  <a-modal v-model:visible="singleqdModal" :footer="null" :closable="closeCopy" wrapClassName="CopyModal" centered="true">
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>提示</span>
          <div class="close_exit" @click="closesingleqdModal"></div>
        </div>
        <div class="body">
          <span>您确定要签到吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closesingleqdModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closesingleqdModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 单独签退弹窗 -->
  <a-modal v-model:visible="singleqtModal" :footer="null" :closable="closeCopy" wrapClassName="CopyModal" centered="true">
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>提示</span>
          <div class="close_exit" @click="closesingleqtModal"></div>
        </div>
        <div class="body">
          <span>您确定要签退吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closesingleqtModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closesingleqtModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 单独请假弹窗 -->
  <a-modal v-model:visible="singleqjModal" :footer="null" :closable="closeCopy" wrapClassName="CopyModal" centered="true">
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>提示</span>
          <div class="close_exit" @click="closesingleqjModal"></div>
        </div>
        <div class="body">
          <span>您确定要请假吗</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1">
            <div class="btnText" @click="closesingleqjModal">取消</div>
          </div>
          <div class="del_btn btn2">
            <div class="btnText" @click="closesingleqjModal">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  <!-- 二维码签到弹窗 -->
  <SignQR v-model:signQRvisible="signQRvisible" />

  <!-- 二维码弹窗 -->
  <two-dimensional-code v-model:codevisible="codevisible" :codeInfo="codeInfo" :index="codeIndex"
    :type="codeType == 1 ? '课程二维码' : codeType == 2 ? '签到二维码' : ''" />
  <!-- 二维码弹窗 -->
</template>

<script>
import { toRefs, reactive } from "vue";
import SignQR from "./SignQR.vue";
import TwoDimensionalCode from "../../components/TwoDimensionalCode";
import * as api from "../../api/indexTaskManage";
import { toDate } from "../../api/method";
import { message } from "ant-design-vue";
export default {
  name: "ActiveAttendance",
  components: {
    SignQR,
    TwoDimensionalCode
  },
  props: {
    AAvisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    datasource: {
      type: Object,
      default: function () {
        return {};
      },
    },
    types: {
      type: Number,
      default: null,
    }
  },

  setup(props, ctx) {
    const state = reactive({
      Evisible: false, //录入成绩抽屉
      name: null,
      showmodal: false, //勾选提示框
      closable: false, //modal右上角的关闭按钮
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: 100,
      signQRvisible: false, //二维码弹窗
      qdModal: false, //批量签到
      singleqjModal: false, //单独请假
      singleqdModal: false, //单独签到
      singleqtModal: false, //单独签退
      closeCopy: false,
      projectNameList: [
        {
          id: 1,
          value: "1",
          label: "签到",
        },
        {
          id: 2,
          value: "2",
          label: "请假",
        }
      ],
      projectNameList2: [
        {
          id: 1,
          value: "1",
          label: "正常",
        },
        {
          id: 2,
          value: "2",
          label: "异常",
        }
      ],
      selectedRowKeys: [],
      tableData: [
        {
          key: 1,
          name: "张三",
          com: "产研部",
          gang: "产品经理",
          cur: "-",
          jin: "-",
          time: "缺勤",
          state: "异常",
          signIn: false, //签到
          signOut: false, //签退
          leave: false, //请假
        }
      ],
      options: [
        {
          label: "Apple",
          value: "Apple",
        },
        {
          label: "Pear",
          value: "Pear",
        },
        {
          label: "Orange",
          value: "Orange",
        },
      ],
      tableDataTotalLoading: true, // 表格loading加载配置
      beginTime: null, //签到开始时间
      endTime: null, //签到结束时间
      selectedStudents: [],
      projectName: undefined,
      projectName2: undefined,
      codeType: null,
      codeIndex: null,
      codeInfo: null, //二维码内容
      codevisible: false, //二维码弹窗
    });
    const selectProjectName = (value, index) => {
      console.log("value", value, index);
    };
    const selectProjectName2 = (value, index) => {
      console.log("value", value, index);
    };
    const closeDrawer = () => {
      state.selectedRowKeys = [];
      state.tableDataTotalLoading = true;
      state.currentPage = 1;
      state.name = null;
      state.projectName2 = undefined;
      state.tableDataTotal = -1;
      state.tableDataTotal2 = 0;
      ctx.emit("update:AAvisible", false);
    };

    const showEntryScore = () => {
      state.Evisible = true;
    };
    const onSelectChange = (selectedRowKeys, e) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
      let array = [];
      for (let i = 0; i < e.length; i++) {
        array.push(e[i].studentId);
      }
      state.selectedStudents = array;
    };

    // 计算签到时间
    const isSignClick = () => {
      // debugger
      console.log("计算签到时间", props.datasource.info);
      let beginTime = new Date(props.datasource.info.liveStartTime).getTime();
      let endTime = !props.datasource.info.afterSignIn
        ? new Date(props.datasource.info.liveEndTime).getTime()
        : new Date(props.datasource.info.liveStartTime).getTime();

      if (props.datasource.info.beforeSignIn && props.datasource.info.afterSignIn) {
        //有开始前有开始后
        beginTime = beginTime - props.datasource.info.beforeSignIn * 60 * 1000;
        endTime = endTime + props.datasource.info.afterSignIn * 60 * 1000;
        console.log("1111", beginTime, endTime);
      } else if (props.datasource.info.beforeSignIn && !props.datasource.info.afterSignIn) {
        //只有开始前无开始后
        beginTime = beginTime - props.datasource.info.beforeSignIn * 60 * 1000;
        console.log("11112222", beginTime);
      } else if (!props.datasource.info.beforeSignIn && props.datasource.info.afterSignIn) {
        //无开始前有开始后
        endTime = endTime + props.datasource.info.afterSignIn * 60 * 1000;
        console.log("1111333", endTime);
      }

      state.beginTime = toDate(beginTime / 1000, "Y/M/D h:m");
      state.endTime = toDate(endTime / 1000, "Y/M/D h:m");
      console.log("beginTime,endTime", state.beginTime, state.endTime);
    };

    const afterVisibleChange = (bol) => {
      if (bol == true) {
        console.log("当前是什么类型", props.datasource.type);
        console.log("当前是什么类型", props.datasource);

        state.tableDataTotalLoading = true;
        getTableData();
        isSignClick();
      }
    };

    const getTableData = () => {
      debugger
      // debugger
      console.log('当前是项目还是路径图 1 项目 2 路径图', props)
      console.log('当前是项目还是路径图 1 项目 2 路径图', props.types)
      if (props.datasource.type == 6 && props.types == 2 || props.datasource.type == 9 && props.types == 2) {
        // 此处为获取评估学员的接口 - 如后续还有用到此接口的公共任务可直接在if里面加||判断即可
        console.log("我是传递的查询参数", {
          pageNo: state.currentPage,
          pageSize: state.pageSize,
          currentStageId: props.datasource.chapterId,
          type: 2,
          pid: props.datasource.routerId,
          taskId: props.datasource.id,
          taskType: props.datasource.type,
          status: state.projectName,
          studentName: state.name,
          signStatus: state.projectName2,
        });
        api
          .AssessmentManagementMessage({
            pageNo: state.currentPage,
            pageSize: state.pageSize,
            currentStageId: props.datasource.chapterId,
            type: 2,   // 1项目 2 路径
            pid: props.datasource.routerId,
            taskId: props.datasource.id,
            taskType: props.datasource.type,
            status: state.projectName,
            studentName: state.name,
            signStatus: state.projectName2,
          })
          .then((res) => {
            console.log(res);
            if (res.status == 200) {
              let keyarr = []
              for (let i = 0; i < res.data.data.records.length; i++) {
                res.data.data.records[i].key = res.data.data.records[i].studentId
                keyarr.push(res.data.data.records[i])
              }
              state.tableData = keyarr;
              state.tableDataTotal = res.data.data.total;
              state.tableDataTotalLoading = false;
            }
          })
          .catch((err) => {
            console.log(err);
            state.tableDataTotalLoading = false;
            state.tableData = [];
          });
      } else if (props.datasource.type == 6 && props.types == 1 || props.datasource.type == 9 && props.types == 1) {
        // 此处为获取评估学员的接口 - 如后续还有用到此接口的公共任务可直接在if里面加||判断即可
        console.log("我是传递的查询参数", {
          pageNo: state.currentPage,
          pageSize: state.pageSize,
          currentStageId: props.datasource.stageId,
          type: 1,
          pid: props.datasource.id,
          taskId: props.datasource.id,
          taskType: props.datasource.type,
          status: state.projectName,
          studentName: state.name,
          signStatus: state.projectName2
        });
        api
          .AssessmentManagementMessage({
            pageNo: state.currentPage,
            pageSize: state.pageSize,
            currentStageId: props.datasource.stageId,
            type: 1,   // 1项目 2 路径
            pid: props.datasource.projectId,
            taskId: props.datasource.id,
            taskType: props.datasource.type,
            status: state.projectName,
            studentName: state.name,
            signStatus: state.projectName2
          })
          .then((res) => {
            console.log(res);
            if (res.status == 200) {
              let keyarr = []
              for (let i = 0; i < res.data.data.records.length; i++) {
                res.data.data.records[i].key = res.data.data.records[i].studentId
                keyarr.push(res.data.data.records[i])
              }
              state.tableData = keyarr;
              state.tableDataTotal = res.data.data.total;
              state.tableDataTotalLoading = false;
            }
          })
          .catch((err) => {
            console.log(err);
            state.tableDataTotalLoading = false;
            state.tableData = [];
          });
      } else {
        state.tableDataTotalLoading = false;
        state.tableData = [];
      }

      // let arr = state.tableData;
      // arr.map((value) => {
      //   // console.log("value", value);
      //   value.opacation = (
      //     <div class="opa">
      //       <a-checkbox
      //         checked={value.signIn}
      //         onChange={(e) => {
      //           console.log("点击签到", e);
      //           showsingleqdModal();
      //         }}
      //       >
      //         签到
      //       </a-checkbox>
      //       <a-checkbox
      //         checked={value.signOut}
      //         onChange={(e) => {
      //           console.log("点击签退", e);
      //           showsingleqtModal();
      //         }}
      //       >
      //         签退
      //       </a-checkbox>
      //       <a-checkbox
      //         checked={value.leave}
      //         onChange={(e) => {
      //           console.log("点击请假", e);
      //           showsingleqjModal();
      //         }}
      //       >
      //         请假
      //       </a-checkbox>
      //     </div>
      //   );
      // });
      // state.tableData = arr;
    };

    //批量签到
    const batchSign = () => {
      let obj = {
        courseId: Number(props.datasource.courseId),
        routerId: Number(props.datasource.routerId),
        ids: state.selectedStudents,
        taskId: Number(props.datasource.id),
        taskType: Number(props.datasource.type),
        type: 1,
      };
      console.log(obj)
      state.tableDataTotalLoading = true;

      api
        .AttendanceSign(obj)
        .then((res) => {
          console.log("签到结果", res, obj);
          if (res.data.code === 200) {
            message.destroy();
            message.success("批量签到成功");
            state.qdModal = false;
            state.selectedRowKeys = [];
            state.selectedStudents = [];
            getTableData();
          }
        })
        .catch((err) => {
          console.log("签到失败", err, obj);
        });
    };

    const tableDataFunc = () => {
      const columns = [
        {
          title: "工号",
          dataIndex: "studentUserNo",
          key: "studentUserNo",
          width: 50,
          align: "center",
          className: "h",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentUserNo ? text.record.studentUserNo : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "姓名",
          dataIndex: "studentName",
          key: "studentName",
          width: 50,
          align: "center",
          className: "classify",
          scopedSlots: { customRender: "action" }, //引入的插槽
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentName ? text.record.studentName : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "所在部门",
          dataIndex: "studentDepartName",
          key: "studentDepartName",
          width: 50,
          align: "center",
          className: "h",
          ellipsis: true,
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentDepartName ? text.record.studentDepartName : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "所在岗位",
          dataIndex: "gang",
          key: "gang",
          width: 50,
          align: "center",
          className: "h",
          ellipsis: true,
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.studentJobName ? text.record.studentJobName : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "签到时间",
          dataIndex: "signTime",
          key: "signTime",
          width: 110,
          align: "center",
          className: "h",
          customRender: (text) => {
            return (
              <div class="racona">
                <span> {text.record.signTime ? text.record.signTime : "-"}</span>
              </div>
            );
          },
        },
        {
          title: "考勤",
          dataIndex: "signStatus",
          key: "signStatus",
          width: 50,
          align: "center",
          className: "h",
          customRender: (text) => {
            // console.log("text", text);
            return (
              <div class="racona">
                <span>
                  {text.record.signStatus
                    ? "签到"
                    : text.record.leaveStatus
                      ? "请假"
                      : "-"}
                </span>
              </div>
            );
          },
        },
        {
          title: "签到状态",
          dataIndex: "signStatus",
          key: "signStatus",
          width: 50,
          align: "center",
          className: "h",
          customRender: (text) => {
            return (
              <div class="racona">
                <span>{text.record.signStatus == null && new Date().getTime() > new Date(state.endTime).getTime() ? "异常" : text.record.signStatus ? "正常" : text.record.leaveStatus ? "异常" : text.record.signStatus == null ? "-" : "异常"}</span>
              </div>
            );
          },
        },
        {
          title: "考勤情况",
          className: "h",
          dataIndex: "opacation",
          key: "opacation",
          width: 130,
          align: "center",
          customRender: (value) => {
            return (
              <div class="opa" style='display:flex;justify-content:center;align-items:center;'>
                <div
                  onClick={() => {
                    debugger
                    {/* debugger */ }
                    console.log("点击签到", value);
                    // 获取当前时间
                    {/* showsingleqdModal(); */ }
                    {/* AttendanceSign */ }


                    let obj1 = {
                      courseId: Number(props.datasource.courseId),
                      routerId: Number(props.datasource.projectId),
                      ids: [value.record.studentId],
                      taskId: Number(props.datasource.id),
                      taskType: Number(props.datasource.type),
                      type: 1,
                    };

                    let obj2 = {
                      courseId: Number(props.datasource.courseId),
                      routerId: Number(props.datasource.routerId),
                      ids: [value.record.studentId],
                      taskId: Number(props.datasource.id),
                      taskType: Number(props.datasource.type),
                      type: 2,
                    };
                    // 1是项目 2路径图 3开课
                    console.log(obj1, obj2)
                    state.tableDataTotalLoading = true;
                    api.AttendanceSign(props.types === '1' ? obj1 : obj2).then(res => {
                      console.log('res----签到是否成功', res)
                      message.destroy()
                      message.info('签到成功')
                      getTableData();
                    }).catch(err => {
                      state.tableDataTotalLoading = false;
                      console.log(err)
                    })
                  }}
                  style="display:flex;justify-content:center;align-items:center;margin-right:12px;cursor:pointer;">
                  {value.record.signStatus ?
                    <div style='width:16px;height:16px;margin-right:6px;border-radius:16px;border:1px solid #ccc;display:flex;justify-content:center;align-items:center;'>
                      <div style='width:8px;height:8px;border-radius:8px;background:#4ea6ff;'></div>
                    </div> :
                    <div style='width:16px;height:16px;margin-right:6px;border-radius:16px;border:1px solid #ccc;'></div>
                  }
                  <div>签到</div>
                </div>
                <div
                  onClick={() => {
                    console.log("点击请假", value);
                    {/* showsingleqjModal(); */ }

                    {/* AttendanceLeave  */ }
                    let obj = {
                      courseId: Number(props.datasource.courseId),
                      routerId: Number(props.datasource.routerId),
                      ids: [value.record.studentId],
                      taskId: Number(props.datasource.routerTaskId),
                      taskType: Number(props.datasource.type),
                      type: 1,
                    };
                    let obj2 = {
                      courseId: Number(props.datasource.courseId),
                      routerId: Number(props.datasource.projectId),
                      ids: [value.record.studentId],
                      taskId: Number(props.datasource.projectTaskId),
                      taskType: Number(props.datasource.type),
                      type: 2,
                    };
                    console.log(obj, obj2)
                    state.tableDataTotalLoading = true;
                    api.AttendanceLeave(props.types == 1 ? obj : obj2).then(res => {
                      console.log('res----请假是否成功', res)
                      message.destroy()
                      message.info('请假成功')
                      getTableData();
                    }).catch(err => {
                      state.tableDataTotalLoading = false;
                      console.log(err)
                    })
                  }}
                  style="display:flex;justify-content:center;align-items:center;cursor:pointer;">
                  {value.record.leaveStatus ?
                    <div style='width:16px;height:16px;margin-right:6px;border-radius:16px;border:1px solid #ccc;display:flex;justify-content:center;align-items:center;'>
                      <div style='width:8px;height:8px;border-radius:8px;background:#4ea6ff;'></div>
                    </div> :
                    <div style='width:16px;height:16px;margin-right:6px;border-radius:16px;border:1px solid #ccc;'></div>
                  }
                  <div>请假</div>
                </div>
              </div>
            )
          }
        },
      ];
      return columns;
    };

    // 清空所选
    const clearLine = () => {
      state.selectedRowKeys = [];
    };
    const showqdModal = () => {
      if (state.selectedStudents.length == 0) {
        message.destroy()
        message.error('请选择学员')
        return
      }
      state.qdModal = true;
    };
    const closeqdModal = () => {
      state.selectedRowKeys = [];
      state.qdModal = false;
    };
    const showsingleqdModal = () => {
      state.singleqdModal = true;
    };
    const showsingleqtModal = () => {
      state.singleqtModal = true;
    };
    const showsingleqjModal = () => {
      state.singleqjModal = true;
    };
    const closesingleqdModal = () => {
      state.singleqdModal = false;
    };
    const closesingleqtModal = () => {
      state.singleqtModal = false;
    };
    const closesingleqjModal = () => {
      state.singleqjModal = false;
    };
    const signQR = () => {
      state.codevisible = true;
      state.codeInfo = {
        title: "【签到】二维码",
        name: props.datasource?.name,
        url:
          process.env.VUE_APP_BASE_API +
          `/admin/student/studentSign?taskId=${props.datasource.routerTaskId
          }&taskType=${props.datasource.type}&type=${2}`,
      };
      console.log("codeInfo", state.codeInfo);
      state.codeIndex = 0;
      state.codeType = 1;
    };

    //搜索学员
    const searchTaskList = () => {
      state.tableDataTotalLoading = true;
      state.currentPage = 1;
      getTableData();
    };

    // 重置按钮
    function resetTaskList() {
      state.selectedRowKeys = [];
      state.tableDataTotalLoading = true;
      state.currentPage = 1;
      state.name = null;
      state.projectName2 = undefined;
      state.tableDataTotal = -1;
      state.tableDataTotal2 = 0;
      getTableData();
    }

    // 导出数据
    function exportTaskStu() {
      {/* debugger */ }
      console.log("props.datasource此处的taskId 应该是router_task 表中主键", props.datasource);
      console.log("props.datasource", props.datasource);
      if (props.types == 1) {
        window.open(
          `${process.env.VUE_APP_BASE_API
          }/admin/student/exportTaskStudent?currentStageId=${props.datasource.chapterId
          }&type=2&pid=${props.datasource.courseId}&thirdType=1&taskId=${props.datasource.id}&taskType=${props.datasource.type}`
        );
      } else {
        window.open(
          `${process.env.VUE_APP_BASE_API
          }/admin/student/exportTaskStudent?currentStageId=${props.datasource.stageId
          }&type=1&pid=${props.datasource.courseId}&thirdType=1&taskId=${props.datasource.id}&taskType=${props.datasource.type}`
        );
      }

      // api
      //   .exportTaskStudent({
      //     pageNo: state.currentPage,
      //     pageSize: state.pageSize,
      //     currentStageId: props.datasource.stageId,
      //     currentTaskId: props.datasource.projectTaskId,
      //     type: 1,
      //     pid: props.datasource.projectId,
      //   })
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    }

    return {
      ...toRefs(state),
      selectProjectName,
      selectProjectName2,
      closeDrawer,
      onSelectChange,
      showEntryScore,
      tableDataFunc,
      clearLine,
      showqdModal,
      closeqdModal,
      showsingleqdModal,
      showsingleqtModal,
      showsingleqjModal,
      closesingleqdModal,
      closesingleqtModal,
      closesingleqjModal,
      signQR,
      afterVisibleChange,
      batchSign,
      searchTaskList,
      resetTaskList,
      exportTaskStu
    };
  },
};
</script>

<style lang="scss">
.me {
  .ant-modal-body {
    padding: 0px;
  }
}

.largeDrawerStyle {
  .ant-drawer-content-wrapper {
    .ant-drawer-header {
      display: none !important;
    }

    .ant-drawer-body {
      padding: 0;

      .drawerMain {
        min-width: 600px;
        margin: 0px 32px 0px 32px;
        display: flex;
        flex-direction: column;
        height: 100%;

        .header {
          height: 73px;
          border-bottom: 1px solid #e8e8e8;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          flex-shrink: 0;

          .headerTitle {
            font-size: 18px;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }

        .centermain {
          flex: 1;
          overflow-y: auto;
          margin-bottom: 75px;
          padding-right: 10px;

          .titl {
            display: flex;

            .endtime {
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              white-space: nowrap;
            }
          }

          .search {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            justify-content: space-between;

            .leftchoose {
              display: flex;
              margin-right: 20px;
              flex-wrap: wrap;

              .namecon {
                display: flex;
                flex-wrap: nowrap;
                margin-bottom: 10px;

                .name {
                  margin-top: 8px;
                  white-space: nowrap;
                }
              }
            }

            .btns {
              display: flex;
              flex-wrap: nowrap;

              .btn {
                cursor: pointer;
                width: 100px;
                height: 40px;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;

                .img1 {
                  width: 15px;
                  height: 17px;
                  background-image: url(../../assets/images/courseManage/search0.png);
                  background-size: 100% 100%;
                  margin-right: 7px;
                }

                .img2 {
                  width: 16px;
                  height: 18px;
                  background-image: url(../../assets/images/courseManage/reset1.png);
                  background-size: 100% 100%;
                  margin-right: 7px;
                }
              }

              .btn1 {
                background: #4ea6ff;

                color: #ffffff;
              }

              .btn2 {
                background: #ffffff;

                color: #4ea6ff;
                border: 1px solid #4ea6ff;
              }
            }
          }

          .btnss {
            display: flex;
            flex-wrap: nowrap;

            .btn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;

              .img1 {
                width: 15px;
                height: 17px;
                background-image: url(../../assets/images/courseManage/search0.png);
                background-size: 100% 100%;
                margin-right: 7px;
              }

              .img2 {
                width: 17px;
                height: 16px;
                background-image: url(../../assets/images/coursewareManage/export1.png);
                background-size: 100% 100%;
                margin-right: 7px;
              }
            }

            .btn1 {
              background: #4ea6ff;
              margin-right: 20px;
              color: #ffffff;
            }

            .btn2 {
              background: #ffffff;
              margin-right: 20px;
              color: #4ea6ff;
              border: 1px solid #4ea6ff;
            }
          }

          .line {
            width: 100%;
            height: 40px;
            background-color: #e9f6fe;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            border: 1px solid #c3e6fc;

            .inline {
              width: 95%;
              height: 100%;
              display: flex;
              justify-content: space-between;

              .left {
                height: 100%;
                display: flex;
                align-items: center;

                .img {
                  width: 15px;
                  height: 15px;
                  background-image: url(../../assets/images/leveladd/gan.png);
                  background-size: 100% 100%;
                }

                .text {
                  color: #999ba3;
                }

                .text2 {
                  color: #4ea6ff;
                  margin-left: 5px;
                  margin-right: 5px;
                }

                .text3 {
                  color: #999ba3;
                  margin-left: 20px;
                }
              }

              .right {
                font-size: 14px;
                font-weight: 400;
                color: #387df7;
                height: 100%;
                display: flex;
                align-items: center;
                cursor: pointer;
              }
            }
          }

          .tableBox {
            .classify {
              padding-left: 0px !important;
            }

            .ant-checkbox-wrapper {
              align-items: center;
              margin-top: -2px;
            }

            .ant-table-selection-column {
              padding: 0px !important;
            }

            .ant-table-thead>tr>th {
              background-color: rgba(239, 244, 252, 1);
            }

            th.h {
              background-color: #eff4fc !important;
            }

            .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
              background: #f6f9fd;
            }
          }
        }

        .btnn {
          height: 72px;
          width: 100%;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

          .btn1 {
            width: 100px;
            height: 40px;
            border: 1px solid #4ea6ff;
            border-radius: 8px;
            color: #4ea6ff;
            background-color: #fff;
            cursor: pointer;
          }

          .btn2 {
            cursor: pointer;
            width: 100px;
            height: 40px;
            background: #4ea6ff;
            border-radius: 8px;
            border: 0;
            margin-left: 15px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>