整理系统菜单及权限

src/views/passport/login/index.vue

@@ -5,59 +5,53 @@
       ['', 'login-form-right', 'login-form-left'][direction]
     ]"
     :style="{
-      backgroundImage: 'url(' + loginImg + ')'
+      backgroundImage: 'url(' + param.login_bg_img + ')'
     }"
   >
     <div class="logo-login" v-if="config.shortName">
       <img :src="config.companyLogo" class="logo" />
       <h4>{{ config.shortName }}</h4>
     </div>
-    <a-form class="login-form ele-bg-white">
+    <div class="company-name">{{ param.login_name }}</div>
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      class="login-form ele-bg-white"
+    >
       <a-space class="login-title">
         <h4
           class="title-btn"
           :class="loginType === 'account' ? 'active' : ''"
           @click="onLoginType('account')"
-          >账号登录</h4
+          >密码登录</h4
         >
         <a-divider type="vertical" style="height: 20px" />
         <h4
           class="title-btn"
-          :class="loginType === 'scan' ? 'active' : ''"
-          @click="onLoginType('scan')"
+          :class="loginType === 'sms' ? 'active' : ''"
+          @click="onLoginType('sms')"
           >短信登录</h4
         >
       </a-space>
       <template v-if="loginType === 'account'">
-        <a-form-item v-bind="validateInfos.tenantId" v-if="showTenantId">
-          <a-input
-            allow-clear
-            size="large"
-            v-model:value="form.tenantId"
-            :placeholder="`租户ID`"
-          >
-            <template #prefix>
-              <BankOutlined />
-            </template>
-          </a-input>
-        </a-form-item>
-        <a-form-item v-bind="validateInfos.username">
+        <a-form-item name="username">
           <a-input
             allow-clear
             size="large"
             v-model:value="form.username"
-            :placeholder="`登录账号 | 手机号码`"
+            :placeholder="`请输入登录账号`"
           >
             <template #prefix>
-              <user-outlined />
+              <UserOutlined />
             </template>
           </a-input>
         </a-form-item>
-        <a-form-item v-bind="validateInfos.password">
+        <a-form-item name="password">
           <a-input-password
             size="large"
             v-model:value="form.password"
-            placeholder="登录密码"
+            placeholder="请输入登录密码"
             @pressEnter="submit"
           >
             <template #prefix>
@@ -65,7 +59,7 @@
             </template>
           </a-input-password>
         </a-form-item>
-        <a-form-item v-bind="validateInfos.code">
+        <a-form-item name="code">
           <div class="login-input-group">
             <a-input
               allow-clear
@@ -102,33 +96,27 @@
           </a-button>
         </a-form-item>
       </template>
-      <template v-if="loginType === 'scan'">
-        <a-form-item v-bind="validateInfos.phone">
+      <template v-if="loginType === 'sms'">
+        <a-form-item name="phone">
           <a-input
             allow-clear
             size="large"
             maxlength="11"
             v-model:value="form.phone"
-            :placeholder="`手机号码`"
+            :placeholder="`请输入手机号码`"
           >
-            <template #prefix>
-              <user-outlined />
-            </template>
+            <template #addonBefore> +86 </template>
           </a-input>
         </a-form-item>
-        <a-form-item v-bind="validateInfos.code">
+        <a-form-item name="smsCode">
           <div class="login-input-group">
             <a-input
               placeholder="请输入验证码"
-              v-model:value="form.code"
+              v-model:value="form.smsCode"
+              size="large"
               :maxlength="6"
               allow-clear
-              size="large"
-            >
-              <template #prefix>
-                <safety-certificate-outlined />
-              </template>
-            </a-input>
+            />
             <a-button
               class="login-captcha"
               :disabled="!!countdownTime"
@@ -139,18 +127,13 @@
             </a-button>
           </div>
         </a-form-item>
