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

<template>
  <div>
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :datasource="datasource"
      :selection.sync="selection"
      cache-key="systemRoleTable21"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="handlAdd"
        >
          新增
        </el-button>

        <el-button
          size="small"
          @click="handAllDel"
          icon="el-icon-delete"
          type="danger"
        >
          删除
        </el-button>

      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-popconfirm
          class="ele-action"
          title="确定要删除此角色吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>

        <el-link :underline="false" v-if="row.isLeader"> 已设为班组长 </el-link>
        <el-link
          type="primary"
          :underline="false"
          v-else
          @click="setLeader(row)"
        >
          设为班组长
        </el-link>
      </template>
    </ele-pro-table>
    <staffSelection
      ref="staffSelection"
      @confirm="confirmStaffSelection"
      :factoryId="factoryId"
    ></staffSelection>
  </div>
</template>
<script>
  import staffSelection from './staffSelection.vue';
  export default {
    components: {
      staffSelection
    },
    props:{
      factoryId:String
    },
    data () {
      return {
        columns: [
        {
          columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },

          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
          
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'jobNumber',
            label: '工号'
          },
          {
            prop: 'phone',
            label: '电话'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed:'right'
          }
        ],
        datasource: [],

        deleteUserIds: [],
        selection: []
      };
    },
    methods: {
      remove (row) {
        let index = this.datasource.findIndex((n) => n.id == row.id);
        if (index !== -1) {
          this.datasource.splice(index, 1);
          this.deleteUserIds.push((row.id));
          this.$emit('deleteIds', this.deleteUserIds);
        }

      },

      handAllDel() {
        console.log(this.selection);
        console.log(this.datasource)

        this.selection.forEach((e) => {
          this.datasource.forEach((f,i) => {
            if(e.id == f.id){
              this.datasource.splice(i, 1);
              this.deleteUserIds.push((f.id));
              this.$emit('deleteIds', this.deleteUserIds);
            }

          })
        });

      },

      handlAdd () {
        if(!this.factoryId){
          this.$message.warning('请先选择所属工厂！');  
          return
        }
        this.$refs.staffSelection.open(
          JSON.parse(JSON.stringify(this.datasource))
        );
      },
      confirmStaffSelection (data) {
        data.forEach((element) => {
          if (!('isLeader' in element)) {
            // isLeader 是否为班组长
            element.isLeader = false;
          }
        });
        this.datasource = data;
        this.setDefaultLeader();
      },
      // 设置默认班组长
      setDefaultLeader () {
        if (this.datasource.length <= 0) {
          return;
        }
        let result = this.datasource.find((n) => n.isLeader == true);
        if (!result) {
          this.datasource[0].isLeader = true;
        }
      },
      // 设置班组长
      setLeader (row) {
        console.log(row);
        this.datasource.forEach((n) => {
          n.isLeader = false;
        });
        row.isLeader = true;
      },
      // 设置班组长（id）
      setLeaderId (id) {
        let result = this.datasource.find((n) => id == n.id);

        if (result) {
          this.datasource.forEach((n) => {
            n.isLeader = false;
          });
          result.isLeader = true;
        }
      },
      // 清空表格
      restTable () {
        this.datasource = [];
      },

    
      // 获取班组长id
      getTwi () {
        let result = this.datasource.find((n) => n.isLeader == true);
        if (result) {
          return result.id;
        } else {
          return null;
        }
      }
    }
  };
</script>