yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

可切换本地与七牛云上传，增加头像与图片组建

Browse Source
This commit is contained in:
azunia
2020-08-26 17:16:49 +08:00
parent 98d5cab1d5
commit d6fe1339b2
17 changed files with 595 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/assets/noBody.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

web/src/components/customPic/index.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<span class="headerAvatar">
<template v-if="picType === 'avatar'">
<el-avatar :size="30" :src="avatar" v-if="userInfo.headerImg"></el-avatar>
<el-avatar :size="30" :src="require('@/assets/noBody.png')" v-else></el-avatar>
</template>
<template v-if="picType === 'img'">
<img :src="avatar" class="avatar" v-if="userInfo.headerImg" />
<img :src="require('@/assets/noBody.png')" class="avatar" v-else/>
</template>
<template v-if="picType === 'file'">
<img :src="file" class="file"/>
</template>
</span>
</template>
<script>
import { mapGetters } from 'vuex'
const path = process.env.VUE_APP_BASE_API
export default {
name: "customPic",
props: {
picType: {
type: String,
required: false,
default: "avatar"
},
picSrc: {
type: String,
required: false,
default: ""
}
},
data(){
return{
path: path,
}
},
computed:{
...mapGetters('user', ['userInfo']),
avatar(){
if(this.picSrc === ''){
if(this.userInfo.headerImg !== '' && this.userInfo.headerImg.slice(0, 4) === "http"){
return this.userInfo.headerImg
}
return this.path + this.userInfo.headerImg
}else{
if(this.picSrc !== '' && this.picSrc.slice(0, 4) === "http"){
return this.picSrc
}
return this.path + this.picSrc
}
},
file(){
if(this.picSrc && this.picSrc.slice(0, 4) !== "http"){
return this.path + this.picSrc
}
return this.picSrc
}
}
}
</script>
<style scoped>
.headerAvatar{
display: flex;
justify-content: center;
align-items: center;
}
.file{
width: 80px;
height: 80px;
position: relative;
}
</style>
web/src/view/example/upload/upload.vue
+5 -6
View File
@@ -17,12 +17,7 @@
<el-table :data="tableData" border stripe>
<el-table-column label="预览" width="100">
<template slot-scope="scope">
<img
:alt="scope.row.alt"
:src="scope.row.url"
height="80"
width="80"
/>
<CustomPic picType="file" :picSrc="scope.row.url"/>
</template>
</el-table-column>
<el-table-column label="日期" prop="UpdatedAt" width="180">
@@ -77,9 +72,13 @@ import infoList from "@/components/mixins/infoList";
import { getFileList, deleteFile } from "@/api/fileUploadAndDownload";
import { downloadImage } from "@/utils/downloadImg";
import { formatTimeToStr } from "@/utils/data";
import CustomPic from '@/components/customPic'
export default {
name: "Upload",
mixins: [infoList],
components: {
CustomPic
},
data() {
return {
fullscreenLoading: false,
web/src/view/layout/index.vue
+11 -4
View File
@@ -31,9 +31,9 @@
<Search />
<Screenfull class="screenfull"></Screenfull>
<el-dropdown>
<span class="el-dropdown-link">
<img :src="userInfo.headerImg" height="30" width="30" />
{{userInfo.title}}
<span class="header-avatar">
欢迎您，<CustomPic/>
<span style="margin-left: 5px">{{userInfo.nickName}}</span>
<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu class="dropdown-group" slot="dropdown">
@@ -95,6 +95,7 @@ import Search from '@/view/layout/search/search'
import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
import { mapGetters, mapActions } from 'vuex'
import { changePassword } from '@/api/user'
import CustomPic from '@/components/customPic'
export default {
name: 'Layout',
data() {
@@ -138,7 +139,8 @@ export default {
HistoryComponent,
Screenfull,
Search,
BottomInfo
BottomInfo,
CustomPic
},
methods: {
...mapActions('user', ['LoginOut']),
@@ -374,4 +376,9 @@ $mainHight: 100vh;
.screenfull {
display: inline-block;
}
.header-avatar{
display: flex;
justify-content: center;
align-items: center;
}
</style>
web/src/view/person/person.vue
+5 -2
View File
@@ -9,8 +9,7 @@
class="avatar-uploader"
name="headerImg"
>
<img :src="userInfo.headerImg" class="avatar" v-if="userInfo.headerImg" />
<i class="el-icon-plus avatar-uploader-icon" v-else></i>
<CustomPic picType="img"/>
</el-upload>
<!-- <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar> -->
@@ -23,6 +22,7 @@
</div>
</template>
<script>
import CustomPic from '@/components/customPic'
import { mapGetters, mapMutations } from 'vuex'
const path = process.env.VUE_APP_BASE_API
export default {
@@ -32,6 +32,9 @@ export default {
path:path
}
},
components: {
CustomPic
},
computed: {
...mapGetters('user', ['userInfo', 'token'])
},
web/src/view/superAdmin/user/user.vue
+5 -1
View File
@@ -7,7 +7,7 @@
<el-table-column label="头像" min-width="50">
<template slot-scope="scope">
<div :style="{'textAlign':'center'}">
<img :src="scope.row.headerImg" height="35" width="35" />
<CustomPic :picSrc="scope.row.headerImg"/>
</div>
</template>
</el-table-column>
@@ -106,9 +106,13 @@ import {
import { getAuthorityList } from "@/api/authority";
import infoList from "@/components/mixins/infoList";
import { mapGetters } from "vuex";
import CustomPic from '@/components/customPic'
export default {
name: "Api",
mixins: [infoList],
components: {
CustomPic
},
data() {
return {
listApi: getUserList,
web/src/view/systemTools/system/system.vue
+114 -103
View File
@@ -1,106 +1,116 @@
<template>
<div class="system">
<el-form :model="config" label-width="100px" ref="form" class="system">
<h2>系统配置</h2>
<el-form-item label="多点登录拦截">
<el-checkbox v-model="config.system.useMultipoint">开启</el-checkbox>
</el-form-item>
<el-form-item label="环境值">
<el-input v-model="config.system.env"></el-input>
</el-form-item>
<el-form-item label="端口值">
<el-input v-model.number="config.system.addr"></el-input>
</el-form-item>
<el-form-item label="数据库类型">
<el-select v-model="config.system.dbType">
<el-option value="sqlite"></el-option>
<el-option value="mysql"></el-option>
</el-select>
</el-form-item>
<h2>jwt签名</h2>
<el-form-item label="jwt签名">
<el-input v-model="config.jwt.signingKey"></el-input>
</el-form-item>
<h2>casbin配置</h2>
<el-form-item label="模型地址">
<el-input v-model="config.casbin.modelPath"></el-input>
</el-form-item>
<template v-show="config.system.dbType == 'mysql'">
<h2>mysql admin数据库配置</h2>
<el-form-item label="username">
<el-input v-model="config.mysql.username"></el-input>
</el-form-item>
<el-form-item label="password">
<el-input v-model="config.mysql.password"></el-input>
</el-form-item>
<el-form-item label="path">
<el-input v-model="config.mysql.path"></el-input>
</el-form-item>
<el-form-item label="dbname">
<el-input v-model="config.mysql.dbname"></el-input>
</el-form-item>
<el-form-item label="maxIdleConns">
<el-input v-model.number="config.mysql.maxIdleConns"></el-input>
</el-form-item>
<el-form-item label="maxOpenConns">
<el-input v-model.number="config.mysql.maxOpenConns"></el-input>
</el-form-item>
<el-form-item label="logMode">
<el-checkbox v-model="config.mysql.logMode"></el-checkbox>
</el-form-item>
</template>
<template v-show="config.system.dbType == 'sqlite'">
<h2>sqlite admin数据库配置</h2>
<el-form-item label="path">
<el-input v-model="config.sqlite.path"></el-input>
</el-form-item>
<el-form-item label="config">
<el-input v-model="config.sqlite.config"></el-input>
</el-form-item>
<el-form-item label="logMode">
<el-checkbox v-model="config.sqlite.logMode"></el-checkbox>
</el-form-item>
</template>
<h2>Redis admin数据库配置</h2>
<el-form-item label="addr">
<el-input v-model="config.redis.addr"></el-input>
</el-form-item>
<el-form-item label="password">
<el-input v-model="config.redis.password"></el-input>
</el-form-item>
<el-form-item label="db">
<el-input v-model="config.redis.db"></el-input>
</el-form-item>
<h2>七牛密钥配置</h2>
<el-form-item label="accessKey">
<el-input v-model="config.qiniu.accessKey"></el-input>
</el-form-item>
<el-form-item label="secretKey">
<el-input v-model="config.qiniu.secretKey"></el-input>
</el-form-item>
<h2>验证码配置</h2>
<el-form-item label="keyLong">
<el-input v-model.number="config.captcha.keyLong"></el-input>
</el-form-item>
<el-form-item label="imgWidth">
<el-input v-model.number="config.captcha.imgWidth"></el-input>
</el-form-item>
<el-form-item label="imgHeight">
<el-input v-model.number="config.captcha.imgHeight"></el-input>
</el-form-item>
<h2>日志配置</h2>
<el-form-item label="prefix">
<el-input v-model.number="config.log.prefix"></el-input>
</el-form-item>
<el-form-item label="logFile">
<el-checkbox v-model="config.log.logFile"></el-checkbox>
</el-form-item>
<el-form-item>
<el-button @click="update" type="primary">立即更新</el-button>
<el-button @click="reload" type="primary">重启服务（开发中）</el-button>
</el-form-item>
</el-form>
</div>
<div class="system">
<el-form :model="config" label-width="100px" ref="form" class="system">
<h2>系统配置</h2>
<el-form-item label="多点登录拦截">
<el-checkbox v-model="config.system.useMultipoint">开启</el-checkbox>
</el-form-item>
<el-form-item label="环境值">
<el-input v-model="config.system.env"></el-input>
</el-form-item>
<el-form-item label="端口值">
<el-input v-model.number="config.system.addr"></el-input>
</el-form-item>
<el-form-item label="数据库类型">
<el-select v-model="config.system.dbType">
<el-option value="sqlite"></el-option>
<el-option value="mysql"></el-option>
</el-select>
</el-form-item>
<h2>jwt签名</h2>
<el-form-item label="jwt签名">
<el-input v-model="config.jwt.signingKey"></el-input>
</el-form-item>
<h2>casbin配置</h2>
<el-form-item label="模型地址">
<el-input v-model="config.casbin.modelPath"></el-input>
</el-form-item>
<template v-show="config.system.dbType == 'mysql'">
<h2>mysql admin数据库配置</h2>
<el-form-item label="username">
<el-input v-model="config.mysql.username"></el-input>
</el-form-item>
<el-form-item label="password">
<el-input v-model="config.mysql.password"></el-input>
</el-form-item>
<el-form-item label="path">
<el-input v-model="config.mysql.path"></el-input>
</el-form-item>
<el-form-item label="dbname">
<el-input v-model="config.mysql.dbname"></el-input>
</el-form-item>
<el-form-item label="maxIdleConns">
<el-input v-model.number="config.mysql.maxIdleConns"></el-input>
</el-form-item>
<el-form-item label="maxOpenConns">
<el-input v-model.number="config.mysql.maxOpenConns"></el-input>
</el-form-item>
<el-form-item label="logMode">
<el-checkbox v-model="config.mysql.logMode"></el-checkbox>
</el-form-item>
</template>
<template v-show="config.system.dbType == 'sqlite'">
<h2>sqlite admin数据库配置</h2>
<el-form-item label="path">
<el-input v-model="config.sqlite.path"></el-input>
</el-form-item>
<el-form-item label="config">
<el-input v-model="config.sqlite.config"></el-input>
</el-form-item>
<el-form-item label="logMode">
<el-checkbox v-model="config.sqlite.logMode"></el-checkbox>
</el-form-item>
</template>
<h2>Redis admin数据库配置</h2>
<el-form-item label="addr">
<el-input v-model="config.redis.addr"></el-input>
</el-form-item>
<el-form-item label="password">
<el-input v-model="config.redis.password"></el-input>
</el-form-item>
<el-form-item label="db">
<el-input v-model="config.redis.db"></el-input>
</el-form-item>
<h2>上传配置</h2>
<el-form-item label="本地或七牛云">
<el-checkbox v-model="config.localUpload.local">本地</el-checkbox>
</el-form-item>
<el-form-item label="本地头像路径">
<el-input v-model="config.localUpload.avatarPath"></el-input>
</el-form-item>
<el-form-item label="本地文件路径">
<el-input v-model="config.localUpload.filePath"></el-input>
</el-form-item>
<h2>七牛密钥配置</h2>
<el-form-item label="accessKey">
<el-input v-model="config.qiniu.accessKey"></el-input>
</el-form-item>
<el-form-item label="secretKey">
<el-input v-model="config.qiniu.secretKey"></el-input>
</el-form-item>
<h2>验证码配置</h2>
<el-form-item label="keyLong">
<el-input v-model.number="config.captcha.keyLong"></el-input>
</el-form-item>
<el-form-item label="imgWidth">
<el-input v-model.number="config.captcha.imgWidth"></el-input>
</el-form-item>
<el-form-item label="imgHeight">
<el-input v-model.number="config.captcha.imgHeight"></el-input>
</el-form-item>
<h2>日志配置</h2>
<el-form-item label="prefix">
<el-input v-model.number="config.log.prefix"></el-input>
</el-form-item>
<el-form-item label="logFile">
<el-checkbox v-model="config.log.logFile"></el-checkbox>
</el-form-item>
<el-form-item>
<el-button @click="update" type="primary">立即更新</el-button>
<el-button @click="reload" type="primary">重启服务（开发中）</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
@@ -118,7 +128,8 @@ export default {
redis: {},
qiniu: {},
captcha: {},
log: {}
log: {},
localUpload: {}
}
};
},