修复分组名称和分组描述没有限制输入长度的bug

src/view/memberGroup/memberGroupEdit.vue

@@ -22,8 +22,8 @@
             </el-form-item>
             <el-form-item label="" prop="groupName" class="w-220">
               <div>分组名称</div>
-              <el-input class="w-220" v-model="ruleForm.groupName" placeholder="请输入分组名称" @input.native="e => toInput(e, 'groupName')"> </el-input>
-              <label class="input-label">{{ ruleForm.groupNameLength }}/10</label>
+              <el-input class="w-220" v-model="ruleForm.groupName" :maxlength="10" placeholder="请输入分组名称"> </el-input>
+              <label class="input-label">{{ ruleForm.groupName.length }}/10</label>
             </el-form-item>
             <el-form-item label="" prop="effectiveDateTmp">
               <div class="effective">
@@ -37,10 +37,8 @@
             </el-form-item>
             <el-form-item label="" prop="describle" class="w-548">
               <div>分组描述</div>
-              <el-input class="w-548" type="textarea" v-model="ruleForm.describle" style="height: 96px;" @input.native="e => toInput(e, 'describle')"> </el-input>
-              <template>
-                <label class="input-label textarea-label">{{ ruleForm.describleLength }}/200</label>
-              </template>
+              <el-input class="w-548" type="textarea" v-model="ruleForm.describle" :maxlength="200" style="height: 96px;"> </el-input>
+              <label class="input-label textarea-label">{{ ruleForm.describle.length }}/200</label>
             </el-form-item>
             <el-form-item label="" prop="updateDay" v-show="ruleForm.isActive == 0">
               <div>更新频率 <span class="form-tip-text">(更新时间预计选择日期的凌晨0点至6点)</span></div>
@@ -100,7 +98,6 @@ import navCrumb from '@/components/nav/nav.vue';
 import tagContainer from '@/view/platformTag/tag-container.vue';
 import editTag from './edit-tag';
 import tagsGroupList from './tags-group-list.vue';
-import strLength from '@/common/js/strlen';
 import showMsg from '@/common/js/showmsg';
 import { _debounce } from '@/common/js/public';
 import { postRequest } from '@/api/api';
@@ -150,14 +147,10 @@ export default {
         newTagVal: '',
         // 分组名称
         groupName: '',
-        // 分组名称的长度
-        groupNameLength: 0,
         // 分组有效期
         effectiveDateTmp: '',
         // 分组描述
         describle: '',
-        // 分组描述的长度
-        describleLength: 0,
         // 非实时需要根据标签判断
         isActive: 0,
         // 更新频率类型 1=每日一次 2=每周一次 3=每月一次
@@ -350,25 +343,6 @@ export default {
     },
 
     /**
-     * 计算输入内容的长度、限制输入的长度
-     */
-    toInput(e, target) {
-      let temp = '';
-      switch (target) {
-        case 'groupName':
-          // 限制输入内容的长度
-          temp = strLength.getCharVal(e.target.value, 10).trim();
-          // 计算已经输入的内容的长度
-          this.ruleForm.groupNameLength = strLength.getZhLen(temp);
-          break;
-        case 'describle':
-          temp = strLength.getByteVal(e.target.value, 200).trim();
-          this.ruleForm.describleLength = strLength.getByteLen(temp);
-          break;
-      }
-    },
-
-    /**
      * 已选标签-删除-检查实时
      */
     checkRealTime() {
@@ -536,8 +510,6 @@ export default {
               this.ruleForm.effectiveDateTmp = tagGroupDto.effectiveDate;
               this.ruleForm.updateType = !!tagGroupDto.updateType ? Number(tagGroupDto.updateType) : '';
               this.ruleForm.updateDay = !!tagGroupDto.updateDay ? Number(tagGroupDto.updateDay) : '';
-              this.ruleForm.groupNameLength = strLength.getZhLen(this.ruleForm.groupName);
-              this.ruleForm.describleLength = strLength.getByteLen(this.ruleForm.describle);
             }
 
             let tagValueDtoList = Array.isArray(resData.result.tagValueDtoList) ? resData.result.tagValueDtoList : [];