262 lines
11 KiB
Vue
262 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<el-container>
|
|||
|
|
<el-main id="theme">
|
|||
|
|
<div class="text-general-color category-title">
|
|||
|
|
<p style="padding-left: 5px;">
|
|||
|
|
logo
|
|||
|
|
<el-tooltip class="item" content="仅支持png、jpg、jpeg、gif格式的图片文件，文件大小5M内，建议宽高180*30左右" placement="bottom-start">
|
|||
|
|
<i style="font-size: 13px;" class="awsui-iconfont"></i>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin: 20px 0 20px 20px;">
|
|||
|
|
<div v-if="logoData.src != undefined" class="logo" style="width: 180px;height: 30px;position: relative;">
|
|||
|
|
<el-card style="height: 100%;width: 100%;" shadow="never" :body-style="{padding: '0px', height: '100%', width: '100%'}">
|
|||
|
|
<img :src=logoData.src class="image">
|
|||
|
|
</el-card>
|
|||
|
|
<div class="logo-mask"></div>
|
|||
|
|
<i class="awsui-iconfont text-general-color logo-del-icon" @click="removeFile('logo')"></i>
|
|||
|
|
</div>
|
|||
|
|
<div v-else style="width: 180px;height: 30px;" @click="openFileSelect('logo')">
|
|||
|
|
<el-card style="height: 100%;width: 100%;border: 1px dashed #ebeef5;cursor: pointer;" shadow="never" :body-style="{padding: '0px',height: '100%', width: '100%', 'text-align': 'center', 'vertical-align': 'middle', 'line-height': '30px'}">
|
|||
|
|
<i style="font-size: 15px;position: relative;top: 1px;" class="awsui-iconfont text-linker-color"></i>
|
|||
|
|
<span style="font-size: 12px;"> 添加logo</span>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-general-color category-title">
|
|||
|
|
<p style="padding-left: 5px;">
|
|||
|
|
轮播图
|
|||
|
|
<el-tooltip class="item" placement="bottom-start">
|
|||
|
|
<span slot="content">默认按照图片名称进行排序，不支持自定义排序<br/>仅支持png、jpg、jpeg、gif格式的图片文件，文件大小5M内，建议宽高1920*440</span>
|
|||
|
|
<i style="font-size: 13px;" class="awsui-iconfont"></i>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin: 20px 0 20px 20px;">
|
|||
|
|
<template v-for="item in bannerData">
|
|||
|
|
<div class="banner" style="width: 280px;height: 60px;margin-right: 20px;display:inline-block;position: relative; margin-bottom :15px;">
|
|||
|
|
<el-card style="height: 100%;width: 100%;" shadow="never" :body-style="{padding: '0px', height: '100%', width: '100%'}">
|
|||
|
|
<img :src="item.src" class="image">
|
|||
|
|
</el-card>
|
|||
|
|
<div class="banner-mask"></div>
|
|||
|
|
<i class="awsui-iconfont text-general-color banner-del-icon" style="cursor: pointer;float: right;position: relative;top: -38px;left: -5px;" @click="removeFile('banner', item.name)"></i>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<div style="width: 280px;height: 60px;display: inline-block;" @click="openFileSelect('banner')">
|
|||
|
|
<el-card style="height: 100%;width: 100%;border: 1px dashed #ebeef5;cursor: pointer;" shadow="never" :body-style="{padding: '0px',height: '100%', width: '100%', 'text-align': 'center', 'vertical-align': 'middle', 'line-height': '60px'}">
|
|||
|
|
<i style="font-size: 20px;position: relative;top: 2px;" class="awsui-iconfont text-linker-color"></i>
|
|||
|
|
<span style="font-size: 12px;"> 添加轮播图</span>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<PALUpload ref="logoUpload"
|
|||
|
|
:appId=appId
|
|||
|
|
:repositoryName="repositoryName"
|
|||
|
|
:groupValue=groupValue
|
|||
|
|
fileValue="logo"
|
|||
|
|
:show-file-list=false
|
|||
|
|
:on-success="uploadSuccess"
|
|||
|
|
:before-upload="beforeUpload"
|
|||
|
|
accept=".jpg,.jpeg,.gif,.png"
|
|||
|
|
:file-list="fileList">
|
|||
|
|
<div style="display: none;">
|
|||
|
|
<awsui-button id="selectLogoButton" style="width: 130px;" class="button-general-color" type="primary">文件上传</awsui-button>
|
|||
|
|
</div>
|
|||
|
|
</PALUpload>
|
|||
|
|
<PALUpload ref="bannerUpload"
|
|||
|
|
:appId=appId
|
|||
|
|
:repositoryName="repositoryName"
|
|||
|
|
:groupValue=groupValue
|
|||
|
|
fileValue="banner"
|
|||
|
|
multiple
|
|||
|
|
:show-file-list=false
|
|||
|
|
:on-success="uploadSuccess"
|
|||
|
|
:before-upload="beforeUpload"
|
|||
|
|
accept=".jpg,.jpeg,.gif,.png"
|
|||
|
|
:file-list="fileList">
|
|||
|
|
<div style="display: none;">
|
|||
|
|
<awsui-button id="selectBannerButton" style="width: 130px;" class="button-general-color" type="primary">文件上传</awsui-button>
|
|||
|
|
</div>
|
|||
|
|
</PALUpload>
|
|||
|
|
</el-main>
|
|||
|
|
</el-container>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import awsuiAxios from "../../awsuiAxios";
|
|||
|
|
import PALUpload from "@/components/common/upload";
|
|||
|
|
export default {
|
|||
|
|
name: "ThemeStyle",
|
|||
|
|
components: {PALUpload},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
appId: 'com.actionsoft.apps.coe.pal',
|
|||
|
|
repositoryName: 'tmp',
|
|||
|
|
groupValue:"portal",
|
|||
|
|
fileValue:"logo",// logo,banner
|
|||
|
|
uploadKey: Math.random() + '',
|
|||
|
|
multiple: false,
|
|||
|
|
fileList: [],
|
|||
|
|
logoData: {},// {'name':'','src':''}
|
|||
|
|
bannerData: [] // [{'name':'','src':''}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initData() {// 初始化
|
|||
|
|
const that = this;
|
|||
|
|
const params = {
|
|||
|
|
url:'jd',
|
|||
|
|
data:{
|
|||
|
|
cmd: 'com.actionsoft.apps.coe.pal_publish_publishgroup_theme_data_query'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 查询数据
|
|||
|
|
awsuiAxios.post(params).then(function (ro) {
|
|||
|
|
if(ro.result == 'ok') {
|
|||
|
|
that.logoData = ro.data.logoData;
|
|||
|
|
that.bannerData = ro.data.bannerData;
|
|||
|
|
} else {
|
|||
|
|
that.$message(ro.msg);
|
|||
|
|
}
|
|||
|
|
}).catch(error=>{
|
|||
|
|
console.log(error);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
openFileSelect(type) {
|
|||
|
|
if (type == 'logo') {// logo
|
|||
|
|
this.fileValue = 'logo';
|
|||
|
|
document.getElementById("selectLogoButton").click();
|
|||
|
|
} else {// 轮播图
|
|||
|
|
this.fileValue = 'banner';
|
|||
|
|
document.getElementById("selectBannerButton").click();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
removeFile(type, fileName) {// 删除图片
|
|||
|
|
this.$confirm('确定要删除吗？', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
confirmButtonClass: 'button-general-color',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
const that = this;
|
|||
|
|
const data = {
|
|||
|
|
url:'jd',
|
|||
|
|
data:{
|
|||
|
|
cmd: 'com.actionsoft.apps.coe.pal_publish_publishgroup_theme_data_remove',
|
|||
|
|
type: type,
|
|||
|
|
fileName: fileName
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 查询数据
|
|||
|
|
awsuiAxios.post(data).then(function (ro) {
|
|||
|
|
if(ro.result == 'ok') {
|
|||
|
|
that.$message({
|
|||
|
|
message: '删除成功',
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
that.initData();
|
|||
|
|
} else {
|
|||
|
|
that.$message.error('删除失败');
|
|||
|
|
}
|
|||
|
|
}).catch(error=>{
|
|||
|
|
console.log(error);
|
|||
|
|
})
|
|||
|
|
}).catch(() => {
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
uploadSuccess(response, file, fileList) {// 上传完成后保存
|
|||
|
|
const that = this;
|
|||
|
|
const data = {
|
|||
|
|
url:'jd',
|
|||
|
|
data:{
|
|||
|
|
cmd: 'com.actionsoft.apps.coe.pal_publish_publishgroup_theme_data_save',
|
|||
|
|
type: that.fileValue,
|
|||
|
|
fileName: file.name
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 查询数据
|
|||
|
|
awsuiAxios.post(data).then(function (ro) {
|
|||
|
|
if(ro.result == 'ok') {
|
|||
|
|
that.$message({
|
|||
|
|
message: '['+ file.name +']上传成功',
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
that.initData();
|
|||
|
|
} else {
|
|||
|
|
that.$message.error('['+ file.name +']上传失败');
|
|||
|
|
}
|
|||
|
|
}).catch(error=>{
|
|||
|
|
console.log(error);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
beforeUpload(file) {// 单个文件校验，返回false不影响其他文件上传
|
|||
|
|
const that = this;
|
|||
|
|
if (file.size > 5 * 1024 * 1024) {
|
|||
|
|
that.$message('图片[' + file.name + ']不能大于5M，上传失败!')
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.category-title {
|
|||
|
|
height: 25px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
vertical-align: center;
|
|||
|
|
margin: 10px 10px 5px 0px;
|
|||
|
|
border-left: 3px solid #4E7FF9;
|
|||
|
|
}
|
|||
|
|
.logo:hover .logo-del-icon{
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.logo-mask {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.logo:hover .logo-mask {
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 1px;
|
|||
|
|
top: 1px;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: rgba(125, 125, 125,0.5);
|
|||
|
|
}
|
|||
|
|
.logo-del-icon {
|
|||
|
|
cursor: pointer;
|
|||
|
|
float: right;
|
|||
|
|
position: relative;
|
|||
|
|
top: -23px;
|
|||
|
|
left: -5px;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.banner:hover .banner-del-icon{
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.banner-mask {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.banner:hover .banner-mask {
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 1px;
|
|||
|
|
top: 1px;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: rgba(125, 125, 125,0.5);
|
|||
|
|
}
|
|||
|
|
.banner-del-icon {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
</style>
|