Browse Source

[修改]成绩分配样式

soleil 7 years ago
parent
commit
a6c8eb54f2

+ 57 - 1
src/views/student/Dashboard/index.vue

@@ -1,3 +1,59 @@
 <template>
-  <div></div>
+  <div>
+    <page-header :routes="[{ name: '小白大王的工作台', path: 'dashboard/' }]">
+      <template slot="title">
+        工作台
+      </template>
+      <template slot="content">
+        当前<strong>&nbsp;5&nbsp;</strong>份作业进行中
+      </template>
+      <!--<template slot="extraContent">-->
+      <!--Here might be a page title-->
+      <!--</template>-->
+      <!--<template slot="logo">-->
+      <!--Here might-->
+      <!--</template>-->
+      <!--<template slot="action">-->
+      <!--Here might be a page title-->
+      <!--</template>-->
+    </page-header>
+    <page-body>
+      <div class="data-table">
+        <div class="subtitle">代码作业</div>
+        <div class="columns is-multiline is-desktop">
+          <div class="column is-4"><card hoverable>代码作业一</card></div>
+          <div class="column is-4"><card hoverable>代码作业二</card></div>
+          <div class="column is-4"><card hoverable>代码作业三</card></div>
+        </div>
+        <div class="subtitle">文档作业</div>
+        <div class="columns is-multiline is-desktop">
+          <div class="column is-4"><card hoverable>文档作业一</card></div>
+        </div>
+        <div class="subtitle">互评作业</div>
+        <div class="columns is-multiline is-desktop">
+          <div class="column is-4"><card hoverable>互评作业一</card></div>
+        </div>
+      </div>
+    </page-body>
+  </div>
 </template>
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+import Card from "@/components/Card";
+export default {
+  components: {
+    PageBody,
+    PageHeader,
+    Card
+  }
+};
+</script>
+<style lang="scss" scoped>
+.subtitle {
+  width: 100%;
+  font-weight: bold;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dbdbdb;
+}
+</style>

+ 66 - 3
src/views/teacher/Home/index.vue

@@ -27,8 +27,49 @@
       <div class="card">
         <div class="title">新建课程</div>
         <div class="content">
-          <b-field label="课程名"> <b-input></b-input> </b-field>
-          <b-field label="选课码"> <b-input></b-input> </b-field>
+          <b-field
+            label="课程名"
+            :type="$v.coursename.$error ? 'is-danger' : ''"
+            :message="
+              $v.coursename.$error
+                ? [
+                    !$v.coursename.minLength
+                      ? '课程名不少于2个字符'
+                      : undefined,
+                    !$v.coursename.maxLength
+                      ? '课程名不多于20个字符'
+                      : undefined,
+                    !$v.coursename.required ? '请输入课程名' : undefined
+                  ]
+                : ''
+            "
+          >
+            <b-input
+              v-model="$v.coursename.$model"
+              placeholder="请输入课程名"
+            ></b-input>
+          </b-field>
+          <b-field
+            label="选课码"
+            :type="$v.coursenum.$error ? 'is-danger' : ''"
+            :message="
+              $v.coursenum.$error
+                ? [
+                    !$v.coursenum.minLength ? '选课码不少于4个字符' : undefined,
+                    !$v.coursenum.maxLength
+                      ? '选课码不多于10个字符'
+                      : undefined,
+                    !$v.coursenum.required ? '请填写选课码' : undefined,
+                    !$v.coursenum.alphaNum ? '选课码应为字母或数字' : undefined
+                  ]
+                : ''
+            "
+          >
+            <b-input
+              v-model="$v.coursenum.$model"
+              placeholder="请输入选课码"
+            ></b-input>
+          </b-field>
           <a class="button is-link" @click="isCardModalActive = false">新建</a>
         </div>
       </div>
@@ -39,15 +80,37 @@
 <script>
 import Card from "@/components/Card";
 import { getTeacherCourses } from "@/api/course";
