添加数据统计在职和离职员工总数

yijiusmile

2021-02-14 40b50de679b9acc9444cd5057c0feece133c5e5a

添加数据统计在职和离职员工总数

 src/views/statistics/inEmpCount.vue

@@ -7,315 +7,106 @@
            <h3 class="bu-tian-jia-title">在职员工总数</h3>

          </el-col>

          <el-col :span="8">

            <el-input v-model="input" placeholder="请输入内容" style="width:200px" />

            <el-button type="primary">查询</el-button>

            <el-input v-model="queryParams.empNumb" placeholder="请输入内容" style="width:200px" />

            <el-button type="primary" @click="search()">查询</el-button>

          </el-col>

        </el-row>



      </el-header>

      <el-container>

        <el-main>

          <el-table :data="tableData">

            <el-table-column prop="prop0" label="序号" width="180" />

            <el-table-column prop="prop1" label="员工编号" width="180" />

            <el-table-column prop="prop2" label="护卫点" width="180" />

            <el-table-column prop="prop3" label="岗位" width="180" />

            <el-table-column prop="prop4" label="姓名" width="180" />

            <el-table-column prop="prop5" label="身份证号" width="180" />

            <el-table-column prop="prop6" label="性别" width="180" />

            <el-table-column prop="prop7" label="年龄" width="180" />

            <el-table-column prop="prop8" label="学历" width="180" />

            <el-table-column prop="prop9" label="籍贯" width="180" />

            <el-table-column prop="prop10" label="联系电话" width="180" />

            <el-table-column prop="prop11" label="入职日期" width="180" />

            <el-table-column prop="prop12" label="员工状态" width="180" />

          </el-table>

          <el-table :data="tableData">
            <el-table-column label="序号" type="index" width="50" align="center" />

            <el-table-column prop="empNumb" label="员工编号" />

            <el-table-column prop="deptName" label="护卫点" />

            <el-table-column prop="jobName" label="岗位" />

            <el-table-column prop="empName" label="姓名" />

            <el-table-column prop="certificateNumb" label="身份证号码" width="180" />

            <el-table-column prop="sexName" label="性别" />

            <el-table-column prop="age" label="年龄" />

            <el-table-column prop="educationName" label="学历" />

            <el-table-column prop="nativePlaceName" label="籍贯" />

            <el-table-column prop="urgencyPhone" label="联系电话" />

            <el-table-column prop="entryDate" label="入职日期" />

            <el-table-column prop="delFlag" label="员工状态">
              <template slot-scope="{row}">
                {{ transDelFlag(row.delFlag) }}
              </template>
            </el-table-column>

          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pagination.num"
            :limit.sync="pagination.size"
            @pagination="search"
          />

        </el-main>

      </el-container>

    </el-container>



  </div>

</template>

<script>

