Vue后台项目管理（）

代码实现用户列表，还有数据统计那个图。

包括验证之类的

 

 

 此处为用户列表代码

具体的暴露导入导出，还有路由地址之类，这个不难，差不多可以了

<template id="app">
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
 <!-- 搜索框添加 -->
  
  <el-row :gutter="20">
      <!-- 列和宽 -->
      <el-col :span="9"> <el-input placeholder="请输入内容" 
      v-model="queryInfo.query" clearable @clear="getUserList">
    <el-button slot="append" icon="el-icon-search"
     @click="getUserList"></el-button>
  </el-input></el-col>
      <el-col :span="4"> 
          <el-button type="primary" @click="addDialogVisible=true">
              添加用户
          </el-button>
      </el-col>
  </el-row>
  <!-- 用户列表区域 -->
  <el-table :data="userlist" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="username"> </el-table-column>
      <el-table-column label="邮箱" prop="email"> </el-table-column>
      <el-table-column label="电话" prop="mobile"> </el-table-column>
      <el-table-column label="角色" prop="role_name"></el-table-column>
      <el-table-column label="状态" prop="mg_state">
          <template slot-scope="scope">
              <!-- {{scope.row}} -->
             <el-switch v-model="scope.row.mg_state" @change=userStateChanged(scope.row)>
</el-switch>
          </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserByid(scope.row.id)"></el-button>
               <el-tooltip effect="dark" content="分配角色" placement="top">
      <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
    </el-tooltip>
              
          </template>
      </el-table-column>
  </el-table>
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
<!-- 添加用户对话框 -->
<el-dialog
  title="添加用户"
  :visible.sync="addDialogVisible"
  width="50%" @close="addDialogClosed">
  <!-- 内容区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="addForm.username"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="password">
    <el-input v-model="addForm.password"></el-input>
  </el-form-item>

  <el-form-item label="邮箱" prop="email">
    <el-input v-model="addForm.email"></el-input>
  </el-form-item>

  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="addForm.mobile"></el-input>
  </el-form-item>
</el-form>
  <!-- 按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改用户"
  :visible.sync="editDialogVisible"
  width="50%"
  @click="editDialogClosed" 
   >
   <!-- @close:"editDialogClosed" -->
  <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
  <el-form-item label="用户名">
    <el-input v-model="editForm.username" disabled></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="editForm.email"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="editForm.mobile"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
</el-dialog>
<!-- 分配角色 --> 
<el-dialog
  title="分配角色"
  :visible.sync="setRoleDialogVisible"
  width="50%"
  @close='setRoleDialogClosed'
  >
 <div>
     <p>当前用户:{{userInfo.username}}</p>
     <p>当前角色:{{userInfo.role_name}}</p>
     <p>分配新角色:
          <el-select v-model="selectedRoled" placeholder="请选择">
    <el-option
      v-for="item in rolesList"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
    </el-option>
  </el-select>
     </p>
 </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
