新增班级小组列表:增删改查

src/api/clazz/clazz.js

@@ -9,6 +9,8 @@ export function listClazz(query) {
   })
 }
 
+
+
 // 查询数据管理详细
 export function getClazz(clazzId) {
   return request({

src/api/clazz/group.js

@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+
+// 班级小组列表
+export function lookGroup(clazzId) {
+  return request({
+    url: '/clazz/group/groupList/'+ clazzId,
+    method: 'get'
+  })
+}
+//
+// export function lookGroup(clazzId) {
+//   return request({
+//     url: '/clazz/group/groupList/'+ clazzId,
+//     method: 'get'
+//   })
+// }
+//
+// 查询小组详细
+export function getGroup(groupId) {
+  return request({
+    url: '/clazz/group/'+groupId,
+    method: 'get'
+  })
+}
+//
+// 新增数据管理
+export function addGroup(data) {
+  return request({
+    url: '/clazz/group',
+    method: 'post',
+    data: data
+  })
+}
+//
+// 修改数据管理
+export function updateGroup(data) {
+  return request({
+    url: '/clazz/group',
+    method: 'put',
+    data: data
+  })
+}
+//
+// 删除数据管理
+export function delGroup(groupId) {
+  return request({
+    url: '/clazz/group/' + groupId,
+    method: 'delete'
+  })
+}

src/views/clazz/clazz/index.vue

@@ -94,11 +94,12 @@
           <span style="margin-left: 10px">{{ scope.row.remark }}</span>
         </template>
       </el-table-column>
-
+      <el-button type="text" >点击打开 Dialog</el-button>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        @click=" "
         <template slot-scope="scope">
-          <el-button v-hasPermi="['clazz:clazz:edit']" icon="el-icon-edit" size="mini" type="text" @click="handleUpdate(scope.row)">修改
+          <el-button  icon="el-icon-edit" size="mini" type="text" @click="lookGroup(scope.row)" >查看班级小组</el-button>
-          </el-button>
+          <el-button v-hasPermi="['clazz:clazz:edit']" icon="el-icon-edit" size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
           <el-button v-hasPermi="['clazz:clazz:remove']" icon="el-icon-delete" size="mini" type="text" @click="handleDelete(scope.row)">删除
           </el-button>
         </template>
@@ -106,23 +107,66 @@
 
     </el-table>
 
+    <el-dialog :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
+
+      <el-button type="primary" @click="handleGroupAdd">新增小组</el-button>
+      <el-table v-loading="loading" :data="groupList" style="width: 100%" >>
+
+        <el-table-column type="selection" width="55"></el-table-column>
+
+        <el-table-column label="id" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupId }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="小组名称" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="组长" width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.groupUserName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          @click=" "
+          <template slot-scope="scope">
+            <el-button icon="el-icon-edit" size="mini" type="text" @click="handleGroupUpdate(scope.row)">修改</el-button>
+            <el-button icon="el-icon-delete" size="mini" type="text" @click="handleGroupDelete(scope.row)">删除 </el-button>
+          </template>
+        </el-table-column>
 
 
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
 
+  </span>
+    </el-dialog>
 
+    <el-dialog :visible.sync="dialogVisibleGroup" width="50%" :before-close="handleClose">
 
+      <el-form ref="form" :model="groupMsg" label-width="80px">
 
+        <el-form-item label="小组名称">
+          <el-input v-model="groupMsg.groupName"></el-input>
+        </el-form-item>
+        <el-form-item label="组长名称">
+          <el-input v-model="groupMsg.groupUserName"></el-input>
+        </el-form-item>
 
+        <el-form-item>
+          <el-button type="primary" @click="updateOnSubmit">确认</el-button>
+        </el-form-item>
+      </el-form>
 
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
 
-    <pagination
+  </span>
-      v-show="total>0"
+    </el-dialog>
-      :total="total"
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
     <!-- 添加或修改数据管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -146,6 +190,7 @@
 
 <script>
 import { listClazz, getClazz, delClazz, addClazz, updateClazz } from "@/api/clazz/clazz";
+import {addGroup, delGroup, getGroup,  lookGroup, updateGroup} from "@/api/clazz/group";
 
 export default {
   name: "Clazz",
@@ -155,6 +200,8 @@ export default {
       loading: true,
       // 选中数组
       ids: [],
+      //班级小组
+      groupList: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -167,8 +214,13 @@ export default {
       clazzList: [],
       // 弹出层标题
       title: "",
+      clazzId1: null,
       // 是否显示弹出层
       open: false,
+      //查看小组弹窗
+      dialogVisible: false,
+      //查看分组组弹窗
+      dialogVisibleGroup: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -178,6 +230,7 @@ export default {
       },
       // 表单参数
       form: {},
+      groupMsg: {},
       // 表单校验
       rules: {
       }
@@ -187,6 +240,82 @@ export default {
     this.getList();
   },
   methods: {
+
+    /** 修改小组信息 */
+    handleGroupUpdate(row){
+      this.dialogVisibleGroup = true
+      const groupId = row.groupId;
+      getGroup(groupId).then(response => {
+        this.groupMsg = response.data;
+        this.title = "修改小组信息";
+      });
+    },
+    /** 删除小组 */
+    handleGroupDelete(row){
+      const groupId = row.groupId;
+      const clazzId = row.clazzId
+      this.$modal.confirm('是否确认删除这个小组为"' + groupId + '"的数据项？').then(function() {
+        return delGroup(groupId);
+      }).then(() => {
+        lookGroup(clazzId).then(response => {
+          this.groupList= response.data.rows;
+        });
+
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+
+    },
+    /** 小组新增按钮操作 */
+    handleGroupAdd() {
+      this.dialogVisibleGroup = true
+
+      this.groupMsg = {
+        clazzId: null,
+        groupName: null,
+        groupUserName: null,
+        groupId: null
+      };
+      this.title = "添加小组";
+    },
+    /** 提交按钮 */
+    updateOnSubmit() {
+
+          if (this.groupMsg.clazzId != null) {
+            updateGroup(this.groupMsg).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.dialogVisibleGroup = false;
+              lookGroup(this.groupMsg.clazzId).then(response => {
+                this.groupList= response.data.rows;
+              });
+            });
+          } else {
+            this.groupMsg.clazzId = this.clazzId1
+           addGroup(this.groupMsg).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.dialogVisible = false;
+              this.dialogVisibleGroup = false;
+              // lookGroup(this.groupMsg.clazzId).then(response => {
+              //   this.groupList= response.data.rows;
+              //   this.title = "查看班级小组";
+              // });
+            });
+
+        }
+
+    },
+
+
+
+    /** 查询班级小组列表 */
+    lookGroup(row){
+      this.dialogVisible = true
+      const clazzId = row.clazzId
+      this. clazzId1 = row.clazzId
+      lookGroup(clazzId).then(response => {
+        this.groupList= response.data.rows;
+        this.title = "查看班级小组";
+      });
+    },
     /** 查询数据管理列表 */
     getList() {
       this.loading = true;
@@ -281,6 +410,15 @@ export default {
       this.download('clazz/clazz/export', {
         ...this.queryParams
       }, `clazz_${new Date().getTime()}.xlsx`)
+    },
+
+    /** 弹出层关闭 */
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
     }
   }
 };