登录页面与扫码修改

.env.production

@@ -30,7 +30,7 @@ ENV = 'production'
 # 平和县医院
 # VUE_APP_BASE_API = 'http://192.168.0.43:9150/UDI_WMS_MC/'
 
-VUE_APP_BASE_API = 'http://sjld.jiyunas.icu:81/UDI_WMS_MC/'
+# VUE_APP_BASE_API = 'http://sjld.jiyunas.icu:81/UDI_WMS_MC/'
 
 # 长泰医院
 # VUE_APP_BASE_API = 'http://192.168.6.189:9160/UDI_WMS_MC/'
@@ -54,7 +54,7 @@ VUE_APP_BASE_API = 'http://sjld.jiyunas.icu:81/UDI_WMS_MC/'
 # VUE_APP_BASE_API = 'http://192.168.0.207:9160/UDI_WMS_MC/'
 
 # 云霄妇幼保健
-# VUE_APP_BASE_API = 'http://192.168.0.11:9160/UDI_WMS_MC/'
+VUE_APP_BASE_API = 'http://192.168.0.11:9160/UDI_WMS_MC/'
 # VUE_APP_BASE_API = 'http://192.168.0.67:9150/UDI_WMS_MC/'
 
 # 东山

src/views/inoutDrug/DialogCreateDrugOrder.vue

@@ -370,7 +370,9 @@
                 style="ime-mode: disabled"
                 type="tel"
                 v-model="codeFormData.code"
-              ></el-input>
+              >
+                <i slot="suffix" v-if="inputLoading" class="el-icon-loading"></i>
+              </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="2">
@@ -379,6 +381,7 @@
               <el-button
                 type="primary"
                 size="mini"
+                :loading="inputLoading"
                 @click.native.stop="addCode()"
                 style="margin-left: 15px"
               >扫码添加
