提交 5f863494 authored 作者: matian's avatar matian

代码提交

上级 4fc50246
...@@ -4,7 +4,15 @@ import httpRequest from '@/utils/axios' ...@@ -4,7 +4,15 @@ import httpRequest from '@/utils/axios'
export function getCustomerList(params) { export function getCustomerList(params) {
return httpRequest.get('/api/customer/admin/v1/customers', { params }) return httpRequest.get('/api/customer/admin/v1/customers', { params })
} }
// 新建客户 // 新建客户
export function createCustomer(data) { export function createCustomer(data) {
return httpRequest.post('/api/customer/admin/v1/customer', data) return httpRequest.post('/api/customer/admin/v1/customer', data)
} }
// 新建联系人
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)
}
...@@ -4,55 +4,58 @@ ...@@ -4,55 +4,58 @@
<el-button type="primary" size="small">更 新</el-button> <el-button type="primary" size="small">更 新</el-button>
</div> </div>
<div class="info"> <div class="info">
<div class="item"> <div class="item"><label>客户名称:</label>{{ form.name }}</div>
<label>客户名称:</label>{{form.name}} <div class="item"><label>客户简称:</label>{{ form.short_name }}</div>
</div> <div class="item"><label>客户来源:</label>{{ form.source }}</div>
<div class="item"> <div class="item"><label>客户分类:</label>{{ form.type }}</div>
<label>客户简称:</label>{{form.abbr}} <div class="item"><label>所在地区:</label>{{ form.region }}</div>
</div> <div class="item"><label>详细地址:</label>{{ form.address }}</div>
<div class="item"> <div class="item"><label>备注:</label>{{ form.remark }}</div>
<label>客户来源:</label>{{form.source}}
</div>
<div class="item">
<label>客户分类:</label>{{form.category}}
</div>
<div class="item">
<label>所在地区:</label>{{form.area}}
</div>
<div class="item">
<label>详细地址:</label>{{form.address}}
</div>
<div class="item">
<label>备注:</label>{{form.remark}}
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getContactDetail } from '../api'
export default { export default {
name: 'BaseInfo', props: {
id: {
type: String
}
},
data() { data() {
return { return {
form: { form: {
name: '北京大学继续教育学院', name: '',
abbr: '北大继教', abbr: '',
source: '公司资源', source: '',
category: '院校类', category: '',
area: '北京市北京市海淀区', area: '',
address: '北京市海淀区颐和园路5号', address: '',
remark: '北京大学怎么怎么样等等' remark: ''
} }
} }
},
mounted() {
this.getBaseInfo()
},
methods: {
getBaseInfo() {
const params = { id: this.id }
getContactDetail(params).then(res => {
this.form = res.data
})
}
} }
} }
</script> </script>
<style scoped> <style scoped>
.bar{ .bar {
padding-bottom:10px; padding-bottom: 10px;
} }
.item{ .item {
font-size:16px; font-size: 16px;
line-height:48px; line-height: 48px;
color:#494949; color: #494949;
} }
</style> </style>
\ No newline at end of file
<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-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="职责" prop="position">
<el-input v-model="form.position" />
</el-form-item>
<el-form-item label="部门" prop="department">
<el-input v-model="form.department" />
</el-form-item>
<el-form-item label="电话" prop="mobile">
<el-input v-model="form.mobile" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="微信号" prop="wechat">
<el-input v-model="form.wechat" />
</el-form-item>
<el-form-item label="QQ" prop="qq">
<el-input v-model="form.qq" />
</el-form-item>
<el-form-item label="附属手机" prop="sub_mobile">
<el-input v-model="form.sub_mobile" />
</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-form-item>
</el-form>
</el-dialog>
</template>
<script>
import { createContact } from '../api'
export default {
data() {
return {
form: {
name: '',
positoon: '',
department: '',
mobile: '',
sub_mobile: '',
email: '',
wechat: '',
qq: ''
},
rules: {
name: [{ required: true, message: '', trigger: 'blur' }],
mobile: [{ required: true, message: '', trigger: 'blur' }]
}
}
},
props: {
data: {
type: Object,
default: () => ({})
}
},
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)
})
})
}
}
}
</script>
<style scoped>
::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__headerbtn {
top: 12px;
}
::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 {
width: 100%;
}
</style>
<template>
<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-option label="产业学院" :value="1"></el-option>
<el-option label="1+X" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="项目进度" prop="status">
<el-select v-model="form.status" 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-option label="已签约" :value="4"></el-option>
<el-option label="已合作" :value="5"></el-option>
<el-option label="已失效" :value="6"></el-option>
</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>
</el-form-item>
<el-form-item label="合作意向" prop="cooperation_intention">
<el-select v-model="form.cooperation_intention" placeholder="请选择合作意向度" size="small" style="width: 100%">
<el-option label="1" :value="1"></el-option>
<el-option label="2" :value="2"></el-option>
<el-option label="3" :value="3"></el-option>
<el-option label="4" :value="4"></el-option>
<el-option label="5" :value="5"></el-option>
<el-option label="6" :value="6"></el-option>
<el-option label="7" :value="7"></el-option>
<el-option label="8" :value="8"></el-option>
<el-option label="9" :value="9"></el-option>
<el-option label="10" :value="10"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" />
</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-form-item>
</el-form>
</el-dialog>
</template>
<script>
import { createContact } from '../api'
export default {
data() {
return {
form: {
tag: '',
status: '',
cooperation_intention: '',
remark: '',
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' }]
}
}
},
props: {
data: {
type: Object,
default: () => ({})
}
},
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)
})
})
}
}
}
</script>
<style scoped>
::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__headerbtn {
top: 12px;
}
::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 {
width: 100%;
}
</style>
<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-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>
</el-form-item>
<el-form-item label="跟进时间" prop="follow_up_date">
<el-input v-model="form.follow_up_date" />
</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>
</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>
</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>
</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-form-item>
<el-form-item label="当前项目进展" prop="project_status">
<el-select v-model="form.project_status" 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-option label="已签约" :value="4"></el-option>
<el-option label="已合作" :value="5"></el-option>
<el-option label="已失效" :value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="跟进记录" prop="desc">
<el-input v-model="form.desc" />
</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-form-item>
</el-form>
</el-dialog>
</template>
<script>
import { createContact } from '../api'
export default {
data() {
return {
form: {
staff: '',
follow_up_date: '',
contact_id: '',
project_id: '',
communication_mode: '',
next_contact_time: '',
desc: '',
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' }]
}
}
},
props: {
data: {
type: Object,
default: () => ({})
}
},
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)
})
})
}
}
}
</script>
<style scoped>
::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__headerbtn {
top: 12px;
}
::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 {
width: 100%;
}
</style>
...@@ -17,6 +17,7 @@ const routes = [ ...@@ -17,6 +17,7 @@ const routes = [
meta: { title: '' } meta: { title: '' }
}, },
{ {
name: 'details',
path: 'details', path: 'details',
component: () => import('./views/Details.vue'), component: () => import('./views/Details.vue'),
meta: { title: '客户详情' } meta: { title: '客户详情' }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<app-card> <app-card>
<el-tabs v-model="tabActive" type="card"> <el-tabs v-model="tabActive" type="card">
<el-tab-pane label="基本信息" name="baseInfo"> <el-tab-pane label="基本信息" name="baseInfo">
<base-info /> <base-info :id="id" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="联系人" name="contacts"> <el-tab-pane label="联系人" name="contacts">
<contact /> <contact />
...@@ -20,44 +20,26 @@ ...@@ -20,44 +20,26 @@
<script> <script>
// 组件 // 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
import BaseInfo from '../components/BaseInfo.vue' import BaseInfo from '../components/BaseInfo.vue'
import Contact from '../components/Contact.vue' import Contact from '../components/Contact.vue'
import Project from '@/modules/customer/components/Project.vue' import Project from '@/modules/customer/components/Project.vue'
import FollowRemark from '../components/FollowRemark.vue' import FollowRemark from '../components/FollowRemark.vue'
// 接口
// import { getRoleList } from '../api'
export default { export default {
components: { AppCard, AppList, BaseInfo, Contact, Project, FollowRemark }, components: { BaseInfo, Contact, Project, FollowRemark },
data() { data() {
return { return {
tabActive: 'baseInfo' tabActive: 'baseInfo'
} }
}, },
computed: { computed: {
}, id() {
methods: { return this.$route.query.id
// 查看
handleDetails(row) {
console.log(row)
},
// 删除弹窗确认
handleRemove(data) {
this.$confirm('角色删除请谨慎操作,确定删除?', '删除角色', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(this.handleRemove(data))
},
// 删除请求
fetchRemove(data) {
console.log(data)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
size='small' size="small"
> >
</el-date-picker> </el-date-picker>
</template> </template>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
size='small' size="small"
> >
</el-date-picker> </el-date-picker>
</template> </template>
...@@ -266,7 +266,12 @@ export default { ...@@ -266,7 +266,12 @@ export default {
// 查看 // 查看
handleDetails(row) { handleDetails(row) {
console.log(row) console.log(row)
this.$router.push('/customer-manage/details') this.$router.push({
name: 'details',
query: {
id: row.id
}
})
}, },
// 删除弹窗确认 // 删除弹窗确认
handleRemove(data) { handleRemove(data) {
...@@ -285,19 +290,19 @@ export default { ...@@ -285,19 +290,19 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.customer ::v-deep .table-list-hd .el-date-editor--datetimerange.el-input__inner{ .customer ::v-deep .table-list-hd .el-date-editor--datetimerange.el-input__inner {
width: 280px; width: 280px;
padding:3px 0 3px 6px; padding: 3px 0 3px 6px;
} }
.customer ::v-deep .table-list-hd .el-input{ .customer ::v-deep .table-list-hd .el-input {
width: 280px; width: 280px;
min-width:160px; min-width: 160px;
} }
.customer ::v-deep .table-list-hd .el-select{ .customer ::v-deep .table-list-hd .el-select {
width: 280px; width: 280px;
min-width:160px; min-width: 160px;
} }
.customer ::v-deep .table-list-hd .el-form{ .customer ::v-deep .table-list-hd .el-form {
margin-right:-30px; margin-right: -30px;
} }
</style> </style>
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
<el-dialog v-bind="$attrs" v-on="$listeners" width="70%" title="添加客户"> <el-dialog v-bind="$attrs" v-on="$listeners" width="70%" title="添加客户">
<app-card> <app-card>
<app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange"> <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
<template v-slot:filter-userSearch="{ params }">
<app-user-search v-model="params.created_by"></app-user-search>
</template>
<template #footer> <template #footer>
<el-button type="primary" @click="submit">提交</el-button> <el-button type="primary" @click="submit">提交</el-button>
<el-button @click="$emit('update:visible', false)" style="margin-left: 20px">取消</el-button> <el-button @click="$emit('update:visible', false)" style="margin-left: 20px">取消</el-button>
...@@ -13,8 +16,12 @@ ...@@ -13,8 +16,12 @@
<script> <script>
import { getEmployeeList, createCustomer, getEmployee } from '../api' import { getEmployeeList, createCustomer, getEmployee } from '../api'
import AppUserSearch from '@/components/base/AppUserSearch.vue'
export default { export default {
components: {
AppUserSearch
},
data() { data() {
return { return {
employeeList: { employeeList: {
...@@ -46,17 +53,7 @@ export default { ...@@ -46,17 +53,7 @@ export default {
prop: 'name', prop: 'name',
placeholder: '客户名称' placeholder: '客户名称'
}, },
{ { prop: 'created_by', slots: 'filter-userSearch', label: '创建员工:' }
type: 'select',
prop: 'username',
options: this.employeeList.items,
labelKey: 'username',
valueKey: 'id',
placeholder: '创建员工',
filterable: true,
remote: true,
'remote-method': this.fetchEmployeeList
}
], ],
columns: [ columns: [
{ type: 'selection', minWidth: '50px', fixed: 'left' }, { type: 'selection', minWidth: '50px', fixed: 'left' },
......
...@@ -13,9 +13,14 @@ ...@@ -13,9 +13,14 @@
size="80%" size="80%"
multiple multiple
> >
<el-option v-for="item in employeeList" :key="item.id" :label="item.id" :value="item.id"> <el-option
v-for="item in employeeList"
:key="item.id"
:label="item.nickname || item.realname || item.username"
:value="item.id"
>
<span style="float: left"> <span style="float: left">
{{ item.nickname }} {{ item.nickname || item.realname || item.username }}
<template v-if="item.mobile">(手机号:{{ item.mobile }})</template> <template v-if="item.mobile">(手机号:{{ item.mobile }})</template>
</span> </span>
</el-option> </el-option>
...@@ -31,6 +36,7 @@ ...@@ -31,6 +36,7 @@
<script> <script>
import { getEmployee, createEmployee } from '../api' import { getEmployee, createEmployee } from '../api'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{4,8}$/
export default { export default {
props: { props: {
id: { id: {
...@@ -45,10 +51,7 @@ export default { ...@@ -45,10 +51,7 @@ export default {
id: '' id: ''
}, },
rules: { rules: {
id: [ id: [{ required: true, trigger: 'blur' }]
{ required: true, message: '请输入员工名称', trigger: 'blur' },
{ min: 0, max: 20, message: '您最多可输入20个字符', trigger: 'blur' }
]
}, },
employeeList: [] employeeList: []
} }
...@@ -68,10 +71,14 @@ export default { ...@@ -68,10 +71,14 @@ export default {
email: '', email: '',
mobile: '' mobile: ''
} }
if (query instanceof Number === true) { if (MOBILE_REG.test(query)) {
params.mobile = query params.mobile = query
} else { } else {
params.nickname = query if (params.username !== '') {
params.username = query
} else {
params.nickname = query
}
} }
// 搜索员工 // 搜索员工
getEmployee(params).then(res => { getEmployee(params).then(res => {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论