index.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-12-19 17:39:55
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-13 15:37:54
 * @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/ChangePapel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="changePeople-wrapper flex">
    <div class="changePeople-left">
      <div class="top-search flex">
        <el-select
          v-model="deptId"
          filterable
          placeholder="请选择"
          size="mini"
          style="width: 40%"
          clearable
        >
          <el-option
            v-for="item in searchList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="staffName"
          size="mini"
          placeholder="请输入姓名"
          suffix-icon="el-icon-date"
          style="width: 48%"
        >
        </el-input>
        <div>
          <el-button @click="searchTable" size="mini">搜索</el-button>
        </div>
      </div>
      <div class="left-middle-table">
        <ChangPapelTable
          ref="table"
          :selectNameList.sync="selectNameList"
          @selectOne="selectOne"
          @selectAll="selectAll"
        />
      </div>
      <!-- <div class="bottom-text">共有3n人</div> -->
    </div>
    <div class="middle flex">
      <div>>>></div>
    </div>
    <div class="changePeople-right flex">
      <div class="people-card flex zzz">
        <div
          class="item flex"
          v-for="item in selectNameList"
          :key="item.staffId"
        >
          <div>{{ item.staffName }}</div>
          <div class="close" @click="deleteName(item.staffId)">x</div>
        </div>
      </div>
      <div class="bottom-text">已选择{{selectNameList.length}}人</div>
    </div>
  </div>
</template>

<script>
import ChangPapelTable from "./ChangPapelTable";
import { listDept } from "@/api/system/dept";

export default {
  name: "changepeopel",
  components: {
    ChangPapelTable,
  },
  props: {
    // 传进组件的已经被选择的人名
    jsonSelectNameList: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      selectNameList: [],
      searchList: [],
      deptId: null,
      staffName: null,
    };
  },
  created() {
    listDept().then((res) => {
      console.log(res);
      this.searchList = res.data;
    });
  },
  mounted() {},
  watch: {
    selectNameList() {
      let json;
      if (this.selectNameList.length == 0) {
        json = null;
      }
      if (Array.isArray(this.selectNameList)) {
        json = this.selectNameList.map((item) => {
          return {
            peoPleId: item.staffId,
            peoPleName: item.staffName,
          };
        });
      } else {
        json = this.selectNameList;
      }

      this.$emit("getPeopleList", JSON.stringify(json));
    },
  },
  methods: {
    changeNameList(jsonSelectNameList) {
      if (jsonSelectNameList) {
        this.selectNameList = JSON.parse(jsonSelectNameList).map((item) => {
          return {
            staffId: item.peoPleId,
            staffName: item.peoPleName,
          };
        });
      } else {
        this.selectNameList = [];
      }
      this.$refs.table.listStaff();
    },
    searchTable() {
      this.$refs.table.queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: this.deptId,
        staffName: this.staffName,
      };
      this.$refs.table.listStaff();
    },
    deleteName(staffId) {
      const index = this.selectNameList.findIndex((item) => {
        return item.staffId == staffId;
      });
      if (index >= 0) {
        console.log(index);
        this.selectNameList.splice(index, 1);
        this.$refs.table.toggleSelection(staffId);
      }
    },
    addName(row) {
      const index = this.selectNameList.findIndex((item) => {
        // console.log(item.id)
        return item.staffId == row.staffId;
      });
      console.log(index);
      if (index >= 0) {
        this.selectNameList.splice(index, 1);
      } else {
        this.selectNameList.push(row);
      }
    },
    selectAll(all, allSelect) {
      // console.log(all);
      console.log(allSelect);
      if (allSelect) {
        all.forEach((item) => {
          const index = this.selectNameList.findIndex((iten) => {
            return iten.staffId == item.staffId;
          });
          if (index < 0) {
            this.selectNameList.push(item);
          }
        });
      } else {
        all.forEach((item) => {
          this.deleteName(item.staffId);
        });
      }
    },
    selectOne(all, row) {
      this.addName(row);
      // console.log(all,row)
    },
  },
};
</script>
<style lang="scss" scoped>
.changePeople-wrapper {
  width: 100%;
  height: 400px;
  // background-color: red;
  margin-top: 10px;
  justify-content: space-between;
  & > div {
    flex-direction: column;
  }
  .changePeople-left,
  .changePeople-right {
    width: 415px;
    height: 100%;
    border: 1px solid #e5e6eb;
  }
  .middle {
    align-items: center;
    justify-content: center;
    div {
      color: #1890ff;
      font-weight: 2000;
    }
  }
  .changePeople-left {
    padding: 14px 20px 11px 16px;
    flex-direction: column;

    .top-search {
      margin-bottom: 12px;
      justify-content: space-between;
    }
    .left-middle-table {
      flex: 1;
      // background: red;
    }
    .bottom-text {
      padding-top: 10px;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      text-align: right;
      color: #1890ff;
    }
  }
  .changePeople-right {
    flex-direction: column;
    padding-top: 14px;
    height: 100%;

    .people-card {
      flex-wrap: wrap;
      align-content: flex-start;
      width: 100%;
      flex: 1;
      height: 0;
      padding-left: 11px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        // display: none; /* Chrome Safari */
      }
      .item {
        width: 70px;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 5px;
        margin-right: 10px;
        color: #3d3d3d;
        box-sizing: border-box;
        margin-bottom: 10px;
        box-sizing: border-box;
        border: 1px solid #a3d3ff;
        border-radius: 3px;
        font-size: 12px;
        position: relative;
        justify-content: space-between;
      }
      .close {
        cursor: pointer;
      }
    }
    .bottom-text {
      // padding-top: 10px;
      padding-right: 10px;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      text-align: right;
      color: #1890ff;
    }
  }
}
</style>