Skip to content

C
customer-admin
提交 504f6cb1 authored 作者: matian's avatar matian
浏览文件
操作

feat:合作项目增加接口

上级 a4ccd0e4
显示空白字符变更
内嵌 并排
正在显示 包含 222 行增加 和 127 行删除
src/components/base/AppList.vue
浏览文件 @ 504f6cb1
......@@ -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
浏览文件 @ 504f6cb1
<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>
src/modules/customer/api.js
浏览文件 @ 504f6cb1
......@@ -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
浏览文件 @ 504f6cb1
......@@ -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
浏览文件 @ 504f6cb1
......@@ -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
浏览文件 @ 504f6cb1
......@@ -2,7 +2,7 @@
<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.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
浏览文件 @ 504f6cb1
<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,7 +113,8 @@ export default {
fetchCreateCustomer() {
const params = Object.assign({}, this.form)
params.region = this.form.region.join('-')
createCustomer(params).then(res => {
createCustomer(params)
.then(res => {
if (res.code === 0 && res.data && res.data.id) {
this.$message.success('创建客户成功')
this.$emit('input', false)
......@@ -113,14 +122,16 @@ export default {
} else {
this.$message.error('创建客户失败')
}
}).catch(() => {
})
.catch(() => {
this.$message.error('创建客户失败')
})
},
fetchUpdateCustomer() {
const params = Object.assign({}, this.form)
params.region = this.form.region.join('-')
updateCustomer(this.info.id, params).then(res => {
updateCustomer(this.info.id, params)
.then(res => {
if (res.code === 0 && res.data && res.data.status) {
this.$message.success('更新客户成功')
this.$emit('input', false)
......@@ -128,7 +139,8 @@ export default {
} else {
this.$message.error('更新客户失败')
}
}).catch(() => {
})
.catch(() => {
this.$message.error('更新客户失败')
})
}
......@@ -136,25 +148,25 @@ export default {
}
</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
浏览文件 @ 504f6cb1
<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: {
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()
}
})
}
},
methods: {
handleEdit() {},
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/views/Details.vue
浏览文件 @ 504f6cb1
......@@ -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
浏览文件 @ 504f6cb1
......@@ -279,21 +279,25 @@ export default {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
})
.then(() => {
this.fetchRemove(data)
}).catch(() => {})
})
.catch(() => {})
},
// 删除请求
fetchRemove(data) {
console.log(data)
deleteCustomer(data.id).then(res => {
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 => {
})
.catch(err => {
this.$message.error('删除用户失败')
})
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论