Skip to content

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

feat:新增客户组管理模块

上级 ad485b90
隐藏空白字符变更
内嵌 并排
正在显示 包含 361 行增加 和 138 行删除
package-lock.json
浏览文件 @ 0b64eae9
{
"name": "crm-admin",
"name": "customer-admin",
"version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
......
src/components/layout/Aside.vue
浏览文件 @ 0b64eae9
......@@ -31,9 +31,9 @@ export default {
},
{
name: '系统管理',
path: '/system/customer-group',
path: '/system/customergroup',
icon: 'el-icon-setting',
children: [{ name: '客户组管理', path: '/system/customer-group' }]
children: [{ name: '客户组管理', path: '/system/customergroup' }]
}
]
}
......
src/modules/system/api.js deleted 100644 → 0
浏览文件 @ ad485b90
import httpRequest from '@/utils/axios'
src/modules/system/customergroup/components/AddCustomer.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" top="40vh" title="创建客户组">
<app-card>
<app-list v-bind="tableOptions" ref="list"> </app-list>
</app-card>
<el-button type="primary"> 提交</el-button>
<el-button> 取消</el-button>
</el-dialog>
</template>
<script>
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
export default {
components: { AppCard, AppList },
computed: {
// 列表配置
tableOptions() {
return {
// remote: {
// httpRequest: getStudentList,
// params: {
// personal_name: '',
// telephone: '',
// id: '',
// sno: ''
// }
// },
filters: [
{
type: 'input',
prop: 'name',
placeholder: '请输入客户名称'
},
{
type: 'select',
prop: 'name',
placeholder: '创建员工'
}
],
columns: [
{ label: '客户名称', prop: 'group_name', align: 'center' },
{ label: '合作项目', prop: 'customer_num', align: 'center' },
{ label: '所在地区', prop: 'employees_num', align: 'center' },
{ label: '创建时间', prop: 'created_name', align: 'center' },
{ label: '创建人', prop: 'creater', align: 'center' }
],
data: [
{
group_name: '1213'
}
]
}
}
},
mounted() {
// this.getStudent()
},
methods: {
submit() {}
}
}
</script>
src/modules/system/customergroup/components/AddCustomerGroup.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" top="40vh" title="创建客户组">
<el-form ref="formRef" :model="form">
<el-form-item label="客户组名称" prop="group_name">
<el-input type="text" v-model="form.group_name" />
</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>
export default {
data() {
return {
detail: [],
form: {
group_name: ''
}
}
},
mounted() {
// this.getStudent()
},
methods: {
submit() {}
}
}
</script>
src/modules/system/customergroup/components/AddEmployees.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<el-dialog v-bind="$attrs" v-on="$listeners" width="40%" top="40vh" title="创建客户组">
<el-form ref="formRef" :model="form">
<el-form-item label="客户组名称" prop="group_name">
<el-input type="text" v-model="form.group_name" placeholder="搜索员工" />
</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>
export default {
data() {
return {
detail: [],
form: {
group_name: ''
}
}
},
mounted() {
// this.getStudent()
},
methods: {
submit() {}
}
}
</script>
src/modules/system/customergroup/components/Customer.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<template>
<el-row style="margin-bottom: 20px">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="isShowDialog = true">添加客户</el-button>
</el-row>
</template>
<template v-slot:table-x="{ row }">
<el-button type="danger" @click="onRemove(row)" style="margin-left: 10px" size="mini" plain>删除</el-button>
</template>
</app-list>
<AddCustomer :visible.sync="isShowDialog" />
</app-card>
</template>
<script>
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
import AddCustomer from '../components/AddCustomer.vue'
export default {
data() {
return {
isShowDialog: false
}
},
components: { AppList, AppCard, AddCustomer },
computed: {
// 列表配置
tableOptions() {
return {
// remote: {
// httpRequest: getStudentList,
// params: {
// personal_name: '',
// telephone: '',
// id: '',
// sno: ''
// }
// },
columns: [
{ label: '客户名称', prop: 'group_name', align: 'center' },
{ label: '创建时间不', prop: 'customer_num', align: 'center' },
{ label: '创建人', prop: 'employees_num', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' }
],
data: [
{
group_name: '1213'
}
]
}
}
},
methods: {
// 删除
onRemove() {}
}
}
</script>
<style></style>
src/modules/system/customergroup/components/Employees.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<template>
<el-row style="margin-bottom: 20px">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="isShowDialog = true">添加员工</el-button>
</el-row>
</template>
<template v-slot:table-x="{ row }">
<el-button type="danger" @click="onRemove(row)" style="margin-left: 10px" size="mini" plain>删除</el-button>
</template>
</app-list>
<AddEmployees :visible.sync="isShowDialog" />
</app-card>
</template>
<script>
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
import AddEmployees from '../components/AddEmployees.vue'
export default {
data() {
return {
isShowDialog: false
}
},
components: { AppList, AppCard, AddEmployees },
computed: {
// 列表配置
tableOptions() {
return {
// remote: {
// httpRequest: getStudentList,
// params: {
// personal_name: '',
// telephone: '',
// id: '',
// sno: ''
// }
// },
columns: [
{ label: '员工姓名', prop: 'group_name', align: 'center' },
{ label: '手机号', prop: 'customer_num', align: 'center' },
{ label: '创建时间', prop: 'employees_num', align: 'center' },
{ label: '创建人', prop: 'creater', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' }
],
data: [
{
group_name: '1213'
}
]
}
}
},
methods: {
// 删除
onRemove() {}
}
}
</script>
<style></style>
src/modules/system/index.js → src/modules/system/customergroup/index.js
浏览文件 @ 0b64eae9
const routes = [
{
path: '/system',
redirect: '/system/customer-group',
component: () => import('@/components/layout/Index.vue'),
meta: { title: '系统管理' },
meta: { title: '系统设置' },
children: [
{
path: 'customer-group',
component: () => import('./views/Index.vue'),
meta: { title: '客户组管理' },
path: 'customergroup',
component: () => import('./views/List.vue'),
meta: { title: '客户组管理' }
},
{
name: 'update',
path: 'customergroup/detail',
component: () => import('./views/Detail.vue'),
meta: { title: '客户组详情' }
}
]
}
]
export { routes }
src/modules/system/customergroup/views/Detail.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<div>
<el-tabs type="card">
<el-tab-pane label="客户">
<Customer />
</el-tab-pane>
<el-tab-pane label="员工">
<Employees />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Customer from '../components/Customer.vue'
import Employees from '../components/Employees.vue'
export default {
components: {
Customer,
Employees
}
}
</script>
<style></style>
src/modules/system/customergroup/views/List.vue 0 → 100644
浏览文件 @ 0b64eae9
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<template>
<el-row style="margin-bottom: 20px">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="isShowDialog = true">新建客户组</el-button>
</el-row>
</template>
<template v-slot:table-x="{ row }">
<router-link :to="{ path: 'customergroup/detail', query: { id: row.id } }">
<el-button type="primary" style="margin-left: 10px" size="mini" plain>查看</el-button>
</router-link>
<el-button type="success" style="margin-left: 10px" size="mini" plain @click="isShowDialog = true"
>编辑</el-button
>
<el-button type="danger" @click="onRemove(row)" style="margin-left: 10px" size="mini" plain>删除</el-button>
</template>
</app-list>
<AddCustomerGroup :visible.sync="isShowDialog" />
</app-card>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
import AddCustomerGroup from '../components/AddCustomerGroup.vue'
export default {
components: { AppCard, AppList, AddCustomerGroup },
data() {
return {
isShowDialog: false
}
},
computed: {
// 列表配置
tableOptions() {
return {
// remote: {
// httpRequest: getStudentList,
// params: {
// personal_name: '',
// telephone: '',
// id: '',
// sno: ''
// }
// },
columns: [
{ label: '客户组名称', prop: 'group_name', align: 'center' },
{ label: '客户数量', prop: 'customer_num', align: 'center' },
{ label: '员工数量', prop: 'employees_num', align: 'center' },
{ label: '创建时间', prop: 'created_name', align: 'center' },
{ label: '创建人', prop: 'creater', align: 'center' },
{ label: '操作', slots: 'table-x', align: 'center', width: '300', fixed: 'right' }
],
data: [
{
group_name: '1213'
}
]
}
}
},
methods: {
// success() {
// this.$refs.list.refetch()
// }
// 删除
}
}
</script>
src/modules/system/views/Index.vue deleted 100644 → 0
浏览文件 @ ad485b90
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<template #header-aside>
<el-button type="primary">新建客户组</el-button>
</template>
<!-- 筛选 -->
<template v-slot:filter-date="{ params }">
<el-date-picker
v-model="params.date"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
>
</el-date-picker>
</template>
<!-- 操作 -->
<template v-slot:table-operate="{ row }">
<template>
<el-button type="text" @click="handleDetails(row)" size="mini">查看</el-button>
<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>
</app-card>
</template>
<script>
// 组件
import AppList from '@/components/base/AppList.vue'
import AppCard from '@/components/base/AppCard.vue'
// 接口
// import { getRoleList } from '../api'
export default {
components: { AppCard, AppList },
data() {
return {}
},
computed: {
// 列表配置
tableOptions() {
return {
// remote: {
// httpRequest: getRoleList,
// params: { },
// },
filters: [
{
type: 'input',
prop: 'name',
placeholder: '请输入活动名'
},
{ prop: 'date', slots: 'filter-date' }
],
data: [
{
name: '1+x客户组',
customer_num: 2,
staff_num: 2,
creator: '员工A',
created_time: '2021-12-12 12:12'
}
],
columns: [
// { type: 'selection', minWidth: '40px' },
{ prop: 'name', label: '客户名称', minWidth: '120px' },
{ prop: 'customer_num', label: '合作项目', minWidth: '140px' },
{ prop: 'staff_num', label: '联系人', minWidth: '140px' },
{ prop: 'creator', label: '创建员工', minWidth: '140px' },
{ prop: 'created_time', label: '创建时间', minWidth: '140px' },
{ label: '操作', minWidth: '140px', slots: 'table-operate' }
]
}
}
},
methods: {
// 查看
handleDetails(row) {
console.log(row)
},
// 编辑
handleEdit(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>
.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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论