班级管理,修改注册表格混乱bug

src/views/register/register.vue

@@ -3,30 +3,28 @@
     <div class="registerDiv">
       <el-form ref="registerForm" :model="addAndEditFormData" :rules="addAndEditRules" class="registerForm" >
         <h3 class="registerTitle">注册页面</h3>
-        <el-form-item prop="account" label="账 号：">
-          <el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 75%"></el-input>
+        <el-form-item prop="account" label="账 号：" :label-width="labelWidth">
+          <el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 95%"></el-input>
         </el-form-item>
-        <el-form-item prop="password" label="密 码：">
-          <el-input v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 75%">
-          </el-input>
+        <el-form-item prop="password" label="密 码：" :label-width="labelWidth">
+          <el-input v-model="addAndEditFormData.password" placeholder="请输入密码" show-password style="width: 95%"></el-input>
         </el-form-item>
-        <el-form-item prop="confirmPassword" label="确认密码:">
-          <el-input v-model="addAndEditFormData.confirmPassword" placeholder="请输入密码" show-password style="width:75%">
-          </el-input>
+        <el-form-item prop="confirmPassword" label="确认密码:" :label-width="labelWidth">
+          <el-input v-model="addAndEditFormData.confirmPassword" placeholder="请输入密码" show-password style="width:95%"></el-input>
         </el-form-item>
-        <el-form-item prop="name" label="用户名：">
-          <el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:75%"></el-input>
+        <el-form-item prop="name" label="用户名：" :label-width="labelWidth">
+          <el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:95%"></el-input>
         </el-form-item>
-        <el-form-item prop="phone" label="电 话：">
-          <el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:75%"></el-input>
+        <el-form-item prop="phone" label="电 话：" :label-width="labelWidth">
+          <el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:95%"></el-input>
         </el-form-item>
-        <el-form-item prop="classId" label=" 班 级：">
+        <el-form-item prop="classId" label="单 位：" :label-width="labelWidth">
           <el-cascader @change="stuClassChange" :change-on-select="true" :props="defaultParams" :options="classNames"
-            v-model="addAndEditFormData.classId" :clearable="true" style="width:75%">
+            v-model="addAndEditFormData.classId" :clearable="true" style="width:95%">
           </el-cascader>
         </el-form-item>
-        <el-form-item class="registerBtu">
-          <el-button type="primary" @click="handleConfirmEvent" style="width: 70%">
+        <el-form-item>
+          <el-button type="primary" @click="handleConfirmEvent" class="registerBtu">
             <i class="el-icon-upload"></i>注 册
           </el-button>
         </el-form-item>
