修改线管理后台索池

pingan/src/api/receiver/clues/index.js

@@ -41,3 +41,13 @@ export async function addCluesOptLog(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+export async function getSearch(params) {
+  const res = await request.get('/receiver/clues/search', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

pingan/src/components/BrandSelect/index.vue

@@ -0,0 +1,129 @@
+<!-- 省市区选择组件 -->
+<template>
+  <el-cascader
+    clearable
+    filterable
+    :value="value"
+    :options="regionsData"
+    :placeholder="placeholder"
+    popper-class="ele-pop-wrap-higher"
+    :props="props"
+    @input="updateValue"
+  />
+</template>
+
+<script>
+  import { getRegionsData } from './load-data';
+
+  export default {
+    name: 'BrandSelect',
+    props: {
+      value: Array,
+      placeholder: String,
+      options: Array,
+      valueField: {
+        type: String,
+        validator: (val) => {
+          return !val || val === 'label';
+        }
+      },
+      type: {
+        type: String,
+        validator: (type) => {
+          return !type || ['provinceCity', 'province'].includes(type);
+        }
+      },
+      props: Object
+    },
+    data() {
+      return {
+        // 级联选择器数据
+        regionsData: []
+      };
+    },
+    methods: {
+      /* 更新 value */
+      updateValue(value) {
+        this.$emit('input', value);
+      },
+      /* 级联选择器数据 value 处理 */
+      formatData(data) {
+        if (this.valueField === 'label') {
+          return data.map((d) => {
+            const item = {
+              label: d.label,
+              value: d.label
+            };
+            if (d.children) {
+              item.children = d.children.map((c) => {
+                const cItem = {
+                  label: c.label,
+                  value: c.label
+                };
+                if (c.children) {
+                  cItem.children = c.children.map((cc) => {
+                    return {
+                      label: cc.label,
+                      value: cc.label
+                    };
+                  });
+                }
+                return cItem;
+              });
+            }
+            return item;
+          });
+        } else {
+          return data;
+        }
+      },
+      /* 省市区数据筛选 */
+      filterData(data) {
+        if (this.type === 'provinceCity') {
+          return this.formatData(
+            data.map((d) => {
+              const item = {
+                label: d.label,
+                value: d.value
+              };
+              if (d.children) {
+                item.children = d.children.map((c) => {
+                  return {
+                    label: c.label,
+                    value: c.value
+                  };
+                });
+              }
+              return item;
+            })
+          );
+        } else if (this.type === 'province') {
+          return this.formatData(
+            data.map((d) => {
+              return {
+                label: d.label,
+                value: d.value
+              };
+            })
+          );
+        } else {
+          return this.formatData(data);
+        }
+      }
+    },
+    watch: {
+      options: {
+        handler(options) {
+          this.regionsData = this.filterData(options ?? []);
+          if (!options) {
+            getRegionsData().then((data) => {
+              this.regionsData = this.filterData(data ?? []);
+              this.$emit('load-data-done', data);
+            });
+          }
+        },
+        immediate: true
+      }
+    }
+  };
+</script>

pingan/src/components/BrandSelect/load-data.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request';
+import { API_BASE_URL } from '@/config/setting';
+const BASE_URL = API_BASE_URL;
+let reqPromise;
+
+/**
+ * 获取省市区数据
+ */
+export function getRegionsData() {
+  if (!reqPromise) {
+    reqPromise = new Promise((resolve, reject) => {
+      request
+        .get(BASE_URL + '/common/autoBrands', {
+          baseURL: ''
+        })
+        .then((res) => {
+          resolve(res.data ?? []);
+        })
+        .catch((e) => {
+          reject(e);
+        });
+    });
+  }
+  return reqPromise;
+}

pingan/src/components/RegionsSelect/index.vue

@@ -2,6 +2,7 @@
 <template>
   <el-cascader
     clearable
+    filterable
     :value="value"
     :options="regionsData"
     :placeholder="placeholder"
@@ -76,7 +77,7 @@
           return data;
         }
       },
-      /* 省市区数据筛选 */
+      /* 数据筛选 */
       filterData(data) {
         if (this.type === 'provinceCity') {
           return this.formatData(

pingan/src/views/receiver/clues/index.vue

@@ -13,6 +13,53 @@
               />
             </el-form-item>
           </el-col>
+          <el-col :md="6" :sm="12">
+            <el-form-item label="客户编号:">
+              <el-input
+                placeholder="请输入客户编号"
+                clearable
+                v-model="where.sid"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :md="6" :sm="12">
+            <el-form-item label="线索状态:">
+              <el-cascader
+                v-model="where.status"
+                :options="statusList"
+                clearable
+              ></el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :md="6" :sm="12">
+            <el-form-item label="省市:">
+              <regions-select
+                v-model="where.citys"
+                type="provinceCity"
+                placeholder="请选择省市"
+                class="ele-fluid"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :md="6" :sm="12">
+            <el-form-item label="关注车型:">
+              <brand-select
+                v-model="where.brands"
+                type="provinceCity"
+                :props="{ multiple: true }"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :md="6" :sm="12">
+            <el-form-item label="线索归属:">
+              <el-cascader
+                v-model="where.belong"
+                :options="belongOptions"
+                :props="{ multiple: true, checkStrictly: true }"
+                clearable
+              ></el-cascader>
+            </el-form-item>
+          </el-col>
           <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
             <el-form-item label="筛选日期:">
               <el-date-picker
@@ -65,27 +112,27 @@
 </template>
 
 <script>
-  import { pageClues } from '@/api/receiver/clues';
+  import { pageClues, getSearch } from '@/api/receiver/clues';
+  import RegionsSelect from '@/components/RegionsSelect/index.vue';
+  import BrandSelect from '@/components/BrandSelect/index.vue';
 
   export default {
     name: 'receiverClues',
-    components: {},
+    components: { RegionsSelect, BrandSelect },
     data() {
       return {
         where: {
           title: '',
-          selectedCar: {
+          citys: [],
-            brandId: '',
+          brands: [],
-            seriesId: '',
+          belong: []
-            modelId: ''
-          }
         },
         // 表格列配置
         columns: [
           {
-            prop: 'id',
+            prop: 'sid',
             label: '编号',
-            minWidth: 40,
+            minWidth: 100,
             align: 'center',
             showOverflowTooltip: true,
             fixed: 'left'
@@ -191,10 +238,14 @@
               }
             }
           ]
-        }
+        },
+        belongOptions: [],
+        statusList: []
       };
     },
-    created() {},
+    created() {
+      this.loadSearch();
+    },
     computed: {
       // 是否开启响应式布局
       styleResponsive() {
@@ -202,6 +253,17 @@
       }
     },
     methods: {
+      loadSearch() {
+        getSearch()
+          .then((data) => {
+            console.log(data);
+            this.statusList = data.statusList;
+            this.belongOptions = data.belongList;
+          })
+          .catch((e) => {
+            this.$message.error(e.message);
+          });
+      },
       /* 下拉按钮点击 */
       dropClick(command, row) {
         if (command === 'edit') {