更新 element3=>element-plus

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "element-plus": "^1.1.0-beta.24",
     "element3": "^0.0.40",
     "md5": "^2.3.0",
     "vue": "^3.2.16",

src/components/Aside.vue

@@ -7,7 +7,7 @@
     active-text-color="#ffd04b"
     :router="true"
   >
-    <el-submenu v-for="(item, index) in menu" :key="item" :index="index">
+    <el-sub-menu v-for="(item, index) in menu" :key="item" :index="index">
       <template v-slot:title>
         <i :class="item.icon"></i>
         <span>{{ item.title }}</span>
@@ -20,7 +20,7 @@
       >
         {{ son.name }}
       </el-menu-item>
-    </el-submenu>
+    </el-sub-menu>
   </el-menu>
 </template>
 <script>

src/main.js

@@ -1,6 +1,6 @@
-import "element3/lib/theme-chalk/index.css";
 import { createApp } from "vue";
-import Element3 from "element3";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
@@ -38,4 +38,4 @@ app.config.globalProperties.check = () => {
   console.log("check");
 };
 
-app.use(router).use(Element3).use(store).mount("#app");
+app.use(router).use(ElementPlus).use(store).mount("#app");

src/views/cargoOwnerManage/cargoOwnerDetail.vue

@@ -42,12 +42,12 @@
         placeholder="请输入货主名称/联系人/联系人手机号"
         prefix-icon="el-icon-search"
         v-model="term"
-        style="height: 32px; width: 330px; line-height: 32px"
+        style="width: 330px"
       ></el-input>
       <div class="seach-btn" @click="getVoyageList">查询</div>
     </div>
 
-    <el-table :data="tableData" stripe style="width: 100%">
+    <el-table :data="tableData" stripe style="width: 100%; margin-top: 20px">
       <el-table-column
         type="index"
         label="序号"
@@ -123,7 +123,7 @@
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
-import { Notification, Msgbox, Message } from "element3";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
 import { useRoute } from "vue-router";
