登录与设置

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-library-client",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "paper-library client",
   "scripts": {
     "start": "npm run e:serve",

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

@@ -154,9 +154,10 @@
     }
   }
   .el-input__inner {
-    border-radius: 8px;
+    border-radius: 4px;
     border-color: #ddd;
     background-color: #fff;
+    padding: 0 8px;
   }
   // .el-input__suffix {
   //   right: 0;
@@ -174,16 +175,11 @@
 .el-select {
   .el-input__suffix {
     right: 0;
-    border-left: 1px solid #ddd;
   }
   .el-input {
     .el-select__caret {
       width: 30px;
     }
-    .el-icon-arrow-up:before {
-      font-size: 12px;
-      content: "\e78f";
-    }
   }
 }
 .el-select-dropdown {
@@ -201,6 +197,22 @@
       z-index: 9;
     }
   }
+  &__item {
+    margin: 0 6px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-radius: 3px;
+    height: 28px;
+    line-height: 28px;
+
+    &.hover {
+      background: #e8f3ff;
+      color: $--color-primary;
+    }
+    &.selected {
+      color: $--color-primary;
+    }
+  }
 }
 // upload
 .el-upload,

src/assets/styles/home.scss

@@ -4,6 +4,19 @@
   width: 100%;
   height: 100%;
   z-index: auto;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 10px;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    cursor: move;
+    -webkit-app-region: drag;
+  }
 }
 
 .home-body {
@@ -17,6 +30,8 @@
   z-index: 98;
   padding-top: 30px;
   padding-bottom: 30px;
+  min-width: 800px;
+  min-height: 450px;
 }
 
 /* head */
@@ -27,36 +42,54 @@
   top: 0;
   left: 0;
   z-index: 99;
