|
@@ -41,12 +41,63 @@
|
|
|
<span>学期(季)设定</span>
|
|
|
<Icon type="md-add" />
|
|
|
</div>
|
|
|
+ <div class="col-body">
|
|
|
+ <div class="term-list">
|
|
|
+ <div class="term-item" v-for="(item,index) in termList" :key="index">
|
|
|
+ <p class="term-item-name"><span class="term-item-name-line" :style="{backgroundColor: getRandomColor()}"></span>上学期</p>
|
|
|
+ <p class="term-item-students-num">涉及学生数:572</p>
|
|
|
+ <div class="term-item-start">
|
|
|
+ <span>开始于</span>
|
|
|
+ <Select v-model="termMonthVal">
|
|
|
+ <Option v-for="(item,index) in monthList" :value="index + 1" :key="index">{{ index + 1 }}</Option>
|
|
|
+ </Select>
|
|
|
+ <span> / </span>
|
|
|
+ <Select v-model="termDayVal">
|
|
|
+ <Option v-for="(item,index) in dayList" :value="index + 1" :key="index">{{ index + 1 }}</Option>
|
|
|
+ </Select>
|
|
|
+ </div>
|
|
|
+ <p class="term-item-students-num">学期时长:156 天</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="term-item-time-line">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item,index) in monthEnList" :key="index">
|
|
|
+ <span>{{item}}.</span>
|
|
|
+ <span class="time-dot">
|
|
|
+ <span class="time-inner-dot"></span>
|
|
|
+ <span class="time-line-tail"></span>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="sm-system-right">
|
|
|
<div class="col-title">
|
|
|
<span>学级(年级)项目建置</span>
|
|
|
<Icon type="md-add" />
|
|
|
</div>
|
|
|
+ <div class="grade-body">
|
|
|
+ <div class="grade-item" v-for="(item,index) in gradeList" :key="index" @click="handleGradeClick(item,$event)">
|
|
|
+ <span class="grade-item-icon" v-show="gradeSelectList.indexOf(item) == -1"></span>
|
|
|
+ <Icon type="md-checkmark" v-show="gradeSelectList.indexOf(item) > -1" />
|
|
|
+ <span class="grade-item-name">{{item}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-title">
|
|
|
+ <span>学级(年级)项目建置</span>
|
|
|
+ <Icon type="md-add" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Upload multiple action="http://192.168.8.192:5000/api/file/UploadDocument" :on-success="uploadSuccess">
|
|
|
+ <Button type="info">导入习题</Button>
|
|
|
+
|
|
|
+ </Upload>
|
|
|
+
|
|
|
+ <!--<Button type="info" @click="handleUpload">导入习题</Button>-->
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -59,13 +110,77 @@
|
|
|
return {
|
|
|
tabIndex: 0,
|
|
|
periodList: [],
|
|
|
+ termList: [],
|
|
|
+ gradeList:[],
|
|
|
+ monthList: [],
|
|
|
+ monthEnList:[],
|
|
|
+ dayList: [],
|
|
|
+ gradeSelectList:[],
|
|
|
+ termMonthVal:1,
|
|
|
+ termDayVal:1
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
+ //获取随机颜色十六进制
|
|
|
+ getRandomColor() {
|
|
|
+ return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
|
|
|
+ },
|
|
|
+
|
|
|
+ //年级选择事件
|
|
|
+ handleGradeClick(item, e) {
|
|
|
+ e.preventDefault();
|
|
|
+ let isExist = this.gradeSelectList.indexOf(item);
|
|
|
+ let itemDom = e.path[0].className == "grade-item" ? e.path[0] : e.path[1];
|
|
|
+ if (isExist > -1) {
|
|
|
+ this.gradeSelectList.splice(isExist, 1);
|
|
|
+ itemDom.classList.remove('item-active');
|
|
|
+ } else {
|
|
|
+ this.gradeSelectList.push(item);
|
|
|
+ itemDom.classList.add('item-active');
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ uploadSuccess(response, file, fileList) {
|
|
|
+ console.log(response);
|
|
|
+ },
|
|
|
+
|
|
|
+ handleUpload() {
|
|
|
+ this.$post('http://192.168.8.192:5000/api/login/GetMiniAPPAccessToken').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.periodList = [...Array(10).keys()];
|
|
|
+ this.termList = [...Array(2).keys()];
|
|
|
+ this.monthList = [...Array(11).keys()];
|
|
|
+ this.gradeList = ['一年级','二年级','三年级','四年级','五年级'];
|
|
|
+ this.dayList = [...Array(30).keys()];
|
|
|
+ this.monthEnList = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC','JAN']
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .term-item-start .ivu-select {
|
|
|
+ width:60px;
|
|
|
+ color:rgb(191, 191, 191);
|
|
|
+ margin:0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .term-item-start .ivu-select-selected-value {
|
|
|
+ font-size:16px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .term-item-start .ivu-select-selection {
|
|
|
+ background:#333333;
|
|
|
+ border-color:rgba(196,196,196,.2);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .term-item-start .ivu-select-arrow {
|
|
|
+ top:72%;
|
|
|
+ }
|
|
|
+</style>
|