.

src/components/Question/drawer.vue

         {
           value: 'D',
           label: 'D'
-        },
-        {
-          value: 'true',
-          label: '对'
-        },
-        {
-          value: 'false',
-          label: '错'
         }
       ]
     }

src/components/Question/edit.vue

           <el-select slot="prepend" v-model="form.questionType" style="width:100px" placeholder="请选择">
             <el-option label="单选题" value="radio" />
             <el-option label="多选题" value="checkBox" />
-            <el-option label="判断题" value="switch" />
             <el-option label="简答题" value="textarea" />
           </el-select>
         </el-input>

src/components/Question/index.vue

         <transition-group>
           <div v-for="item,index in tableData" :key="index" class="questionli" @click="handleEdit(item)">
             <span style="width:45px">第{{ index+1 }}题</span>
-            <span style="width:45px">{{ item.questionType === 'radio'?'单选题':item.questionType==='checkBox'?'多选题':item.questionType==='switch'?'判断题':'简答题' }}</span>
+            <span style="width:45px">{{ item.questionType === 'radio'?'单选题':item.questionType==='checkBox'?'多选题':'简答题' }}</span>
             <span style="flex:1">{{ item.content }}</span>
             <el-popconfirm
               style="width:30px"

src/views/photoWall/index.vue

   <div class="body">
     <el-card class="box-card" shadow="never">
       <div class="text item">
-        <upload-image-list
-          v-show="packId"
-          style="float: right;line-height:48px"
-          @handleChange="handleChange"
-        />
-        <el-row style="padding-top: 20px">
+        <el-row>
           <el-col :span="18">
             <div v-show="packId" style="padding:16px">
-              <p style="margin-left:8px">{{ currentPack }}</p>
-              <div v-for="item in images" :key="item.attchId" style="display:inline-block;position:relative;margin:8px" @click="deletePhoto(item)">
-                <el-image :src="item.url" class="photoWall" style="width:160px;" />
-                <div class="mask"><el-image class="maskImg" :src="deleteImg" /></div>
+              <p style="margin-left:8px">
+                {{ currentPack }}
+                <upload-image-list
+                  style="margin-left:8px;display:inline-block"
+                  @handleChange="handleChange"
+                /></p>
+              <div v-for="item in images" :key="item.attchId" style="display:inline-block;position:relative;margin:8px">
+                <el-card :body-style="{ padding: '0px', height:'100%' }" style="width:320px; height:280px;text-align:center">
+                  <el-image fit="cover" :preview-src-list="[item.url]" :src="item.url" style="height: calc(100% - 40px)" />
+                  <div style="width:100%;height:40px"><div class="imgbtn">放大</div><div class="imgbtn" @click="deletePhoto(item)">删除</div></div>
+                  <!-- <div class="mask"><el-image class="maskImg" :src="deleteImg" /></div> -->
+                </el-card>
               </div>
             </div>
           </el-col>
                 <el-tag
                   v-for="tag in dynamicTags"
                   :key="tag"
-                  type="info"
-                  style="margin-bottom:8px"
                   closable
+                  style="margin-bottom:8px"
+                  :type="currentPack===tag?'':'info' "
                   :disable-transitions="false"
                   @close="handleClose(tag)"
                   @click="handleCurrent(tag)"
       this.dynamicTags = []
       getAttchPackList().then((res) => {
         this.attchPackList = res.data.records
-        this.attchPackList.map(item => {
-          this.dynamicTags.push(item.name)
-        })
-        this.packId = res.data.records[0].packId
+        if (this.attchPackList.length !== 0) {
+          this.attchPackList.map(item => {
+            this.dynamicTags.push(item.name)
+          })
+          this.packId = res.data.records[0].packId
+          this.currentPack = res.data.records[0].name
+        }
       })
     },
     // 删除分组
   margin-left: 10px;
   vertical-align: bottom;
 }
