page frame -f

src/assets/styles/base.scss

@@ -57,7 +57,6 @@ h4,
 h5,
 h6 {
   font-size: 100%;
-  font-weight: normal;
 }
 fieldset,
 img {
@@ -116,6 +115,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-size: $--font-size-base;
   color: $--color-text-primary;
+  font-weight: bold;
 }
 
 // color

src/assets/styles/element-ui-costom.scss

@@ -78,6 +78,11 @@
 }
 // input
 .el-input {
+  &.is-focus {
+    .el-input__inner {
+      border-color: $--color-primary !important;
+    }
+  }
   .el-input__inner {
     border-radius: 7px;
     border-color: #ddd;
@@ -100,6 +105,7 @@
 // button
 .el-button {
   border-radius: $--border-radius;
+  min-width: 88px;
   > .icon {
     margin-right: 5px;
   }
@@ -182,6 +188,11 @@
   color: $--color-text-regular;
   font-weight: bold;
 
+  &--border {
+    border-radius: $--border-radius;
+    border: 1px solid $--color-border;
+  }
+
   &__header thead {
     font-size: 16px;
     color: $--color-text-primary;
@@ -195,6 +206,69 @@
       }
     }
   }
+  td,
+  th {
+    border-color: $--color-border-light !important;
+  }
+}
+// el-checkbox
+.el-checkbox {
+  .el-checkbox__input {
+    .el-checkbox__inner {
+      width: 18px;
+      height: 18px;
+      border-color: $--color-border;
+    }
+    &.is-checked {
+      .el-checkbox__inner {
+        border: none;
+        background-color: transparent;
+        background-image: url(../images/icon-checked.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    &.is-focus {
+      .el-checkbox__inner {
+        border-color: $--color-border;
+      }
+    }
+  }
+  .el-checkbox__label {
+    color: $--color-text-regular !important;
+    font-weight: bold;
+  }
+}
+.el-radio {
+  .el-radio__input {
+    .el-radio__inner {
+      width: 18px;
+      height: 18px;
+      border-color: $--color-border;
+
+      &::after {
+        display: none;
+      }
+    }
+    &.is-checked {
+      .el-radio__inner {
+        border: none;
+        background-color: transparent;
+        background-image: url(../images/icon-radio-checked.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    &.is-focus {
+      .el-radio__inner {
+        border-color: $--color-border;
+      }
+    }
+  }
+  .el-radio__label {
+    color: $--color-text-regular !important;
+    font-weight: bold;
+  }
 }
 
 // el-pagination

src/assets/styles/home.scss

@@ -233,45 +233,45 @@
   background-color: #fff;
   border-radius: $--border-radius;
 
-  > .el-table {
-    border-radius: $--border-radius;
+  &-border {
     border: 1px solid $--color-border;
   }
+  &-pad {
+    padding: 20px;
+  }
 
   &-filter {
     padding: 20px 20px 0;
     border: 1px solid $--color-border;
   }
-}
-.part-title {
-  font-size: 16px;
-  margin-bottom: 15px;
-  height: 32px;
-  line-height: 32px;
-}
-.part-title h2 {
-  float: left;
-  font-weight: 600;
-}
-.part-title-infos {
-  float: right;
-  > .ivu-btn:not(:first-child) {
-    margin-left: 5px;
+
+  .part-title {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 15px 20px;
+    line-height: 30px;
+    overflow: hidden;
+
+    h2 {
+      float: left;
+    }
+    &-infos {
+      float: right;
+    }
+  }
+  .part-body {
+    padding: 25px;
+  }
+  .part-page {
+    margin-top: 15px;
+    text-align: right;
+  }
+  .part-none {
+    padding: 100px;
+    font-size: 20px;
+    color: $--color-text-secondary;
+    text-align: center;
   }
-}
-.part-page {
-  margin-top: 15px;
-  text-align: right;
-}
-.part-filter {
-  border-bottom: 1px dashed #e0e0e0;
-  margin-bottom: 20px;
-}
-.part-none {
-  padding: 100px;
-  font-size: 20px;
-  color: $--color-text-secondary;
-  text-align: center;
 }
 
 /* table */
@@ -280,22 +280,29 @@
   border-spacing: 0;
   border-collapse: collapse;
   text-align: center;
-  margin-bottom: 30px;
-}
-.table th {
-  padding: 10px;
-  line-height: 20px;
-  letter-spacing: 1px;
-  border: 1px solid $--border-color-light;
-}
-.table td {
-  padding: 10px;
-  line-height: 20px;
-  border: 1px solid $--border-color-light;
-}
-.table .td-th {
-  font-weight: 600;
-  color: $--color-text-primary;
+  margin-bottom: 25px;
+
+  th {
+    padding: 17px;
+    line-height: 20px;
+    letter-spacing: 1px;
+    border: 1px solid $--border-color-light;
+  }
+  td {
+    padding: 17px;
+    line-height: 20px;
+    border: 1px solid $--border-color-light;
+  }
+  .td-th {
+    font-weight: 600;
+    color: $--color-text-primary;
+  }
+
+  &-striped {
+    tr:nth-of-type(odd) {
+      background-color: $--color-background;
+    }
+  }
 }
 
 /* list */

src/assets/styles/icons.scss

@@ -91,16 +91,31 @@
     width: 14px;
     height: 14px;
   }
+  &-download-act {
+    background-image: url(../images/icon-download-act.png);
+    width: 16px;
+    height: 16px;
+  }
   &-share {
     background-image: url(../images/icon-share.png);
     width: 14px;
     height: 14px;
   }
+  &-share-gray {
+    background-image: url(../images/icon-share-gray.png);
+    width: 14px;
+    height: 14px;
+  }
   &-plus {
     background-image: url(../images/icon-plus.png);
     width: 14px;
     height: 14px;
   }
+  &-plus-act {
+    background-image: url(../images/icon-plus-act.png);
+    width: 18px;
+    height: 18px;
+  }
   &-edit {
     background-image: url(../images/icon-edit.png);
   }
@@ -131,4 +146,14 @@
   &-circle-lock {
     background-image: url(../images/icon-circle-lock.png);
   }
+  &-files {
+    background-image: url(../images/icon-files.png);
+    width: 18px;
+    height: 14px;
+  }
+  &-files-act {
+    background-image: url(../images/icon-files-act.png);
+    width: 18px;
+    height: 14px;
+  }
 }

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 
 @import "./login.scss";
 @import "./account.scss";
+@import "./pages.scss";
 
 @import "./element-ui-costom.scss";
 // @import "./common-comp.scss";

src/assets/styles/pages.scss

@@ -0,0 +1,126 @@
+// task-detail
+.task-detail {
+  border-radius: $--border-radius;
+  border: 1px solid $--color-border;
+
+  .task-title {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 15px 20px;
+    line-height: 30px;
+    border-bottom: 1px solid $--color-border;
+    overflow: hidden;
+
+    h2 {
+      float: left;
+
+      span:first-child {
+        margin-right: 50px;
+      }
+    }
+    &-infos {
+      float: right;
+    }
+    .el-checkbox__label {
+      font-size: 16px;
+      color: $--color-text-primary !important;
+    }
+  }
+  .task-body {
+    padding: 25px;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 18px;
+      top: 0;
+      left: 0;
+      background: linear-gradient(
+        0deg,
+        rgba(245, 245, 245, 0) 0%,
+        rgba(245, 245, 245, 1) 100%
+      );
+    }
+
+    .table {
+      border-radius: $--border-radius;
+      color: $--color-text-regular;
+      border: 1px solid $--color-border;
+      border-bottom: 0;
+      border-right: 0;
+      border-collapse: separate;
+      overflow: hidden;
+
+      th {
+        border-left: 0;
+        border-top: 0;
+        font-size: 16px;
+        color: $--color-text-primary;
+      }
+      td {
+        border-left: 0;
+        border-top: 0;
+      }
+      tr:nth-of-type(even) {
+        background-color: $--color-background;
+      }
+      td[rowspan="2"] {
+        background-color: $--color-white;
+      }
+    }
+    .icon {
+      margin-right: 10px;
+    }
+  }
+  .task-action {
+    text-align: right;
+    .el-button--default {
+      color: $--color-text-regular;
+      font-weight: bold;
+    }
+  }
+}
+
+// rule-warning
+.rule-warning {
+  color: $--color-text-regular;
+  font-weight: bold;
+  .rule-tips {
+    padding-left: 40px;
+    line-height: 50px;
+  }
+  .rule-spin {
+    margin-right: 10px;
+  }
+  .el-form {
+    width: 525px;
+    margin-left: 217px;
+    padding: 27px 27px 5px;
+    border: 1px solid $--color-border;
+    border-radius: $--border-radius;
+  }
+  .rule-btns {
+    margin-top: 26px;
+    margin-left: 217px;
+  }
+}
+.rule-form {
+  border-radius: $--border-radius;
+  border: 1px solid $--color-border;
+  padding: 26px;
+
+  .el-form-item__label {
+    color: $--color-text-regular;
+  }
+}
+// business-fields
+.business-fields {
+  padding: 25px;
+  border-radius: $--border-radius;
+  border: 1px solid $--color-border;
+  .el-form-item {
+    margin-bottom: 5px;
+  }
+}

src/assets/styles/variables.scss

@@ -1,6 +1,6 @@
 // color ------------------->
-$--color-text-primary: #555555 !default;
-$--color-text-regular: #888888 !default;
+$--color-text-primary: #545454 !default;
+$--color-text-regular: #878787 !default;
 $--color-text-secondary: #bbbbbb !default;
 $--color-text-placeholder: #cccccc !default;
 $--border-color-base: #dcdfe6 !default;
@@ -23,6 +23,7 @@ $--color-background-dark: #21252b;
 $--color-background-act-dark: #2c313a;
 // border
 $--color-border: #e2e2e2;
+$--color-border-light: #e8e8e8;
 // shadow
 $--shadow-light: 0 0 1px rgba(0, 0, 0, 0.15) !default;
 

src/constants/navs.js

@@ -85,7 +85,13 @@ const navs = [
     children: [
       {
         title: "用户管理",
-        router: "UserManage"
+        router: "UserManage",
+        children: [
+          {
+            title: "修改",
+            router: "UserEdit"
+          }
+        ]
       },
       {
         title: "密码管理",

src/modules/base/components/BusinessFields.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="business-fields">
+    <el-form ref="ModalForm" label-width="90px">
+      <el-form-item label="必选字段：">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox label="复选框 A"></el-checkbox>
+          <el-checkbox label="复选框 B"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="扩展字段：">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox label="复选框 A"></el-checkbox>
+          <el-checkbox label="复选框 B"></el-checkbox>
+          <el-checkbox label="复选框 C"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          class="btn-table-icon"
+          icon="icon icon-share-gray"
+          @click="toImport"
+          >导入考务扩展字段</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "business-fields",
+  data() {
+    return {
+      checkList: []
+    };
+  },
+  methods: {
+    toImport() {}
+  }
+};
+</script>

src/modules/base/components/RuleCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="rule-card rule-form">
+    <el-form ref="ModalForm1" label-width="90px" inline>
+      <el-form-item label="版号版式：">
+        <el-select
+          v-model="modalForm.paperType"
+          style="width: 142px;"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option
+            v-for="(val, key) in paperTypes"
+            :key="key"
+            :value="key"
+            :label="val"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="AB卷版式：">
+        <el-select
+          v-model="modalForm.paperType"
+          style="width: 142px;"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option
+            v-for="(val, key) in paperTypes"
+            :key="key"
+            :value="key"
+            :label="val"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item style="margin-left: 30px;">
+        <el-checkbox v-model="modalForm.absent">启用“缺考填涂”</el-checkbox>
+      </el-form-item>
+      <el-form-item style="margin-left: 30px;">
+        <el-checkbox v-model="modalForm.write">启用“手写签名”</el-checkbox>
+      </el-form-item>
+    </el-form>
+    <el-form ref="ModalForm2" label-width="130px" style="max-width: 850px;">
+      <el-form-item label="考务字段：">
+        <business-fields></business-fields>
+      </el-form-item>
+      <el-form-item label="注意事项：">
+        <el-input type="textarea" v-model="modalForm.tips"></el-input>
+      </el-form-item>
+      <el-form-item label="客观题注意事项：">
+        <el-input v-model="modalForm.tips"></el-input>
+      </el-form-item>
+      <el-form-item label="主观题注意事项：">
+        <el-input v-model="modalForm.tips"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import BusinessFields from "./BusinessFields";
+
+export default {
+  name: "rule-card",
+  components: {
+    BusinessFields
+  },
+  data() {
+    return {
+      modalForm: {
+        paperType: ""
+      },
+      paperTypes: []
+    };
+  },
+  methods: {
+    save() {}
+  }
+};
+</script>

src/modules/base/components/RuleWarning.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="rule-warning rule-form">
+    <p class="rule-tips">题卡/试卷制作计划预警：以“印刷计划”时间为参照</p>
+    <el-form ref="ModalForm" label-width="90px">
+      <el-form-item label="命题老师：">
+        <span class="rule-spin">提前</span>
+        <el-select
+          v-model="modalForm.topicTeacher"
+          style="width: 156px;"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option
+            v-for="item in times"
+            :key="item"
+            :value="item"
+            :label="item"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="管理员：">
+        <span class="rule-spin">提前</span>
+        <el-select
+          v-model="modalForm.topicTeacher"
+          style="width: 156px;"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option
+            v-for="item in times"
+            :key="item"
+            :value="item"
+            :label="item"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="印刷员：">
+        <span class="rule-spin">提前</span>
+        <el-select
+          v-model="modalForm.topicTeacher"
+          style="width: 156px;"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option
+            v-for="item in times"
+            :key="item"
+            :value="item"
+            :label="item"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="rule-btns">
+      <el-button type="primary">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "rule-warning",
+  data() {
+    return {
+      modalForm: {
+        topicTeacher: "",
+        admin: "",
+        printer: ""
+      },
+      times: []
+    };
+  },
+  methods: {}
+};
+</script>

src/modules/base/router.js

@@ -1,5 +1,6 @@
 import RuleManage from "./views/RuleManage.vue";
 import UserManage from "./views/UserManage.vue";
+import UserEdit from "./views/UserEdit.vue";
 import PswdManage from "./views/PswdManage.vue";
 
 export default [
@@ -8,6 +9,14 @@ export default [
     name: "UserManage",
     component: UserManage
   },
+  {
+    path: "/base/user-edit/:userId",
+    name: "UserEdit",
+    component: UserEdit,
+    meta: {
+      relate: "UserManage/UserEdit"
+    }
+  },
   {
     path: "/base/pswd-manage",
     name: "PswdManage",

src/modules/base/views/RuleManage.vue

@@ -1,15 +1,46 @@
 <template>
   <div class="rule-manage">
-    rule-manage
+    <div style="margin-bottom: 20px;">
+      <el-button
+        v-for="item in menus"
+        :key="item.id"
+        :type="item.id == curMenu.id ? 'primary' : 'default'"
+        @click="selectMenu(item)"
+        >{{ item.name }}</el-button
+      >
+    </div>
+    <rule-card v-if="curMenu.id === '1'"></rule-card>
+    <rule-warning v-else></rule-warning>
   </div>
 </template>
 
 <script>
+import RuleCard from "../components/RuleCard";
+import RuleWarning from "../components/RuleWarning";
+
 export default {
   name: "rule-manage",
+  components: {
+    RuleCard,
+    RuleWarning
+  },
   data() {
-    return {};
+    return {
+      menus: [
+        { id: "1", name: "题卡规则" },
+        { id: "2", name: "预警规则" }
+      ],
+      curMenu: {}
+    };
+  },
+  created() {
+    this.curMenu = this.menus[0];
   },
-  methods: {}
+  methods: {
+    selectMenu(item) {
+      this.curMenu = item;
+    },
+    save() {}
+  }
 };
 </script>

src/modules/base/views/UserEdit.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="user-edit part-box part-box-pad part-box-border">
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item prop="loginName" label="用户名：">
+        <el-input
+          style="width:282px;"
+          v-model.trim="modalForm.loginName"
+          placeholder="请输入年级名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="name" label="姓名：">
+        <el-input
+          style="width:282px;"
+          v-model.trim="modalForm.name"
+          placeholder="请输入年级名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="roleId" label="管理员：">
+        <el-select
+          style="width:142px;"
+          v-model="modalForm.roleId"
+          placeholder="请选择角色"
+        >
+          <el-option
+            v-for="item in roles"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          style="width:88px;"
+          type="primary"
+          :disabled="isSubmit"
+          @click="submit('loginForm')"
+          >保存</el-button
+        >
+        <el-button style="width:88px;" @click="goback">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { updateUser } from "../api";
+
+export default {
+  name: "user-edit",
+  data() {
+    return {
+      modalForm: {
+        name: "",
+        loginName: "",
+        roleId: ""
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "change"
+          }
+        ],
+        loginName: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: "change"
+          }
+        ],
+        roleId: [
+          {
+            required: true,
+            message: "请选择角色",
+            trigger: "change"
+          }
+        ]
+      },
+      roles: [
+        {
+          id: "1",
+          name: "教师"
+        },
+        {
+          id: "2",
+          name: "主任"
+        }
+      ],
+      isSubmit: false
+    };
+  },
+  methods: {
+    async submit(name) {
+      const valid = await this.$refs[name].validate();
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const data = await updateUser(this.modalForm).catch(() => {
+        this.isSubmit = false;
+      });
+      if (!data) return;
+
+      this.isSubmit = false;
+      this.$ls.set("token", data.token, this.GLOBAL.authTimeout);
+      this.$ls.set("user", data.user, this.GLOBAL.authTimeout);
+      this.$store.commit("setUser", data.user);
+      this.$router.push({
+        name: "Home"
+      });
+    }
+  }
+};
+</script>

src/modules/base/views/UserManage.vue

@@ -84,7 +84,7 @@
               type="text"
               icon="icon icon-edit"
               @click="toEdit(scope.row)"
-              title="确认"
+              title="编辑"
             ></el-button>
             <el-button
               class="btn-table-icon"
@@ -139,7 +139,7 @@ export default {
       visible: false,
       ABLE_TYPE,
       roles: [],
-      users: [{ id: "" }],
+      users: [{ id: "1" }],
       curUser: {}
     };
   },
@@ -166,8 +166,12 @@ export default {
       this.getList();
     },
     toEdit(row) {
-      this.curUser = row;
-      this.$refs.ModifyData.open();
+      this.$router.push({
+        name: "UserEdit",
+        params: {
+          userId: row.id
+        }
+      });
     }
   }
 };