@@ -52,6 +50,7 @@
         }
       };
       return {
+        labelWidth: '90px',
         defaultParams: {
           label: 'name',
           value: 'id',
@@ -152,11 +151,11 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     z-index: 1;
 
-
   }
 
   .registerBtu {
-    margin-right: 25%;
+    width: 70%;
+    margin-left: 18%;
   }
 
   .registerTitle {

src/views/system/stuClass/index.vue

 <template>
   <div>
-    班
+    <section>
+      <el-row class="title-add">
+        <el-col :span="17">
+          <el-button type="primary" icon="el-icon-plus" @click="addStu">新增</el-button>
+        </el-col>
+        <!--搜索条件-->
+        <el-col :span="4">
+          <el-input v-model="stuName" placeholder="请输入名称" clearable></el-input>
+        </el-col>
+        <el-col :span="3">
+          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+          <el-button type="success" icon="el-icon-circle-close" @click="cleanUp">清除</el-button>
+        </el-col>
+      </el-row>
+      <el-table border ref="filterTable" :data="tableData" :header-cell-style="{background:'#f4f4f4', color:'#727479'}">
+        <el-table-column prop="name" label="名称" align="center"></el-table-column>
+        <el-table-column prop="sign" label="类型" align="center"
+                         :filters="[{ text: '班级', value: 3 }, { text: '系', value: 2 }, { text: '学院', value: 1 }]"
+                         :filter-method="filterTag" filter-placement="bottom-end">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.sign === 3 ? 'success':'primary'" disable-transitions>
+              {{ scope.row.sign === 1 ? '学院' : scope.row.sign === 2 ? '系' : '班级' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="userName" label="管理者" align="center"></el-table-column>
+        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="editData(scope.$index, scope.row)">编辑</el-button>
+            <el-button type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="bottom-page">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="page"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </section>
+
+    <!--新增/编辑模态框-->
+    <section>
+      <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
+                 :before-close="handleDialogClose">
+        <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules"
+                 class="form">
+          <el-row>
+            <el-col :span="10">
+              <el-form-item prop="name" label="名称：" :label-width="formLabelWidth">
+                <el-input v-model="addAndEditFormData.name" placeholder="请输入编辑名称" type="text" autosize></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item prop="sign" label="类型：" :label-width="formLabelWidth">
+                <el-select v-model="addAndEditFormData.sign" placeholder="请选择类型" clearable @change="monitorSign">
+                  <el-option value="1" label="学院"></el-option>
+                  <el-option value="2" label="系"></el-option>
+                  <el-option value="3" label="班级"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="10">
+              <el-form-item prop="userId" label="管理者：" :label-width="formLabelWidth">
+                <el-select v-model="addAndEditFormData.userId" placeholder="请选择管理者" style="width:100%" clearable>
+                  <el-option v-for="item in userData" :key="item.value" :value="item.value" :label="item.label"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item prop="grade" label="年级：" :label-width="formLabelWidth">
+                <el-input v-model="addAndEditFormData.grade" placeholder="请输入年级" style="width:100%" type="number"
+                          min="2000" autosize clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="10">
+              <el-form-item v-if="sign === '2'" prop="pid" label="学院：" :label-width="formLabelWidth">
+                <el-select v-model="addAndEditFormData.pid" placeholder="请选择学院" style="width:100%" clearable>
+                  <el-option v-for="item in collegeData" :key="item.id" :value="item.id" :label="item.name"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item v-if="sign === '3'" prop="pid" label="系：" :label-width="formLabelWidth">
+                <el-select v-model="addAndEditFormData.pid" placeholder="请选择系" style="width:100%" clearable>
+                  <el-option v-for="item in departmentData" :key="item.id" :value="item.id" :label="item.name"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleConfirmEvent('addAndEditElForm')">确 定</el-button>
+          <el-button @click="handleDialogClose">返 回</el-button>
+        </div>
+      </el-dialog>
+    </section>
+
   </div>
 </template>
 
@@ -8,11 +115,195 @@
   export default {
     name: "stuClass",
     data() {
-      return {}
+      return {
+        departmentData: [],                 // 系数据
+        collegeData: [],                    // 学院数据
+        sign: '',                           // pid选择的标志
+        total: 1,                           // 总数
+        page: 1,                            // 当前页
+        limit: 10,                          // 分页大小
+        stuName: '',
+        tableData: [],
+        userData: [],                       // 管理者
+
+        // 新增
+        title: '',
+        closeOnClickModal: false,
+        addAndEditDialogFormVisible: false,
+        isEditable: true,                   // 标志是否是编辑
+        showAddAndEditForm: false,
+        showForm: false,
+        formLabelWidth: '150px',
+        addAndEditFormData: {
+          id: '',
+          name: '',
+          pid: '',
+          sign: '',
+          grade: '',
+          userId: ''
+        },
+        addAndEditRules: {
+          name: {
+            required: true, message: '名称不能为空', trigger: 'blur'
+          },
+          sign: {
+            required: true, message: '类型不能为空', trigger: 'blur'
+          },
+          userId: {
+            required: true, message: '管理者不能为空', trigger: 'blur'
+          },
+        },
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      // 新增
+      addStu() {
+        this.queryCollege();
+        this.wholeUser();
+        this.title = "新增";
+        this.isEditable = false;
+        this.showAddAndEditForm = true;
+        this.addAndEditDialogFormVisible = true;
+        this.sign = '';
+      },
+
+      // 查询
+      getList() {
+        this.api.getApi("/stu/class/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.stuName).then(res => {
+          this.tableData = res.data.list;
+          this.total = res.data.total;
+          this.page = res.data.pageNum;
+          this.limit = res.data.pageSize;
+        })
+      },
+
+      // 查询系和学院
+      async queryCollege() {
+        this.departmentData = [];
+        this.collegeData = [];
+        await this.api.getApi("/stu/class/non/class").then(res => {
+          this.collegeData = res.data.college;
+          this.departmentData = res.data.department;
+        })
+      },
+
+      // 筛选
+      filterTag(value, row) {
+        return row.sign === value;
+      },
+
+      // 清除
+      cleanUp() {
+        this.stuName = '';
+        this.getList();
+      },
+
+      // 编辑
+      editData(index, row) {
+        this.queryCollege();
+        this.wholeUser();
+        this.title = "编辑";
+        this.isEditable = true;
+        this.$set(this.addAndEditFormData, 'id', row.id);
+        this.$set(this.addAndEditFormData, 'name', row.name);
+        this.$set(this.addAndEditFormData, 'pid', row.pid);
+        this.$set(this.addAndEditFormData, 'sign', row.sign + '');
+        this.$set(this.addAndEditFormData, 'grade', row.grade);
+        this.$set(this.addAndEditFormData, 'userId', row.userId);
+        this.showAddAndEditForm = true;
+        this.addAndEditDialogFormVisible = true;
+        // 系和学院显示
+        this.sign = row.sign + '';
+      },
+
+      // 删除
+      deleteData(id) {
+        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.api.deleteApi("/stu/class/delete?id=" + id).then(res => {
+            if (res.data.code === 200) {
+              this.getList();
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      },
+
+      // 关闭模态框
+      handleDialogClose() {
+        this.showAddAndEditForm = false;
+        this.addAndEditFormData = {};
+        this.addAndEditDialogFormVisible = false;
+      },
+
+      // 保存/修改
+      handleConfirmEvent(formName) {
+        this.$refs[formName].validate(async valid => {
+          if (valid) {
+            let formData = this.addAndEditFormData;
+            if (this.isEditable) {
+              this.api.putApi("/stu/class/update", formData).then(res => {
+                if (res.data.code === 200) {
+                  this.getList();
+                  this.handleDialogClose();
+                }
+              })
+            } else {
+              this.api.postApi("/stu/class/add", formData).then(res => {
+                if (res.data.code === 200) {
+                  this.getList();
+                  this.handleDialogClose();
+                }
+              })
+            }
+          }
+        })
+      },
+
+      // 分页大小
+      handleSizeChange(val) {
+        this.limit = val;
+        this.getList();
+      },
+
+      // 第几页
+      handleCurrentChange(val) {
+        this.page = val;
+        this.getList();
+      },
+
+      // 加载全部用户
+      async wholeUser() {
+        this.userData = [];
+        await this.api.getApi("/manager/stu/whole/user").then(res => {
+          this.userData = res.data
+        })
+      },
+
+      // 监听类型的变化
+      monitorSign(value) {
+        this.sign = value;
+      },
     }
   }
 </script>
 
 <style scoped>
+  .title-add {
+    margin: 10px 10px 10px 0;
+  }
 
+  .bottom-page {
+    margin-top: 25px;
+  }
 </style>

src/views/system/stuMenu/index.vue

@@ -21,7 +21,9 @@
                          :filters="[{ text: '目录', value: 'M' }, { text: '菜单', value: 'C' }, { text: '按钮', value: 'B' }]"
                          :filter-method="filterTag" filter-placement="bottom-end">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.menuType === 'M' ? 'success':'primary'" disable-transitions>{{scope.row.menuType}}</el-tag>
+            <el-tag :type="scope.row.menuType === 'M' ? 'success':'primary'" disable-transitions>
+              {{ scope.row.menuType === 'M' ? '目录' : scope.row.menuType === 'C' ? '菜单' : '按钮' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="code" label="权限code" width="180" align="center"></el-table-column>
@@ -32,7 +34,11 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="iconImg" label="菜单图标" width="150" align="center"></el-table-column>
+        <el-table-column prop="iconImg" label="菜单图标" width="150" align="center">
+          <template slot-scope="scope">
+            <i :class="scope.row.iconImg" style="font-size: 25px;"></i>
+          </template>
+        </el-table-column>
         <el-table-column prop="parentName" label="父级" align="center" width="100"></el-table-column>
         <el-table-column prop="url" label="页面url" align="center"></el-table-column>
         <el-table-column label="操作" align="center" width="180">
@@ -47,7 +53,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="page"
-          :page-sizes="[12, 20, 30, 50]"
+          :page-sizes="[10, 20, 30, 50]"
           :page-size="limit"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
@@ -131,7 +137,7 @@ export default {
     return {
       total: 1,      // 总数
       page: 1,       // 当前页
-      limit: 12,     // 分页大小
+      limit: 10,     // 分页大小
       menuName: '',
       tableData: [],
       /* 模态框相关 */
@@ -363,7 +369,7 @@ export default {
 }
 
 .bottom-page{
-  margin-top: 15px;
+  margin-top: 25px;
 }
 
 .title-add button {