+.imgbtn {
+  width: 50%;
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  display: inline-block;
+  &:first-child {
+    border-right:1px solid #f0f0f0 ;
+  }
+  &:hover {
+    color: #409EFF;
+  }
+}
 .mask {
   position: absolute;
   width: 100%;
     opacity: 0;
   }
 }
-// .photoWall:hover {
-//   opacity: 0.4;
-// }
 </style>

src/views/questionnaire/edit.vue

 <template>
   <div class="body_edit">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="问卷详情" name="questionnaire">
-        <el-form ref="form" :rules="rules" class="questionnaireForm" :model="questionnaireForm" label-width="100px">
-          <el-form-item label="问卷名称：" prop="name">
-            <el-input v-model="questionnaireForm.name" />
-          </el-form-item>
-          <el-form-item class="editBottomItem">
-            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
-            <el-button @click="onCancel">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </el-tab-pane>
-      <el-tab-pane label="问卷题库" name="question" :disabled="queId ? false : true">
-        <el-row :gutter="20" style="padding-top: 20px">
-          <el-col :span="12">
-            <Question
-              v-if="queId"
-              ref="Question"
-              :que-id="queId"
-              @handleAddQuestion="questionId = ''"
-              @handleCloseQuestion="questionId = ''"
-              @handleEditQuestion="handleEditQuestion"
-              @setQuestionTotal="setQuestionTotal"
-            />
-          </el-col>
-          <el-col :span="12">
-            <QuestionEdit
-              v-if="queId"
-              :total="total"
-              :question-id="questionId"
-              :que-id="queId"
-              @handleRefreshQuestion="handleRefreshQuestion"
-              @handleEditQuestion="handleEditQuestion"
-            />
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
+    <!-- <el-tabs v-model="activeName"> -->
+    <!-- <el-tab-pane label="问卷详情" name="questionnaire"> -->
+    <el-form ref="form" :inline="true" :rules="rules" :model="questionnaireForm" label-width="100px">
+      <h3>问卷详情</h3>
+      <el-form-item label="问卷名称：" prop="name">
+        <el-input v-model="questionnaireForm.name" style="width:700px" />
+      </el-form-item>
+      <el-form-item class="editBottomItem">
+        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- </el-tab-pane> -->
+    <!-- <el-tab-pane label="问卷题库" name="question" :disabled="queId ? false : true"> -->
+    <el-row v-if="queId" :gutter="20" style="padding-top: 20px">
+      <el-col :span="12">
+        <h3>问卷题库</h3>
+        <Question
+          v-if="queId"
+          ref="Question"
+          :que-id="queId"
+          @handleAddQuestion="questionId = ''"
+          @handleCloseQuestion="questionId = ''"
+          @handleEditQuestion="handleEditQuestion"
+          @setQuestionTotal="setQuestionTotal"
+        />
+      </el-col>
+      <el-col :span="12">
+        <QuestionEdit
+          v-if="queId"
+          :total="total"
+          :question-id="questionId"
+          :que-id="queId"
+          @handleRefreshQuestion="handleRefreshQuestion"
+          @handleEditQuestion="handleEditQuestion"
+        />
+      </el-col>
+    </el-row>
+    <!-- </el-tab-pane> -->
+    <!-- </el-tabs> -->
   </div>
 </template>
 <script>

src/views/signIn/edit.vue

                 placeholder="选择日期时间"
               />
             </el-form-item>
+            <el-form-item label-width="0">
+              <img
+                style="width: 100px; height: 100px"
+                :src="imgURL"
+                fit="fill"
+              >
+            </el-form-item>
             <el-form-item label-width="0">
               <el-button
                 type="primary"
         startTime: [{ required: true, message: '请输入签到开始时间', trigger: 'blur' }],
         endTime: [{ required: true, message: '请输入签到结束时间', trigger: 'blur' }]
       },
+
       allClassList: [],
       classList: [],
       isIndeterminateClass: false,
       termList: [],
       isIndeterminateTerm: false,
       checkAllTerm: false,
