群成员管理新增页优化

src/views/modules/master/master-user.vue

@@ -92,7 +92,10 @@ export default {
     },
     getInfo () {
       if (this.responseData.length === 0) {
-        alert('请选择书记！')
+        this.$message({
+          message: '请选择书记！',
+          type: 'warning'
+        })
         return
       }
       this.$emit('connectResponse', this.responseData)

src/views/modules/master/masteruserrelation-add.vue

@@ -1,42 +1,43 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-__masteruserrelation}">
-      <el-form :inline="true" ref="dataForm" :model="dataForm" @keyup.enter.native="dataFormSubmitHandle()">
+      <el-form :inline="true" :rules="dataRule" ref="dataForm" :model="dataForm" @keyup.enter.native="dataFormSubmitHandle()">
         <el-form-item>
           <el-button type="primary" @click="backToUserRelationList">{{"返回"}}</el-button>
           <el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{"确定"}}</el-button>
         </el-form-item>
-        <el-row>
-            <div v-for="(item, index) in this.formData" :key="index">
-                <div style="text-align: left;">{{"书记"+(index+1)+":"}}</div>
-                <el-row>
-                    <el-form-item label="选择书记：" prop="deptName">
-                        <el-input v-model="item.deptName"
-                                  :disabled="true"
-                                  type="text"
-                                  clearable
-                                  style="width: 30rem;">
-                        </el-input>&emsp;
-                        <el-input v-model="item.realName"
-                                  :disabled="true"
-                                  type="text"
-                                  clearable
-                                  style="width: 10rem;">
-                        </el-input> &emsp;
-                        <el-button @click="selectUserMethod(index)">{{"选择书记"}}</el-button>&emsp;&emsp;
-                    </el-form-item>
-                    <el-form-item label="群内昵称：" prop="nickName">
-                        <el-input v-model="item.nickName"
-                                  type="text"
-                                  clearable
-                                  style="width: 30rem;" @blur="nameInputBlur(index,$event)">
-                        </el-input>&emsp;
-                        <el-button @click="deleteUserMethod(index)">{{"删除"}}</el-button>&emsp;&emsp;
-                    </el-form-item>
-                </el-row>
-            </div>
-        </el-row>
       </el-form>
+      <div v-for="(item, index) in this.formData" :key="index">
+        <el-form :inline="true" :rules="dataRule" ref="item" :model="item" @keyup.enter.native="dataFormSubmitHandle()">
+          <el-row>
+            <div style="text-align: left;">{{"书记"+(index+1)+":"}}</div>
+            <el-row>
+                <el-form-item label="选择书记：" prop="deptName">
+                    <el-input v-model="item.deptName"
+                              :disabled="true"
+                              type="text"
+                              clearable
+                              style="width: 30rem;">
+                    </el-input>&emsp;
+                    <el-input v-model="item.realName"
+                              :disabled="true"
+                              type="text"
+                              clearable
+                              style="width: 10rem;">
+                    </el-input> &emsp;
+                    <el-button @click="selectUserMethod(index)">{{"选择书记"}}</el-button>&emsp;&emsp;
+                </el-form-item>
+                <el-form-item label="群内昵称：" prop="nickName">
+                    <el-input v-model="item.nickName"
+                              type="text"
+                              style="width: 30rem;">
+                    </el-input>&emsp;
+                    <el-button @click="deleteUserMethod(index)">{{"删除"}}</el-button>&emsp;&emsp;
+                </el-form-item>
+            </el-row>
+          </el-row>
+        </el-form>
+      </div>
       <!-- 弹窗, 新增 / 修改 -->
       <master-user v-if="masterUserVisible" ref="masterUser" @refreshDataList="getDataList" v-on:connectResponse="connectResponse"></master-user>
     </div>
@@ -62,7 +63,20 @@ export default {
       masterUserVisible: false,
       isAble: false,
       formData: [{ deptName: '', username: '', nickName: '' }],
-      updateIndex: 0
+      updateIndex: 0,
+      dataCheckAble: true
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        nickName: [
+          { required: this.dataCheckAble, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        realName: [
+          { required: this.dataCheckAble, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
     }
   },
   components: {
@@ -82,6 +96,8 @@ export default {
       this.$nextTick(() => {
         this.$refs.masterUser.init()
       })
+      // 关闭数据校验
+      this.dataCheckAble = false
     },
     // 删除单个人员
     deleteUserMethod (index) {
@@ -98,22 +114,14 @@ export default {
         let nickname = item.username
         this.$set(item, 'nickName', nickname)
       }
+      // 打开数据校验
+      this.dataCheckAble = true
       if (connectResponse.length === 1) {
         this.formData.splice(this.updateIndex, 1, connectResponse[0])
       } else {
         this.formData = connectResponse
       }
     },
-    // 昵称改变事件监听
-    nameInputBlur (index, event) {
-      if (event.target.value === null || event.target.value === '') {
-        this.$message({
-          message: '昵称不能为空！',
-          type: 'warning'
-        })
-      }
-      this.formData[index].nickName = event.target.value
-    },
     // 表单提交
     dataFormSubmitHandle () {
       if (this.formData.length < 1 || this.formData[0].username === '') {
@@ -134,7 +142,6 @@ export default {
         }
       }
       this.isAble = true
-      console.log(this.formData)
       let postData = {
         aformDataParams: this.formData
       }