新增选人员界面

oa-ui/src/views/oa/budget/components/choosePeople.vue

+<template>
+  <div>
+    <el-form :inline="true">
+      <el-form-item label="姓名：">
+        <el-input v-model="queryParams.nickName"></el-input>
+      </el-form-item>
+      <el-form-item label="部门：">
+        <el-select v-model="queryParams.deptId" clearable @change="getList">
+          <el-option v-for="item in deptList" :key="item.id" :label="item.label" :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table ref="chooseUser" :data="userList" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
+      <!-- <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> -->
+      <el-table-column label="姓名" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
+      <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" :show-overflow-tooltip="true" />
+      <el-table-column label="年龄" align="center" key="age" prop="age" :show-overflow-tooltip="true" />
+      <el-table-column label="性别" align="center" key="sex" prop="sex" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ scope.row.sex == 0 ? '男' : '女' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="岗级" align="center" key="postLevel" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{ formatLevel(scope.row.postLevel, scope.row.salaryLevel,
+      dict.type.sys_user_postlevel, dict.type.sys_user_salarylevel) }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: right;">
+      <el-pagination @current-change="getList" :current-page.sync="queryParams.pageNum"
+        :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
+      </el-pagination>
+    </div>
+    <div>
+      已选人员：<el-tag v-for="item in chooseUser" style="margin: 5px;">{{ item.nickName }}</el-tag>
+    </div>
+    <div style="text-align: center;margin-top: 20px;">
+      <el-button type="primary" @click="confirmChoose">确认选择</el-button>
+      <el-button @click="clearChoose">清空选择</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listUser, deptTreeSelect } from "@/api/system/user";
+export default {
+  dicts: ['sys_normal_disable', 'sys_user_sex', 'sys_user_titles', 'sys_user_certificates', 'sys_user_pmlevel', 'sys_user_postlevel', 'sys_user_salarylevel'],
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      userList: [],
+      dateRange: [],
+      deptList: [],
+      chooseUser: [],
+      deptOptions: undefined,
+      total: 0
+    }
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.userList = response.rows.slice(1);
+        this.total = response.total;
+      }
+      );
+    },
+    /** 查询部门 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+        this.deptList = response.data[0].children
+      });
+    },
+    // 格式化表格里的薪资岗级
+    formatLevel(postLevel, salaryLevel, postLevelList, salaryLevelList) {
+      if (postLevel && salaryLevel) {
+        let post = postLevelList[postLevel].label
+        let salary = salaryLevelList[salaryLevel].label
+        return post + salary
+      } else {
+        return ''
+      }
+    },
+    handleSelectionChange(val) {
+      this.chooseUser = val
+    },
+    getRowKeys(row) {
+      return row.userId;
+    },
+    confirmChoose() {
+      this.$emit('chooseUser', this.chooseUser)
+    },
+    clearChoose() {
+      this.$refs.chooseUser.clearSelection();
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>