feat:合作项目增加接口

src/components/base/AppList.vue

@@ -38,9 +38,9 @@
         </el-form>
         <div class="filter-bar">
           <div class="filte-bar-left-btns">
-            <template  v-if="searchResetSeparateLine">
-              <el-button type="primary" icon="el-icon-search"  size="small" @click="search">搜索</el-button>
-              <el-button icon="el-icon-refresh-left"  size="small" @click="reset">重置</el-button>
+            <template v-if="searchResetSeparateLine">
+              <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
+              <el-button icon="el-icon-refresh-left" size="small" @click="reset">重置</el-button>
             </template>
           </div>
           <div class="filter-bar-right">
@@ -53,13 +53,7 @@
     <slot></slot>
     <div class="table-list-bd">
       <slot name="body" v-bind="{ data: dataList }">
-        <el-table
-          :data="dataList"
-          v-loading="loading"
-          v-bind="$attrs"
-          v-on="$listeners"
-          ref="table"
-        >
+        <el-table :data="dataList" v-loading="loading" v-bind="$attrs" v-on="$listeners" ref="table">
           <template v-for="item in columns">
             <el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
               <template v-slot:default="scope" v-if="item.slots || item.computed">
@@ -99,7 +93,7 @@ export default {
     remote: { type: Object, default: () => ({}) },
     // 筛选
     filters: { type: Array, default: () => [] },
-    searchResetSeparateLine: { type: Boolean, default: false},
+    searchResetSeparateLine: { type: Boolean, default: false },
     // 列表项
     columns: { type: Array, default: () => [] },
     // 列表数据
@@ -225,15 +219,15 @@ export default {
 .table-list-filter {
   flex: 1;
 }
-.filter-bar{
-  display:flex;
-  margin-bottom:15px;
+.filter-bar {
+  display: flex;
+  margin-bottom: 15px;
 }
-.filte-bar-left-btns{
+.filte-bar-left-btns {
   flex: 1;
 }
-.el-form--inline .el-form-item{
-  margin-right:30px;
+.el-form--inline .el-form-item {
+  margin-right: 30px;
 }
 .table-list-bd {
   flex: 1;

src/components/base/AppUserSearch.vue

 <template>
-  <el-select v-model="userId" v-bind="options" placeholder="输入邮箱/手机号码搜索" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" @change="handleChange">
-    <el-option :label="user.realname || user.nickname " :value="user.id" v-for="user in userList" :key="user.id" >
+  <el-select
+    v-model="userId"
+    v-bind="options"
+    placeholder="输入邮箱/手机号码搜索"
+    filterable
+    remote
+    :remote-method="fetchUserList"
+    :loading="searchUsersloading"
+    @change="handleChange"
+    multiple
+  >
+    <el-option :label="user.realname || user.nickname" :value="user.id" v-for="user in userList" :key="user.id">
       <span style="float: left">
         {{ user.realname || user.nickname }}
-        <template v-if="user.mobile">(手机号：{{user.mobile}})</template>
+        <template v-if="user.mobile">(手机号：{{ user.mobile }})</template>
       </span>
-      <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-if="user.email">邮箱：{{ user.email }}</span>
-      <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;" v-else>ID：{{ user.id }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px; margin: 0 20px 0 10px" v-if="user.email"
+        >邮箱：{{ user.email }}</span
+      >
+      <span style="float: right; color: #8492a6; font-size: 13px; margin: 0 20px 0 10px" v-else>ID：{{ user.id }}</span>
     </el-option>
   </el-select>
 </template>
@@ -88,7 +100,7 @@ export default {
 }
 </script>
 <style scoped>
-.el-select{
-  width:100%;
+.el-select {
+  width: 100%;
 }
-</style>
+</style>
\ No newline at end of file

src/modules/customer/api.js

@@ -32,3 +32,23 @@ export function getContactList(params) {
 export function UpdateContact(data) {
   return httpRequest.put(`/api/customer/admin/v1/contact/${data.id}`, data)
 }
+// 删除联系人
+export function delContact(data) {
+  return httpRequest.delete(`/api/customer/admin/v1/contact/${data.id}`, data)
+}
+// 获取合作项目
+export function getCoopList(params) {
+  return httpRequest.get(`/api/customer/admin/v1/${params.customer_id}/projects`, params)
+}
+// 创建合作项目
+export function createCooProject(data) {
+  return httpRequest.post(`/api/customer/admin/v1/${data.customer_id}/project`, data)
+}
+// 编辑合作项目
+export function editCooProject(data) {
+  return httpRequest.put(`/api/customer/admin/v1/project/${data.id}`, data)
+}
+// 删除合作项目
+export function delCooProject(data) {
+  return httpRequest.delete(`/api/customer/admin/v1/project/${data.id}`, data)
+}

src/modules/customer/components/Contact.vue

@@ -26,7 +26,7 @@
 // 组件
 import CreateContact from './CreateContact.vue'
 import AppList from '@/components/base/AppList.vue'
-import { getContactList } from '../api'
+import { getContactList, delContact } from '../api'
 export default {
   components: { AppList, CreateContact },
   data() {
@@ -77,16 +77,23 @@ export default {
     },
 
     handleEdit(row) {
-      this.Edit = false
+      this.isEdit = true
       this.row = row
       this.isShowDialog = true
     },
     handleAdd() {
-      this.Edit = true
+      this.isEdit = false
       this.row = {}
       this.isShowDialog = true
     },
-    handleDelete() {}
+    handleDelete(row) {
+      delContact({ id: row.id }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('删除成功')
+          this.success()
+        }
+      })
+    }
   }
 }
 </script>

src/modules/customer/components/CreateContact.vue

@@ -85,8 +85,8 @@ export default {
         this.isEdit ? this.edit() : this.create()
       })
     },
-    edit(row) {
-      const params = Object.assign({ id: row.id }, this.form)
+    edit() {
+      const params = Object.assign({ id: this.row.id }, this.form)
       UpdateContact(params).then(res => {
         this.$message.success('新建联系人成功')
         this.$emit('update:visible', false)

src/modules/customer/components/CreateCoopProject.vue

 <template>
-  <el-dialog v-bind="$attrs" v-on="$listeners"  top="40vh" :title="title">
+  <el-dialog v-bind="$attrs" v-on="$listeners" top="40vh" :title="title">
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form-item label="项目" prop="tag">
-        <el-select v-model="form.source" placeholder="请选择项目" size="small" style="width: 100%">
+        <el-select v-model="form.tag" placeholder="请选择项目" size="small" style="width: 100%">
           <el-option label="产业学院" :value="1"></el-option>
           <el-option label="1+X" :value="2"></el-option>
         </el-select>
@@ -18,11 +18,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="负责人" prop="project_sso_ids">
-        <el-select v-model="form.project_sso_ids" 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>
+        <app-user-search v-model="form.project_sso_ids"></app-user-search>
       </el-form-item>
       <el-form-item label="合作意向" prop="cooperation_intention">
         <el-select v-model="form.cooperation_intention" placeholder="请选择合作意向度" size="small" style="width: 100%">
@@ -39,7 +35,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="form.remark" />
+        <el-input type="textarea" v-model="form.remark" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" style="margin-left: 20px" @click="submit">提交</el-button>
@@ -50,8 +46,11 @@
 </template>
 
 <script>
-import { createContact } from '../api'
+import AppUserSearch from '@/components/base/AppUserSearch.vue'
+
+import { createCooProject, editCooProject } from '../api'
 export default {
+  components: { AppUserSearch },
   data() {
     return {
       form: {
@@ -59,20 +58,40 @@ export default {
         status: '',
         cooperation_intention: '',
         remark: '',
-        project_sso_ids: ''
+        project_sso_ids: []
       },
       rules: {
-        tag: [{ required: true, message: '', trigger: 'blur' }],
-        status: [{ required: true, message: '', trigger: 'blur' }],
-        project_sso_ids: [{ required: true, message: '', trigger: 'blur' }],
-        cooperation_intention: [{ required: true, message: '', trigger: 'blur' }]
+        tag: [{ required: true, message: '', trigger: 'change' }],
+        status: [{ required: true, message: '', trigger: 'change' }],
+        cooperation_intention: [{ required: true, message: '', trigger: 'change' }]
       }
     }
   },
   props: {
-    data: {
+    id: {
+      type: String,
+      default: ''
+    },
+    row: {
       type: Object,
       default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    row: {
+      immediate: true,
+      handler(row) {
+        this.form = Object.assign({}, this.form, row)
+      }
+    }
+  },
+  computed: {
+    title() {
+      return this.isEdit ? '编辑合作项目' : '创建合作项目'
     }
   },
 
@@ -80,12 +99,23 @@ export default {
     // 提交
     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)
-        })
+        this.isEdit ? this.edit() : this.create()
+      })
+    },
+    create() {
+      const params = Object.assign({ customer_id: this.id }, this.form)
+      createCooProject(params).then(res => {
+        this.$message.success('新建合作项目成功')
+        this.$emit('update:visible', false)
+        this.$emit('success', res.data)
+      })
+    },
+    edit() {
+      const params = Object.assign({ id: this.row.id }, this.form)
+      editCooProject(params).then(res => {
+        this.$message.success('更新合作项目成功')
+        this.$emit('update:visible', false)
+        this.$emit('success', res.data)
       })
     }
   }

src/modules/customer/components/CustomerFormDialog.vue

 <template>
-  <el-dialog custom-class="create-custom-dialog" :title="info.id ? '更新客户信息' : '创建客户'" :visible="value" :close-on-click-modal="false" :close-on-press-escape="false" top="50px" @close="handleClose">
+  <el-dialog
+    custom-class="create-custom-dialog"
+    :title="info.id ? '更新客户信息' : '创建客户'"
+    :visible="value"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    top="50px"
+    @close="handleClose"
+  >
     <!-- <div slot="title">
     </div> -->
     <el-form :model="form" :rules="rules" ref="ruleForm" label-width="90px">
       <el-form-item label="客户名称" prop="name">
-        <el-input v-model="form.name" size="small" placeholder="请输入客户名称"/>
+        <el-input v-model="form.name" size="small" placeholder="请输入客户名称" />
       </el-form-item>
       <el-form-item label="客户简称">
-        <el-input v-model="form.short_name" size="small" placeholder="请输入客户简称"/>
+        <el-input v-model="form.short_name" size="small" placeholder="请输入客户简称" />
       </el-form-item>
-      <el-form-item label="客户来源" prop="source" class="form-item-select" style="margin-right:20px;">
-        <el-select v-model="form.source" placeholder="请选择客户来源" size="small" style="width:100%;">
+      <el-form-item label="客户来源" prop="source" class="form-item-select" style="margin-right: 20px">
+        <el-select v-model="form.source" 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>
       </el-form-item>
       <el-form-item label="客户分类" prop="type" class="form-item-select">
-        <el-select v-model="form.type" placeholder="请选择客户分类" size="small" style="width:100%;">
+        <el-select v-model="form.type" placeholder="请选择客户分类" size="small" style="width: 100%">
           <el-option label="普通客户" :value="1"></el-option>
           <el-option label="重点客户" :value="2"></el-option>
         </el-select>
@@ -26,10 +34,10 @@
         <app-area v-model="form.region" />
       </el-form-item>
       <el-form-item label="详细地址">
-        <el-input v-model="form.address" size="small" placeholder="请输入详细地址"/>
+        <el-input v-model="form.address" size="small" placeholder="请输入详细地址" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="form.remark" type="textarea" size="small" rows="4" placeholder="请输入备注"/>
+        <el-input v-model="form.remark" type="textarea" size="small" rows="4" placeholder="请输入备注" />
       </el-form-item>
       <el-form-item>
         <el-button size="mini" @click="$emit('dialogClose')">取消</el-button>
@@ -50,7 +58,7 @@ export default {
     },
     info: {
       type: Object,
-      default:() => {
+      default: () => {
         return {}
       }
     }
@@ -96,7 +104,7 @@ export default {
       this.$emit('input', false)
     },
     handleSubmit() {
-      this.$refs.ruleForm.validate((valid) => {
+      this.$refs.ruleForm.validate(valid => {
         if (valid) {
           this.info.id ? this.fetchUpdateCustomer() : this.fetchCreateCustomer()
         }
@@ -105,56 +113,60 @@ export default {
     fetchCreateCustomer() {
       const params = Object.assign({}, this.form)
       params.region = this.form.region.join('-')
-      createCustomer(params).then(res => {
-        if (res.code === 0 && res.data && res.data.id) {
-          this.$message.success('创建客户成功')
-          this.$emit('input', false)
-          this.$emit('change')
-        } else {
+      createCustomer(params)
+        .then(res => {
+          if (res.code === 0 && res.data && res.data.id) {
+            this.$message.success('创建客户成功')
+            this.$emit('input', false)
+            this.$emit('change')
+          } else {
+            this.$message.error('创建客户失败')
+          }
+        })
+        .catch(() => {
           this.$message.error('创建客户失败')
-        }
-      }).catch(() => {
-        this.$message.error('创建客户失败')
-      })
+        })
     },
     fetchUpdateCustomer() {
       const params = Object.assign({}, this.form)
       params.region = this.form.region.join('-')
-      updateCustomer(this.info.id, params).then(res => {
-        if (res.code === 0 && res.data && res.data.status) {
-          this.$message.success('更新客户成功')
-          this.$emit('input', false)
-          this.$emit('change')
-        } else {
+      updateCustomer(this.info.id, params)
+        .then(res => {
+          if (res.code === 0 && res.data && res.data.status) {
+            this.$message.success('更新客户成功')
+            this.$emit('input', false)
+            this.$emit('change')
+          } else {
+            this.$message.error('更新客户失败')
+          }
+        })
+        .catch(() => {
           this.$message.error('更新客户失败')
-        }
-      }).catch(() => {
-        this.$message.error('更新客户失败')
-      })
+        })
     }
   }
 }
 </script>
 <style scoped>
-::v-deep .case-dialog{
-  width:95%;
-  max-width:1160px;
-  margin-bottom:20px;
+::v-deep .case-dialog {
+  width: 95%;
+  max-width: 1160px;
+  margin-bottom: 20px;
 }
-::v-deep .el-dialog__header{
-  padding:12px 20px 20px;
+::v-deep .el-dialog__header {
+  padding: 12px 20px 20px;
 }
-::v-deep .el-dialog__headerbtn{
-  top:12px;
+::v-deep .el-dialog__headerbtn {
+  top: 12px;
 }
-::v-deep .el-dialog__body{
-  padding:0 20px 20px;
+::v-deep .el-dialog__body {
+  padding: 0 20px 20px;
 }
-::v-deep .form-item-select{
+::v-deep .form-item-select {
   display: inline-block;
-  width:calc(50% - 10px);
+  width: calc(50% - 10px);
 }
-::v-deep .el-cascader{
-  width:100%;
+::v-deep .el-cascader {
+  width: 100%;
 }
 </style>

src/modules/customer/components/Project.vue

 <template>
   <div class="base-info">
     <div class="bar">
-      <el-button type="primary" size="small">添加合作项目</el-button>
+      <el-button type="primary" size="small" @click="handleAdd">添加合作项目</el-button>
     </div>
     <app-list v-bind="tableOptions" ref="list">
       <!-- 操作 -->
@@ -11,78 +11,94 @@
           <el-button type="text" @click="handleDelete(row)" size="mini">删除</el-button>
         </template>
       </template>
+      <CreateCoopProject
+        :visible.sync="isShowDialog"
+        @success="success"
+        :row="row"
+        :isEdit="isEdit"
+        v-if="isShowDialog"
+        :id="id"
+      />
     </app-list>
   </div>
 </template>
 <script>
 // 组件
-import AppList from '@/components/base/AppList.vue'
+import CreateCoopProject from '../components/CreateCoopProject.vue'
+import { getCoopList, delCooProject } from '../api'
 export default {
   name: 'Contact',
-  components: { AppList },
+  components: { CreateCoopProject },
+  data() {
+    return {
+      isShowDialog: false,
+      isEdit: false,
+      row: {}
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
   computed: {
     // 列表配置
     tableOptions() {
       return {
-        // remote: {
-        //   httpRequest: getRoleList,
-        //   params: { },
-        // },
-        data: [
-          {
-            name: '员工A',
-            contact: '产业学院',
-            contact: '联系人A',
-            time: '2021-12-12 12:12',
-            contact_time: '2021-12-20 12:12',
-            way: '上门拜访',
-            creator: '员工A',
-            created_time: '2021-12-12 12:12',
-            remark: '1234334'
+        remote: {
+          httpRequest: getCoopList,
+          params: {
+            customer_id: this.id,
+            id: ''
           }
-        ],
+        },
         columns: [
-          // { type: 'selection', minWidth: '40px' },
-          { prop: 'name', label: '项目', minWidth: '120px' },
-          { prop: 'project', label: '跟进项目', minWidth: '120px' },
-          { prop: 'contact', label: '联系人', minWidth: '120px' },
-          { prop: 'time', label: '更进时间', minWidth: '120px' },
-          { prop: 'contact_time', label: '下次联络时间', minWidth: '150px' },
-          { prop: 'way', label: '跟进方式', minWidth: '150px' },
-          { prop: 'creator', label: '创建人', minWidth: '100px' },
-          { prop: 'created_time', label: '创建时间', minWidth: '120px' },
-          { prop: 'remark', label: '更进记录', minWidth: '140px' },
+          { type: 'index', label: '序号' },
+          { prop: 'tag', label: '项目', minWidth: '120px' },
+          { prop: 'charge_persons.username', label: '负责人', minWidth: '120px' },
+          { prop: 'status', label: '项目进度', minWidth: '120px' },
+          { prop: 'cooperation_intention', label: '合作意向', minWidth: '120px' },
+          { prop: 'created_by.username', label: '创建人', minWidth: '100px' },
+          { prop: 'created_at', label: '创建时间', minWidth: '120px' },
+          { prop: 'remark', label: '备注', minWidth: '140px' },
           { label: '操作', minWidth: '140px', slots: 'table-operate' }
         ]
       }
     }
   },
-  data() {
-    return {
-      form: {
-        name: '北京大学继续教育学院',
-        abbr: '北大继教',
-        source: '公司资源',
-        category: '院校类',
-        area: '北京市北京市海淀区',
-        address: '北京市海淀区颐和园路5号',
-        remark: '北京大学怎么怎么样等等'
-      }
-    }
-  },
   methods: {
-    handleEdit() {},
-    handleDelete() {}
+    success() {
+      this.$refs.list.refetch()
+    },
+    handleAdd() {
+      this.row = {}
+      this.isEdit = false
+      this.isShowDialog = true
+    },
+    handleEdit(row) {
+      this.row = row
+      this.isEdit = true
+      this.isShowDialog = true
+    },
+    handleDelete(row) {
+      delCooProject({ id: row.id }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('删除成功')
+          this.success()
+        }
+      })
+    }
   }
 }
 </script>
 <style scoped>
-.bar{
-  padding-bottom:10px;
+.bar {
+  padding-bottom: 10px;
 }
-.item{
-  font-size:16px;
-  line-height:48px;
-  color:#494949;
+.item {
+  font-size: 16px;
+  line-height: 48px;
+  color: #494949;
 }
 </style>

src/modules/customer/views/Details.vue

@@ -7,8 +7,8 @@
       <el-tab-pane label="联系人" name="contacts" lazy>
         <Contact :id="id" />
       </el-tab-pane>
-      <el-tab-pane label="合作项目" name="project">
-        <project />
+      <el-tab-pane label="合作项目" name="project" lazy>
+        <Project :id="id" />
       </el-tab-pane>
       <el-tab-pane label="跟进记录" name="followRecord">
         <follow-remark />

src/modules/customer/views/Index.vue

@@ -279,23 +279,27 @@ export default {
         confirmButtonText: '删除',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        this.fetchRemove(data)
-      }).catch(() => {})
+      })
+        .then(() => {
+          this.fetchRemove(data)
+        })
+        .catch(() => {})
     },
     // 删除请求
     fetchRemove(data) {
       console.log(data)
-      deleteCustomer(data.id).then(res => {
-        if (res.code === 0 && res.data && res.data.status) {
-          this.$message.success('删除用户成功')
-          this.refetchList()
-        } else {
+      deleteCustomer(data.id)
+        .then(res => {
+          if (res.code === 0 && res.data && res.data.status) {
+            this.$message.success('删除用户成功')
+            this.refetchList()
+          } else {
+            this.$message.error('删除用户失败')
+          }
+        })
+        .catch(err => {
           this.$message.error('删除用户失败')
-        }
-      }).catch(err => {
-        this.$message.error('删除用户失败')
-      })
+        })
     },
     refetchList() {
       this.$refs.list.refetch()