src/modules/exam-center/views/DoneTaskDetail.vue

@@ -1,6 +1,43 @@
 <template>
-  <div class="done-task-detail">
-    done-task-detail
+  <div class="done-task-detail task-detail">
+    <div class="task-title">
+      <h2>
+        <span>考试名称： 这里是考试名称目前不知晓字数 </span>
+        <span>科目名称：语文</span>
+      </h2>
+    </div>
+    <div class="task-body">
+      <table class="table">
+        <tr>
+          <th>试卷类型</th>
+          <th>试卷文件</th>
+          <th>答题卡</th>
+          <th>标答</th>
+          <th>试卷结构</th>
+        </tr>
+        <tr>
+          <td>A卷</td>
+          <td>试卷名称在这里</td>
+          <td :rowspan="aOrB ? 2 : 1">
+            答题卡名称
+          </td>
+          <td><i class="icon icon-download-act"></i>A卷标答下载</td>
+          <td :rowspan="aOrB ? 2 : 1">
+            <i class="icon icon-download-act"></i>试卷结构下载
+          </td>
+        </tr>
+        <tr v-if="aOrB">
+          <td>B卷</td>
+          <td>试卷名称在这里</td>
+          <td><i class="icon icon-download-act"></i>B卷标答下载</td>
+        </tr>
+      </table>
+
+      <div class="task-action">
+        <el-button type="danger" style="width:88px;">撤回</el-button>
+        <el-button @click="goback" style="width:88px;">返回</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,7 +45,10 @@
 export default {
   name: "done-task-detail",
   data() {
-    return {};
+    return {
+      taskId: this.$route.params.taskId,
+      aOrB: true
+    };
   },
   methods: {}
 };

