add 用户注册

src/api/system/distributorApi.ts

@@ -5,11 +5,7 @@
  */
 
 import { defHttp } from '/@/utils/http/axios';
-import {
-  Distributor,
-  DistributorParams,
-  DistributorPageResult,
-} from '../model/distributor';
+import { Distributor, DistributorParams, DistributorPageResult } from '../model/distributor';
 const baseApi = '/v1/system/distributor';
 
 /**
@@ -30,12 +26,13 @@ export const remove = (id: any) => defHttp.delete<Number>({ url: `${baseApi}/${i
 /**
  * 分页查询
  */
-export const search = (params?: DistributorParams) => defHttp.get<DistributorPageResult>({ url: `${baseApi}/search`, params });
+export const search = (params?: DistributorParams) =>
+  defHttp.get<DistributorPageResult>({ url: `${baseApi}/search`, params });
 
 /**
  * 列表查询
  */
-export const all = (params?: DistributorParams) => defHttp.get<DistributorPageResult>({ url: `${baseApi}/all`, params });
+export const all = (params?: DistributorParams) => defHttp.get<Distributor[]>({ url: `${baseApi}/all`, params });
 
 /**
  * 通过主键查询
@@ -50,21 +47,28 @@ export const getOne = (params?: DistributorParams) => defHttp.get<Distributor>({
 /**
  * 批量删除
  */
-export const batchRemove = (idList: Array<any>) => defHttp.post<boolean>({ url: `${baseApi}/batch-delete`, data: idList });
+export const batchRemove = (idList: Array<any>) =>
+  defHttp.post<boolean>({ url: `${baseApi}/batch-delete`, data: idList });
 
 /**
  * 批量新增
  */
-export const batchAdd = (entityList: Array<Distributor>) => defHttp.post<boolean>({ url: `${baseApi}/batch-save`, data: entityList });
+export const batchAdd = (entityList: Array<Distributor>) =>
+  defHttp.post<boolean>({ url: `${baseApi}/batch-save`, data: entityList });
 
 /**
  * 批量更新
  */
-export const batchUpdate = (entityList: Array<Distributor>) => defHttp.post<boolean>({ url: `${baseApi}/batch-update`, data: entityList });
+export const batchUpdate = (entityList: Array<Distributor>) =>
+  defHttp.post<boolean>({ url: `${baseApi}/batch-update`, data: entityList });
 
 /**
  * 查询数量
  */
 export const count = (params?: DistributorParams) => defHttp.get<Number>({ url: `${baseApi}/count`, params });
 
-
+/**
+ * 列表查询
+ */
+export const allWithoutAuth = (params?: DistributorParams) =>
+  defHttp.get<Distributor[]>({ url: `${baseApi}/all/without/auth`, params });

src/api/system/userApi.ts

