选择员工增加分页，信息录入-失业金领取增加选择员工功能

yijiusmile

2021-02-01 f1c5f3c0b8e58a475b8a3c05e51f94043de43a85

选择员工增加分页，信息录入-失业金领取增加选择员工功能

 src/views/user/Informationinput.vue

@@ -1121,7 +1121,7 @@
      <el-form :model="unemploymentForm" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工编号">
            <el-form-item label="员工编号🔍" @click.native="showXzyg">
              <el-input v-model="unemploymentForm.empNumb" />
            </el-form-item>
            <el-form-item label="性别" prop="region">
@@ -1713,6 +1713,9 @@
        <el-button @click="dialogIsShow()">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择员工" :visible.sync="dialogShowXzyg" width="90%">
      <Selectuser @selectedUser="selectedUser" @cancleChooseUser="cancleChooseUser" />
    </el-dialog>
  </div>
</template>
<script>
@@ -1724,6 +1727,7 @@
    return {
      formLabelWidth: '120px',
      thisShowIndex: 0,
      dialogShowXzyg: false,
      dialogshowArr: [
        {
          show: false
@@ -4003,6 +4007,20 @@
      this.remarkInfoForm.version = row.version

      this.dialogshowArr[13].show = true
    },
    showXzyg() {
      this.dialogShowXzyg = true
    },
    cancleChooseUser() {
      this.dialogShowXzyg = false
    },
    selectedUser(users) {
      for (var i = 0; i < users.length; i++) {
        var data = users[i]
        this.unemploymentForm.empNumb = data.username
        this.unemploymentForm.sex = data.sex
      }
      this.dialogShowXzyg = false
    }
  }
}

 src/views/user/outemployess.vue

@@ -1152,7 +1152,7 @@
      var names = ''
      for (var i = 0; i < users.length; i++) {
        var data = users[i]
        names += data.prop2 + ','
        names += data.username + ','
      }
      alert('已选择人员' + names)
      console.log(users)

 src/views/user/selectuser.vue

@@ -163,21 +163,57 @@
      </el-header>

      <el-container>

        <el-aside width="400px">

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

          <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="tableData"

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

            :data="list"
            style="width: 100%;height: 80%;"
            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-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>

        </el-main>

@@ -186,101 +222,95 @@
  </div>

</template>

<script>

// 引用翻页组件
import Pagination from '@/components/Pagination'

export default {

  components: { Pagination },

  data() {

    return {

      headerHeight: '70px',

      deptTree: [],

      advancedQueryShow: false,

      dialogTableVisible: false,

      selection: [],

      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'

          }]

        }]

      total: 0, // 总数量
      queryParams: {}, // 查询参数
      sort: {}, // 排序
      pagination: { // 分页参数
        size: 5,
        num: 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'

          }]

        }

        ]

      }

      ],

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

        children: 'children',

        label: 'label'

      }

    }

  },

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

  methods: {

    handleNodeClick(data) {

      console.log(data)

    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

@@ -293,9 +323,6 @@
        this.headerHeight = '410px'

        this.advancedQueryShow = true

      }

    },

    showEmpInfo() {

      this.dialogTableVisible = true

    },

    sureChoose() {

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