parent
2cb471ec92
commit
d9f2543d30
15 changed files with 1190 additions and 1211 deletions
@ -1,190 +1,198 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<h6 class="p-title">系统logo设置</h6> |
||||
<el-form ref="form" label-width="100px"> |
||||
<el-form-item label="标题"> |
||||
<el-input v-model="form.title " ref="account" placeholder="请输入标题" style="width: 400px"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="图标"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
||||
<div class="uploader-default" v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传图标</p> |
||||
</div> |
||||
<div class="page"> |
||||
<h6 class="p-title">系统logo设置</h6> |
||||
<el-form ref="form" |
||||
label-width="100px"> |
||||
<el-form-item label="标题"> |
||||
<el-input v-model="form.title " |
||||
ref="account" |
||||
placeholder="请输入标题" |
||||
style="width: 400px"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="图标"> |
||||
<el-upload class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
action="" |
||||
:http-request="handleRequest"> |
||||
<img v-if="coverUrl" |
||||
:src="coverUrl" |
||||
class="avatar"> |
||||
<div class="uploader-default" |
||||
v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传图标</p> |
||||
</div> |
||||
|
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>只能上传jpg/png文件</p> |
||||
<p>图标将按1:1显示，最佳分辨率100*100</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="save">{{ form.id ? "更新" : "创建" }}</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div slot="tip" |
||||
class="el-upload__tip"> |
||||
<p>只能上传jpg/png文件</p> |
||||
<p>图标将按1:1显示，最佳分辨率100*100</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" |
||||
@click="save">{{ form.id ? "更新" : "创建" }}</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
import { mapActions, mapState } from "vuex"; |
||||
import Oss from '@/components/upload/upload.js' |
||||
export default { |
||||
name: "logo", |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
coverUrl: "", |
||||
uploadList: [], |
||||
form: { |
||||
id: "", |
||||
title: "", |
||||
logoUrl: "" |
||||
} |
||||
name: "logo", |
||||
data () { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
coverUrl: "", |
||||
uploadList: [], |
||||
form: { |
||||
id: "", |
||||
title: "", |
||||
logoUrl: "" |
||||
} |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getSystemDetail(); |
||||
}, |
||||
methods: { |
||||
...mapActions("user", [ |
||||
"setTitle", "setLogoUrl" |
||||
]), |
||||
getSystemDetail () { |
||||
this.$get(this.api.logoDetail).then(res => { |
||||
if (res.data) { |
||||
this.form = res.data; |
||||
this.coverUrl = res.data.logoUrl; |
||||
this.uploadList.push({ |
||||
name: "logo.jpg", |
||||
url: this.coverUrl |
||||
}); |
||||
this.setTitle(res.data.title); |
||||
this.setLogoUrl(res.data.logoUrl); |
||||
} |
||||
}).catch(res => { }); |
||||
}, |
||||
mounted() { |
||||
this.getSystemDetail(); |
||||
handleExceed (files, fileList) { // 上传文件 |
||||
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
||||
}, |
||||
methods: { |
||||
...mapActions("user", [ |
||||
"setTitle", "setLogoUrl" |
||||
]), |
||||
getSystemDetail () { |
||||
this.$get(this.api.logoDetail).then(res => { |
||||
if (res.data) { |
||||
this.form = res.data; |
||||
this.coverUrl = res.data.logoUrl; |
||||
this.uploadList.push({ |
||||
name: "logo.jpg", |
||||
url: this.coverUrl |
||||
}); |
||||
this.setTitle(res.data.title); |
||||
this.setLogoUrl(res.data.logoUrl); |
||||
} |
||||
}).catch(res => {}); |
||||
}, |
||||
handleExceed(files, fileList) { // 上传文件 |
||||
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
this.coverUrl = res.data.filesResult.fileUrl; |
||||
}, |
||||
uploadError(err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||
this.coverUrl = ""; |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
save() { |
||||
this.form.logoUrl = this.coverUrl; |
||||
if (this.form.id) { |
||||
this.$post(this.api.logoUpdate, this.form).then(res => { |
||||
util.successMsg("更新成功"); |
||||
this.getSystemDetail(); |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.logoSave, this.form).then(res => { |
||||
util.successMsg("新增成功"); |
||||
this.getSystemDetail(); |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
// 自定义上传 |
||||
async handleRequest ({ file }) { |
||||
this.coverUrl && Oss.del(this.coverUrl) |
||||
Oss.upload(file).then(res => { |
||||
this.coverUrl = res.url |
||||
}) |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove (file, fileList) { |
||||
Oss.del(this.coverUrl) |
||||
this.coverUrl = '' |
||||
}, |
||||
save () { |
||||
this.form.logoUrl = this.coverUrl; |
||||
if (this.form.id) { |
||||
this.$post(this.api.logoUpdate, this.form).then(res => { |
||||
util.successMsg("更新成功"); |
||||
this.getSystemDetail(); |
||||
}).catch(res => { }); |
||||
} else { |
||||
this.$post(this.api.logoSave, this.form).then(res => { |
||||
util.successMsg("新增成功"); |
||||
this.getSystemDetail(); |
||||
}).catch(res => { }); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$avatar-width: 104px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $avatar-width; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
.el-upload { |
||||
position: relative; |
||||
width: $avatar-width; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
&:hover { |
||||
border-color: #409eff; |
||||
} |
||||
|
||||
.uploader-default { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
width: $avatar-width !important; |
||||
height: $avatar-width; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
.uploader-default { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
width: $avatar-width !important; |
||||
height: $avatar-width; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
|
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
|
||||
.avatar { |
||||
width: $avatar-width; |
||||
height: $avatar-width; |
||||
display: block; |
||||
} |
||||
} |
||||
.avatar { |
||||
width: $avatar-width; |
||||
height: $avatar-width; |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
|
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
|
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
.el-select, |
||||
.el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue