改变人员切换样式

src/views/eva/index.vue

@@ -18,7 +18,6 @@
     </div>
 
     <div>
-
       <van-tabs
         @change="cutPage"
         v-if="!searchList.length"

src/views/eva/studentDetail.vue

@@ -8,10 +8,29 @@
     <div class="top">
       <div class="UserInfo" style="flex: 1;">
         <div class="sInfo">
-          <van-dropdown-menu>
+          <!-- {{ stuDetailList }} -->
+
+          <!-- <van-dropdown-menu>
             <van-dropdown-item @change="handleUpdateStudent" v-model="studentInfo.userid" :options="stuDetailList" />
-          </van-dropdown-menu>
-          <!-- <div class="userName">{{ studentInfo.userid }}</div> -->
+          </van-dropdown-menu> -->
+          <div class="userName" @click="cutStuShowBtn">
+            {{ studentInfo.name }}
+            <van-icon
+              style="position: absolute;right: 0;top: 50%; transform: translate(0,-50%);"
+              size="14px"
+              :name="cutListShow ? 'arrow-left' : 'arrow-down'"
+            />
+          </div>
+
+          <div class="sInfoList" v-if="cutListShow">
+            <div class="stuBlock">
+              <div class="stuCss" v-for="i in stuDetailList" @click="cutStu(i.value)" :key="i.value">
+                {{ i.text }}
+              </div>
+            </div>
+
+            <!-- <div v-for="i in stuDetailList" :key="i.value">{{ i.text }}</div> -->
+          </div>
         </div>
         <div class="cla">{{ studentInfo.cname }}</div>
         <!-- <div class="shade"></div> -->
@@ -50,7 +69,7 @@
     <!-- 顶部学生信息结束 -->
 
     <!-- 观察记录开始 -->
-    <div style="position: relative;top: -15px;">
+    <div style="position: relative;top: -15px;" v-if="!cutListShow">
       <div class="observe_tit">
         <div class="left">
           <img class="img" src="../../assets/images/eva/Frame (4).png" alt="" />
@@ -69,7 +88,7 @@
             <van-dropdown-item @change="handleUpdateSearch" v-model="filtrateData" :options="filtrate" />
           </van-dropdown-menu>
 
-          <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" />
+          <!-- <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" /> -->
         </div>
       </div>
       <!-- <div class="observe_box">
@@ -160,17 +179,20 @@ export default {
   },
   data() {
     return {
-      value1: 0,
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
+      // value1: 0,
+      // option1: [
+      //   { text: '全部商品', value: 0 },
+      //   { text: '新款商品', value: 1 },
+      //   { text: '活动商品', value: 2 }
+      // ],
       // 遮罩层
       isSelectShow: false,
 
       termId: '',
 
+      // 切换学生list
+      cutListShow: false,
+
       // activeItem: null,
       // 这个是本学期总条数,单独写一个是因为他不因为观察记录的选择而改变
       conList: [],
@@ -309,13 +331,14 @@ export default {
         res[0].forEach(e => {
           this.stuList.push(e.id)
         })
-        console.log('学生列表', res[0])
+        // console.log('学生列表', res[0])
         res[0].forEach(e => {
           let a = { value: '', text: '' }
           a.value = e.id
           a.text = e.name
           this.stuDetailList.push(a)
         })
+        console.log('学生列表', this.stuDetailList)
         // console.log('获取班学生列表', this.stuList)
         // 查询学生在数组中的位置
         this.num = this.stuList.indexOf(this.stuId)
@@ -445,6 +468,8 @@ export default {
     // 父组件调用子组件方法，选择学期后关闭select框
     fuClick1() {
       this.isSelectShow = false
+      this.cutListShow = false
+
       // this.selectCordS()
       this.$refs.claSel.close()
       // this.$refs.weiSel.close()
@@ -462,29 +487,54 @@ export default {
       // 获取学期记录总条数
       this.selectCordS()
     },
-    handleUpdateStudent() {
-      console.log('切换学生')
+    cutStuShowBtn() {
+      this.cutListShow = true
+      this.isSelectShow = true
+    },
+    cutStu(e) {
       this.filtrateData = ''
-
       // this.activeItem = null
       // 刷新学期
       this.termData.splice(0, 1, this.termId)
-
       // this.num = this.num + 1
       // if (this.num <= this.stuList.length - 1) {
-      this.stuId = this.studentInfo.userid
+      this.stuId = e
       // console.log(this.stuId)
-      localStorage.setItem('userId', this.studentInfo.userid)
-
+      localStorage.setItem('userId', e)
       this.getTermRecord()
-
       selectStudentDetail({ uid: this.stuId }).then(res => {
         this.studentInfo = res[0][0]
+        this.cutListShow = false
+        this.isSelectShow = false
         // console.log(this.studentInfo)
       })
       // }
       this.selectCordS()
     },
+
+    // handleUpdateStudent() {
+    //   console.log('切换学生')
+    //   this.filtrateData = ''
+
+    //   // this.activeItem = null
+    //   // 刷新学期
+    //   this.termData.splice(0, 1, this.termId)
+
+    //   // this.num = this.num + 1
+    //   // if (this.num <= this.stuList.length - 1) {
+    //   this.stuId = this.studentInfo.userid
+    //   // console.log(this.stuId)
+    //   localStorage.setItem('userId', this.studentInfo.userid)
+
+    //   this.getTermRecord()
+
+    //   selectStudentDetail({ uid: this.stuId }).then(res => {
+    //     this.studentInfo = res[0][0]
+    //     // console.log(this.studentInfo)
+    //   })
+    //   // }
+    //   this.selectCordS()
+    // },
     // 获取所有学生记录
     getTermRecord() {
       const data4 = {
@@ -636,7 +686,7 @@ export default {
   left: 0;
   width: 100%;
   height: 90vh;
-  z-index: 99;
+  z-index: 98;
 }
 // .shade {
 //   background-color: #005ccd;
@@ -744,14 +794,15 @@ export default {
       // height: 55px;
       justify-content: space-between;
       .sInfo {
+        position: relative;
         display: flex;
         /deep/.van-ellipsis {
           color: #fff;
           font-size: 18px;
         }
         .userName {
-          width: 120px;
-          text-overflow: ellipsis;
+          width: 135px;
+          position: relative;
           overflow: hidden;
           margin-right: 5px;
           height: 20px;
@@ -759,7 +810,54 @@ export default {
           color: #ffffff;
           font-size: 20px;
           text-align: left;
+          white-space: nowrap;
+          text-overflow: ellipsis;
           font-family: PingFangSC-regular;
+          box-sizing: border-box;
+          padding-right: 15px;
+        }
+        .sInfoList {
+          position: absolute;
+          width: 100vw;
+          bottom: -70px;
+          transform: translate(0, calc(100% - 65px));
+          left: -10px;
+          z-index: 99;
+          height: 90vh;
+          color: #000;
+          // opacity: 0.5;
+          box-sizing: border-box;
+          background-color: #fff;
+          padding-bottom: 80px;
+          overflow-y: scroll;
+          .stuBlock {
+            display: flex;
+            width: 93%;
+            margin: auto;
+            // justify-content: space-between;
+            flex-wrap: wrap;
+            .stuCss {
+              width: calc((100% - 20px) / 3);
+              height: 30px !important;
+              margin-top: 10px;
+              display: flex;
+              height: 30px;
+              box-sizing: border-box;
+              // padding: 4px 5px;
+              justify-content: center;
+              align-items: center;
+              border-radius: 4px;
+              margin-right: 10px;
+              background: #f6fafb;
+              color: rgba(0, 0, 0, 0.9);
+              font-family: Microsoft YaHei;
+              font-size: 14px;
+              font-style: normal;
+            }
+            .stuCss:nth-child(3n) {
+              margin-right: 0;
+            }
+          }
         }
       }
       .cla {

src/views/eva/studentEvaluate.vue

@@ -169,13 +169,21 @@
 
     <pop v-show="repShowMask">
       <template v-slot:tit>提示</template>
-      <template v-slot:con>确定{{ repMaskNum ? '添加新纪录' : '重复添加' }}吗？</template>
+      <template v-slot:con v-if="!shareShow">确定{{ repMaskNum ? '添加新纪录' : '重复添加' }}吗？</template>
+      <template v-slot:con v-else>{{ repMaskNum ? '是否保存当前纪录' : '确定重复添加吗' }} ?</template>
       <template v-slot:btn1>
-        <div class="btn" style="color: rgba(136,136,136,1);" @click="repShowMask = false">取消</div>
+        <div class="btn" style="color: rgba(136,136,136,1);" v-if="shareShow" @click="repShowMask = false">
+          {{ repMaskNum ? '不保存' : '取消' }}
+        </div>
+        <div class="btn" style="color: rgba(136,136,136,1);" v-else @click="repShowMask = false">
+          取消
+        </div>
       </template>
       <template v-slot:btn2>
         <!-- 新纪录 -->
-        <div class="btn" v-if="repMaskNum" style="color: rgba(251,67,25,1);" @click="AddNewRecord">确认</div>
+        <div class="btn" v-if="repMaskNum" style="color: rgba(251,67,25,1);" @click="AddNewRecord">
+          {{ shareShow ? '保存' : '确认' }}
+        </div>
 
         <!-- 重复添加 -->
         <div class="btn" v-else style="color: rgba(251,67,25,1);" @click="repAddRecord">确认</div>
@@ -443,7 +451,8 @@ export default {
     repetitionSave(e) {
       // let isOk = 0
 
-      if (this.selectWData.length === 0) return
+      if (this.selectWData.length === 0) return (this.wei = true)
+
       // if (this.visitTime === '') {
       //   this.tim = true
       //   isOk = 1
@@ -883,9 +892,10 @@ export default {
 .studentEvaluate {
   font-size: 14px;
   z-index: 1;
+  box-sizing: border-box;
   // position: relative;
   padding-bottom: 80px;
-  // min-height: 100vh;
+  min-height: 130vh;
   background-image: linear-gradient(to bottom, #005ccd 1%, #005ccd 12%, #f6f5f8 35%, #f6f5f8 100%);
   .rl {
     position: absolute;