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