feat:跟进记录调试接口

src/components/base/AppUserSearch.vue

@@ -55,7 +55,7 @@ export default {
       handler: function (nv) {
         this.userId = nv
       },
-      immediate: true,
+      // immediate: true,
       deep: true
     },
     defaultList: {
@@ -68,6 +68,7 @@ export default {
   },
   methods: {
     handleChange() {
+      console.log
       const selectedUser = this.userList.find(item => item.id === this.userId)
       this.$emit('input', this.userId)
       this.$emit('select', selectedUser)

src/modules/customer/api.js

@@ -52,3 +52,15 @@ export function editCooProject(data) {
 export function delCooProject(data) {
   return httpRequest.delete(`/api/customer/admin/v1/project/${data.id}`, data)
 }
+// 获取更进记录列表
+export function getFollowRecordsList(params) {
+  return httpRequest.get(`/api/customer/admin/v1/${params.customer_id}/records`, { params })
+}
+// 新建跟进记录
+export function createFollowRecord(id, data) {
+  return httpRequest.post(`/api/customer/admin/v1/${id}/record`, data)
+}
+// 删除跟进记录
+export function deleteFollowRecord(id) {
+  return httpRequest.delete(`/api/customer/admin/v1/record/${id}`)
+}
\ No newline at end of file

src/modules/customer/components/CreateFollow.vue

 <template>
-  <el-dialog v-bind="$attrs" v-on="$listeners" width="30%" top="40vh" :title="title">
-    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+  <el-dialog :visible="value" :close-on-click-modal="false" :close-on-press-escape="false" top="15vh" @close="handleClose" width="560px" title="创建跟进记录">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-form-item label="跟进员工" prop="staff">
-        <el-select v-model="form.source" placeholder="请选择跟进员工" size="small" style="width: 100%">
-          <el-option label="产业学院" :value="1"></el-option>
-        </el-select>
+        <app-user-search v-model="form.staff"></app-user-search>
       </el-form-item>
       <el-form-item label="跟进时间" prop="follow_up_date">
-        <el-input v-model="form.follow_up_date" />
+        <!-- <el-input v-model="form.follow_up_date" /> -->
+        <el-date-picker
+          v-model="form.follow_up_date"
+          type="datetime"
+          placeholder="请选择跟进时间"
+          size="small"
+        >
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="联系人" prop="contact_id">
-        <el-select v-model="form.contact_id" placeholder="请选择负责人(可多选)" size="small" style="width: 100%">
-          <el-option label="公司资源" :value="1"></el-option>
-          <el-option label="自己开拓" :value="2"></el-option>
-          <el-option label="第三方介绍" :value="3"></el-option>
+        <el-select v-model="form.contact_id" placeholder="请选择联系人" size="small" style="width: 100%">
+          <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in contactList"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="跟进项目" prop="project_id">
-        <el-select v-model="form.project_id" placeholder="请选择合作意向度" size="small" style="width: 100%">
-          <el-option label="1" :value="1"></el-option>
-          <el-option label="2" :value="2"></el-option>
+        <el-select v-model="form.project_id" placeholder="请选择跟进项目" size="small" style="width: 100%">
+          <el-option :label="item.tag === 1 ? '产业学院':'1+X'" :value="item.id" :key="item.id" v-for="item in projectList"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="跟进方式" prop="communication_mode">
-        <el-select v-model="form.communication_mode" placeholder="请选择合作意向度" size="small" style="width: 100%">
-          <el-option label="1" :value="1"></el-option>
-          <el-option label="2" :value="2"></el-option>
+        <el-select v-model="form.communication_mode" placeholder="请选择跟进方式" size="small" style="width: 100%">
+          <el-option label="上门拜访" :value="1"></el-option>
+          <el-option label="电话" :value="2"></el-option>
+          <el-option label="短信" :value="2"></el-option>
+          <el-option label="微信" :value="2"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="下次联络时间" prop="next_contact_time">
-        <el-input v-model="form.next_contact_time" placeholder="请选择合作意向度" size="small" style="width: 100%" />
+        <el-date-picker
+          v-model="form.next_contact_time"
+          type="datetime"
+          placeholder="请选择下次联络时间"
+          size="small"
+        >
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="当前项目进展" prop="project_status">
         <el-select v-model="form.project_status" placeholder="请选择当前项目进展" size="small" style="width: 100%">
@@ -42,19 +52,21 @@
         </el-select>
       </el-form-item>
       <el-form-item label="跟进记录" prop="desc">
-        <el-input v-model="form.desc" />
+        <el-input v-model="form.desc" type="textarea" size="small" rows="4" placeholder="请输入跟进记录" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" style="margin-left: 20px" @click="submit">提交</el-button>
-        <el-button @click="$emit('update:visible', false)" style="margin-left: 50px">取消</el-button>
+        <el-button @click="handleCancle" style="margin-left: 50px">取消</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>
 </template>
 
 <script>
-import { createContact } from '../api'
+import AppUserSearch from '@/components/base/AppUserSearch.vue'
+import { createFollowRecord, getCoopList, getContactList } from '../api'
 export default {
+  components: { AppUserSearch },
   data() {
     return {
       form: {
@@ -68,33 +80,76 @@ export default {
         project_status: ''
       },
       rules: {
-        staff: [{ required: true, message: '', trigger: 'blur' }],
-        follow_up_date: [{ required: true, message: '', trigger: 'blur' }],
-        contact_id: [{ required: true, message: '', trigger: 'blur' }],
-        communication_mode: [{ required: true, message: '', trigger: 'blur' }],
-        cooperation_intention: [{ required: true, message: '', trigger: 'blur' }],
-        desc: [{ required: true, message: '', trigger: 'blur' }],
-        project_status: [{ required: true, message: '', trigger: 'blur' }]
-      }
+        staff: [{ required: true, message: '请选择跟进员工', trigger: '' }],
+        follow_up_date: [{ required: true, message: '请选择跟进时间', trigger: 'change' }],
+        contact_id: [{ required: true, message: '请选择联系人', trigger: 'change' }],
+        communication_mode: [{ required: true, message: '请选择跟进方式', trigger: 'changge' }],
+        desc: [{ required: true, message: '请输入跟进记录', trigger: 'blur' }],
+        project_status: [{ required: true, message: '请选择当前项目进展', trigger: 'blur' }]
+      },
+      projectList: [],
+      contactList: []
     }
   },
   props: {
-    data: {
-      type: Object,
-      default: () => ({})
+    value: {
+      type: Boolean,
+      default: false
     }
   },
-
+  computed: {
+    customerId() {
+      return this.$route.query.id
+    }
+  },
+  watch: {
+    value(val) {
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate()
+      })
+    }
+  },
+  created() {
+    this.fetchProjectList()
+    this.fetchContactList()
+  },
   methods: {
     // 提交
     submit() {
       this.$refs.form.validate().then(() => {
-        const params = Object.assign({ group_id: this.id }, this.form)
-        createContact(params).then(res => {
-          this.$message.success('新建联系人成功')
-          this.$emit('update:visible', false)
-          this.$emit('success', res.data)
+        const params = Object.assign({}, this.form)
+        for (const key in params) {
+          if (params[key] === '' || params[key] === null || params[key] === undefined) {
+            delete params[key]
+          }
+        }
+        createFollowRecord(this.customerId, params).then(res => {
+          this.$message.success('新建跟进记录成功')
+          this.$emit('input', false)
+          this.$emit('success')
+        })
+      })
+    },
+    handleCancle() {
+      this.$refs.form.clearValidate()
+      this.$emit('input', false)
+    },
+    handleClose() {
+      this.type = ''
+      this.$emit('input', false)
+    },
+    fetchProjectList() {
+      getCoopList({ page: 1, limit: 1000, customer_id: this.customerId }).then(res => {
+        if (res.code === 0) {
+          this.projectList = res.data.data
+        }
       })
+    },
+    fetchContactList() {
+      getContactList({ page: 1, limit: 1000, customer_id: this.customerId }).then(res => {
+        if (res.code === 0) {
+          this.contactList = res.data.data
+        }
       })
     }
   }
@@ -115,11 +170,7 @@ export default {
 ::v-deep .el-dialog__body {
   padding: 0 20px 20px;
 }
-::v-deep .form-item-select {
-  display: inline-block;
-  width: calc(50% - 10px);
-}
-::v-deep .el-cascader {
+::v-deep .el-date-editor {
   width: 100%;
 }
 </style>

src/modules/customer/components/CustomerFormDialog.vue

@@ -5,7 +5,7 @@
     :visible="value"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    top="50px"
+    top="15vh"
     @close="handleClose"
   >
     <!-- <div slot="title">
@@ -148,11 +148,6 @@ export default {
 }
 </script>
 <style scoped>
-::v-deep .case-dialog {
-  width: 95%;
-  max-width: 1160px;
-  margin-bottom: 20px;
-}
 ::v-deep .el-dialog__header {
   padding: 12px 20px 20px;
 }

src/modules/customer/components/FollowRemark.vue

 <template>
   <div class="base-info">
     <div class="bar">
-      <el-button type="primary" size="small">添加跟进记录</el-button>
+      <el-button type="primary" size="small" @click="dialogVisible = true">添加跟进记录</el-button>
     </div>
     <app-list v-bind="tableOptions" ref="list">
       <!-- 操作 -->
       <template v-slot:table-operate="{ row }">
         <template>
-          <el-button type="text" @click="handleEdit(row)" size="mini">编辑</el-button>
+          <!-- <el-button type="text" @click="handleEdit(row)" size="mini">编辑</el-button> -->
           <el-button type="text" @click="handleDelete(row)" size="mini">删除</el-button>
         </template>
       </template>
     </app-list>
+    <create-follow v-model="dialogVisible" v-if="dialogVisible" @success="handleRefetchList"/>
   </div>
 </template>
 <script>
 // 组件
 import AppList from '@/components/base/AppList.vue'
+import CreateFollow from './CreateFollow.vue'
+import { getFollowRecordsList, deleteFollowRecord } from '../api'
+const communicationModeMap = {
+  1: '上门拜访',
+  2: '电话',
+  3: '短信',
+  4: '微信'
+}
 export default {
   name: 'Contact',
-  components: { AppList },
+  components: { AppList, CreateFollow },
   computed: {
+    customerId() {
+      return this.$route.query.id
+    },
     // 列表配置
     tableOptions() {
       return {
-        // remote: {
-        //   httpRequest: getRoleList,
-        //   params: { },
-        // },
-        data: [
-          {
-            name: '李老师',
-            post: '校长',
-            department: '综合管理部',
-            phone: '13500010002',
-            email: 'seraphim1230@sina.com',
-            wechat: 'wfewfwefwef',
-            mobile: '13500030004',
-            qq: '379628069',
-            creator: '单小楠',
-            created_time: '2021-12-12 12:12'
+        remote: {
+          httpRequest: getFollowRecordsList,
+          params: {
+            customer_id: this.customerId
           }
-        ],
+        },
         columns: [
           // { type: 'selection', minWidth: '40px' },
-          { prop: 'name', label: '姓名', minWidth: '120px' },
-          { prop: 'post', label: '职位', minWidth: '120px' },
-          { prop: 'department', label: '部门', minWidth: '80px' },
-          { prop: 'phone', label: '电话', minWidth: '150px' },
-          { prop: 'email', label: '邮箱', minWidth: '150px' },
-          { prop: 'wechat', label: '微信号', minWidth: '140px' },
-          { prop: 'mobile', label: '附属手机号', minWidth: '140px' },
-          { prop: 'qq', label: 'QQ号', minWidth: '140px' },
-          { prop: 'creator', label: '创建员工', minWidth: '140px' },
-          { prop: 'created_time', label: '创建时间', minWidth: '140px' },
+          {
+            prop: 'staff',
+            label: '跟进员工',
+            minWidth: '100px',
+            computed({ row }) {
+              return row.staff.realname || row.staff.nickname
+            }
+          },
+          // { prop: 'project.tag', label: '跟进项目', minWidth: '120px' },
+          {
+            prop: 'project.tag',
+            label: '跟进项目',
+            minWidth: '120px',
+            computed({ row }) {
+              return row.project.tag === 1 ? '产业学院' : '1+x'
+            }
+          },
+          { prop: 'contact.name', label: '联系人', minWidth: '80px' },
+          { prop: 'follow_up_date', label: '跟进时间', minWidth: '150px' },
+          { prop: 'next_contact_time', label: '下次联络时间', minWidth: '150px' },
+          // { prop: 'communication_mode', label: '跟进方式', minWidth: '140px' },
+          {
+            prop: 'communication_mode',
+            label: '跟进方式',
+            minWidth: '120px',
+            computed({ row }) {
+              return communicationModeMap[row.communication_mode]
+            }
+          },
+          {
+            prop: 'created_by',
+            label: '创建人',
+            minWidth: '100px',
+            computed({ row }) {
+              return row.created_by.realname || row.created_by.nickname
+            }
+          },
+          { prop: 'created_at', label: '创建时间', minWidth: '140px' },
+          { prop: 'desc', label: '跟进记录', minWidth: '140px' },
           { label: '操作', minWidth: '140px', slots: 'table-operate' }
         ]
       }
@@ -61,20 +90,39 @@ export default {
   },
   data() {
     return {
-      form: {
-        name: '北京大学继续教育学院',
-        abbr: '北大继教',
-        source: '公司资源',
-        category: '院校类',
-        area: '北京市北京市海淀区',
-        address: '北京市海淀区颐和园路5号',
-        remark: '北京大学怎么怎么样等等'
-      }
+      selectedInfo: {},
+      dialogVisible: false
     }
   },
   methods: {
+    handleAdd() {},
     handleEdit() {},
-    handleDelete() {}
+    handleDelete(data) {
+      this.$confirm('删除客户请谨慎操作，确定删除？', '删除客户', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.fetchDelete(data)
+        })
+        .catch(() => {})
+    },
+    fetchDelete(data) {
+      deleteFollowRecord(data.id).then(res => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.$message.success('删除跟进记录成功')
+          this.handleRefetchList()
+        } else {
+          this.$message.error('删除跟进记录失败')
+        }
+      }).catch(() => {
+        this.$message.error('删除跟进记录失败')
+      })
+    },
+    handleRefetchList() {
+      this.$refs.list.refetch()
+    }
   }
 }
 </script>

src/modules/customer/views/Index.vue

@@ -41,7 +41,7 @@
         </template>
       </template>
     </app-list>
-    <customer-form-dialog v-model="dialogVisable" @change="refetchList" />
+    <customer-form-dialog v-model="dialogVisible" @change="refetchList" />
   </app-card>
 </template>
 
@@ -90,7 +90,7 @@ export default {
         { name: '已合作', id: 5 },
         { name: '已失效', id: 6 }
       ],
-      dialogVisable: false
+      dialogVisible: false
     }
   },
   computed: {