|
|
@@ -9,95 +9,130 @@
|
|
|
@close="emit('update:dialogVisible',false)"
|
|
|
>
|
|
|
<div class="login-box">
|
|
|
- <el-tabs
|
|
|
- class="login-box__tabs"
|
|
|
- v-model="activeTab"
|
|
|
- >
|
|
|
- <el-tab-pane label="账号密码登录" name="0" />
|
|
|
- <el-tab-pane label="验证码登录" name="1" />
|
|
|
- </el-tabs>
|
|
|
-
|
|
|
- <el-form
|
|
|
- :model="loginForm"
|
|
|
- :rules="loginRules"
|
|
|
- label-position="left"
|
|
|
- >
|
|
|
- <div class="title__main">欢迎!</div>
|
|
|
- <div class="title_sub">登录拍照机系统</div>
|
|
|
-
|
|
|
- <el-form-item class="login-input" prop="username">
|
|
|
- <div class="login-icon">
|
|
|
- <img src="@/assets/images/login/login-user.svg" v-if="activeTab === '0'"/>
|
|
|
- <img src="@/assets/images/login/login-code.svg" v-else/>
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- v-model="loginForm.username"
|
|
|
- placeholder="请输入用户名"
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- maxlength="30"
|
|
|
- style="width: 270px;"
|
|
|
- tabindex="1"
|
|
|
- autocomplete="on"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <template v-if="activeTab === '0'">
|
|
|
- <el-form-item
|
|
|
- class="login-input"
|
|
|
- prop="password"
|
|
|
- >
|
|
|
+ <template v-if="pageStatus === 1">
|
|
|
+ <el-tabs
|
|
|
+ class="login-box__tabs"
|
|
|
+ v-model="activeTab"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="账号密码登录" name="0" />
|
|
|
+ <el-tab-pane label="验证码登录" name="1" />
|
|
|
+ </el-tabs>
|
|
|
+ <el-form
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <div class="title__main">欢迎!</div>
|
|
|
+ <div class="title_sub">登录拍照机系统</div>
|
|
|
+
|
|
|
+ <el-form-item class="login-input" prop="username">
|
|
|
<div class="login-icon">
|
|
|
- <img src="@/assets/images/login/login-lock.svg" />
|
|
|
+ <img src="@/assets/images/login/login-user.svg" v-if="activeTab === '0'"/>
|
|
|
+ <img src="@/assets/images/login/login-code.svg" v-else/>
|
|
|
</div>
|
|
|
<el-input
|
|
|
- v-model="loginForm.password"
|
|
|
- placeholder="请输入密码"
|
|
|
- type="password"
|
|
|
- style="width: 270px;"
|
|
|
- show-password
|
|
|
- maxlength="30"
|
|
|
- tabindex="2"
|
|
|
- autocomplete="on"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ name="username"
|
|
|
+ type="text"
|
|
|
+ maxlength="30"
|
|
|
+ style="width: 270px;"
|
|
|
+ tabindex="1"
|
|
|
+ autocomplete="on"
|
|
|
>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
- </template>
|
|
|
|
|
|
- <template v-else>
|
|
|
- <el-form-item
|
|
|
- class="login-input"
|
|
|
- prop="code"
|
|
|
- >
|
|
|
- <div class="login-icon">
|
|
|
- <img src="@/assets/images/login/login-lock.svg" />
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- v-model="loginForm.password"
|
|
|
- placeholder="请输入验证码"
|
|
|
- type="text"
|
|
|
- maxlength="6"
|
|
|
- tabindex="2"
|
|
|
- style="width: 270px;"
|
|
|
- autocomplete="off"
|
|
|
+ <template v-if="activeTab === '0'">
|
|
|
+ <el-form-item
|
|
|
+ class="login-input"
|
|
|
+ prop="password"
|
|
|
>
|
|
|
- <template #append>
|
|
|
- <el-button
|
|
|
- :disabled="isCodeSending"
|
|
|
- @click="sendVerificationCode"
|
|
|
- >
|
|
|
- {{ codeButtonText }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
+ <div class="login-icon">
|
|
|
+ <img src="@/assets/images/login/login-lock.svg" />
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ type="password"
|
|
|
+ style="width: 270px;"
|
|
|
+ show-password
|
|
|
+ maxlength="30"
|
|
|
+ tabindex="2"
|
|
|
+ autocomplete="on"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <el-form-item
|
|
|
+ class="login-input"
|
|
|
+ prop="code"
|
|
|
+ >
|
|
|
+ <div class="login-icon">
|
|
|
+ <img src="@/assets/images/login/login-lock.svg" />
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.password"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ type="text"
|
|
|
+ maxlength="6"
|
|
|
+ tabindex="2"
|
|
|
+ style="width: 270px;"
|
|
|
+ autocomplete="off"
|
|
|
+ >
|
|
|
+ <template #append>
|
|
|
+ <el-button
|
|
|
+ :disabled="isCodeSending"
|
|
|
+ @click="sendVerificationCode"
|
|
|
+ >
|
|
|
+ {{ codeButtonText }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-button class="login-button" type="primary" :loading="loading" @click="handleLogin">
|
|
|
+ 登录
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template v-if="pageStatus === 2">
|
|
|
+
|
|
|
+ <div class="title__main mar-top-50">请选择企业身份</div>
|
|
|
+ <div class="title_sub">您在以下企业均有任职,请问您想代表那个企业进行访问</div>
|
|
|
+
|
|
|
+
|
|
|
+ <el-select v-model="companyId" class="mar-top-50 w-full" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item, key in company"
|
|
|
+ :key="key"
|
|
|
+ :label="item.abbreviation ? item.abbreviation : item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
|
|
|
- <el-button class="login-button" type="primary" :loading="loading" @click="handleLogin">
|
|
|
- 登录
|
|
|
+ <div class="mar-top-50">
|
|
|
+ <el-button class="login-button s" type="primary" @click="toggleCompany">
|
|
|
+ 确认
|
|
|
</el-button>
|
|
|
- </el-form>
|
|
|
+ </div>
|
|
|
+<!-- <div class="bodyCompany">
|
|
|
+ <div class="companyItem" :class="item.is_current == 1?'activeCompany':''" v-for="item, index in company" @click="selectnowCompany(item,index)">
|
|
|
+ <div class="companyHeader">
|
|
|
+ <div class="companyTitle">{{item.abbreviation ? item.abbreviation : item.name}}</div>
|
|
|
+ <div class="companyName">主体信息:{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="selectCompanyBox">
|
|
|
+ <img src="@/assets/images/login/dagou.png" v-if="item.is_current == 1" class="selectIcon"/>
|
|
|
+ <div class="unselect" v-else></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>-->
|
|
|
+
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -113,7 +148,7 @@ export default defineComponent({
|
|
|
<script setup>
|
|
|
import { ref, reactive, computed } from 'vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
-import { login, getUserInfo, sendCode } from '@/apis/user';
|
|
|
+import { getAccountCompany, selectCompany, sendCode } from '@/apis/user';
|
|
|
import useUserInfo from "@/stores/modules/user";
|
|
|
const showDialog = computed(() => props.dialogVisible)
|
|
|
|
|
|
@@ -157,13 +192,68 @@ const loginRules = reactive({
|
|
|
|
|
|
const handleLogin = async () => {
|
|
|
|
|
|
- useUserInfoStore.login({
|
|
|
+ const res = await useUserInfoStore.login({
|
|
|
"site":1,
|
|
|
"username":loginForm.username,
|
|
|
"password":loginForm.password,
|
|
|
"type": activeTab.value,
|
|
|
"device":"aigc-photo"
|
|
|
})
|
|
|
+ console.log('handleLogin');
|
|
|
+ console.log(res);
|
|
|
+ console.log(res.data.is_need_select_company);
|
|
|
+ switch(res.data.is_need_select_company){
|
|
|
+ case 40006:
|
|
|
+
|
|
|
+ console.log(40006);
|
|
|
+ showCompany()
|
|
|
+ break;
|
|
|
+ case 40007:
|
|
|
+ console.log(40007);
|
|
|
+ ElMessage.error('当前没有所属组织')
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+
|
|
|
+ console.log("default");
|
|
|
+ await useUserInfoStore.getInfo()
|
|
|
+ useUserInfoStore.updateLoginShow(false)
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+const pageStatus = ref(1)
|
|
|
+const companyId = ref('')
|
|
|
+const company = ref([])
|
|
|
+async function showCompany() {
|
|
|
+ const res = await getAccountCompany()
|
|
|
+ company.value = res.data
|
|
|
+ res.data.map((v)=>{
|
|
|
+ if(v.is_current == 1){
|
|
|
+ companyId.value = Number(v.id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ pageStatus.value = 2
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/*function selectnowCompany(item,index){
|
|
|
+ companyId.value = item.id
|
|
|
+ company.value.map((v)=>{
|
|
|
+ v.is_current = 0
|
|
|
+ })
|
|
|
+ company.value[index].is_current = 1
|
|
|
+ toggleCompany()
|
|
|
+}*/
|
|
|
+
|
|
|
+
|
|
|
+// 切换组织
|
|
|
+async function toggleCompany() {
|
|
|
+ if (!companyId.value) return false
|
|
|
+ await selectCompany({
|
|
|
+ id: companyId.value
|
|
|
+ })
|
|
|
+ await useUserInfoStore.getInfo()
|
|
|
+ useUserInfoStore.updateLoginShow(false)
|
|
|
}
|
|
|
|
|
|
const sendVerificationCode = () => {
|
|
|
@@ -211,6 +301,64 @@ const sendVerificationCode = () => {
|
|
|
color: #666;
|
|
|
text-align: left;
|
|
|
line-height: 1.4;
|
|
|
+
|
|
|
+ .selectCompanyTitle{
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .selectCompanyContent{
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bodyCompany{
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-top: 30px;
|
|
|
+ .companyItem{
|
|
|
+ background: #454545;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ padding-right: 10px;
|
|
|
+ color: #EEEEEE;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .activeCompany{
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .companyHeader{
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .companyTitle{
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .companyName{
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .selectCompanyBox{
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .unselect{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border: 1px solid #C6C6C6;
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+ .selectIcon{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.login-input {
|