1

src/components/updateMore/updateMore.vue

@@ -0,0 +1,205 @@
+<template>
+  <el-dialog
+    title="添加学生"
+    :visible.sync="dialogVisibleMember"
+    :append-to-body="true"
+    width="540px"
+    height="80%"
+    :before-close="handleClose"
+    class="addNewPP"
+  >
+    <div class="people">
+      <div class="people_top">
+        <div class="people_top_right">
+          <div class="people_search">
+            <el-input placeholder="学生姓名" v-model="searchTN"></el-input>
+            <!-- <div class="search_img" @click="getStudent">
+              <img src="../../assets/icon/search.png" alt />
+            </div> -->
+          </div>
+        </div>
+        <div class="people_nav">选择成员</div>
+      </div>
+      <div class="i_box_login2" v-if="cList.length">
+        <div
+          :class="{ active: checkboxList.indexOf(item.userid) != -1 }"
+          v-for="(item, index) in cList"
+          :key="index"
+          :label="item.userid"
+          @click="addGroupUser(item.userid, index)"
+        >
+          <el-tooltip
+            placement="top"
+            :content="item.name ? item.name : '暂无姓名'"
+          >
+            <span>{{ item.name ? item.name : "暂无姓名" }}</span>
+          </el-tooltip>
+        </div>
+      </div>
+      <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <!-- <el-button @click="dialogVisibleMember = false">取 消</el-button> -->
+      <el-button type="primary" @click="joinUpMore">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: ["dialogVisibleMember", "cList", "userid", "searchTN"],
+  data() {
+    return {
+      checkboxList: [],
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+      this.$emit("getUpdateMore", false, this.checkboxList, this.searchTN);
+    },
+    addGroupUser(uid, i) {
+      if (this.checkboxList.length == 0) {
+        // if (this.checkboxList.indexOf(uid) == -1) {
+        this.checkboxList.push(uid);
+        this.searchTN = this.cList[i].name;
+        // } else {
+        //   this.checkboxList.splice(this.checkboxList.indexOf(uid), 1);
+        //   this.searchTN = "";
+        // }
+      } else {
+        if (this.checkboxList.indexOf(uid) != -1) {
+          this.checkboxList.splice(this.checkboxList.indexOf(uid), 1);
+          this.searchTN = "";
+        } else {
+          this.checkboxList = [];
+          this.checkboxList.push(uid);
+          this.searchTN = this.cList[i].name;
+        }
+      }
+    },
+    joinUpMore() {
+      this.$emit("getUpdateMore", false, this.checkboxList, this.searchTN);
+    },
+  },
+};
+</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>