日历

.eslintrc.js

   ],
   rules: {
     // allow async-await
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+
+    "no-unused-vars": 'off',
     'generator-star-spacing': 'off',
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'vue/no-parsing-error': [2, {
       'x-invalid-end-tag': false
     }],

src/view/organ_admin/test/components/gestalts/gestalts.vue

       </div>
     </div>
     <!-- 小题选项区域 end -->
-
+    <div>
+      {{modal?"1":"0"}}
+    </div>
 
     <div>
       <Button @click="addQuestions">添加小题</Button>
       title:"",  // 题干
       char:["A","B","C","D"],  // 小题选项
       s_questions:[],  // 小题选项列表
-      index:"",
+      indexActive:"",
       clear:false
     }
   },
+  props:[
+    'modal'
+  ],
   watch:{
-    clear(){
+    modal(){
       var modal=this.modal
-      console.log(modal)
       if(this.modal==false){
         localStorage.clear();
+        this.title="";
+        this.s_questions=[]
+      }else{
+        if(this.title==""){
+          this.mountedList()
+        }
       }
     }
   },
   // 挂载结束后触发
   mounted(){
+    this.mountedList()
+  },
+  methods:{
+    mountedList(){
     var local=localStorage.getItem('gestList')
     if(!local){
       // 触发一行小题选项
       }
       this.s_questions.push(data);
     }else{
-      console.log(999)
       var questions=JSON.parse(local);
       this.s_questions=questions.list.questions;
       this.title=questions.list.title
-      console.log(this.s_questions)
-      this.index=questions.index
+      this.indexActive=questions.index
     }
-  },
-  methods:{
+    },
     // 首次加载
     swapArray(arr, index1, index2) {
       this.s_questions[index1] = this.s_questions.splice(index2, 1, arr[index1])[0];
     },
     // 提交试题
     add(){
-      var uid=this.index;
+      var uid=this.indexActive;
       var title=this.title;
       if(title==""){
         this.$Message.warning('题干未填写');
         }
       }
       var gestalts={
-        title,
-        questions,
+        list:{
+          title,
+          questions,
+          order:2
+        },
         uid
       }
       // console.log(gestalts)

src/view/organ_admin/test/components/question/question.vue

     <!-- 题干结束 -->
     <div>
       <div v-for="(cont,index) in content" :key="index">
-        <span>{{char[index]}}</span>.<input v-model="charList[index]" type="text">
+        <span>{{cont}}</span>.<input v-model="charList[index]" type="text">
       </div>
       <Button @click="addContent">添加选项</Button>
       <Button @click="delContent">删除选项</Button>
     </div>
     <div>
       <RadioGroup v-model="labelActive">
-        <Radio v-for="(cont,index) in content" :key="index" :label="char[index]"></Radio>
+        <Radio v-for="(cont,index) in content" :key="index" :label="cont"></Radio>
       </RadioGroup>
     </div>
     <div>
     return {
       title:"",
       char:["A","B","C","D","E","F","G","H","I","J","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
-      content:[0,1,2,3],
+      content:["A","B","C","D"],
       charList:[],
-      labelActive:""
+      labelActive:"",
+      index:""
     }
   },
+  props:[
+    'modal'
+  ],
+  watch:{
+    modal(){
+      var modal=this.modal
+      if(modal==false){
+        localStorage.clear();
+        this.title="";
+        this.charList=[];
+        this.labelActive="";
+        this.index="";
+      }else{
+        if(this.title==""){
+          this.mountedList()
+        }
+      }
+    }
+  },
+  // mounted(){
+  //   this.mountedList()
+  // },
   methods:{
+    mountedList(){
+      var local=localStorage.getItem('questList');
+      if(!local){
+
+      }else{
+        var question=JSON.parse(local)
+        var list=question.list;
+        console.log(question.list)
+        this.index=question.index;
+        this.title=list.title;
+        this.labelActive=list.labelActive;
+        var obj=list.selectObj;
+        this.content=[];
+        var num=0;
+        for(var arr in obj){
+          this.content[num]=this.char[num]
+          num=num+1;
+          console.log(num)
+          this.charList.push(obj[arr])
+        }
+        // console.log(this.content.length,num)
+        // if(this.content.length!=num){
+        //   this.content.pop()
+        // }
+      }
+    },
     add(){
       var title=this.title;
       if(!title){
       }
       var selectObj={}
       for(var obj in this.content){
-        selectObj[this.char[obj]]=this.charList[obj]
+        if(!this.charList[obj]){
+          selectObj[this.char[obj]]=""
+        }else{
+          selectObj[this.char[obj]]=this.charList[obj]
+        }
       }
       var labelActive=this.labelActive;
-      if(!labelActive){
+      var i=this.content.indexOf(labelActive);
+      if(!labelActive||i<0){
         this.$Message.warning('请选择答案选项');
         return;
       }
+      var uid=this.index;
       var question={
-        title,
-        selectObj,
-        labelActive
+        uid,
+        list:{
+          title,
+          selectObj,
+          labelActive,
+          order:1
+        }
       };
       this.$emit('question',question);
       this.title="";
       this.labelActive="";
       this.charList=[];
-      this.content=[0,1,2,3]
+      this.content=["A","B","C","D"]
     },
     addContent(){
-      this.content.push(this.content.length);
+      this.content.push(this.char[this.content.length]);
     },
     delContent(){
       if(this.content.length>2){

src/view/organ_admin/test/test.vue

 <template>
-  <div>
-    <Button @click="modal = true">添加试卷</Button>
-    <Modal
-        width="980"
-        v-model="modal"
-        title="试题上传"
-        @on-ok="ok"
-        @on-cancel="cancel">
+  <div class="calender">
+    <div class="top">
+      <div class="top_date">
         <div>
-          <Select v-model="select" style="width:200px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-          </Select>
-          <div>
-            <question @question="getquestion" v-if="select==1"></question>
-            <exercise @exercise="getexercise" v-if="select==2"></exercise>
-            <gestalts @gestalts="getGestalts" v-if="select==3"></gestalts>
-          </div>
+          {{new Date().getDate()}}
         </div>
-        <div slot="footer"></div>
-    </Modal>
-    <div v-show="getGestaltList.length>0">
-      一.单选题
-      <div v-for="(gest,i) in getGestaltList" :key="i">
-        <div @click="revise(i,gest)">
-          {{i+1}}.{{gest.title}}
-          <div v-for="(item,id) in gest.questions" :key="id">
-            ({{id+1}})
-            <div v-for="(obj,ip) in item.obj" :key="ip" class="erji">
-              <span>{{ip}}.</span><span>{{obj}}</span>
-            </div>
-          </div>
+        <div>
+          星期{{week[new Date().getDay()]}}
         </div>
       </div>
+      <div class="btn_wrap">
+        <ul>
+          <li @click="handleShowNextMonth">
+            下个月
+          </li>
+          <li @click="handleShowToday">
+            {{year}}年{{month}}月
+          </li>
+          <li @click="handleShowLastMonth">
+            上个月
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="date_wrap">
+      <ul class="week">
+        <li v-for="(day,d_index) in week" :key="d_index+'d'">{{day}}</li>
+      </ul>
+      <ul class="day">
+        <li v-for="(last,l_index) in days.last_list" :key="l_index+'l'" class="last">
+          {{last}}
+        </li>
+        <li v-for="(when,w_index) in days.when_list" :key="w_index+'w'" :class="{now:nowLi==year.toString()+month.toString()+when}">
+          {{when}}
+        </li>
+        <li v-for="(next,n_index) in days.next_list" :key="n_index+'n'" class="last">
+          {{next}}
+          <div class="active-time"></div>
+        </li>
+      </ul>
     </div>
+    <div v-if="incident">
+      {{incident}}
+    </div>
+    <Button>+</Button>
   </div>
 </template>
+
 <script>
-import question from "./components/question/question.vue";
-import exercise from "./components/exercise/exercise.vue"
-import gestalts from "./components/gestalts/gestalts.vue"
 export default {
+  name: 'calender',
   data () {
     return {
-      modal: false,
-      select:'1',
-      cityList: [
-        {
-          value: '1',
-          label: '选择题'
-        },
-        {
-          value: '2',
-          label: '填空题'
-        },
-        {
-          value: '3',
-          label: '完形填空'
-        }
-      ],
-      // selectList:[],
-      getquestionList:[],
-      getexerciseList:[],
-      getGestaltList:[],
-      char:["A","B","C","D","E","F","G","H","I","J","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
-    }
-  },
-  components:{
-    question,
-    exercise,
-    gestalts
-  },
-  watch:{
-    modal(){
-      var modal=this.modal
-      if(this.modal==false){
-        localStorage.clear();
-      }
+     year:'',
+     month:'',
+     days:{},
+     nowLi:'',
+     week:['日','一','二','三','四','五','六'],
+     incident:"代办事项",
+     active:[{
+       time:'9:00',
+       day:'528',
+       title:'校长找我'
+     },
+     {
+       time:'10:00',
+       day:'529',
+       title:'教导主任找我'
+     },
+     {
+       time:'11:00',
+       day:'520',
+       title:'学生家长找我'
+     }]
     }
   },
-  methods: {
-    revise(index,list){
-      // console.log(index,list)
-      var data={index,list};
-      var obj=JSON.stringify(data)
-      localStorage.setItem('gestList',obj)
-      var list = localStorage.getItem('gestList')
-      console.log(list)
-      var arr=JSON.parse(list)
-      console.log(arr)
-      this.modal=true;
-      this.select="3"
+  methods:{
+    //控制当前日期显示特殊样式
+    handleShowDateStyle(){
+      let now = new Date()
+      this.nowLi=now.getFullYear().toString()+(now.getMonth()+1).toString()+now.getDate().toString()
     },
-    getquestion(data){
-      this.getquestionList.push(data);
-      console.log(data)
-      this.modal=false;
-      this.select="1"
-      localStorage.clear();
+    //得到当前年这个月分有多少天
+    getDays(Y,M){
+      let day = new Date(Y, M, 0).getDate()
+      return day;
     },
-    getexercise(data){
-      this.getexerciseList.push(data);
-      this.modal=false;
-      this.select="1"
-      localStorage.clear();
+    //得到当前年，这个月的一号是周几
+    getWeek(Y,M){
+        let now = new Date()
+        now.setFullYear(this.year)
+        now.setMonth(this.month-1)
+        now.setDate(1);
+        let week = now.getDay();
+        return week;
     },
-    getGestalts(data){
-      this.getGestaltList.push(data);
-      console.log(this.getGestaltList)
-      this.modal=false;
-      this.select="1"
-      localStorage.clear();
+    getaddWeek(Y,M){
+        let now = new Date()
+        now.setFullYear(this.year)
+        now.setMonth(this.month)
+        now.setDate(1);
+        let week = now.getDay();
+        return week;
     },
-    ok () {
-      this.$Message.info('Clicked ok');
+    pushDays(){
+      //将这个月多少天加入数组days
+      let when_list=[];
+      for(let i = 1; i<=this.getDays(this.year,this.month);i++){
+        when_list.push(i)
+      }
+      //将下个月要显示的天数加入days
+      let week_day=1;
+      let next_list=[];
+      for(let i=this.getaddWeek(this.year,this.month);i<7;i++){
+          next_list.push(week_day++)
+      }
+      //将上个月要显示的天数加入days
+      let last_list=[];
+      for(let i=0;i<this.getWeek(this.year,this.month);i++){
+        var lastMonthDays=this.getDays(this.year,this.month-1)
+          last_list.unshift(lastMonthDays-i)
+      }
+      this.days={last_list,when_list,next_list}
+      console.log(this.days)
+    },
+    getDate(){
+            let now = new Date();
+            this.year = now.getFullYear();
+            this.month = now.getMonth()+1;
+            this.pushDays();
+            
+    },
+    handleShowNextMonth(){
+       this.days=[];
+      if(this.month<12){
+        this.month=this.month+1;
+         this.pushDays();
+      }else{
+        this.month= this.month=1;
+        this.year=this.year+1;
+        this.pushDays();
+      }
+      
+    },
+    handleShowToday(){
+      this.days=[];
+      let now = new Date();
+      this.year=now.getFullYear();
+      this.month=now.getMonth()+1;
+      this.pushDays();
     },
-    cancel () {
-      this.$Message.info('Clicked cancel');
+    handleShowLastMonth(){
+       this.days=[];
+      if(this.month>1){
+         this.month=this.month-1;
+      this.pushDays();
+      }else if( this.year>1970){
+        this.month=12;
+        this.year=this.year-1;
+        this.pushDays();
+      }else{
+        alert("不能查找更远的日期")
+      }
+      
     }
+  },
+  mounted(){
+    this.getDate();
+    this.handleShowDateStyle();
   }
 }
 </script>
 <style scoped>
-.yiji{
+.calender{
+  width: 600px;
+  position: relative;
+  margin: 0 auto;
+  margin-top: 50px;
+  border: 1px solid #ddd;
+  padding: 20px;
+  color: #333;
+}
+.top{
+  width: 100%;
+  position: relative;
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 20px;
+}
+.top_date{
+  width: 100px;
+  text-align: left;
+  line-height: 42px;
+}
+.btn_wrap{
+  flex: 1;
+  text-align: right
+}
+ul{
+  list-style: none;
+}
+.btn_wrap ul{
   display: flex;
-  justify-content: flex-start;
+  flex-direction: row-reverse
+}
+.btn_wrap ul li{
+  padding: 10px 20px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+}
+.btn_wrap ul li:hover{
+  background: #ddd;
+  color:red;
+}
+.btn_wrap ul li:first-child{
+  border-left: none;
+}
+.btn_wrap ul li:last-child{
+  border-right: none;
+}
+.date_wrap{
+  position: relative;
+}
+.week{
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  font-size: 16px;
+}
+.week li{
+  text-align: center;
+  width: 14.28%;
+}
+.day{
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  font-size: 16px;
+  flex-wrap: wrap;
+}
+.day li{
+  width: 14.28%;
+  padding: 20px;
+  text-align: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  /* border: 1px solid #ddd */
+}
+.day li:nth-child(n+8){
+  border-top:none;
+}
+.day li:nth-child(n+1){
+  border-right: none;
+}
+/* .day li:nth-child(7n){
+  border-right: 1px solid #ddd
+} */
+.now{
+  color: #f2f8fe;
+  background:#1989fa;
+  border-radius: 50%;
+}
+.last{
+  color: #CBD1DA;
 }
-.erji{
-  display: inline-block;
+.active-time{
+  border:6px solid #ff0000;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 4px;
+  right: 6px;
 }
 </style>