关联服务商功能优化

web-ui/src/views/module/bindAgent/index.vue

@@ -47,10 +47,10 @@
           <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
           <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" />
           <el-table-column label="所属角色" align="center" key="roleName" prop="roleName" />
-          <el-table-column label="关联代理商" align="center" key="agentName" prop="agentName" width="300" />
+          <el-table-column label="关联服务商" align="center" key="agentName" prop="agentName" width="300" />
           <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
             <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">关联代理商</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">关联服务商</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -65,8 +65,8 @@
         <el-form-item label="用户名称:" prop="userName" label-width="120px">
             <el-input style="width:300px" v-model="form.userName" :readonly="true"/>
         </el-form-item>
-        <el-form-item label="代理商名称:" prop="agentIdList" label-width="120px">
-             <el-select v-model="form.agentIdList" multiple collapse-tags placeholder="请选择" style="width:300px">
+        <el-form-item label="服务商名称:" prop="agentIdList" label-width="120px">
+             <el-select v-model="form.agentIdList" multiple collapse-tags placeholder="请选择" style="width:300px" filterable :filter-method="getAgent" @visible-change="selectOpenOrClose($event)">
                 <el-option v-for="item in agentOption" :key="item.id" :label="item.name" :value="item.id" ></el-option>
             </el-select>
             <div class="showOptions">
@@ -191,7 +191,7 @@ export default {
           { required: true, message: "绑定渠道商不能为空", trigger: "blur" }
         ],
         agentId: [
-          { required: true, message: "绑定代理商不能为空", trigger: "blur" }
+          { required: true, message: "绑定服务商不能为空", trigger: "blur" }
         ],
         nickName: [
           { required: true, message: "用户昵称不能为空", trigger: "blur" }
@@ -257,6 +257,25 @@ export default {
         }
     },
 
+    // 搜索下拉选
+    getAgent(val) {
+      this.value = val;
+        if (val) { //val存在
+          this.agentOption = this.agentOption.filter((item) => {
+            if (item.name.includes(val)) {
+              return true
+            }
+          })
+        } else { //val为空时，还原数组
+          this.getAgentList();
+        }
+    },
+
+    // 展开or关闭下拉选
+    selectOpenOrClose() {
+      this.getAgentList();
+    },
+
     /** 查询用户列表 */
     getList() {
       this.loading = true;
@@ -328,10 +347,11 @@ export default {
     handleUpdate(row) {
       this.reset();
       const userId = row.userId || this.ids;
+      this.getAgentList();
       getAgentBindInfo(userId).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "关联代理商";
+        this.title = "关联服务商";
       });
     },
     /** 提交按钮 */