vue3+elementplus+ts+vite+router4+springboot版CRM客户关系管理系统

一 项目介绍

CRM客户关系管理系统是基于VUE3+elementplus+vite+ts开发的前后端分离的项目，从系统登录，后台首页，客户维护，销售维护，报表管理，员工管理，系统管理等等功能 含有客户关系系统和权限系统。

二 项目开发技术和工具

前端：vue3 elementplus vite ts vuex router4 echart 等技术点
后端：springboot mybatis springmvc spring springsecurity jwt 等技术点
数据库: 关系型数据库mysql 或者mangodb
开发环境: JDK13版本
开发工具：idea或者eclipse vscode或者webstorm 或者hbuilderx

三 CRM项目功能结构图

项目功能结构图：包含下面的核心模块 客户管理 销售管理 ，报表管理 系统管理 员工管理 如下图

四 项目开发和设计

登录页：

登录这块其实做了很多事情，比如form表单验证，验证码处理，存储用户登录信息，然后登录成功 读取用户动态菜单，渲染路由处理.

核心代码：

	const doLogin =()=> {
        loading.value = true;
        //处理验证码
        if(loginFormState.loginForm.checkCode == null || loginFormState.loginForm.checkCode == ''){
            ElMessage({
                message: h('p', null, [
                  h('span', null, '请填写验证码! '),
                  h('i', { style: 'color: red' }, ''),
                ]),
              })
              loading.value = false
               return;
        }else{
	
            if(state.imgCode != loginFormState.loginForm.checkCode){
              ElMessage({
                message: h('p', null, [
                  h('span', null, '验证码填写有误! '),
                  h('i', { style: 'color: red' }, ''),
                ]),
              })
              loading.value = false
               return;
            }

        }
        //处理登录
        $store.dispatch('sysuser/login',loginFormState.loginForm).then(()  => {
            router.push({ path: '/' })
            //存储登录信息
            sessionStorage.setItem("loginName",loginFormState.loginForm.username)
            loading.value = false
        }).catch(() => {
          ElMessage({
                message: h('p', null, [
                  h('span', null, '用户名或者密码有错误! '),
                  h('i', { style: 'color: red' }, ''),
                ]),
              })
          loading.value = false
        })
      }
      

登录成功 进入系统首页.

报表模块:

报表模块是加载 客户销售数据报表。统计客户的销售数量。分别通过 饼图，柱状图 折线图，圆环图 进行统计，非常直观 明白…
项目内容很多,一篇文章说不完 需要更多资料 和 需要答 疑 加 扣 扣 ： 二 三 零 零 四 五 零 三 四 二
下面图是 报表效果图:

核心处理代码:

	import { defineComponent ,computed,ref,getCurrentInstance ,toRefs,reactive } from 'vue'
    import { useStore } from "vuex";
    import * as echarts from 'echarts';
    export default defineComponent({
    mounted(){
       this.getSaleReports()  
    },
    setup(props,context) {
    	//获取store实例
        const $store = useStore(); 
        const dataList = ref([])
        //获取后台报表数据
        const getSaleReports = ()=>{
            $store.dispatch('report/getSaleReports')
            .then((data) => {
              //处理报表数据
               data.saleReportsData.forEach(element => {
                 let name = element.khname
                 let value = element.salenum
                 dataList.value.push({name:name,value:value})
               });
              showSaleReports();
            })
            .catch((err) => {
              console.log('失败' + err)
            })
            showSaleReports()
        }
        	//加载报表
         const showSaleReports = ()=>{
                // 初始化echarts实例 ****************************饼图********************
                let myChart = echarts.init(document.getElementById('main'));
                //饼图效果
                let option = {
                  title: {
                    text: '客户销售统计报表',
                    subtext: '销售数据',
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
                  series: [
                    {
                      name: '销量',
                      type: 'pie',
                      radius: '50%',
                      data: dataList.value,
                      emphasis: {
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                };
                myChart.setOption(option)
                }
                 return{
			       dataList,
			       getSaleReports,
			       showSaleReports    
     }
    }
    })

感恩有您的关注，感恩有您的陪伴，生命有您而灿烂如花，喜欢就多来学习学习… 就多来csdn…