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

<template>
  <div>
    <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="tableParam.studentName"
            placeholder="请输入姓名"
          />
        </a-form-item>
      </a-col>
      <a-col>
        <a-button class="cus-btn" style="width: 100px"  @click="getStuList">
          <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"
          >重置
        </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"
          :id="id"
          @finash="submitCall"
          :stage="stage"
        >
          <a-button class="cus-btn">
            <template #icon
              ><img
                style="margin-right: 10px"
                src="../../assets/images/courseManage/add0.png"
            /></template>
            添加学员
          </a-button>
        </CommonStudent>
      </a-col>
      <a-col :span="1.5">
        <a-button class="cus-btn white" @click="bathDel">
          <template #icon
            ><img
              style="margin-right: 10px"
              src="../../assets/images/projectadd/delete.png"
          /></template>
          批量删除
        </a-button>
      </a-col>
      <!--
      <a-col :span="1.5" v-if="type == 2">
        <a-button class="cus-btn white" @click="showChangeModal">
          <template #icon></template>
          批量调整关卡
        </a-button>
      </a-col>-->
    </a-row>
    <div style="margin-top: 20px">
      <a-table
        :columns="tablecolumns"
        :data-source="tableData.list"
        :pagination="stuPagination"
        :loading="tableData.loading"
        row-key="id"
        :row-selection="stuRowSelection"
      >
        <template #action="{ record }">
          <div style="display: flex; justify-content: center">
           <!--  <div v-if="type == 2"
              @click="del(record.id)"
              style="
                color: #4ea6ff;
                font-size: 14px;
                text-align: center;
                margin-left: 20px;
                cursor: pointer;
              "
            >
              查看
            </div>
        
            <div
              @click="showChangeModal"
              style="
                color: #4ea6ff;
                font-size: 14px;
                text-align: center;
                margin-left: 20px;
                cursor: pointer;
              "
            >
              调整
            </div> -->
            <div
              @click="del(record.id)"
              style="
                color: #4ea6ff;
                font-size: 14px;
                text-align: center;
                margin-left: 20px;
                cursor: pointer;
              "
            >
              删除
            </div>
          </div>
          <!-- <a-row gutter="12">
            <a-col>
              <slot name="extension" v-bind:data="{ record }"></slot>
            </a-col>
            <a-col>
              <a-select style="width: 80px" value="更多">
                <a-select-option value="删除" label="删除">
                  <div @click="del(record.id)">删除</div>
                </a-select-option>
              </a-select>
              <div
                @click="del(record.id)"
                style="color: #4ea6ff; font-size: 14px; text-align: center"
              >
                删除
              </div>
            </a-col>
          </a-row> -->
        </template>
      </a-table>
    </div>
  </div>
  <!-- 批量调整关卡弹窗 -->
  <ChangeLevelModal v-model:visiblene="visiblene" :id="id" />
  <!-- 批量调整关卡弹窗 -->
</template>
<script setup>
import { computed, defineProps, onMounted, ref, watch } from "vue";
import { delStudentList, getStuPage } from "@/api/index1";
import CommonStudent from "@/components/student/CommonStudent";
import ChangeLevelModal from "./ChangeLevelModal.vue";
import { message } from "ant-design-vue";
const props = defineProps({
  type: Number,
  id: String,
  columns: {
    type: Array,
    default: () => [],
  },
  stage: {
    type: Array,
    default: () => [],
  },
});
const tablecolumns = ref([
  {
    title: "姓名",
    dataIndex: "studentName",
    key: "studentName",
    width: "8%",
    align: "left",
    className: "h",
  },
  {
    title: "工号",
    dataIndex: "studentUserNo",
    key: "studentUserNo",
    width: "20%",
    align: "center",
    className: "h",
    ellipsis: true,
  },
  {
    title: "部门",
    dataIndex: "studentDepartName",
    key: "studentDepartName",
    width: "15%",
    align: "center",
    className: "h",
    ellipsis: true,
  },
  {
    title: "加入方式",
    dataIndex: "source",
    key: "source",
    width: 100,
    align: "center",
    customRender: ({ record: { source } }) =>
      ({ 1: "快速添加", 2: "组织", 3: "受众" }[source]),
  },
  ...props.columns,
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: "20%",
    align: "center",
    slots: { customRender: "action" },
  },
]);
const tableParam = ref({
  studentName: "",
  pageNo: 1,
  pageSize: 10,
  type: props.type,
  pid: props.id,
});
const stuSelectKeys = ref([]);
const tableData = ref({
  list: [],
  total: 0,
  loading: false,
});

const stuRowSelection = computed(() => ({
  columnWidth: 20,
  selectedRowKeys: stuSelectKeys.value,
  onChange: onStuSelectChange,
  preserveSelectedRowKeys: true,
}));

onMounted(() => {
  getStuList();
});

watch(props, () => {
  tableParam.value.pid = props.id;
  getStuList();
});

function onStuSelectChange(e) {
  stuSelectKeys.value = e;
}

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

function changePagination(page) {
  tableParam.value.pageNo = page;
  getStuList();
}

function getStuList() {
  tableData.value.loading = true;
  getStuPage(tableParam.value).then((res) => {
    console.log("学员管理-获取学员", res.data);
    tableData.value.total = res.data.data.total;
    tableData.value.list = res.data.data.records;
    tableData.value.loading = false;
  });
}

function reset() {
  tableParam.value.studentName="";
}

function bathDel() {
  if( stuSelectKeys.value &&
    stuSelectKeys.value.length == 0){
      message.destroy();
    return message.warning("请先选中学员");
  }
  stuSelectKeys.value &&
    stuSelectKeys.value.length &&
    delStudentList({
      ids: stuSelectKeys.value,
    }).then(() => {
      getStuList();
    });
}

function del(id) {
  id &&
    delStudentList({
      ids: [id],
    }).then(() => {
      getStuList();
    });
}

function submitCall(flag) {
  tableData.value.loading = true;
  flag && getStuList();
}

// 调整关卡;
const visiblene = ref(false);
//const showChangeModal = () => {
 // visiblene.value = true;
//};
</script>
<style>
.studentopea1 {
  font-size: 14px;
  font-weight: 400;
  color: #387df7;
  line-height: 22px;
  padding-right: 8px;
  border-right: 1px solid #e9e9e9;
  cursor: pointer;
}
.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;
}
</style>