基于vuecli实现员工管理系统

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Nav.vue

// Nav.vue
<template>
  <!-- 面包屑 -->
  <nav class="breadcrumb">
    <a class="breadcrumb-item" href="#">首页</a>
    <span class="breadcrumb-item active">员工管理</span>
    <a class="breadcrumb-item" href="#">About</a>
  </nav>
</template>


<script>
export default {};
</script>

Table.vue

// Table.vue
<template>
  <div class="container-fluid">
    <!-- 标题 -->
    <div class="row">
      <div class="col">
        <!-- 使用BootStrap预定义的选择器 -->
        <h1 class="text-center">员工信息</h1>
      </div>
    </div>

    <!-- 新建 批量删除 -->
    <div class="row">
      <div class="col">
        <button type="button" class="btn btn-primary mr-3">新建</button>
        <button @click="del()" type="button" class="btn btn-danger">批量删除</button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="row my-3">
      <div class="col">
        <table class="table table-bordered table-striped">
          <thead class="text-center">
            <tr>
              <th>
                <!-- 全选 -->
                <input @change="checkAll" v-model="isAll" type="checkbox" />
              </th>
              <th>员工编号</th>
              <th>员工姓名</th>
              <th>入职时间</th>
              <th>所在城市</th>
              <th>婚姻状况</th>
              <th>部门</th>
              <th>技能</th>
              <th style="width:15%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(s, index) in staffByPage" :key="index">
              <td class="text-center">
                <input @change="check" type="checkbox" v-model="checked" :value="s.id" />
              </td>
              <td>{{s.id}}</td>
              <td>{{s.name}}</td>
              <td>{{s.hire}}</td>
              <td>{{s.city}}</td>
              <td>{{s. marry}}</td>
              <td>{{s.dept}}</td>
              <td>
                <span
                  v-for="(item, index) in s.skill"
                  :key="index"
                  class="badge badge-pill badge-danger mx-2"
                >{{item}}</span>
              </td>
              <td>
                <div class="row">
                  <div class="col-lg-6 col-sm-12">
                    <button type="button" class="btn btn-primary btn-sm mr-3">编辑</button>
                  </div>
                  <div class="col-lg-6 col-sm-12">
                    <!-- 删除 -->
                    <button
                      type="button"
                      class="btn btn-danger btn-sm"
                      data-toggle="modal"
                      :data-target="'#model'+s.id"
                    >删除</button>
                    <!-- Button trigger modal -->
                    <!-- <button type="button"
                                         class="btn btn-primary btn-lg" 
                                        >
                                          Launch
                    </button>-->

                    <!-- 对话框 -->
                    <!-- 每个删除按钮有一个属于自己的对话框 -->
                    <!-- Modal -->
                    <div
                      class="modal fade"
                      :id="'model'+s.id"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="modelTitleId"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title">提示</h5>
                            <button
                              type="button"
                              class="close"
                              data-dismiss="modal"
                              aria-label="Close"
                            >
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body text-left">删除编号为 {{s.id}} 员工，永久删除，是否确定</div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button
                              @click="remove(s.id)"
                              type="button"
                              class="btn btn-primary"
                              data-dismiss="modal"
                            >确定</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="row">
      <div class="col">
        <nav aria-label="Page navigation">
          <ul class="pagination justify-content-center">
            <li class="page-item ">
              <a class="page-link" href="#" aria-label="Previous">
                <span @click="pre()" aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            <!-- <li class="page-item "><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2</a></li>-->
            <!-- vue 样式 ：当前页高亮显示（状态）-->
            <li
              v-for="(n, index) in total"
              :key="index"
              @click="toPage(n)"
              :class="{active:current===n}"
              class="page-item"
            >
              <a class="page-link" href="#">{{n}}</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span  @click="next(total)" aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState, mapGetters, mapActions} from "vuex";

