feat:合并

src/components/student/TableStudent.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <a-row type="flex" gutter="12" style="padding-left: 20px">
+      <a-col>
+        <a-form-item title="姓名：" @click="getStuList">
+          <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">
+          <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">
+      <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-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 }">
+          <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>
+            </a-col>
+          </a-row>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed, defineProps, onMounted, ref } from "vue";
+import { delStudentList, getStuPage } from "@/api/index1";
+import CommonStudent from "@/components/student/CommonStudent";
+
+const props = defineProps({
+  type: Number,
+  id: String,
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  stage: {
+    type: Array,
+    default: () => [],
+  },
+});
+const tablecolumns = ref([
+  {
+    title: "姓名",
+    dataIndex: "studentName",
+    key: "studentName",
+    width: "20%",
+    align: "left",
+    className: "h",
+  },
+  {
+    title: "工号",
+    dataIndex: "studentUserNo",
+    key: "studentUserNo",
+    width: "10%",
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "部门",
+    dataIndex: "studentDepartName",
+    key: "studentDepartName",
+    width: "10%",
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "加入方式",
+    dataIndex: "source",
+    key: "source",
+    width: "10%",
+    align: "center",
+    customRender: ({ record: { source } }) =>
+      ({ 1: "快速添加", 2: "组织", 3: "受众" }[source]),
+  },
+  ...props.columns,
+  {
+    title: "操作",
+    dataIndex: "operation",
+    key: "operation",
+    width: "25%",
+    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();
+});
+
+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) => {
+    tableData.value.total = res.data.data.total;
+    tableData.value.list = res.data.data.records;
+    tableData.value.loading = false;
+  });
+}
+
+function reset() {}
+
+function bathDel() {
+  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();
+}
+</script>
+<style>
+.studentopea1 {
+  font-size: 14px;
+  font-weight: 400;
+  color: #387df7;
+  line-height: 22px;
+  padding-right: 8px;
+  border-right: 1px solid #e9e9e9;
+  cursor: pointer;
+}
+</style>