export default {

<script>
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },

  data() {

    return {

    return {
      total: 0, // 总数量
      queryParams: {}, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 5,
        num: 1
      },

      headerHeight: '70px',

      advancedQueryShow: false,

      dialogTableVisible: false,

      tableData: [{

        'prop0': '1',

        'prop1': '2100452312',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '赵建国',

        'prop5': '510304197402225813',

        'prop6': '男',

        'prop7': '46',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '2',

        'prop1': '2101620946',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '罗启艳',

        'prop5': '41272619740120543X',

        'prop6': '女',

        'prop7': '46',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '3',

        'prop1': '2100629950',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '毛玉平',

        'prop5': '522528198202071629',

        'prop6': '男',

        'prop7': '38',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '4',

        'prop1': '2100882835',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '梅均均',

        'prop5': '510504198704260927',

        'prop6': '女',

        'prop7': '33',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '5',

        'prop1': '2101356718',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '王香妮',

        'prop5': '433122199508091511',

        'prop6': '女',

        'prop7': '25',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '6',

        'prop1': '2100900981',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '易金洪',

        'prop5': '610424198306152860',

        'prop6': '男',

        'prop7': '39',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '7',

        'prop1': '2101529670',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '李忠敏',

        'prop5': '511123198602016016',

        'prop6': '男',

        'prop7': '32',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '8',

        'prop1': '2101578011',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '徐健',

        'prop5': '512927197202166053',

        'prop6': '男',

        'prop7': '48',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '9',

        'prop1': '2100326122',

        'prop2': '一分公司',

        'prop3': '经理',

        'prop4': '曾昌玖',

        'prop5': '510322197606103351',

        'prop6': '男',

        'prop7': '44',

        'prop8': '本科',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '10',

        'prop1': '2101788698',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '赵高',

        'prop5': '511123197510263074',

        'prop6': '男',

        'prop7': '45',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '11',

        'prop1': '2101861146',

        'prop2': '一分公司',

        'prop3': '主管',

        'prop4': '王忠山',

        'prop5': '522426199904290419',

        'prop6': '男',

        'prop7': '21',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '12',

        'prop1': '2100315416',

        'prop2': '一分公司',

        'prop3': '经理',

        'prop4': '严福林',

        'prop5': '433130197205180710',

        'prop6': '男',

        'prop7': '48',

        'prop8': '本科',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }, {

        'prop0': '13',

        'prop1': '2101382208',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '叶金云',

        'prop5': '512923197703020639',

        'prop6': '男',

        'prop7': '43',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '1350987861234',

        'prop11': '2019-08-01',

        'prop12': '在职'

      }]

      tableData: []

    }

  },

  methods: {

    handleNodeClick(data) {

      console.log(data)

  },
  mounted() {
    this.search()
  },
  methods: {
    // 翻页方法
    search() {
      this.queryParams.empName = this.queryParams.empNumb
      this.queryParams.deptName = this.queryParams.empNumb
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    fetch(params = {}) {
      var that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      params.delFlag = 0
      this.$get('hr/empBaseInfo/list', {
        ...params
      }).then((r) => {
        const data = r.data.data
        that.total = data.total
        that.tableData = data.rows
      })
    },

    advancedQueryShowMethods() {

      if (this.advancedQueryShow) {

        this.headerHeight = '70px'

        this.advancedQueryShow = false

      } else {

        this.headerHeight = '300px'

        this.advancedQueryShow = true

      }

    },

    showEmpInfo() {

      this.dialogTableVisible = true

    transDelFlag(delFlag) {
      switch (delFlag) {
        case 0:
          return '正常'
        case 1:
          return '删除'
        case 2:
          return '暂存'
      }
    }

  }

}

</script>

<style lang="scss" scoped>



  .el-main {

    height: 600px;

  }

</style>

<style lang="scss">

  .el-aside {

    padding: 20px;

    background: #f3f5f8;

    height: 600px;



    .el-tree {

      height: 100%;

    }

  }



  #searchTable {

    margin-top: 10px;

    border-collapse: collapse;

    width: 100%;

  }



  #searchTable td,

  #searchTable th {

    border: 1px solid #cad9ea;

    color: #666;

    height: 30px;

  }



  #ygxq table {

    border-collapse: collapse;

    margin: 0 auto;

    text-align: center;

    width: 100%;

    margin-top: 20px;

  }



  #ygxq table td,

  #ygxq table th {

    border: 1px solid #DDDCDC;

    color: #666;

    height: 30px;

  }



  #ygxq table thead th {

    background-color: #CCE8EB;

    width: 100px;

  }



  #ygxq table tr:nth-child(odd) {

    background: #fff;

  }



  #ygxq table tr:nth-child(even) {

    background: #F5FAFA;

  }



  .tdTitle {

    font-size: 14px;

    font-weight: 700;

    text-align: left;

  }



  .link_button {

    color: #169BD5;

  }



  .del_button {

    color: #D9001B;

  }

</style>


 src/views/statistics/outEmpCount.vue

