Commit 30836b07973a9587d62ead920943acf0d513ac7e
1 parent
62dc600c
fix: 关闭验证码功能前端控制显示
Showing
5 changed files
with
38 additions
and
16 deletions
yudao-ui-admin-vue3/src/api/system/user/profile/index.ts
| ... | ... | @@ -24,6 +24,6 @@ export const updateUserPwdApi = (oldPassword: string, newPassword: string) => { |
| 24 | 24 | } |
| 25 | 25 | |
| 26 | 26 | // 用户头像上传 |
| 27 | -export const uploadAvatarApi = (data) => { | |
| 28 | - return request.put({ url: '/system/user/profile/update-avatar', data: data }) | |
| 27 | +export const uploadAvatarApi = (params) => { | |
| 28 | + return request.upload({ url: '/system/user/profile/update-avatar', params }) | |
| 29 | 29 | } | ... | ... |
yudao-ui-admin-vue3/src/hooks/web/useAxios.ts
| ... | ... | @@ -42,12 +42,19 @@ async function downloadFn<T = any>(option: AxiosConfig): Promise<T> { |
| 42 | 42 | return res as unknown as Promise<T> |
| 43 | 43 | } |
| 44 | 44 | |
| 45 | +async function uploadFn<T = any>(option: AxiosConfig): Promise<T> { | |
| 46 | + option.headersType = 'multipart/form-data' | |
| 47 | + const res = await request({ method: 'PUT', ...option }) | |
| 48 | + return res as unknown as Promise<T> | |
| 49 | +} | |
| 50 | + | |
| 45 | 51 | export const useAxios = () => { |
| 46 | 52 | return { |
| 47 | 53 | get: getFn, |
| 48 | 54 | post: postFn, |
| 49 | 55 | delete: deleteFn, |
| 50 | 56 | put: putFn, |
| 51 | - download: downloadFn | |
| 57 | + download: downloadFn, | |
| 58 | + upload: uploadFn | |
| 52 | 59 | } |
| 53 | 60 | } | ... | ... |
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
| ... | ... | @@ -47,12 +47,17 @@ const iconHouse = useIcon({ icon: 'ep:house' }) |
| 47 | 47 | const iconAvatar = useIcon({ icon: 'ep:avatar' }) |
| 48 | 48 | const iconLock = useIcon({ icon: 'ep:lock' }) |
| 49 | 49 | const iconCircleCheck = useIcon({ icon: 'ep:circle-check' }) |
| 50 | -const LoginRules = { | |
| 50 | +const LoginCaptchaRules = { | |
| 51 | 51 | tenantName: [required], |
| 52 | 52 | username: [required], |
| 53 | 53 | password: [required], |
| 54 | 54 | code: [required] |
| 55 | 55 | } |
| 56 | +const LoginRules = { | |
| 57 | + tenantName: [required], | |
| 58 | + username: [required], | |
| 59 | + password: [required] | |
| 60 | +} | |
| 56 | 61 | const loginLoading = ref(false) |
| 57 | 62 | const loginData = reactive({ |
| 58 | 63 | codeImg: '', |
| ... | ... | @@ -76,8 +81,11 @@ const loginData = reactive({ |
| 76 | 81 | // 获取验证码 |
| 77 | 82 | const getCode = async () => { |
| 78 | 83 | const res = await LoginApi.getCodeImgApi() |
| 79 | - loginData.codeImg = 'data:image/gif;base64,' + res.img | |
| 80 | - loginData.loginForm.uuid = res.uuid | |
| 84 | + loginData.captchaEnable = res.enable | |
| 85 | + if (res.enable) { | |
| 86 | + loginData.codeImg = 'data:image/gif;base64,' + res.img | |
| 87 | + loginData.loginForm.uuid = res.uuid | |
| 88 | + } | |
| 81 | 89 | } |
| 82 | 90 | //获取租户ID |
| 83 | 91 | const getTenantId = async () => { |
| ... | ... | @@ -159,7 +167,7 @@ onMounted(async () => { |
| 159 | 167 | <template> |
| 160 | 168 | <el-form |
| 161 | 169 | :model="loginData.loginForm" |
| 162 | - :rules="LoginRules" | |
| 170 | + :rules="loginData.captchaEnable ? LoginCaptchaRules : LoginRules" | |
| 163 | 171 | label-position="top" |
| 164 | 172 | class="login-form" |
| 165 | 173 | label-width="120px" |
| ... | ... | @@ -205,7 +213,7 @@ onMounted(async () => { |
| 205 | 213 | </el-form-item> |
| 206 | 214 | </el-col> |
| 207 | 215 | <el-col :span="24" style="padding-left: 10px; padding-right: 10px"> |
| 208 | - <el-form-item prop="code"> | |
| 216 | + <el-form-item prop="code" v-if="loginData.captchaEnable"> | |
| 209 | 217 | <el-row justify="space-between" style="width: 100%"> |
| 210 | 218 | <el-col :span="14"> |
| 211 | 219 | <el-input | ... | ... |
yudao-ui-admin-vue3/src/views/Profile/components/ProfileUser.vue
| ... | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | import { getUserProfileApi } from '@/api/system/user/profile' |
| 3 | 3 | import { onMounted, reactive } from 'vue' |
| 4 | 4 | import dayjs from 'dayjs' |
| 5 | -import { UserAvatarVue } from './' | |
| 5 | +import UserAvatar from './UserAvatar.vue' | |
| 6 | 6 | import { ProfileVO } from '@/api/system/user/profile/types' |
| 7 | 7 | import { useI18n } from '@/hooks/web/useI18n' |
| 8 | 8 | const { t } = useI18n() |
| ... | ... | @@ -43,7 +43,7 @@ onMounted(async () => { |
| 43 | 43 | <template> |
| 44 | 44 | <div> |
| 45 | 45 | <div class="text-center"> |
| 46 | - <UserAvatarVue :img="userInfo.user.avatar" /> | |
| 46 | + <UserAvatar :img="userInfo.user.avatar" /> | |
| 47 | 47 | </div> |
| 48 | 48 | <ul class="list-group list-group-striped"> |
| 49 | 49 | <li class="list-group-item"> | ... | ... |
yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue
| ... | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | import { ref, reactive, watch } from 'vue' |
| 3 | 3 | import 'vue-cropper/dist/index.css' |
| 4 | 4 | import { VueCropper } from 'vue-cropper' |
| 5 | -import { ElRow, ElCol, ElUpload, ElMessage } from 'element-plus' | |
| 5 | +import { ElRow, ElCol, ElUpload, ElMessage, ElDialog } from 'element-plus' | |
| 6 | 6 | import { propTypes } from '@/utils/propTypes' |
| 7 | 7 | import { uploadAvatarApi } from '@/api/system/user/profile' |
| 8 | 8 | const cropper = ref() |
| ... | ... | @@ -43,6 +43,8 @@ const changeScale = (num: number) => { |
| 43 | 43 | num = num || 1 |
| 44 | 44 | cropper.value.changeScale(num) |
| 45 | 45 | } |
| 46 | +// 覆盖默认的上传行为 | |
| 47 | +const requestUpload = () => {} | |
| 46 | 48 | /** 上传预处理 */ |
| 47 | 49 | const beforeUpload = (file: Blob) => { |
| 48 | 50 | if (file.type.indexOf('image/') == -1) { |
| ... | ... | @@ -84,7 +86,7 @@ watch( |
| 84 | 86 | <div class="user-info-head" @click="editCropper()"> |
| 85 | 87 | <img :src="state.options.img" title="点击上传头像" class="img-circle img-lg" alt="" /> |
| 86 | 88 | </div> |
| 87 | - <Dialog | |
| 89 | + <el-dialog | |
| 88 | 90 | v-model="state.dialogVisible" |
| 89 | 91 | :title="state.dialogTitle" |
| 90 | 92 | width="50%" |
| ... | ... | @@ -92,7 +94,7 @@ watch( |
| 92 | 94 | style="padding: 30px 20px" |
| 93 | 95 | > |
| 94 | 96 | <el-row> |
| 95 | - <el-col :xs="24" :md="12" :style="{ height: '350px' }"> | |
| 97 | + <el-col :xs="24" :md="12" style="height: 350px"> | |
| 96 | 98 | <VueCropper |
| 97 | 99 | ref="cropper" |
| 98 | 100 | :img="state.options.img" |
| ... | ... | @@ -105,7 +107,7 @@ watch( |
| 105 | 107 | v-if="state.cropperVisible" |
| 106 | 108 | /> |
| 107 | 109 | </el-col> |
| 108 | - <el-col :xs="24" :md="12" :style="{ height: '350px' }"> | |
| 110 | + <el-col :xs="24" :md="12" style="height: 350px"> | |
| 109 | 111 | <div class="avatar-upload-preview"> |
| 110 | 112 | <img |
| 111 | 113 | :src="state.previews.url" |
| ... | ... | @@ -119,7 +121,12 @@ watch( |
| 119 | 121 | <template #footer> |
| 120 | 122 | <el-row> |
| 121 | 123 | <el-col :lg="2" :md="2"> |
| 122 | - <el-upload action="#" :show-file-list="false" :before-upload="beforeUpload"> | |
| 124 | + <el-upload | |
| 125 | + action="#" | |
| 126 | + :http-request="requestUpload" | |
| 127 | + :show-file-list="false" | |
| 128 | + :before-upload="beforeUpload" | |
| 129 | + > | |
| 123 | 130 | <el-button size="small"> |
| 124 | 131 | <Icon icon="ep:upload-filled" class="mr-5px" /> |
| 125 | 132 | 选择 |
| ... | ... | @@ -151,7 +158,7 @@ watch( |
| 151 | 158 | </el-col> |
| 152 | 159 | </el-row> |
| 153 | 160 | </template> |
| 154 | - </Dialog> | |
| 161 | + </el-dialog> | |
| 155 | 162 | </template> |
| 156 | 163 | <style scoped> |
| 157 | 164 | .user-info-head { | ... | ... |