修改员工智搜

yz_08

2021-02-04 601ebdfe8ec5d8109148763dc983663ea749e407

 src/views/user/selectuser.vue

@@ -163,56 +163,56 @@
      </el-header>

      <el-container>

        <el-aside width="400px">

          <el-tree
            ref="tree"
            :data="deptTree"
            :check-strictly="true"
            show-checkbox
            accordion
            node-key="id"
            highlight-current
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="nodeClick"
          <el-tree

            ref="tree"

            :data="deptTree"

            :check-strictly="true"

            show-checkbox

            accordion

            node-key="id"

            highlight-current

            default-expand-all

            :filter-node-method="filterNode"

            @node-click="nodeClick"

          />

        </el-aside>

        <el-main>

          <el-table
            ref="multipleTable"
            :data="list"
            style="width: 100%;height: 80%;"
          <el-table

            ref="multipleTable"

            :data="list"

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

            row-key="prop1"

            @selection-change="handleSelectionChange"
            @selection-change="handleSelectionChange"

          >

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

            <el-table-column :label="$t('table.user.username')" prop="username" :show-overflow-tooltip="true" align="center" min-width="120px">
              <template slot-scope="scope">
                <span>{{ scope.row.username }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('table.user.email')" :show-overflow-tooltip="true" align="center" min-width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.email }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.user.sex')"
              :filters="[{ text: $t('common.sex.male'), value: '0' }, { text: $t('common.sex.female'), value: '1' }, { text: $t('common.sex.secret'), value: '2' }]"
              :filter-method="filterSex"
              class-name="status-col"
            >
              <template slot-scope="{row}">
                <el-tag :type="row.sex | sexFilter">
                  {{ transSex(row.sex) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!--
          page.sync 当前页
          limit.sync 每页显示数量 只能是5，10，20，30，50
          pagination 翻页的事件
           -->
            <el-table-column :label="$t('table.user.username')" prop="username" :show-overflow-tooltip="true" align="center" min-width="120px">

              <template slot-scope="scope">

                <span>{{ scope.row.username }}</span>

              </template>

            </el-table-column>

            <el-table-column :label="$t('table.user.email')" :show-overflow-tooltip="true" align="center" min-width="150px">

              <template slot-scope="scope">

                <span>{{ scope.row.email }}</span>

              </template>

            </el-table-column>

            <el-table-column

              :label="$t('table.user.sex')"

              :filters="[{ text: $t('common.sex.male'), value: '0' }, { text: $t('common.sex.female'), value: '1' }, { text: $t('common.sex.secret'), value: '2' }]"

              :filter-method="filterSex"

              class-name="status-col"

            >

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

                <el-tag :type="row.sex | sexFilter">

                  {{ transSex(row.sex) }}

                </el-tag>

              </template>

            </el-table-column>

          </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-button type="primary" @click="sureChoose">确定</el-button>

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

@@ -221,96 +221,96 @@
    </el-container>

  </div>

</template>

<script>
// 引用翻页组件
<script>

// 引用翻页组件

import Pagination from '@/components/Pagination'

export default {
export default {

  components: { Pagination },

  data() {

    return {

      headerHeight: '70px',
      headerHeight: '70px',

      deptTree: [],

      advancedQueryShow: false,
      advancedQueryShow: false,

      selection: [],

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

      total: 0, // 总数量

      queryParams: {}, // 查询参数

      sort: {}, // 排序

      pagination: { // 分页参数

        size: 5,

        num: 1

      },

      list: [], // 给table显示的数据
      list: [], // 给table显示的数据

      defaultProps: {

        children: 'children',

        label: 'label'

      }

    }

  },
  mounted() {
    this.initDeptTree()
    // 初始加载
    this.fetch()
  },

  methods: {
    initDept() {
      return {
        deptId: '',
        deptName: '',
        parentId: null,
        orderNum: 0
      }
    },
    transSex(sex) {
      switch (sex) {
        case '0':
          return this.$t('common.sex.male')
        case '1':
          return this.$t('common.sex.female')
        default:
          return this.$t('common.sex.secret')
      }
    },
    filterSex(value, row) {
      return row.sex === value
    },
    // 翻页方法
    search() {
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    fetch(params = {}) {
      var that = this
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.$get('system/user', {
        ...params
      }).then((r) => {
        const data = r.data.data
        that.total = data.total
        that.list = data.rows
      })
    },

    initDeptTree() {
      this.$get('system/dept').then((r) => {
        this.deptTree = r.data.data.rows
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick(data) {
      this.dept.parentId = data.parentId
      if (this.dept.parentId === '0') {
        this.dept.parentId = null
      }
      this.dept.orderNum = data.orderNum
      this.dept.deptName = data.label
      this.dept.deptId = data.id
  mounted() {

    this.initDeptTree()

    // 初始加载

    this.fetch()

  },

  methods: {

    initDept() {

      return {

        deptId: '',

        deptName: '',

        parentId: null,

        orderNum: 0

      }

    },

    transSex(sex) {

      switch (sex) {

        case '0':

          return this.$t('common.sex.male')

        case '1':

          return this.$t('common.sex.female')

        default:

          return this.$t('common.sex.secret')

      }

    },

    filterSex(value, row) {

      return row.sex === value

    },

    // 翻页方法

    search() {

      this.fetch({

        ...this.queryParams,

        ...this.sort

      })

    },

    fetch(params = {}) {

      var that = this

      params.pageSize = this.pagination.size

      params.pageNum = this.pagination.num

      this.$get('system/user', {

        ...params

      }).then((r) => {

        const data = r.data.data

        that.total = data.total

        that.list = data.rows

      })

    },



    initDeptTree() {

      this.$get('system/dept').then((r) => {

        this.deptTree = r.data.data.rows

      })

    },

    filterNode(value, data) {

      if (!value) return true

      return data.label.indexOf(value) !== -1

    },

    nodeClick(data) {

      this.dept.parentId = data.parentId

      if (this.dept.parentId === '0') {

        this.dept.parentId = null

      }

      this.dept.orderNum = data.orderNum

      this.dept.deptName = data.label

      this.dept.deptId = data.id

    },

    handleSelectionChange(val) {

      this.multipleSelection = val

@@ -326,13 +326,19 @@
    },

    sureChoose() {

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

    },
    cancleChoose() {
      this.$emit('cancleChooseUser')
    },

    cancleChoose() {

      this.$emit('cancleChooseUser')

    }

  }

}

</script>

<style lang="scss" scoped>



  .el-main {

    height: 600px;

  }

</style>

<style lang="scss">

  .el-aside {

    padding: 20px;

@@ -342,10 +348,6 @@
    .el-tree {

      height: 100%;

    }

  }



  .el-main {

    height: 600px;

  }



  #searchTable {

@@ -402,4 +404,4 @@
  .del_button {

    color: #D9001B;

  }

</style>
</style>