add: 增加更换管理员

src/views/setting/companyAddress.vue

@@ -31,6 +31,13 @@ import { getRequest, postRequest, postJson, postForm } from '@/api/api';
 export default {
   name: "companyAddress",
   data() {
+    const nameValid = (rule, value, callback) => {
+      if (!!this.ruleForm.switch && value.replace(/\s/g) == '') {
+        callback(new Error('请输入地址'));
+      } else {
+         callback();
+      }
+    };
     return {
       // 面包屑参数
       navpath: [
@@ -57,7 +64,11 @@ export default {
         switch: false,
         name: ''
       },
-      rules: {}
+      rules: {
+        name: [
+          {validator: nameValid,  trigger: 'blur' } //required: true,
+        ],
+      }
 
     }
   },
@@ -68,16 +79,17 @@ export default {
     /**
      * 保存
      */
-    submitForm(formName) {
+    submitForm: _debounce(function(formName) {
       const that = this;
       that.$refs[formName].validate((valid) => {
+        console.log(valid)
         if (valid) {
 
         } else {
           return false;
         }
       });
-    },
+    },500),
 
     /**
      * 保存---api

src/views/setting/replaceAdmin.vue

@@ -3,18 +3,24 @@
     <nav-crumb :navpath="navpath"></nav-crumb>
     <div class="right-content">
       <div class="right-box">
-        <el-steps :active="active" finish-status="success">
-          <el-step title="步骤 1"></el-step>
-          <el-step title="步骤 2"></el-step>
-          <el-step title="步骤 3"></el-step>
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step title="获取验证码"></el-step>
+          <el-step title="绑定新的超级管理员"></el-step>
+          <el-step title="完成"></el-step>
         </el-steps>
         <div class="w-514 replaceAdmin-wrap-form m-t-45">
-          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form
+            v-if="active == 0"
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="110px"
+            class="demo-ruleForm">
             <el-form-item label="当前绑定账号" prop="name" class="">
               <el-input v-model="ruleForm.name" disabled placeholder="" class="w-280"></el-input>
             </el-form-item>
             <el-form-item label="手机号" prop="phone" class="">
-              <el-input v-model="ruleForm.phone" disabled placeholder="" class="w-280"></el-input><el-button class="m-l-20 v-align-b" type="primary" @click="sendCode(ruleForm.phone)">获取验证码</el-button>
+              <el-input v-model="ruleForm.phone" disabled placeholder="" class="w-280"></el-input><el-button class="m-l-20 v-align-b" type="primary" :disabled="disableBtn" @click="sendCode(ruleForm.phone)">获取验证码</el-button>
             </el-form-item>
             <el-form-item label="验证码" prop="code" class="">
               <el-input v-model="ruleForm.code" placeholder="请输入验证码" class="w-280"></el-input>
@@ -23,6 +29,27 @@
               <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
             </el-form-item>
           </el-form>
+          <!-- 新绑定 -->
+          <el-form
+            v-if="active == 1"
+            :model="newRuleForm"
+            :rules="newRules"
+            ref="newRuleForm"
+            label-width="140px"
+            class="demo-ruleForm">
+            <el-form-item label="新绑定超级管理员" prop="name" class="">
+              <el-input v-model="newRuleForm.name" placeholder="请输入手机号/姓名" class="w-280"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" :loading="newFormLoad" @click="newSubmitForm('newRuleForm')">提交</el-button>
+              <el-button type="primary" @click="submitFormBack">上一步</el-button>
+            </el-form-item>
+          </el-form>
+          <!-- 提交成功 -->
+          <div class="replaceAdmin-wrap-success" v-if="active == 2">
+            <div class="icon-outer"><i class="el-icon-success"></i></div>
+            <p>操作成功</p>
+          </div>
         </div>
       </div>
     </div>
@@ -30,6 +57,10 @@
 </template>
 <script>
 import navCrumb from '@/components/nav/nav.vue';
+import strLength from '@/common/js/strlen';
+import showMsg from '@/common/js/showmsg';
+import errMsg  from '@/common/js/error';
+import { _debounce } from "@/common/js/public";
 export default {
   name: "replaceAdmin",
   data() {
@@ -56,11 +87,34 @@ export default {
       active: 0,
 
       ruleForm: {
-        name: '',
+        name: '11',
         phone: 1334444444,
         code: ''
       },
-      rules: {}
+      rules: {
+        name: [
+          { required: true, message: '请输入当前绑定账号', trigger: 'blur' },
+        ],
+        phone: [
+          { required: true, message: '请输入手机号', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入验证码', trigger: 'blur' }
+        ],
+      },
+
+      disableBtn: false, // 发验证码
+
+      // 新绑定
+      newFormLoad: false,
+      newRuleForm: {
+        name: '',
+      },
+      newRules: {
+        name: [
+          { required: true, message: '请输入手机号/姓名', trigger: 'blur' },
+        ]
+      }
     }
   },
   computed: {
@@ -68,25 +122,59 @@ export default {
   },
   methods: {
     /**
-     * 保存
+     * 发验证码
      */
-    sendCode(phone) {
+    sendCode: _debounce(function(phone) {
       const that = this;
+      that.disableBtn = true;
+
+    },500),
+
+    /**
+     * 发验证码---api
+     */
+    postSendCode() {
+      const that = this
 
     },
+
     /**
      * 保存
      */
-    submitForm(formName) {
+    submitForm: _debounce(function(formName) {
       const that = this;
       that.$refs[formName].validate((valid) => {
         if (valid) {
-          if (that.active++ > 2) that.active = 0;
+          if (that.active++ > 2){that.active == 2};
         } else {
           return false;
         }
       });
-    },
+    },500),
+
+    /**
+     * 新绑定---提交
+     */
+    newSubmitForm: _debounce(function(formName) {
+      const that = this;
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          that.active++
+        } else {
+          return false;
+        }
+      });
+    },500),
+
+    /**
+     * 新绑定---上一步
+     */
+    submitFormBack() {
+      const that = this;
+
+      !!that.active? that.active--: '';
+    }
+
   },
   mounted() {
 
@@ -134,6 +222,20 @@ export default {
     .replaceAdmin-wrap-form {
       margin: 45px auto 0;
     }
+
+    .replaceAdmin-wrap-success {
+      text-align: center;
+      i {
+        font-size: 50px;
+        color: #67c23a;
+      }
+
+      p {
+        margin-top: 24px;
+        font-size: 20px;
+        color: #303133;
+      }
+    }
   }
 }
 </style>