2023-07-26 15:54:34 +08:00
|
|
|
<template>
|
2023-08-05 12:52:56 +08:00
|
|
|
<div class="generate">
|
|
|
|
|
<div v-if="msg.cli == 'Sketchboard'" class="generate_checkbox">
|
|
|
|
|
<div>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" v-model="checkbox.imageOnly">
|
|
|
|
|
<span>Image Only</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" v-model="checkbox.textOnly">
|
|
|
|
|
<span>Text Only</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" v-model="checkbox.textImage">
|
|
|
|
|
<span>Text-Image</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="generage_input">
|
|
|
|
|
<input class="search_input" placeholder="Promopt input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
|
|
|
|
<div class="generage_btn started_btn">Generate</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="msg.cli == 'Sketchboard'" class="generage_img">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="generage_img">
|
|
|
|
|
<div class="generage_img_item" v-for="item,index in fileList" :key="item.imgUrl" @click="generageAdd(item)" :class="{active:item?.checked}">
|
|
|
|
|
<img v-lazy="item.imgUrl" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-26 15:54:34 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { defineComponent, ref} from 'vue'
|
|
|
|
|
import { Https } from "@/tool/https";
|
2023-08-05 12:52:56 +08:00
|
|
|
import { useStore } from "vuex";
|
2023-07-26 15:54:34 +08:00
|
|
|
import { message } from 'ant-design-vue';
|
2023-08-05 12:52:56 +08:00
|
|
|
import GO from '@/tool/GO';
|
2023-07-26 15:54:34 +08:00
|
|
|
export default defineComponent({
|
2023-08-05 12:52:56 +08:00
|
|
|
props: ["msg"],
|
|
|
|
|
setup(prop) {
|
|
|
|
|
// console.log(prop.msg);
|
|
|
|
|
let checkbox={
|
|
|
|
|
imageOnly:false,
|
|
|
|
|
textOnly:false,
|
|
|
|
|
textImage:false,
|
|
|
|
|
}
|
2023-07-26 15:54:34 +08:00
|
|
|
let imgList = ref([])
|
|
|
|
|
let selectImgList:any = ref([])
|
|
|
|
|
let selectImgListIds:any = ref([])
|
|
|
|
|
let isShowLoading:any = ref(false)
|
|
|
|
|
let selectCode:any = ref('')
|
|
|
|
|
let currentPage:any = ref(1)
|
|
|
|
|
let searchPictureName = ref('')
|
|
|
|
|
let pageSize = ref(20)
|
|
|
|
|
let total = ref(0)
|
|
|
|
|
let searcMaterialhName:any = ref('') //搜索名字
|
|
|
|
|
let designType:any = ref(null)
|
2023-08-05 12:52:56 +08:00
|
|
|
let store = useStore()
|
|
|
|
|
let fileList = ref([
|
|
|
|
|
{
|
|
|
|
|
imgUrl:'https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png',
|
|
|
|
|
id_:1
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imgUrl:'https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png',
|
|
|
|
|
id_:2
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
imgUrl:'https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png',
|
|
|
|
|
id_:3
|
|
|
|
|
|
|
|
|
|
},{
|
|
|
|
|
imgUrl:'https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png',
|
|
|
|
|
id_:4
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
])
|
2023-07-26 15:54:34 +08:00
|
|
|
return{
|
|
|
|
|
imgList,
|
|
|
|
|
selectImgList,
|
|
|
|
|
selectImgListIds,
|
|
|
|
|
isShowLoading,
|
|
|
|
|
selectCode,
|
|
|
|
|
currentPage,
|
|
|
|
|
searchPictureName,
|
|
|
|
|
pageSize,
|
|
|
|
|
total,
|
|
|
|
|
searcMaterialhName,
|
|
|
|
|
designType,
|
2023-08-05 12:52:56 +08:00
|
|
|
checkbox,
|
|
|
|
|
store,
|
|
|
|
|
fileList,
|
2023-07-26 15:54:34 +08:00
|
|
|
}
|
|
|
|
|
},
|
2023-08-05 12:52:56 +08:00
|
|
|
mounted(){
|
|
|
|
|
// this.fileList.forEach((item,index)=>{
|
|
|
|
|
// item.checked = true
|
|
|
|
|
// item.type_ = 'generate'
|
|
|
|
|
// item.id_ = GO.id++
|
|
|
|
|
// })
|
|
|
|
|
// this.store.commit("addGenerateFils", this.fileList);
|
2023-07-26 15:54:34 +08:00
|
|
|
|
2023-08-05 12:52:56 +08:00
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
|
|
|
|
|
generageAdd(data:any){
|
|
|
|
|
data.type_ = 'generate'
|
|
|
|
|
this.store.commit("addGenerateMaterialFils", data);
|
|
|
|
|
},
|
2023-07-26 15:54:34 +08:00
|
|
|
getLibraryList(){
|
|
|
|
|
let data = {
|
|
|
|
|
level1Type:this.selectCode,
|
|
|
|
|
level2Type:this.designType,
|
|
|
|
|
page:this.currentPage,
|
|
|
|
|
pictureName:this.searchPictureName,
|
|
|
|
|
size:this.pageSize,
|
|
|
|
|
}
|
|
|
|
|
this.isShowLoading = true
|
|
|
|
|
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
|
|
|
|
(rv: any) => {
|
|
|
|
|
this.imgList = rv.content
|
|
|
|
|
this.total = rv.total
|
|
|
|
|
this.isShowLoading = false
|
|
|
|
|
}
|
|
|
|
|
).catch((res)=>{
|
|
|
|
|
this.isShowLoading = false
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
closeModal(){
|
2023-08-05 12:52:56 +08:00
|
|
|
// this.myMaterialModalShow = false
|
2023-07-26 15:54:34 +08:00
|
|
|
this.searchPictureName = ''
|
|
|
|
|
this.designType = null
|
|
|
|
|
this.selectImgList = []
|
|
|
|
|
this.selectImgListIds = []
|
|
|
|
|
this.imgList = []
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
this.pageSize = 10
|
|
|
|
|
this.total = 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
2023-08-05 12:52:56 +08:00
|
|
|
.generate{
|
|
|
|
|
height: 30rem;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
border-right: 1px solid #e5e5e5;
|
|
|
|
|
&.generate::-webkit-scrollbar{display: none;}
|
2023-07-26 15:54:34 +08:00
|
|
|
|
2023-08-05 12:52:56 +08:00
|
|
|
.generate_checkbox,.generage_input{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding-top: 2.5rem;
|
|
|
|
|
padding-bottom: 2rem;
|
|
|
|
|
}
|
|
|
|
|
.generate_checkbox{
|
|
|
|
|
div{
|
|
|
|
|
margin-right: 4rem;
|
|
|
|
|
label{
|
|
|
|
|
display: flex;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
input{
|
|
|
|
|
margin-right: .5rem;
|
|
|
|
|
padding-left: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.generage_input{
|
|
|
|
|
input{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: .3rem;
|
|
|
|
|
border-radius: .5rem;
|
|
|
|
|
width: 70%;
|
|
|
|
|
border: 1px solid rgba(0,0,0,.15);
|
|
|
|
|
|
|
|
|
|
&input:-moz-placeholder{
|
|
|
|
|
color: rgba(0,0,0,.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&input:-ms-input-placeholder {
|
|
|
|
|
color: rgba(0,0,0,.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&input::-webkit-input-placeholder {
|
|
|
|
|
color: rgba(0,0,0,.15);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.generage_btn{
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.generage_img{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.generage_img_item{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 0 2rem 2rem 0;
|
|
|
|
|
&.active{
|
|
|
|
|
opacity: .5;
|
|
|
|
|
// border: 2px solid;
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
img{
|
|
|
|
|
transform: scale(.9);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
img{
|
|
|
|
|
width: 10rem;
|
|
|
|
|
height: 10rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.my_material_modal{
|
|
|
|
|
border-radius: 2rem;
|
2023-07-26 15:54:34 +08:00
|
|
|
.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>
|