@@ -701,6 +704,7 @@ export default {
       errView: 0,
       //选入相关
       selectorder: false,
+      inputLoading:false,
       //扫码相关
       codeFormData: {
         code: "",
@@ -1295,6 +1299,7 @@ export default {
 
     //添加条码
     addCode(event) {
+
       if (event == null) {
       } else event.target.select();
       this.$refs.inputRef.select();
@@ -1357,13 +1362,14 @@ export default {
       let tQuery = Object.assign(
         JSON.parse(JSON.stringify(this.orderFormData))
       );
-
+      console.log(this.codeFormData.billNo)
       if (this.codeFormData.code.includes(';')) {
         const codeArray = this.codeFormData.code.split(';')
         tQuery.codeList = codeArray
       } else
         tQuery.code = this.codeFormData.code;
       tQuery.orderType = this.viewType;
+      tQuery.productType = 2;
       this.addCodeSubmit(tQuery);
       this.$refs.inputRef.select();
     },
@@ -1386,8 +1392,11 @@ export default {
 
     //添加条码后提交
     addCodeSubmit(tQuery) {
+
+      this.inputLoading = true
       batchAddCode(tQuery).then((response) => {
         if (response.code === 20000) {
+          this.inputLoading = false
           this.orderFormData.billNo = response.data.orderId;
           if (response.data.errMsg != null) {
             this.$alert(response.data.errMsg, "提示", {
@@ -1407,6 +1416,7 @@ export default {
         } else {
           if (response.code == 502) {
             //该产品绑定多个产品ID处理
+            this.inputLoading = false
             this.curRow = response.data;
             this.orderFormData.billNo = this.curRow.orderId;
             this.refreshCodesPanel();
@@ -1423,6 +1433,7 @@ export default {
             this.selectRlVisible = true;
           } else if (response.code == 503) {
             //该产品绑定多个供应商处理
+            this.inputLoading = false
             this.curRow = response.data;
             this.orderFormData.billNo = this.curRow.orderId;
             this.codeFormData.relId = this.curRow.relId;
@@ -1431,6 +1442,7 @@ export default {
             this.$message.error(response.message);
             this.dialogTableVisible = true;
           } else if (response.code == 504) {
+            this.inputLoading = false
             this.$confirm(response.message, "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "忽略",
@@ -1443,6 +1455,7 @@ export default {
               .catch(() => {
               });
           } else if (response.code == 505) {
+            this.inputLoading = false
             this.$confirm(response.message, "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
@@ -1455,6 +1468,7 @@ export default {
               .catch(() => {
               });
           } else if (response.code == 605) {
+            this.inputLoading = false
             this.$confirm(response.message, "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
@@ -1466,6 +1480,7 @@ export default {
               });
             return;
           } else if (response.code == 604) {
+            this.inputLoading = false
             this.$confirm(response.message, "提示", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
@@ -1477,6 +1492,7 @@ export default {
               });
             return;
           } else if (response.code == 507) {
+            this.inputLoading = false
             this.editOriginCodeVisible = true;
             this.editTitle = response.message;
             this.codeFormData.produceDate = response.data.produceDate;
@@ -1490,10 +1506,12 @@ export default {
               customClass: "messageIndex",
             });
           } else if (response.code == 511) {
+            this.inputLoading = false
             //该UDI码绑定多个货位处理
             this.spaceCodeList = response.data;
             this.selectSpaceVisible = true;
           } else {
+            this.inputLoading = false
             this.$alert(response.message, "提示", {
               confirmButtonText: "确定",
               type: "warning",
@@ -1506,7 +1524,9 @@ export default {
           }
         }
         this.loading = false;
+        this.inputLoading = false
       });
+
     },
 
     refreshCodesPanel() {

src/views/myLogin.vue

@@ -1,13 +1,34 @@
 <template>
   <div class="login-container">
-    <div class="textTitle">
+    <div class="split-layout">
-      <!--      <h3 class="toptitle">平潭协和医院</h3>-->
+      <!-- Left side: Empty/Decorative -->
-      <h3 class="toptitle">{{ title }}</h3>
+      <div class="left-panel">
-      <!--<h3 class="topSubtitle">{{ subTitle }}</h3>-->
+        <!-- Left side is now empty, just for visual design -->
-      <h3 class="topSubtitle">{{ webVersionName }}</h3>
       </div>
+      
+      <!-- Right side: Logo, Title and Login Form together -->
+      <div class="right-panel">
+        <div class="login-panel">
+          <div class="header-section">
+            <div class="logo-section">
+              <div v-if="webLogo == ''">
+                <img alt="logo" src="@/assets/logo/wyLogo.png" class="logo-image">
+              </div>
+              <div v-else>
+                <img alt="logo" :src="webLogo" class="logo-image">
+              </div>
+            </div>
+            
+            <div class="title-section">
+              <h1 class="system-title">{{ title }}</h1>
+              <!-- <h2 class="system-subtitle">{{ webVersionName }}</h2> -->
+            </div>
+          </div>
+          
+          <!-- <h3 class="login-heading">用户登录</h3> -->
+          
           <el-form
-      class="card-box login-form"
+            class="login-form"
             autocomplete="on"
             :model="ruleForm"
             :rules="rules"
@@ -15,18 +36,7 @@
             label-position="left"
             @submit.native.prevent
           >
-      <el-card class="box-card">
+            <el-form-item prop="username" class="form-item">
-        <div style="text-align: center; margin-top: 10px">
-          <div v-if="webLogo == ''">
-            <img alt="element-logo" src="@/assets/logo/wyLogo.png"  width="120" height="60">
-          </div>
-          <div v-else>
-            <img alt="element-logo" :src="webLogo">
-          </div>
-
-        </div>
-        <h3 class="title" style="margin-top: 20px">用户登录</h3>
-        <el-form-item prop="username" class="item" style="margin-top: -20px">
               <el-input
                 placeholder="账号"
                 name="username"
@@ -34,16 +44,13 @@
                 readonly
                 onfocus="this.removeAttribute('readonly');"
                 v-model="loginForm.username"
+                prefix-icon="el-icon-user"
               >
-            <i slot="prefix" class="el-input__icon">
-              <icon-svg icon-class="user"/>
-            </i>
               </el-input>
             </el-form-item>
   
-        <el-form-item prop="password" class="item">
+            <el-form-item prop="password" class="form-item">
               <el-input
-            prefix-icon="el-icon-lock"
                 v-model="pwdCover"
                 type="text"
                 name="pwd"
@@ -52,68 +59,62 @@
                 autocomplete="off"
                 @input="setPassword"
                 @keyup.enter.native="handleLogin"
+                prefix-icon="el-icon-lock"
               >
                 <i
                   slot="suffix"
-              style="margin-top: 10px; margin-right: 10px; font-size: 18px"
+                  class="password-eye"
                   @click="hidePassword"
                 >
                   <svg-icon icon-class="eye-open" v-if="this.isShowPassword"  />
                   <svg-icon icon-class="eye" v-else />
                 </i>
-
               </el-input>
-          <!--          <el-input-->
-          <!--            placeholder="密码"-->
-          <!--            name="password"-->
-          <!--            :type="isShowPwd ? 'text' : 'password'"-->
-          <!--            @keyup.enter.native="handleLogin"-->
-          <!--            v-model="loginForm.password"-->
-          <!--            autocomplete="on"-->
-          <!--          >-->
-          <!--            <i slot="prefix" class="el-input__icon">-->
-          <!--              <icon-svg icon-class="pwd"/>-->
-          <!--            </i>-->
-          <!--            <i-->
-          <!--              slot="suffix"-->
-          <!--              class="el-input__icon"-->
-          <!--              @click="isShowPwd = !isShowPwd"-->
-          <!--            >-->
-          <!--              <icon-svg icon-class="eye"/>-->
-          <!--            </i>-->
-          <!--          </el-input>-->
             </el-form-item>
+            
             <el-form-item
               prop="verificationCode"
-          class="item"
+              class="form-item verify-section"
-          style="background-color: white"
             >
+              <div style="width: 100%;">
                 <Verify
                   ref="checkV"
                   :showButton="false"
-            :barSize="{ width: '305px', height: '37px' }"
+                  :barSize="{ width: '100%', height: '50px' }"
                   :vOffset="5"
                   @success="verifyAlert('success')"
                   @error="verifyAlert('error')"
                   :type="3"
+                  class="verify-component"
+                  style="width: 100% !important;"
                 ></Verify>
+              </div>
             </el-form-item>
-        <div style="text-align: center; margin-top: 15px">
+            
+            <div class="login-button-container">
               <el-button
                 type="primary"
-            style="width: 60%; margin-bottom: 30px"
+                class="login-button"
                 :loading="loading"
                 @click.native="handleLogin()"
               >登录
               </el-button>
             </div>
-      </el-card>
           </el-form>
+        </div>
+      </div>
+    </div>
 
-    <el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="85%" top="5vh"
+    <el-dialog 
+      title="修改密码" 
+      :visible.sync="passwordFormVisible" 
+      width="400px" 
+      top="20vh"
       :close-on-click-modal="false"
       :show-close="false"
-               :close-on-press-escape="false">
+      :close-on-press-escape="false"
+      class="password-dialog"
+    >
       <el-form :model="passwordFormData" :rules="passwordFormDataRules" ref="passwordFormData">
         <el-form-item label="原始密码" prop="old_password">
           <el-input type="password" v-model="passwordFormData.oldPassword" auto-complete="off"></el-input>
@@ -126,22 +127,12 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <!-- <el-button @click.native="passwordFormVisible = !passwordFormVisible">取消</el-button> -->
         <el-button type="primary" @click.native="passwdSubmit()" :loading="passwordLoading">提交
         </el-button>
       </div>
     </el-dialog>
 
-    <div
+    <div class="footer-info">
-      style="
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 12px;
-        color: white;
-      "
-    >
       开发单位：厦门维衍科技有限公司 技术支持：17705920868
     </div>
   </div>
@@ -463,128 +454,365 @@ export default {
 <style type="text/scss" lang="scss">
 @import "../assets/styles/mixin";
 
-$bg: #2d3a4b;
+// Color variables
-$dark_gray: #889aa4;
+$primary-color: #3c85ee;
-$light_gray: #eee;
+$text-dark: #2c3e50;
+$text-light: #f5f5f5;
+$card-background: rgba(255, 255, 255, 0.9);
+$card-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+$accent-color: #4cd3c2;
+$error-color: #f56c6c;
+$success-color: #67c23a;
+
 .login-container {
   @include relative;
-  background-color: white;
-  background-image: url("../assets/login.jpg");
-  background-size: 100vw 100vh;
   height: 100%;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
   overflow: hidden;
+  background-image: url("../assets/login.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(15deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 100%);
+    z-index: 1;
+  }
+  
+  .split-layout {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    
+    .left-panel {
+      flex: 1;
       display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .right-panel {
+      width: 30%;
+      min-width: 420px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
+      
+      .login-panel {
+        width: 85%;
+        padding: 50px 0;
+        animation: slideInRight 0.8s ease-out;
+      }
+      
+      .header-section {
+        text-align: center;
+        margin-bottom: 30px;
         
-  input:-webkit-autofill,
+        .logo-section {
-  input:-webkit-autofill:hover,
+          margin-bottom: 20px;
-  input:-webkit-autofill:focus,
+          
-  input:-webkit-autofill:active {
+          .logo-image {
-    -webkit-transition-delay: 99999s;
+            width: 120px;
-    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
+            height: auto;
+            object-fit: contain;
+          }
         }
         
-  .item {
+        .title-section {
-    width: 20em;
+          .system-title {
-    margin-left: 5em;
+            font-size: 28px;
+            font-weight: 600;
+            color: white;
+            margin-bottom: 10px;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+          }
+          
+          .system-subtitle {
+            font-size: 18px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.9);
+            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+      
+      .login-heading {
+        font-size: 24px;
+        font-weight: 600;
+        color: white;
+        margin-bottom: 30px;
+        text-align: center;
+      }
+    }
+  }
+
+  @keyframes slideInRight {
+    from {
+      opacity: 0;
+      transform: translateX(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .login-form {
+    width: 100%;
+  }
+
+  .form-item {
+    margin-bottom: 25px;
     
     .el-form-item__content {
       display: flex;
-      flex-flow: row;
+    }
+    
+    .el-input__inner {
+      height: 45px;
+      border-radius: 8px;
+      padding-left: 45px;
+      background-color: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      transition: all 0.3s;
+      color: white;
+      
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.6);
+      }
+      
+      &:focus {
+        border-color: $primary-color;
+        background-color: rgba(255, 255, 255, 0.25);
+        box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
       }
     }
     
-  input {
+    .el-input__icon {
-    background: transparent;
+      line-height: 45px;
-    border: 0;
+      font-size: 18px;
-    -webkit-appearance: none;
+      color: rgba(255, 255, 255, 0.7);
-    border-radius: 0;
+    }
-    padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
-    color: $dark_gray;
-    height: 100%;
   }
 
-  .el-input {
+  .verify-section {
-    display: inline-block;
+    margin-top: 10px;
+    margin-bottom: 30px;
+    
+    .el-form-item__content {
+      width: 100%;
+      display: block !important;
+      
+      /* Override verify component styles to fix compression */
+      .verify-component {
+        width: 100% !important;
+      }
+    }
   }
 
-  .tips {
+
-    font-size: 14px;
+  .login-container .verify-subblock,
-    color: #fff;
+  .login-container .right-panel .verify-subblock {
-    margin-bottom: 0.13333rem;
+    height: 50px !important;
   }
 
-  .svg-container {
+  .password-eye {
-    padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
+    cursor: pointer;
-    color: $dark_gray;
+    color: rgba(255, 255, 255, 0.7);
-    vertical-align: middle;
+    font-size: 18px;
-    display: inline-block;
+    margin-right: 10px;
+    line-height: 45px;
     
-    &_login {
+    &:hover {
-      font-size: 20px;
+      color: white;
     }
   }
 
-  .title {
+  .login-button-container {
-    font-size: 26px;
+    margin-top: 35px;
-    color: #2d3a4b;
+    width: 100%;
-    margin: 0 auto 0.5333rem auto;
-    text-align: center;
-    font-weight: bold;
-    margin-bottom: 50px;
   }
 
-  .textTitle {
+  .login-button {
-    width: 50%;
+    width: 100%;
-    font-size: 45px;
+    height: 45px;
+    border-radius: 8px;
+    background: $primary-color;
+    border: none;
+    font-weight: 600;
+    font-size: 16px;
+    
+    &:hover, &:focus {
+      background: #2a70d8;
+    }
   }
 
-  .toptitle {
+  .footer-info {
-    color: #ffffff;
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    width: 100%;
     text-align: center;
-    margin-top: 132px;
+    color: rgba(255, 255, 255, 0.8);
-    margin-bottom: -10px;
+    font-size: 12px;
+    z-index: 2;
   }
+}
 
-  .topSubtitle {
+// Password dialog styles
-    color: #fcd38b;
+.password-dialog {
-    text-align: center;
+  .el-dialog {
+    border-radius: 12px;
+    overflow: hidden;
   }
   
-  .login-form {
+  .el-dialog__header {
-    //@include fxied-center;
+    background-color: $primary-color;
-    margin: 0px 100px auto auto;
+    padding: 15px 20px;
-    width: 50em;
+    
-    /*background-color: silver;*/
+    .el-dialog__title {
-    /*background: #fff;*/
+      color: white;
-    padding: 10em 10em 15em 10em;
+      font-weight: 500;
+    }
   }
   
-  .el-form-item {
+  .el-dialog__body {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 30px 20px;
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 0.0666rem;
-    color: #454545;
   }
   
-  .show-pwd {
+  .el-form-item__label {
-    position: absolute;
+    font-weight: 500;
-    right: 0.1333rem;
-    top: 0.09333rem;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
   }
   
-  .thirdparty-button {
+  .el-button--primary {
-    /*position: absolute;*/
+    background-color: $primary-color;
-    /*right: .4666rem;*/
+    border-color: $primary-color;
-    /*bottom: .37333rem;*/
+    width: 120px;
+    
+    &:hover {
+      background-color: #2a70d8;
+      border-color: #2a70d8;
     }
+  }
+}
+
+// Fix for Element UI components
+.el-form-item.is-error .el-input__inner {
+  border-color: $error-color;
+}
 
-  .box-card {
+// Responsive adjustments
-    margin-top: -20px;
+@media (max-width: 1400px) {
-    height: 550px;
+  .login-container {
-    width: 490px;
+    .split-layout {
+      .right-panel {
+        width: 35%;
+        min-width: 400px;
       }
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .login-container {
+    .split-layout {
+      .right-panel {
+        width: 40%;
+        min-width: 380px;
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .login-container {
+    .split-layout {
+      .right-panel {
+        width: 45%;
+        min-width: 360px;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .login-container {
+    .split-layout {
+      flex-direction: column;
+      
+      .left-panel {
+        display: none;
+      }
+      
+      .right-panel {
+        width: 100%;
+        height: 100vh;
+        min-width: auto;
+        
+        .login-panel {
+          width: 90%;
+          max-width: 400px;
+          padding: 40px 0;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style scoped>
+.verify-section ::v-deep .verify-slider {
+  width: 100% !important;
+}
+
+.verify-section ::v-deep .verify-bar-area {
+  width: 100% !important;
+  height: 50px !important;
+  line-height: 50px !important;
+  background: rgba(245, 236, 236, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 8px !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+  transition: all 0.3s ease !important;
+}
+
+.verify-section ::v-deep .verify-left-bar {
+  height: 50px !important;
+  background: rgba(226, 234, 245, 0.3) !important;
+  border-radius: 8px 0 0 8px !important;
+  transition: all 0.3s ease !important;
+}
+
+.verify-section ::v-deep .verify-move-block {
+  height: 50px !important;
+  line-height: 50px !important;
+  background: #e6edf7 !important;
+  box-shadow: 0 0 15px rgba(60, 133, 238, 0.3) !important;
+  border-radius: 8px !important;
+  color: white !important;
+  transition: all 0.3s ease !important;
+  cursor: pointer !important;
+}
+
+.verify-section ::v-deep .verify-move-block:hover {
+  background: #2a70d8 !important;
+  box-shadow: 0 0 20px rgba(60, 133, 238, 0.4) !important;
+}
+
+.verify-section ::v-deep .verify-subblock {
+  height: 50px !important;
 }
 </style>