upload to e-class-brand

src/components/UploadDialog/index.vue

@@ -1,11 +1,11 @@
 <template>
-	<div>
-		<el-dialog
-		  :title="title"
-		  class="upload-upload"
-		  :visible.sync="dialogVisible"
-       :before-close="handleClose"
-		  :width="selectType ? '50%' : '30%'" >
+  <div>
+    <el-dialog
+      :title="title"
+      class="upload-upload"
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+      :width="selectType ? '50%' : '30%'">
       <template v-if="selectType">
         <template v-if="gradeData.length > 0">
           <div style="margin-bottom: 15px;">
@@ -19,14 +19,18 @@
 
           <div style="border: 1px solid #ebebeb; padding: 8px;">
             <div style="font-weight: 600;margin-bottom: 8px;">选择年级</div>
-            <el-radio-group v-model="checkedGrade" size="mini" style="display: flex;">
-              <el-radio v-for="grade in gradeData" :label="grade.gradeId" :key="grade.gradeId" @change="changeGrade" border>{{grade.gradeName}}</el-radio>
+            <el-radio-group v-model="checkedGrade" size="mini">
+              <el-radio v-for="grade in gradeData" :label="grade.gradeId" :key="grade.gradeId" @change="changeGrade"
+                        border>{{ grade.gradeName }}
+              </el-radio>
             </el-radio-group>
 
             <div v-if="classData.length > 0">
               <div style="font-weight: 600;margin-bottom: 8px;margin-top: 8px;">选择班级</div>
-              <el-radio-group v-model="checkedClass" size="mini" style="display: flex;">
-                <el-radio v-for="classes in classData" :label="classes.classId" :key="classes.classId" @change="changeClass" border>{{classes.className}}</el-radio>
+              <el-radio-group v-model="checkedClass" size="mini">
+                <el-radio v-for="classes in classData" :label="classes.classId" :key="classes.classId"
+                          @change="changeClass" border>{{ classes.className }}
+                </el-radio>
               </el-radio-group>
             </div>
           </div>
@@ -36,10 +40,14 @@
 
 
         <template v-if="'class' != selectType || selTab == '个人'">
-          <div class="student_container" v-if="studentData.length > 0" style="border: 1px solid #ebebeb; padding: 15px;margin-top: 15px;">
-            <el-checkbox :indeterminate="studentIndeterminate" v-model="studentAll" @change="handleStudentAllChange">全选学生</el-checkbox>
+          <div class="student_container" v-if="studentData.length > 0"
+               style="border: 1px solid #ebebeb; padding: 15px;margin-top: 15px;">
+            <el-checkbox :indeterminate="studentIndeterminate" v-model="studentAll" @change="handleStudentAllChange">
+              全选学生
+            </el-checkbox>
             <el-checkbox-group v-model="checkedStudent" @change="handleStudentChange">
-              <el-checkbox v-for="student in studentData" :label="student.code" :key="student.id">{{student.name}}</el-checkbox>
+              <el-checkbox v-for="student in studentData" :label="student.code" :key="student.id">{{ student.name }}
+              </el-checkbox>
             </el-checkbox-group>
           </div>
         </template>
@@ -49,285 +57,298 @@
         </div>
       </template>
 
-			<div v-else class="text-center" style="    margin: 20px 0 50px 0;">
-				  <el-button v-if="pageName" :type="type==1?'primary':''" @click="type=1"  >{{pageName}}</el-button>
-				 <el-button v-if="isZdy" :type="type==2?'primary':''" @click="type=2,visible=true"  style="margin-left:20px">自定义</el-button>
-			</div>
-		  <div  class="text-center" >
-		    <el-button type="primary" style="margin-top: 20px;" round @click="handleSave">确定上传</el-button>
-		  </div>
-		</el-dialog>
+      <div v-else class="text-center" style="    margin: 20px 0 50px 0;">
+        <el-button v-if="pageName" :type="type==1?'primary':''" @click="type=1">{{ pageName }}</el-button>
+        <el-button v-if="isZdy" :type="type==2?'primary':''" @click="type=2,visible=true" style="margin-left:20px">自定义
+        </el-button>
+      </div>
+      <div class="text-center">
+        <el-button type="primary" style="margin-top: 20px;" round @click="handleSave">确定上传</el-button>
+      </div>
+    </el-dialog>
 
-    <el-dialog 	  class="upload-upload" title="自定义" :visible.sync="visible"  width="30%" >
+    <el-dialog class="upload-upload" title="自定义" :visible.sync="visible" width="30%">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top:20px">
-            <el-form-item label="文件名称"  prop="name">
-              <el-input v-model="form.name"></el-input>
-            </el-form-item>
-       </el-form>
-            <div  class="text-center" >
-              <el-button type="primary" round @click="save" style=" margin-top: 30px;margin-bottom: 30px;">确定上传</el-button>
-            </div>
-   	</el-dialog>
+        <el-form-item label="文件名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="text-center">
+        <el-button type="primary" round @click="save" style=" margin-top: 30px;margin-bottom: 30px;">确定上传</el-button>
+      </div>
+    </el-dialog>
 
