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

<template>
  <div class="TableCertificateStudent">
    <div class="certificatetitle">
      <span style="margin-left: 32px">培训证书</span>
      <button class="returnBtn" @click="returnClick">返回</button>
    </div>
    <div class="search">
      <div class="selectBox">
        <div>姓名：</div>
        <a-input
          class="cus-input"
          v-model:value="studentName"
          placeholder="请输入姓名"
        />
      </div>
      <div class="selectBox">
        <div>部门：</div>
        <div class="select in" style="width: 270px">
          <OrgClass
            v-model:value="tstudentDepartId"
            v-model:name="studentDepartName"
          ></OrgClass>
        </div>
      </div>
      <div class="selectBox">
        <div>选择时间：</div>
        <div class="select in">
          <a-range-picker
            v-model:value="selectTime"
            style="width: 320px"
            format="YYYY-MM-DD"
            separator="至"
            :placeholder="['      开始时间', '        结束时间']"
          />
        </div>
      </div>

      <a-button
        class="cus-btn"
        style="background: #4ea6ff; color: #fff; width: 100px"
        @click="search"
      >
        <template #icon>
          <img
            style="margin-right: 10px"
            src="../../assets/images/courseManage/search0.png"
        /></template>
        搜索
      </a-button>
      <a-button class="cus-btn white" style="width: 100px" @click="reset">
        <template #icon>
          <img
            style="margin-right: 10px"
            src="../../assets/images/leveladd/reset0.png"
        /></template>
        重置
      </a-button>
    </div>
    <div v-if="checkPer(permissions,createId)" class="batch" @click="cancelOrAuthAll">批量取消证书</div>
    <div class="tableBox" style="margin-top: 20px">
      <a-table
        :columns="tablecolumns"
        :data-source="stuList"
        :loading="tableDataTotal === -1 ? true : false"
        :scroll="{ x: 1000 }"
        row-key="id"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
      </a-table>
      <div class="tableBox">
        <div class="pa">
          <a-pagination
            v-if="tableDataTotal > 10"
            :showSizeChanger="false"
            showQuickJumper="true"
            hideOnSinglePage="true"
            :pageSize="pageSize"
            :current="currentPage"
            :total="tableDataTotal"
            class="pagination"
            @change="changePaginationStu"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as api from "@/api/index1";