@@ -4,11 +4,11 @@
      <el-header :height="headerHeight">

        <el-row>

          <el-col :span="16">

            <h3 class="bu-tian-jia-title">离职员工总数</h3>

            <h3 class="bu-tian-jia-title">离员工总数</h3>

          </el-col>

          <el-col :span="8">

            <el-input v-model="input" placeholder="请输入内容" style="width:200px" />

            <el-button type="primary">查询</el-button>

            <el-input v-model="queryParams.empNumb" placeholder="请输入内容" style="width:200px" />

            <el-button type="primary" @click="search()">查询</el-button>

          </el-col>

        </el-row>



@@ -16,20 +16,31 @@
      <el-container>

        <el-main>

          <el-table :data="tableData">

            <el-table-column prop="prop0" label="序号" width="180" />

            <el-table-column prop="prop1" label="员工编号" width="180" />

            <el-table-column prop="prop2" label="护卫点" width="180" />

            <el-table-column prop="prop3" label="岗位" width="180" />

            <el-table-column prop="prop4" label="姓名" width="180" />

            <el-table-column prop="prop5" label="身份证号" width="180" />

            <el-table-column prop="prop6" label="性别" width="180" />

            <el-table-column prop="prop7" label="年龄" width="180" />

            <el-table-column prop="prop8" label="学历" width="180" />

            <el-table-column prop="prop9" label="籍贯" width="180" />

            <el-table-column prop="prop10" label="联系电话" width="180" />

            <el-table-column prop="prop11" label="入职日期" width="180" />

            <el-table-column prop="prop12" label="员工状态" width="180" />

            <el-table-column label="序号" type="index" width="50" align="center" />
            <el-table-column prop="empNumb" label="员工编号" />
            <el-table-column prop="deptName" label="护卫点" />
            <el-table-column prop="jobName" label="岗位" />
            <el-table-column prop="empName" label="姓名" />
            <el-table-column prop="certificateNumb" label="身份证号码" width="180" />
            <el-table-column prop="sexName" label="性别" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="educationName" label="学历" />
            <el-table-column prop="nativePlaceName" label="籍贯" />
            <el-table-column prop="urgencyPhone" label="联系电话" />
            <el-table-column prop="entryDate" label="入职日期" />
            <el-table-column prop="delFlag" label="员工状态">

              <template slot-scope="{row}">

                {{ transDelFlag(row.delFlag) }}

              </template>

            </el-table-column>

          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pagination.num"
            :limit.sync="pagination.size"

            @pagination="search"
          />

        </el-main>

      </el-container>

    </el-container>

@@ -37,285 +48,65 @@
  </div>

</template>

<script>

import Pagination from '@/components/Pagination'

