379 lines
10 KiB
Vue
379 lines
10 KiB
Vue
<template>
|
|
<div class="moodboard_body">
|
|
<div class="upload_img_body scroll_style" >
|
|
<div class="upload_item">
|
|
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
|
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
|
<a-spin :indicator="indicator" tip="Uploading..."/>
|
|
</div>
|
|
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
|
<img :src="file?.imgUrl" class="upload_img">
|
|
<div class="delete_file_block" @click="deleteFile(index)">{{ $t('Upload.Delete') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
|
<a-upload
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload
|
|
}"
|
|
:headers="{Authorization:token}"
|
|
v-model:file-list="fileList"
|
|
:before-upload="beforeUpload"
|
|
multiple
|
|
:maxCount="10"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="(file)=>fileUploadChange(file)"
|
|
>
|
|
<div class="upload_tip_block" v-show="fileList.length < 10">
|
|
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
|
</div>
|
|
</a-upload>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="upload_max_tip">
|
|
<span class="icon iconfont icon-zhuyi"></span>
|
|
<span>{{ $t('Upload.Maximum2M') }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, ref, h} from 'vue'
|
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import {getUploadUrl} from '@/tool/util'
|
|
import {getCookie} from '@/tool/cookie'
|
|
import { message, Upload } from 'ant-design-vue';
|
|
import {useStore} from 'vuex'
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
export default defineComponent({
|
|
props: ["msg"],
|
|
setup(prop) {
|
|
let fileList:any = ref([])
|
|
|
|
let {t} = useI18n()
|
|
return{
|
|
fileList,
|
|
t
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
indicator : h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: '2.4rem',
|
|
},
|
|
spin: true,
|
|
}),
|
|
uploadUrl:'',
|
|
upload:{
|
|
isPin:0,
|
|
gender:'',
|
|
level1Type:'Moodboard',
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token:'',
|
|
store:useStore(),
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
this.token = getCookie('token') || ''
|
|
this.uploadUrl = getUploadUrl()
|
|
},
|
|
methods:{
|
|
|
|
beforeUpload(file:any){
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
|
if (!isJpgOrPng) {
|
|
message.info(this.t('Upload.jsContent1'));
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.info(this.t('Upload.jsContent2'));
|
|
}
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
},
|
|
fileUploadChange(data:any){
|
|
let file = data.file
|
|
if(file.status === 'done'){
|
|
let res = JSON.parse(file.xhr.response)
|
|
file.imgUrl = res.data.url
|
|
file.resData = res.data
|
|
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
|
this.store.commit('setMoodboardFile',fileList)
|
|
}else if(file.status === 'error'){
|
|
let index = -1
|
|
this.fileList.forEach((ele:any,index1:any) => {
|
|
if(file.uid === ele.uid){
|
|
index = index1
|
|
}
|
|
});
|
|
if(index > -1){
|
|
this.fileList.splice(index, 1)
|
|
}
|
|
message.warning(file.name + this.t('Upload.jsContent3'))
|
|
}
|
|
},
|
|
deleteFile(index:any){
|
|
this.fileList.splice(index, 1)
|
|
this.store.commit('setMoodboardFile',this.fileList)
|
|
},
|
|
|
|
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.generate{
|
|
// background: #030303;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
|
|
}
|
|
.my_material_modal{
|
|
border-radius: 2rem;
|
|
.ant-modal-close{
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
position: absolute;
|
|
top: -1.8rem;
|
|
right: -1.8rem;
|
|
}
|
|
|
|
.ant-modal-header{
|
|
display: none;
|
|
}
|
|
|
|
.ant-modal-body{
|
|
background: #F2F3FB;
|
|
height: 80vh;
|
|
min-height: 72rem;
|
|
overflow-y: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.my_material_header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 6.6rem;
|
|
background: #F7F7F7;
|
|
padding: 0 3.4rem 0 3.1rem;
|
|
|
|
.my_material_title{
|
|
font-size: 1.8rem;
|
|
color: #030303;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.my_material_header_right{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.content_search_block{
|
|
margin-right: 5rem;
|
|
display: flex;
|
|
|
|
.search_input{
|
|
width: 30rem;
|
|
padding-left: 1.5rem;
|
|
height: 4rem;
|
|
line-height: 3.8rem;
|
|
background: #FFFFFF;
|
|
border: 0.1rem solid #F1F1F1;
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
|
|
&::placeholder {
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
|
|
.search_icon_block{
|
|
width: 6rem;
|
|
height: 4rem;
|
|
line-height: 4rem;
|
|
text-align: center;
|
|
background: #343579;
|
|
cursor: pointer;
|
|
|
|
.icon-sousuo{
|
|
font-size: 2rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon_close{
|
|
color: rgba(174, 178, 183, 1);
|
|
font-size: 2.4rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.my_material_content{
|
|
padding: 0 3rem 3.5rem 3rem;
|
|
height: calc(100% - 6.6rem);
|
|
position: relative;
|
|
|
|
.material_content_top{
|
|
padding: 1.3rem 0 2.1rem;
|
|
height: 7rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.material_content_top_title{
|
|
font-size: 20px;
|
|
color: #030303;
|
|
}
|
|
|
|
.material_content_top_right{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.select_block{
|
|
background: #FFFFFF;
|
|
color: #1A1A1A !important;
|
|
margin-right: 2.3rem;
|
|
|
|
.icon-xiala{
|
|
color: #1A1A1A !important;
|
|
}
|
|
}
|
|
|
|
.check_all_block{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.6rem;
|
|
color: #64686D;
|
|
cursor: pointer;
|
|
|
|
&.check_all{
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.check_block{
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
background: #EBECF4;
|
|
border: 0.1rem solid #64686D;
|
|
padding: 0.3rem;
|
|
margin-right: 0.7rem;
|
|
|
|
.check_block_body{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #343579;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.material_content_body{
|
|
width: 100%;
|
|
height: calc(100% - 19rem);
|
|
overflow-y: auto;
|
|
position: relative;
|
|
|
|
.content_img_item{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 0 1.4rem;
|
|
margin-bottom: 2.8rem;
|
|
|
|
.content_img_item_block{
|
|
border: 0.1rem solid transparent;
|
|
width: 16.5rem;
|
|
height: 16.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&.select_item_img{
|
|
border-color: #343579;
|
|
}
|
|
|
|
.print_content_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content_img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
}
|
|
.content_img_name{
|
|
width: 16.5rem;
|
|
height: 3.5rem;
|
|
line-height: 3.5rem;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 1.4rem;
|
|
color: #030303;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.no_data_block{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
|
|
&.loading_block{
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
}
|
|
|
|
.material_confirm{
|
|
width: 9.8rem;
|
|
height: 3.6rem;
|
|
line-height: 3.6rem;
|
|
font-size: 1.4rem;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
color: #FFFFFF;
|
|
background: #343579;
|
|
cursor: pointer;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.table_pagination{
|
|
position: absolute;
|
|
bottom: 3.5rem;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|