-        <a-form-item>
-          <a-checkbox v-model:checked="form.remember">
-            {{ t('login.remember') }}
-          </a-checkbox>
-        </a-form-item>
         <a-form-item>
           <a-button
             block
             size="large"
             type="primary"
             :loading="loading"
-            @click="submit"
+            @click="onLoginBySms"
           >
             {{ loading ? t('login.loading') : t('login.login') }}
           </a-button>
@@ -164,51 +147,52 @@
         Rights Reserved.
       </p>
     </div>
-  </div>
-  <!-- 编辑弹窗 -->
-  <a-modal
-    :width="340"
-    :footer="null"
-    title="发送验证码"
-    v-model:visible="visible"
-  >
-    <div class="login-input-group" style="margin-bottom: 16px">
-      <a-input
-        v-model:value="imgCode"
-        placeholder="请输入图形验证码"
-        allow-clear
-        size="large"
-      />
-      <a-button class="login-captcha">
-        <img alt="" :src="captcha" @click="changeCaptcha" />
-      </a-button>
-    </div>
-    <a-button
-      block
-      size="large"
-      type="primary"
-      :loading="codeLoading"
-      @click="sendCode"
+    <!-- 编辑弹窗 -->
+    <a-modal
+      :width="340"
+      :footer="null"
+      title="发送验证码"
+      v-model:visible="visible"
     >
-      立即发送
-    </a-button>
-  </a-modal>
+      <div class="login-input-group" style="margin-bottom: 16px">
+        <a-input
+          v-model:value="imgCode"
+          :maxlength="5"
+          size="large"
+          placeholder="请输入图形验证码"
+          allow-clear
+          @pressEnter="sendCode"
+        />
+        <a-button class="login-captcha">
+          <img alt="" :src="captcha" @click="changeCaptcha" />
+        </a-button>
+      </div>
+      <a-button
+        block
+        size="large"
+        type="primary"
+        :loading="codeLoading"
+        @click="sendCode"
+      >
+        立即发送
+      </a-button>
+    </a-modal>
+  </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, computed, unref, watch } from 'vue';
+  import { ref, reactive, unref, watch } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRouter } from 'vue-router';
   import { getTenantId } from '@/utils/domain';
   import { Form, message } from 'ant-design-vue';
   import {
-    UserOutlined,
     LockOutlined,
-    SafetyCertificateOutlined,
-    BankOutlined
+    UserOutlined,
+    SafetyCertificateOutlined
   } from '@ant-design/icons-vue';
   import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
-  import { login, getCaptcha, registerUser } from '@/api/passport/login';
+  import { login, loginBySms, getCaptcha } from '@/api/passport/login';
 
   import { User } from '@/api/system/user/model';
   import { THEME_STORE_NAME } from '@/config/setting';
@@ -216,8 +200,18 @@
   import { useTenantStore } from '@/store/modules/tenant';
   import { Company } from '@/api/system/company/model';
   import useFormData from '@/utils/use-form-data';
-  import { listWebsiteField } from '@/api/cms/website/field';
-  import { checkExistence } from '@/api/system/user';
+  // import { openUrl } from '@/utils/common';
+  // import { getDomain } from '@/utils/domain';
+  // import { getMerchantAccountByPhone } from '@/api/shop/merchantAccount';
+  // import {
+  //   addBatchChatMessage,
+  //   addChatMessage,
+  //   updateChatMessage
+  // } from '@/api/system/chatMessage';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { listWebsiteField } from '@/api/system/website/field';
+  import { WebsiteParam } from '@/api/cms/website/field/model';
+  import { phoneReg } from 'ele-admin-pro';
 
   const useForm = Form.useForm;
   const { currentRoute } = useRouter();
@@ -231,13 +225,16 @@
   // 是否显示tenantId填写输入框
   const showTenantId = ref(true);
   const loginType = ref('account');
