commit 8.5

src/component/HomePage/PrintboardUpload.vue

@@ -4,12 +4,27 @@
             <div class="left_upload_header">
                 <div class="upload_header_item">
                     <div class="switch_type_list">
-                        <div class="switch_type_item select_swtich">
-                            <span>Upload</span>
-                        </div>
-                        <div @click="openLibrary()" class="switch_type_item">
-                            <span>My Library</span>
-                        </div>
+                        <div
+							@click="open(1)"
+							class="switch_type_item"
+							:class="[openClick == 1 ? 'select_swtich' : '']"
+						>
+							<span>Upload</span>
+						</div>
+						<div
+							@click="open(2)"
+							class="switch_type_item"
+							:class="[openClick == 2 ? 'select_swtich' : '']"
+						>
+							<span>Library</span>
+						</div>
+						<div
+							@click="open(3)"
+							class="switch_type_item"
+							:class="[openClick == 3 ? 'select_swtich' : '']"
+						>
+							<span>Generate</span>
+						</div>
                     </div>
                 </div>
                 <div class="upload_header_item">
@@ -17,7 +32,7 @@
                     <div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
                 </div>
             </div>
-             <div class="printboard_body">
+             <div v-show="openClick == 1" class="printboard_body">
                 <div class="upload_img_body">
                     <div class="upload_item">
                         <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
@@ -65,6 +80,8 @@
                     <span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
                 </div>
             </div>
+			<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
+			<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
         </div>
         <div class="generate_print">
             <div class="generate_print_header">
@@ -88,7 +105,6 @@
         </div>
 
         <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
-        <Material ref="Material" @confirmSelect="confirmSelect"></Material>
     </div>
 </template>
 <script lang="ts">
@@ -101,20 +117,24 @@ import { Https } from "@/tool/https";
 import { message,Upload} from 'ant-design-vue';
 import Cropper from '@/component/HomePage/Cropper.vue'
 import Material from '@/component/HomePage/Material.vue'
+import Generate from "@/component/HomePage/Generate.vue";
 export default defineComponent({
     components:{
         Cropper,
-        Material
+        Material,
+		Generate
     },
     setup(){
         let store:any =useStore()
         let fileList:any = ref([]),//选中的文件id数据
             printImgList:any = ref([]), //print的印花图片
             moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
+        let openClick: any = ref(1);
         return {
             fileList,
             printImgList,
-            moodBoards
+            moodBoards,
+			openClick
         }
     },
     computed:{
@@ -150,6 +170,9 @@ export default defineComponent({
             currentFileNum:0, //当前上传的文件数
             isUpload:false,
             generateloading:false,
+			sonData: {
+                cli: "Printboard",
+            },
 
         }
     },
@@ -158,6 +181,9 @@ export default defineComponent({
         this.uploadUrl = getUploadUrl()
     },
      methods:{
+		open(num: Number) {
+            this.openClick = num;
+        },
         openLibrary(){
             let material:any = this.$refs.Material
             material.init('Printboard')