ui md -02

src/assets/styles/base.less

@@ -123,13 +123,23 @@ body {
   background-color: @white;
   border-radius: @box-border-radius;
 
+  &-filter {
+    padding-bottom: 10px;
+  }
+
   .ivu-form-item-label {
     text-align: right;
   }
 
   &-head {
-    margin-bottom: 10px;
-    overflow: hidden;
+    margin-bottom: 20px;
+    &::after {
+      content: "";
+      display: block;
+      visibility: hidden;
+      clear: both;
+    }
+
     &-left {
       float: left;
     }
@@ -139,7 +149,8 @@ body {
   }
 }
 .part-title {
-  font-size: 16px;
+  font-size: 18px;
+  font-weight: 600;
   margin-bottom: 15px;
   height: 32px;
   line-height: 32px;
@@ -181,29 +192,33 @@ body {
 /* table */
 .table {
   width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-  text-align: center;
-  margin-bottom: 30px;
+  border-spacing: 0 4px;
+  border-collapse: separate;
+  margin-bottom: 20px;
+  text-align: left;
 
-  &.table-noborder {
-    th,
-    td {
+  tr {
+    background-color: @white;
+    color: @dark-color-light;
+    td,
+    th {
       border: none;
+      padding: 8px 18px;
+      line-height: 20px;
+      &:first-child {
+        border-radius: @box-border-radius-small 0 0 @box-border-radius-small;
+      }
+      &:last-child {
+        border-radius: 0 @box-border-radius-small @box-border-radius-small 0;
+      }
+    }
+    th {
+      padding: 13px 18px;
+      color: @dark-color;
+      font-weight: 600;
     }
   }
 }
-.table th {
-  padding: 8px;
-  line-height: 20px;
-  letter-spacing: 1px;
-  border: 1px solid @border-color-split;
-}
-.table td {
-  padding: 8px;
-  line-height: 20px;
-  border: 1px solid @border-color-split;
-}
 .table .td-th {
   font-weight: 600;
   color: @dark-color;
@@ -211,6 +226,9 @@ body {
 tr.row-active td {
   color: @main-color;
 }
+tr.row-disabled td {
+  color: @disabled-color;
+}
 tr.tr-tips-error td {
   padding: 2px 10px;
   font-size: 13px;
@@ -288,6 +306,21 @@ h3.account-title {
 .text-center {
   text-align: center;
 }
+.btn-form-search {
+  width: 60px;
+}
+.btn-disabled {
+  cursor: not-allowed !important;
+}
+.color-primary {
+  color: @primary-color;
+}
+.color-dark {
+  color: @dark-color;
+}
+.color-error {
+  color: @error-color;
+}
 
 // border-randius
 .border-radius {

src/assets/styles/home.less

@@ -17,7 +17,7 @@
 }
 .home-main {
   position: relative;
-  padding: 32px;
+  padding: 32px 32px 52px;
   min-height: 100%;
 
   &-nofooter {
@@ -67,6 +67,10 @@
     color: @font-color-main;
     font-size: 20px;
     cursor: pointer;
+
+    > h1 {
+      font-weight: 900;
+    }
   }
   .head-nav {
     margin: 0 150px 0 190px;
@@ -130,6 +134,7 @@
     vertical-align: top;
     font-size: 14px;
     padding: 0 16px;
+    font-weight: 600;
     cursor: pointer;
 
     > i {

src/assets/styles/icons.less

@@ -60,6 +60,9 @@
     &-recode-act {
       background-image: url(../images/icon-recode-act.png);
     }
+    &-recode-white {
+      background-image: url(../images/icon-recode-white.png);
+    }
     &-score {
       background-image: url(../images/icon-score.png);
     }
@@ -123,8 +126,20 @@
       height: 14px;
       background-image: url(../images/icon-upload.png);
     }
+    &-upload-white {
+      height: 14px;
+      background-image: url(../images/icon-upload-white.png);
+    }
     &-area {
       background-image: url(../images/icon-area.png);
     }
+    &-disable {
+      width: 25px;
+      background-image: url(../images/icon-disable.png);
+    }
+    &-enable {
+      width: 25px;
+      background-image: url(../images/icon-enable.png);
+    }
   }
 }

src/assets/styles/iview-custom.less

@@ -12,10 +12,15 @@
     background-repeat: no-repeat;
     background-position: 0 2px;
   }
+  .ivu-form-item-label {
+    font-weight: 600;
+    color: @dark-color;
+  }
 }
 .ivu-form-inline {
   .ivu-form-item {
     margin-bottom: 10px;
+    margin-right: 20px;
   }
   .ivu-form-item-label,
   .ivu-form-item-content {
@@ -23,20 +28,56 @@
     vertical-align: middle;
   }
 }
-.ivu-form-item-label {
-  font-size: 14px !important;
+.modal-form {
+  .ivu-form-item-label {
+    font-size: 16px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+}
+// ivu-select
+.ivu-select {
+  min-width: 140px;
+  &-disabled {
+    .ivu-select-selection {
+      color: @btn-disable-color;
+      background-color: @btn-disable-bg;
+    }
+  }
 }
 
 // input
 .ivu-input {
-  &-with-prefix {
-    padding-left: 40px;
+  &-wrapper {
+    min-width: 140px;
   }
-  &-prefix {
-    width: 40px;
-    padding-left: 10px;
+}
+.input-huge {
+  > .ivu-icon {
+    line-height: 50px;
+    right: 5px;
+  }
+  .ivu-input {
+    height: 50px;
+    border-radius: @box-border-radius-large;
+
+    &-with-prefix {
+      padding-left: 40px;
+      padding-right: 20px;
+    }
+    &-prefix {
+      width: 40px;
+      padding-left: 10px;
+      i {
+        line-height: 50px;
+      }
+    }
   }
 }
+// ivu-input-number
+.ivu-input-number {
+  min-width: 140px;
+}
 
 // table
 .ivu-table {
@@ -66,7 +107,6 @@
 .ivu-table-wrapper {
   border: 0;
 }
-
 .ivu-table:after,
 .ivu-table:before {
   background: transparent;
@@ -91,7 +131,104 @@
   font-size: 14px;
 }
 
+.table-action {
+  .ivu-icon {
+    color: @dark-color-light;
+    margin: 0 6px;
+    transition: transform 0.1s linear;
+    cursor: pointer;
+
+    &:hover {
+      color: @primary-color;
+      transform: scale(1.3, 1.3);
+    }
+  }
+  .icon-act {
+    color: @info-color;
+  }
+  .icon-danger {
+    &:hover {
+      color: @error-color;
+    }
+  }
+}
+// ivu-page
+.ivu-page {
+  &-item {
+    border-radius: @box-border-radius-small;
+    height: 32px;
+    width: 32px;
+    line-height: 30px;
+    min-width: 32px;
+    a {
+      color: @dark-color-lighter;
+    }
+
+    &-active {
+      background-color: @primary-color;
+      a {
+        color: @white;
+        &:hover {
+          color: @white;
+        }
+      }
+    }
+  }
+}
+
 /* button */
 .ivu-btn + .ivu-btn {
   margin-left: 10px;
 }
+
+// ivu-modal
+.ivu-modal {
+  &-content {
+    border-radius: @box-border-radius;
+  }
+  &-header {
+    padding: 15px;
+    &-inner {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 25px;
+      text-align: center;
+    }
+  }
+  &-body {
+    padding: 32px 20px 0;
+  }
+  &-mask {
+    background: rgba(53, 61, 87, 0.65);
+  }
+  &-footer {
+    border: none;
+    text-align: center;
+    .ivu-btn {
+      min-width: 80px;
+      &:not(:first-child) {
+        margin-left: 20px;
+      }
+    }
+  }
+  // $Modal.confirm
+  &-confirm {
+    padding: 16px 0 48px 0;
+    text-align: center;
+    &-body {
+      padding: 0 0 40px;
+      font-size: 18px;
+      color: @dark-color;
+      font-weight: 600;
+    }
+    &-footer {
+      text-align: center;
+
+      .ivu-btn {
+        border-radius: @box-border-radius;
+        margin: 0 10px;
+        width: 80px;
+      }
+    }
+  }
+}

src/assets/styles/iview.less

@@ -18,24 +18,23 @@
 @btn-height-base: 36px;
 @btn-height-large: 50px;
 @btn-height-small: 32px;
+
 @btn-border-radius: 10px;
-// @btn-padding-large: 10px 15px;
-@btn-font-size-large: 16px;
+@btn-border-radius-small: 10px;
 
-// @btn-padding-base: 6px 20px;
-@btn-font-size: 14px;
+@btn-padding-small: 0 11px;
 
-// input
-@input-height-large: 50px;
+@btn-font-size: 14px;
 
-@input-padding-vertical-base: 4px;
-@input-padding-vertical-large: 14px;
+@btn-disable-bg: #fff;
+@btn-disable-color: #bdc2d1;
 
-@input-padding-horizontal: 20px;
+// input
+@input-padding-horizontal: 10px;
 
 // @input-bg : rgba(237,242,250,1);
 @input-placeholder-color: #c2c7d5;
-@input-disabled-bg: #f0f0f0;
+@input-disabled-bg: #fff;
 
 // tag
 @tag-font-size: 14px;

src/assets/styles/login.less

@@ -23,7 +23,6 @@
     background-image: url(../images/home-back.png);
     background-repeat: no-repeat;
     background-size: 100% auto;
-    background-position: center center;
   }
 }
 

src/assets/styles/main.less

@@ -222,7 +222,7 @@
 }
 .image-view-list {
   font-size: 0;
-  margin: 0 -10px;
+  margin: -10px -10px 0;
   .image-view {
     width: 20%;
   }
@@ -298,6 +298,54 @@
   }
 }
 
+/* client-set */
+// set-navs
+.set-navs {
+  margin-bottom: 20px;
+  &-item {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    padding: 8px 20px;
+    color: @dark-color-light;
+    background-color: @white;
+    border-radius: @box-border-radius;
+    margin-right: 10px;
+    cursor: pointer;
+
+    &:hover {
+      color: @info-color;
+    }
+
+    &-act {
+      background-color: @info-color;
+      color: @white!important;
+      box-shadow: 0px 10px 10px 0px rgba(34, 192, 255, 0.3);
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        margin-left: -10px;
+        width: 20px;
+        height: 4px;
+        background-image: url(../images/bg-switch-arrow.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+// client-account-set
+.client-account-set {
+  position: relative;
+  .account-add-btn {
+    position: absolute;
+    top: -56px;
+    right: 0;
+    z-index: 9;
+  }
+}
 // client-param-set
 .client-param {
   &-set {
@@ -312,10 +360,86 @@
   }
 }
 
+// grading-level-set
+.grading-level-set {
+  position: relative;
+  .level-add-btn {
+    position: absolute;
+    top: -56px;
+    right: 0;
+    z-index: 9;
+  }
+  .grading-table {
+    .ivu-input-wrapper,
+    .ivu-input-number {
+      min-width: 100px;
+    }
+  }
+}
+
+// export-paper
+.export-paper {
+  .part-box {
+    height: 100%;
+    padding: 32px 32px 100px;
+    position: relative;
+  }
+  .export-paper-btn {
+    position: absolute;
+    left: 32px;
+    bottom: 32px;
+    width: 80px;
+  }
+}
+
 // student-score
-.student-score {
-  &-content {
-    min-height: 200px;
+.student-score-content {
+  min-height: 200px;
+  border-radius: @box-border-radius;
+  background-color: @white;
+  .score-content {
+    &-head {
+      padding: 16px 20px;
+      height: 60px;
+      line-height: 28px;
+      border-bottom: 1px solid #f3f3f3;
+      color: @dark-color-light;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    &-title {
+      float: left;
+      color: @dark-color;
+      font-size: 20px;
+      font-weight: 600;
+    }
+    &-info {
+      float: left;
+      margin-left: 20px;
+    }
+    &-tscore {
+      float: right;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      > span:last-child {
+        color: @error-color;
+        font-size: 24px;
+      }
+    }
+    &-score {
+      color: @error-color;
+    }
+    &-body {
+      padding: 20px;
+      text-align: center;
+      .table {
+        text-align: center;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
   }
 }
 

src/assets/styles/variables.less

@@ -7,6 +7,8 @@
 
 @error-color-light: fade(@error-color, 5%);
 
+@disabled-color: #bdc2d1;
+
 @purple-color: #6d32f9;
 @brown-color: #dd7755;
 

src/components/ViewHeader.vue

@@ -52,9 +52,6 @@ export default {
       username: this.$ls.get("user", { name: "" }).name
     };
   },
-  created() {
-    console.log(this);
-  },
   methods: {
     toResetPwd() {
       this.$refs.ResetPwd.open();

src/modules/client-set/ClientAccountSet.vue

@@ -1,27 +1,31 @@
 <template>
   <div class="client-account-set">
-    <div class="part-box-top">
-      <Button type="success" icon="md-add" @click="toEdit({})">新增</Button>
-    </div>
-    <div class="part-box">
-      <Table
-        ref="TableList"
-        :columns="columns"
-        :data="users"
-        disabled-hover
-        border
-      ></Table>
+    <Button
+      class="account-add-btn"
+      type="success"
+      icon="recode-white icon"
+      shape="circle"
+      @click="toEdit({})"
+      >添加账号</Button
+    >
+    <Table
+      ref="TableList"
+      :columns="columns"
+      :data="users"
+      :row-class-name="getRowClassName"
+      disabled-hover
+      border
+    ></Table>
 
-      <div class="part-page">
-        <Page
-          :current="current"
-          :total="total"
-          :page-size="size"
-          show-total
-          show-elevator
-          @on-change="toPage"
-        ></Page>
-      </div>
+    <div class="part-page">
+      <Page
+        :current="current"
+        :total="total"
+        :page-size="size"
+        show-total
+        show-elevator
+        @on-change="toPage"
+      ></Page>
     </div>
 
     <!-- modify-client-user -->
@@ -71,30 +75,31 @@ export default {
           key: "action",
           width: 240,
           align: "center",
+          className: "table-action",
           render: (h, param) => {
             let actions = [
               {
-                name: param.row.enabled ? "禁用" : "启用",
-                type: param.row.enabled ? "error" : "primary",
+                icon: param.row.enabled ? "enable icon" : "disable icon",
+                attrs: {
+                  title: param.row.enabled ? "禁用" : "启用"
+                },
                 action: () => {
                   this.toAble(param.row);
                 }
               },
               {
-                name: "编辑",
+                icon: "md-create",
+                classes: [param.row.enabled ? "" : "btn-disabled"],
+                attrs: {
+                  title: "编辑"
+                },
                 action: () => {
                   this.toEdit(param.row);
                 }
               }
-              // {
-              //   name: "删除",
-              //   type: "error",
-              //   action: () => {
-              //     this.toDelete(param.row);
-              //   }
-              // }
             ];
-            return h("div", this.$tableAction(h, actions));
+
+            return h("div", this.$tableIconAction(h, actions));
           }
         }
       ]
@@ -118,7 +123,11 @@ export default {
       this.current = page;
       this.getList();
     },
+    getRowClassName(row) {
+      return row.enabled ? "" : "row-disabled";
+    },
     toEdit(row) {
+      if (!row.enabled) return;
       this.curUser = row;
       this.$refs.ModifyClientUser.open();
     },

src/modules/client-set/ClientParamSet.vue

@@ -17,24 +17,22 @@
                     :ref="subject.id"
                   ></Input>
                 </td>
-                <td style="width: 180px;">
+                <td style="width: 210px;">
                   <Button
                     size="small"
-                    type="primary"
                     :disabled="!subject.enable"
                     @click="toEdit(index)"
                     >编辑</Button
                   >
                   <Button
                     size="small"
-                    :type="subject.enable ? 'error' : 'primary'"
+                    :type="subject.enable ? 'error' : 'success'"
                     @click="toAble(index)"
                   >
                     {{ subject.enable ? "禁用" : "启用" }}</Button
                   >
                   <Button
                     size="small"
-                    type="primary"
                     :disabled="!subject.enable"
                     @click="toSave(subject)"
                     >保存</Button
@@ -54,34 +52,41 @@
         </div>
       </Col>
       <Col span="12">
-        <div class=" part-box">
+        <div class="part-box">
           <h2 class="client-param-title">其他设置</h2>
           <Form ref="modalFormComp" :model="modalForm" :label-width="120">
             <FormItem label="是否整包扫描：">
-              <RadioGroup v-model="modalForm.packageScan">
-                <Radio
+              <Select
+                v-model="modalForm.packageScan"
+                :disabled="!modalFormCanEdit"
+                placeholder="是否整包扫描"
+              >
+                <Option
                   v-for="(val, key) in BOOLEAN_TYPE"
                   :key="key"
-                  :label="key * 1"
-                  style="margin-right: 50px;"
-                  >{{ val }}</Radio
-                >
-              </RadioGroup>
+                  :value="key * 1"
+                  :label="val"
+                ></Option>
+              </Select>
             </FormItem>
             <FormItem label="图片是否加密：">
-              <RadioGroup v-model="modalForm.imageEncrypt">
-                <Radio
+              <Select
+                v-model="modalForm.imageEncrypt"
+                :disabled="!modalFormCanEdit"
+                placeholder="图片是否加密"
+              >
+                <Option
                   v-for="(val, key) in BOOLEAN_TYPE"
                   :key="key"
-                  :label="key * 1"
-                  style="margin-right: 50px;"
-                  >{{ val }}</Radio
-                >
-              </RadioGroup>
+                  :value="key * 1"
+                  :label="val"
+                ></Option>
+              </Select>
             </FormItem>
             <FormItem label="图片命名规则：">
               <Select
                 v-model="modalForm.nameRule"
+                :disabled="!modalFormCanEdit"
                 placeholder="请选择图片命名规则"
               >
                 <Option
@@ -95,6 +100,7 @@
             <FormItem label="试卷档位：">
               <Select
                 v-model="modalForm.paperStage"
+                :disabled="!modalFormCanEdit"
                 placeholder="请选择试卷档位"
               >
                 <Option
@@ -106,7 +112,18 @@
               </Select>
             </FormItem>
             <FormItem>
-              <Button type="primary" :disabled="isSubmit" @click="toSubmit"
+              <Button
+                shape="circle"
+                style="width: 80px;"
+                @click="modalFormCanEdit = true"
+                >编辑</Button
+              >
+              <Button
+                shape="circle"
+                type="primary"
+                style="width: 80px;"
+                :disabled="isSubmit"
+                @click="toSubmit"
                 >保存</Button
               >
             </FormItem>
@@ -159,6 +176,7 @@ export default {
         nameRule: 0,
         paperStage: 0
       },
+      modalFormCanEdit: false,
       modalForm: {}
     };
   },
@@ -239,6 +257,7 @@ export default {
       });
       this.isSubmit = false;
       if (!result) return;
+      this.modalFormCanEdit = false;
       this.$Message.success("保存成功！");
     }
   }

src/modules/client-set/ClientSet.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="client-set">
-    <div class="page-navs">
-      <Button
-        :type="curNav.name === nav.name ? 'primary' : 'default'"
+    <div class="set-navs">
+      <div
+        :class="[
+          'set-navs-item',
+          { 'set-navs-item-act': curNav.name === nav.name }
+        ]"
         v-for="(nav, index) in navs"
         :key="index"
         @click="switchNav(nav)"
-        >{{ nav.title }}</Button
       >
+        {{ nav.title }}
+      </div>
     </div>
 
     <router-view />

src/modules/client-set/InspectionAccountSet.vue

@@ -1,27 +1,13 @@
 <template>
   <div class="client-account-set ">
-    <div class="part-box">
-      <table class="table">
-        <tr>
-          <th>序号</th>
-          <th>角色</th>
-          <th>账号</th>
-          <th>操作</th>
-        </tr>
-        <tr v-for="(user, index) in users" :key="index">
-          <td style="width: 60px;">{{ index + 1 }}</td>
-          <td>{{ user.roleName }}</td>
-          <td style="width: 200px;">
-            {{ user.loginName }}
-          </td>
-          <td>
-            <Button size="small" type="primary" @click="toResetPwd(user)"
-              >重置</Button
-            >
-          </td>
-        </tr>
-      </table>
-    </div>
+    <Table
+      ref="TableList"
+      :columns="columns"
+      :data="users"
+      :row-class-name="getRowClassName"
+      disabled-hover
+      border
+    ></Table>
   </div>
 </template>
 
@@ -41,7 +27,46 @@ export default {
     return {
       workId: this.$route.params.workId,
       users: [],
-      curUser: {}
+      curUser: {},
+      columns: [
+        {
+          type: "index",
+          title: "序号",
+          width: 100,
+          align: "center",
+          indexMethod: row => {
+            return row._index + 1;
+          }
+        },
+        {
+          title: "角色",
+          key: "roleName"
+        },
+        {
+          title: "账号",
+          key: "loginName"
+        },
+        {
+          title: "密码",
+          key: "action",
+          width: 100,
+          align: "center",
+          className: "table-action",
+          render: (h, param) => {
+            let actions = [
+              {
+                name: "重置",
+                type: "text",
+                action: () => {
+                  this.toResetPwd(param.row);
+                }
+              }
+            ];
+
+            return h("div", this.$tableAction(h, actions));
+          }
+        }
+      ]
     };
   },
   mounted() {
@@ -62,8 +87,6 @@ export default {
           roleName: "纪检"
         };
       });
-
-      if (!this.users.length) this.toAdd();
     },
     toAdd() {
       this.users.push({ ...initModalForm });

src/modules/grading-set/GradingLevelSet.vue

@@ -1,144 +1,173 @@
 <template>
   <div class="grading-level-set">
-    <div class="part-box-top">
-      <Button type="success" icon="md-add" @click="toAdd">新增</Button>
-    </div>
-    <div class="part-box">
-      <table class="table table-noborder">
-        <tr>
-          <th>档位</th>
-          <th>最低分</th>
-          <th>最高分</th>
-          <th>给分间隔</th>
-          <th>典型值</th>
-          <th>类型</th>
-          <th>给分项</th>
-          <th>考区阀值%</th>
-          <th>占比阀值%</th>
-          <th>操作</th>
-        </tr>
-        <template v-for="(level, index) in levels">
-          <tr :key="index">
-            <td>
-              <Input
-                v-model="level.code"
-                style="width: 60px"
-                @on-blur="codeChange(level)"
-              ></Input>
-            </td>
-            <td>
-              <InputNumber
-                v-model="level.minScore"
-                :min="0"
-                :max="200"
-                @on-blur="checkLevelValidate(level)"
-              ></InputNumber>
-            </td>
-            <td>
-              <InputNumber
-                v-model="level.maxScore"
-                :min="1"
-                :max="200"
-                @on-blur="checkLevelValidate(level)"
-              ></InputNumber>
-            </td>
-            <td style="min-width: 100px">
-              <InputNumber
-                v-model="level.intervalScore"
-                :min="1"
-                :max="100"
-                :precision="0"
-                @on-blur="checkLevelValidate(level)"
-                v-if="level.levelType === 'ADMITED'"
-              ></InputNumber>
-            </td>
-            <td>
-              <InputNumber
-                v-model="level.weight"
-                :min="1"
-                :max="100"
-                @on-blur="checkLevelValidate(level)"
-              ></InputNumber>
-            </td>
-            <td>
-              <Select
-                v-model="level.levelType"
-                @on-change="levelTypeChange(level)"
-                style="width: 120px"
+    <Button
+      class="level-add-btn"
+      type="success"
+      icon="recode-white icon"
+      shape="circle"
+      @click="toAdd"
+      >新增档位</Button
+    >
+    <table class="table table-noborder grading-table">
+      <tr>
+        <th>档位</th>
+        <th>最低分</th>
+        <th>最高分</th>
+        <th>给分间隔</th>
+        <th>典型值</th>
+        <th>类型</th>
+        <th>给分项</th>
+        <th>考区阀值%</th>
+        <th>占比阀值%</th>
+        <th style="width: 100px">操作</th>
+      </tr>
+      <template v-for="(level, index) in levels">
+        <tr :key="index">
+          <td>
+            <Input
+              v-model="level.code"
+              style="width: 60px"
+              @on-blur="codeChange(level)"
+              v-if="level.canEdit"
+            ></Input>
+            <p v-else>{{ level.code }}</p>
+          </td>
+          <td>
+            <InputNumber
+              v-model="level.minScore"
+              :min="0"
+              :max="200"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.canEdit"
+            ></InputNumber>
+            <p v-else>{{ level.minScore }}</p>
+          </td>
+          <td>
+            <InputNumber
+              v-model="level.maxScore"
+              :min="1"
+              :max="200"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.canEdit"
+            ></InputNumber>
+            <p v-else>{{ level.maxScore }}</p>
+          </td>
+          <td style="min-width: 100px">
+            <InputNumber
+              v-model="level.intervalScore"
+              :min="1"
+              :max="100"
+              :precision="0"
+              :disabled="!level.canEdit"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.levelType === 'ADMITED' && level.canEdit"
+            ></InputNumber>
+            <p v-else>{{ level.intervalScore }}</p>
+          </td>
+          <td>
+            <InputNumber
+              v-model="level.weight"
+              :min="1"
+              :max="100"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.canEdit"
+            ></InputNumber>
+            <p v-else>{{ level.weight }}</p>
+          </td>
+          <td>
+            <Select
+              v-model="level.levelType"
+              @on-change="levelTypeChange(level)"
+              style="width: 120px"
+              v-if="level.canEdit"
+            >
+              <Option
+                v-for="(val, key) in LEVEL_TYPE"
+                :key="key"
+                :value="key"
+                >{{ val }}</Option
               >
-                <Option
-                  v-for="(val, key) in LEVEL_TYPE"
-                  :key="key"
-                  :value="key"
-                  >{{ val }}</Option
-                >
-              </Select>
-            </td>
-            <td style="min-width: 140px">
-              <Input
-                v-model="level.scoreList"
-                @on-blur="checkLevelValidate(level)"
-                v-if="level.levelType === 'UNADMIT'"
-              ></Input>
-            </td>
-            <td>
-              <InputNumber
-                v-model="level.kdpt"
-                :min="1"
-                :max="100"
-                @on-blur="checkLevelValidate(level)"
-              ></InputNumber>
-            </td>
-            <td>
-              <InputNumber
-                v-model="level.pt"
-                :min="1"
-                :max="100"
-                @on-blur="checkLevelValidate(level)"
-              ></InputNumber>
-            </td>
-            <td>
-              <Button size="small" type="error" @click="toDelete(index)"
-                >删除</Button
-              >
-            </td>
-          </tr>
-          <tr class="tr-tips-error" v-if="level.errors" :key="index + '1'">
-            <td>
-              {{ level.errors.code }}
-            </td>
-            <td>
-              {{ level.errors.minScore }}
-            </td>
-            <td>
-              {{ level.errors.maxScore }}
-            </td>
-            <td>
-              {{ level.errors.intervalScore }}
-            </td>
-            <td>
-              {{ level.errors.weight }}
-            </td>
-            <td></td>
-            <td>
-              {{ level.errors.scoreList }}
-            </td>
-            <td>
-              {{ level.errors.kdpt }}
-            </td>
-            <td>
-              {{ level.errors.pt }}
-            </td>
-            <td></td>
-          </tr>
-        </template>
-      </table>
+            </Select>
+            <p v-else>{{ LEVEL_TYPE[level.levelType] }}</p>
+          </td>
+          <td style="min-width: 140px">
+            <Input
+              v-model="level.scoreList"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.levelType === 'UNADMIT' && level.canEdit"
+            ></Input>
+            <p v-else>{{ level.scoreList }}</p>
+          </td>
+          <td>
+            <InputNumber
+              v-model="level.kdpt"
+              :min="1"
+              :max="100"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.canEdit"
+            ></InputNumber>
+            <p v-else>{{ level.kdpt }}</p>
+          </td>
+          <td>
+            <InputNumber
+              v-model="level.pt"
+              :min="1"
+              :max="100"
+              @on-blur="checkLevelValidate(level)"
+              v-if="level.canEdit"
+            ></InputNumber>
+            <p v-else>{{ level.pt }}</p>
+          </td>
+          <td class="table-action" style="width: 100px">
+            <Icon type="md-create" title="编辑" @click="toEdit(index)" />
+            <Icon
+              class="icon-danger"
+              type="md-trash"
+              title="删除"
+              @click="toDelete(index)"
+            />
+          </td>
+        </tr>
+        <tr class="tr-tips-error" v-if="level.errors" :key="index + '1'">
+          <td>
+            {{ level.errors.code }}
+          </td>
+          <td>
+            {{ level.errors.minScore }}
+          </td>
+          <td>
+            {{ level.errors.maxScore }}
+          </td>
+          <td>
+            {{ level.errors.intervalScore }}
+          </td>
+          <td>
+            {{ level.errors.weight }}
+          </td>
+          <td></td>
+          <td>
+            {{ level.errors.scoreList }}
+          </td>
+          <td>
+            {{ level.errors.kdpt }}
+          </td>
+          <td>
+            {{ level.errors.pt }}
+          </td>
+          <td></td>
+        </tr>
+      </template>
+    </table>
 
-      <div class="text-center">
-        <Button type="primary" @click="toSubmit" :disabled="isSubmit"
-          >确定</Button
-        >
-      </div>
+    <div class="text-center">
+      <Button
+        type="primary"
+        shape="circle"
+        @click="toSubmit"
+        style="width: 80px;"
+        :disabled="isSubmit"
+        >确定</Button
+      >
     </div>
   </div>
 </template>
@@ -191,7 +220,10 @@ export default {
     async getData() {
       const data = await workDetail(this.workId);
       this.worKDetail = data;
-      this.levels = data.levels;
+      this.levels = data.levels.map(item => {
+        item.canEdit = false;
+        return item;
+      });
     },
     checkLevelCodeIsContinuous() {
       let levelIsContinuous = true;
@@ -254,6 +286,10 @@ export default {
       level.code = this.getNextLevelCode();
       this.levels.push(level);
     },
+    toEdit(index) {
+      this.levels[index].canEdit = true;
+      this.$forceUpdate();
+    },
     toDelete(index) {
       this.levels.splice(index, 1);
     },
@@ -371,6 +407,7 @@ export default {
       if (!data) return;
 
       this.isSubmit = false;
+      this.getData();
       this.$Message.success("保存成功！");
     }
   }

src/modules/grading-set/GradingRuleSet.vue

@@ -5,12 +5,14 @@
       :model="modalForm"
       :rules="rules"
       :label-width="200"
+      style="width: 400px;"
     >
       <FormItem prop="deviation" label="仲裁档位差：">
         <InputNumber
           v-model="modalForm.deviation"
           :min="1"
           :max="100"
+          :disabled="!modalFormCanEdit"
           style="width: 160px;"
         ></InputNumber>
       </FormItem>
@@ -19,44 +21,65 @@
           v-model="modalForm.cumulativeError"
           :min="1"
           :max="100"
+          :disabled="!modalFormCanEdit"
           style="width: 160px;"
         ></InputNumber>
       </FormItem>
       <FormItem prop="examNumber" label="系统自动打回：">
-        <RadioGroup v-model="modalForm.autoCallback">
-          <Radio
+        <Select
+          v-model="modalForm.autoCallback"
+          :disabled="!modalFormCanEdit"
+          placeholder="系统自动打回"
+        >
+          <Option
             v-for="(val, key) in BOOLEAN_TYPE"
             :key="key"
-            :label="key * 1"
-            style="margin-right: 50px;"
-            >{{ val }}</Radio
-          >
-        </RadioGroup>
+            :value="key * 1"
+            :label="val"
+          ></Option>
+        </Select>
       </FormItem>
       <FormItem prop="examNumber" label="是否过半定档：">
-        <RadioGroup v-model="modalForm.majority">
-          <Radio
+        <Select
+          v-model="modalForm.majority"
+          :disabled="!modalFormCanEdit"
+          placeholder="是否过半定档"
+        >
+          <Option
             v-for="(val, key) in BOOLEAN_TYPE"
             :key="key"
-            :label="key * 1"
-            style="margin-right: 50px;"
-            >{{ val }}</Radio
-          >
-        </RadioGroup>
+            :value="key * 1"
+            :label="val"
+          ></Option>
+        </Select>
       </FormItem>
       <FormItem prop="examNumber" label="阅卷员是否显示所有试卷：">
-        <RadioGroup v-model="modalForm.levelShowAllPaper">
-          <Radio
+        <Select
+          v-model="modalForm.levelShowAllPaper"
+          :disabled="!modalFormCanEdit"
+          placeholder="阅卷员是否显示所有试卷"
+        >
+          <Option
             v-for="(val, key) in BOOLEAN_TYPE"
             :key="key"
-            :label="key * 1"
-            style="margin-right: 50px;"
-            >{{ val }}</Radio
-          >
-        </RadioGroup>
+            :value="key * 1"
+            :label="val"
+          ></Option>
+        </Select>
       </FormItem>
       <FormItem>
-        <Button type="primary" :disabled="isSubmit" @click="submit"
+        <Button
+          shape="circle"
+          style="width: 80px;"
+          @click="modalFormCanEdit = true"
+          >编辑</Button
+        >
+        <Button
+          type="primary"
+          shape="circle"
+          style="width: 80px;"
+          :disabled="isSubmit"
+          @click="submit"
           >保存</Button
         >
       </FormItem>
@@ -84,10 +107,11 @@ export default {
         majority: 0,
         levelShowAllPaper: 0
       },
+      modalFormCanEdit: false,
       modalForm: {},
       rules: {
-        deviation: numberValidator("请输入打回累计误差"),
-        cumulativeError: numberValidator("请输入仲裁档位差")
+        deviation: numberValidator("请输入仲裁档位差"),
+        cumulativeError: numberValidator("请输入打回累计误差")
       }
     };
   },
@@ -113,6 +137,7 @@ export default {
       this.isSubmit = false;
 
       if (!result) return;
+      this.modalFormCanEdit = false;
       this.$Message.success("保存成功！");
     }
   }

src/modules/grading-set/GradingSet.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="grading-set">
-    <div class="page-navs">
-      <Button
-        :type="curNav.name === nav.name ? 'primary' : 'default'"
+    <div class="set-navs">
+      <div
+        :class="[
+          'set-navs-item',
+          { 'set-navs-item-act': curNav.name === nav.name }
+        ]"
         v-for="(nav, index) in navs"
         :key="index"
         @click="switchNav(nav)"
-        >{{ nav.title }}</Button
       >
+        {{ nav.title }}
+      </div>
     </div>
 
     <router-view />

src/modules/grading-set/UploadPaper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-paper part-box">
+  <div class="upload-paper">
     <table class="table">
       <tr>
         <th>考区</th>

src/modules/login/login.vue

@@ -9,6 +9,7 @@
           <FormItem prop="loginName">
             <Input
               size="large"
+              class="input-huge"
               v-model.trim="loginModel.loginName"
               prefix="md-person"
               placeholder="输入账号"
@@ -18,6 +19,7 @@
           <FormItem prop="password">
             <Input
               size="large"
+              class="input-huge"
               type="password"
               v-model.trim="loginModel.password"
               prefix="md-lock"

src/modules/main/PaperManage.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="papers">
-    <div class="part-box">
+    <div class="part-box part-box-filter">
       <Form ref="FilterForm" label-position="left" inline>
         <FormItem>
-          <Select
-            v-model="filter.subject"
-            style="width: 80px"
-            placeholder="科目"
-          >
+          <Select v-model="filter.subject" placeholder="科目">
             <Option
               v-for="(item, index) in subjects"
               :key="index"
@@ -17,11 +13,7 @@
           </Select>
         </FormItem>
         <FormItem>
-          <Select
-            v-model="filter.areaCode"
-            style="width: 140px"
-            placeholder="选择考区"
-          >
+          <Select v-model="filter.areaCode" placeholder="选择考区">
             <Option value=""></Option>
           </Select>
         </FormItem>
@@ -30,7 +22,6 @@
             v-model="filter.startNumber"
             :min="1"
             :precision="0"
-            style="width: 140px"
             placeholder="输入开始编号"
             clearable
           ></InputNumber>
@@ -40,13 +31,12 @@
             v-model="filter.endNumber"
             :min="filter.startNumber"
             :precision="0"
-            style="width: 140px"
             placeholder="输入结束编号"
             clearable
           ></InputNumber>
         </FormItem>
         <FormItem>
-          <Select v-model="filter.isAbsent" style="width: 140px">
+          <Select v-model="filter.isAbsent">
             <Option
               v-for="(val, key) in CAFA_EXCEPTION_TYPE"
               :key="key"
@@ -58,17 +48,12 @@
         <FormItem>
           <Input
             v-model.trim="filter.name"
-            style="width: 140px"
             placeholder="输入姓名"
             clearable
           ></Input>
         </FormItem>
         <FormItem>
-          <Select
-            v-model="filter.sort"
-            style="width: 140px"
-            placeholder="排序方式"
-          >
+          <Select v-model="filter.sort" placeholder="排序方式">
             <Option
               v-for="(val, key) in SORT_RULE_TYPE"
               :key="key"
@@ -80,7 +65,7 @@
         <FormItem>
           <Button
             size="small"
-            class="border-radius-small"
+            class="btn-form-search"
             type="primary"
             @click="toPage(1)"
             >查询</Button

src/modules/main/QualityAnalysis.vue

@@ -1,37 +1,50 @@
 <template>
   <div class="quality-analysis">
-    <div class="part-box">
-      <Form label-position="left" inline>
-        <FormItem label="科目：">
-          <Select v-model="filter.subject" placeholder="请选择科目">
-            <Option
-              v-for="(item, index) in subjects"
-              :key="index"
-              :value="item.subject"
-              :label="item.name"
-            ></Option>
-          </Select>
-        </FormItem>
-        <FormItem label="查询时间段：">
-          <DatePicker
-            v-model="searchTime"
-            type="datetimerange"
-            placeholder="请选择查询时间段"
-            style="width: 400px"
-            transfer
-          ></DatePicker>
-        </FormItem>
-        <FormItem>
-          <Button type="primary" icon="ios-search" @click="toSearch"
-            >查询</Button
-          >
-          <Button type="primary" icon="md-download" @click="toExport"
-            >导出</Button
-          >
-        </FormItem>
-      </Form>
+    <div class="part-box part-box-head">
+      <div class="part-box-head-left">
+        <Form label-position="left" inline>
+          <FormItem>
+            <Select v-model="filter.subject" placeholder="选择科目">
+              <Option
+                v-for="(item, index) in subjects"
+                :key="index"
+                :value="item.subject"
+                :label="item.name"
+              ></Option>
+            </Select>
+          </FormItem>
+          <FormItem>
+            <DatePicker
+              v-model="searchTime"
+              type="datetimerange"
+              placeholder="请选择查询时间段"
+              style="width: 400px"
+              transfer
+            ></DatePicker>
+          </FormItem>
+          <FormItem>
+            <Button
+              class="btn-form-search"
+              size="small"
+              type="primary"
+              @click="toSearch"
+              >查询</Button
+            >
+          </FormItem>
+        </Form>
+      </div>
+      <div class="part-box-head-right">
+        <Button
+          type="success"
+          shape="circle"
+          icon="upload-white icon"
+          @click="toExport"
+          >导出表格</Button
+        >
+      </div>
 
       <div class="analysis-part" v-if="levelsPropReportOption">
+        <!-- TODO: -->
         <v-chart :options="levelsPropReportOption" autoresize></v-chart>
       </div>
     </div>

src/modules/main/StudentManage.vue

@@ -1,38 +1,49 @@
 <template>
   <div class="students ">
-    <div class="part-box-top">
-      <Button
-        type="primary"
-        icon="md-cloud-upload"
-        @click="$refs.ExportStudent.open()"
-        >导入考生信息</Button
-      >
-      <Button
-        type="primary"
-        icon="md-cloud-upload"
-        @click="$refs.ExportRelate.open()"
-        >导入关联信息</Button
-      >
+    <div class="part-box-head">
+      <div class="part-box-head-left">
+        <Button
+          icon="upload icon"
+          shape="circle"
+          @click="$refs.ExportStudent.open()"
+          >导入考生信息</Button
+        >
+        <Button
+          icon="upload icon"
+          shape="circle"
+          @click="$refs.ExportRelate.open()"
+          >导入关联信息</Button
+        >
+      </div>
+      <div class="part-box-head-right">
+        <Button
+          type="success"
+          icon="recode-white icon"
+          shape="circle"
+          @click="toEdit({})"
+          >添加考生</Button
+        >
+      </div>
     </div>
-    <div class="part-box">
+    <div class="part-box part-box-filter">
       <Form ref="FilterForm" label-position="left" inline>
-        <FormItem label="考区">
-          <Select v-model="filter.areaCode" placeholder="请选择考区">
+        <FormItem>
+          <Select v-model="filter.areaCode" placeholder="选择考区">
             <Option value=""></Option>
           </Select>
         </FormItem>
-        <FormItem label="学校">
-          <Select v-model="filter.schoolId" placeholder="请选择学校">
+        <FormItem>
+          <Select v-model="filter.schoolId" placeholder="选择学校">
             <Option value=""></Option>
           </Select>
         </FormItem>
-        <FormItem label="考场">
-          <Select v-model="filter.examRoom" placeholder="请选择考场">
+        <FormItem>
+          <Select v-model="filter.examRoom" placeholder="选择考场">
             <Option value=""></Option>
           </Select>
         </FormItem>
-        <FormItem label="科目">
-          <Select v-model="filter.subject" placeholder="请选择科目">
+        <FormItem>
+          <Select v-model="filter.subject" placeholder="选择科目">
             <Option
               v-for="(subject, index) in subjects"
               :key="index"
@@ -41,33 +52,33 @@
             >
           </Select>
         </FormItem>
-        <FormItem label="起始考号">
+        <FormItem>
           <InputNumber
             v-model="filter.startNumber"
             :min="1"
             :precision="0"
-            placeholder="请输入数字"
+            placeholder="输入起始考号"
             clearable
           ></InputNumber>
         </FormItem>
-        <FormItem label="终止考号">
+        <FormItem>
           <InputNumber
             :min="filter.startNumber"
             v-model="filter.endNumber"
             :precision="0"
-            placeholder="请输入数字"
+            placeholder="输入终止考号"
             clearable
           ></InputNumber>
         </FormItem>
-        <FormItem label="姓名">
+        <FormItem>
           <Input
             v-model.trim="filter.name"
-            placeholder="工作名称"
+            placeholder="输入姓名"
             clearable
           ></Input>
         </FormItem>
-        <FormItem label="是否缺考">
-          <Select v-model="filter.isAbsent" placeholder="请选择是否缺考">
+        <FormItem>
+          <Select v-model="filter.isAbsent" placeholder="是否缺考">
             <Option
               v-for="(val, key) in BOOLEAN_TYPE"
               :key="key"
@@ -76,8 +87,8 @@
             >
           </Select>
         </FormItem>
-        <FormItem label="状态">
-          <Select v-model="filter.upload" placeholder="请选择状态">
+        <FormItem>
+          <Select v-model="filter.upload" placeholder="选择状态">
             <Option
               v-for="(val, key) in PAPER_UPLOAD_TYPE"
               :key="key"
@@ -87,30 +98,33 @@
           </Select>
         </FormItem>
         <FormItem>
-          <Button type="primary" icon="ios-search" @click="toPage(1)"
+          <Button
+            size="small"
+            class="border-radius-small btn-form-search"
+            type="primary"
+            @click="toPage(1)"
             >查询</Button
           >
         </FormItem>
       </Form>
+    </div>
+    <Table
+      ref="TableList"
+      :columns="columns"
+      :data="students"
+      disabled-hover
+      border
+    ></Table>
 
-      <Table
-        ref="TableList"
-        :columns="columns"
-        :data="students"
-        disabled-hover
-        border
-      ></Table>
-
-      <div class="part-page">
-        <Page
-          :current="current"
-          :total="total"
-          :page-size="size"
-          show-total
-          show-elevator
-          @on-change="toPage"
-        ></Page>
-      </div>
+    <div class="part-page" v-if="total > size">
+      <Page
+        :current="current"
+        :total="total"
+        :page-size="size"
+        show-total
+        show-elevator
+        @on-change="toPage"
+      ></Page>
     </div>
 
     <!-- import student  -->
@@ -192,7 +206,7 @@ export default {
         {
           title: "姓名",
           key: "name",
-          width: 80
+          width: 100
         },
         {
           title: "考号",
@@ -217,14 +231,18 @@ export default {
         {
           title: "操作",
           key: "action",
-          width: 160,
+          width: 100,
           align: "center",
+          className: "table-action",
           render: (h, param) => {
             let actions = [];
 
             if (param.row.canEdit) {
               actions.push({
-                name: "编辑",
+                icon: "md-create",
+                attrs: {
+                  title: "编辑"
+                },
                 action: () => {
                   this.toEdit(param.row);
                 }
@@ -232,15 +250,18 @@ export default {
             }
             if (param.row.canDelete) {
               actions.push({
-                name: "删除",
-                type: "error",
+                icon: "md-trash",
+                classes: ["icon-danger"],
+                attrs: {
+                  title: "删除"
+                },
                 action: () => {
                   this.toDelete(param.row);
                 }
               });
             }
 
-            return h("div", this.$tableAction(h, actions));
+            return h("div", this.$tableIconAction(h, actions));
           }
         }
       ],
@@ -339,8 +360,8 @@ export default {
     },
     toDelete(row) {
       this.$Modal.confirm({
-        title: "删除警告",
-        content: "确定要删除当前学生吗？",
+        width: 340,
+        content: "确定要删除该考生吗？",
         onOk: () => {
           this.toDel(row.id);
         }

src/modules/main/StudentScore.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="student-score">
-    <div class="part-box">
+    <div class="part-box part-box-filter">
       <Form ref="FilterForm" label-position="left" inline>
-        <FormItem label="工作文件夹：" v-if="IS_INSPECTION">
+        <FormItem v-if="IS_INSPECTION">
           <Select
             v-model="filter.workId"
             @on-change="workChange"
-            placeholder="请选择工作文件夹"
+            placeholder="工作文件夹"
             style="width: 150px"
           >
             <Option
@@ -17,11 +17,11 @@
             ></Option>
           </Select>
         </FormItem>
-        <FormItem label="科目：">
+        <FormItem>
           <Select
             v-model="filter.subject"
             @on-change="subjecChange"
-            placeholder="请选择科目"
+            placeholder="科目"
             style="width: 100px;"
             clearable
           >
@@ -33,8 +33,8 @@
             ></Option>
           </Select>
         </FormItem>
-        <FormItem label="考区：" v-if="IS_INSPECTION">
-          <Select v-model="filter.questionId" placeholder="请选择考区">
+        <FormItem v-if="IS_INSPECTION">
+          <Select v-model="filter.questionId" placeholder="考区">
             <Option
               v-for="area in areas"
               :key="area.id"
@@ -44,7 +44,7 @@
           </Select>
         </FormItem>
 
-        <FormItem label="号码：">
+        <FormItem>
           <Select
             v-model="filter.type"
             placeholder="号码类型"
@@ -61,78 +61,79 @@
         <FormItem>
           <Input
             v-model.trim="filter.number"
-            placeholder="请输入号码"
+            placeholder="输入号码"
             clearable
           ></Input>
         </FormItem>
-        <FormItem label="姓名：">
+        <FormItem>
           <Input
             v-model.trim="filter.studentName"
-            placeholder="请输入姓名"
+            placeholder="输入姓名"
             clearable
           ></Input>
         </FormItem>
         <FormItem>
-          <Button type="primary" icon="ios-search" @click="toSearch"
+          <Button
+            class="btn-form-search"
+            size="small"
+            type="primary"
+            @click="toSearch"
             >查询</Button
           >
         </FormItem>
       </Form>
+    </div>
 
-      <div class="student-score-content">
-        <table class="table" v-if="curStudent.name">
-          <tr>
-            <td></td>
-            <td :colspan="curStudent.scores.length">
-              <image-action-list
-                :data="curStudent.scores"
-                :column-number="3"
-                loop
-                ref="ImageActionList"
-              ></image-action-list>
-            </td>
-          </tr>
-          <tr>
-            <td>姓名</td>
-            <td :colspan="curStudent.scores.length">{{ curStudent.name }}</td>
-          </tr>
-          <tr>
-            <td>考号</td>
-            <td :colspan="curStudent.scores.length">
-              {{ curStudent.examNumber }}
-            </td>
-          </tr>
-          <tr>
-            <td>总分</td>
-            <td :colspan="curStudent.scores.length">
-              {{ curStudent.sumScore }}
-            </td>
-          </tr>
+    <div class="student-score-content" v-if="curStudent.name">
+      <div class="score-content-head">
+        <h1 class="score-content-title">{{ curStudent.name }}</h1>
+        <p class="score-content-info">
+          <span>考号：</span><span>{{ curStudent.examNumber }}</span>
+        </p>
+        <p class="score-content-tscore">
+          <span>总分：</span><span>{{ curStudent.sumScore }}</span>
+        </p>
+      </div>
+      <div class="score-content-body">
+        <image-action-list
+          :data="curStudent.scores"
+          :column-number="3"
+          loop
+          ref="ImageActionList"
+        ></image-action-list>
+
+        <table class="table">
           <tr>
-            <td>档位</td>
-            <td v-for="(score, sindex) in curStudent.scores" :key="sindex">
+            <td
+              class="color-dark"
+              v-for="(score, sindex) in curStudent.scores"
+              :key="sindex"
+            >
               {{ score.level || "空" }}
             </td>
           </tr>
           <tr>
-            <td>分数</td>
-            <td v-for="(score, sindex) in curStudent.scores" :key="sindex">
-              {{ score.score || "空" }}
+            <td
+              class="color-error"
+              v-for="(score, sindex) in curStudent.scores"
+              :key="sindex"
+            >
+              {{ score.score ? score.score + "分" : "空" }}
             </td>
           </tr>
         </table>
       </div>
+    </div>
 
-      <div class="part-page" v-if="total > 1">
-        <Page
-          :current="current"
-          :total="total"
-          :page-size="size"
-          show-total
-          show-elevator
-          @on-change="toPage"
-        ></Page>
-      </div>
+    <div class="part-page" v-if="total > size">
+      <Page
+        :current="current"
+        :total="total"
+        :page-size="size"
+        show-total
+        show-elevator
+        @on-change="toPage"
+      ></Page>
     </div>
   </div>
 </template>

src/modules/main/WorkManage.vue

@@ -14,7 +14,12 @@
               ></Input>
             </FormItem>
             <FormItem :label-width="0">
-              <Button type="success" icon="md-add" @click="toAdd"
+              <Button
+                size="small"
+                type="success"
+                icon="recode-white icon"
+                shape="circle"
+                @click="toAdd"
                 >新增工作文件</Button
               >
             </FormItem>
@@ -76,43 +81,41 @@ export default {
           key: "action",
           width: 140,
           align: "center",
+          className: "table-action",
           render: (h, param) => {
             const actions = [
               {
-                type: "text",
-                icon: "md-arrow-round-forward",
+                icon: "md-settings",
+                classes: [{ "icon-act": param.row.active }],
                 attrs: {
-                  title: "进入"
+                  title: "设置为当前工作"
                 },
                 action: () => {
-                  this.toDetail(param.row);
+                  this.toActive(param.row);
                 }
               },
               {
-                type: "text",
                 icon: "md-trash",
+                classes: ["icon-danger"],
                 attrs: {
                   title: "删除"
                 },
                 action: () => {
                   this.toDelete(param.row);
                 }
-              }
-            ];
-
-            if (!param.row.active) {
-              actions.unshift({
-                type: "text",
-                icon: "md-settings",
+              },
+              {
+                icon: "md-arrow-round-forward",
                 attrs: {
-                  title: "设置为当前工作"
+                  title: "进入"
                 },
                 action: () => {
-                  this.toActive(param.row);
+                  this.toDetail(param.row);
                 }
-              });
-            }
-            return h("div", this.$tableAction(h, actions));
+              }
+            ];
+
+            return h("div", this.$tableIconAction(h, actions));
           }
         }
       ]

src/modules/main/WorkOverview.vue

@@ -16,10 +16,16 @@
         </li>
       </ul>
       <div class="overview-actions">
-        <Button icon="upload icon" @click="download(exportGradeScoreUrl)"
+        <Button
+          icon="upload icon"
+          shape="circle"
+          @click="download(exportGradeScoreUrl)"
           >导出档位成绩</Button
         >
-        <Button icon="upload icon" @click="download(exportScoreUrl)"
+        <Button
+          icon="upload icon"
+          shape="circle"
+          @click="download(exportScoreUrl)"
           >导出分数成绩</Button
         >
       </div>
@@ -52,6 +58,7 @@
             <div class="subject-actions-detail">
               <Button
                 icon="upload icon"
+                shape="circle"
                 @click="download(subject.exportAbsentDataUrl)"
                 >导出缺考名单</Button
               >
@@ -59,6 +66,7 @@
           </div>
           <Button
             type="primary"
+            shape="circle"
             @click="toCommit(subject)"
             style="width: 120px;"
             >评卷管理</Button

src/modules/main/components/ModifyStudent.vue

@@ -4,17 +4,21 @@
     v-model="modalIsShow"
     :title="title"
     :mask-closable="false"
+    width="450"
     @on-visible-change="visibleChange"
   >
     <Form
       ref="modalFormComp"
+      class="modal-form"
       :model="modalForm"
       :rules="rules"
       :key="modalForm.id"
       :label-width="100"
+      style="width: 340px;"
     >
       <FormItem prop="name" label="姓名">
         <Input
+          size="large"
           v-model.trim="modalForm.name"
           placeholder="请输入姓名"
           clearable
@@ -22,30 +26,45 @@
       </FormItem>
       <FormItem prop="examNumber" label="考号">
         <Input
+          size="large"
           v-model.trim="modalForm.examNumber"
           placeholder="请输入考号"
           clearable
         ></Input>
       </FormItem>
       <FormItem prop="areaCode" label="考区">
-        <Select v-model="modalForm.areaCode" placeholder="请选择考区">
+        <Select
+          size="large"
+          v-model="modalForm.areaCode"
+          placeholder="请选择考区"
+        >
           <Option value=""></Option>
         </Select>
       </FormItem>
       <FormItem prop="schoolId" label="学校">
-        <Select v-model="modalForm.schoolId" placeholder="请选择学校">
+        <Select
+          size="large"
+          v-model="modalForm.schoolId"
+          placeholder="请选择学校"
+        >
           <Option value=""></Option>
         </Select>
       </FormItem>
       <FormItem prop="examRoom" label="考场">
-        <Select v-model="modalForm.examRoom" placeholder="请选择考场">
+        <Select
+          size="large"
+          v-model="modalForm.examRoom"
+          placeholder="请选择考场"
+        >
           <Option value=""></Option>
         </Select>
       </FormItem>
     </Form>
     <div slot="footer">
-      <Button type="text" @click="cancel">取消</Button>
-      <Button type="primary" :disabled="isSubmit" @click="submit">确认</Button>
+      <Button shape="circle" type="primary" :disabled="isSubmit" @click="submit"
+        >确认</Button
+      >
+      <Button shape="circle" @click="cancel">取消</Button>
     </div>
   </Modal>
 </template>

src/modules/mark-set/ExportPaper.vue

@@ -1,108 +1,119 @@
 <template>
   <div class="export-paper">
-    <div class="part-box">
-      <div class="part-title">
-        <h2>分数图片导出</h2>
-      </div>
-      <Form label-position="left" inline>
-        <FormItem label="图片类型：">
-          <Select v-model="scoreFilter.imageType" placeholder="请选择图片类型">
-            <Option
-              v-for="(val, key) in IMAGE_TYPE"
-              :key="key"
-              :value="key * 1"
-              >{{ val }}</Option
-            >
-          </Select>
-        </FormItem>
-        <FormItem label="考点：">
-          <Select v-model="scoreFilter.areaCode" placeholder="请选择考点">
-            <Option value=""></Option>
-          </Select>
-        </FormItem>
-        <FormItem label="学校：">
-          <Select v-model="scoreFilter.schoolId" placeholder="请选择学校">
-            <Option value=""></Option>
-          </Select>
-        </FormItem>
-        <FormItem label="考场：">
-          <Select v-model="scoreFilter.examRoom" placeholder="请选择考场">
-            <Option value=""></Option>
-          </Select>
-        </FormItem>
-        <FormItem label="科目：">
-          <Select v-model="scoreFilter.subjectId" placeholder="请选择科目">
-            <Option value=""></Option>
-          </Select>
-        </FormItem>
-        <FormItem label="命名规则：">
-          <Select v-model="scoreFilter.nameRule" placeholder="请选择命名规则">
-            <Option
-              v-for="(val, key) in EXPORT_IMAGE_NAME_TYPE"
-              :key="key"
-              :value="key * 1"
-              >{{ val }}</Option
-            >
-          </Select>
-        </FormItem>
-        <FormItem label="起始分数：">
-          <InputNumber
-            v-model="scoreFilter.startNumber"
-            :min="1"
-            :precision="0"
-            placeholder="请输入数字"
-            clearable
-          ></InputNumber>
-        </FormItem>
-        <FormItem label="终止分数：">
-          <InputNumber
-            v-model="scoreFilter.endNumber"
-            :min="scoreFilter.startNumber"
-            :precision="0"
-            placeholder="请输入数字"
-            clearable
-          ></InputNumber>
-        </FormItem>
-        <FormItem>
-          <Button type="primary" icon="md-download" @click="toExport('score')"
+    <Row :gutter="20" type="flex">
+      <Col span="12">
+        <div class="part-box">
+          <div class="part-title">
+            <h2>分数图片导出</h2>
+          </div>
+          <Form label-position="left" inline>
+            <FormItem>
+              <Select v-model="scoreFilter.imageType" placeholder="图片类型">
+                <Option
+                  v-for="(val, key) in IMAGE_TYPE"
+                  :key="key"
+                  :value="key * 1"
+                  >{{ val }}</Option
+                >
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="scoreFilter.areaCode" placeholder="考点">
+                <Option value=""></Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="scoreFilter.schoolId" placeholder="学校">
+                <Option value=""></Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="scoreFilter.examRoom" placeholder="考场">
+                <Option value=""></Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="scoreFilter.subjectId" placeholder="科目">
+                <Option value=""></Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="scoreFilter.nameRule" placeholder="命名规则">
+                <Option
+                  v-for="(val, key) in EXPORT_IMAGE_NAME_TYPE"
+                  :key="key"
+                  :value="key * 1"
+                  >{{ val }}</Option
+                >
+              </Select>
+            </FormItem>
+            <FormItem>
+              <InputNumber
+                v-model="scoreFilter.startNumber"
+                :min="1"
+                :precision="0"
+                placeholder="输入起始分数"
+                clearable
+              ></InputNumber>
+            </FormItem>
+            <FormItem>
+              <InputNumber
+                v-model="scoreFilter.endNumber"
+                :min="scoreFilter.startNumber"
+                :precision="0"
+                placeholder="输入终止分数"
+                clearable
+              ></InputNumber>
+            </FormItem>
+          </Form>
+
+          <Button
+            class="export-paper-btn"
+            type="primary"
+            shape="circle"
+            @click="toExport('score')"
             >导出</Button
           >
-        </FormItem>
-      </Form>
-    </div>
-
-    <div class="part-box">
-      <div class="part-title">
-        <h2>图片解密、重命名导出</h2>
-      </div>
-      <Form label-position="left" inline>
-        <FormItem label="图片类型：">
-          <Select v-model="renameFilter.imageType" placeholder="请选择图片类型">
-            <Option
-              v-for="(val, key) in IMAGE_TYPE"
-              :key="key"
-              :value="key * 1"
-              >{{ val }}</Option
-            >
-          </Select>
-        </FormItem>
-        <FormItem label="考点：">
-          <Select v-model="renameFilter.areaCode" placeholder="请选择考点">
-            <Option value=""></Option>
-          </Select>
-        </FormItem>
-        <FormItem label="科目：">
-          <Select v-model="renameFilter.subjectId" placeholder="请选择科目">
-            <Option value=""></Option>
-          </Select>
-        </FormItem>
-        <FormItem>
-          <Button type="primary" icon="md-download" @click="toExport('rename')"
+        </div>
+      </Col>
+      <Col span="12">
+        <div class="part-box">
+          <div class="part-title">
+            <h2>图片解密、重命名导出</h2>
+          </div>
+          <Form label-position="left" inline>
+            <FormItem>
+              <Select v-model="renameFilter.imageType" placeholder="图片类型">
+                <Option
+                  v-for="(val, key) in IMAGE_TYPE"
+                  :key="key"
+                  :value="key * 1"
+                  >{{ val }}</Option
+                >
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="renameFilter.areaCode" placeholder="考点">
+                <Option value=""></Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select v-model="renameFilter.subjectId" placeholder="科目">
+                <Option value=""></Option>
+              </Select>
+            </FormItem>
+            <br />
+          </Form>
+          <Button
+            class="export-paper-btn"
+            type="primary"
+            shape="circle"
+            @click="toExport('rename')"
             >导出</Button
           >
-        </FormItem>
-      </Form>
-    </div>
+        </div>
+      </Col>
+    </Row>
   </div>
 </template>
 

src/modules/mark-set/MarkRuleSet.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="mark-rule-set part-box">
-    <Form ref="modalFormComp" :model="modalForm" :label-width="180">
+    <Form
+      ref="modalFormComp"
+      :model="modalForm"
+      :label-width="180"
+      style="width: 400px"
+    >
       <FormItem label="分数处理方式：">
-        <Select v-model="modalForm.roundUp" style="width: 200px">
+        <Select v-model="modalForm.roundUp" :disabled="!modalFormCanEdit">
           <Option
             v-for="(val, key) in SCORE_HANDLE_TYPE"
             :key="key"
@@ -12,29 +17,46 @@
         </Select>
       </FormItem>
       <FormItem label="是否显示改档及改档打分：">
-        <RadioGroup v-model="modalForm.changeStage">
-          <Radio
+        <Select
+          v-model="modalForm.changeStage"
+          :disabled="!modalFormCanEdit"
+          placeholder="是否显示改档及改档打分"
+        >
+          <Option
             v-for="(val, key) in BOOLEAN_TYPE"
             :key="key"
-            :label="key * 1"
-            style="margin-right: 50px;"
-            >{{ val }}</Radio
-          >
-        </RadioGroup>
+            :value="key * 1"
+            :label="val"
+          ></Option>
+        </Select>
       </FormItem>
       <FormItem label="阅卷员是否显示所有试卷：">
-        <RadioGroup v-model="modalForm.scoreShowAllPaper">
-          <Radio
+        <Select
+          v-model="modalForm.scoreShowAllPaper"
+          :disabled="!modalFormCanEdit"
+          placeholder="阅卷员是否显示所有试卷"
+        >
+          <Option
             v-for="(val, key) in BOOLEAN_TYPE"
             :key="key"
-            :label="key * 1"
-            style="margin-right: 50px;"
-            >{{ val }}</Radio
-          >
-        </RadioGroup>
+            :value="key * 1"
+            :label="val"
+          ></Option>
+        </Select>
       </FormItem>
       <FormItem>
-        <Button type="primary" :disabled="isSubmit" @click="submit"
+        <Button
+          shape="circle"
+          style="width: 80px;"
+          @click="modalFormCanEdit = true"
+          >编辑</Button
+        >
+        <Button
+          type="primary"
+          shape="circle"
+          style="width: 80px;"
+          :disabled="isSubmit"
+          @click="submit"
           >保存</Button
         >
       </FormItem>
@@ -60,6 +82,7 @@ export default {
         changeStage: 0,
         scoreShowAllPaper: 0
       },
+      modalFormCanEdit: false,
       modalForm: {}
     };
   },
@@ -82,6 +105,7 @@ export default {
       this.isSubmit = false;
 
       if (!result) return;
+      this.modalFormCanEdit = false;
       this.$Message.success("保存成功！");
     }
   }

src/modules/mark-set/MarkSet.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="mark-set">
-    <div class="page-navs">
-      <Button
-        :type="curNav.name === nav.name ? 'primary' : 'default'"
+    <div class="set-navs">
+      <div
+        :class="[
+          'set-navs-item',
+          { 'set-navs-item-act': curNav.name === nav.name }
+        ]"
         v-for="(nav, index) in navs"
         :key="index"
         @click="switchNav(nav)"
-        >{{ nav.title }}</Button
       >
+        {{ nav.title }}
+      </div>
     </div>
 
     <router-view />

src/plugins/globalVuePlugins.js

@@ -1,4 +1,9 @@
-import { objAssign, randomCode, tableAction } from "@/plugins/utils";
+import {
+  objAssign,
+  randomCode,
+  tableAction,
+  tableIconAction
+} from "@/plugins/utils";
 import globalMixins from "./mixins";
 import ViewHeader from "@/components/ViewHeader.vue";
 import ViewFooter from "@/components/ViewFooter.vue";
@@ -11,6 +16,7 @@ const components = {
 export default {
   install: function(Vue) {
     // 实例方法
+    Vue.prototype.$tableIconAction = tableIconAction;
     Vue.prototype.$tableAction = tableAction;
     Vue.prototype.$objAssign = objAssign;
     Vue.prototype.$randomCode = randomCode;

src/plugins/utils.js

@@ -126,6 +126,31 @@ function tableAction(h, actions) {
   });
 }
 
+/**
+ * 构建图表icon btn
+ * @param {Function} h createElement
+ * @param {Array} actions 操作分类数组
+ */
+function tableIconAction(h, actions) {
+  return actions.map(item => {
+    let attr = {
+      class: item.classes,
+      props: {
+        size: item.size || 16,
+        type: item.icon,
+        color: item.color
+      },
+      attrs: item.attrs,
+      on: {
+        click: () => {
+          item.action();
+        }
+      }
+    };
+    return h("Icon", attr, item.name);
+  });
+}
+
 /**
  * 获取随机code,默认获取16位
  * @param {Number} len 推荐8的倍数
@@ -229,6 +254,7 @@ export {
   objAssign,
   download,
   tableAction,
+  tableIconAction,
   randomCode,
   qsParams,
   formatDate,