页面修改

src/components/school/classroom/classroom-form.vue

+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 800px;max-width:900px;">
+      <q-card-section>
+        <div class="text-h6">{{objOption.TId==0?'新增教室信息':'修改教室信息'}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="text-caption q-mb-lg q-px-md text-grey-6">教室信息</div>
+        <div class="row wrap">
+          <q-select filled stack-label option-value="SId" option-label="SName" v-model="objOption.School_Id"
+            ref="School_Id" :options="schoolList" label="所属校区" :dense="false" class="col-6 q-pb-lg" emit-value
+            map-options :rules="[val => !!val || '请选择所属校区']" />
+          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.RoomName" ref="RoomName"
+            class="col-6 q-pr-lg q-pb-lg" label="教室名称" :rules="[val => !!val || '请填写教室名称']" />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" color="dark" style="font-weight:400 !important" @click="closeClassRoomSaveForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
+          @click="saveClassRoom" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import {
+    getSchoolDropdown,
+    quertClassRoomInfo,
+    saveClassRoom
+  } from '../../../api/school/index'
+
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {
+          RoomId: 0,
+          RoomName: "", //教室名称
+          School_Id: 0, //校区编号
+        },
+        optionTitle: "",
+        schoolList: [],
+        saveLoading: false,
+      }
+    },
+    created() {
+      this.getSchool();
+    },
+    mounted() {
+      this.initObj();
+    },
+    methods: {
+      initObj() {
+        if (this.saveObj && this.saveObj.RoomId > 0) {
+          this.optionTitle = "修改教室信息";
+          quertClassRoomInfo({
+            RoomId: this.saveObj.RoomId
+          }).then(res => {
+            if (res.Code == 1) {
+              this.objOption.RoomId = res.Data.RoomId;
+              this.objOption.RoomName = res.Data.RoomName;
+              this.objOption.School_Id = res.Data.School_Id;
+            }
+          });
+        } else {
+          this.optionTitle = "新增教室";
+          this.objOption.RoomId = 0;
+          this.objOption.RoomName = "";
+          this.objOption.School_Id = 0;
+        }
+      },
+      //获取校区列表
+      getSchool() {
+        getSchoolDropdown({}).then(res => {
+          var tempArray = res.Data;
+          if(!tempArray)
+          {
+              tempArray=[];
+          }
+          var obj = {
+            SName: '不限',
+            SId: 0
+          }
+          tempArray.unshift(obj);
+          this.schoolList = tempArray;
+        })
+      },
+      closeClassRoomSaveForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      saveClassRoom() {
+        this.saveLoading = true
+        this.$refs.School_Id.validate()
+        this.$refs.RoomName.validate()
+        if (
+          !this.$refs.School_Id.hasError &&
+          !this.$refs.RoomName.hasError
+        ) {
+          saveClassRoom(this.objOption).then(res => {
+            this.saveLoading = false
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '数据保存成功！',
+              position: 'top'
+            })
+            this.$emit("success")
+            this.closeClassRoomSaveForm()
+          }).catch(() => {
+            this.saveLoading = false
+          })
+        } else {
+          this.saveLoading = false
+        }
+      },
+    }
+  }
+
+</script>
+
+<style>
+</style>

src/pages/school/classroom.vue

@@ -3,16 +3,16 @@
     <div class="page-search row items-center">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         <div class="col-3">
-          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.RoomName"
-            label="教室名称" />
+          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.RoomName" label="教室名称"
+            @clear="resetSearch" />
         </div>
         <div class="col-3">
-          <q-select @input="getList" standout="bg-primary text-white" option-value="SId" option-label="SName"
+          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="SId" option-label="SName"
             v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
         </div>
       </div>
       <div class="page-option">
-        <q-btn color="accent" class="q-mr-md" icon="add" label="新增教室" @click="EditClass(null)" />
+        <q-btn color="accent" class="q-mr-md" icon="add" label="新增教室" @click="EditClassRoom(null)" />
       </div>
     </div>
     <div class="page-content">
@@ -55,30 +55,31 @@
           <q-td :props="props">
             <div style="min-width:190px;width:100%">
               <q-btn flat size="xs" icon="iconfont icon-shanchu" color="negative" style="font-weight:400"
-                class="q-mr-xs" label="删除" @click="deleteClass(props.row)" />
+                class="q-mr-xs" label="删除" @click="removeClassRoom(props.row)" />
               <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
-                @click="EditClass(props.row)" />
+                @click="EditClassRoom(props.row)" />
             </div>
           </q-td>
         </template>
       </q-table>
