# customer relations

**Repository Path**: soy--egg/customer-relations

## Basic Information

- **Project Name**: customer relations
- **Description**: 客户关系管理系统（CRM）是企业用于集中管理客户信息、提高销售效率和提供更优质客户服务的关键工具。通过整合销售、市场营销和客户服务等功能，CRM系统帮助企业更深入了解客户需求，提高客户满意度，并通过数据分析提供关键业务洞察。它是现代企业赖以成功的关键支持系统，有助于建立强大的客户关系，提升竞争力。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-11-18
- **Last Updated**: 2023-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: F4小队

## README

# 项目名称

## 【CRM】客户关系管理系统

# 项目概述

 >该项目旨在开发一个客户关系管理系统，用于帮助组织有效管理和优化与客户的关系。该系统将提供客户信息管理、合同管理、数据中心、消息中心等功能。通过集中管理客户信息、跟踪销售过程和提供客户服务支持，通过合同管理，进一步的了解客户的需求，在数据中心取分析客户，来帮助企业提高客户满意度、增加销售业绩和提升市场竞争力，消息中心即使反馈。通过该项目的实施，企业将能够更好地管理客户关系，提升业务绩效和用户体验。

# 项目背景

>在如今的社会，客户关系扮演者重要的角色。通过集中存储客户信息，企业能够更全面地了解客户需求，从而提供更贴心、个性化的服务。我们公司为了更好地适应市场变化，提高盈利能力，实现可持续发展。开发了一套客户关系管理系统（CRM系统），旨在协助销售团队提高效率，自动化的销售流程、机会管理和订单处理，使销售人员能够更专注于与客户建立深刻的关系，提高业绩。此外，CRM系统也在市场营销方面发挥关键作用，通过数据分析，企业可以更精准地定位目标市场，制定更有效的市场营销策略

# 项目计划


随着市场竞争的不断加剧和客户期望的提高，我们公司决定实施一套先进的客户关系管理系统（CRM）以提升客户体验、提高销售效率和优化运营流程。该CRM系统将成为我们企业数字化转型的关键组成部分，帮助我们更好地理解客户需求、优化销售流程、提高服务水平并实现业务增长。

### 阶段一 - 规划和准备：

1. **项目定义和范围：**
   - 确定客户关系管理系统的基本功能和特性。
   - 定义系统的规模和所覆盖的业务流程。
2. **团队组建：**
   - 组建前端团队，确保团队成员熟悉Vue 3及相关技术。
   - 进行团队内部的技能培训，以确保团队能够有效协作。
3. **需求分析和用户故事编写：**
   - 与利益相关者一起收集和分析系统需求。
   - 编写用户故事，明确用户的使用场景和期望。

### 阶段二 - 设计：

1. **系统架构设计：**
   - 设计Vue 3项目的整体架构和组件结构。
   - 确定数据流和状态管理方案。
2. **用户界面设计：**
   - 制定用户界面设计方案，包括响应式设计和用户友好性。
   - 设计不同用户角色的界面，如销售、客服、管理员等。
3. **数据库设计和API规范：**
   - 设计数据库结构，确保与前端需求匹配。
   - 制定与后端API的通信规范，确保数据的有效传递。

# 项目目标

1. **提高客户满意度**
   - 通过更好的客户信息管理和响应机制，提高客户满意度。
2. **提升销售效率**
   - 通过跟踪销售过程、提供销售支持，提高销售团队的效率。
3. **加强市场营销**
   - 通过分析客户数据和市场趋势，改进市场营销策略。
4. **优化客户服务**
   - 通过提供更及时、个性化的服务，提高客户服务质量。
5. **提高决策支持**
   - 通过数据分析和报告功能，为管理层提供更好的决策支持。
6. **降低成本**
   - 通过自动化流程和提高工作效率，降低企业运营成本。
7. **确保数据安全**
   - 实施安全措施，确保客户和企业敏感信息的安全性。

在整个项目周期中，与利益相关者的沟通和协作也是确保项目成功的关键因素。


# 技术栈