-      checkedTerms: []
+      checkedTerms: [],
+
+      imgURL: undefined,
+      oldclassList: [],
+      oldclassIdList: [],
+      lastTimeClassList: []
     }
   },
   watch: {
-    checkedTerms() {
-      if (this.checkedTerms.length > 0) {
-        const finalArr = this.allClassList.filter((item) => this.checkedTerms.includes(item.termId))
-        this.classList = finalArr
-        const finalArr2 = finalArr.filter((item) => this.checkedClasss.includes(item.classId))
-        this.checkedClasss = []
-        finalArr2.map(item => {
-          this.checkedClasss.push(item.classId)
-        })
-      } else {
-        this.classList = []
-        this.checkedClasss = []
-      }
+    checkedTerms: {
+      handler() {
+        if (this.checkedTerms.length === 0) {
+          this.isIndeterminateTerm = false
+          this.checkAllTerm = false
+          this.classList = []
+          this.checkedClasss = []
+        } else if (this.checkedTerms.length > 0) {
+          if (this.checkedTerms.length === this.termList.length) {
+            this.checkAllTerm = true
+          } else this.isIndeterminateTerm = true
+          const finalArr = this.allClassList.filter((item) => this.checkedTerms.includes(item.termId))
+          this.classList = finalArr
+          const finalArr2 = finalArr.filter((item) => this.checkedClasss.includes(item.classId))
+          this.checkedClasss = []
+          finalArr2.map(item => {
+            this.checkedClasss.push(item.classId)
+          })
+        }
+        this.lastTimeClassList = this.checkedClasss
+      },
+      immediate: true
     },
-    checkedClasss() {
-      if (this.checkedClasss.length === 0) {
-        this.isIndeterminateClass = false
-        this.checkAllClass = false
-      }
+    checkedClasss: {
+      handler() {
+        if (this.checkedClasss.length === 0) {
+          this.isIndeterminateClass = false
+          this.checkAllClass = false
+        } else if (this.checkedClasss.length === this.classList.length) {
+          this.checkAllClass = true
+        } else this.isIndeterminateClass = true
+      },
+      immediate: true
     }
   },
   mounted() {
     })
     getSchoolClassList().then((res) => {
       this.allClassList = res.data.records
+      getSignClassList(this.signId).then(res => {
+        this.oldclassList = res.data
+        if (this.oldclassList) {
+          this.oldclassList.map(item => {
+            if (this.checkedTerms.indexOf(item.termId) === -1) {
+              this.checkedTerms.push(item.termId)
+            }
+            this.checkedClasss.push(item.classId)
+          })
+          this.oldclassIdList = this.checkedClasss
+        }
+      })
     })
-    getSignClassList(this.signId).then(res => {
-      var thisList = res.data
-      if (thisList) {
-        thisList.map(item => {
-          this.checkedClasss.push(item.classId)
-          this.checkedTerms.push(item.termId)
-        })
-      }
-    })
+    this.toUrl()
   },
   methods: {
     // 学期
       this.isIndeterminateClass = false
     },
     handleCheckedClasssChange(value) {
+      if (this.lastTimeClassList.length > this.checkedClasss.length) {
+        this.lastTimeClassList.map(item => {
+          // 当上一次班级数组中的一项在现在班级选中数组中不显示说明当前项就是取消的哪一项 然后判断是否是上次保存过的签到班级
+          if (this.checkedClasss.indexOf(item) === -1 && this.oldclassIdList.indexOf(item) !== -1) {
+            this.checkedClasss.push(item)
+            this.$confirm('此操作将使该班级无法签到是否继续?', '提示', {
+              confirmButtonText: '删除',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              this.checkedClasss.pop()
+            }).catch(() => { })
+          }
+        })
+      }
+      // 将当前选中班级放在数组中记录一下
+      this.lastTimeClassList = this.checkedClasss
       const checkedCount = value.length
       this.checkAllClass = checkedCount === this.classList.length
       this.isIndeterminateClass = checkedCount > 0 && checkedCount < this.classList.length
     // 修改签到池
     editSignClass() {
       var submitList = []
-      var serialNo = 0
       this.classList.map((item, index) => {
         if (this.checkedClasss.indexOf(item.classId) !== -1) {
-          submitList.push({ classId: item.classId, termId: item.termId, signId: this.signId, serialNo: serialNo++ })
+          submitList.push({ classId: item.classId, termId: item.termId, signId: this.signId })
         }
       })
+      if (this.oldclassList.length > 0) {
+        this.oldclassList.map(item => {
+          submitList.map((item2, index) => {
+            if (item2.classId === item.classId) {
+              submitList[index].serialNo = item.serialNo
+            }
+          })
+        })
+      }
       saveSignClass(submitList, this.signId).then(() => {
         this.$message('签到池修改成功')
       })
         text: 'http://192.168.89.76:8080/signIn?signId=' + val
       })
     },
