..

[1124498879]

2021-06-07 0eb8d716ee0f9a952ada4e0e15a96aa2c9866156

 src/views/user/selectuser.vue

@@ -1,378 +1,184 @@
<template>

  <div>

    <el-container>

      <el-header :height="headerHeight">

        <el-row>

          <el-col :span="16">

            <h3 class="bu-tian-jia-title" />

          </el-col>

          <el-col :span="8">

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

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

            <el-button type="danger" @click.native="advancedQueryShowMethods">高级查询</el-button>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="8">

            <!-- <el-button type="danger">导出EXCEL</el-button> -->

          </el-col>

        </el-row>

        <div v-show="advancedQueryShow">

          <form>

            <el-row>

              <el-col :span="3">员工编号：

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

              </el-col>

              <el-col :span="3">姓名：

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

              </el-col>

              <el-col :span="3">身份证号：

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

              </el-col>

              <el-col :span="3">所属部门：

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

              </el-col>

              <el-col :span="3">岗位：

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

              </el-col>

              <el-col :span="3">保安证号：

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

              </el-col>

              <el-col :span="6">

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

                <el-button type="danger">重置</el-button>

              </el-col>

            </el-row>

            <el-row>

              <el-col :span="24">

                <table id="searchTable">

                  <tr>

                    <td>搜索项：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">基本信息</el-radio>

                        <el-radio :label="6">工作信息</el-radio>

                        <el-radio :label="9">工作经历</el-radio>

                        <el-radio :label="9">体检信息</el-radio>

                        <el-radio :label="9">合同信息</el-radio>

                        <el-radio :label="9">考勤情况</el-radio>

                        <el-radio :label="9">员工请假</el-radio>

                        <el-radio :label="9">员工调岗</el-radio>

                        <el-radio :label="9">备注信息</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>性别：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">男性</el-radio>

                        <el-radio :label="9">女性</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>最高学历：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">初中</el-radio>

                        <el-radio :label="9">高中</el-radio>

                        <el-radio :label="9">大专</el-radio>

                        <el-radio :label="9">本科</el-radio>

                        <el-radio :label="9">硕士</el-radio>

                        <el-radio :label="9">博士</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>政治面貌：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">党员</el-radio>

                        <el-radio :label="9">团员</el-radio>

                        <el-radio :label="9">群众</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>入职日期：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>身高：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">150-159</el-radio>

                        <el-radio :label="9">160-169</el-radio>

                        <el-radio :label="9">170-179</el-radio>

                        <el-radio :label="9">180-189</el-radio>

                        <el-radio :label="9">190-199</el-radio>

                        <el-radio :label="9">200及以上</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>年龄：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">18-29</el-radio>

                        <el-radio :label="9">30-39</el-radio>

                        <el-radio :label="9">40-49</el-radio>

                        <el-radio :label="9">50-59</el-radio>

                        <el-radio :label="9">60-69</el-radio>

                        <el-radio :label="9">69及以上</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>档案情况：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">已移交</el-radio>

                        <el-radio :label="9">未移交</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                  <tr>

                    <td>员工状态：</td>

                    <td>

                      <el-radio-group v-model="radio">

                        <el-radio :label="3">全部</el-radio>

                        <el-radio :label="6">在职</el-radio>

                        <el-radio :label="6">正常离职</el-radio>

                        <el-radio :label="6">自动离职</el-radio>

                        <el-radio :label="6">公司辞退</el-radio>

                      </el-radio-group>

                    </td>

                  </tr>

                </table>

              </el-col>

            </el-row>

          </form>

        </div>

      </el-header>

      <el-container>

        <el-aside width="400px">

          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />

        </el-aside>

        <el-main>

          <el-table

            ref="multipleTable"

            :data="tableData"

            style="width: 100%;height: 90%;"

            row-key="prop1"

            @selection-change="handleSelectionChange"

          >

            <el-table-column type="selection" :reserve-selection="true" width="55" />

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

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

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

          </el-table>

          <el-button type="primary" @click="sureChoose">确定</el-button>

          <el-button type="danger" @click="cancleChoose">取消</el-button>

        </el-main>

      </el-container>

    </el-container>

  </div>

</template>

<script>

export default {

  data() {

    return {

      headerHeight: '70px',

      advancedQueryShow: false,

      dialogTableVisible: false,

      multipleSelection: [],

      tableData: [{

        'prop0': '1',

        'prop1': '2100452312',

        'prop2': '赵建国',

        'prop3': '男',

        'prop4': '510304197402225813',

        'prop5': '10',

        'prop6': '汉族',

        'prop7': '170',

        'prop8': '46',

        'prop9': '党员',

        'prop10': '大专',

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

        'prop12': '',

        'prop13': '',

        'prop14': '已移交',

        'prop15': '在职',

        'prop16': '133023187889'

      }, {

        'prop0': '2',

        'prop1': '2101620946',

        'prop2': '罗启艳',

        'prop3': '女',

        'prop4': '41272619740120543X',

        'prop5': '10',

        'prop6': '汉族',

        'prop7': '175',

        'prop8': '46',

        'prop9': '团员',

        'prop10': '高中',

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

        'prop12': '',

        'prop13': '',

        'prop14': '已移交',

        'prop15': '在职',

        'prop16': '189135789889'

      }],

      data: [{

        label: '一级 1',

        children: [{

          label: '二级 1-1',

          children: [{

            label: '三级 1-1-1'

          }]

        }]

      },

      {

        label: '一级 2',

        children: [{

          label: '二级 2-1',

          children: [{

            label: '三级 2-1-1'

          }]

        },

        {

          label: '二级 2-2',

          children: [{

            label: '三级 2-2-1'

          }]

        }

        ]

      },

      {

        label: '一级 3',

        children: [{

          label: '二级 3-1',

          children: [{

            label: '三级 3-1-1'

          }]

        },

        {

          label: '二级 3-2',

          children: [{

            label: '三级 3-2-1'

          }]

        }

        ]

      }

      ],

      defaultProps: {

        children: 'children',

        label: 'label'

      }

    }

  },

  methods: {

    handleNodeClick(data) {

      console.log(data)

    },

    handleSelectionChange(val) {

      this.multipleSelection = val

    },

    advancedQueryShowMethods() {

      if (this.advancedQueryShow) {

        this.headerHeight = '70px'

        this.advancedQueryShow = false

      } else {

        this.headerHeight = '410px'

        this.advancedQueryShow = true

      }

    },

    showEmpInfo() {

      this.dialogTableVisible = true

    },

    sureChoose() {

      this.$emit('selectedUser', this.multipleSelection)

    },

    cancleChoose() {

      this.$emit('cancleChooseUser')

    }

  }

}

