'注册修改'

zhangwei

2025-08-18 35cf8d289a09a6a4a34cf3d73fb41d84969ae4ee

 src/views/login/index.vue

@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="tsx">
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
@@ -7,6 +7,7 @@
  reactive,
  computed,
  ref,
  h,
  onMounted,
  defineAsyncComponent,
  onUnmounted,
@@ -16,6 +17,14 @@
import { useNav } from "@/layout/hooks/useNav";
import { useEventListener } from "@vueuse/core";
import type { FormInstance } from "element-plus";
import {
  ElForm,
  ElFormItem,
  ElRadioGroup,
  ElRadio,
  ElRow,
  ElTag
} from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
@@ -25,11 +34,6 @@
import { useRoute } from "vue-router";

const route = useRoute();

// import dayIcon from "@/assets/svg/day.svg?component";
// import darkIcon from "@/assets/svg/dark.svg?component";
import Lock from "~icons/ri/lock-fill";
import User from "~icons/ri/user-3-fill";
import { captcha, phoneNumberCode, exRole } from "@/api/register/index";

defineOptions({
@@ -56,6 +60,12 @@
  state.expirySeconds = res.result?.expirySeconds;
  state.ruleForm.codeId = res.result?.id;
};
import {
  addDialog,
  closeDialog,
  updateDialog,
  closeAllDialog
} from "@/components/ReDialog";
const state = reactive({
  isShowPassword: false,
  ruleForm: {
@@ -107,6 +117,7 @@
  expirySeconds: 60, // 验证码过期时间
  phoneSeconds: 0, // 手机验证码倒计时
  roleList: [],
  myEnterpriseList: [],
  nowRole: {}
});
// 验证码过期计时器
@@ -115,42 +126,23 @@

// 页面初始化
onMounted(async () => {
  // 若URL带有Token参数（第三方登录）

  // if (accessToken) await saveTokenAndInitRoutes(accessToken);
  // watch(
  //   () => themeConfig.value.isLoaded,
  //   isLoaded => {
  //     if (isLoaded) {
  // 获取登录配置
  // state.hideTenantForLogin = themeConfig.value.hideTenantForLogin ?? true;
  // state.secondVerEnabled = themeConfig.value.secondVer ?? true;
  // state.captchaEnabled = themeConfig.value.captcha ?? true;

  // 获取验证码
  getCaptcha();

  exRole().then(res => {
    state.roleList = res.result;
    const role = route.query;
    if (role.code) {
      state.nowRole = role;
      state.nowRole = state.roleList.find(item => {
        return item.code == role.code;
      });
    } else {
      state.nowRole = state.roleList[0];
    }
    state.ruleForm.exRoleCode = state.nowRole.code;
  });
  // 注册验证码过期计时器
  // if (state.captchaEnabled) {
  timer = setInterval(() => {
    if (state.expirySeconds > 0) state.expirySeconds -= 1;
  }, 1000);

  // }
  // }
  // },
  // { immediate: true }
  // );
});
// 页面卸载
onUnmounted(() => {
@@ -160,6 +152,146 @@
  clearInterval(phonetimer);
  phonetimer = null;
});
const openDialog = () => {
  addDialog({
    width: "30%",
    title: "选择登录公司",
    contentRenderer: () =>
    h(ElForm, {
      ref: ruleFormRef,
      model: state.ruleForm,
      rules: loginRules,
      size: 'large'
    }, [
      h(Motion, { delay: 150 }, [
        h(ElFormItem, {
          prop: 'exRoleCode',
          label: '主体角色' // 可添加表单项标签
        }, [
          // 单选框组 - 父容器添加样式控制
          h(ElRadioGroup, {
            modelValue: state.ruleForm.exRoleCode,
            'onUpdate:modelValue': (val) => {
              state.ruleForm.exRoleCode = val
            },
            style: {
              display: 'flex',
              flexDirection: 'column',
              gap: '8px' // 单选框之间的间距
            }
          }, [
            // 循环渲染单选框 - 每个单选框单独占一行
            state.myEnterpriseList.map(item => h(ElRadio, {
              key: item.id,
              value: item.code,
              style: {
                display: 'block', // 让每个单选框分行显示
                padding: '4px 0'
              }
            }, item.name),)
          ]),

          // 管理员标签 - 显示在单选框后面
          
        ])
      ])
    ])
      // <>
      //   <el-form
      //     ref="ruleFormRef"
      //     model={state.ruleForm}
      //     rules={loginRules}
      //     size="large"
      //   >
      //     <Motion delay={150}>
      //       <el-form-item prop="exRoleCode">
      //         <el-radio-group v-model={state.ruleForm.exRoleCode}>
      //           <el-radio
      //             v-for={item in state.myEnterpriseList}
      //             key={item.id}
      //             value={item.code}
      //           >
      //             {item.name}
      //           </el-radio>
      //         </el-radio-group>
      //       </el-form-item>
      //     </Motion>
      //   </el-form>
      // </>
      // h(
      //   ElForm,
      //   {
      //     ref: ruleFormRef,
      //     model: state.ruleForm,
      //     rules: loginRules,
      //     size: "large"
      //   },
      //   [
      //     h(Motion, { delay: 150 }, [
      //       h(ElFormItem, { prop: "exRoleCode" }, [
      //         h(
      //           ElRadioGroup,
      //           {
      //             modelValue: state.ruleForm.exRoleCode,
      //             "onUpdate:modelValue": val => {
      //               state.ruleForm.exRoleCode = val;
      //             }
      //           },
      //           [
      //             // 用map实现v-for循环
      //             state.myEnterpriseList.map(item =>
      //               h(ElRow, {}, [
      //                 h(
      //                   ElRadio,
      //                   {
      //                     key: item.customerUserID,
      //                     value: item.customerUserID
      //                   },
      //                   item.enterpriseName
      //                 ),
      //                 item.isManager ? 444 : "" // 标签内容
      //               ])
      //             )
      //           ]
      //         )
      //       ])
      //     ])
      //   ]
      // ),
      // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
    closeCallBack: ({ options, args }) => {
      // options.props 是响应式的
      // const { formInline } = options.props as FormProps;
      // const text = `姓名：${formInline.user} 城市：${formInline.region}`;
      if (args?.command === "cancel") {
        // 您点击了取消按钮
        // active.value -= 1;
      } else if (args?.command === "sure") {
        let obj = {
          phone: state.ruleForm.phone,
          code: state.ruleForm.phoneVCode,
          exRuleCode: state.ruleForm.exRoleCode
        };
        useUserStoreHook()
          .loginByUsername(obj)
          .then(res => {
            if (res?.code == 200) {
              message("注册成功！", { type: "success" });
              router.replace({
                path: "/RegisterSucess",
                query: {
                  code: obj.exRoleCode
                }
              });
            } else {
              message(res?.message, { type: "warning" });
            }
          });
      } else {
      }
    }
  });
};
const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
@@ -176,6 +308,20 @@
          if (res.code == 200) {
            // 获取后端路由
            return initRouter().then(() => {
              let obj = res.result;
              if (obj.theLastLogo) {
                router
                  .replace({
                    name: "Index"
                  })
                  .then(() => {
                    message("登录成功", { type: "success" });
                  })
                  .finally(() => (disabled.value = false));
              } else {
                state.myEnterpriseList = obj.customerExs;
                openDialog();
              }
              if (res.result.exRoles.length == 0) {
                disabled.value = true;
                router
@@ -191,7 +337,6 @@
                let data = res.result.exRoles.find(item => {
                  return item.code == state.ruleForm.exRoleCode;
                });
                console.log(data, "------------");

                if (!data) {
                  router.replace({