modify

Elements-SY
Commit 358a2ce37c59dceaf4396bf127ce8534ca2ea3b1 358a2ce3 1 parent 0a12bbc0
Showing 6 changed files with 128 additions and 61 deletions
src/assets/styles/btn.scss
src/assets/styles/index.scss
src/views/allocationConfig/et86/edit/index.vue
src/views/allocationConfig/et86/edit/mixins/index.js
src/views/systemConfig/roleConfig/index.vue
src/views/systemConfig/userConfig/index.vue
--- a/src/assets/styles/btn.scss
View file @358a2ce
+++ b/src/assets/styles/btn.scss
View file @358a2ce
@@ -12,12 +12,6 @@
     }
   }
 }
-@mixin mariginBottom($pixe: 4px) {
-  margin-bottom: $pixe;
-}
-.btn-mg {
-   @include mariginBottom()
-}
 .blue-btn {
   @include colorBtn($blue)
 }
--- a/src/assets/styles/index.scss
View file @358a2ce
+++ b/src/assets/styles/index.scss
View file @358a2ce
-@import './variables.scss';
+@import "./variables.scss";
-@import './mixin.scss';
+@import "./mixin.scss";
-@import './transition.scss';
+@import "./transition.scss";
-@import './element-ui.scss';
+@import "./element-ui.scss";
-@import './sidebar.scss';
+@import "./sidebar.scss";
-@import './btn.scss';
+@import "./btn.scss";
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
 }
 label {
@@ -108,7 +109,8 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -138,7 +140,7 @@ aside {
 }
 .text-center {
-  text-align: center
+  text-align: center;
 }
 .sub-navbar {
@@ -149,7 +151,13 @@ aside {
   text-align: right;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(33, 120, 241, 1) 100%,
+    rgba(33, 120, 241, 1) 100%
+  );
   .subtitle {
     font-size: 20px;
@@ -216,7 +224,7 @@ body {
   }
   &::-webkit-scrollbar-track-piece {
-    background: #F2F6FC;
+    background: #f2f6fc;
   }
 }
@@ -239,7 +247,7 @@ body {
 .el-table__fixed,
 .el-table__fixed-right {
   height: calc(100% - 7px) !important;
-  box-shadow: -5px -2px 10px rgba(0, 0, 0, .12) !important;
+  box-shadow: -5px -2px 10px rgba(0, 0, 0, 0.12) !important;
   .el-table__fixed-body-wrapper {
     height: calc(100% - 36px) !important;
@@ -247,7 +255,7 @@ body {
 }
 // 当表格没有滚动条时
-.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
+.el-table__body-wrapper.is-scrolling-none ~ .el-table__fixed-right {
   height: 100% !important;
   bottom: 0 !important;
   box-shadow: none !important;
@@ -307,4 +315,7 @@ body {
 .el-select-dropdown__wrap {
   max-height: 350px !important;
-}
\ No newline at end of file
+}
+.btn-mb-4 {
+  margin-bottom: 4px;
+}
--- a/src/views/allocationConfig/et86/edit/index.vue
View file @358a2ce
+++ b/src/views/allocationConfig/et86/edit/index.vue
View file @358a2ce
 <template>
-  <div class="form-header demo-edit">
+  <div class="form-header">
     <el-row style="padding: 20px 0">
       <el-col>
         <el-divider content-position="left">ET86配舱航班顺位</el-divider>
@@ -36,6 +36,8 @@
                   @focus="inputFocus(scope)"
                   @input="inputEvent"
                   placeholder="请输入航班号"
+                  class="demo-edit"
+                  ref="demo"
                 />
               </template>
             </el-table-column>
@@ -416,11 +418,18 @@ export default {
     this.getEdit();
     this.PostFindDestinationFltRuleByFlightNo();
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      let el = document.querySelector(".demo-edit");
+      console.log(el);
+      console.log(this.$refs.demo);
+    });
+  },
   directives: {
     "input-filter": {
       bind: function (el, binding) {
         el.handler = function (event) {
+          console.log(el);
           let regExp = /[^0-9a-zA-Z_]/g;
           let newValue = event.target.value.replace(regExp, "");
           if (newValue !== event.target.value) {
@@ -602,6 +611,7 @@ export default {
     // 表单提交
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
+        console.log(valid);
         if (valid) {
         } else {
           console.log("error submit!!");
--- a/src/views/allocationConfig/et86/edit/mixins/index.js
View file @358a2ce
+++ b/src/views/allocationConfig/et86/edit/mixins/index.js
View file @358a2ce
@@ -135,36 +135,81 @@ export default {
     },
     // 最少件数
     validateMinPieces(name) {
+      // 校验输入的规则（只能输入正整数）
       if (/^\d+$/.test(Number(this.queryForm[name]))) {
+        /*
+         【表单校验分析步骤】如下：
+         1、校验合规数字（只能输入正整数）；
+         2、校验一种所有的表单域都为空的情况下 & 所有表单域都不为空的情况下；
+         3、所有表单域都为空的情况下最好办，直接返回false；
+         4、所有表单都不为空的情况下：这种情况就是做自定义校验；
+         5、自定义校验符合规则的返回true否则返回false；
+         提示：在做校验数字规则一定要注意无理数(E & e)；
+
+
+
+        :rule="{
+          el: '.el' || document.querySelector(el), // 获取元素
+          rule: [], // 规则
+          value: scope.row, // 校验的值
+          message: '', // 提示语
+          style: {}, // 设置提示语文字
+          hoverMessage: false, // 是否通过鼠标hover时提示Error
+          required: true,
+          trigger: 'blur',
+        }"
+        通常情况下表单校验都是单列校验，也就是说每个表单域的校验都是独立的而不受其他表单域的校验的牵涉；
+        但是有些情况下，我们的表单校验可能有多列并行校验，比如说重量区间，最大重量和最小重量两个表单域，
+        最大重量不能小于最小重量。
+
+        提交表单的时候获取布尔值或者每一个表单校验的
+        单列校验或者多列(并行)校验，
+
+         使用自定义指令做表单校验：
+         当校验不合规则时，一种是插入节点给文本提示的同时让input文本框变成红色的；
+         一种是让文本框变成红色的同时鼠标hover的时候弹出悬浮框提示；
+         当提交表单的时候不合规则的表单域全部红色描边，并且报错文本提示语
+
+         提交表单的时候
+
+        */
+
         if (this.queryForm[name] && this.queryForm.maxNumOfPieces) {
+          // 左区间大于右区间
           if (
             Number(this.queryForm[name]) > Number(this.queryForm.maxNumOfPieces)
           ) {
-            // 最少件数1~100，并且最少件数不得大于最多件数
             this.$refs.minNumOfPieces.innerHTML = "";
-            this.$refs.minNumOfPieces.innerHTML =
+            this.$refs.minNumOfPieces.innerHTML = "最少件数不得大于最多件数";
-              "最少件数1~100，并且最少件数不得大于最多件数";
+          } else if (
-            return false;
+            Number(this.queryForm[name]) == null &&
-          } else {
+            Number(this.queryForm.maxNumOfPieces) == null
+          ) {
             this.$refs.minNumOfPieces.innerHTML = "";
-          }
+            this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为空";
-          if (Number(this.queryForm[name]) > 100) {
+          } else if (
+            Number(this.queryForm[name]) == 0 &&
+            Number(this.queryForm.maxNumOfPieces) == 0
+          ) {
             this.$refs.minNumOfPieces.innerHTML = "";
-            this.$refs.minNumOfPieces.innerHTML = "件数范围1~100";
+            this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为0";
-            return false;
+          } else {
+            this.$refs.minNumOfPieces.innerHTML = "";
+            return true;
           }
-        } else if (this.queryForm[name] !== "" && Number(this.queryForm[name]) < 1) {
+        } // 不能为空，不能等于0，不能大于指定的数
+        else if (Number(this.queryForm[name]) == null) {
           this.$refs.minNumOfPieces.innerHTML = "";
-          this.$refs.minNumOfPieces.innerHTML =
+          this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为空";
-            "最少件数1~100，并且最少件数不得大于最多件数";
+        } else if (Number(this.queryForm[name]) == 0) {
-          return false;
+          this.$refs.minNumOfPieces.innerHTML = "";
+          this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为0";
         } else if (Number(this.queryForm[name]) > 100) {
           this.$refs.minNumOfPieces.innerHTML = "";
-          this.$refs.minNumOfPieces.innerHTML =
+          this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能大于100";
-            "最少件数1~100，并且最少件数不得大于最多件数";
-          return false;
         } else {
           this.$refs.minNumOfPieces.innerHTML = "";
+          return true;
         }
       } else {
         this.$refs.minNumOfPieces.innerHTML = "";
@@ -174,36 +219,43 @@ export default {
     },
     // 最多件数
     validateMaxPieces(name) {
+      // 校验输入的规则（只能输入正整数）
       if (/^\d+$/.test(Number(this.queryForm[name]))) {
         if (this.queryForm[name] && this.queryForm.maxNumOfPieces) {
           if (
             Number(this.queryForm[name]) < Number(this.queryForm.minNumOfPieces)
           ) {
-            // 最多件数1~100，并且最多件数不得小于最小件数
             this.$refs.minNumOfPieces.innerHTML = "";
-            this.$refs.minNumOfPieces.innerHTML =
+            this.$refs.minNumOfPieces.innerHTML = "最大件数不得小于最少件数";
-              "最多件数1~100，并且最多件数不得小于最小件数";
+          } else if (
-            return false;
+            Number(this.queryForm[name]) == null &&
-          } else {
+            Number(this.queryForm.minNumOfPieces) == null
+          ) {
             this.$refs.minNumOfPieces.innerHTML = "";
-          }
+            this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为空";
-          if (Number(this.queryForm[name]) > 100) {
+          } else if (
+            Number(this.queryForm[name]) == 0 &&
+            Number(this.queryForm.minNumOfPieces) == 0
+          ) {
             this.$refs.minNumOfPieces.innerHTML = "";
-            this.$refs.minNumOfPieces.innerHTML = "件数范围1~100";
+            this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为0";
             return false;
+          } else {
+            this.$refs.minNumOfPieces.innerHTML = "";
+            return true;
           }
-        } else if (this.queryForm[name] !== "" && Number(this.queryForm[name]) < 1) {
+        } else if (Number(this.queryForm[name]) == null) {
           this.$refs.minNumOfPieces.innerHTML = "";
-          this.$refs.minNumOfPieces.innerHTML =
+          this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为空";
-            "最多件数1~100，并且最多件数不得小于最小件数";
+        } else if (Number(this.queryForm[name]) == 0) {
-          return false;
+          this.$refs.minNumOfPieces.innerHTML = "";
+          this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能为0";
         } else if (Number(this.queryForm[name]) > 100) {
           this.$refs.minNumOfPieces.innerHTML = "";
-          this.$refs.minNumOfPieces.innerHTML =
+          this.$refs.minNumOfPieces.innerHTML = "最少件数和最多件数不能大于100";
-            "最多件数1~100，并且最多件数不得小于最小件数";
-          return false;
         } else {
           this.$refs.minNumOfPieces.innerHTML = "";
+          return true;
         }
       } else {
         this.$refs.minNumOfPieces.innerHTML = "";
--- a/src/views/systemConfig/roleConfig/index.vue
View file @358a2ce
+++ b/src/views/systemConfig/roleConfig/index.vue
View file @358a2ce
@@ -36,13 +36,13 @@
       <template slot="optionColumn">
         <el-table-column header-align="center" align="center" label="操作" min-width="210px">
           <template slot-scope="scope">
-            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)" class="btn-mg">查看</el-button>
+            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)" class="btn-mb-4">查看</el-button>
-            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:role:update']" class="btn-mg">修改
+            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:role:update']" class="btn-mb-4">修改
             </el-button>
             <el-button :type="scope.row.valid == 1 ? 'warning' : 'primary'" size="mini"
-              v-hasPermi="['system:role:openClose']" @click="roleStatus(scope)" class="btn-mg">{{ scope.row.valid == 1 ? "停用" : "启用" }}
+              v-hasPermi="['system:role:openClose']" @click="roleStatus(scope)" class="btn-mb-4">{{ scope.row.valid == 1 ? "停用" : "启用" }}
             </el-button>
-            <el-button type="danger" size="mini" @click="removeRole(scope)" v-hasPermi="['system:role:delete']" class="btn-mg">删除角色
+            <el-button type="danger" size="mini" @click="removeRole(scope)" v-hasPermi="['system:role:delete']" class="btn-mb-4">删除角色
             </el-button>
           </template>
         </el-table-column>
--- a/src/views/systemConfig/userConfig/index.vue
View file @358a2ce
+++ b/src/views/systemConfig/userConfig/index.vue
View file @358a2ce
@@ -34,17 +34,17 @@
       <template slot="optionColumn">
         <el-table-column header-align="center" align="center" min-width="210px" label="操作">
           <template slot-scope="scope">
-            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)" class="btn-mg">查看</el-button>
+            <el-button type="primary" size="mini" @click="buttonClick(scope, 0)" class="btn-mb-4">查看</el-button>
-            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:user:update']" class="btn-mg">修改
+            <el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:user:update']" class="btn-mb-4">修改
             </el-button>
             <!-- <el-button type="primary" size="mini" @click="passwordShow = !passwordShow"
               >修改密码</el-button
             > -->
             <el-button :type="scope.row.isValid == 1 ? 'warning' : 'primary'" size="mini"
-              v-hasPermi="['system:user:openClose']" @click="userStatus(scope)" class="btn-mg">{{
+              v-hasPermi="['system:user:openClose']" @click="userStatus(scope)" class="btn-mb-4">{{
                 scope.row.isValid == 1 ? "停用" : "启用"
               }}</el-button>
-            <el-button type="danger" size="mini" @click="removeUser(scope)" v-hasPermi="['system:user:delete']" class="btn-mg">删除用户
+            <el-button type="danger" size="mini" @click="removeUser(scope)" v-hasPermi="['system:user:delete']" class="btn-mb-4">删除用户
             </el-button>
           </template>
         </el-table-column>