import OrgClass from "@/components/project/OrgClass";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import {checkPer} from "@/utils/utils";
export default {
  name: "TableCertificateStudent",
  components: {
    OrgClass,
  },
  props: {
    projectId: {
      type: Number,
      default: null,
    },
    //证书id
    ACertificateCheckId: {
      type: Number,
      default: null,
    },
    ischeckCertificate: {
      type: Boolean,
      default: false,
    },
    createId: {
      type: Number,
      default: null,
    },
    permissions: {
      type: String,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      studentName: null,
      tstudentDepartId: null,
      studentDepartName: null,
      selectTime: [],
      tablecolumns: [
        {
          title: "工号",
          dataIndex: "studentUserNo",
          key: "studentUserNo",
          width: 40,
          align: "center",
          className: "h head",
        },
        {
          title: "姓名",
          dataIndex: "studentName",
          key: "studentName",
          width: 40,
          align: "center",
          className: "h head",
        },
        {
          title: "部门",
          dataIndex: "studentDepartName",
          key: "studentDepartName",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "岗位",
          dataIndex: "studentJobName",
          key: "studentJobName",
          width: 60,
          align: "center",
          className: "h",
        },
        {
          title: "取得证书时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 60,
          align: "center",
          className: "h"
        },
        {
          title: "操作",
          dataIndex: "opacation",
          key: "opacation",
          width: 60,
          align: "center",
          className: "h",
          customRender: (record) => {
            // console.log(text.record.checked1);
            return (
              checkPer(props.permissions,props.createId)?<div>
                {record.record.status === -1 ? (
                  <div class="opa">
                    <span>证书已取消</span>
                  </div>
                ) : (
                  <div
                    class="opa"
                    onClick={() => {
                      cancelOrAuth(record);
                    }}
                  >
                    <span>取消证书</span>
                  </div>
                )}
              </div>:''
            );
          },
        },
      ],
      stuList: [
        // {
        //   studentUserNo: "1234",
        //   studentName: "li",
        //   studentDepartName: "开发部",
        //   studentJobName: "岗位一",
        //   time: "2023-02-04",
        // },
      ],
      pageSize: 10,
      currentPage: 1,
      tableDataTotal: -1,
      selectedRowKeys: [],
    });

    //获取证书学员
    const stuCertList = () => {
      console.log("state.selectTime", state.selectTime);
      let obj = {
        name: state.studentName,
        orgName: state.studentDepartName,
        beginDate:
          state.selectTime.length !== 0
            ? dayjs(new Date(state.selectTime[0]).getTime()).format(
                "YYYY-MM-DD"
              )
            : null,
        endDate:
          state.selectTime.length !== 0
            ? dayjs(new Date(state.selectTime[1]).getTime()).format(
                "YYYY-MM-DD"
              )
            : null,
        id: props.ACertificateCheckId,
        pid: props.projectId,
        size: state.pageSize,
        current: state.currentPage,
      };
      state.tableDataTotal = -1;
      api
        .stuCertList(obj)
        .then((res) => {
          console.log("获取证书学员", res);
          if (res.data.code === 200) {
            state.stuList = res.data.data.records;
            state.tableDataTotal = Number(res.data.data.total);
            console.log("state.tableDataTotal", state.tableDataTotal);
          }
        })
        .catch((err) => {
          console.log("获取证书学员失败", err);
        });
    };
    stuCertList();

    //搜索
    const search = () => {
      state.currentPage = 1;
      stuCertList();
    };
    //重置
    const reset = () => {
      state.currentPage = 1;
      state.studentName = null;
      state.tstudentDepartId = null;
      state.studentDepartName = null;
      state.selectTime = [];
      stuCertList();
    };

    //取消证书
    const cancelOrAuth = (text) => {
      console.log("text", text);
      let obj = {
        ids: [text.record.id],
        status: -1,
      };
      api
        .cancelOrAuth(obj)
        .then((res) => {
          console.log("取消证书成功", res);
          if (res.data.code === 200) {
            message.success("取消证书成功");
            stuCertList();
          }
        })
        .catch((err) => {
          console.log("取消证书失败", err);
        });
    };
    //批量取消证书
    const cancelOrAuthAll = () => {
      if (state.selectedRowKeys.length === 0)
        return message.warning("请选择学员");
      let obj = {
        ids: state.selectedRowKeys,
        status: -1,
      };
      api
        .cancelOrAuth(obj)
        .then((res) => {
          console.log("取消证书成功", res);
          if (res.data.code === 200) {
            message.success("取消证书成功");
            stuCertList();
            state.selectedRowKeys = [];
          }
        })
        .catch((err) => {
          console.log("取消证书失败", err);
        });
    };
    const onSelectChange = (selectedRowKeys, e) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys, e);
      state.selectedRowKeys = selectedRowKeys;
    };
    //分页
    const changePaginationStu = (page) => {
      state.currentPage = page;
      stuCertList();
    };

    //返回
    const returnClick = () => {
      ctx.emit("update:ischeckCertificate", false);
      console.log("点击返回");
    };
    return {
      ...toRefs(state),
      stuCertList,
      search,
      reset,
      checkPer,
      onSelectChange,
      changePaginationStu,
      returnClick,
      cancelOrAuthAll,
    };
  },
};
</script>
<style lang="scss">
.TableCertificateStudent {
  table tr th.ant-table-selection-column,
  table tr td.ant-table-selection-column {
    padding-left: 3px;
  }
  .certificatetitle {
    width: 100%;
    height: 74px;
    padding-top: 29px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    .returnBtn {
      cursor: pointer;
      width: 100px;
      height: 40px;
      background: #4ea6ff;
      border-radius: 8px;
      border: 0;
      margin-left: 15px;
      color: #fff;
      margin-right: 20px;
      font-size: 14px;
    }
  }
  .search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 31px;
    margin-left: 8px;
    .selectBox {
      display: flex;
      align-items: center;
      margin-left: 24px;
      margin-bottom: 30px;
    }
  }

  .cus-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-right: 8px;
    border: 1px solid #4ea6ff;
    border-radius: 8px;
    background: #4ea6ff;
    cursor: pointer;
    color: #fff;
    margin-bottom: 30px;
  }
  .batch {
    width: 130px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 32px;
    cursor: pointer;
    background: #4ea6ff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
  }
  .white {
    background: #fff;
    color: #4ea6ff;
  }

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

  .opa {
    font-size: 14px;
    font-weight: 400;
    color: #387df7;
    line-height: 22px;
  }
}
</style>