pbl-student-table/src/components/updateMore/updateMore.vue

<template>
  <el-dialog title="Add Student" :visible.sync="dialogVisibleMember" :append-to-body="true" width="540px" height="80%"
    :before-close="handleClose" class="addNewPP">
    <div class="people" v-if="dialogVisibleMember">
      <div class="people_top">
        <div class="people_top_right">
          <div class="people_search">
            <el-input placeholder="Enter Custom Name" v-model="name" @change="nameChange"></el-input>
          </div>
        </div>
        <div class="people_nav">Select Student</div>
      </div>
      <div class="i_box_login2" v-if="cList.length">
        <div :class="{ active: cname == item.userid }" v-for="(item, index) in cList" :key="index"
          :label="item.userid" @click="addGroupUser(item.userid)">
          <el-tooltip placement="top" :content="item.name ? item.name : 'No Name Available'">
            <span>{{ item.name ? item.name : "No Name Available" }}</span>
          </el-tooltip>
        </div>
      </div>
      <div style="text-align: center; margin-top: 10px" v-else>No Data Available</div>
    </div>

    <span slot="footer" class="dialog-footer">
        <el-button @click="close">Cancel</el-button>
      <el-button type="primary" @click="joinUpMore">Confirm</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["dialogVisibleMember", "cList", "userid", "searchTN"],
  data() {
    return {
      checkboxList: [],
      name:"",
      cname:""
    };
  },
  watch:{
    dialogVisibleMember(n){
      if(n){
        let a = JSON.parse(JSON.stringify(this.searchTN))
        let type = 1
        this.cList.forEach(e => {
          if(e.userid == a){
            type = 2
            this.cname = e.userid
            this.name = ""
          }
        })
        if(type == 1){
          this.name = a;
          this.cname = ""
        }
      }
    }
  },
  methods: {
    handleClose(done) {
      this.close()
      done();
    },
    nameChange(){
      this.cname = ""
    },
    addGroupUser(uid) {
      this.cname = uid
      this.name = "";
    },
    close(){
      this.$emit("update:dialogVisibleMember",false)
    },
    joinUpMore() {
      if(!this.cname && !this.name){
        this.$message.error("Please select a student or enter a custom name")
      }
      let a = this.name ? this.name : this.cname
      this.$emit("setPlname",a)
    },
  },
  mounted () {
    let a = JSON.parse(JSON.stringify(this.searchTN))
    let type = 1
    this.cList.forEach(e => {
      if(e.userid == a){
        type = 2
        this.cname = e.userid
      }
    })
    if(type == 1){
      this.name = a;
    }
  },
};
</script>

<style scoped>
.dialog_diy>>>.el-dialog__body {
  padding: 0 30px !important;
}

.dialog_diy>>>.el-dialog {
  margin-top: 10vh !important;
}

.dialog_diy>>>.el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
  background: #fafafa;
}

.people {
  border: 1px solid rgb(229 229 229);
  height: 495px;
  border-radius: 5px;
  width: 100%;
  overflow: auto;
}

.people_top {
  display: flex;
  width: 100%;
  /* justify-content: space-between; */
  /* align-items: center; */
  flex-direction: column;
  padding: 10px 25px 0;
  box-sizing: border-box;
}

.people_nav,
.people_top_right {
  /* padding: 20px 0 0 20px; */
}

.people_top_right {
  height: 40px;
  margin-bottom: 10px;
}

.people_search {
  display: flex;
  position: relative;
}

.people_search>>>.el-input__inner {
  /* height: 25px; */
  width: 100%;
}

.i_box_login2 {
  height: calc(100% - 80px);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  padding-bottom: 10px;
  box-sizing: border-box;
  align-content: flex-start;
  padding: 10px 25px 0;
}

.i_box_login2>div {
  cursor: pointer;
  width: 80px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  overflow: hidden;
  background: rgb(225, 237, 255);
  margin: 10px calc((100% - (80px * 5)) / 4) 0 0;
  color: rgb(37 124 255);
  border-radius: 5px;
  box-sizing: border-box;
}

.i_box_login2>div:nth-child(5n) {
  margin: 10px 0 0 0;
}

.i_box_login2>.active {
  background: rgb(92, 157, 255);
  color: #fff;
}

.i_box_login2>div>span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
</style>