detail更新

src/component/DetailCopy/detailLeft/sketch.vue

@@ -1,45 +1,18 @@
 <template>
     <div class="sketch">
 		<div class="detailText">Current Print</div>
-		<div class="select_sketch">
-			<img :src="selectDetail.path" alt="">
+		<div class="select_sketch" v-if="selectDetail.id">
+			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
+			<img :src="selectDetail.sketchString || selectDetail.path" alt="">
+			<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
 		</div>
-		<div class="switch_type_list">
-			<div
-				@click.stop="openCurrent()"
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
-			</div>
-		</div>
-		<div class="sketch_content_list">
-			<div class="content_item" v-show="selectTitle == 'current'">
-				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'upload'">
-				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
+		<div class="select_sketch" v-else>
+			<div>
+				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
+		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
     </div>
-    
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -49,15 +22,13 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 // import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import libraryList from './module/libraryList.vue'
-import uploadList from './module/uploadList.vue'
-import currentList from './module/currentList.vue'
+import selectList from './module/selectList.vue'
+
 export default defineComponent({
     components:{
-		currentList,
-		libraryList,
-		uploadList,
+		selectList,
     },
+	emit:['addDetail'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -65,7 +36,8 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			sketchCatecoryList:computed(()=>{
 				return store.state.Workspace.workspacePosition
-			})
+			}),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -85,10 +57,12 @@ export default defineComponent({
 			detailData.selectTitle = 'library'
 			getDetailListDom.libraryList.init()
 		}
-		const selectImgItem = ()=>{
-
+		const selectImgItem = (data:any)=>{
+			store.commit('DesignDetailCopy/setNewDetail',data)
+		}
+		const openAddDetail = ()=>{
+			emit('addDetail')
 		}
-		
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListData),
@@ -98,6 +72,7 @@ export default defineComponent({
 			openUpload,
 			openLibrary,
 			selectImgItem,
+			openAddDetail,
         }
     },
 
@@ -126,6 +101,7 @@ export default defineComponent({
 			border-radius: .5rem;
 			// border: 1px dashed #202020;
 			border: 1px dashed transparent;
+			position: relative;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
 			margin-bottom: 3rem;
 			> img{
@@ -133,6 +109,24 @@ export default defineComponent({
 				height: 100%;
 				object-fit: contain;
 			}
+			> i{
+				position: absolute;
+				left: auto;
+				right: 1rem;
+				top: 2rem;
+				font-size: 2rem;
+				cursor: pointer;
+			}
+			> div{
+				height: 100%;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> i{
+					font-size: 10rem;
+				}
+			}
 		}
 		> .switch_type_list{
 			display: flex;
@@ -160,7 +154,6 @@ export default defineComponent({
 			> .select_swtich {
 				color: #000;
 				font-weight: 600;
-				transform: scale(1.15);
 			}
 			> .select_swtich::before {
 				width: 100%;