-    // 下载二维码
-    downloadQrcode() {
+    // canvans转base64 很消耗内存所以把转换后的结果imgURL拿出来
+    toUrl() {
       document.getElementById('qrcode').innerHTML = ''
       this.qrcode(this.signId) // 下载之前首先要有二维码
       // 先找到canvas节点下的二维码图片
       const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+      // 设置a的href属性将canvas变成png格式
+      this.imgURL = myCanvas[0].toDataURL('image/jpg')
+    },
+    // 下载二维码 把base64转为blob并且下载
+    downloadQrcode() {
       const img = document.getElementById('qrcode').getElementsByTagName('img')
       // 创建一个a节点
       const a = document.createElement('a')
-      // 设置a的href属性将canvas变成png格式
-      const imgURL = myCanvas[0].toDataURL('image/jpg')
+      // 获得浏览器用户代理
       const ua = navigator.userAgent
-      if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
-        var bstr = atob(imgURL.split(',')[1])
+      if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行
+        // canvas转base64 后生成的数据是由 图片格式+逗号+真正的base64码组成的
+        var bstr = atob(this.imgURL.split(',')[1])
         var n = bstr.length
         var u8arr = new Uint8Array(n)
         while (n--) {
         var blob = new Blob([u8arr])
         window.navigator.msSaveOrOpenBlob(blob, this.signForm.name + '.png')
       } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
-        const blob = this.base64ToBlob(imgURL) // new Blob([content]);
+        const blob = this.base64ToBlob(this.imgURL) // new Blob([content]);
         const evt = document.createEvent('HTMLEvents')
         evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
         a.download = this.signForm.name + '.png'// 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
+        // 讲blob数据转换成url
         a.href = URL.createObjectURL(blob)
         a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
       } else { // 谷歌兼容下载
-        img.src = imgURL
+        img.src = this.imgURL
         a.href = img.src
         // 设置下载文件的名字
         a.download = this.signForm.name + '.png'
     },
     // base64转blob
     base64ToBlob(code) {
+      // this.imgURl打印出来可以看到等于data:image/png;base64,+base64码
       const parts = code.split(';base64,')
+      // 截取后pasts[0]等于data:image/png  parts[1]就是base64吗 （至于为什么我们上面写image/jpg 现在变成png我也不知道哈哈哈哈哈）
       const contentType = parts[0].split(':')[1]
+      // 用:分隔contentType 等于image/png
       const raw = window.atob(parts[1])
+      // 获取解码后的长度
       const rawLength = raw.length
       const uInt8Array = new Uint8Array(rawLength)
       for (let i = 0; i < rawLength; ++i) {
+        // 循环 把每位都转为相对应的unicode码
         uInt8Array[i] = raw.charCodeAt(i)
       }
+      // Blob储存二进制的
       return new Blob([uInt8Array], { type: contentType })
     }
   }