export default {
  name: "Table",

  data() {
    return {
      // 复选框的状态
      checked: [],
      //   是否全部选中
      isAll: false
    };
  },
  methods: {
    ...mapActions(["toPage", "remove","next","pre"]),
   
    // 全选
    checkAll: function() {
      // 清空选中的
      this.checked = [];
      // 如果选中，isAl为TRUE
      if (this.isAll) {
        // 遍历该页面的数据，把每条记录的编号都存入checked
        for (const s of this.staffByPage) {
          this.checked.push(s.id);
        }
      }
    },

    //全选后在取消选项的
    check: function() {
      this.isAll = false;
    },

    // 批量删除
    del: function() {
      for (const i of this.checked) {
        // 调用删除的方法
        this.remove(i);
      }
      // 清空checked
      this.checked = [];
    },

       
  },

  computed: {
    ...mapState(["staffList", "current"]),

    ...mapGetters(["staffByPage", "total"])
  }
};
</script>

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  // 所有数据
  staffList: [
    {
      id: 1,
      name: '李文',
      hire: '2000/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap', 'Vue']
    },
    {
      id: 2,
      name: '李亮',
      hire: '2000/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap']
    },
    {
      id: 3,
      name: '李亮',
      hire: '200/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap']
    },
    {
      id: 4,
      name: '李亮',
      hire: '200/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap']
    },
    {
      id: 5,
      name: '李亮',
      hire: '200/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap']
    },
    {
      id: 6,
      name: '李亮',
      hire: '200/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap']
    },
    {
      id: 7,
      name: '李亮',
      hire: '200/01/01',
      city: '长沙',
      marry: '未婚',
      dept: '研发一部',
      skill: ['BootStrap']
    }


  ],

  // 每个页面多少数据
  size: 5,
  // 当前的位置：第1页
  current: 1
  // 共多少页

}

const mutations = {
  // 设置当前页的位置
  SET_CURRENT(state, n) {
    state.current = n;
  },

  REMOVE_STAFF_BY_ID(state, id) {
    // 遍历员工列表
    for (const i in state.staffList) {
      // 基于编号匹配
      if (id === state.staffList[i].id) {
        state.staffList.splice(i,1);
      }
    }
  },

// 下一页的数据
  NEXT(state,total){
    if(state.current<total){
    state.current++;
    }
  },

  //上一页的
  PRE(state){
    if(state.current>1){
      state.current--;
    }
  } 

  
}

const getters = {
  // 分页 ： 获得页面位置，根据页面位置 计算 页面中需要加载的数据（slice 函数）
  // 一页的数据
  staffByPage(state) {
    // slice (?start,?end)
    //返回数组的一部分
    // 起始位置 0. 2， 4,6
    let start = (state.current - 1) * state.size;
    // 结束位置 2, 4 ,6 ,8
    let end = start + state.size;
    return state.staffList.slice(start, end)
  },
  // 总页面数
  total(state) {
    // 向上取整  Math.ceil()
    // 向下取整  Math.floor()
    //           Math.round()
    //            Math.random()
    return Math.ceil(state.staffList.length / state.size)
  }
}

const actions = {
  toPage(context, payload) {
    // 跳转到第n页
    context.commit('SET_CURRENT', payload)
  },

  remove(context, id) {
    context.commit('REMOVE_STAFF_BY_ID', id)
  },

  next(context,total){
    context.commit('NEXT',total);
  },

  pre(context){
    context.commit('PRE');
  }
}
export default new Vuex.Store({
  state: state,
  mutations: mutations,
  actions: actions,
  getters: getters,
  modules: {
  }
})

App.vue

// App.vue
<template>
  <div id="app">
    <Nav/>
    <Table/>
  </div>
</template>

<script>
import Nav from './components/Nav.vue'
import Table from './components/Table.vue'

export default {
  name: 'App',
  components: {
   Nav,
   Table
  }
}
</script>

package.json

{
  "name": "2020.3.16",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  }
}

界面效果如图所示

爷叼烟闯天下

发布了113 篇原创文章 · 获赞 130 · 访问量 1万+

私信关注

基于vuecli实现员工管理系统

index.html

Nav.vue

Table.vue

index.js

App.vue

package.json

猜你喜欢