export default {

  components: {

    Pagination

  },

  data() {

    return {

      total: 0, // 总数量

      queryParams: {}, // 查询参数

      sort: {}, // 排序

      pagination: { // 分页参数

        size: 5,

        num: 1

      },

      headerHeight: '70px',

      advancedQueryShow: false,

      dialogTableVisible: false,

      tableData: [{

        'prop0': '1',

        'prop1': '2100452312',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '赵建国',

        'prop5': '510304197402225813',

        'prop6': '男',

        'prop7': '46',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '2',

        'prop1': '2101620946',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '罗启艳',

        'prop5': '41272619740120543X',

        'prop6': '女',

        'prop7': '46',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '3',

        'prop1': '2100629950',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '毛玉平',

        'prop5': '522528198202071629',

        'prop6': '男',

        'prop7': '38',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '4',

        'prop1': '2100882835',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '梅均均',

        'prop5': '510504198704260927',

        'prop6': '女',

        'prop7': '33',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '5',

        'prop1': '2101356718',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '王香妮',

        'prop5': '433122199508091511',

        'prop6': '女',

        'prop7': '25',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '6',

        'prop1': '2100900981',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '易金洪',

        'prop5': '610424198306152860',

        'prop6': '男',

        'prop7': '39',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '7',

        'prop1': '2101529670',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '李忠敏',

        'prop5': '511123198602016016',

        'prop6': '男',

        'prop7': '32',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '8',

        'prop1': '2101578011',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '徐健',

        'prop5': '512927197202166053',

        'prop6': '男',

        'prop7': '48',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '9',

        'prop1': '2100326122',

        'prop2': '一分公司',

        'prop3': '经理',

        'prop4': '曾昌玖',

        'prop5': '510322197606103351',

        'prop6': '男',

        'prop7': '44',

        'prop8': '本科',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '10',

        'prop1': '2101788698',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '赵高',

        'prop5': '511123197510263074',

        'prop6': '男',

        'prop7': '45',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '133023187889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '11',

        'prop1': '2101861146',

        'prop2': '一分公司',

        'prop3': '主管',

        'prop4': '王忠山',

        'prop5': '522426199904290419',

        'prop6': '男',

        'prop7': '21',

        'prop8': '大专',

        'prop9': '广东省番禺市',

        'prop10': '189135789889',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '12',

        'prop1': '2100315416',

        'prop2': '一分公司',

        'prop3': '经理',

        'prop4': '严福林',

        'prop5': '433130197205180710',

        'prop6': '男',

        'prop7': '48',

        'prop8': '本科',

        'prop9': '广东省番禺市',

        'prop10': '135098784561',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }, {

        'prop0': '13',

        'prop1': '2101382208',

        'prop2': '一分公司',

        'prop3': '保安员',

        'prop4': '叶金云',

        'prop5': '512923197703020639',

        'prop6': '男',

        'prop7': '43',

        'prop8': '高中',

        'prop9': '广东省番禺市',

        'prop10': '1350987861234',

        'prop11': '2019-08-01',

        'prop12': '正常离职'

      }]

      tableData: []

    }

  },

  mounted() {

    this.search()

  },

  methods: {

    handleNodeClick(data) {

      console.log(data)

    // 翻页方法

    search() {

      this.queryParams.empName = this.queryParams.empNumb

      this.queryParams.deptName = this.queryParams.empNumb

      this.fetch({

        ...this.queryParams,

        ...this.sort

      })

    },

    advancedQueryShowMethods() {

      if (this.advancedQueryShow) {

        this.headerHeight = '70px'

        this.advancedQueryShow = false

      } else {

        this.headerHeight = '300px'

        this.advancedQueryShow = true

    fetch(params = {}) {

      var that = this

      params.pageSize = this.pagination.size

      params.pageNum = this.pagination.num

      params.delFlag = 1

      this.$get('hr/empBaseInfo/list', {

        ...params

      }).then((r) => {

        const data = r.data.data

        that.total = data.total

        that.tableData = data.rows

      })

    },

    transDelFlag(delFlag) {

      switch (delFlag) {

        case 0:

          return '正常'

        case 1:

          return '删除'

        case 2:

          return '暂存'

      }

    },

    showEmpInfo() {

      this.dialogTableVisible = true

    }

  }

}

</script>

<style lang="scss" scoped>



  .el-main {

    height: 600px;

  }

</style>

<style >

  .el-aside {

    padding: 20px;

    background: #f3f5f8;

    height: 600px;



    .el-tree {

      height: 100%;

    }

  }



  #searchTable {

    margin-top: 10px;

    border-collapse: collapse;

    width: 100%;

  }



  #searchTable td,

  #searchTable th {

    border: 1px solid #cad9ea;

    color: #666;

    height: 30px;

  }



  #ygxq table {

    border-collapse: collapse;

    margin: 0 auto;

    text-align: center;

    width: 100%;

    margin-top: 20px;

  }



  #ygxq table td,

  #ygxq table th {

    border: 1px solid #DDDCDC;

    color: #666;

    height: 30px;

  }



  #ygxq table thead th {

    background-color: #CCE8EB;

    width: 100px;

  }



  #ygxq table tr:nth-child(odd) {

    background: #fff;

  }



  #ygxq table tr:nth-child(even) {

    background: #F5FAFA;

  }



  .tdTitle {

    font-size: 14px;

    font-weight: 700;

    text-align: left;

  }



  .link_button {

    color: #169BD5;

  }



  .del_button {

    color: #D9001B;

  }

</style>

</style>