10-11-element-CRM

最新推荐文章于 2024-08-22 08:12:57 发布

ange997

最新推荐文章于 2024-08-22 08:12:57 发布

阅读量87

点赞数

分类专栏： 10-Vue

本文链接：https://blog.csdn.net/ange997/article/details/108586286

版权

10-Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

准备后端代码
node启动

准备

安装vue项目

全局安装脚手架：npm i @vue/cli -g
使用脚手架

vue create app

选择配置
Manually select features

Babel
Router
Vuex
CSS

-s 即–save 安装生产环境依赖
-d 即–save-dev 安装开发环境依赖

安装使用element

使用教程
Element
安装

npm i element-ui -s

引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

使用element组件

启动项目

npm run serve

安装axios

因为项目中用到了axios，所以要安装axios

npm i axios -s 	默认就是-s 生产模式

代码-静态页面搭建

< router-link>< /router-link>没写target编译成a标签

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换

路由下面的子路由不能加/，加/的话就代表是/下面的路由了

在这里插入图片描述

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.js

<template>
  <div id="app">
    <!-- <Home></Home> -->
    <!-- <Login></Login> -->
    <!-- 访问路由会拿出对应的组件放到这个坑里面 -->
    <router-view></router-view>
  </div>
</template>

<script>
// 引入组件
// import Home from './views/Home'
// import Login from './views/Login'
export default {
  name: "App",
  components: {
    // 注册组件
    // Home,Login
  }
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  width: 100%;
  height: 100%;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

Home.js

<template>
  <div class="home">
    <el-container>
      <el-header class="header">
        <h1>CRM管理系统</h1>
        <div class="middle">
          <!-- active-class是vue-router模块的router-link组件中的属性，
          用来做选中样式的切换。  <router-link>没写target编译成a标签-->
          <router-link to="/crm" active-class="currnt">客户管理</router-link>
          <router-link to="/org" active-class="currnt">组织管理</router-link>
        </div>
        <div class="right">
          欢迎您：admin
          <span>安全退出</span>
        </div>
      </el-header>
      <!-- 这个坑里面放crm和org中的index.vue文件组件 -->
      <router-view></router-view>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {}
};
</script>

<style lang="less" scoped>
  .header{
    display: flex;
    background-color: #333333;
    color: #ffffff;
    h1{
      width: 200px;
      text-align: center;
      margin-left: -20px;
    }
    .middle{
      flex: auto;
      text-align: left;
      padding-left: 50px;
      a{
        color: #fff;
        padding: 0 10px;
        font-weight: bold;
        text-decoration: none;
        font-size: 20px;
      }
      a.currnt{
        color: salmon;
      }
    }
    .right{
      width: 200px;
    }
  }


  .el-footer{
    background-color: #333333;
    color: #ffffff;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 40px !important;
    line-height: 40px;
    text-align: center;
  }

  .el-header{
    text-align: center;
    line-height: 60px;
    height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
</style>

Login.js

<template>
  <div class="login_box">
    <div class="content">
      <h1>CRM管理系统</h1>
      <el-input placeholder="请输入用户名" >
        <i slot="prefix" class="el-input__icon el-icon-user"></i>
      </el-input>
      <el-input placeholder="请输入密码" >
        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
      </el-input>
      <el-button type="primary">登录</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name:"Login"
};
</script>
<style scoped lang="less">
.login_box{
  width: 100%;
  height: 100%;
  background-color: #eee;
  .content{
    width: 500px;
    height: 300px;
    padding-top: 30px;
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
    h1{
      text-align: center;
    }
    .el-input{
      width: 60%;
      margin: 30px auto 0;
      display: block;
    }
    button{
      display: block;
      width: 60%;
      margin: 30px auto;
    }
  }
}
</style>>

router中index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import routes from './route'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

router中route.js

