feat: 增加授权各个组件

src/components/common/common-alert-tip.vue

@@ -3,18 +3,18 @@
  * @Author       : 无尘
  * @Date         : 2020-02-13 14:02:40
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-23 11:20:07
- * @FilePath     : j:\公司\haoban-4\src\components\company\common-alert-tip.vue
+ * @LastEditTime: 2020-07-24 10:50:20
+ * @FilePath     : j:\公司\haoban-4\src\components\common\common-alert-tip.vue
  -->
 <!--
 
   <common-alert-tip :tipContent="tipContent"></common-alert-tip>
-  import commonAlertTip from '@/components/company/common-alert-tip.vue';
+  import commonAlertTip from '@/components/common/common-alert-tip.vue';
  -->
 <template>
   <div class="common-alert-tip">
-    <div class="" style="min-width:645px;">
-      <div role="alert" class="el-alert el-alert--info flex flex-align-start">
+    <div class="" :style="{ 'min-width': width}">
+      <div role="alert" class="el-alert el-alert--info flex flex-align-start" :style="{ 'width': width}">
         <i class="el-alert__icon el-icon-info font-12 color-2f54eb"></i>
         <div class="el-alert__content">
           <span class="el-alert__title color-606266 font-13">
@@ -31,6 +31,10 @@ export default {
   components: {
   },
   props: {
+    width: {
+      type: String,
+      default: '645px'
+    },
     tipContent: {
       type: String,
       default: ''

src/components/company/auth-commit-success.vue

@@ -3,21 +3,21 @@
  * @Author       : 无尘
  * @Date         : 2020-02-13 14:02:40
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-24 09:31:16
+ * @LastEditTime: 2020-07-24 10:14:39
  * @FilePath     : j:\公司\haoban-4\src\components\company\auth-commit-success.vue
  -->
 <!--
-
+  已提交审核
   <auth-commit-success></auth-commit-success>
   import authCommitSuccess from '@/components/company/auth-commit-success.vue';
  -->
 <template>
   <div class="auth-commit-success">
-    <div class="commit-success-img">
-      <img src="" alt="">
+    <div class="commit-success-img text-center">
+      <span class="iconfont iconchenggong color-49c958 font-60"></span>
     </div>
-    <div class="commit-success-text">已提交管理员审核，请通知管理员及时审核</div>
-    <div class="commit-success-btn">
+    <div class="commit-success-text text-center font-14 color-303133 m-t-12">已提交管理员审核，请通知管理员及时审核</div>
+    <div class="commit-success-btn text-center m-t-28">
       <el-button @click="changeRoute('/authMerchant')">返回授权列表</el-button><el-button @click="changeRoute('/auditLog')">进入审核列表</el-button>
     </div>
   </div>
@@ -50,5 +50,19 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-
+.auth-commit-success {
+  margin-top: 154px;
+  .color-49c958 {
+    color: #49c958;
+  }
+  .font-60 {
+    font-size: 60px;
+  }
+  .m-t-12 {
+    margin-top: 12px;
+  }
+  .m-t-28 {
+    margin-top: 28px;
+  }
+}
 </style>

src/components/company/auth-commit.vue

+<!--
+ * @Descripttion : 当前组件信息
+ * @Author       : 无尘
+ * @Date         : 2020-02-13 14:02:40
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-24 10:51:01
+ * @FilePath     : j:\公司\haoban-4\src\components\company\auth-commit-success.vue
+ -->
+<!--
+  已提交审核
+  <auth-commit @changeStep="changeStep"></auth-commit>
+  import authCommitSuccess from '@/components/company/auth-commit.vue';
+ -->
+<template>
+  <div class="auth-commit-admin">
+    <common-alert-tip :width="'328px'" :tipContent="tipContent" class="m-b-32"></common-alert-tip>
+    <el-form :model="commitForm" :rules="rules" ref="commitForm" label-width="100px" class="dialog-form">
+      <el-form-item label="申请事项" prop="commitName">
+        <el-input class="w-198" v-model="commitForm.commitName" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="申请理由" prop="commitCondition">
+        <limit-textarea :inputWidth="298" :inputValue.sync="commitForm.commitCondition" :holder="'请输入申请理由'" :getByType="'word'" :maxLength="50"></limit-textarea>
+      </el-form-item>
+      <el-form-item label="审核人" prop="">
+        <template v-for="(item, index) in commitForm.auditAdmin">
+          <span :key="index+'admin'">
+            {{item.name}}
+          </span>
+        </template>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancel">取消</el-button>
+       <el-button type="primary" @click="submitForm('commitForm')">提交审核</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import commonAlertTip from '@/components/common/common-alert-tip.vue';
+import limitTextarea from '@/components/limit-textarea.vue';
+export default {
+  name: 'auth-commit',
+  components: {
+    commonAlertTip,
+    limitTextarea
+  },
+  props: {
+
+  },
+  data() {
+    return {
+      tipContent: '提交商户绑定审核，经审核员同意后绑定成功',
+      commitForm: {
+        commitType: 1,
+        commitName: '商户授权',
+        commitCondition: '',
+        auditAdmin: []
+      },
+      rules: {
+        commitCondition: [
+          {
+            required: true,
+            message: '请输入申请理由',
+            trigger: 'blur'
+          }
+        ]
+      },
+    };
+  },
+  methods: {
+    /**
+     * 提交审核
+     */
+    submitForm(form) {
+      const that = this;
+
+      that.$refs[form].validate(valid => {
+        if (valid) {
+          that.toCommitPost();
+        } else {
+          return false;
+        }
+      });
+    },
+    toCommitPost() {
+      const that = this;
+      that.$emit('changeStep');
+    },
+    /**
+     * 路由跳转
+     */
+    changeRoute(path) {
+      this.$router.push(path);
+    },
+  },
+  watch: {
+
+  }
+};
+</script>
+<style lang="less" scoped>
+.auth-commit-admin {
+  width: 400px;
+  margin: 0 auto;
+  .color-49c958 {
+    color: #49c958;
+  }
+  .font-60 {
+    font-size: 60px;
+  }
+  .m-t-12 {
+    margin-top: 12px;
+  }
+  .m-t-28 {
+    margin-top: 28px;
+  }
+  .m-b-32 {
+    margin-bottom: 32px;
+  }
+  .w-198 {
+    width: 198px;
+  }
+}
+</style>

src/components/company/auth-step.vue

@@ -3,7 +3,7 @@
  * @Author       : 无尘
  * @Date         : 2020-02-13 16:13:59
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-22 16:20:32
+ * @LastEditTime: 2020-07-24 11:36:03
  * @FilePath     : j:\公司\haoban-4\src\components\company\auth-step.vue
  -->
 <!--
@@ -55,7 +55,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .auth-step-body {
-  width: 600px;
+  width: 400px;
   margin: 0 auto;
 }
 </style>

src/components/company/auth-tip.vue

@@ -3,7 +3,7 @@
  * @Author       : 无尘
  * @Date         : 2020-02-13 14:02:40
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-23 10:28:34
+ * @LastEditTime: 2020-07-24 11:43:44
  * @FilePath     : j:\公司\haoban-4\src\components\company\auth-tip.vue
  -->
 <!--
@@ -14,17 +14,17 @@
 <template>
   <div class="auth-tip">
     <div class="" style="width:645px;">
-      <div role="alert" class="el-alert el-alert--info flex flex-align-start">
+      <div role="alert" class="el-alert el-alert--info flex flex-align-start" style="width:645px;">
         <i class="el-alert__icon el-icon-info font-12 color-2f54eb"></i>
         <div class="el-alert__content">
           <span class="el-alert__title color-606266 font-13">
             商户授权须知：<br/>
             1. 商户授权可以是多个商户授权到1个企业下，但是需保证使用的服务号或小程序在同一开放平台<br/>
-              下，否则绑定商户的客户获取的unionid会不一致，最终会无法识别企业微信客户与会员的绑定性;
+              &nbsp;&nbsp;&nbsp;下，否则绑定商户的客户获取的unionid会不一致，最终会无法识别企业微信客户与会员的绑定性;<br/>
             2. 商户绑定后，可选择部分门店绑定，如商户有100家门店，可授权其中50家;<br/>
             3. 绑定商户结束后，导购可通过企业微信好办小程序绑定导购账号后登录;<br/>
             4. 进行门店绑定后，请勿随意操作门店绑定范围，如果门店范围取消，会导致用户关联的导购账号<br/>
-                解绑，<span class="color-f5222d">如果24小时内未恢复范围，会永久解绑。</span>
+              &nbsp;&nbsp;&nbsp;解绑，<span class="color-f5222d">如果24小时内未恢复范围，会永久解绑。</span>
           </span>
         </div>
       </div>
@@ -59,5 +59,10 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-
+  .el-alert__title {
+    line-height: 23px;
+  }
+  .color-f5222d {
+    color: #f5222d;
+  }
 </style>

src/views/business/newAuthMerchant.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-03-20 14:36:37
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-23 10:27:36
+ * @LastEditTime: 2020-07-24 11:39:03
  -->
 <template>
   <div class="my-customer-wrap common-set-wrap">
@@ -14,11 +14,58 @@
         <div class="apps-content flex" style="min-height: calc(100vh - 104px);">
           <div class="apps-content-right">
             <div class="new-auth-body">
-              <div>
+              <div v-if="activeStep != 2">
                 <auth-step :activeStep="activeStep"></auth-step>
               </div>
-              <div class="auth-tip-body">
-                <auth-tip></auth-tip>
+              <div v-if="activeStep == 0" class="auth-tip-body">
+                <auth-tip class="m-t-30"></auth-tip>
+                <el-form :model="authForm" :rules="rules" ref="authForm" label-width="100px" class="dialog-form m-t-20">
+                  <el-form-item label="选择商户" prop="enterpriseId">
+                    <span class="enterprise-version">GIC4.0</span><el-select v-model="authForm.enterpriseId" placeholder="" @change="getAdmin" class="w-227">
+                      <el-option v-for="item in brandOptions" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="门店绑定" prop="storeBind">
+                    <div class="el-select store-item-content">
+                      <div class="el-select__tags" style="max-width: 348px;">
+                        <span style="display:block; overflow-x: auto;">
+                          <template v-for="(item, index) in authForm.storeBind">
+                            <span class="el-tag el-tag--info el-tag--small" :key="index+'bind'">
+                              <span class="el-select__tags-text">{{ item.storeName }}</span>
+                              <i class="el-tag__close el-icon-close" @click.stop="delStore(index, authForm.storeBind)"></i>
+                            </span>
+                          </template>
+                        </span>
+                      </div>
+                    </div>
+                  </el-form-item>
+                  <el-form-item label="门店共享" prop="storeShare">
+                    <div class="el-select store-item-content">
+                      <div class="el-select__tags" style="max-width: 348px;">
+                        <span style="display:block; overflow-x: auto;">
+                          <template v-for="(item, index) in authForm.storeShare">
+                            <span class="el-tag el-tag--info el-tag--small" :key="index+'bind'">
+                              <span class="el-select__tags-text">{{ item.storeName }}</span>
+                              <i class="el-tag__close el-icon-close" @click.stop="delStore(index, authForm.storeShare)"></i>
+                            </span>
+                          </template>
+                        </span>
+                      </div>
+                    </div>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button @click="cancel">取消</el-button>
+                  <el-button type="primary" @click="submitForm('authForm')">下一步</el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <!-- 审核员授权 -->
+              <div v-if="activeStep == 1" class="commit-success-body">
+                <auth-commit @changeStep="changeStep"></auth-commit>
+              </div>
+              <!-- 已提交审核 -->
+              <div v-if="activeStep==2" class="commit-success-body">
+                <auth-commit-success></auth-commit-success>
               </div>
             </div>
           </div>
@@ -32,6 +79,8 @@
 import navCrumb from '@/components/nav/nav.vue';
 import authStep from '@/components/company/auth-step.vue';
 import authTip from '@/components/company/auth-tip.vue';
+import authCommitSuccess from '@/components/company/auth-commit-success.vue';
+import authCommit from '@/components/company/auth-commit.vue';
 import { getRequest, postRequest } from '@/api/api';
 import errMsg from '@/common/js/error';
 // import { _debounce } from '@/common/js/public';
@@ -58,18 +107,61 @@ export default {
           path: ''
         }
       ],
-      activeStep: '1',
+      activeStep: '0',
       brandOptions: [], // 商户列表
-      // 分页参数
-      currentPage: 1,
-      pageSize: 20,
-      total: 0,
-      tableData: [],
+      authForm: {
+        enterpriseId: '',
+        storeBind: [],
+        storeShare: []
+      },
+      rules: {
+        enterpriseId: [
+          {
+            required: true,
+            message: '请选择商户',
+            trigger: 'change'
+          }
+        ]
+      },
+      adminList: [] // 审核管理员
     };
   },
   computed: {},
   methods: {
     /**
+     * 下一步
+     */
+    submitForm(form) {
+      const that = this;
+      that.$refs[form].validate(valid => {
+        if (valid) {
+          that.activeStep = 1;
+        } else {
+          return false;
+        }
+      });
+    },
+    /**
+     * 删除门店
+     */
+    delStore(index, arr) {
+      arr.splice(index, 1);
+    },
+    /**
+     * 修改商户，获取审核管理员
+     */
+    getAdmin() {
+      const that = this;
+      that.adminList = [];
+    },
+    /**
+     * 改变步骤
+     */
+    changeStep() {
+      const that = this;
+      that.activeStep = 2;
+    },
+    /**
      * 路由跳转
      */
     changeRoute(path) {
@@ -133,7 +225,9 @@ export default {
   components: {
     navCrumb,
     authStep,
-    authTip
+    authTip,
+    authCommitSuccess,
+    authCommit
   }
 };
 </script>
@@ -172,10 +266,38 @@ export default {
 
 .my-customer-wrap {
   height: 100%;
+  .w-227 {
+    width: 227px;
+  }
   .auth-tip-body {
     width: 645px;
     margin: 0 auto;
   }
+  .enterprise-version {
+    display: inline-block;
+    vertical-align: top;
+    width: 76px;
+    height: 32px;
+    margin-right: -1px;
+    background: rgba(245,247,250,1);
+    border-radius: 2px 0px 0px 2px;
+    border: 1px solid rgba(196,198,207,1);
+    border-right: 0px;
+    font-size: 14px;
+    color: #c0c4cc;
+    text-align: center;
+  }
+  .store-item-content {
+    position: relative;
+    width: 302px;
+    height: 32px;
+    overflow: hidden;
+    white-space: nowrap;
+    border-radius: 2px;
+    border: 1px solid #c4c6cf;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
 }
 .right-content {
   /*width: 100%;*/