Skip to content

C
customer-admin
提交 30a836a0 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

feat: 大客户管理模块

上级 0b64eae9
隐藏空白字符变更
内嵌 并排
正在显示 包含 403 行增加 和 25 行删除
src/components/base/AppList.vue
浏览文件 @ 30a836a0
......@@ -47,7 +47,7 @@
v-loading="loading"
v-bind="$attrs"
v-on="$listeners"
style="height: 100%"
style="width: 100%;"
ref="table"
>
<template v-for="item in columns">
......
src/components/layout/Aside.vue
浏览文件 @ 30a836a0
......@@ -48,11 +48,13 @@ export default {
<style lang="scss">
.app-aside {
position: sticky;
position: absolute;
top: 0;
left: 0;
width: 240px;
z-index: 100;
background: #fff;
height:100%;
border-right: 1px solid rgba(0, 0, 0, 0.12);
overflow-x: hidden;
overflow-y: auto;
......
src/components/layout/Index.vue
浏览文件 @ 30a836a0
......@@ -29,6 +29,6 @@ export default {
}
.app-layout-container {
flex: 1;
display: flex;
position:relative;
}
</style>
\ No newline at end of file
src/components/layout/Main.vue
浏览文件 @ 30a836a0
......@@ -25,6 +25,7 @@ export default {
position: relative;
flex: 1;
padding: 16px;
margin-left:240px;
}
.app-main-inner {
margin: 0 auto;
......
src/modules/customer/components/BaseInfo.vue 0 → 100644
浏览文件 @ 30a836a0
<template>
<div class="base-info">
<div class="bar">
<el-button type="primary" size="small">更 新</el-button>
</div>
<div class="info">
<div class="item">
<label>客户名称：</label>{{form.name}}
</div>
<div class="item">
<label>客户简称：</label>{{form.abbr}}
</div>
<div class="item">
<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>
</template>
<script>
export default {
name: 'BaseInfo',
data() {
return {
form: {
name: '北京大学继续教育学院',
abbr: '北大继教',
source: '公司资源',
category: '院校类',
area: '北京市北京市海淀区',
address: '北京市海淀区颐和园路5号',
remark: '北京大学怎么怎么样等等'
}
}
}
}
</script>
<style scoped>
.bar{
padding-bottom:10px;
}
.item{
font-size:16px;
line-height:48px;
color:#494949;
}
</style>
\ No newline at end of file
src/modules/customer/components/Contact.vue 0 → 100644
浏览文件 @ 30a836a0
<template>
<div class="base-info">
<div class="bar">
<el-button type="primary" size="small">添加联系人</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="handleDelete(row)" size="mini">删除</el-button>
</template>
</template>
</app-list>
</div>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
export default {
name: 'Contact',
components: { AppList },
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'
}
],
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' },
{ label: '操作', minWidth: '140px', slots: 'table-operate' }
]
}
}
},
data() {
return {
form: {
name: '北京大学继续教育学院',
abbr: '北大继教',
source: '公司资源',
category: '院校类',
area: '北京市北京市海淀区',
address: '北京市海淀区颐和园路5号',
remark: '北京大学怎么怎么样等等'
}
}
},
methods: {
handleEdit() {},
handleDelete() {}
}
}
</script>
<style scoped>
.bar{
padding-bottom:10px;
}
.item{
font-size:16px;
line-height:48px;
color:#494949;
}
</style>
src/modules/customer/components/FollowRemark.vue 0 → 100644
浏览文件 @ 30a836a0
<template>
<div class="base-info">
<div class="bar">
<el-button type="primary" size="small">添加跟进记录</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="handleDelete(row)" size="mini">删除</el-button>
</template>
</template>
</app-list>
</div>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
export default {
name: 'Contact',
components: { AppList },
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'
}
],
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' },
{ label: '操作', minWidth: '140px', slots: 'table-operate' }
]
}
}
},
data() {
return {
form: {
name: '北京大学继续教育学院',
abbr: '北大继教',
source: '公司资源',
category: '院校类',
area: '北京市北京市海淀区',
address: '北京市海淀区颐和园路5号',
remark: '北京大学怎么怎么样等等'
}
}
},
methods: {
handleEdit() {},
handleDelete() {}
}
}
</script>
<style scoped>
.bar{
padding-bottom:10px;
}
.item{
font-size:16px;
line-height:48px;
color:#494949;
}
</style>
src/modules/customer/components/Project.vue 0 → 100644
浏览文件 @ 30a836a0
<template>
<div class="base-info">
<div class="bar">
<el-button type="primary" size="small">添加合作项目</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="handleDelete(row)" size="mini">删除</el-button>
</template>
</template>
</app-list>
</div>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
export default {
name: 'Contact',
components: { AppList },
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'
}
],
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' },
{ label: '操作', minWidth: '140px', slots: 'table-operate' }
]
}
}
},
data() {
return {
form: {
name: '北京大学继续教育学院',
abbr: '北大继教',
source: '公司资源',
category: '院校类',
area: '北京市北京市海淀区',
address: '北京市海淀区颐和园路5号',
remark: '北京大学怎么怎么样等等'
}
}
},
methods: {
handleEdit() {},
handleDelete() {}
}
}
</script>
<style scoped>
.bar{
padding-bottom:10px;
}
.item{
font-size:16px;
line-height:48px;
color:#494949;
}
</style>
src/modules/customer/index.js
浏览文件 @ 30a836a0
......@@ -15,6 +15,11 @@ const routes = [
path: '',
component: () => import('./views/Index.vue'),
meta: { title: '' }
},
{
path: 'details',
component: () => import('./views/Details.vue'),
meta: { title: '客户详情' }
}
]
}
......
src/modules/customer/views/Details.vue 0 → 100644
浏览文件 @ 30a836a0
<template>
<app-card>
<el-tabs v-model="tabActive" type="card">
<el-tab-pane label="基本信息" name="baseInfo">
<base-info />
</el-tab-pane>
<el-tab-pane label="联系人" name="contacts">
<contact />
</el-tab-pane>
<el-tab-pane label="合作项目" name="project">
<project />
</el-tab-pane>
<el-tab-pane label="跟进记录" name="followRecord">
<follow-remark />
</el-tab-pane>
<!-- <el-tab-pane label="通话记录" name="callLog">通话记录</el-tab-pane> -->
</el-tabs>
</app-card>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
import BaseInfo from '../components/BaseInfo.vue'
import Contact from '../components/Contact.vue'
import Project from '@/modules/customer/components/Project.vue'
import FollowRemark from '../components/FollowRemark.vue'
// 接口
// import { getRoleList } from '../api'
export default {
components: { AppCard, AppList, BaseInfo, Contact, Project, FollowRemark },
data() {
return {
tabActive: 'baseInfo'
}
},
computed: {
},
methods: {
// 查看
handleDetails(row) {
console.log(row)
},
// 删除弹窗确认
handleRemove(data) {
this.$confirm('角色删除请谨慎操作，确定删除？', '删除角色', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(this.handleRemove(data))
},
// 删除请求
fetchRemove(data) {
console.log(data)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/modules/customer/views/Index.vue
浏览文件 @ 30a836a0
......@@ -87,6 +87,7 @@ export default {
// 查看
handleDetails(row) {
console.log(row)
this.$router.push('/customer-manage/details')
},
// 删除弹窗确认
handleRemove(data) {
......@@ -105,26 +106,4 @@ export default {
</script>
<style lang="scss" scoped>
.sign-item {
margin-bottom: 20px;
border: 1px solid #ebeef5;
}
.sign-item-hd {
display: flex;
padding: 14px;
border-bottom: 1px solid #ebeef5;
}
.sign-item-bd {
display: flex;
align-items: center;
padding: 14px;
}
.sign-item-bd-content {
flex: 1;
padding: 0 14px;
p {
line-height: 1.4;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论