integrated_traffic_admin_vue/src/views/util/selectWorker.vue

<template>
  <el-dialog v-if="visible" :title = "title" :visible.sync="visible" width="80%" append-to-body>
    <el-container>
      <el-aside width="300px" style="background-color:#fff">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
          style="margin:10px 0"/>
        <el-tree
          v-loading="treeLoading"
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          @node-click="handleNodeClick"/>
      </el-aside>
      <el-main>
        <el-form label-width="50px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="KEYWORDS" placeholder="请输入关键字"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门" label-width="80px">
                <SelectTree ref="deptTree" :clearable="false" :options="treeData" :props="defaultProps" v-model="DEPARTMENT_ID" placeholder="请选择部门" style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属岗位" label-width="80px">
                <el-select v-model="POST_ID" placeholder="请选择" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in postList" :key="item.POST_ID" :label="item.NAME" :value="item.POST_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务">
                <el-select v-model="POSITION" placeholder="请选择" style="width: 100%;" @change="$forceUpdate()">
                  <el-option v-for="item in positionList" :key="item.DICTIONARIES_ID" :label="item.NAME" :value="item.DICTIONARIES_ID" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label-width="10px">
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                  搜索
                </el-button>
                <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table v-loading="listLoading" ref="multipleTable" :data="varList" :row-key="getRowKey" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
          <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="USERNAME" label="用户名" />
          <el-table-column prop="NAME" label="姓名" />
          <el-table-column prop="DEPARTMENT_NAME" label="部门" />
          <el-table-column prop="POST_NAME" label="岗位" />
          <el-table-column prop="POSITIVETIME" label="转正时间" />
          <el-table-column prop="ROLE_NAME" label="角色" width="150"/>
          <el-table-column prop="POSITIONNAME" label="职务" width="150"/>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button type="primary" @click = "confirm">确 定</el-button>
          </div>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </div>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  props: {
    title: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      visible: false,
      listLoading: true,
      treeLoading: false,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      filterText: '',
      total: 0,
      KEYWORDS: '',
      STATE: '',
      POSITION: '',
      positionList: [],
      DEPARTMENT_ID: '',
      POST_ID: '',
      varList: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      pd: [],
      treeData: [],
      form: {
        USER_ID: '',
        ROLE_ID: '',
        DEPARTMENT_ID: '',
        POST_ID: '',
        USERNAME: '',
        NAME: '',
        EMAIL: '',
        DEPARTURETIME: '',
        LEAVINGREASON: '',
        LEARNERCATEGORY: '',
        LEARNERCATEGORYSTATUS: 'select',
        SORT: '',
        DEPARTUREDESCR: '',
        PASSWORD: 'Jtys@123456',
        USERAVATARPREFIX: '',
        USERAVATARURL: '',
        USERAVATARURL_CONVERT: '',
        ISSTUDENT: false,
        NATION: '', // 民族
        SEX: '', // 性别
        POLITICAL_OUTLOOK: '', // 政治面貌
        DATE_OF_BIRTH: '', // 出生年月
        DEGREE_OF_EDUCATION: '', // 文化程度
        POST: '', // 职务
        TYPE_OF_WORK: '', // 工种
        ENTRY_DATE: '', // 入职日期
        WORKING_DATE: '', // 参加工作日期
        INCUMBENCY: '', // 在职情况
        CERTIFICATE_INFORMATION: '', // 证书信息
        TITLE: '', // 职称
        DUTIESValue: '',
        DUTIES: '',
        letPostType: 'select',
        letTitleValue: '',
        letTitleId: '',
        letTitleType: 'select',
        letTypeOfWorkValue: '',
        letTypeOfWorkId: '',
        letTypeOfWorkType: 'select',
        USER_ID_CARD: ''
      },
      config: config,
      roleList: [],
      postList: [],
      USER_ID: ''
    }
  },
  watch: {
    'DEPARTMENT_ID': {
      handler(newVal, oldVal) {
        this.POST_ID = ''
        this.getPostList()
      },
      immediate: false

    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.getRoleList()
    this.hasButton()
    this.getPosition()
    this.getDeparture()
    this.getDict()
  },
  methods: {
    init() {
      this.visible = true
    },
    getPosition() {
      requestFN(
        'dictionaries/getLevels',
        { DICTIONARIES_ID: '09e36ac01e9540f8bc84eab1c1a78754' }
      ).then((data) => {
        this.positionList = data.list
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getDeparture() {
      requestFN(
        'dictionaries/getLevels',
        { DICTIONARIES_ID: '3fac317a218445bba624636bed4cf9f0' }
      ).then((data) => {
        this.leavingList = data.list
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getRowKey(row) {
      return row.USER_ID
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(node, data, value) {
      this.form.DEPARTMENT_ID = node.id
      this.getList(node.id)
    },
    getRoleList() {
      requestFN(
        '/user/goAddUser',
        {}
      ).then((data) => {
        this.roleList = data.roleList
      }).catch((e) => {
      })
    },
    getPostList() {
      if (this.DEPARTMENT_ID != null && this.DEPARTMENT_ID !== '') {
        requestFN(
          '/post/listAll',
          { DEPARTMENT_ID: this.DEPARTMENT_ID }
        ).then((data) => {
          this.postList = data.postList
        }).catch((e) => {
        })
      }
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.$refs.deptTree.clearHandle()
      this.POST_ID = ''
      this.postList = []
      this.POSITION = ''
      // this.STATE = ''
      this.getList()
    },
    getList(DEPARTMENT_ID) {
      this.listLoading = true
      if (DEPARTMENT_ID) {
        this.DEPARTMENT_ID = DEPARTMENT_ID
      }
      requestFN(
        '/employee/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          DEPARTMENT_ID: this.DEPARTMENT_ID,
          POSITION: this.POSITION,
          STATE: '1'
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.userList
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getDict: function() {
      requestFN(
        '/department/listTree',
        {}
      ).then((data) => {
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.listLoading = false
      })
    },
    hasButton() {
      var keys = 'user:add,user:del,user:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.userfhadminadd
        this.del = data.userfhadmindel
        this.edit = data.userfhadminedit
      }).catch((e) => {
        this.listLoading = false
      })
    },
    confirm() {
      this.$emit('getResult', { info: this.$refs.multipleTable.selection })
      this.handleClose()
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>

.el-dialog__body{
  padding: 0;
  background: red;
}
.mark_up{
  margin-bottom:20px;
  margin-left: 110px;
}
.icons-container {
  margin: 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .icon-item {
    margin-bottom: 10px;
    height: 70px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 24px;
    color: #24292e;
    cursor: pointer;
    span {
      display: block;
      font-size: 14px;
      margin-top: 10px;
    }

  }

  .disabled {
    pointer-events: none;
  }
}
.filter-btn-group{
  position: relative;
}
.filter-flot{
  position: absolute;
  right: 0;
  top: 0;
}
.uploader{
  width: 570px;
  display: flex;
  align-items: center;
}
.el-form-item__content{
  line-height: 1;
}
.uo-flex{
  display: flex
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>

<style lang="sass" scoped>
.el-row
  margin-bottom: 16px
  &:last-child
    margin-bottom: 0
    .form-group
      display: flex
      align-items: center
      margin-right: 20px
      .form-label
        padding: 9px 15px
        font-size: 14px
        width: 240px
        font-weight: 400
        line-height: 20px
        text-align: right
        margin-bottom: 0
        .star
          color: red
          padding-right: 4px
      .input-block
        flex: 1
        min-height: 36px
        position: relative

  .disContent
    padding: 0 20px
    display: flex
    align-items: center
    flex-wrap: wrap
    .img-div
      position: relative
      margin: auto 10px 10px 10px
      width: 20px
      height: 20px
      border-radius: 4px
      &>img
        width: 2%
        height: 3%

      .disContent-hide
        position: absolute
        width: 100%
        height: 100%
        border-radius: 4px
        background-color: rgba(48, 48, 48, 0.59)
        display: none
        top: 0
        left: 0

        .Delete
          position: absolute
          bottom: 14px
          right: 10px
          font-size: 16px
          color: white
          cursor: pointer

          .editCss
            .Delete
              font-size: 16px
              right: 90px

        .yuLan
          position: absolute
          bottom: 23px
          right: 50px
          font-size: 16px
          color: white
          cursor: pointer

        .yuLanImg
          position: absolute
          bottom: 0
          right: 0
          width: 100%
          height: 100%
          opacity: 0

    .img-div:hover .disContent-hide
      display: block

    .pitchCss
      border: 1px solid #202e78
      transition: all linear 0.1s
      width: 116px
      height: 116px
</style>
<style lang="sass" scoped>
.table-qrcode
  text-align: center
  padding-top: 20px
  width: 100%
.filter-container
  position: relative
  .filter-flot
    position: absolute
    right: 0
    top: 0
.uploader
  width: 570px
  display: flex
  align-items: center
.el-form-item__content
  line-height: 1
</style>
<style lang="scss" scoped>
>>> .el-dialog__body {
  padding: 30px 20px 10px 40px;
}
</style>