mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 文件上传功能

Browse Source
This commit is contained in:
lbw 2023-02-14 14:40:17 +08:00
parent 116b4389a0
commit 0b73210793
5 changed files with 200 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,5 +1,5 @@
# port 端口号
VITE_PORT = 8080
VITE_PORT = 8888
# 本地环境
ENV = 'development'

7
src/utils/storage.ts
View File

@ -37,23 +37,24 @@ export const Local = {
export const Session = {
// 设置临时缓存
set(key: string, val: any) {
if (key === 'token') return Cookies.set(key, val);
if (key === 'token' || key === 'refresh_token') return Cookies.set(key, val);
window.sessionStorage.setItem(key, JSON.stringify(val));
},
// 获取临时缓存
get(key: string) {
if (key === 'token') return Cookies.get(key);
if (key === 'token' || key === 'refresh_token') return Cookies.get(key);
let json = <string>window.sessionStorage.getItem(key);
return JSON.parse(json);
},
// 移除临时缓存
remove(key: string) {
if (key === 'token') return Cookies.remove(key);
if (key === 'token' || key === 'refresh_token') return Cookies.remove(key);
window.sessionStorage.removeItem(key);
},
// 移除全部临时缓存
clear() {
Cookies.remove('token');
Cookies.remove('refresh_token');
window.sessionStorage.clear();
},
};

30
src/views/admin/file/form.vue
View File

@ -1,14 +1,6 @@
<template>
<el-dialog title="上传文件" v-model="visible"
:close-on-click-modal="false" draggable>
<el-upload
class="upload-demo"
drag
action="/admin/sys-file/upload"
:headers="headers"
multiple
@success="success"
>
<el-dialog title="上传文件" v-model="visible" :close-on-click-modal="false" draggable>
<el-upload class="upload-demo" drag action="/admin/sys-file/upload" :headers="headers" multiple @success="success">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽到这个位置或者<em>点击上传</em>
@ -30,26 +22,26 @@
<script setup lang="ts" name="SysFileDialog">
// 定义子组件向父组件传值/事件
import {Session} from "/@/utils/storage";
import { Local } from "/@/utils/storage";
import { Session } from "/@/utils/storage";
const emit = defineEmits(['refresh']);
const headers = reactive({
Authorization: ''
})
// 定义变量内容
const visible = ref(false)
// 定义字典
const headers = computed(() => {
const tenantId = Local.get("tenantId") ? Local.get("tenantId") : 1
return {
'Authorization': "Bearer " + Session.get("token"),
'TENANT-ID': tenantId
};
})
// 打开弹窗
const openDialog = () => {
visible.value = true
// 获取 token 进行拼接
if (Session.get('token')) {
headers.Authorization = `Bearer ${Session.get('token')}`;
}
};
const success = () => {

7
src/views/login/component/authredirect.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts" name="authredirect">
import request from '/@/utils/request';
import { ElMessageBox } from 'element-plus';
import other from "/@/utils/other";
import { rule } from '/@/utils/validate';
import { Session } from '/@/utils/storage';
import { useUserInfo } from '/@/stores/userInfo';
import { useMessageBox } from '/@/hooks/message';
onMounted(async () => {
const url = window.location.search
@ -38,11 +38,8 @@ const bind = (state: string, code: string) => {
method: 'post',
params: { state, code }
}).then(() => {
ElMessageBox.alert('社交账号绑定成功', '成功', {
confirmButtonText: '确定',
callback: () => {
useMessageBox().confirm('社交账号绑定成功').then(() => {
window.close()
}
})
})
}

86
src/views/personal/index.vue
View File

@ -7,19 +7,20 @@
<div class="personal-user">
<div class="personal-user-left">
<el-upload class="h100 personal-user-left-upload" action="/admin/sys-file/upload"
:headers="headers"
:on-success="handleAvatarSuccess" :limit="1">
:headers="headers" :on-success="handleAvatarSuccess" :limit="1">
<img :src="formData.avatar" />
</el-upload>
</div>
<div class="personal-user-right">
<el-row>
<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
<el-col :span="24" class="personal-title mb18">{{
currentTime
}}，admin！ </el-col>
<el-col :span="24">
<el-row>
<el-col :xs="24" :sm="8" class="personal-item mb6">
<div class="personal-item-label">昵称：</div>
<div class="personal-item-value">{{formData.nickname}}</div>
<div class="personal-item-value">{{ formData.nickname }}</div>
</el-col>
<el-col :xs="24" :sm="16" class="personal-item mb6">
<div class="personal-item-label">身份：</div>
@ -49,7 +50,8 @@
<el-col :span="24">
<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
<div class="personal-edit-title">基本信息</div>
<el-form :model="formData" size="default" :rules="ruleForm" label-width="100px" class="mt35 mb35" ref="formdataRef">
<el-form :model="formData" size="default" :rules="ruleForm" label-width="100px" class="mt35 mb35"
ref="formdataRef">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="用户名" prop="username">
@ -79,7 +81,8 @@
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="原密码" prop="password">
<el-input v-model="formData.password" placeholder="请输入密码" clearable type="password"></el-input>
<el-input v-model="formData.password" placeholder="请输入密码" clearable
type="password"></el-input>
</el-form-item>
</el-col>
<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24" class="mb20">
@ -96,25 +99,25 @@
<el-form-item label="社交登录" prop="social">
<div @click="handleClick('wechat')">
<span :style="{ backgroundColor: '#6ba2d6' }" class="container">
<i class="iconfont icon-weixin" icon-class="wechat"/>
<i class="iconfont icon-weixin" icon-class="wechat" />
</span>
<p class="title">微信</p>
</div>
<div @click="handleClick('tencent')">
<span :style="{ backgroundColor: '#8dc349' }" class="container">
<i class="iconfont icon-qq" icon-class="qq"/>
<i class="iconfont icon-qq" icon-class="qq" />
</span>
<p class="title">QQ</p>
</div>
<div @click="handleClick('gitee')">
<span :style="{ backgroundColor: '#bf3030' }" class="container">
<i class="iconfont icon-logo_gitee_icon" icon-class="qq"/>
<i class="iconfont icon-logo_gitee_icon" icon-class="qq" />
</span>
<p class="title">Gitee</p>
</div>
<div @click="handleClick('osc')">
<span :style="{ backgroundColor: '#007B25' }" class="container">
<i class="iconfont icon-oschina" icon-class="qq"/>
<i class="iconfont icon-oschina" icon-class="qq" />
</span>
<p class="title">开源中国</p>
</div>
@ -125,7 +128,7 @@
<el-form-item>
<el-button type="primary" @click="handleSaveUser">
<el-icon>
<ele-Position/>
<ele-Position />
</el-icon>
更新个人信息
</el-button>
@ -140,13 +143,14 @@
</template>
<script setup lang="ts" name="personal">
import {computed, reactive} from 'vue';
import {formatAxis} from '/@/utils/formatTime';
import {useUserInfo} from '/@/stores/userInfo';
import {editInfo} from '/@/api/admin/user'
import {useMessage} from "/@/hooks/message";
import {Session} from "/@/utils/storage";
import {rule} from "/@/utils/validate";
import { computed, reactive } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { useUserInfo } from '/@/stores/userInfo';
import { editInfo } from '/@/api/admin/user'
import { useMessage } from "/@/hooks/message";
import { Session } from "/@/utils/storage";
import { rule } from "/@/utils/validate";
import other from '/@/utils/other';
// 定义变量内容
const formData = reactive({
@ -165,7 +169,7 @@ const formdataRef = ref()
const ruleForm = reactive({
password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" },{ validator: rule.validatePhone, trigger: 'blur' }],
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }, { validator: rule.validatePhone, trigger: 'blur' }],
nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
@ -193,22 +197,19 @@ const headers = computed(() => {
onMounted(() => {
const data = useUserInfo().userInfos
Object.assign(formData,data.user)
Object.assign(formData, data.user)
formData.password = ''
})
const handleSaveUser = () =>{
const handleSaveUser = () => {
formdataRef.value.validate((valid: boolean) => {
if (!valid) {
return false
}
editInfo(formData).then(() => {
useMessage().success("修改成功")
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
// 更新上下文的 user信息
useUserInfo().setUserInfos()
}).catch(err => {
useMessage().error(err.msg)
})
@ -234,8 +235,7 @@ const handleClick = (thirdpart: string) => {
client_id = "101322838";
url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
} else if (thirdpart === "gitee") {
client_id =
"235ce26bbc59565b82c989aa3a407ce844cf59a7c5e0f9caa9bb3bf32cee5952";
client_id = '0c29cfd9cb1e0037fc837521bc08c1a7483d8fd9b3e123d46beec59a5544a881'
url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
} else if (thirdpart === "osc") {
client_id = "neIIqlwGsjsfsA6uxNqD";
@ -249,24 +249,29 @@ const handleClick = (thirdpart: string) => {
<style scoped lang="scss">
@import '../../theme/mixins/index.scss';
.personal {
.personal-user {
height: 130px;
display: flex;
align-items: center;
.personal-user-left {
width: 180px;
height: 130px;
border-radius: 3px;
:deep(.el-upload) {
height: 100%;
}
.personal-user-left-upload {
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
&:hover {
img {
animation: logoAnimation 0.3s ease-in-out;
@ -274,51 +279,63 @@ const handleClick = (thirdpart: string) => {
}
}
}
.personal-user-right {
flex: 1;
padding: 0 15px;
.personal-title {
font-size: 18px;
@include text-ellipsis(1);
}
.personal-item {
display: flex;
align-items: center;
font-size: 13px;
.personal-item-label {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
}
.personal-item-value {
@include text-ellipsis(1);
}
}
}
}
.personal-info {
.personal-info-more {
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
&:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
.personal-info-box {
height: 130px;
overflow: hidden;
.personal-info-ul {
list-style: none;
.personal-info-li {
font-size: 13px;
padding-bottom: 10px;
.personal-info-li-title {
display: inline-block;
@include text-ellipsis(1);
color: var(--el-text-color-secondary);
text-decoration: none;
}
& a:hover {
color: var(--el-color-primary);
cursor: pointer;
@ -327,6 +344,7 @@ const handleClick = (thirdpart: string) => {
}
}
}
.personal-recommend-row {
.personal-recommend-col {
.personal-recommend {
@ -335,6 +353,7 @@ const handleClick = (thirdpart: string) => {
border-radius: 3px;
overflow: hidden;
cursor: pointer;
&:hover {
i {
right: 0px !important;
@ -342,6 +361,7 @@ const handleClick = (thirdpart: string) => {
transition: all ease 0.3s;
}
}
i {
position: absolute;
right: -10px;
@ -350,12 +370,14 @@ const handleClick = (thirdpart: string) => {
transform: rotate(-30deg);
transition: all ease 0.3s;
}
.personal-recommend-auto {
padding: 15px;
position: absolute;
left: 0;
top: 5%;
color: var(--next-color-white);
.personal-recommend-msg {
font-size: 12px;
margin-top: 10px;
@ -364,11 +386,13 @@ const handleClick = (thirdpart: string) => {
}
}
}
.personal-edit {
.personal-edit-title {
position: relative;
padding-left: 10px;
color: var(--el-text-color-regular);
&::after {
content: '';
width: 2px;
@ -380,21 +404,26 @@ const handleClick = (thirdpart: string) => {
background: var(--el-color-primary);
}
}
.personal-edit-safe-box {
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
padding: 15px 0;
.personal-edit-safe-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.personal-edit-safe-item-left {
flex: 1;
overflow: hidden;
.personal-edit-safe-item-left-label {
color: var(--el-text-color-regular);
margin-bottom: 5px;
}
.personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
@ -402,6 +431,7 @@ const handleClick = (thirdpart: string) => {
}
}
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;