kd-aiot-frontend/src/views/workforceManagement/team/components/staffSelection.vue

<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="180" label="操作" align="right">
                    <template slot="header" slot-scope="scope">
                      <div style="display: flex">

                        <el-input v-model="userName" placeholder="输入姓名查询" clearable
                                  @change="changeUserName"></el-input>
                        <div
                          v-if="staffList.length !== 0 && isMore"
                          class="zw-page-list-more"
                        >
                          <el-button type="text" @click="getMore()">更多<i class="el-icon-caret-bottom"></i></el-button>
                        </div>
                      </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'
        },
        userName: '',
        currentData: {},
        pageNum: 1, //设备当前页数
        size: 10,
        isMore: false,
        dialogVisible: false
      };
    },
    props: {
      type: {},
      hasAccount:{
        default:0
      }
    },
    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.$nextTick(()=>{
          this.handleNodeClick(this.treeList[0])
          this.$refs.tree.setCurrentKey(this.treeList[0].id)

        })
        //this.treeList = res.data;
      },
     //选择分类
    handleNodeClick(data) {
      this.currentData = data
      this.staffList = [];

      this.form.groupId = data.id;
      let params = {
        pageNum: 1,
        size: this.size,
        groupId: this.form.groupId,
        hasAccount:this.hasAccount
      };
      this.getStaffList(params);
    },
      changeUserName() {
        this.staffList = [];

        this.form.groupId = this.currentData.id;
        let params = {
          pageNum: 1,
          size: this.size,
          groupId: this.form.groupId,
          name: this.userName
        };
        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));
      if (info.teamId &&this.type!='bpm') {
        this.$confirm('当前员工已有所属班组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.selectStafflist.push(data);
            info.disabled = true;
          })
          .catch(() => {});
      } else {
        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>