src/modules/exam-center/views/ExamModify.vue

@@ -1,6 +1,88 @@
 <template>
-  <div class="exam-modify">
-    exam-modify
+  <div class="exam-modify part-box part-box-border part-box-pad">
+    <el-form ref="ModalForm" label-width="170px">
+      <el-form-item label="考试名称：">
+        <el-input
+          style="width: 439px;"
+          v-model.trim="modalForm.title"
+          placeholder="请输入内容"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="考务文件：">
+        <el-input
+          style="width: 439px;margin-right:18px;"
+          v-model.trim="modalForm.title"
+          disabled=""
+        ></el-input>
+        <el-button>选择</el-button>
+        <el-button>预览</el-button>
+      </el-form-item>
+      <el-form-item label="考试开始时间："><p>2020-5-7 9:00</p> </el-form-item>
+      <el-form-item label="打印时间：">
+        <el-date-picker
+          v-model="modalForm.printTime"
+          type="date"
+          placeholder="请选择日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="备用方式：">
+        <el-radio-group v-model="modalForm.type">
+          <el-radio :label="3">考试任务备用方式</el-radio>
+          <el-radio :label="6">考场备用方式</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备用各科试卷题卡份数：">
+        <el-input-number
+          style="width:220px;"
+          v-model="modalForm.startNumber"
+          :min="1"
+          :max="1000"
+          :step="1"
+          step-strictly
+          :controls="false"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="指派命题老师：">
+        <el-table
+          :data="courses"
+          style="width: 420px;line-height:23px;"
+          border
+          stripe
+        >
+          <el-table-column
+            width="154"
+            prop="name"
+            label="科目"
+          ></el-table-column>
+          <el-table-column label="命题老师">
+            <template slot-scope="scope">
+              <el-select
+                v-model="scope.row.teacher"
+                size="small"
+                style="width: 156px;"
+                placeholder="请选择"
+                @change="teacherSelect"
+                clearable
+              >
+                <el-option
+                  v-for="(val, key) in teachers"
+                  :key="key"
+                  :value="key"
+                  :label="val"
+                ></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button @click="goback">返回</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -8,8 +90,28 @@
 export default {
   name: "exam-modify",
   data() {
-    return {};
+    return {
+      modalForm: {},
+      teachers: [],
+      courses: [
+        {
+          id: "",
+          name: "语文",
+          teacher: ""
+        },
+        {
+          id: "",
+          name: "语文1",
+          teacher: ""
+        }
+      ]
+    };
   },
-  methods: {}
+  methods: {
+    save() {},
+    teacherSelect() {
+      // TODO: 修改teachers数据;
+    }
+  }
 };
 </script>

