添加品牌查询功能，增加部门字段

src/api/mes/md/brand.js

@@ -23,7 +23,8 @@ export function listAllBrand(query) {
 export function listBrandByCondition(query) {
   return request({
     url: '/mes/md/brand/listBrandByCondition',
-    method: 'get'
+    method: 'get',
+    params: query
   })
 }
 

src/views/mes/md/client/components/ClientContact.vue

@@ -52,8 +52,8 @@
 
     <el-table v-loading="loading" :data="contactList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="客户id" align="center" prop="clientId" width="100"/>
-      <el-table-column label="品牌ID" align="center" prop="brandId" width="150"/>
+      <el-table-column label="品牌名称" align="center" prop="brandName" width="150"/>
+      <el-table-column label="部门" align="center" prop="department" width="100"/>
       <el-table-column label="职位" align="center" prop="position" width="100"/>
       <el-table-column label="联系人" align="center" prop="contact" width="100"/>
       <el-table-column label="电话号码" align="center" prop="tel" width="150"/>
@@ -95,9 +95,27 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 
-        <el-form-item label="品牌ID" prop="brandId" label-width="120px">
-          <el-input v-model="form.brandId" placeholder="请输入品牌ID"/>
+        <el-form-item label="品牌名称" prop="brandName" label-width="120px">
+          <el-select
+            v-model="form.brandName"
+            filterable
+            remote
+            placeholder="请输入品牌名称"
+            :remote-method="remoteMethod"
+            :loading="loadingOptions">
+            <el-option
+              v-for="item in options"
+              :key="item.brandId"
+              :label="item.brandName"
+              :value="item.brandName">
+            </el-option>
+          </el-select>
         </el-form-item>
+
+        <el-form-item label="部门" prop="department" label-width="120px">
+          <el-input v-model="form.department" placeholder="请输入部门"/>
+        </el-form-item>
+
         <el-form-item label="职位" prop="position" label-width="120px">
           <el-input v-model="form.position" placeholder="请输入职位"/>
         </el-form-item>
@@ -130,6 +148,8 @@
 
 <script>
 import {listContact, addContact, updateContact, getContact, delContact} from '@/api/mes/md/clientContact'
+import {listBrandByCondition} from '@/api/mes/md/brand'
+
 
 export default {
   props: {
@@ -137,6 +157,17 @@ export default {
   },
   data() {
     return {
+      //远程搜索获取到的列表
+      brandList: [],
+      //远程搜索加载选项
+      loadingOptions: false,
+      //远程搜索选项
+      options: [],
+      //远程搜索参数
+      remoteQuery: {
+        brandName: null,
+        enableFlag: "Y"
+      },
       // 遮罩层
       loading: false,
       // 选中数组
@@ -165,24 +196,21 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        brandId: [
-          {required: true, trigger: 'blur'}
-        ],
-        position: [
-          {required: true, trigger: 'blur'}
-        ],
-        contact: [
-          {required: true, trigger: 'blur'}
-        ],
-        tel: [
-          {required: true, trigger: 'blur'}
-        ],
-        businessType: [
-          {required: true, trigger: 'blur'}
-        ],
-        merchandiser: [
-          {required: true, trigger: 'blur'}
-        ]
+        // position: [
+        //   {required: true, trigger: 'blur'}
+        // ],
+        // contact: [
+        //   {required: true, trigger: 'blur'}
+        // ],
+        // tel: [
+        //   {required: true, trigger: 'blur'}
+        // ],
+        // businessType: [
+        //   {required: true, trigger: 'blur'}
+        // ],
+        // merchandiser: [
+        //   {required: true, trigger: 'blur'}
+        // ]
 
       }
     }
@@ -193,6 +221,7 @@ export default {
       this.loading = true
       this.queryParams.clientId = this.clientId
       listContact(this.queryParams).then(response => {
+        console.log(response, 111)
         this.contactList = response.rows
         this.total = response.total
       }).finally(() => this.loading = false)
@@ -207,7 +236,8 @@ export default {
       this.form = {
         id: null,
         clientId: this.clientId,
-        brandId: null,
+
+        brandName: null,
         position: null,
         contact: null,
         tel: null,
@@ -259,7 +289,6 @@ export default {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-
               updateContact(this.form).then(response => {
                 this.$modal.msgSuccess('修改成功')
                 this.open = false
@@ -298,6 +327,23 @@ export default {
       this.queryParams.clientId = form.clientId
       this.getList()
     },
+    /** 远程搜索 */
+    remoteMethod(query) {
+      // 如果用户输入内容了，就发请求拿数据，远程搜索模糊查询
+      if (query !== "") {
+        this.remoteQuery.brandName = query;
+        this.loadingOptions = true; // 开始拿数据喽
+        // 这里模拟发请求，res就当成发请求返回来的数据吧。
+        listBrandByCondition(this.remoteQuery).then(response => {
+          if (response.code == 200) {
+            this.options = response.data
+          }
+          this.loadingOptions = false // 拿到数据喽
+        })
+      } else {
+        this.options = [];
+      }
+    }
   }
 }
 </script>