detail更新

src/component/DetailCopy/model/modelNav.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="modelNav">
-		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+		<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			<img :src="item.path" alt="">
 		</div>
-		<div class="modelNav_item add" @click="">
+		<div v-if="currentDetailType == 'sketch' || currentDetailType == ''" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
 			+
 		</div>
     </div>
@@ -21,13 +22,15 @@ export default defineComponent({
     components:{
 		position,
     },
+	emits:['canvasReload','addSketch'],
     setup(props,{emit}) {
         const store = useStore();
 		const {t} = useI18n()
 		const detailData = reactive({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
-			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			frontBack:{} as any,
 			isEditPattern:inject('isEditPattern') as any
 		})
@@ -46,6 +49,7 @@ export default defineComponent({
 						centered:true,
 						onOk() {
 							resolve(true)
+							emit('canvasReload')
 						},
 						onCancel(){
 							resolve(false)
@@ -58,12 +62,24 @@ export default defineComponent({
 				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
 			})
 		}
+		const deleteDetailItem = (id:number)=>{
+			detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
+			detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
+			detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
+		}
+		const addSketch = ()=>{
+			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
+			store.commit('DesignDetailCopy/addDesignColthes')
+			emit('addSketch')
+		}
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1
 		// })
         return{
 			...toRefs(detailData),
 			selectDetailItem,
+			deleteDetailItem,
+			addSketch,
         }
     },
 
@@ -84,6 +100,20 @@ export default defineComponent({
 			border: 2px solid #B4B4B4;
 			margin-bottom: 1.5rem;
 			cursor: pointer;
+			position: relative;
+			&:hover{
+				> i{
+					display: block;
+				}
+			}
+			> i{
+				display: none;
+				position: absolute;
+				right: 1rem;
+				top: 1rem;
+				cursor: pointer;
+				font-size: 2rem;
+			}
 			&:last-child{
 			    margin-bottom: 0;
 			}