-	</div>
+  </div>
 </template>
 
 <script>
-  import * as back from '@/api/webApi/back'
-  import { getClassStudents } from '@/api/webApi/front'
-  export default {
-    props: {
-      title: { //标题
-        type: String,
-        default: () => {
-        }
-      },
-      pageName: {
-        type: String,
-        default: () => {
-        }
-      },
-      dialogVisible:{// 显示隐藏
-        type: Boolean,
-        default: false
-      },
-      isZdy:{
-        type: Boolean,
-        default: true
-      },
-      selectType: {
-        type: String,
-        default: ''
+import * as back from '@/api/webApi/back'
+import { getClassStudents } from '@/api/webApi/front'
+
+export default {
+  props: {
+    title: { //标题
+      type: String,
+      default: () => {
       }
     },
-    data() {
-      return {
-        // dialogVisible:true,
-        form:{
-          name:''
-        },
-        visible:false,
-        type:1,
-        gradeData: [],
-        classData: [],
-        studentData: [],
-        checkedGrade: '',
-        checkedClass: '',
-        checkedStudent: [],
-        gradeIndeterminate: true,
-        classIndeterminate: true,
-        studentIndeterminate: true,
-        gradeAll: false,
-        classAll: false,
-        studentAll: false,
-        rules: {
-          name: [
-            { required: true, message: '请输入文件名称', trigger: 'blur' },
-            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
-          ],
-        },
-
-        selTab: this.selectType == 'class' ? '班级' : '个人',
-        remark: '',
+    pageName: {
+      type: String,
+      default: () => {
       }
     },
-    watch:{
-      'gradeId':function(value){
-        this.checkList = []
-        this.group = []
-         if(value){
-            let subjectParam = {
-                gradeId:value
-            }
-            back.getUserClasses(subjectParam).then(response => {
-              this.group = response.data
-            }).catch(err => {
+    dialogVisible: {// 显示隐藏
+      type: Boolean,
+      default: false
+    },
+    isZdy: {
+      type: Boolean,
+      default: true
+    },
+    selectType: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // dialogVisible:true,
+      form: {
+        name: ''
+      },
+      visible: false,
+      type: 1,
+      gradeData: [],
+      classData: [],
+      studentData: [],
+      checkedGrade: '',
+      checkedClass: '',
+      checkedStudent: [],
+      gradeIndeterminate: true,
+      classIndeterminate: true,
+      studentIndeterminate: true,
+      gradeAll: false,
+      classAll: false,
+      studentAll: false,
+      rules: {
+        name: [
+          { required: true, message: '请输入文件名称', trigger: 'blur' },
+          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
+        ]
+      },
 
-            })
-         }else{
+      selTab: this.selectType == 'class' ? '班级' : '个人',
+      remark: ''
+    }
+  },
+  watch: {
+    'gradeId': function(value) {
+      this.checkList = []
+      this.group = []
+      if (value) {
+        let subjectParam = {
+          gradeId: value
+        }
+        back.getUserClasses(subjectParam).then(response => {
+          this.group = response.data
+        }).catch(err => {
+
+        })
+      } else {
 
-         }
       }
-    },
-    created() {
-      if (this.selectType) {
-        this.getStudentsData()
+    }
+  },
+  created() {
+    if (this.selectType) {
+      this.getStudentsData()
+    }
+  },
+  methods: {
+    handleGradeAllChange(val) {
+      this.checkedGrade = val ? this.forClassStudent(this.gradeData, 'gradeId') : []
+      if (val) {
+        this.handleClassAllChange(true)
+        this.handleStudentAllChange(true)
+      } else {
+        this.handleClassAllChange(false)
+        this.handleStudentAllChange(false)
       }
     },
-    methods: {
-      handleGradeAllChange(val) {
-        this.checkedGrade = val ? this.forClassStudent(this.gradeData, 'gradeId') : [];
-        if (val) {
-          this.handleClassAllChange(true)
-          this.handleStudentAllChange(true)
-        } else {
-          this.handleClassAllChange(false)
-          this.handleStudentAllChange(false)
+    handleGradeChange(value) {
+      let checkedCount = value.length
+      this.gradeAll = checkedCount === this.gradeData.length
+      this.gradeIndeterminate = checkedCount > 0 && checkedCount < this.gradeData.length
+    },
+    changeGrade() {
+      this.checkedClass = ''
+      this.studentData = []
+      this.checkedStudent = []
+      this.gradeData.forEach(item => {
+        if (item.gradeId == this.checkedGrade) {
+          this.classData = item.classes
         }
-      },
-      handleGradeChange(value) {
-        let checkedCount = value.length;
-        this.gradeAll = checkedCount === this.gradeData.length;
-        this.gradeIndeterminate = checkedCount > 0 && checkedCount < this.gradeData.length;
-      },
-      changeGrade() {
-        this.checkedClass = ''
-        this.studentData = []
-        this.checkedStudent = []
-        this.gradeData.forEach(item => {
-          if (item.gradeId == this.checkedGrade) {
-            this.classData = item.classes
-          }
-        })
-      },
+      })
+    },
 
-      handleClassAllChange(val) {
-        this.checkedClass = val ? this.forClassStudent(this.classData, 'classId') : [];
-        if (val) {
-          this.handleStudentAllChange(true)
-        } else {
-          this.handleStudentAllChange(false)
+    handleClassAllChange(val) {
+      this.checkedClass = val ? this.forClassStudent(this.classData, 'classId') : []
+      if (val) {
+        this.handleStudentAllChange(true)
+      } else {
+        this.handleStudentAllChange(false)
+      }
+    },
+    handleClassChange(value) {
+      let checkedCount = value.length
+      this.classAll = checkedCount === this.classData.length
+      this.classIndeterminate = checkedCount > 0 && checkedCount < this.classData.length
+    },
+    changeClass() {
+      this.checkedStudent = []
+      this.classData.forEach(item => {
+        if (item.classId == this.checkedClass) {
+          this.studentData = item.students
         }
-      },
-      handleClassChange(value) {
-        let checkedCount = value.length;
-        this.classAll = checkedCount === this.classData.length;
-        this.classIndeterminate = checkedCount > 0 && checkedCount < this.classData.length;
-      },
-      changeClass() {
-        this.checkedStudent = []
-        this.classData.forEach(item => {
-          if (item.classId == this.checkedClass) {
-            this.studentData = item.students
-          }
-        })
-      },
+      })
+    },
 
-      handleStudentAllChange(val) {
-        this.checkedStudent = val ? this.forClassStudent(this.studentData, 'code') : [];
-      },
-      handleStudentChange(value) {
-        let checkedCount = value.length;
-        this.studentAll = checkedCount === this.studentData.length;
-        this.studentIndeterminate = checkedCount > 0 && checkedCount < this.studentData.length;
-      },
+    handleStudentAllChange(val) {
+      this.checkedStudent = val ? this.forClassStudent(this.studentData, 'code') : []
+    },
+    handleStudentChange(value) {
+      let checkedCount = value.length
+      this.studentAll = checkedCount === this.studentData.length
+      this.studentIndeterminate = checkedCount > 0 && checkedCount < this.studentData.length
+    },
 
-      forClassStudent(data, k) {
-        console.log(data)
-        let cacheArr = []
-        data.forEach(item => {
-          console.log(item)
-          cacheArr.push(item[k])
+    forClassStudent(data, k) {
+      console.log(data)
+      let cacheArr = []
+      data.forEach(item => {
+        console.log(item)
+        cacheArr.push(item[k])
+      })
+      return cacheArr
+    },
+    getStudentsData() {
+      getClassStudents().then(response => {
+        this.gradeData = []
+        // this.classData = []
+        // this.studentData = []
+        response.data.forEach(gitem => {
+          this.gradeData.push(gitem)
+          // if (gitem.classes) {
+          //   gitem.classes.forEach((citem, cindex) => {
+          //     citem.gradeId = gitem.gradeId
+          //     this.classData.push(citem)
+          //     if (citem.students) {
+          //       citem.students.forEach(sitem => {
+          //         sitem.gradeId = gitem.gradeId
+          //         sitem.classId = citem.classId
+          //         this.studentData.push(sitem)
+          //       })
+          //     }
+          //   })
+          // }
         })
-        return cacheArr
-      },
-      getStudentsData() {
-        getClassStudents().then(response => {
-          this.gradeData = []
-          // this.classData = []
-          // this.studentData = []
-          response.data.forEach(gitem => {
-            this.gradeData.push(gitem)
-            // if (gitem.classes) {
-            //   gitem.classes.forEach((citem, cindex) => {
-            //     citem.gradeId = gitem.gradeId
-            //     this.classData.push(citem)
-            //     if (citem.students) {
-            //       citem.students.forEach(sitem => {
-            //         sitem.gradeId = gitem.gradeId
-            //         sitem.classId = citem.classId
-            //         this.studentData.push(sitem)
-            //       })
-            //     }
-            //   })
-            // }
-          })
-        }).catch(err => {
+      }).catch(err => {
 
-        })
-      },
-      handleClose(done) {
-          this.$emit('dialogVisibleClose', false)
-          done();
-      },
-      save(){
-          this.$refs.form.validate((valid) => {
-            if (valid) {
-              this.$emit('handleClose', this.type,this.form.name)
-            } else {
-              return false;
-            }
-          });
-      },
-      handleSave(){
-        if (this.selectType) {
-          // this.$emit('handleClose', this.type ,'')
-          if (this.selTab == '班级') {
-            if (this.checkedClass) {
-              // todo 调接口只要传classId（参数：this.checkedClass，年级id不是必传参数，把数据返回到父页面调接口）
-             let ids = []
-              this.studentData.forEach(item=>{
-                ids.push(item.code)
-              })
-              let resData = {
-                checkedGrade: this.checkedGrade,
-                checkedClass: this.checkedClass,
-                // checkedStudent:ids,
-                remark: this.remark,
-              }
-              this.$emit('handleClose', this.type, '', resData)
-            } else {
-              this.$message.warning('请选择年级和班级！');
-              return
+      })
+    },
+    handleClose(done) {
+      this.$emit('dialogVisibleClose', false)
+      done()
+    },
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('handleClose', this.type, this.form.name)
+        } else {
+          return false
+        }
+      })
+    },
+    handleSave() {
+      if (this.selectType) {
+        // this.$emit('handleClose', this.type ,'')
+        if (this.selTab == '班级') {
+          if (this.checkedClass) {
+            // todo 调接口只要传classId（参数：this.checkedClass，年级id不是必传参数，把数据返回到父页面调接口）
+            let ids = []
+            this.studentData.forEach(item => {
+              ids.push(item.code)
+            })
+            let resData = {
+              checkedGrade: this.checkedGrade,
+              checkedClass: this.checkedClass,
+              // checkedStudent:ids,
+              remark: this.remark
             }
+            this.$emit('handleClose', this.type, '', resData)
           } else {
-            if (this.checkedStudent.length == 0) {
-              this.$message.warning('请选择年级班级与学生！');
-              return
-            } else {
-              // todo 调接口保存数据（参数：this.checkedClass 和 this.checkedStudent ，年级id不是必传参数，全选传全部学生的code，把数据返回到父页面调接口）
-              let resData = {
-                checkedGrade: this.checkedGrade,
-                checkedClass: this.checkedClass,
-                checkedStudent: this.checkedStudent,
-                remark: this.remark,
-              }
-              this.$emit('handleClose', this.type, '', resData)
-            }
+            this.$message.warning('请选择年级和班级！')
+            return
           }
         } else {
-          this.$emit('handleClose', this.type ,'')
+          if (this.checkedStudent.length == 0) {
+            this.$message.warning('请选择年级班级与学生！')
+            return
+          } else {
+            // todo 调接口保存数据（参数：this.checkedClass 和 this.checkedStudent ，年级id不是必传参数，全选传全部学生的code，把数据返回到父页面调接口）
+            let resData = {
+              checkedGrade: this.checkedGrade,
+              checkedClass: this.checkedClass,
+              checkedStudent: this.checkedStudent,
+              remark: this.remark
+            }
+            this.$emit('handleClose', this.type, '', resData)
+          }
         }
-      },
+      } else {
+        this.$emit('handleClose', this.type, '')
+      }
     }
-   }
+  }
+}
 </script>
 
 <style scoped>
-  .upload-upload .student_container /deep/.el-checkbox-group {
-    max-height: 105px;
-    overflow-y: auto;
-  }
-	.upload-upload /deep/.el-dialog__header{
-		text-align: center;
-   	 background: #47C6A2;
-	}
-  .upload-upload /deep/.el-dialog__body{
-    max-height: 570px;
-    overflow-y: auto;
-  }
-	.upload-upload /deep/.el-dialog__title{
-		color:#fff
-	}
-	.upload-upload /deep/.el-icon-close{
-		color:#fff
-	}
-	/deep/.checkbox-list{
-	    border: 1px solid #999;
-    padding: 10px;
-    margin: 20px 0;
+.upload-upload .student_container /deep/ .el-checkbox-group {
+  max-height: 105px;
+  overflow-y: auto;
 }
-.el-checkbox{
-  margin-bottom:10px
+
+.upload-upload /deep/ .el-dialog__header {
+  text-align: center;
+  background: #47C6A2;
+}
+
+.upload-upload /deep/ .el-dialog__body {
+  max-height: 570px;
+  overflow-y: auto;
+}
+
+.upload-upload /deep/ .el-dialog__title {
+  color: #fff
+}
+
+.upload-upload /deep/ .el-icon-close {
+  color: #fff
+}
+
+/deep/ .checkbox-list {
+  border: 1px solid #999;
+  padding: 10px;
+  margin: 20px 0;
+}
+
+.el-checkbox {
+  margin-bottom: 10px
+}
+
+/deep/ .el-radio.is-bordered + .el-radio.is-bordered {
+  margin-left: 0px;
+  margin-bottom: 3px;
 }
 </style>