@@ -84,8 +84,7 @@ export const logout = () => defHttp.post<any>({ url: `${baseApi}/logout` }, { er
 /**
  * 用户注册
  */
-export const register = (user: User) =>
-  defHttp.post<User>({ url: `${baseApi}/login`, data: user }, { errorMessageMode: 'none' });
+export const register = (user: User) => defHttp.post<User>({ url: `${baseApi}/register`, data: user });
 
 /**
  * 当前用户信息

src/commonSchemaProperty/formRules.ts

-interface ruleParams {
-  message?: string;
-  trigger?: string;
-}
-
-export const phoneRule = (ruleParam?: ruleParams) => {
-  const { message = '请输入正确的手机号码！', trigger = 'blur' } = ruleParam || {};
+export const phoneRule = (ruleParam?: any) => {
   return {
     pattern: /^1[3456789]\d{9}$/,
-    message: message,
-    trigger: trigger,
+    message: '请输入正确的手机号码！',
+    trigger: 'blur',
+    ...ruleParam,
   };
 };

src/commonSchemaProperty/index.ts

@@ -8,6 +8,7 @@ import * as DoctorApi from '/@/api/system/doctorApi';
 import * as UserApi from '/@/api/system/userApi';
 import { StatusValEnum as DoctorStatusValEnum } from '/@/views/system/doctor/enum';
 import { StatusValEnum as UserStatusValEnum } from '/@/views/system/user/enum';
+import { StatusValEnum as DistributorValEnum } from '/@/views/system/distributor/enum';
 import { StatusValEnum as ReceiverStatusValEnum } from '/@/views/system/receiver/enum';
 import { RoleEnum } from '/@/views/system/role/enum';
 import * as ThirdApi from '/@/api/system/thirdApi';
@@ -38,7 +39,7 @@ const getDistributorId = ({ colProps }) => {
         labelInValue: true,
         api: DistributorApi.all,
         params: {
-          status: UserStatusValEnum.PASSED,
+          status: DistributorValEnum.PASSED,
         },
         resultField: 'records',
         labelField: 'name',

src/components/StrengthMeter/src/StrengthMeter.vue

@@ -7,6 +7,7 @@
       :value="innerValueRef"
       @change="handleChange"
       :disabled="disabled"
+      autocomplete="new-password"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)">
         <slot :name="item" v-bind="data || {}"></slot>

src/views/common/login/LoginForm.vue

@@ -38,9 +38,9 @@
       <ACol :span="12">
         <FormItem :style="{ 'text-align': 'right' }">
           <!-- No logic, you need to deal with it yourself -->
-          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
-            {{ t('sys.login.forgetPassword') }}
-          </Button>
+          <!--          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">-->
+          <!--            {{ t('sys.login.forgetPassword') }}-->
+          <!--          </Button>-->
         </FormItem>
       </ACol>
     </ARow>
@@ -49,9 +49,9 @@
       <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
         {{ t('sys.login.loginButton') }}
       </Button>
-      <!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
+      <Button size="large" class="mt-4 enter-x" block @click="setLoginState(LoginStateEnum.REGISTER)">
         {{ t('sys.login.registerButton') }}
-      </Button> -->
+      </Button>
     </FormItem>
     <!--
     <ARow class="enter-x">

src/views/common/login/RegisterForm.vue

@@ -2,36 +2,37 @@
   <template v-if="getShow">
     <LoginFormTitle class="enter-x" />
     <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
-      <FormItem name="account" class="enter-x">
-        <Input
-          class="fix-auto-fill"
-          size="large"
-          v-model:value="formData.account"
-          :placeholder="t('sys.login.userName')"
-        />
-      </FormItem>
-      <FormItem name="mobile" class="enter-x">
-        <Input
-          size="large"
-          v-model:value="formData.mobile"
-          :placeholder="t('sys.login.mobile')"
-          class="fix-auto-fill"
-        />
+      <FormItem name="username" class="enter-x">
+        <Input class="fix-auto-fill" size="large" v-model:value="formData.username" placeholder="用户名" />
       </FormItem>
-      <FormItem name="sms" class="enter-x">
-        <CountdownInput
-          size="large"
-          class="fix-auto-fill"
-          v-model:value="formData.sms"
-          :placeholder="t('sys.login.smsCode')"
-        />
+      <a-spin :spinning="isDistributorOptionsLoading">
+        <FormItem name="distributorId" class="enter-x" :rules="[{ required: true, message: '请选择经销商！' }]">
+          <a-select
+            v-model:value="formData.distributorId"
+            size="large"
+            style="width: 100%"
+            :options="distributorOptions"
+            placeholder="请选择经销商"
+            :show-search="true"
+            :fieldNames="{ label: 'name', value: 'id' }"
+            :allowClear="false"
+            optionFilterProp="name"
+          />
+        </FormItem>
+      </a-spin>
+      <FormItem name="mobile" class="enter-x" :rules="[phoneRule({ required: true })]">
+        <Input size="large" v-model:value="formData.mobile" placeholder="手机号" class="fix-auto-fill" />
       </FormItem>
+      <!--      <FormItem name="sms" class="enter-x">-->
+      <!--        <CountdownInput-->
+      <!--          size="large"-->
+      <!--          class="fix-auto-fill"-->
+      <!--          v-model:value="formData.sms"-->
+      <!--          :placeholder="t('sys.login.smsCode')"-->
+      <!--        />-->
+      <!--      </FormItem>-->
       <FormItem name="password" class="enter-x">
-        <StrengthMeter
-          size="large"
-          v-model:value="formData.password"
-          :placeholder="t('sys.login.password')"
-        />
+        <StrengthMeter size="large" v-model:value="formData.password" :placeholder="t('sys.login.password')" />
       </FormItem>
       <FormItem name="confirmPassword" class="enter-x">
         <InputPassword
@@ -42,21 +43,14 @@
         />
       </FormItem>
 
-      <FormItem class="enter-x" name="policy">
-        <!-- No logic, you need to deal with it yourself -->
-        <Checkbox v-model:checked="formData.policy" size="small">
-          {{ t('sys.login.policy') }}
-        </Checkbox>
-      </FormItem>
+      <!--      <FormItem class="enter-x" name="policy">-->
+      <!--        &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
+      <!--        <Checkbox v-model:checked="formData.policy" size="small">-->
+      <!--          {{ t('sys.login.policy') }}-->
+      <!--        </Checkbox>-->
+      <!--      </FormItem>-->
 
-      <Button
-        type="primary"
-        class="enter-x"
-        size="large"
-        block
-        @click="handleRegister"
-        :loading="loading"
-      >
+      <Button type="primary" class="enter-x" size="large" block @click="handleRegister" :loading="isRegisterLoading">
         {{ t('sys.login.registerButton') }}
       </Button>
       <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
@@ -66,13 +60,19 @@
   </template>
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, unref, computed } from 'vue';
+  import { notification } from 'ant-design-vue';
+  import { reactive, ref, unref, computed, watch } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
-  import { Form, Input, Button, Checkbox } from 'ant-design-vue';
+  import { Form, Input, Button } from 'ant-design-vue';
   import { StrengthMeter } from '/@/components/StrengthMeter';
-  import { CountdownInput } from '/@/components/CountDown';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
+  import { phoneRule } from '/@/commonSchemaProperty/formRules';
+  import { useAsyncState } from '@vueuse/core';
+  import * as DistributorApi from '/@/api/system/distributorApi';
+  import * as UserApi from '/@/api/system/userApi';
+  import { StatusValEnum as DistributorValEnum } from '/@/views/system/distributor/enum';
+  import { Distributor } from '/@/api/model/distributor';
 
   const FormItem = Form.Item;
   const InputPassword = Input.Password;
@@ -80,10 +80,10 @@
   const { handleBackLogin, getLoginState } = useLoginState();
 
   const formRef = ref();
-  const loading = ref(false);
 
   const formData = reactive({
-    account: '',
+    distributorId: null,
+    username: '',
     password: '',
     confirmPassword: '',
     mobile: '',
@@ -96,9 +96,62 @@
 
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
 
+  // 查询所有经销商
+  const {
+    state: distributorOptions,
+    isLoading: isDistributorOptionsLoading,
+    execute: getDistributorOptions,
+  } = useAsyncState(
+    () => {
+      const params = {
+        status: DistributorValEnum.PASSED,
+      };
+      return DistributorApi.allWithoutAuth(params).then((res: Distributor[]) => res);
+    },
+    [],
+    {
+      immediate: false,
+    },
+  );
+
+  // 注册页面展示时，查询经销商
+  watch(getShow, (val) => {
+    if (val) {
+      getDistributorOptions();
+    }
+  });
+
+  // 注册
+  const {
+    isLoading: isRegisterLoading,
+    isReady: isRegisterReady,
+    execute: registerExecute,
+  } = useAsyncState(
+    (data) => {
+      return UserApi.register(data).then((res: any) => res);
+    },
+    [],
+    {
+      immediate: false,
+    },
+  );
+  // 注册成功之后
+  watch(isRegisterReady, (val) => {
+    if (val) {
+      notification.success({
+        message: '注册成功！',
+        description: '请等待管理员审核',
+        duration: 0,
+      });
+      formRef.value.resetFields();
+      handleBackLogin();
+    }
+  });
+
+  // 表单提交
   async function handleRegister() {
     const data = await validForm();
     if (!data) return;
-    console.log(data);
+    await registerExecute(0, data);
   }
 </script>

src/views/system/distributor/enum.ts

+export enum StatusValEnum {
+  PENDING_REVIEW = 'PENDING_REVIEW',
+  PASSED = 'PASSED',
+  REJECT = 'REJECT',
+  FORBIDDEN = 'FORBIDDEN',
+}

src/views/system/distributor/schema.ts

@@ -8,7 +8,7 @@
 
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-
+import { StatusValEnum } from './enum';
 export enum StatusEnum {
   PENDING_REVIEW = '待审核',
   PASSED = '已通过',
@@ -18,7 +18,7 @@ export enum StatusEnum {
 export const StatusEnumOptions: any[] = [];
 for (const key in StatusEnum) {
   StatusEnumOptions.push({
-    value: key,
+    value: StatusValEnum[key],
     label: StatusEnum[key],
   });
 }