</script>

<style lang="scss">

  .el-aside {

    padding: 20px;

    background: #f3f5f8;

    height: 600px;



    .el-tree {

      height: 100%;

    }

  }



  .el-main {

    height: 600px;

  }



  #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>

<template>
  <div id="mainDiv">
    <el-header :height="headerHeight">
      <el-form>
        <el-row style="height: 45px;">
          <el-col :span="10">
            <el-form-item label="关键字">
              <el-input v-model="queryParams.baseKey" placeholder="请输入内容" style="width:200px" />
            </el-form-item>
          </el-col>
          <el-col :span="10" style="height: 100%;">
            <el-form-item label="员工状态">
              <el-checkbox-group v-model="queryParams.empStatus">
                <el-checkbox :label="0">在职</el-checkbox>
                <el-checkbox :label="1">离职</el-checkbox>
                <el-checkbox :label="2">退休</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" class="hr-but-all" type="primary" @click="vagueSearch">查询</el-button>
            <el-button size="mini" class="hr-but" type="danger" @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
        <el-row style="text-align: right;height: 45px;line-height: 45px">
          <el-button type="primary" @click="sureChoose">确定</el-button>
          <el-button type="danger" @click="cancleChoose">取消</el-button>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="list"
        row-key="prop1"
        :cell-style="{padding:'7px 0','text-align':'center'}"
        :header-cell-style="{'height':'5.3vh','background-color':'#e6e6e6','text-align':'center'}"
        stripe
        border
        style="width: 100%;color: #000;"
        @selection-change="handleSelectionChange"
        @row-dblclick="rowDblclick"
        @sort-change="changeSort"
      >
        <el-table-column show-overflow-tooltip type="selection" :reserve-selection="false" width="50" />
        <el-table-column v-if="show" show-overflow-tooltip prop="empId" label="员工Id" />
        <el-table-column show-overflow-tooltip prop="empNumb" label="编号" width="80" />
        <el-table-column show-overflow-tooltip prop="empName" label="姓名" width="110" />
        <el-table-column show-overflow-tooltip prop="certificateNumb" label="身份证号码" min-width="120" />
        <el-table-column v-if="show" show-overflow-tooltip prop="deptId" label="部门Id" width="60" />
        <el-table-column show-overflow-tooltip prop="allDeptName" label="部门(护卫点)" width="400" sortable="custom" :sort-orders="['ascending', 'descending']" />
        <el-table-column v-if="show" show-overflow-tooltip prop="jobId" label="岗位Id" width="80" />
        <el-table-column show-overflow-tooltip prop="jobName" label="岗位" width="100" />
        <el-table-column show-overflow-tooltip prop="empTypeName" label="员工类别" width="80" />
        <el-table-column show-overflow-tooltip prop="sexName" label="性别" width="60" />
      </el-table>
      <!--
          page.sync 当前页
          limit.sync 每页显示数量 只能是5，10，20，30，50
          pagination 翻页的事件
           -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="search"
      />

    </el-main>
  </div>
</template>
<script>
// 引用翻页组件
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    multipleselect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      headerHeight: '70px',
      deptTree: [],
      selection: [],
      multipleSelection: [],
      total: 0, // 总数量
      queryParams: {
        baseKey: '',
        empStatus: []
      }, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 15,
        num: 1
      },
      list: [], // 给table显示的数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 翻页方法
    search() {
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    vagueSearch() {
      this.fetch({
        baseKey: this.queryParams.baseKey,
        empStatus: this.queryParams.empStatus
      })
    },
    resetSearch() {
      this.queryParams = {
        baseKey: '',
        empStatus: []
      }
      this.search()
    },
    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.list = data.rows
      })
    },
    handleSelectionChange(selection) {
      if (!this.multipleselect) {
        if (selection.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(selection.pop())
        }
      }
      this.multipleSelection = selection
    },
    sureChoose() {
      this.$emit('selectedUser', this.multipleSelection)
      this.$refs.multipleTable.clearSelection()
    },
    cancleChoose() {
      this.$emit('cancleChooseUser')
      this.$refs.multipleTable.clearSelection()
    },
    rowDblclick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.sureChoose()
    },
    changeSort(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.search()
    }
  }
}
</script>
<style lang="scss" scoped>
  .link_button {
    color: #169BD5;
  }

  .del_button {
    color: #D9001B;
  }
</style>