+  const param = ref<WebsiteParam>({});
   // 配置信息
   const { form } = useFormData<User>({
     username: '',
+    phone: '',
     password: '',
     code: '',
+    smsCode: '',
     remember: true,
-    tenantId: undefined
+    isAdmin: true
   });
   // 表单数据
   const config = reactive<Company>({
@@ -246,7 +243,6 @@
     companyLogo: '',
     tenantId: undefined
   });
-  const loginImg = ref('');
   // 验证码 base64 数据
   const captcha = ref('');
   // 验证码内容, 实际项目去掉
@@ -262,48 +258,48 @@
   // 验证码倒计时定时器
   let countdownTimer: number | null = null;
 
-  // 表单验证规则
-  const rules = computed(() => {
-    return {
-      username: [
-        {
-          required: true,
-          message: t('login.username'),
-          type: 'string'
-        }
-      ],
-      phone: [
-        {
-          required: true,
-          message: '请输入手机号码',
-          type: 'string'
-        }
-      ],
-      password: [
-        {
-          required: true,
-          message: t('login.password'),
-          type: 'string'
-        }
-      ],
-      code: [
-        {
-          required: true,
-          message: t('login.code'),
-          type: 'string'
-        }
-      ]
-    };
-  });
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
 
-  listWebsiteField({ name: 'LOGIN_IMG' }).then((list) => {
-    // if (list.length == 0) {
-    //   loginImg.value = String('@/assets/bg-2.jpeg');
-    //   return;
-    // }
-    list.map((d) => {
-      loginImg.value = String(d.value);
-    });
+  // 表单验证规则
+  const rules = reactive({
+    username: [
+      {
+        required: true,
+        message: t('login.username'),
+        type: 'string'
+      }
+    ],
+    phone: [
+      {
+        pattern: phoneReg,
+        required: true,
+        type: 'string',
+        message: '手机号格式不正确',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        message: t('login.password'),
+        type: 'string'
+      }
+    ],
+    code: [
+      {
+        required: true,
+        message: t('login.code'),
+        type: 'string'
+      }
+    ],
+    smsCode: [
+      {
+        required: true,
+        message: t('login.code'),
+        type: 'string'
+      }
+    ]
   });
 
   /* 显示发送短信验证码弹窗 */
@@ -312,17 +308,9 @@
       message.error('请输入手机号码');
       return;
     }
-    checkExistence('phone', form.phone)
-      .then(() => {
-        imgCode.value = '';
-        changeCaptcha();
-        visible.value = true;
-        return;
-      })
-      .catch(() => {
-        message.error('该手机号码不存在');
-        return;
-      });
+    imgCode.value = '';
+    changeCaptcha();
+    visible.value = true;
   };
 
   /* 发送短信验证码 */
@@ -336,28 +324,26 @@
       return;
     }
     codeLoading.value = true;
-    sendSmsCaptcha({ phone: form.phone, key: imgCode.value })
-      .then(() => {
-        message.success('短信验证码发送成功, 请注意查收!');
-        visible.value = false;
-        codeLoading.value = false;
-        countdownTime.value = 60;
-        // 开始对按钮进行倒计时
-        countdownTimer = window.setInterval(() => {
-          if (countdownTime.value <= 1) {
-            countdownTimer && clearInterval(countdownTimer);
-            countdownTimer = null;
-          }
-          countdownTime.value--;
-        }, 1000);
-      })
-      .catch((e) => {
-        codeLoading.value = false;
-        message.error(e.message);
-      });
+    sendSmsCaptcha({ phone: form.phone }).then((res) => {
+      console.log(res);
+      message.success('短信验证码发送成功, 请注意查收!');
+      visible.value = false;
+      codeLoading.value = false;
+      countdownTime.value = 30;
+      // 开始对按钮进行倒计时
+      countdownTimer = window.setInterval(() => {
+        if (countdownTime.value <= 1) {
+          countdownTimer && clearInterval(countdownTimer);
+          countdownTimer = null;
+        }
+        countdownTime.value--;
+      }, 1000);
+    });
   };
 
