日常commit & pull dev分支

src/layouts/HomeLayout/HomeHeader/index.vue

@@ -25,6 +25,7 @@ export default {
     DefaultHeader,
     UserDropdown
   },
+
   computed: {
     ...mapState({
       profile: state => state.user.profile

src/layouts/TeacherMainLayout.vue

@@ -1,8 +0,0 @@
-<template>
-  <div>
-    <div></div>
-    <router-view></router-view>
-  </div>
-</template>
-
-<style lang="scss"></style>

src/router/routes.js

@@ -76,6 +76,10 @@ export default [
         path: "code",
         component: () => import("@/views/teacher/Code")
       },
+      {
+        path: "code/detail",
+        component: () => import("@/views/teacher/Code/detail")
+      },
 
       {
         path: "document",
@@ -99,7 +103,11 @@ export default [
       },
       {
         path: "code",
-        component: () => import("@/views/student/Code")
+        component: () => import("@/views/student/Code/index")
+      },
+      {
+        path: "code/detail",
+        component: () => import("@/views/student/Code/detail")
       },
       {
         path: "document",

src/views/student/Code/detail.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <page-header
+      :routes="[
+        { name: '代码作业', path: 'code' },
+        { name: '购物车web项目', path: 'code/detail' }
+      ]"
+    >
+      <template slot="title">
+        Here might be a page title
+      </template>
+      <template slot="content">
+        Here might be a page title
+      </template>
+    </page-header>
+    <page-body> </page-body>
+  </div>
+</template>
+
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+const codeAssignmentDetail = {
+  id: 1,
+  name: "软件需求规格说明书",
+  description: "这里是描述这里是描述这里是描述这里是描述这里是描述",
+  state: "未开始",
+  startAt: "2019-1-1",
+  endAt: "2019-6-1"
+};
+const codeAssignmentProjects = {
+  codeId: 1,
+  url: "https://www.github.com/adsf/adsfa",
+  name: "电影票web项目",
+  buildList: []
+};
+export default {
+  components: {
+    PageBody,
+    PageHeader
+  },
+  data() {
+    return {
+      codeAssignmentDetail,
+      codeAssignmentProjects
+    };
+  }
+};
+</script>
+
+<style scoped></style>

src/views/student/Code/index.vue

@@ -1,3 +1,126 @@
 <template>
-  <div></div>
+  <div>
+    <page-header :routes="[{ name: '代码作业', path: 'code' }]">
+      <template slot="title">
+        代码作业列表
+      </template>
+      <template slot="content">
+        Here might be a page title
+      </template>
+    </page-header>
+    <page-body>
+      <div>
+        <b-table
+          :data="codeData"
+          paginated
+          per-page="5"
+          detailed
+          detail-key="id"
+        >
+          <template slot-scope="props">
+            <b-table-column field="id" label="题目ID" numeric sortable centered>
+              {{ props.row.id }}
+            </b-table-column>
+
+            <b-table-column label="题目名称" centered>
+              <router-link :to="`/course-student/:courseId/code/detail`">
+                {{ props.row.name }}</router-link
+              >
+            </b-table-column>
+            <b-table-column label="状态" centered>
+              {{ props.row.state }}
+            </b-table-column>
+
+            <b-table-column label="开始时间" centered>
+              {{ props.row.startAt }}
+            </b-table-column>
+
+            <b-table-column label="结束时间" centered>
+              {{ props.row.endAt }}
+            </b-table-column>
+          </template>
+
+          <template slot="detail">
+            <article class="media">
+              <div class="media-content">
+                <div class="content">
+                  <p>
+                    <strong>成绩详情</strong>
+                    <small>这里可以放具体的作业成绩，前面可以放总评啥的</small>
+                    <br />
+                  </p>
+                </div>
+              </div>
+            </article>
+          </template>
+        </b-table>
+      </div>
+    </page-body>
+  </div>
 </template>
+
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+const codeData = [
+  {
+    id: 1,
+    name: "购物车web项目",
+    state: "未开始",
+    startAt: "2019-1-1",
+    endAt: "2019-6-1"
+  },
+  {
+    id: 2,
+    name: "购物车web项目",
+    state: "已结束",
+    startAt: "2019-1-1",
+    endAt: "2019-6-1"
+  },
+  {
+    id: 3,
+    name: "购物车web项目",
+    state: "正在进行",
+    startAt: "2019-1-1",
+    endAt: "2019-6-1"
+  }
+];
+export default {
+  components: {
+    PageBody,
+    PageHeader
+  },
+  data() {
+    return {
+      codeData,
+      docAssignment: {
+        name: "",
+        description: "",
+        startAt: new Date(),
+        endAt: new Date()
+      },
+      isCardModalActive: false
+    };
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+  padding: 30px;
+  .title {
+    font-size: 1.25rem;
+    small {
+      color: gray;
+      font-size: 1rem;
+    }
+  }
+  .content {
+    a {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/teacher/Code/detail.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <page-header
+      :routes="[
+        { name: '代码作业', path: 'code' },
+        { name: '购物车web项目', path: 'code/detail' }
+      ]"
+    >
+      <template slot="title">
+        Here might be a page title
+      </template>
+      <template slot="content">
+        Here might be a page title
+      </template>
+    </page-header>
+
+    <page-body>
+      <div class="data-table">
+        <!--下拉框&搜索框-->
+        <div class="form-group">
+          <!--搜索框-->
+          <b-field>
+            <b-input
+              placeholder="输入关键字查找小组"
+              type="search"
+              icon="magnify"
+            >
+            </b-input>
+          </b-field>
+        </div>
+
+        <div class="submit-state">
+          提交情况：<progress
+            class="process-bar progress is-link"
+            value="30"
+            max="100"
+          ></progress>
+          13/52
+        </div>
+
+        <b-tabs>
+          <b-tab-item label="已提交">
+            <div class="submitted-list">
+              <b-table
+                :data="data"
+                paginated
+                per-page="5"
+                detailed
+                detail-key="id"
+              >
+                <template slot-scope="props">
+                  <b-table-column
+                    field="id"
+                    label="小组ID"
+                    width="120"
+                    numeric
+                    sortable
+                    centered
+                  >
+                    {{ props.row.id }}
+                  </b-table-column>
+
+                  <b-table-column label="所处阶段" centered>
+                    {{ props.row.stage }}
+                  </b-table-column>
+
+                  <b-table-column label="构建" centered>
+                    <span class="tag is-success">{{ props.row.build }}</span>
+                  </b-table-column>
+
+                  <b-table-column label="部署" centered>
+                    <span class="tag is-failed">{{ props.row.deploy }}</span>
+                  </b-table-column>
+                  <b-table-column label="测试">
+                    {{ props.row.test }}
+                  </b-table-column>
+                </template>
+
+                <template slot="detail">
+                  <article class="media">
+                    <div class="media-content">
+                      <div class="content">
+                        <p>
+                          <strong>成绩详情</strong>
+                          <small
+                            >这里可以放具体的作业成绩，前面可以放总评啥的</small
+                          >
+                          <br />
+                        </p>
+                      </div>
+                    </div>
+                  </article>
+                </template>
+              </b-table>
+            </div>
+          </b-tab-item>
+
+          <b-tab-item label="未提交">
+            <b-table
+              :data="unsubmited.data"
+              :columns="unsubmited.columns"
+            ></b-table>
+          </b-tab-item>
+        </b-tabs>
+      </div>
+    </page-body>
+  </div>
+</template>
+
+<script>
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+
+const unsubmited = {
+  data: [
+    {
+      id: 1,
+      PM: "Jesse",
+      members: "Simmons\tClarence\tTina\tJohn"
+    },
+    {
+      id: 2,
+      PM: "Jesse",
+      members: "Simmons Clarence Tina John"
+    },
+    {
+      id: 3,
+      PM: "Jesse",
+      members: "Simmons Clarence Tina John"
+    }
+  ],
+  columns: [
+    {
+      field: "id",
+      label: "小组ID",
+      // width: "80",
+      numeric: true,
+      centered: true
+    },
+    {
+      field: "PM",
+      label: "组长"
+    },
+    {
+      field: "members",
+      label: "组员"
+    }
+  ]
+};
+const data = [
+  {
+    id: 1,
+    stage: "测试",
+    build: "SUCCESS",
+    deploy: "SUCCESS",
+    test: "10/10"
+  },
+  {
+    id: 2,
+    stage: "测试",
+    build: "SUCCESS",
+    deploy: "SUCCESS",
+    test: "10/10"
+  },
+  {
+    id: 2,
+    stage: "测试",
+    build: "SUCCESS",
+    deploy: "SUCCESS",
+    test: "10/10"
+  }
+];
+
+export default {
+  components: {
+    PageBody,
+    PageHeader
+  },
+  data() {
+    return {
+      data,
+      unsubmited
+    };
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.breadcrumb a {
+  /*color: #7957d5;*/
+  font-weight: bold;
+}
+.data-table {
+  width: 100%;
+  padding: 30px;
+  min-height: 80vh;
+  background-color: #ffffff;
+}
+.submitted-list {
+  /*margin-top: 30px;*/
+}
+.form-group {
+  display: flex;
+  justify-content: space-between;
+}
+.description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  word-wrap: break-word;
+  word-break: break-all;
+  display: -webkit-box;
+}
+.process-bar {
+  width: 50%;
+  margin-right: 10px;
+}
+.submit-state {
+  display: flex;
+  margin-top: 20px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+</style>

src/views/teacher/Code/index.vue

@@ -1,75 +1,209 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li><router-link :to="{ name: 'HOME' }">所有课程</router-link></li>
-        <li>
-          <router-link :to="`/course-teacher/${course.id}/dashboard`">{{
-            course.name
-          }}</router-link>
-        </li>
-
-        <!--TBM-->
-        <li class="is-active">
-          <router-link :to="`/student-course/${course.id}/question`"
-            >查看题目</router-link
+    <page-header :routes="[{ name: '代码作业', path: 'code' }]">
+      <template slot="title">
+        代码作业列表
+      </template>
+      <template slot="content">
+        Here might be a page title
+      </template>
+      <template slot="action">
+        <b-field>
+          <a class="button is-link" @click="isCardModalActive = true"
+            >新建代码作业</a
           >
-        </li>
-      </ul>
-    </nav>
+        </b-field>
+      </template>
+    </page-header>
+    <page-body>
+      <div>
+        <b-table
+          :data="codeData"
+          paginated
+          per-page="5"
+          detailed
+          detail-key="id"
+        >
+          <template slot-scope="props">
+            <b-table-column field="id" label="题目ID" numeric sortable centered>
+              {{ props.row.id }}
+            </b-table-column>
+
+            <b-table-column label="题目名称" centered>
+              <router-link :to="`/course-teacher/:courseId/code/detail`">
+                {{ props.row.name }}</router-link
+              >
+            </b-table-column>
+
+            <b-table-column label="开始时间" centered>
+              {{ props.row.startAt }}
+            </b-table-column>
+
+            <b-table-column label="结束时间" centered>
+              {{ props.row.endAt }}
+            </b-table-column>
+
+            <b-table-column label="修改" centered> </b-table-column>
+            <b-table-column label="删除" centered> </b-table-column>
+          </template>
+
+          <template slot="detail">
+            <article class="media">
+              <div class="media-content">
+                <div class="content">
+                  <p>
+                    <strong>成绩详情</strong>
+                    <small>这里可以放具体的作业成绩，前面可以放总评啥的</small>
+                    <br />
+                  </p>
+                </div>
+              </div>
+            </article>
+          </template>
+        </b-table>
+      </div>
+    </page-body>
+
+    <!--新建文档作业模态框-->
+    <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
+      <div class="card">
+        <div class="title">新建代码作业</div>
+        <div class="content">
+          <b-field label="作业名称">
+            <b-input v-model="docAssignment.name"></b-input>
+          </b-field>
+          <b-field label="作业描述">
+            <b-input v-model="docAssignment.description"></b-input>
+          </b-field>
+          <b-field label="开始时间">
+            <b-datepicker
+              v-model="docAssignment.startAt"
+              placeholder="Click to select..."
+              :min-date="minDate"
+              :max-date="maxDate"
+            >
+              <button class="button is-primary" @click="date = new Date()">
+                <b-icon icon="calendar-today"></b-icon>
+                <span>Today</span>
+              </button>
+
+              <button class="button is-danger" @click="date = null">
+                <b-icon icon="close"></b-icon>
+                <span>Clear</span>
+              </button>
+            </b-datepicker>
+          </b-field>
+          <b-field label="结束时间">
+            <b-datepicker
+              v-model="docAssignment.endAt"
+              placeholder="Click to select..."
+              :min-date="minDate"
+              :max-date="maxDate"
+            >
+              <button class="button is-primary" @click="date = new Date()">
+                <b-icon icon="calendar-today"></b-icon>
+                <span>Today</span>
+              </button>
+
+              <button class="button is-danger" @click="date = null">
+                <b-icon icon="close"></b-icon>
+                <span>Clear</span>
+              </button>
+            </b-datepicker>
+          </b-field>
+          <a class="button is-link" @click="createDocAssignment">确认创建</a>
+        </div>
+      </div>
+    </b-modal>
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-
+import PageHeader from "@/components/PageHeader";
+import PageBody from "@/components/PageBody/index";
+const codeData = [
+  {
+    id: 1,
+    name: "购物车web项目",
+    startAt: "2019-1-1",
+    endAt: "2019-6-1"
+  },
+  {
+    id: 2,
+    name: "软件需求规格说明书",
+    startAt: "2019-1-1",
+    endAt: "2019-6-1"
+  },
+  {
+    id: 3,
+    name: "软件需求规格说明书",
+    startAt: "2019-1-1",
+    endAt: "2019-6-1"
+  }
+];
 export default {
-  name: "index",
-  components: {},
-  computed: {
-    ...mapState({
-      course: state => state.course.currentCourse
-    })
+  components: {
+    PageBody,
+    PageHeader
   },
   data() {
+    const today = new Date();
     return {
-      courses: [],
-      review: [],
-      questionType: [
-        { id: 1, title: "文档作业题目" },
-        { id: 2, title: "代码作业题目" }
-      ],
-      data: []
+      minDate: new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() - 5
+      ),
+      maxDate: new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 5
+      ),
+      codeData,
+      docAssignment: {
+        name: "",
+        description: "",
+        startAt: new Date(),
+        endAt: new Date()
+      },
+      isCardModalActive: false
     };
+  },
+  methods: {
+    createDocAssignment() {
+      this.isCardModalActive = false;
+      console.log(
+        this.docAssignment.name,
+        this.docAssignment.description,
+        this.docAssignment.startAt,
+        this.docAssignment.endAt
+      );
+      this.data.push({
+        id: 4,
+        name: this.docAssignment.name,
+        startAt: "2019-1-1",
+        endAt: "2019-6-1"
+      });
+    }
   }
 };
 </script>
 
-<style scoped>
-.breadcrumb a {
-  /*color: #7957d5;*/
-  font-weight: bold;
-}
-.data-table {
-  width: 100%;
+<style lang="scss" scoped>
+.card {
   padding: 30px;
-  min-height: 80vh;
-  background-color: #ffffff;
-}
-.question-list {
-  margin-top: 30px;
-}
-.form-group {
-  display: flex;
-  justify-content: space-between;
-}
-.description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  word-wrap: break-word;
-  word-break: break-all;
-  display: -webkit-box;
+  .title {
+    font-size: 1.25rem;
+    small {
+      color: gray;
+      font-size: 1rem;
+    }
+  }
+  .content {
+    a {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
 }
 </style>

src/views/teacher/Document/detail.vue

@@ -34,8 +34,7 @@
             class="process-bar progress is-link"
             value="30"
             max="100"
-            >30%</progress
-          >
+          ></progress>
           13/52
         </div>
 
@@ -84,11 +83,6 @@
 
                 <template slot="detail">
                   <article class="media">
-                    <!--<figure class="media-left">-->
-                    <!--<p class="image is-64x64">-->
-                    <!--<img src="/static/img/placeholder-128x128.png">-->
-                    <!--</p>-->
-                    <!--</figure>-->
                     <div class="media-content">
                       <div class="content">
                         <p>
@@ -113,15 +107,12 @@
             ></b-table>
           </b-tab-item>
         </b-tabs>
-
-        <!--题目table-->
       </div>
     </page-body>
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
 import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 
@@ -197,11 +188,6 @@ export default {
     PageBody,
     PageHeader
   },
-  computed: {
-    ...mapState({
-      course: state => state.course.currentCourse
-    })
-  },
   data() {
     return {
       courses: [],

src/views/teacher/Document/index.vue

@@ -9,21 +9,18 @@
       </template>
 
       <template slot="action">
-        新建文档作业
+        <b-field>
+          <a class="button is-link" @click="isCardModalActive = true"
+            >新建文档作业</a
+          >
+        </b-field>
       </template>
     </page-header>
     <page-body>
       <div>
         <b-table :data="data" paginated per-page="5" detailed detail-key="id">
           <template slot-scope="props">
-            <b-table-column
-              field="id"
-              label="题目ID"
-              width="120"
-              numeric
-              sortable
-              centered
-            >
+            <b-table-column field="id" label="题目ID" numeric sortable centered>
               {{ props.row.id }}
             </b-table-column>
 
@@ -40,6 +37,8 @@
             <b-table-column label="结束时间" centered>
               {{ props.row.endAt }}
             </b-table-column>
+            <b-table-column label="修改" centered> 如何修改 </b-table-column>
+            <b-table-column label="删除" centered> 如何删除 </b-table-column>
           </template>
 
           <template slot="detail">
@@ -58,6 +57,58 @@
         </b-table>
       </div>
     </page-body>
+
+    <!--新建文档作业模态框-->
+    <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
+      <div class="card">
+        <div class="title">新建文档作业</div>
+        <div class="content">
+          <b-field label="作业名称">
+            <b-input v-model="docAssignment.name"></b-input>
+          </b-field>
+          <b-field label="作业描述">
+            <b-input v-model="docAssignment.description"></b-input>
+          </b-field>
+          <b-field label="开始时间">
+            <b-datepicker
+              v-model="docAssignment.startAt"
+              placeholder="Click to select..."
+              :min-date="minDate"
+              :max-date="maxDate"
+            >
+              <button class="button is-primary" @click="date = new Date()">
+                <b-icon icon="calendar-today"></b-icon>
+                <span>Today</span>
+              </button>
+
+              <button class="button is-danger" @click="date = null">
+                <b-icon icon="close"></b-icon>
+                <span>Clear</span>
+              </button>
+            </b-datepicker>
+          </b-field>
+          <b-field label="结束时间">
+            <b-datepicker
+              v-model="docAssignment.endAt"
+              placeholder="Click to select..."
+              :min-date="minDate"
+              :max-date="maxDate"
+            >
+              <button class="button is-primary" @click="date = new Date()">
+                <b-icon icon="calendar-today"></b-icon>
+                <span>Today</span>
+              </button>
+
+              <button class="button is-danger" @click="date = null">
+                <b-icon icon="close"></b-icon>
+                <span>Clear</span>
+              </button>
+            </b-datepicker>
+          </b-field>
+          <a class="button is-link" @click="createDocAssignment">确认创建</a>
+        </div>
+      </div>
+    </b-modal>
   </div>
 </template>
 
@@ -90,11 +141,63 @@ export default {
     PageHeader
   },
   data() {
+    const today = new Date();
     return {
-      data
+      minDate: new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() - 5
+      ),
+      maxDate: new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        today.getDate() + 5
+      ),
+      data,
+      docAssignment: {
+        name: "",
+        description: "",
+        startAt: new Date(),
+        endAt: new Date()
+      },
+      isCardModalActive: false
     };
+  },
+  methods: {
+    createDocAssignment() {
+      this.isCardModalActive = false;
+      console.log(
+        this.docAssignment.name,
+        this.docAssignment.description,
+        this.docAssignment.startAt,
+        this.docAssignment.endAt
+      );
+      this.data.push({
+        id: 4,
+        name: this.docAssignment.name,
+        startAt: "2019-1-1",
+        endAt: "2019-6-1"
+      });
+    }
   }
 };
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.card {
+  padding: 30px;
+  .title {
+    font-size: 1.25rem;
+    small {
+      color: gray;
+      font-size: 1rem;
+    }
+  }
+  .content {
+    a {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/teacher/Result/index.vue

@@ -296,6 +296,7 @@ export default {
   },
   data() {
     return {
+      name: "",
       courses: [],
       review: [],
       questionType: [