学段设置与学期设置

TEAMModelOS/ClientApp/view/school-mgmt/SystemSetting/SystemSetting.less

@@ -48,10 +48,11 @@
         top: 140px;
         bottom: 0;
         width: 100%;
+        user-select: none !important;
     }
 
     &-left {
-        .rowSpan(20%);
+        .colSpan(18%);
         margin-left: -1px;
 
         .col-order {
@@ -94,7 +95,7 @@
 
 
         .period-item {
-            position:relative;
+            position: relative;
             padding: 10px 10px 10px 30px;
             border-bottom: 1px solid @borderColor;
             cursor: pointer;
@@ -104,12 +105,13 @@
                 background-image: -o-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
                 background-image: -moz-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
                 background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
-                .period-btn-edit{
-                    display:inline-block;
+
+                .period-btn-edit {
+                    display: inline-block;
                 }
 
-                &-tool{
-                    display:unset;
+                .period-item-tool {
+                    display: unset;
                 }
             }
 
@@ -127,16 +129,16 @@
                 }
             }
 
-            &-tool{
-                position:absolute;
-                right:30px;
-                top:40px;
-                font-size:24px;
-                color:@primary-textColor;
-                display:none;
+            &-tool {
+                position: absolute;
+                right: 30px;
+                top: 40px;
+                font-size: 24px;
+                color: @primary-textColor;
+                display: none;
 
-                .ivu-icon{
-                    margin-left:5px;
+                .ivu-icon {
+                    margin-left: 5px;
                 }
             }
 
@@ -157,19 +159,190 @@
     }
 
     &-center {
-        .rowSpan(28%);
+        .colSpan(30%);
+
+        .col-body {
+            width: 100%;
+            height: 100%;
+            .fl-row-center;
+        }
+
+        .term-list {
+            width: 70%;
+            height: 100%;
+            border-right: 1px solid @borderColor;
+
+            .term-item {
+                width: 100%;
+                border-bottom: 1px solid @borderColor;
+                padding: 10px 20px;
+
+                &-name {
+                    font-size: 24px;
+                    font-weight: bold;
+                    color: @primary-textColor;
+
+                    span {
+                        .lineSpan(18px,3px,red,15px)
+                    }
+                }
+
+                &-students-num {
+                    color: @second-textColor;
+                    font-size: @primary-fontSize;
+                    margin: 10px;
+                }
+
+                &-start {
+                    color: @second-textColor;
+                    font-size: @primary-fontSize;
+                    margin-left: 10px;
+                }
+            }
+        }
+
+
+        .term-item-time-line {
+            position: relative;
+            width: 30%;
+            height: 100%;
+            padding-right: 9%;
+            color: @second-textColor;
+            .fl-col-center;
+
+            ul {
+                position: relative;
+                list-style: none;
+                width: 100%;
+            }
+
+            li {
+                margin: 25px 0;
+                font-size: @second-fontSize;
+                font-weight: bold;
+                justify-content: flex-end;
+                .fl-row-center;
+
+                &:last-child .time-line-tail {
+                    display: none;
+                }
+
+                &:nth-of-type(odd) .time-line-tail {
+                    border-color: #6d6d6d;
+                }
+
+                &:nth-of-type(even) .time-line-tail {
+                    border-color: #959595;
+                }
+
+                &:nth-of-type(odd) .time-dot {
+                    border-color: #6d6d6d;
+                }
+
+                &:nth-of-type(even) .time-dot {
+                    border-color: #959595;
+                }
+            }
+
+            .time-dot {
+                position: relative;
+                width: 25px;
+                height: 25px;
+                border-radius: 50%;
+                padding: 5px;
+                border: 3px solid @second-textColor;
+                margin-left: 10px;
+                z-index: 2;
+            }
+
+            .time-inner-dot {
+                display: inline-block;
+                width: 9px;
+                height: 9px;
+                background: #08d0c8;
+                border-radius: 50%;
+                position: absolute;
+                top: 5px;
+                left: 5px;
+            }
+
+            .time-line-tail {
+                height: 26px;
+                border-left: 3px solid @second-textColor;
+                position: absolute;
+                top: 22px;
+                left: 8px;
+                z-index: -1;
+            }
+        }
     }
 
     &-right {
-        .rowSpan(52%);
-    }
+        .colSpan(52%);
 
-    .rowSpan(@width) {
+        .grade-body {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: 20px;
+            border-bottom: 1px solid @borderColor;
+
+
+            .grade-item {
+                display: inline-block;
+                background: #5d5d5d;
+                color: #9b9b9b;
+                padding: 5px 20px;
+                font-size: @second-fontSize;
+                font-weight: bold;
+                border-radius: 50px;
+                margin: 10px;
+                cursor: pointer;
+
+                &:hover {
+                    .item-active;
+                }
+
+                &-icon {
+                    display: inline-block;
+                    width: 10px;
+                    height: 10px;
+                    background: #404040;
+                    border-radius: 50%;
+                }
+
+                &-name {
+                    margin: 0 10px;
+                }
+
+                .ivu-icon {
+                    font-size: 24px;
+                    color: #08ff11;
+                }
+            }
+
+            .item-active {
+                color: #fff;
+                background-color: #717171;
+            }
+        }
+    }
+    //一行分成几列
+    .colSpan(@width) {
         .fl-col-center;
         width: @width;
         height: 100%;
         border-left: 1px solid @borderColor;
     }
+    //分隔小横线
+    .lineSpan(@height,@width,@color,@mr) {
+        display: inline-block;
+        height: @height;
+        width: @width;
+        background: @color;
+        margin-right: @mr;
+    }
 
     .col-title {
         .fl-row-center;

TEAMModelOS/ClientApp/view/school-mgmt/SystemSetting/SystemSetting.vue

@@ -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>

TEAMModelOS/Properties/launchSettings.json

@@ -4,7 +4,7 @@
     "anonymousAuthentication": true,
     "iisExpress": {
       "applicationUrl": "http://localhost:51993",
-      "sslPort": 44364
+      "sslPort": 0
     }
   },
   "profiles": {