feat: 创建客户增加所属分组字段

src/modules/customer/api.js

@@ -68,3 +68,7 @@ export function deleteFollowRecord(id) {
 export function getprojectDetail(data) {
   return httpRequest.get(`/api/customer/admin/v1/project/${data.id}`, data)
 }
+// 获取客户组列表
+export function getCustomerGroup(params) {
+  return httpRequest.get('/api/customer/admin/v1/groups', { params })
+}
\ No newline at end of file

src/modules/customer/components/BaseInfo.vue

@@ -15,9 +15,19 @@
       <el-descriptions-item>
         <template slot="label">院校层级</template>{{ form.universityLevel }}
       </el-descriptions-item>
-      <el-descriptions-item> <template slot="label">所在地区</template>{{ form.region }} </el-descriptions-item>
-      <el-descriptions-item> <template slot="label">详细地址</template>{{ form.address }} </el-descriptions-item>
-      <el-descriptions-item> <template slot="label">备注</template>{{ form.remark }} </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">所在地区</template>{{ form.region }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">详细地址</template>{{ form.address }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">备注</template>{{ form.remark }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">所属分组</template>
+        <div><span v-for="(item, index) in form.groups" :key="item.id">{{index === 0 ? item.name : '、' + item.name}}</span></div>
+      </el-descriptions-item>
     </el-descriptions>
     <customer-form-dialog v-model="dialogVisable" :info="form" @change="getBaseInfo" />
   </div>

src/modules/customer/components/CustomerFormDialog.vue

@@ -34,6 +34,13 @@
       <el-form-item label="所在地区" prop="region" class="form-item-select">
         <app-area v-model="form.region" />
       </el-form-item>
+      <el-form-item label="所属分组" prop="group_ids">
+        <!-- <el-select v-model="form.group_ids" placeholder="请选择院校性质" size="small" style="width: 100%" multiple>
+          <el-option label="公办" :value="1"></el-option>
+          <el-option label="民办" :value="2"></el-option>
+        </el-select> -->
+        <customer-group-select v-model="form.group_ids" multiple/>
+      </el-form-item>
       <el-form-item label="详细地址">
         <el-input v-model="form.address" size="small" placeholder="请输入详细地址" />
       </el-form-item>
@@ -57,9 +64,10 @@
 <script>
 import AppArea from '@/components/base/AppArea.vue'
 import AppUniversityLevel from '@/components/base/AppUniversityLevel/Index.vue'
+import CustomerGroupSelect from '../components/CustomerGroupSelect.vue'
 import { createCustomer, updateCustomer } from '../api'
 export default {
-  components: { AppArea, AppUniversityLevel },
+  components: { AppArea, AppUniversityLevel, CustomerGroupSelect },
   props: {
     value: {
       type: Boolean,
@@ -84,7 +92,8 @@ export default {
         universityLevel: [],
         region: [],
         address: '',
-        remark: ''
+        remark: '',
+        group_ids: []
       },
       rules: {
         name: { required: true, message: '请输入客户名称', trigger: 'blur' },
@@ -105,11 +114,15 @@ export default {
         Object.keys(this.form).forEach(key => {
           this.form[key] = this.info[key]
           if (key === 'region') this.form[key] = this.form[key].split('-')
+          if (key === 'group_ids') {
+            if(Array.isArray(this.info.groups) && this.info.groups.length) this.form[key] = this.info.groups.map(item => item.id)
+          }
           if (key === 'universityLevel') {
             if (parseInt(this.info.college_type)) this.form[key] = [parseInt(this.info.college_type), parseInt(this.info.college_level)]
             else this.form[key] = []
           }
         })
+        console.log(this.form)
       },
       deep: true
     }

src/modules/customer/components/CustomerGroupSelect.vue

+<template>
+  <el-select clearable v-bind="$attrs" v-on="$listeners" placeholder="请选择所属分组" size="small" style="width: 100%" :multiple="multiple">
+    <el-option :label="item.name" :value="item.id" v-for="item in options" :key="item.id"></el-option>
+  </el-select>
+</template>
+<script>
+import { getCustomerGroup } from '../api'
+export default {
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      _props: {},
+      options: []
+    }
+  },
+  created() {
+    this.fetchCustomerGroups()
+  },
+  methods: {
+    fetchCustomerGroups() {
+      getCustomerGroup({ page: 1, limit: 300 }).then(res => {
+        if (res.code ===0) {
+          this.options = res.data.data
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file

src/modules/customer/views/Index.vue

@@ -23,6 +23,9 @@
       <template v-slot:filter-universityLevel="{ params }">
         <app-university-level v-model="params.universityLevel" :props="{ checkStrictly: true }" />
       </template>
+      <template v-slot:filter-customerGroup="{ params }">
+        <customer-group-select v-model="params.group_id" />
+      </template>
       <template v-slot:filter-create-by="{ params }">
         <app-user-search v-model="params.created_by" :options="{ clearable: true }"></app-user-search>
       </template>
@@ -41,6 +44,12 @@
         >
         </el-date-picker>
       </template>
+      <!-- 表格项 -->
+      <template v-slot:table-group="{ row }">
+        <template v-if="Array.isArray(row.groups) && row.groups.length">
+          <span v-for="(item, index) in row.groups" :key="index">{{index === 0 ? item.name : '、' + item.name}}</span>
+        </template>
+      </template>
       <!-- 操作 -->
       <template v-slot:table-operate="{ row }">
         <template>
@@ -58,6 +67,7 @@ import AppUserSearch from '@/components/base/AppUserSearch.vue'
 import AppArea from '@/components/base/AppArea.vue'
 import AppUniversityLevel from '@/components/base/AppUniversityLevel/Index.vue'
 import CustomerFormDialog from '../components/CustomerFormDialog.vue'
+import CustomerGroupSelect from '../components/CustomerGroupSelect.vue'
 // 接口
 import { getCustomerList, deleteCustomer } from '../api'
 
@@ -72,7 +82,7 @@ const natureList = [
   { name: '民办', id: 2 }
 ]
 export default {
-  components: { AppUserSearch, AppArea, AppUniversityLevel, CustomerFormDialog },
+  components: { AppUserSearch, AppArea, AppUniversityLevel, CustomerFormDialog, CustomerGroupSelect },
   data() {
     return {
       staffList: [
@@ -146,7 +156,8 @@ export default {
             create_date: '',
             follow_date: '',
             college_type: '',
-            college_level: ''
+            college_level: '',
+            group_id: ''
           }
         },
         filters: [
@@ -203,7 +214,8 @@ export default {
           },
           { prop: 'project_sso_id', slots: 'filter-project-ssoid', label: '项目负责人：' },
           { prop: 'region', slots: 'filter-region', label: '所在地区：' },
-          { prop: 'universityLevel', slots: 'filter-universityLevel', label: '院校层次：' }
+          { prop: 'universityLevel', slots: 'filter-universityLevel', label: '院校层次：' },
+          { prop: 'group_id', slots: 'filter-customerGroup', label: '所属分组：' }
         ],
         columns: [
           // { type: 'selection', minWidth: '40px' },
@@ -241,6 +253,7 @@ export default {
             }
           },
           { prop: 'region', label: '所在地区', minWidth: '170px' },
+          { prop: 'groups', label: '所属分组', minWidth: '170px', slots: 'table-group' },
           { prop: 'last_record_time', label: '最近跟进时间', minWidth: '150px' },
           { prop: 'project_count', label: '合作项目', minWidth: '80px' },
           { prop: 'contact_count', label: '联系人', minWidth: '80px' },