-  const { clearValidate, validate, validateInfos } = useForm(form, rules);
+  // const { clearValidate, validate, validateInfos } = useForm(form, rules);
+
+  const { resetFields } = useForm(form, rules);
 
   const goHome = () => {
     const { query } = unref(currentRoute);
@@ -365,45 +351,83 @@
     localStorage.removeItem(THEME_STORE_NAME);
   };
 
-  /* 提交 */
-  const submit = () => {
-    validate().then(() => {
-      if (form.code?.toLowerCase() !== text.value) {
-        message.error('验证码错误');
-        changeCaptcha();
-        return;
-      }
-      loading.value = true;
-      login(form)
-        .then((msg) => {
-          message.success(msg);
-          loading.value = false;
-          cleanPageTabs();
-          goHome();
-        })
-        .catch((e: Error) => {
-          message.error(e.message);
-          loading.value = false;
-        });
-    });
+  const onLoginBySms = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        form.code = form.smsCode;
+        loginBySms(form)
+          .then((msg) => {
+            message.success(msg);
+            loading.value = false;
+            resetFields();
+            cleanPageTabs();
+            goHome();
+          })
+          .catch((e: Error) => {
+            message.error(e.message);
+            loading.value = false;
+          });
+      })
+      .catch(() => {});
   };
 
-  const doRegister = () => {
-    registerUser(form)
+  /* 保存编辑 */
+  const submit = () => {
+    console.log(formRef.value);
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
       .then(() => {
-        loading.value = false;
-        message.success('注册成功');
+        if (form.code?.toLowerCase() !== text.value) {
+          message.error('验证码错误');
+          changeCaptcha();
+          return;
+        }
+        loading.value = true;
+        login(form)
+          .then((msg) => {
+            message.success(msg);
+            loading.value = false;
+            resetFields();
+            cleanPageTabs();
+            goHome();
+          })
+          .catch((e: Error) => {
+            message.error(e.message);
+            loading.value = false;
+          });
       })
-      .catch((e) => {
-        loading.value = false;
-        message.error(e.message);
-      });
+      .catch(() => {});
   };
 
+  // const doRegister = () => {
+  //   registerUser(form)
+  //     .then(() => {
+  //       loading.value = false;
+  //       message.success('注册成功');
+  //     })
+  //     .catch((e) => {
+  //       loading.value = false;
+  //       message.error(e.message);
+  //     });
+  // };
+
   const onLoginType = (text) => {
     loginType.value = text;
   };
 
+  // const goBack = () => {
+  //   openUrl(getDomain());
+  //   return;
+  // };
+
   const loginConnect = () => {
     // getWxWorkQrConnect().then((result) => {
     //   console.log(result);
@@ -413,6 +437,12 @@
 
   /* 获取图形验证码 */
   const changeCaptcha = () => {
+    listWebsiteField({}).then((list) => {
+      list.map((d) => {
+        const key = String(d.name);
+        param.value[key] = d.value;
+      });
+    });
     // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
     getCaptcha()
       .then((data) => {
@@ -421,7 +451,7 @@
         text.value = data.text;
         // 自动回填验证码, 实际项目去掉这个
         // form.code = data.text;
-        clearValidate();
+        // resetFields();
       })
       .catch((e) => {
         message.error(e.message);
@@ -461,10 +491,9 @@
     padding: 48px 16px 0 16px;
     position: relative;
     box-sizing: border-box;
-    background-color: var(--grey-5);
     background-image: url('@/assets/bg-2.jpeg');
+    background-color: var(--grey-5);
     background-repeat: no-repeat;
-    background-position: center;
     background-size: cover;
     min-height: 100vh;
 
@@ -475,9 +504,17 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: rgba(0, 0, 0, 0);
+      background: rgba(0, 0, 0, 0.2);
     }
   }
+  .company-name {
+    position: absolute;
+    top: 17%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 24px;
+    color: #ffffff;
+  }
   /* 卡片 */
   .login-form {
     width: 380px;