import Home from "../views/Home.vue"
import Crm from "../components/crm"//可写可不写
import Org from "../components/org/index.vue"
export default [
    {
        path:'/',
        name:'Home',
        component:Home,
        children:[
            { 
                path:'crm',
                name:'Crm',
                component:Crm,
                children:[
                    //路由下面的子路由不能加/，加/的话就代表是/下面的路由了
                    {path:'customList',name:'customList',component:()=>import('../components/crm/custom/List.vue')},
                    {path:'customAdd',name:'customAdd',component:()=>import('../components/crm/custom/Add.vue')},
                ]
            },
            { 
                path:'org',
                name:'Org',
                component:Org,
                children:[
                    {path:'depList',name:'depList',component:()=>import('../components/org/dep/List.vue')},
                    {path:'depAdd',name:'depAdd',component:()=>import('../components/org/dep/Add.vue')},
                    {path:'jobList',name:'jobList',component:()=>import('../components/org/job/List.vue')},
                    {path:'jobAdd',name:'jobAdd',component:()=>import('../components/org/job/Add.vue')},
                    {path:'userList',name:'userList',component:()=>import('../components/org/user/List.vue')},
                    {path:'userAdd',name:'userAdd',component:()=>import('../components/org/user/Add.vue')},
                ]
            },
        ]
    },
    {
        path:'/login',
        name:'Login',
        component:()=>import('../views/Login.vue')
    }
]

crm中index.vue

<template>
  <div>
    <el-container class="container">
      <el-aside width="200px">
        <el-col>
          <el-menu
            default-active="2"
            class="my-menu"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>客户管理</span>
              </template>
              <router-link to="/crm/customList">
                <el-menu-item index="1-1">客户列表</el-menu-item>
              </router-link>
              <router-link to="/crm/customAdd">
                <el-menu-item index="1-2">新增客户</el-menu-item>
              </router-link>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <!-- 这个坑放对应的子路由，crm文件夹里面对应的组件 -->
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 这个坑放对应的子路由，crm文件夹里面对应的组件 -->
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
export default {
  name: "Crm",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  top: 60px;
  bottom: 40px;
  width: 100%;
  .el-aside {
    overflow: hidden;
    height: 100%;
    .el-col {
      height: 100%;
      ul {
        height: 100%;
        width: 110%;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    }
    .my-menu {
      a {
        text-decoration: none;
      }
    }
  }
}
</style>

org中index.vue

<template>
  <div>
    <el-container class="container">
      <el-aside width="200px">
        <el-col>
          <el-menu
            default-active="2"
            class="my-menu"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>部门管理</span>
              </template>
              <router-link to="/org/depList">
                <el-menu-item index="1-1">部门列表</el-menu-item>
              </router-link>
              <router-link to="/org/depAdd">
                <el-menu-item index="1-2">新增部门</el-menu-item>
              </router-link>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>职务管理</span>
              </template>
              <router-link to="/org/jobList">
                <el-menu-item index="2-1">职务列表</el-menu-item>
              </router-link>
              <router-link to="/org/jobAdd">
                <el-menu-item index="2-2">新增职务</el-menu-item>
              </router-link>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>员工管理</span>
              </template>
              <router-link to="/org/userList">
                <el-menu-item index="3-1">员工列表</el-menu-item>
              </router-link>
              <router-link to="/org/userAdd">
                <el-menu-item index="3-2">新增员工</el-menu-item>
              </router-link>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <!-- 这个坑放对应的子路由，org文件夹里面对应的组件 -->
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 这个坑放对应的子路由，org文件夹中各个文件夹里面对应的组件 -->
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
export default {
  name: "Org",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  top: 60px;
  bottom: 40px;
  width: 100%;
  .el-aside {
    overflow: hidden;
    height: 100%;
    .el-col {
      height: 100%;
      ul {
        height: 100%;
        width: 110%;
        overflow-y: scroll;
        overflow-x: hidden;
      }
    }
    .my-menu {
      a {
        text-decoration: none;
      }
    }
  }
}
</style>

Add和List，同理

<template>
    <div>
        组织管理-员工列表
    </div>
</template>
<script>
export default {
    name:'Crm'
}
</script>
<style lang="less" scoped>

</style>