```
├── mode@16.3.0
├── @element-plus/icons-vue@2.1.0
├── @tsconfig/node18@18.2.2
├── @types/jsdom@21.1.6
├── UNMET DEPENDENCY @types/moment@^2.13.0
├── @types/node@18.18.13
├── @vitejs/plugin-vue-jsx@3.1.0
├── @vitejs/plugin-vue@4.5.0
├── @vue/test-utils@2.4.2
├── @vue/tsconfig@0.4.0
├── axios@1.6.2
├── dayjs@1.11.10
├── echarts@5.4.3
├── element-china-area-data@6.1.0
├── element-plus@2.4.2
├── install@0.13.0
├── js-table2excel@1.1.2
├── jsdom@22.1.0
├── mockjs@1.1.0
├── UNMET DEPENDENCY moment@^2.29.4
├── npm-run-all2@6.1.1
├── npm@10.2.4
├── pinia-plugin-persist@1.0.0
├── pinia-plugin-persistedstate@3.2.0
├── pinia@2.1.7
├── qrcode@1.5.3
├── qrcodejs2-fix@0.0.1
├── qrcodejs2@0.0.2
├── sass-loader@13.3.2
├── sass@1.69.5
├── typescript@5.2.2
├── vite-plugin-mock@2.9.8
├── vite@4.5.0
├── vitest@0.34.6
├── vue-router@4.2.5
├── vue-tsc@1.8.22
├── vue@3.3.8
└── xlsx@0.18.5
```





# 目录结构
```
├─mock
├─public
└─src
    ├─assets
    │  └─icon
    ├─component
    │  ├─Card
    │  ├─Echart
    │  │  ├─Bar
    │  │  ├─Circle
    │  │  ├─Com
    │  │  └─Line
    │  ├─From
    │  ├─QRCode
    │  └─Table
    │      └─ui
    ├─router
    │  ├─hooks
    │  └─routes
    ├─services
    ├─stores
    ├─types
    ├─utils
    │  ├─NetworkRequest
    │  │  └─Interceptors
    │  └─Tools
    └─views
        ├─404
        ├─Admin
        │  └─ui
        │      ├─Aside
        │      ├─Breadcrumbs
        │      └─header
        ├─Contract
        │  ├─All
        │  │  └─ui
        │  ├─Mine
        │  │  └─ui
        │  └─Subordinate
        │      └─ui
        ├─Customer
        │  ├─All
        │  │  └─ui
        │  ├─Mine
        │  │  └─ui
        │  ├─Seas
        │  │  └─ui
        │  └─Subordinate
        │      └─ui
        ├─Dashoard
        │  └─DashoardNewData
        │      └─ui
        ├─Information
        │  ├─Customeranalysis
        │  │  └─echarts
        │  ├─Departmentperf
        │  │  └─ui
        │  ├─Salesranking
        │  │  └─ui
        │  │      └─echarts
        │  └─Salestrend
        │      └─ui
        │          └─echarts
        ├─Login
        │  └─ui
        ├─Message
        │  ├─Sysinfo
        │  │  └─Syslist
        │  └─Todo
        │      ├─todoSou
        │      ├─todoTable
        │      └─tosochankan
        │          ├─leiXing
        │          └─zhuangTai
        └─System
            ├─Department
            │  └─ui
            ├─Employee
            │  └─ui
            ├─Log
            │  └─ui
            ├─Manage
            ├─Permission
            │  └─ui
            └─Product
```

# 项目部分截图

> ## 登陆
>
> <img src="./public/home.png">
>
> ## 首页
>
> <img src="./public/front_page.png">
>
> ## 合同管理
>
> <img src="./public/contract.png">
>
> ## 客户管理
>
> <img src="./public/client.png">
>
> ## 数据中心
>
> <img src="./public/data.png">
>
> ## 消息中心
>
> <img src="./public/information.png">
>
> ## 系统中心
>
> <img src="./public/system.png">
>



# 项目亮点
>客户沟通与互动： 与客户建立积极的沟通，通过电子邮件、电话、社交媒体等渠道保持联系。提供及时而有价值的信息，回应客户的疑虑和问题。

>系统中心：负责协调和管理系统的各个部分，包括员工管理、权限设置、操作日志等。是一个集中管理的中心，用于监控和管理员工操作。


>数据分析和报告：系统提供强大的数据分析和报告功能，帮助组织深入了解客户行为、销售绩效和市场趋势。这些分析和报告为组织提供决策支持，帮助优化业务运营和制定战略计划。

# 开发遇到的问题

1. 数据格式化：ECharts 接受的数据格式可能与项目中的数据格式不匹配。您需要确保将数据转换为适合 ECharts 的格式。
2. 数据更新和动态渲染：如果需要实现动态数据更新或根据用户交互进行图表的动态渲染，您需要处理数据的变化，并相应地更新图表。可能需要使用 ECharts 提供的方法来刷新图表，或者使用框架或库的特定机制来管理图表的状态和更新。
3. 在动态封装组件的时候需要使用一个数据取传递俩种不一样的值，这样就需要使用在组件中使用不同的数据获取更具数据取渲染数据
4. 在写api文档的时候需要项目开始的时候写一个比较模糊的，在写代码的时候及时的修改变更，若在写完项目的时候书写将回更加复杂

# API接口文档
<a href="./接口文档.md">接口文档</a>

# Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
npm run test:unit
```