代码提交

src/modules/customer/api.js

@@ -8,11 +8,15 @@ export function getCustomerList(params) {
 export function createCustomer(data) {
   return httpRequest.post('/api/customer/admin/v1/customer', data)
 }
+// 获取基本信息
+export function getBaseDetail(params) {
+  return httpRequest.get('/api/customer/admin/v1/customer/{id}', { params })
+}
 // 新建联系人
 export function createContact(data) {
   return httpRequest.post('/api/customer/admin/v1/{customer_id}/contact', data)
 }
 // 获取联系人
-export function getContactDetail(params) {
-  return httpRequest.get(`/api/customer/admin/v1/customer/${params.id}`, params)
+export function getContactList(params) {
+  return httpRequest.get(`/api/customer/admin/v1/${params.customer_id}/contacts`, params)
 }

src/modules/customer/components/BaseInfo.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 <script>
-import { getContactDetail } from '../api'
+import { getBaseDetail } from '../api'
 export default {
   props: {
     id: {
@@ -42,7 +42,7 @@ export default {
   methods: {
     getBaseInfo() {
       const params = { id: this.id }
-      getContactDetail(params).then(res => {
+      getBaseDetail(params).then(res => {
         this.form = res.data
       })
     }

src/modules/customer/components/Contact.vue

 <template>
   <div class="base-info">
     <div class="bar">
-      <el-button type="primary" size="small">添加联系人</el-button>
+      <el-button type="primary" size="small" @click="add">添加联系人</el-button>
     </div>
     <app-list v-bind="tableOptions" ref="list">
       <!-- 操作 -->
@@ -11,80 +11,83 @@
           <el-button type="text" @click="handleDelete(row)" size="mini">删除</el-button>
         </template>
       </template>
+      <CreateContact :visible.sync="isShowDialog" :isEdit="isEdit" :data="data" />
     </app-list>
   </div>
 </template>
 <script>
 // 组件
+import CreateContact from './CreateContact.vue'
 import AppList from '@/components/base/AppList.vue'
+import { getContactList } from '../api'
 export default {
-  name: 'Contact',
-  components: { AppList },
+  components: { AppList, CreateContact },
+  data() {
+    return {
+      data: {},
+      isEdit: false,
+      isShowDialog: false
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
   computed: {
     // 列表配置
     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: getContactList,
+          params: {
+            customer_id: this.id,
+            id: '',
+            nameL: '',
+            mobile: ''
           }
-        ],
+        },
         columns: [
-          // { type: 'selection', minWidth: '40px' },
           { prop: 'name', label: '姓名', minWidth: '120px' },
-          { prop: 'post', label: '职位', minWidth: '120px' },
+          { prop: 'position', label: '职位', minWidth: '120px' },
           { prop: 'department', label: '部门', minWidth: '80px' },
-          { prop: 'phone', label: '电话', minWidth: '150px' },
+          { prop: 'mobile', label: '电话', minWidth: '150px' },
           { prop: 'email', label: '邮箱', minWidth: '150px' },
           { prop: 'wechat', label: '微信号', minWidth: '140px' },
-          { prop: 'mobile', label: '附属手机号', minWidth: '140px' },
+          { prop: 'sub_mobile', label: '附属手机号', minWidth: '140px' },
           { prop: 'qq', label: 'QQ号', minWidth: '140px' },
-          { prop: 'creator', label: '创建员工', minWidth: '140px' },
-          { prop: 'created_time', label: '创建时间', minWidth: '140px' },
+          { prop: 'created_by', label: '创建员工', minWidth: '140px' },
+          { prop: 'created_at', label: '创建时间', minWidth: '140px' },
           { label: '操作', minWidth: '140px', slots: 'table-operate' }
         ]
       }
     }
   },
-  data() {
-    return {
-      form: {
-        name: '北京大学继续教育学院',
-        abbr: '北大继教',
-        source: '公司资源',
-        category: '院校类',
-        area: '北京市北京市海淀区',
-        address: '北京市海淀区颐和园路5号',
-        remark: '北京大学怎么怎么样等等'
-      }
-    }
-  },
+
   methods: {
-    handleEdit() {},
+    handleEdit(row) {
+      this.Edit = false
+      this.data = row
+      this.isShowDialog = true
+    },
+    add() {
+      this.Edit = true
+      this.data = {}
+
+      this.isShowDialog = true
+    },
     handleDelete() {}
   }
 }
 </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/components/CreateContact.vue

 <template>
-  <el-dialog v-bind="$attrs" v-on="$listeners" width="30%" 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="name">
         <el-input v-model="form.name" />
@@ -58,19 +58,38 @@ export default {
     data: {
       type: Object,
       default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    title() {
+      return this.isEdit ? '编辑联系人' : '创建联系人'
     }
   },
-
   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)
-        })
+        this.isEdit ? this.edit() : this.create()
+      })
+    },
+    edit() {
+      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)
+      })
+    },
+    create() {
+      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)
       })
     }
   }

src/modules/customer/views/Details.vue

@@ -4,8 +4,8 @@
       <el-tab-pane label="基本信息" name="baseInfo">
         <base-info :id="id" />
       </el-tab-pane>
-      <el-tab-pane label="联系人" name="contacts">
-        <contact />
+      <el-tab-pane label="联系人" name="contacts" lazy>
+        <Contact :id="id" />
       </el-tab-pane>
       <el-tab-pane label="合作项目" name="project">
         <project />