aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

09-12

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-12 10:11:27 +08:00
parent 3440f2f868
commit 173f35042d
71 changed files with 4291 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/component/HomePage/MoodboardUpload.vue
View File

@@ -94,7 +94,6 @@
<Material
v-show="openClick == 2"
ref="Material"
@confirmSelect="confirmSelect"
msg="Moodboard"
></Material>
<Generate
@@ -123,14 +122,17 @@
<div>Layout of selected moodboard</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
</div>
<div class="modal_img" :class="{active:flex_direction}">
<!-- <div v-for="item,index in moodb_className" :class="[item]" class="modal_imgItem">
<img :src="moodboarList[index].imgUrl">
</div> -->
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl">
<img :src="item.imgUrl" v-modelImg>
</div>
</div>
<div v-else class="modal_img">
<img :src="modalImg[0].imgUrl">
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
@@ -138,21 +140,24 @@
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed} from "vue";
import { defineComponent, h, ref ,computed,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout },
setup() {
const store = useStore()
let lessenList: any = ref([]);
let fileList: any = ref([]);
let templateModal: any = ref(false);
@@ -162,6 +167,12 @@ export default defineComponent({
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false)
let loadingShow = ref(false)
let modalImg:any= computed(()=>{
console.log(store.state.UploadFilesModule.disposeMoodboard);
return store.state.UploadFilesModule.disposeMoodboard
})
return {
fileList,
lessenList,
@@ -171,7 +182,9 @@ export default defineComponent({
moodb_className,
flex_direction,
layoutList,
layoutOpen
layoutOpen,
loadingShow,
modalImg
};
},
data() {
@@ -208,8 +221,31 @@ export default defineComponent({
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
},
methods: {
open(num: Number) {
this.openClick = num;
@@ -240,7 +276,6 @@ export default defineComponent({
message.error('You can select up to 8 images')
}else{
this.store.commit("setMoodboardFile", fileList);
this.store.commit("clearMoodTemplateId");
}
} else if (file.status === "error") {
let index = -1;
@@ -254,25 +289,6 @@ export default defineComponent({
}
message.error(file.name + "upload failed");
}
},
confirmSelect(event:any){
for(let item of event){
let data = {
imgUrl:item.url,
resData:item,
status:'done',
}
if(this.fileList.length == 8){
message.error('Maximum number of allowable file uploads has been exceeded')
break
}else{
this.fileList.push(data)
}
}
this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('clearMoodTemplateId')
},
beforeUpload(file: any) {
const isJpgOrPng =
@@ -306,15 +322,22 @@ export default defineComponent({
this.fileList.splice(moodboard,1)
this.store.commit("setMoodboardFile", this.fileList);
}
this.store.commit("clearMoodTemplateId");
if(this.store.state.UploadFilesModule.moodboard.length == 0){
this.store.commit("setDisposeMoodboard", {});
}
},
recollection() {
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
);
let disposeMoodboard = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
);
let setboard = {
generate:[] as any,
@@ -333,10 +356,8 @@ export default defineComponent({
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.fileList = setboard.moodboard
let moodTemplateId =
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
this.store.commit("setMoodTemplateId", moodTemplateId);
},
changeTemplateModal() {
@@ -350,7 +371,9 @@ export default defineComponent({
},
layout(){
let arr = this.store.state.UploadFilesModule.moodboard
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
@@ -361,47 +384,40 @@ export default defineComponent({
}
this.moodb_className = this.moodb_[arr.length-1][random]
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('modal_img')
let file = await domTurnImg(layoutCentent)
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
})
},
setmoodbClass(val:any){
this.moodb_className = val
}
// randomRange(min: any, max: any, num: any) {
// // min最小值，max最大值 num排除的值
// let index = Math.floor(Math.random() * (max - min)) + min;
// while (index === num) {
// index = Math.floor(Math.random() * (max - min)) + min;
// }
// return index;
// },
// //随机重置图片顺序
// refetchTemplate() {
// let arr = Array.from({ length: this.templateFileList.length });
// for (let item of this.templateFileList) {
// let index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// while (arr[index]) {
// index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// }
// arr[index] = item;
// }
// this.templateFileList = arr;
// },
// //提交模板
// submitTemplate() {
// // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
// // this.store.commit("setMoodboardFile", this.fileList);
// // this.store.commit("setMoodTemplateId", this.moodTemplateId);
// // this.changeTemplateModal();
// },
},
});
</script>
@@ -413,6 +429,8 @@ export default defineComponent({
.modal_left {
padding-top: 4rem;
width: 47%;
display: flex;
flex-direction: column;
// width: 50rem;
.switch_type_list {
display: flex;
@@ -466,8 +484,8 @@ export default defineComponent({
}
.moodboard_body {
height: calc(100% - 5rem);
padding-top: 2.5rem;
flex: 1;
height: 30rem;
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
@@ -475,7 +493,7 @@ export default defineComponent({
display: none;
}
.upload_img_body {
height: calc(100% - 3rem);
height: 100%;
overflow-y: auto;
margin-bottom: 1rem;
}
@@ -563,16 +581,23 @@ export default defineComponent({
flex-wrap: wrap;
align-items: center;
flex-direction: column;
>img{
height: 100%;
}
&.active{
flex-direction: row;
}
.modal_imgItem{
position: relative;
overflow: hidden;
img{
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
.wh1{