|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 单据弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="员工"
|
|
|
+ :before-close="handleClose"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="80%"
|
|
|
+ >
|
|
|
+ <el-row class="zw-page">
|
|
|
+ <el-col :span="6" class="zw-page-left">
|
|
|
+ <el-card>
|
|
|
+ <div class="zw-card-header" slot="header">
|
|
|
+ <span class="zw-header-title details-title">部门</span>
|
|
|
+ </div>
|
|
|
+ <div class="zw-page-left-tree">
|
|
|
+ <el-container class="zw-container">
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ :data="treeList"
|
|
|
+ highlight-current
|
|
|
+ node-key="id"
|
|
|
+ :props="{ label: 'name' }"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :default-expand-all="true"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9" class="zw-page-main">
|
|
|
+ <el-card>
|
|
|
+ <div class="zw-card-header" slot="header">
|
|
|
+ <span class="zw-header-title details-title">员工明细 </span>
|
|
|
+ </div>
|
|
|
+ <div class="zw-page-main-list">
|
|
|
+ <el-container class="zw-container">
|
|
|
+ <el-table
|
|
|
+ :data="staffList"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="500"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#F0F3F3',
|
|
|
+ border: 'none'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column prop="code" label="姓名">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.name }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="工号">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.jobNumber }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="80" label="操作">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="choiceAsset(row)"
|
|
|
+ :disabled="row.disabled"
|
|
|
+ icon="el-icon-arrow-right"
|
|
|
+ circle
|
|
|
+ >
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div
|
|
|
+ v-if="staffList.length !== 0 && isMore"
|
|
|
+ class="zw-page-list-more"
|
|
|
+ >
|
|
|
+ <el-link @click="getMore()" type="primary"
|
|
|
+ >更多<i class="el-icon-caret-bottom"></i>
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9" class="zw-page-right">
|
|
|
+ <el-card>
|
|
|
+ <div class="zw-card-header" slot="header">
|
|
|
+ <span class="zw-header-title">已选员工</span>
|
|
|
+ </div>
|
|
|
+ <div class="zw-page-right-list">
|
|
|
+ <el-container class="zw-container">
|
|
|
+ <el-table
|
|
|
+ :data="selectStafflist"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="500"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#F0F3F3',
|
|
|
+ border: 'none'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column prop="code" label="姓名">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.name }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="工号">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div>{{ row.jobNumber }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="80" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click="deleteSelectStaff(scope.row, scope.$index)"
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="handleClose">关 闭</el-button>
|
|
|
+ <el-button size="small" @click="sumbit" type="primary">确 认</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { listOrganizations, getUserPage } from '@/api/system/organization';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ groupId: null
|
|
|
+ },
|
|
|
+ treeList: [],
|
|
|
+ staffList: [],
|
|
|
+ selectStafflist: [], //已选员工
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name',
|
|
|
+ value: 'code'
|
|
|
+ },
|
|
|
+ pageNum: 1, //设备当前页数
|
|
|
+ size: 10,
|
|
|
+ isMore: false,
|
|
|
+ dialogVisible: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ open(selectedList) {
|
|
|
+
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.selectStafflist = selectedList;
|
|
|
+ this.getInfo();
|
|
|
+ },
|
|
|
+ //初始数据
|
|
|
+ async getInfo() {
|
|
|
+ let list = await listOrganizations();
|
|
|
+ this.treeList = this.$util.toTreeData({
|
|
|
+ data: list,
|
|
|
+ idField: 'id',
|
|
|
+ parentIdField: 'parentId'
|
|
|
+ });
|
|
|
+ //this.treeList = res.data;
|
|
|
+ },
|
|
|
+ //选择分类
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.staffList = [];
|
|
|
+
|
|
|
+ this.form.groupId = data.id;
|
|
|
+ let params = {
|
|
|
+ pageNum: 1,
|
|
|
+ size: this.size,
|
|
|
+ groupId: this.form.groupId
|
|
|
+ };
|
|
|
+ this.getStaffList(params);
|
|
|
+ },
|
|
|
+ //获取员工列表
|
|
|
+ async getStaffList(params) {
|
|
|
+ let res = await getUserPage(params);
|
|
|
+ let list = res.list;
|
|
|
+ if (list.length < res.count) {
|
|
|
+ this.isMore = true;
|
|
|
+ } else {
|
|
|
+ this.isMore = false;
|
|
|
+ }
|
|
|
+ list.forEach((el) => {
|
|
|
+ let _index = this.selectStafflist.findIndex((n) => n.id == el.id);
|
|
|
+ if (_index !== -1) {
|
|
|
+ el.disabled = true;
|
|
|
+ } else {
|
|
|
+ el.disabled = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.staffList = [...this.staffList, ...list];
|
|
|
+ // this.pageNum = res.pageNum;
|
|
|
+ },
|
|
|
+ //查询更多员工
|
|
|
+ async getMore() {
|
|
|
+ this.pageNum = this.pageNum + 1;
|
|
|
+ let params = {
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ size: this.size,
|
|
|
+ groupId: this.form.groupId
|
|
|
+ };
|
|
|
+ this.getStaffList(params);
|
|
|
+ },
|
|
|
+ //选择员工
|
|
|
+ choiceAsset(info) {
|
|
|
+ let data = JSON.parse(JSON.stringify(info));
|
|
|
+ this.selectStafflist.push(data);
|
|
|
+ info.disabled = true;
|
|
|
+ },
|
|
|
+ //删除已选员工
|
|
|
+ deleteSelectStaff(info, index) {
|
|
|
+ this.staffList.forEach((el) => {
|
|
|
+ if (el.id == info.id) {
|
|
|
+ el.disabled = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.selectStafflist.splice(index, 1);
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ sumbit() {
|
|
|
+ if (this.selectStafflist.length === 0) {
|
|
|
+ this.$message.warning('请选择员工');
|
|
|
+ } else {
|
|
|
+ this.$emit(
|
|
|
+ 'confirm',
|
|
|
+ JSON.parse(JSON.stringify(this.selectStafflist))
|
|
|
+ );
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.staffList = [];
|
|
|
+ this.selectStafflist = [];
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .zw-container {
|
|
|
+ height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .zw-header-title {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .details-title {
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .zw-page-list-p {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ // align-items: center;
|
|
|
+ .zw-page-list-right {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zw-page {
|
|
|
+ background: #fff;
|
|
|
+ //padding: 20px 0;
|
|
|
+ height: 600px;
|
|
|
+ .zw-page-left {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .zw-page-main {
|
|
|
+ padding: 0 10px;
|
|
|
+ .zw-page-main-list {
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .zw-page-span-num {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #157a2c;
|
|
|
+ }
|
|
|
+ .zw-page-p-operation {
|
|
|
+ text-align: right;
|
|
|
+ // width: 200px;
|
|
|
+ }
|
|
|
+ .zw-page-operation-num {
|
|
|
+ width: 100px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zw-page-list-more {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zw-page-right {
|
|
|
+ .zw-card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .zw-page-span-num {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #157a2c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .notes {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909090;
|
|
|
+ }
|
|
|
+</style>
|