update: 黑名单添加完善

src/views/message/addTemp.vue

@@ -92,7 +92,9 @@
         </el-col>
       </el-form>
       <div class="preview">
-        <div class="preview_content">{{ previewContent }}</div>
+        <div class="preview_content">
+          <div class="inner">{{ previewContent }}</div>
+        </div>
       </div>
     </el-row>
     <div class="btn_bottom">
@@ -494,22 +496,24 @@ export default {
   }
 }
 .preview {
-  position: relative;
   display: inline-block;
   margin-left: 134px;
   width: 320px;
-  height: 567px;
+  min-height: 567px;
   background: url('~@/assets/img/template_bg.png') no-repeat center top / contain;
   .preview_content {
-    word-wrap: break-word;
-    position: absolute;
-    border-radius: 14px;
-    padding: 10px;
-    box-sizing: border-box;
-    background: #eaeaec;
-    width: 200px;
-    top: 151px;
-    left: 27px;
+    margin: 107px 0 0 27px;
+    height: 435px;
+    overflow-y: auto;
+    .inner {
+      margin: 50px 0 0 0;
+      box-sizing: border-box;
+      word-wrap: break-word;
+      border-radius: 14px;
+      padding: 10px;
+      width: 200px;
+      background: #eaeaec;
+    }
   }
 }
 .sign {

src/views/message/blackList.vue

@@ -25,8 +25,8 @@
       </el-table>
       <dm-pagination background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-sizes="tableData.pageSizeList" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next" :total="tableData.total" hide-on-single-page />
     </div>
-    <el-dialog :visible.sync="dialogData.visible" :title="dialogData.title" width="600px" @close="resetDialog">
-      <el-form ref="form" :model="dialogData.form" :rules="dialogData.form.rules" label-width="110px">
+    <el-dialog :visible.sync="dialogData.visible" :title="dialogTitle" width="600px" @close="resetDialog">
+      <el-form v-if="!isExiteErrorPhone" ref="form" :model="dialogData.form" :rules="dialogData.form.rules" label-width="110px">
         <el-form-item label="黑名单内容：" prop="phoneList">
           <el-input type="textarea" v-model="dialogData.form.phoneList" placeholder="回车换行，一行输入一个手机号码，最多可以添加1000个号码" :maxlength="1000" :rows="4" show-word-limit class="w410" resize="none" />
         </el-form-item>
@@ -42,7 +42,15 @@
           <el-button type="primary" @click="submit">确认</el-button>
         </div>
       </el-form>
-      <!-- <div v-else>当次错误手机号</div> -->
+      <div v-else>
+        <ul class="errorList">
+          <li v-for="(item, index) in dialogData.form.errorPhoneList" :key="index">{{ item }}</li>
+        </ul>
+        <div class="btn_group" style="margin: 30px 0 10px">
+          <span class="tips"><i class="iconfont icon-tishi"></i>异常名单将会自动过滤，请自行记录。</span>
+          <el-button type="primary" @click="dialogData.visible = false">确认</el-button>
+        </div>
+      </div>
     </el-dialog>
   </section>
 </template>
@@ -93,7 +101,7 @@ export default {
           phoneList: '',
           reasonType: 0,
           reason: '',
-          errorPhoneList: ''
+          errorPhoneList: []
         }
       }
     };
@@ -147,11 +155,13 @@ export default {
           para.reasonType = reasonType;
           para.reason = reasonType ? reason : null;
           await addBlackList(para);
-          this.$tips({ type: 'success', message: '添加成功' });
-          // if (!this.dialogData.form.errorPhoneList) {
-          this.dialogData.visible = false;
-          this.getTableData();
-          // }
+          if (!this.isExiteErrorPhone) {
+            this.$tips({ type: 'success', message: '添加成功' });
+            this.dialogData.visible = false;
+            this.getTableData();
+          } else {
+            this.$tips({ type: 'warning', message: '部分添加成功' });
+          }
         }
       });
     },
@@ -159,14 +169,15 @@ export default {
       // 返回正确手机号的Array
       const reg = /^1[0-9]{10}$/;
       const arr = this.dialogData.form.phoneList.split('\n');
-      this.dialogData.form.errorPhoneList = arr.filter(el => !reg.test(el)).toString();
+      this.dialogData.form.errorPhoneList = arr.filter(el => !reg.test(el));
       const result = arr.filter(el => reg.test(el));
       return result.toString();
     },
     resetDialog() {
-      this.$refs.form.resetFields();
       this.dialogData.form.reason = '';
-      // this.dialogData.form.errorPhoneList = '';
+      this.dialogData.form.reasonType = 0;
+      this.dialogData.form.phoneList = '';
+      this.dialogData.form.errorPhoneList = [];
     },
     removeBlack(v) {
       this.$confirm('确认将该手机号移出黑名单吗？', '提示', {
@@ -181,6 +192,14 @@ export default {
         })
         .catch(() => {});
     }
+  },
+  computed: {
+    isExiteErrorPhone() {
+      return this.dialogData.form.errorPhoneList.length;
+    },
+    dialogTitle() {
+      return this.isExiteErrorPhone ? '手机号码格式异常名单' : this.dialogData.title;
+    }
   }
 };
 </script>
@@ -201,4 +220,42 @@ export default {
 .mt8 {
   margin-top: 8px;
 }
+.errorList {
+  li {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    height: 22px;
+    line-height: 22px;
+    width: 130px;
+    background: #fff1f0;
+    border-radius: 2px;
+    border: 1px solid #ffa39e;
+    margin: 10px 10px 0 0;
+    padding: 0 5px;
+    box-sizing: border-box;
+    color: #f5222d;
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+}
+.tips {
+  display: inline-block;
+  width: 300px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background: #f7f8fa;
+  border-radius: 2px;
+  margin-right: 16px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  i {
+    color: #2f54eb;
+    margin-right: 5px;
+  }
+}
 </style>