-      <class-form v-if="isShowEditClassForm" :save-obj="classOption" @close="closeClassForm" @success="refreshPage">
-      </class-form>
+      <classroom-form v-if="isShowEditClassRoomForm" :save-obj="classRoomOption" @close="closeClassRoomForm" @success="refreshPage">
+      </classroom-form>
     </div>
   </div>
 </template>
 <script>
   import {
     queryClassRoomPage,
-    getSchoolDropdown
+    getSchoolDropdown,
+    deleteClassRoomInfo
   } from '../../api/school/index'
-  import classForm from '../../components/school/classmanage/class-form'
+  import classRoomForm from '../../components/school/classroom/classroom-form'
   export default {
     meta: {
       title: "教室管理"
     },
     components: {
-      classForm
+      classRoomForm
     },
     data() {
       return {
@@ -96,15 +97,21 @@
             align: 'left'
           },
           {
-            name: 'CreateTimeStr',
-            label: '创建时间',
+            name: 'UpdateByName',
+            label: '操作人',
             align: 'left',
-            field: 'CreateTimeStr'
+            field: 'UpdateByName'
+          },
+          {
+            name: 'UpdateTimeStr',
+            label: '操作时间',
+            align: 'left',
+            field: 'UpdateTimeStr'
           },
           {
             name: 'optioned',
             label: '操作',
-            field: 'ClassId'
+            field: 'RoomId'
           }
         ],
         data: [],
@@ -117,9 +124,9 @@
           School_Id: 0, //校区编号
         },
         pageCount: 0,
-        isShowEditClassForm: false,
-        classOption: null,
-        schoolList:[],//校区列表
+        isShowEditClassRoomForm: false,
+        classRoomOption: null,
+        schoolList: [], //校区列表
       }
     },
     created() {
@@ -146,17 +153,18 @@
           }
         })
       },
+      //重新查询
       resetSearch() {
         this.msg.pageIndex = 1;
         this.getClassRoomPage();
       },
-      //删除班级
-      deleteClass(obj) {
+      //删除教室
+      removeClassRoom(obj) {
         let that = this;
         this.$q.dialog({
-          title: "删除班级",
-          message: "你正在进行删除【" + obj.ClassName + "】行为，一旦执行无法找回，是否确认执行？",
-          isShowEditClassForm: true,
+          title: "删除教室",
+          message: "你正在进行删除【" + obj.RoomName + "】行为，一旦执行无法找回，是否确认执行？",
+          isShowEditClassRoomForm: true,
           cancel: {
             label: "取消",
             flat: true
@@ -168,9 +176,9 @@
           }
         }).onOk(() => {
           var delMsg = {
-            ClassId: obj.ClassId
+            RoomId: obj.RoomId
           };
-          that.deleteClass(delMsg).then(res => {
+          deleteClassRoomInfo(delMsg).then(res => {
             if (res.Code == 1) {
               that.$q.notify({
                 icon: 'iconfont icon-chenggong',
@@ -184,51 +192,47 @@
           })
         });
       },
+      //分页改变
       changePage(val) {
         this.msg.pageIndex = val;
         this.getClassRoomPage();
       },
+      //获取教室分页列表
       getClassRoomPage() {
         this.loading = true
         queryClassRoomPage(this.msg).then(res => {
           this.loading = false
           this.data = res.Data.PageData;
           this.pageCount = res.Data.PageCount;
-          console.log("this.data ", this.data);
         }).catch(() => {
           this.loading = false
         })
       },
+      //刷新页面
       refreshPage() {
-        if (!this.classOption) {
+        if (!this.classRoomOption) {
           this.msg.pageIndex = 1;
-          this.msg.ClassName = "";
-          this.msg.CourseName = "";
-          this.msg.AssistName = "";
-          this.msg.TeacherName = "";
+          this.msg.RoomName = "";
+          this.msg.School_Id = 0;
         }
         this.getClassRoomPage()
       },
-      EditClass(obj) {
+      //新增修改教室
+      EditClassRoom(obj) {
         if (obj) {
-          this.classOption = obj
+          this.classRoomOption = obj;
         } else {
-          this.classOption = null
+          this.classRoomOption = null;
         }
-        this.isShowEditClassForm = true
-      },
-      showExamine(obj) {
-        this.classOption = obj;
+        this.isShowEditClassRoomForm = true;
       },
-      closeClassForm() {
-        this.isShowEditClassForm = false
+      //关闭新增修改弹窗
+      closeClassRoomForm() {
+        this.isShowEditClassRoomForm = false;
       }
     },
   }
-
 </script>
-
 <style lang="sass">
   @import url('~assets/css/table.sass');
-
-</style>
+</style>
\ No newline at end of file