-  background-color: rgba($color: #fff, $alpha: 0.9);
-
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  -webkit-app-region: drag;
 
-  .head-title {
-    line-height: 30px;
-    padding: 0 10px;
+  .head-logo {
+    position: absolute;
+    width: 140px;
+    height: 24px;
+    top: 48px;
+    left: 48px;
+    background-image: url(../images/bg-logo.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
 
   .head-actions {
     -webkit-app-region: no-drag;
-    padding: 0 10px;
     font-size: 0;
+    position: absolute;
+    top: 12px;
+    right: 12px;
   }
   .action-icon {
     display: inline-block;
     vertical-align: top;
-    font-size: 14px;
-    padding: 5px;
-    line-height: 20px;
-    text-align: center;
+    width: 32px;
+    height: 32px;
     cursor: pointer;
+    margin-left: 8px;
+    border-radius: 3px;
 
     &:hover {
-      opacity: 0.7;
+      background-color: #bedaff;
     }
   }
+  .action-min {
+    background-image: url(../images/bg-min.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .action-close {
+    background-image: url(../images/bg-close.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .action-logout {
+    background-image: url(../images/icon-logout.png);
+    background-size: 70% 70%;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 }
 
 .home-footer {

src/assets/styles/login.scss

@@ -1,16 +1,11 @@
 /* login */
 .login-home {
   .home-body {
-    background-color: $--color-primary;
+    background-image: url(../images/bg-login.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    overflow: auto;
   }
-  .home-head {
-    background-color: rgba($color: #000, $alpha: 0.2);
-  }
-  .head-title,
-  .head-actions {
-    color: #fff;
-  }
-
   .login-action {
     position: absolute;
     top: 50px;
@@ -39,63 +34,115 @@
   }
 }
 
-.login-body {
+.login {
   position: absolute;
+  width: 748px;
+  height: 372px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  margin-top: -70px;
-  z-index: 99;
-
-  .login-title {
-    text-align: center;
-    margin-bottom: 40px;
-    h1 {
-      font-size: 24px;
-      font-weight: bold;
-      color: #fff;
-    }
-  }
 }
-.login-form {
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: #fff;
+.login-spin {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 320px;
+  height: 100%;
+  text-align: center;
+  padding-top: 266px;
 
-  &-title {
-    font-size: 16px;
-    padding: 20px;
-    border-bottom: 1px solid $--color-border;
-  }
+  background-image: url(../images/bg-login-spin.png);
+  background-repeat: no-repeat;
+  background-position: 0 20px;
+  background-size: 100% auto;
+  overflow: auto;
 
-  .el-form {
-    padding: 30px 40px;
-    width: 360px;
+  > h1 {
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 40px;
+    margin-bottom: 14px;
+    color: #262626;
   }
-  .el-input__prefix {
-    left: 9px;
-  }
-  .icon {
-    margin-top: 5px;
+  > h4 {
+    font-weight: 400;
+    font-size: 20px;
+    color: #8c8c8c;
+    line-height: 28px;
+    font-style: normal;
   }
 }
 
-// setting
-.setting {
-  .el-form {
-    width: 400px;
+.login-body {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 32px;
+  width: 344px;
+  height: 372px;
+  background: #ffffff;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  border: 1px solid #e5e6eb;
+
+  .login-head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 28px;
+
+    &-title {
+      font-weight: bold;
+      font-size: 24px;
+      color: #262626;
+      line-height: 32px;
+    }
+    &-subtitle {
+      font-weight: 400;
+      font-size: 16px;
+      color: #8c8c8c;
+      line-height: 24px;
+      margin-top: 4px;
+    }
+  }
+
+  .login-btn {
+    height: 32px;
+    padding: 5px 16px;
+    border-radius: 4px;
+    line-height: 20px;
+    text-align: center;
+
+    &:hover {
+      color: $--color-primary;
+      border-color: $--color-primary;
+    }
   }
-  .el-form-item {
-    margin-right: 0;
-    display: inline-block;
+  .btn-setting {
+    &::before {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 3px;
+      margin-top: -2px;
+      width: 16px;
+      height: 16px;
+      background-image: url(../images/icon-setting.png);
+      background-size: 100% 100%;
+    }
+
+    &:hover {
+      &::before {
+        background-image: url(../images/icon-setting-act.png);
+      }
+    }
   }
-  .ip-split {
-    display: inline-block;
-    vertical-align: top;
-    margin: 6px 5px auto;
+  .login-submit {
+    width: 100%;
+    border-radius: 4px;
+    margin-top: 4px;
   }
-  .el-input-number.is-without-controls .el-input__inner {
-    padding-left: 10px;
-    padding-right: 10px;
+
+  .el-form-item--small.el-form-item {
+    margin-bottom: 28px;
   }
 }

src/assets/styles/variables.scss

@@ -13,7 +13,7 @@ $--color-border: #eff0f5;
 $--color-border-bold: #e6e6e6;
 $--color-background: #eff0f5;
 // status
-$--color-primary: #3a5ae5 !default;
+$--color-primary: #165dff !default;
 $--color-primary-light: mix(#fff, $--color-primary, 20%) !default;
 $--color-success: #3fcb98 !default;
 $--color-success-light: #32cf8a !default;

src/modules/login/api.js

@@ -3,3 +3,6 @@ import { $post } from "@/plugins/axios";
 export const login = (datas) => {
   return $post("/api/admin/client/user/login", datas);
 };
+export const schoolListQuery = () => {
+  return $post("/api/admin/client/user/login", {});
+};

src/modules/login/views/Login.vue

@@ -1,54 +1,66 @@
 <template>
   <div class="login" @keyup.enter="submit">
-    <div class="login-action">
-      <div class="login-action-btn" @click="toSet">
-        <i class="el-icon-s-tools"></i><span>设置</span>
-      </div>
-      <div class="login-action-btn" @click="toSetScan">
-        <i class="el-icon-s-tools"></i><span>配置扫描仪</span>
-      </div>
+    <div class="login-spin">
+      <h1>欢迎使用</h1>
+      <h4>知学知考-档案电子化扫描系统</h4>
     </div>
     <div class="login-body">
-      <div class="login-title">
-        <h1>档案电子化扫描系统</h1>
+      <div class="login-head">
+        <div class="login-head-left">
+          <h2 class="login-head-title">登录</h2>
+          <h4 class="login-head-subtitle">请选择输入</h4>
+        </div>
+        <div class="login-head-right">
+          <el-button class="login-btn btn-setting" @click="toSet"
+            >设置</el-button
+          >
+        </div>
       </div>
-      <div class="login-form">
-        <h2 class="login-form-title">扫描员登录</h2>
-        <el-form ref="loginForm" :model="loginModel" :rules="loginRules">
-          <el-form-item prop="loginName">
-            <el-input
-              v-model.trim="loginModel.loginName"
-              size="large"
-              placeholder="请输入账号"
-              name="username"
-              clearable
-            >
-              <i class="icon icon-phone" slot="prefix"></i>
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input
-              type="password"
-              v-model.trim="loginModel.password"
-              size="large"
-              placeholder="请输入密码"
-              clearable
+      <el-form ref="loginForm" :model="loginModel" :rules="loginRules">
+        <el-form-item prop="schoolCode">
+          <el-select
+            v-model="loginModel.schoolCode"
+            placeholder="请选择学校"
+            name="schoolCode"
+            class="width-full"
+          >
+            <el-option
+              v-for="item in schools"
+              :key="item.code"
+              :value="item.code"
+              :label="item.name"
             >
-              <i class="icon icon-password" slot="prefix"></i>
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="schoolCode"></el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              :disabled="isSubmit"
-              size="large"
-              @click="submit"
-              >登录</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="loginName">
+          <el-input
+            v-model.trim="loginModel.loginName"
+            placeholder="请输入账号"
+            name="username"
+            clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            type="password"
+            v-model.trim="loginModel.password"
+            placeholder="请输入密码"
+            clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="login-submit"
+            :disabled="isSubmit"
+            @click="submit"
+            >登录</el-button
+          >
+        </el-form-item>
+      </el-form>
     </div>
   </div>
 </template>
@@ -56,14 +68,17 @@
 <script>
 import { password } from "@/plugins/formRules";
 import { formatDate } from "../../../plugins/utils";
-import { login } from "../api";
+import { login, schoolListQuery } from "../api";
 import { Base64 } from "@/plugins/crypto";
-import { setScanner } from "../../../plugins/scanner";
 
 export default {
   name: "login",
   data() {
     return {
+      schools: [
+        { code: "test-schoo-1", name: "学校1" },
+        { code: "test-schoo-2", name: "学校2" },
+      ],
       loginModel: {
         schoolCode: "",
         type: "ACCOUNT",
@@ -101,11 +116,9 @@ export default {
     toSet() {
       this.$router.push({ name: "Setting" });
     },
-    async toSetScan() {
-      await setScanner().catch((error) => {
-        console.dir(error);
-        this.$message.error("连接扫描仪异常");
-      });
+    async getSchools() {
+      const res = await schoolListQuery();
+      this.schools = res || [];
     },
     async submit() {
       let domain = this.$ls.get("domain");

src/modules/login/views/LoginHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout class="login-home" show-footer> </layout>
+  <layout class="login-home"> </layout>
 </template>
 
 <script>

src/modules/login/views/Setting.vue

@@ -1,80 +1,44 @@
 <template>
-  <div class="setting login-body">
-    <div class="login-form">
-      <h2 class="login-form-title">设置</h2>
-      <el-form ref="setForm" :model="setModel" :rules="setRules" inline>
-        <h3 class="mb-1">服务器IP地址：</h3>
-        <el-form-item prop="ipCont1">
-          <el-input-number
-            style="width: 60px"
-            v-model="setModel.ipCont1"
-            :min="0"
-            :max="255"
-            :step="1"
-            step-strictly
-            :controls="false"
-          ></el-input-number>
-        </el-form-item>
-        <span class="ip-split">—</span>
-        <el-form-item prop="ipCont2">
-          <el-input-number
-            style="width: 60px"
-            v-model="setModel.ipCont2"
-            :min="0"
-            :max="255"
-            :step="1"
-            step-strictly
-            :controls="false"
-          ></el-input-number>
-        </el-form-item>
-        <span class="ip-split">—</span>
-        <el-form-item prop="ipCont3">
-          <el-input-number
-            style="width: 60px"
-            v-model="setModel.ipCont3"
-            :min="0"
-            :max="255"
-            :step="1"
-            step-strictly
-            :controls="false"
-          ></el-input-number>
-        </el-form-item>
-        <span class="ip-split">—</span>
-        <el-form-item prop="ipCont4">
-          <el-input-number
-            style="width: 60px"
-            v-model="setModel.ipCont4"
-            :min="0"
-            :max="255"
-            :step="1"
-            step-strictly
-            :controls="false"
-          ></el-input-number>
-        </el-form-item>
-        <span class="ip-split">:</span>
-        <el-form-item prop="port">
-          <el-input-number
-            style="width: 60px"
-            v-model="setModel.port"
-            :min="1"
-            :max="1000000"
-            :step="1"
-            step-strictly
-            :controls="false"
-          ></el-input-number>
-        </el-form-item>
-        <br />
-        <h3 class="mb-1">学校编号：</h3>
-        <el-form-item prop="schoolCode">
-          <el-input v-model="setModel.schoolCode" clearable></el-input>
+  <div class="login">
+    <div class="login-spin">
+      <h1>欢迎使用</h1>
+      <h4>知学知考-档案电子化扫描系统</h4>
+    </div>
+    <div class="login-body">
+      <div class="login-head">
+        <div class="login-head-left">
+          <h2 class="login-head-title">设置</h2>
+          <h4 class="login-head-subtitle">服务器IP地址设置</h4>
+        </div>
+        <div class="login-head-right">
+          <el-button class="login-btn btn-setting" @click="toSetScan"
+            >配置扫描仪</el-button
+          >
+        </div>
+      </div>
+      <el-form ref="setForm" :model="setModel" :rules="setRules">
+        <el-form-item prop="host">
+          <div class="box-justify">
+            <el-select
+              v-model="setModel.protocol"
+              style="width: 70px; margin-right: 8px; flex-shrink: 0"
+            >
+              <el-option value="http" label="http"></el-option>
+              <el-option value="https" label="https"></el-option>
+            </el-select>
+            <el-input
+              v-model.trim="setModel.host"
+              placeholder="服务器IP地址"
+              clearable
+            ></el-input>
+          </div>
         </el-form-item>
-
-        <br />
         <el-form-item>
           <el-button
             type="primary"
+            class="login-submit"
+            style="margin-top: 126px"
             :disabled="loading"
-            size="large"
             @click="submit"
             >确定</el-button
           >
@@ -86,99 +50,64 @@
 
 <script>
 import db from "@/plugins/db";
+import { setScanner } from "../../../plugins/scanner";
 
 export default {
   name: "setting",
   data() {
-    const contValidator = [
-      {
-        required: true,
-        message: " ",
-        trigger: "change",
-      },
-    ];
     return {
       setModel: {
-        ipCont1: undefined,
-        ipCont2: undefined,
-        ipCont3: undefined,
-        ipCont4: undefined,
-        port: undefined,
-        schoolCode: "",
+        protocol: "http",
+        host: "",
       },
       setRules: {
-        ipCont1: [...contValidator],
-        ipCont2: [...contValidator],
-        ipCont3: [...contValidator],
-        ipCont4: [...contValidator],
-        port: [...contValidator],
-        schoolCode: [...contValidator],
+        host: [
+          {
+            required: true,
+            message: "请输入服务器IP地址",
+            trigger: "change",
+          },
+        ],
       },
       loading: false,
     };
   },
   computed: {
-    domainEdited() {
-      return `http://${this.setModel.ipCont1}.${this.setModel.ipCont2}.${this.setModel.ipCont3}.${this.setModel.ipCont4}:${this.setModel.port}`;
-    },
     domain() {
       return this.$store.state.domain;
     },
-    schoolCode() {
-      return this.$store.state.schoolCode;
-    },
   },
   mounted() {
     this.initData();
   },
   methods: {
     initData() {
-      if (!this.domain) {
-        this.setModel = {
-          ipCont1: undefined,
-          ipCont2: undefined,
-          ipCont3: undefined,
-          ipCont4: undefined,
-          port: undefined,
-          schoolCode: this.schoolCode,
-        };
-        return;
+      const domain = this.domain || "";
+      if (domain.indexOf("https") !== -1) {
+        this.setModel.protocol = "https";
+      } else {
+        this.setModel.protocol = "http";
       }
-
-      const [ipCont1, ipCont2, ipCont3, ipCont4, port] = this.domain
-        .replace("http://", "")
-        .split(/\.|:/);
-
-      this.setModel = {
-        ipCont1: Number(ipCont1),
-        ipCont2: Number(ipCont2),
-        ipCont3: Number(ipCont3),
-        ipCont4: Number(ipCont4),
-        port: Number(port),
-        schoolCode: this.schoolCode,
-      };
+      this.setModel.host = domain.replace(`${this.setModel.protocol}://`, "");
+    },
+    async toSetScan() {
+      await setScanner().catch((error) => {
+        console.dir(error);
+        this.$message.error("连接扫描仪异常");
+      });
     },
     async submit() {
-      if (this.loading) return;
-      this.loading = true;
-
       const valid = await this.$refs.setForm.validate().catch(() => {});
-      if (!valid) {
-        this.loading = false;
-        return;
-      }
+      if (!valid) return;
 
-      this.$store.commit("setDomain", this.domainEdited);
-      let res1 = await db.setDict("domain", this.domainEdited).catch(() => {});
-      let res2 = await db
-        .setDict("schoolCode", this.setModel.schoolCode)
-        .catch(() => {});
+      if (this.loading) return;
+      this.loading = true;
 
-      if (res1 && res2) {
-        this.$ls.set("domain", this.domainEdited);
-        this.$store.commit("setDomain", this.domainEdited);
-        this.$ls.set("schoolCode", this.setModel.schoolCode);
-        this.$store.commit("setSchoolCode", this.setModel.schoolCode);
+      const domain = `${this.setModel.protocol}://${this.setModel.host}`;
+      this.$store.commit("setDomain", domain);
+      const res = await db.setDict("domain", domain).catch(() => {});
+      if (res) {
+        this.$ls.set("domain", domain);
         this.$message.success("设置成功！");
         this.$router.go(-1);
       } else {

src/views/Layout.vue

@@ -1,19 +1,11 @@
 <template>
   <div class="home">
     <div class="home-head">
-      <div class="head-title">档案电子化扫描系统</div>
+      <div class="head-logo"></div>
       <div class="head-actions">
-        <span class="action-icon" title="返回" @click="toBack">
-          <i class="el-icon-arrow-left"></i>
+        <span class="action-icon action-min" title="最小化" @click="minWin">
         </span>
-        <span class="action-icon" title="最小化" @click="minWin">
-          <i class="el-icon-minus"></i>
-        </span>
-        <span class="action-icon" title="最大化" @click="maxWin">
-          <i class="el-icon-files"></i>
-        </span>
-        <span class="action-icon" title="关闭" @click="close">
-          <i class="el-icon-close"></i>
+        <span class="action-icon action-close" title="关闭" @click="close">
         </span>
         <span
           v-if="isDev"
@@ -21,7 +13,6 @@
           @click="logout"
           title="退出"
         >
-          <i class="el-icon-switch-button"></i>
         </span>
       </div>
     </div>
@@ -59,7 +50,7 @@ export default {
   data() {
     return {
       isDev: process.env.NODE_ENV === "development",
-      version: "1.0.2",
+      version: "1.0.4",
     };
   },
   computed: {