通过教学班级新增学生

src/assets/styles/base.scss

@@ -463,6 +463,9 @@ body {
 .width-80 {
   width: 80px;
 }
+.width-200 {
+  width: 200px;
+}
 
 // other
 .tips-info {

src/assets/styles/pages.scss

@@ -916,3 +916,9 @@
     text-align: center;
   }
 }
+// modify-student-simple
+.modify-student-simple {
+  .tab-body {
+    min-height: 300px;
+  }
+}

src/modules/base/api.js

@@ -258,6 +258,9 @@ export const deleteStudentSimple = idList => {
 export const updateStudentSimple = datas => {
   return $post("/api/admin/teach/student/create", datas);
 };
+export const batchAddStudentSimple = datas => {
+  return $post("/api/admin/teach/student/create_batch", datas);
+};
 
 // clazz-manage
 export const clazzListQuery = datas => {

src/modules/base/components/ModifyClazzSimpleStudent.vue

@@ -31,21 +31,6 @@
           </el-form-item>
         </el-form>
         <div class="part-box-action">
-          <el-button type="success" icon="el-icon-download"
-            ><a :href="downloadUrl" :download="dfilename"
-              >模板下载</a
-            ></el-button
-          >
-          <upload-button
-            btn-icon="el-icon-circle-plus-outline"
-            btn-content="批量导入"
-            btn-type="success"
-            :upload-url="uploadUrl"
-            :upload-data="uploadData"
-            :format="['xls', 'xlsx']"
-            @upload-success="uploadSuccess"
-          >
-          </upload-button>
           <el-button
             type="primary"
             icon="el-icon-circle-plus-outline"
@@ -105,11 +90,10 @@
 <script>
 import { studentSimpleListQuery, deleteStudentSimple } from "../api";
 import ModifyStudentSimple from "./ModifyStudentSimple";
-import UploadButton from "../../../components/UploadButton";
 
 export default {
   name: "modify-clazz-simple-student",
-  components: { UploadButton, ModifyStudentSimple },
+  components: { ModifyStudentSimple },
   props: {
     clazz: {
       type: Object,
@@ -129,12 +113,7 @@ export default {
       size: this.GLOBAL.pageSize,
       total: 0,
       studentList: [],
-      curStudent: {},
-      // import
-      uploadData: {},
-      uploadUrl: "/api/admin/teach/student/import",
-      downloadUrl: "/temps/clazzSimpleStudentTemplate.xlsx",
-      dfilename: "教学班级学生导入模板.xlsx"
+      curStudent: {}
     };
   },
   computed: {
@@ -145,9 +124,7 @@ export default {
   methods: {
     visibleChange() {
       this.filter.teachClazzId = this.clazz.id;
-      this.uploadData = {
-        teachClazzId: this.clazz.id
-      };
+
       this.toPage(1);
     },
     closed() {
@@ -187,11 +164,6 @@ export default {
           this.deletePageLastItem();
         })
         .catch(() => {});
-    },
-    // import
-    uploadSuccess(data) {
-      this.$message.success(data.data || "学生导入成功！");
-      this.getList();
     }
   }
 };

src/modules/base/components/ModifyStudentSimple.vue

@@ -1,49 +1,89 @@
 <template>
   <el-dialog
-    class="modify-student"
+    class="modify-student-simple"
     :visible.sync="modalIsShow"
-    :title="title"
+    title="添加学生"
     top="10px"
-    width="448px"
+    width="800px"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     append-to-body
     destroy-on-close
     @open="visibleChange"
   >
-    <el-form
-      ref="modalFormComp"
-      :model="modalForm"
-      :rules="rules"
-      :key="modalForm.id"
-      label-position="top"
-    >
-      <el-form-item prop="studentName" label="姓名：">
-        <el-input
-          v-model.trim="modalForm.studentName"
-          placeholder="请输入姓名"
-          clearable
-        ></el-input>
-      </el-form-item>
-      <el-form-item prop="studentCode" label="学号：">
-        <el-input
-          v-model.trim="modalForm.studentCode"
-          placeholder="请输入学号"
-          clearable
-        ></el-input>
-      </el-form-item>
-    </el-form>
-    <div slot="footer">
+    <div class="mb-4 tab-btns">
+      <el-button
+        v-for="tab in tabs"
+        :key="tab.val"
+        size="medium"
+        :type="curTab == tab.val ? 'primary' : 'default'"
+        @click="selectMenu(tab.val)"
+        >{{ tab.name }}
+      </el-button>
+    </div>
+    <!-- input -->
+    <div v-if="curTab === 'input'" class="tab-body">
+      <el-form
+        ref="modalFormComp"
+        :model="modalForm"
+        :rules="rules"
+        :key="modalForm.id"
+        label-position="top"
+      >
+        <el-form-item prop="studentName" label="姓名：">
+          <el-input
+            v-model.trim="modalForm.studentName"
+            placeholder="请输入姓名"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="studentCode" label="学号：">
+          <el-input
+            v-model.trim="modalForm.studentCode"
+            placeholder="请输入学号"
+            clearable
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- select -->
+    <div v-if="curTab === 'select'" class="tab-body">
+      <select-class-student
+        ref="SelectClassStudent"
+        v-model="selectedStudentIds"
+      ></select-class-student>
+    </div>
+    <!-- import -->
+    <div v-if="curTab === 'import'" class="tab-body">
+      <el-button type="success" icon="el-icon-download"
+        ><a :href="downloadUrl" :download="dfilename">模板下载</a></el-button
+      >
+      <upload-button
+        btn-icon="el-icon-circle-plus-outline"
+        btn-content="批量导入"
+        btn-type="success"
+        :upload-url="uploadUrl"
+        :upload-data="uploadData"
+        :format="['xls', 'xlsx']"
+        @upload-success="uploadSuccess"
+      >
+      </upload-button>
+    </div>
+
+    <div v-if="!IS_IMPORT" slot="footer">
       <el-button type="primary" :disabled="isSubmit" @click="submit"
         >确认</el-button
       >
       <el-button @click="cancel">取消</el-button>
     </div>
+    <div v-else slot="footer"></div>
   </el-dialog>
 </template>
 
 <script>
-import { updateStudentSimple } from "../api";
+import { updateStudentSimple, batchAddStudentSimple } from "../api";
+import UploadButton from "../../../components/UploadButton";
+import SelectClassStudent from "./SelectClassStudent";
 
 const initModalForm = {
   id: null,
@@ -54,6 +94,7 @@ const initModalForm = {
 
 export default {
   name: "modify-student-simple",
+  components: { UploadButton, SelectClassStudent },
   props: {
     instance: {
       type: Object,
@@ -63,17 +104,29 @@ export default {
     }
   },
   computed: {
-    isEdit() {
-      return !!this.instance.id;
-    },
-    title() {
-      return (this.isEdit ? "编辑" : "新增") + "学生";
+    IS_IMPORT() {
+      return this.curTab === "import";
     }
   },
   data() {
     return {
       modalIsShow: false,
       isSubmit: false,
+      curTab: "select",
+      tabs: [
+        {
+          name: "手动添加",
+          val: "input"
+        },
+        {
+          name: "从课程班级添加",
+          val: "select"
+        },
+        {
+          name: "批量导入",
+          val: "import"
+        }
+      ],
       modalForm: { ...initModalForm },
       rules: {
         studentName: [
@@ -101,12 +154,20 @@ export default {
           }
         ]
       },
-      clazzList: []
+      selectedStudentIds: [],
+      // import
+      uploadData: {},
+      uploadUrl: "/api/admin/teach/student/import",
+      downloadUrl: "/temps/clazzSimpleStudentTemplate.xlsx",
+      dfilename: "教学班级学生导入模板.xlsx"
     };
   },
   methods: {
     initData(val) {
       this.modalForm = this.$objAssign(initModalForm, val);
+      this.uploadData = {
+        teachClazzId: val.teachClazzId
+      };
     },
     visibleChange() {
       this.initData(this.instance);
@@ -117,20 +178,55 @@ export default {
     open() {
       this.modalIsShow = true;
     },
-    async submit() {
+    selectMenu(tab) {
+      this.curTab = tab;
+    },
+    submit() {
+      const submitFunc = {
+        input: this.submitInput,
+        select: this.submitSelect
+      };
+      submitFunc[this.curTab]();
+    },
+    async submitInput() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
       if (this.isSubmit) return;
       this.isSubmit = true;
-      const data = await updateStudentSimple(this.modalForm).catch(() => {
-        this.isSubmit = false;
-      });
+      const data = await updateStudentSimple(this.modalForm).catch(() => {});
+      this.isSubmit = false;
 
       if (!data) return;
 
+      this.$message.success("添加成功！");
+      this.$emit("modified");
+      this.modalForm = { ...initModalForm };
+    },
+    async submitSelect() {
+      if (!this.selectedStudentIds.length) {
+        this.$message.error("请选择学生");
+        return;
+      }
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const data = await batchAddStudentSimple({
+        teachClazzId: this.instance.teachClazzId,
+        basicStudentIdSet: this.selectedStudentIds
+      }).catch(() => {});
       this.isSubmit = false;
-      this.$message.success(this.title + "成功！");
+
+      if (!data) return;
+
+      this.$message.success("添加成功！");
+      this.$emit("modified");
+      this.selectedStudentIds = [];
+      this.$refs.SelectClassStudent.clearSelection();
+    },
+    // import
+    uploadSuccess(data) {
+      this.$message.success(data.data || "学生导入成功！");
       this.$emit("modified");
       this.cancel();
     }

src/modules/base/components/SelectClassStudent.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="select-class-student">
+    <el-form ref="FilterForm" label-position="left" inline label-width="0px">
+      <el-form-item>
+        <college-select
+          v-model="filter.collegeId"
+          class="width-200"
+          placeholder="学院"
+          @change="collegeChange"
+        ></college-select>
+      </el-form-item>
+      <el-form-item>
+        <major-select
+          v-model="filter.majorId"
+          class="width-200"
+          :college-id="filter.collegeId"
+          cascader
+          placeholder="专业"
+          @change="majorChange"
+        ></major-select>
+      </el-form-item>
+      <el-form-item>
+        <class-select
+          v-model="filter.clazzId"
+          class="width-200"
+          :major-id="filter.majorId"
+          cascader
+          placeholder="班级"
+          @change="classChange"
+        ></class-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :disabled="!canSearch" @click="toPage(1)"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div class="box-justify mb-2">
+      <p>
+        全部共<span class="mlr-1">{{ dataList.length }}</span
+        >人
+      </p>
+      <p>
+        已选<span class="mlr-1">{{ multipleSelection.length }}</span
+        >人
+      </p>
+    </div>
+    <el-table
+      ref="TableList"
+      :data="dataList"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        type="index"
+        label="序号"
+        width="70"
+        :index="indexMethod"
+      ></el-table-column>
+      <el-table-column prop="studentName" label="姓名"></el-table-column>
+      <el-table-column prop="studentCode" label="学号"></el-table-column>
+      <el-table-column prop="collegeName" label="学院"></el-table-column>
+      <el-table-column prop="majorName" label="专业"></el-table-column>
+      <el-table-column prop="clazzName" label="班级"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+// import { studentListQuery } from "../api";
+import { unitQueryByType } from "../../base/api";
+
+export default {
+  name: "select-class-student",
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      filter: {
+        collegeId: "",
+        majorId: "",
+        clazzId: ""
+      },
+      filterNames: {
+        collegeName: "",
+        majorName: "",
+        clazzName: ""
+      },
+      dataList: [],
+      multipleSelection: []
+    };
+  },
+  computed: {
+    canSearch() {
+      return (
+        this.filter.collegeId && this.filter.majorId && this.filter.clazzId
+      );
+    }
+  },
+  methods: {
+    async getList() {
+      const datas = {
+        ...this.filter
+      };
+      const data = await unitQueryByType(datas, "STUDENT");
+      this.dataList = data || [];
+      this.dataList = this.dataList.map(item => {
+        return {
+          id: item.id,
+          studentName: item.name,
+          studentCode: item.code,
+          ...this.filterNames
+        };
+      });
+    },
+    toPage(page) {
+      if (!this.canSearch) return;
+
+      this.current = page;
+      this.getList();
+      this.multipleSelection = [];
+      this.emitChange();
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val.map(item => item.id);
+      this.emitChange();
+    },
+    collegeChange(val) {
+      this.filterNames.collegeName = val.name;
+    },
+    majorChange(val) {
+      this.filterNames.majorName = val.name;
+    },
+    classChange(val) {
+      this.filterNames.clazzName = val.name;
+    },
+    emitChange() {
+      this.$emit("input", this.multipleSelection);
+      this.$emit("change", this.multipleSelection);
+    },
+    clearSelection() {
+      this.$refs.TableList.clearSelection();
+    }
+  }
+};
+</script>