+import {
+  required,
+  minLength,
+  maxLength,
+  alphaNum
+} from "vuelidate/lib/validators";
 
 export default {
   components: {
     Card
   },
+  validations: {
+    coursename: {
+      required,
+      minLength: minLength(2),
+      maxLength: maxLength(20)
+    },
+    coursenum: {
+      required,
+      minLength: minLength(4),
+      maxLength: maxLength(10),
+      alphaNum
+    }
+  },
   data() {
     return {
       courses: [],
-      isCardModalActive: false
+      isCardModalActive: false,
+      username: "",
+      coursename: "",
+      coursenum: ""
     };
   },
   mounted() {

+ 9 - 10
src/views/teacher/Question/index.vue

@@ -23,16 +23,15 @@
             </b-select>
           </b-field>
           <!--搜索框-->
-          <div class="field has-addons">
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                placeholder="输入关键字查找题目"
-              />
-            </div>
-            <div class="control"><a class="button is-link"> 查找 </a></div>
-          </div>
+          <b-field position="is-centered">
+            <b-input
+              placeholder="输入关键字查找题目"
+              type="search"
+              icon="magnify"
+            >
+            </b-input>
+            <p class="control"><button class="button is-link">查找</button></p>
+          </b-field>
           <!--<b-field>-->
           <!--<b-input-->
           <!--placeholder="输入关键字查找题目"-->

+ 57 - 18
src/views/teacher/Result/index.vue

@@ -32,11 +32,17 @@
               <b-table-column label="学生姓名" width="120" centered>
                 {{ props.row.student }}
               </b-table-column>
-              <b-table-column label="文档作业" centered> 80 </b-table-column>
+              <b-table-column label="文档作业" centered sortable>
+                80
+              </b-table-column>
 
-              <b-table-column label="代码作业" centered> 90 </b-table-column>
+              <b-table-column label="代码作业" centered sortable>
+                90
+              </b-table-column>
 
-              <b-table-column label="互评作业" centered> 100 </b-table-column>
+              <b-table-column label="互评作业" centered sortable>
+                100
+              </b-table-column>
               <b-table-column
                 field="finalResult"
                 label="总评"
@@ -105,34 +111,58 @@
           <div class="homework-item">
             <label>文档作业</label>
             <div class="homework-percent">
-              <span>第一次作业</span>
-              <b-input></b-input>
+              <b-field position="is-centered">
+                <b-input placeholder="第一次作业百分比"> </b-input>
+                <p class="control">
+                  <button class="button is-light">%</button>
+                </p>
+              </b-field>
             </div>
             <div class="homework-percent">
-              <span>第一次作业</span>
-              <b-input></b-input>
+              <b-field position="is-centered">
+                <b-input placeholder="第二次作业百分比"> </b-input>
+                <p class="control">
+                  <button class="button is-light">%</button>
+                </p>
+              </b-field>
             </div>
             <div class="homework-percent">
-              <span>第一次作业</span>
-              <b-input></b-input>
+              <b-field
+                :type="$v.percent.$error ? 'is-danger' : ''"
+                :message="$v.percent.$error ? '请填写1-100之间的数字' : ''"
+                position="is-centered"
+              >
+                <b-input
+                  v-model="$v.percent.$model"
+                  placeholder="第三次作业百分比"
+                >
+                </b-input>
+                <p class="control">
+                  <button class="button is-light">%</button>
+                </p>
+              </b-field>
             </div>
           </div>
           <div class="homework-item">
             <label>互评作业</label>
             <div class="homework-percent">
-              <span>第一次作业</span>
-              <b-input></b-input>
-            </div>
-            <div class="homework-percent">
-              <span>第一次作业</span>
-              <b-input></b-input>
+              <b-field position="is-centered">
+                <b-input placeholder="第一次作业百分比"> </b-input>
+                <p class="control">
+                  <button class="button is-light">%</button>
+                </p>
+              </b-field>
             </div>
           </div>
           <div class="homework-item">
             <label>代码作业</label>
             <div class="homework-percent">
-              <span>第一次作业</span>
-              <b-input></b-input>
+              <b-field position="is-centered">
+                <b-input placeholder="第一次作业百分比"> </b-input>
+                <p class="control">
+                  <button class="button is-light">%</button>
+                </p>
+              </b-field>
             </div>
           </div>
         </div>
@@ -150,6 +180,7 @@ import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import Chart from "chart.js";
 import BInput from "buefy/src/components/input/Input";
+import { required, numeric, between } from "vuelidate/lib/validators";
 
 const data = [
   {
@@ -325,6 +356,13 @@ export default {
     PageHeader,
     PageBody
   },
+  validations: {
+    percent: {
+      required,
+      numeric,
+      between: between(0, 100)
+    }
+  },
   computed: {
     ...mapState({
       course: state => state.course.currentCourse
@@ -341,7 +379,8 @@ export default {
       ],
       data,
       isCardModalActive: false,
-      myChart2: {}
+      myChart2: {},
+      percent: ""
     };
   },
   methods: {