修改

src/components/UserMan/memberGroup.vue

@@ -18,14 +18,13 @@
         </div>
       </div>
       <el-table :data="tableData" v-loading="loading" border style="width: 100%; margin: 20px 0">
-        <el-table-column prop="GroupId" label="ID" width="150"> </el-table-column>
+        <el-table-column prop="GroupId" label="ID" width="100"> </el-table-column>
         <el-table-column prop="GroupName" label="分组名称" width="200"> </el-table-column>
-        <el-table-column prop="LookGroupList" label="可查看分组" width="300"> 
-           <template slot-scope="scope">
-             <span v-for="(item,index) in scope.row.LookGroupList" :key="index" style="display:inline-block;">
-               {{item.GroupName}}
-             </span>
-           </template>
+        <el-table-column prop="LookGroupList" label="可查看分组" width="300">
+          <template slot-scope="scope">
+            <el-tag v-for="(item,index) in scope.row.LookGroupList" size="mini" style="margin-right:5px;" :key="index">
+              {{item.GroupName}}</el-tag>
+          </template>
         </el-table-column>
         <el-table-column prop="CreateDate" width="200" label="加入时间"></el-table-column>
         <el-table-column prop="address" label="操作" fixed="right">
@@ -49,12 +48,12 @@
     <!-- 新增修改用户分组 -->
     <el-dialog :title="commonTitle" :visible.sync="IsShowGroup" width="600px" :close-on-click-modal="false">
       <div>
-        <el-form :model="addMsg" ref="addMsg" label-width="150px">
-          <el-form-item label="分组名称">
+        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
+          <el-form-item label="分组名称" prop="GroupName">
             <el-input v-model="addMsg.GroupName" class="w300" maxlength="30" placeholder="请输入分组名称"></el-input>
           </el-form-item>
           <el-form-item label="可查看分组">
-            <el-select v-model="addMsg.GroupIdList" multiple class="w300">
+            <el-select v-model="addMsg.GroupIdList" @visible-change="getgroupList" multiple class="w300">
               <el-option v-for="item in groupArray" :key="item.GroupId" :label="item.GroupName" :value="item.GroupId">
               </el-option>
             </el-select>
@@ -63,7 +62,7 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="IsShowGroup = false">关 闭</el-button>
-        <el-button size="small" type="primary" @click="SaveGroup()">确 定</el-button>
+        <el-button size="small" type="primary" @click="SaveGroup('addMsg')">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -95,6 +94,13 @@
         },
         IsShowGroup: false, //是否显示用户分组弹窗
         groupArray: [], //用户分组列表
+        rules: {
+          GroupName: [{
+            required: true,
+            message: '请填写分组名称',
+            trigger: 'blur'
+          }],
+        },
       };
     },
     created() {
@@ -115,17 +121,21 @@
           this.addMsg.IsSpecial = 0;
           this.commonTitle = '新增分组'
         }
-        console.log(obj, '数据');
         this.IsShowGroup = true;
       },
       //保存用户分组信息
-      SaveGroup() {
-        this.apipost("/api/User/SetMemberGroup", this.addMsg, res => {
-          console.log(res);
-          if (res.data.resultCode == 1) {
-            this.Success(res.data.message);
-            this.getList();
-            this.IsShowGroup = false;
+      SaveGroup(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.apipost("/api/User/SetMemberGroup", this.addMsg, res => {
+              if (res.data.resultCode == 1) {
+                this.Success(res.data.message);
+                this.getList();
+                this.IsShowGroup = false;
+              }
+            });
+          } else {
+            return false;
           }
         });
       },
@@ -145,7 +155,7 @@
           that.apipost("/api/User/DeleteMemberGroup", {
             GroupId: item.GroupId
           }, res => {
-            if(res.data.resultCode==1){
+            if (res.data.resultCode == 1) {
               that.Success(res.data.message);
               that.getList();
             }
@@ -160,6 +170,8 @@
             this.total = res.data.data.count;
             let pageData = res.data.data.pageData;
             this.tableData = pageData;
+          } else {
+            this.Error(res.data.message);
           }
         });
       },