src/modules/exam-center/views/WaitTaskDetail.vue

@@ -1,6 +1,40 @@
 <template>
-  <div class="wait-task-detail">
-    wait-task-detail
+  <div class="wait-task-detail task-detail">
+    <div class="task-title">
+      <h2>
+        <span>考试名称： 这里是考试名称目前不知晓字数 </span>
+        <span>科目名称：语文</span>
+      </h2>
+      <div class="task-title-infos">
+        <el-checkbox v-model="aOrB">启用A/B卷</el-checkbox>
+      </div>
+    </div>
+    <div class="task-body">
+      <table class="table">
+        <tr>
+          <th>试卷类型</th>
+          <th>试卷文件</th>
+          <th>答题卡</th>
+        </tr>
+        <tr>
+          <td>A卷</td>
+          <td><i class="icon icon-files"></i>点击上传试卷文件</td>
+          <td :rowspan="aOrB ? 2 : 1">
+            <i class="icon icon-plus-act"></i>创建答题卡
+          </td>
+        </tr>
+        <tr v-if="aOrB">
+          <td>B卷</td>
+          <td><i class="icon icon-files"></i>点击上传试卷文件</td>
+        </tr>
+      </table>
+
+      <div class="task-action">
+        <el-button type="primary" style="width:105px;">确认提交</el-button>
+        <el-button style="width:88px;">暂存</el-button>
+        <el-button @click="goback" style="width:88px;">取消</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -8,7 +42,10 @@
 export default {
   name: "wait-task-detail",
   data() {
-    return {};
+    return {
+      taskId: this.$route.params.taskId,
+      aOrB: false
+    };
   },
   methods: {}
 };