@@ -233,10 +233,10 @@ export default {
 }
 
 .radio-btns {
-  height: 34px;
+  height: 38px;
   width: 103px;
   border: 1px solid #1486f9;
-  line-height: 34px;
+  line-height: 38px;
   text-align: center;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
@@ -246,13 +246,13 @@ export default {
 }
 
 .left-radius {
-  border-top-left-radius: 17px;
-  border-bottom-left-radius: 17px;
+  border-top-left-radius: 19px;
+  border-bottom-left-radius: 19px;
 }
 
 .right-radius {
-  border-top-right-radius: 17px;
-  border-bottom-right-radius: 17px;
+  border-top-right-radius: 19px;
+  border-bottom-right-radius: 19px;
 }
 .currentbtn {
   background: #1486f9;
@@ -262,7 +262,7 @@ export default {
 .seach-btn {
   display: inline-block;
   width: 60px;
-  height: 32px;
+  height: 38px;
   background: #0094fe;
   border-radius: 2px;
   font-size: 14px;
@@ -270,12 +270,9 @@ export default {
   font-weight: 400;
   color: #ffffff;
   text-align: center;
-  line-height: 32px;
-  margin-left: 10px;
+  line-height: 38px;
+  margin-left: 15px;
   cursor: pointer;
-}
-
-:deep().el-input__icon {
-  line-height: 100% !important;
+  box-sizing: border-box;
 }
 </style>

src/views/cargoOwnerManage/cargoOwnerList.vue

@@ -6,18 +6,14 @@
           placeholder="请输入货主名称/联系人/联系人手机号"
           prefix-icon="el-icon-search"
           v-model="term"
-          style="height: 32px; width: 330px; line-height: 32px"
+          style="width: 330px"
         ></el-input>
         <div class="seach-btn" @click="getCargoOwnerList">查询</div>
       </div>
       <div class="cargo-owner-add" @click="dialogFormVisible = true">
         添加货主
       </div>
-      <el-dialog
-        title="添加货主"
-        :visible="dialogFormVisible"
-        v-model:visible="dialogFormVisible"
-      >
+      <el-dialog title="添加货主" v-model="dialogFormVisible">
         <template v-slot:default>
           <el-form
             :model="ruleForm"
@@ -113,7 +109,7 @@
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
-import { Notification, Msgbox, Message } from "element3";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
@@ -178,7 +174,7 @@ export default {
           });
           console.log(res);
           if (res.data.status == 0) {
-            Notification.success({
+            ElNotification.success({
               title: "添加成功",
               duration: 0,
               message: `${userName}:${res.data.msg}`,
@@ -187,7 +183,7 @@ export default {
             resetForm();
             getCargoOwnerList();
           } else {
-            Notification.error({
+            ElNotification.error({
               title: "失败",
               duration: 3000,
               message: res.data.msg,
@@ -235,7 +231,7 @@ export default {
 .seach-btn {
   display: inline-block;
   width: 60px;
-  height: 32px;
+  height: 38px;
   background: #0094fe;
   border-radius: 2px;
   font-size: 14px;
@@ -243,27 +239,25 @@ export default {
   font-weight: 400;
   color: #ffffff;
   text-align: center;
-  line-height: 32px;
-  margin-left: 10px;
+  line-height: 38px;
+  margin-left: 15px;
   cursor: pointer;
+  box-sizing: border-box;
 }
 
 .cargo-owner-add {
   width: 80px;
-  height: 32px;
+  height: 36px;
   border-radius: 2px;
   border: 1px solid #0094fe;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #0094fe;
-  line-height: 32px;
+  line-height: 36px;
   text-align: center;
   cursor: pointer;
 }
-:deep().el-input__icon {
-  line-height: 100% !important;
-}
 
 :deep().el-dialog {
   width: 560px;

src/views/index/Login.vue

@@ -13,11 +13,7 @@
         <div class="form-container">
           <el-form :model="ruleForm" :rules="rules" ref="form">
             <el-form-item prop="phone">
-              <el-input
-                @blur="check"
-                placeholder="请输入手机号"
-                v-model="ruleForm.phone"
-              >
+              <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
                 <template v-slot:prepend>
                   <el-button icon="el-icon-mobile-phone"></el-button>
                 </template>
@@ -25,7 +21,6 @@
             </el-form-item>
             <el-form-item prop="password">
               <el-input
-                @blur="check"
                 type="password"
                 placeholder="请输入密码"
                 v-model="ruleForm.password"
@@ -61,7 +56,7 @@
 </template>
 <script>
 import { ref, reactive, toRefs } from "vue";
-import { Notification } from "element3";
+import { ElNotification } from "element-plus";
 import store from "../../store";
 import router from "../../router";
 
@@ -70,9 +65,6 @@ import api from "../../apis/fetch";
 
 export default {
   setup() {
-    function print() {
-      this.$check();
-    }
     const form = ref(null);
     const ruleForm = reactive({
       ruleForm: {
@@ -94,7 +86,7 @@ export default {
       },
     });
     function check() {
-      form.value.validate((valid) => {});
+      // form.value.validate((valid) => {});
     }
     function login() {
       form.value.validate(async (valid) => {
@@ -105,7 +97,7 @@ export default {
             password: md5(password).toUpperCase(),
           });
           if (res.data.status == 0) {
-            Notification.success({
+            ElNotification.success({
               title: "成功",
               duration: 2000,
               message: res.data.msg,
@@ -119,7 +111,7 @@ export default {
             store.commit("changeLogin", true);
             router.replace({ path: "/cargoOwnerManage/cargoOwnerList" });
           } else {
-            Notification.error({
+            ElNotification.error({
               title: "错误",
               duration: 3000,
               message: res.data.msg,
@@ -141,7 +133,6 @@ export default {
       ...toRefs(ruleForm),
       ...toRefs(rules),
       login,
-      check,
       goBeian,
     };
   },

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -16,7 +16,7 @@
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
-import { Notification, Msgbox, Message } from "element3";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
 import md5 from "md5";

src/views/shipOwnerManage/shipOwnerList.vue

@@ -62,7 +62,7 @@
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
-import { Notification, Msgbox, Message } from "element3";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
@@ -117,7 +117,7 @@ export default {
 .seach-btn {
   display: inline-block;
   width: 60px;
-  height: 32px;
+  height: 38px;
   background: #0094fe;
   border-radius: 2px;
   font-size: 14px;
@@ -125,7 +125,7 @@ export default {
   font-weight: 400;
   color: #ffffff;
   text-align: center;
-  line-height: 32px;
+  line-height: 38px;
   margin-left: 10px;
   cursor: pointer;
 }
@@ -143,9 +143,6 @@ export default {
   text-align: center;
   cursor: pointer;
 }
-:deep().el-input__icon {
-  line-height: 100% !important;
-}
 
 :deep().el-dialog {
   width: 560px;

src/views/voyage/voyageList.vue

@@ -27,7 +27,7 @@
           placeholder="请输入货主名称/联系人/联系人手机号"
           prefix-icon="el-icon-search"
           v-model="term"
-          style="height: 32px; width: 330px; line-height: 32px"
+          style="width: 330px"
         ></el-input>
         <div class="seach-btn" @click="getVoyageList()">查询</div>
       </div>
@@ -109,7 +109,7 @@
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
-import { Notification, Msgbox, Message } from "element3";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
@@ -205,10 +205,6 @@ export default {
   text-align: center;
   cursor: pointer;
 }
-:deep().el-input__icon {
-  line-height: 100% !important;
-}
-
 :deep().el-dialog {
   width: 560px;
   padding: 20px 50px;
@@ -246,10 +242,10 @@ export default {
 }
 
 .radio-btns {
-  height: 34px;
+  height: 38px;
   width: 103px;
   border: 1px solid #1486f9;
-  line-height: 34px;
+  line-height: 38px;
   text-align: center;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
@@ -259,13 +255,13 @@ export default {
 }
 
 .left-radius {
-  border-top-left-radius: 17px;
-  border-bottom-left-radius: 17px;
+  border-top-left-radius: 19px;
+  border-bottom-left-radius: 19px;
 }
 
 .right-radius {
-  border-top-right-radius: 17px;
-  border-bottom-right-radius: 17px;
+  border-top-right-radius: 19px;
+  border-bottom-right-radius: 19px;
 }
 .currentbtn {
   background: #1486f9;
@@ -275,7 +271,7 @@ export default {
 .seach-btn {
   display: inline-block;
   width: 60px;
-  height: 32px;
+  height: 38px;
   background: #0094fe;
   border-radius: 2px;
   font-size: 14px;
@@ -283,25 +279,21 @@ export default {
   font-weight: 400;
   color: #ffffff;
   text-align: center;
-  line-height: 32px;
+  line-height: 38px;
   margin-left: 10px;
   cursor: pointer;
 }
 
-:deep().el-input__icon {
-  line-height: 100% !important;
-}
-
 .voyage-add {
   width: 80px;
-  height: 32px;
+  height: 36px;
   border-radius: 2px;
   border: 1px solid #0094fe;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #0094fe;
-  line-height: 32px;
+  line-height: 36px;
   text-align: center;
   cursor: pointer;
 }