// 点边上不能消失
<script>
export default {
        // name:"User",
    data() {
        // 验证邮箱
        var checkEmail = (rule,value,cb) =>{
            const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if(regEmail.test(value)){
                return cb()
            }
            cb(new Error('请输入正确邮箱'))
        }
        var checkMobile=(rule,value,cb)=>{
            const regMobile=/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if(regMobile.test(value)){
                return cb()
            }
            cb(new Error('请输入正确手机号'))
        }
        return {
            //获取用户列表得参数对象
            queryInfo:{
                query:'',
                pagenum:1,
                pagesize:2
            },
            getUserlist:[],
             userlist:[],
            total:0, 
            // 控制对话显示隐藏
            addDialogVisible:false,
            // 添加用户表单
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''
            },
            // addForm:{},
            // 添加验证
            addFormRules:{
            username:[
                {
                required:true,message:'请输入用户名',trigger:'blur'    
                },{
                    min:3,
                    max:10,
                    message:'字符在3-10之间',
                    trigger:'blur'
                }
        
            ],
            password:[
                {
                required:true,message:'输入正确密码',trigger:'blur'    
                },{
                    min:6,
                    max:15,
                    message:'字符在6-15之间',
                    trigger:'blur'
                }
        
            ],
            email:[
                 {
                required:true,message:'输入正确邮箱',trigger:'blur'    
                },
                {validator:checkEmail,trigger:'blur'}
            ],
            mobile:[
                 {
                required:true,message:'输入正确手机号',trigger:'blur'    
                },
                {validator:checkMobile,trigger:'blur'}
            ]
            },
            editDialogVisible:false,
            // 查询用户对象
             editForm: {},
             editFormRules:{
                //  修改表单用户规则
                email:[
                    {
                    require:true,message:'请输入邮箱',trigger:'blur'
                    },
                    {
                        validator:checkEmail,trigger:'blur'
                    }
                   
                ],
                mobile:[
                     {
                    require:true,message:'请输入手机号',trigger:'blur'
                    },
                    {
                        validator:checkMobile,trigger:'blur'
                    }
                ]
             },
             setRoleDialogVisible:false,
             userInfo:{},
            //  所有角色列表
            rolesList:[],
            selectedRoled:''
        }
    },
    created() {
        this.getUserList()
    },
   
    methods: {
       async getUserList(){
           const {data:res} = await this.$axios.get('users',{
               params:this.queryInfo
               })
              if(res.meta.status !==200){
                  return this.$message.error('获取用户列表失败')
              }
              this.userlist=res.data.users
                this.total =res.data.total
                // console.log(res);
},
// 监听页码之类的
handleSizeChange(newSize){
    this.queryInfo.pagesize=newSize
    this.getUserList()

},
handleCurrentChange(newPage){
    this.queryInfo.pagenum=newPage
    this.getUserList()

},
async userStateChanged(userinfo){
       const{data:res}=await this.$axios.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
       if(res.meta.status !==200){
           userinfo.mg_state=!userinfo.mg_state
           return this.$message.error('更新失败')
       }
       this.$message.success('更新成功')
    },
    addDialogClosed(){
        this.$refs.addFormRef.resetFields()
    },
    addUser(){
        this.$refs.addFormRef.validate(async valid =>{
            if(!valid) return
            const {data:res}=await this.$axios.post
            ('users',this.addForm)
            if(res.meta.status !==201){
                this.$message.error('添加用户失败')
            }
            this.$message.success('添加用户成功')
            this.addDialogVisible=false
            this.getUserList()
            
        })
    },
    async showEditDialog(id){

        // this.editDialogVisible=true
       const {data:res} = await this.$axios.get('users/'+id)
        // this.editDialogVisible =true
        if(res.meta.status !==200){
            return this.$message.error('查询用户失败')
        }
        this.editForm =res.data
        this.editDialogVisible=true

    },
    editDialogClosed(){
        this.$refs.editFormRef.resetFields()
    },
    editUserInfo(){
        // 修改用户提交61
        this.$refs.editFormRef.validate(async valid=>{
            if(!valid)return
            // 发起修改用户信息的请求数据
            const {data:res}=await this.$axios.put('users/'+
            this.editForm.id,{
                email:this.editForm.email,
                mobile:this.editForm.mobile
            })
            if(res.meta.status !==200){
                return this.$message.error('更新用户失败')
            }
            // 关闭对话框
            this.editDialogVisible=false
            // 更新数据列表
            this.getUserList()
            this.$message.success('更新用户信息成功')
        })

    },
   async removeUserByid(id){
        // 根据id删除
        // console.log(id);
      const confirmResult=await  this.$confirm('是否删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).catch(err=>err)
     
        if(confirmResult !=='confirm'){
            return this.$message.info('已经取消删除')
        }
       const {data:res} = await this.$axios.delete('users/'
       + id )
        //   console.log(456);
       if(res.meta.status !==200){
           return this.$message.error('删除用户失败')
       }
       this.$message.success('删除用户成功')
       this.getUserList()
    },
   async setRole(userInfo){
        this.userInfo=userInfo
        // 获取角色列表
        const {data:res}=await this.$axios.get('roles')
        if(res.meta.status !==200){
            return this.$message.error('获取角色列表')
        }
        this.rolesList =res.data

        this.setRoleDialogVisible=true

        // this.setRoleDialogVisible=true
    },
 async saveRoleInfo(){
     if(!this.selectedRoled){
         return this.$message.error('请选择要分配的角色')
     }
     const {data:res} =await this.$axios.put(
         `users/${this.userInfo.id}/role`,
         {
             rid:this.selectedRoled
         }
     )
     if(res.meta.status !==200){
         return this.$message.error('更新角色失败')
     }
     this.$message.success('更新角色成功')
     this.getUserList()
     this.setRoleDialogVisible=false

},
setRoleDialogClosed(){
    this.selectedRoled=''
    this.userInfo={}
}
    
    }
    
}
// 啥是validate，是不是close
</script>
// 防止组件之间样式冲突
<style lang="less" scoped>
    .el-breadcrumb{
        margin-bottom: 10px;
        font-size: 12px;
        width: 100%;
    }
    .el-card{
       width: 1200px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .15) !important;
    }
    .el-table{
        margin-top: 15px;
        font-size: 12px;
    }
    .el-pagination{
        margin-top: 15px;
    }
</style>

此处为图代码

<template id="app">
    <div>
        <!-- 面包屑导航区 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
        <!-- 卡片视图 -->
 <el-card>     
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<!--     <div id="main" style="width: 600px; height: 400px"> </div> -->
<div id="main" style="width: 1200px;height:600px;"></div>
 </el-card>
    </div>
</template>

<script>
// 1.导入 echarts

import * as echarts from "echarts";
// var myChart = echarts.init(document.getElementById('main'));
import _ from "lodash";
import {
  BarChart, // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
} from "echarts/charts";
import {
  TitleComponent, // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  GridComponent,
  GridComponentOption,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent, // TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
]);
export default {
  data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
    };
  }, // 此时页面上的元素，已经被渲染完毕
  async mounted() {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    const { data: res } = await this.$axios.get("reports/type/1");
    console.log(res); // merge 函数，可以合并两个对象
    // 4.指定图表的配置项和数据
    const result = _.merge(res.data, this.options); // 5.使用刚指定的配置项和数据显示图表。

    myChart.setOption(result);
  },
};
</script>

<style lang="less" scoped>
.el-card{
    width: 1200px;
    height: 680px;
}
</style>