值周班级学生添加功能 增加年级班级联动

src/views/bjzzpb/cggl/index.vue

@@ -377,7 +377,6 @@ export default {
       gradeList: [],
       detailInfo: {},
       classList: [],
-      classList: [],
       firstForm: {
         grade: "",
         class: "",

src/views/bjzzpb/sz/zrxs/index.vue

@@ -2,31 +2,60 @@
   <div>
     <div class="mt20">
       <el-button type="primary" @click="addData">添加</el-button>
-      <el-button type="danger" @click="delData" :disabled="multipleSelection.length == 0">删除</el-button>
+      <el-button
+        type="danger"
+        @click="delData"
+        :disabled="multipleSelection.length == 0"
+        >删除</el-button
+      >
     </div>
-    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" ref="multipleTable" @selection-change="handleSelectionChange" class="mt20" style="width: 100%">
+    <el-table
+      :data="tableData"
+      tooltip-effect="dark"
+      v-loading="loading"
+      ref="multipleTable"
+      @selection-change="handleSelectionChange"
+      class="mt20"
+      style="width: 100%"
+    >
       <el-table-column type="selection" align="center" width="55">
       </el-table-column>
-      <el-table-column label="值周学生" prop="xdbz_zrxs">
-
-      </el-table-column>
+      <el-table-column label="值周学生" prop="xdbz_zrxs"> </el-table-column>
       <el-table-column label="时间" prop="xdbz_zrrq"> </el-table-column>
-      <el-table-column label="年级" prop="grade_name">
-
-      </el-table-column>
-      <el-table-column label="班级" prop="class_name">
-      </el-table-column>
+      <el-table-column label="年级" prop="grade_name"> </el-table-column>
+      <el-table-column label="班级" prop="class_name"> </el-table-column>
       <el-table-column label="操作" width="150">
-        <template slot-scope="scope" >
+        <template slot-scope="scope">
           <el-button type="text" @click="editData(scope.row)">编辑 </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
-      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total" :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
+    <footer
+      class="flex-item-none"
+      style="display: flex; justify-content: flex-end; margin-top: 30px"
+    >
+      <el-pagination
+        background
+        layout="total,prev, pager, next"
+        :page-size="limit"
+        :total="total"
+        :current-page.sync="cur_page"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
     </footer>
-    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body width="700px">
-      <el-form :inline="true" :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      append-to-body
+      width="700px"
+    >
+      <el-form
+        :inline="true"
+        :model="dialogForm"
+        ref="dialogForm"
+        :rules="rules"
+        label-width="100px"
+      >
         <el-form-item label="值日学生" prop="zrxs">
           <!-- <el-select v-model="dialogForm.zrxs" style="width: 100%" placeholder="请选择值日学生">
             <el-option v-for="item in zrxsList" :key="item.xdx_id" :label="item.ddrw_name" :value="{ value: item.ddrw_id, label: item.xdbz_zrxs }"></el-option>
@@ -34,27 +63,48 @@
           <el-input v-model="dialogForm.zrxs"></el-input>
         </el-form-item>
 
-        <el-form-item class="mr75" label="负责年级" prop="grade_name">
-          <el-select v-model="dialogForm.grade_name" @change="handleGradeChange">
-            <el-option v-for="item in gradeList" :key="item.grade_id" :label="item.class_name" :value="item.grade_name">
+        <el-form-item class="mr75" label="年级" prop="grade_id">
+          <el-select v-model="dialogForm.grade_id" @change="handleChange">
+            <el-option
+              v-for="item in gradeList"
+              :key="item.grade_id"
+              :label="item.grade_name"
+              :value="item.grade_id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item class="mr75" label="负责班级" prop="class_name">
-          <el-select v-model="dialogForm.class_name" @change="handleClassChange">
-            <el-option v-for="item in classList" :key="item.class_id" :label="item.class_name" :value="item.class_name">
+        <el-form-item class="mr75" label="班级" prop="class_id">
+          <el-select
+            v-model="dialogForm.class_id"
+            @change="handleClassChange"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in classList"
+              :key="item.class_id"
+              :label="item.class_name"
+              :value="item.class_num"
+            >
             </el-option>
           </el-select>
-
         </el-form-item>
         <el-form-item class="mr75" label="时间" prop="sj">
-          <el-date-picker v-model="dialogForm.sj" placeholder="选择日期" type="date" value-format="yyyy-MM-dd">
+          <el-date-picker
+            v-model="dialogForm.sj"
+            placeholder="选择日期"
+            type="date"
+            value-format="yyyy-MM-dd"
+          >
           </el-date-picker>
         </el-form-item>
       </el-form>
       <div slot="footer" class="text-center">
         <el-button @click="formCancel">取 消</el-button>
-        <el-button type="primary" @click="formSubmit('dialogForm')">确 定</el-button>
+        <el-button type="primary" @click="formSubmit('dialogForm')"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -62,7 +112,11 @@
 
 <script>
 import {
-  zrxs_list, zrxs_add, zrxs_edit, zrxs_del, grade_search,
+  zrxs_list,
+  zrxs_add,
+  zrxs_edit,
+  zrxs_del,
+  grade_search,
   class_search,
 } from "./api";
 export default {
@@ -81,14 +135,16 @@ export default {
       dialogFormVisible: false,
       dialogForm: {
         zrxs: "",
+        grade_id: "",
         grade_name: "",
+        class_id: "",
         class_name: "",
         sj: "",
       },
       rules: {
         zrxs: [{ required: true, message: "请选择学生", trigger: "blur" }],
-        grade_name: [{ required: true, message: "请选择年级", trigger: "blur" }],
-        class_name: [{ required: true, message: "请选择班级", trigger: "blur" }],
+        grade_id: [{ required: true, message: "请选择年级", trigger: "blur" }],
+        class_id: [{ required: true, message: "请选择班级", trigger: "blur" }],
         sj: [{ required: true, message: "请选择时间", trigger: "blur" }],
       },
       multipleSelection: [],
@@ -122,7 +178,9 @@ export default {
       this.title = "添加";
       this.dialogForm = {
         zrxs: "",
+        grade_id: "",
         grade_name: "",
+        class_id: "",
         class_name: "",
         sj: "",
       };
@@ -138,7 +196,9 @@ export default {
 
       this.dialogForm.zrxs = item.xdbz_zrxs;
       this.dialogForm.sj = item.xdbz_zrrq;
+      this.dialogForm.grade_id = item.grade_id;
       this.dialogForm.grade_name = item.grade_name;
+      this.dialogForm.class_id = item.class_id;
       this.dialogForm.class_name = item.class_name;
     },
 
@@ -146,10 +206,11 @@ export default {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           let data = {
-
             xdbz_zrxs: this.dialogForm.zrxs,
             xdbz_zrrq: this.dialogForm.sj,
+            grade_id: this.dialogForm.grade_id,
             grade_name: this.dialogForm.grade_name,
+            class_id: this.dialogForm.class_id,
             class_name: this.dialogForm.class_name,
           };
           if (!this.isEdit) {
@@ -219,7 +280,7 @@ export default {
             }
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
 
     handleSelectionChange(val) {
@@ -230,43 +291,37 @@ export default {
     },
     gradeListData() {
       this.loading = true;
-      let data = {
-      };
+      let data = {};
       grade_search(data).then((res) => {
         this.loading = false;
         this.gradeList = res.data.page_data;
         console.log(this.ryData, 1344);
       });
     },
-    handleGradeChange() {
+    handleChange(e) {
+      this.dialogForm.class_id = "";
       this.gradeList.map((item) => {
         if (item.grade_id == this.dialogForm.grade_id) {
           this.dialogForm.grade_name = item.grade_name;
         }
-      })
-    },
-    classListData() {
-      this.loading = true;
-      let data = {
-      };
+      });
+
+      let data = { limit: "999", grade_id: e };
       class_search(data).then((res) => {
-        this.loading = false;
         this.classList = res.data.page_data;
-        console.log(this.ryData, 1344);
       });
     },
     handleClassChange() {
       this.classList.map((item) => {
-        if (item.class_id == this.dialogForm.class_id) {
+        if (item.class_num == this.dialogForm.class_id) {
           this.dialogForm.class_name = item.class_name;
         }
-      })
+      });
     },
   },
   mounted() {
     this.getListData();
     this.gradeListData();
-    this.classListData();
   },
 };
 </script>

src/views/bjzzpb/sz/zzls/index.vue

@@ -2,31 +2,60 @@
   <div>
     <div class="mt20">
       <el-button type="primary" @click="addData">添加</el-button>
-      <el-button type="danger" @click="delData" :disabled="multipleSelection.length == 0">删除</el-button>
+      <el-button
+        type="danger"
+        @click="delData"
+        :disabled="multipleSelection.length == 0"
+        >删除</el-button
+      >
     </div>
-    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" ref="multipleTable" @selection-change="handleSelectionChange" class="mt20" style="width: 100%">
+    <el-table
+      :data="tableData"
+      tooltip-effect="dark"
+      v-loading="loading"
+      ref="multipleTable"
+      @selection-change="handleSelectionChange"
+      class="mt20"
+      style="width: 100%"
+    >
       <el-table-column type="selection" align="center" width="55">
       </el-table-column>
-      <el-table-column label="值周老师" prop="xdbz_zzjs">
-
-      </el-table-column>
+      <el-table-column label="值周老师" prop="xdbz_zzjs"> </el-table-column>
       <el-table-column label="时间" prop="xdbz_sj"> </el-table-column>
-      <el-table-column label="年级" prop="grade_name">
-      </el-table-column>
-      <el-table-column label="班级" prop="class_name">
-
-      </el-table-column>
+      <el-table-column label="年级" prop="grade_name"> </el-table-column>
+      <el-table-column label="班级" prop="class_name"> </el-table-column>
       <el-table-column label="操作" width="150">
         <template slot-scope="scope">
           <el-button type="text" @click="editData(scope.row)">编辑 </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
-      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total" :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
+    <footer
+      class="flex-item-none"
+      style="display: flex; justify-content: flex-end; margin-top: 30px"
+    >
+      <el-pagination
+        background
+        layout="total,prev, pager, next"
+        :page-size="limit"
+        :total="total"
+        :current-page.sync="cur_page"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
     </footer>
-    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body width="700px">
-      <el-form :inline="true" :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogFormVisible"
+      append-to-body
+      width="700px"
+    >
+      <el-form
+        :inline="true"
+        :model="dialogForm"
+        ref="dialogForm"
+        :rules="rules"
+        label-width="100px"
+      >
         <el-form-item class="mr75" label="值周老师" prop="zzls">
           <!-- <el-select v-model="dialogForm.zzls">
             <el-option v-for="item in teacher_List" :key="item.value" :label="item.label" :value="item.value">
@@ -35,40 +64,70 @@
           <el-input v-model="dialogForm.zzls"></el-input>
         </el-form-item>
 
-        <el-form-item class="mr75" label="负责年级" prop="grade_name">
-          <el-select v-model="dialogForm.grade_name" @change="handleGradeChange">
-            <el-option v-for="item in gradeList" :key="item.grade_id" :label="item.class_name" :value="item.grade_name">
+        <el-form-item class="mr75" label="年级" prop="grade_id">
+          <el-select v-model="dialogForm.grade_id" @change="handleChange">
+            <el-option
+              v-for="item in gradeList"
+              :key="item.grade_id"
+              :label="item.grade_name"
+              :value="item.grade_id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item class="mr75" label="负责班级" prop="class_name">
-          <el-select v-model="dialogForm.class_name" @change="handleClassChange">
-            <el-option v-for="item in classList" :key="item.class_id" :label="item.class_name" :value="item.class_name">
+        <el-form-item class="mr75" label="班级" prop="class_id">
+          <el-select
+            v-model="dialogForm.class_id"
+            @change="handleClassChange"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in classList"
+              :key="item.class_id"
+              :label="item.class_name"
+              :value="item.class_num"
+            >
             </el-option>
           </el-select>
-
         </el-form-item>
         <el-form-item class="mr75" label="值周类型" prop="xxlx">
           <el-select v-model="dialogForm.zzlx">
-            <el-option v-for="item in type_List" :key="item.value" :label="item.label" :value="item.value">
+            <el-option
+              v-for="item in type_List"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item class="mr75" label="时间" prop="sj">
-          <el-date-picker v-model="dialogForm.sj" placeholder="选择日期" type="date" value-format="yyyy-MM-dd">
+          <el-date-picker
+            v-model="dialogForm.sj"
+            placeholder="选择日期"
+            type="date"
+            value-format="yyyy-MM-dd"
+          >
           </el-date-picker>
         </el-form-item>
       </el-form>
       <div slot="footer" class="text-center">
         <el-button @click="formCancel">取 消</el-button>
-        <el-button type="primary" @click="formSubmit('dialogForm')">确 定</el-button>
+        <el-button type="primary" @click="formSubmit('dialogForm')"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
 import {
-  zzls_list, zzls_add, zzls_edit, zzls_del, grade_search,
+  zzls_list,
+  zzls_add,
+  zzls_edit,
+  zzls_del,
+  grade_search,
   class_search,
 } from "./api";
 export default {
@@ -88,15 +147,17 @@ export default {
 
       dialogForm: {
         zzls: "",
+        grade_id: "",
         grade_name: "",
+        class_id: "",
         class_name: "",
         zzlx: "",
         sj: "",
       },
       rules: {
         zzls: [{ required: true, message: "请选择老师", trigger: "blur" }],
-        grade_name: [{ required: true, message: "请选择年级", trigger: "blur" }],
-        class_name: [{ required: true, message: "请选择班级", trigger: "blur" }],
+        grade_id: [{ required: true, message: "请选择年级", trigger: "blur" }],
+        class_id: [{ required: true, message: "请选择班级", trigger: "blur" }],
         zzlx: [{ required: true, message: "请选择值周类型", trigger: "blur" }],
         sj: [{ required: true, message: "请选择时间", trigger: "blur" }],
       },
@@ -119,7 +180,7 @@ export default {
           label: "周老师",
         },
       ],
-   
+
       gradeList: [],
       classList: [],
       type_List: [
@@ -157,37 +218,33 @@ export default {
     },
     gradeListData() {
       this.loading = true;
-      let data = {
-      };
+      let data = {};
       grade_search(data).then((res) => {
         this.loading = false;
         this.gradeList = res.data.page_data;
         console.log(this.ryData, 1344);
       });
     },
-    handleGradeChange() {
+
+    handleChange(e) {
+      this.dialogForm.class_id = "";
       this.gradeList.map((item) => {
         if (item.grade_id == this.dialogForm.grade_id) {
           this.dialogForm.grade_name = item.grade_name;
         }
-      })
-    },
-    classListData() {
-      this.loading = true;
-      let data = {
-      };
+      });
+
+      let data = { limit: "999", grade_id: e };
       class_search(data).then((res) => {
-        this.loading = false;
         this.classList = res.data.page_data;
-        console.log(this.ryData, 1344);
       });
     },
     handleClassChange() {
       this.classList.map((item) => {
-        if (item.class_id == this.dialogForm.class_id) {
+        if (item.class_num == this.dialogForm.class_id) {
           this.dialogForm.class_name = item.class_name;
         }
-      })
+      });
     },
     formCancel() {
       this.dialogFormVisible = false;
@@ -198,7 +255,9 @@ export default {
       this.title = "添加";
       this.dialogForm = {
         zzls: "",
+        grade_id: "",
         grade_name: "",
+        class_id: "",
         class_name: "",
         zzlx: "",
         sj: "",
@@ -215,7 +274,9 @@ export default {
       this.id = item.xdbz_id;
       this.dialogForm.zzls = item.xdbz_zzjs;
       this.dialogForm.zzlx = item.xdbz_zzlx;
+      this.dialogForm.grade_id = item.grade_id;
       this.dialogForm.grade_name = item.grade_name;
+      this.dialogForm.class_id = item.class_id;
       this.dialogForm.class_name = item.class_name;
       this.dialogForm.sj = item.xdbz_sj;
     },
@@ -226,7 +287,9 @@ export default {
           let data = {
             xdbz_zzjs: this.dialogForm.zzls,
             xdbz_zzlx: this.dialogForm.zzlx,
+            grade_id: this.dialogForm.grade_id,
             grade_name: this.dialogForm.grade_name,
+            class_id: this.dialogForm.class_id,
             class_name: this.dialogForm.class_name,
             xdbz_sj: this.dialogForm.sj,
           };
@@ -295,7 +358,7 @@ export default {
             }
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
 
     handleSelectionChange(val) {
@@ -308,7 +371,6 @@ export default {
   mounted() {
     this.getListData();
     this.gradeListData();
-    this.classListData();
   },
 };
 </script>