封装设置衣服类型的下拉菜单

src/component/Detail/DesignDetailAlter.vue

@@ -47,7 +47,9 @@
 									v-show="file?.status === 'done'"
 								>
 									<img :src="file?.url" class="upload_img" />
-									<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
+									<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
+
+									<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
 										<div class="select_img_type">
 											<div
 												class="select_category"
@@ -89,7 +91,7 @@
 												</div>
 											</div>
 										</div>
-									</div>
+									</div> -->
 									<div
 										class="delete_file_block"
 										@click.stop="deleteFile(index)"
@@ -136,48 +138,7 @@
                     <div class="content_img_item" v-for="(file) in clothesList" :key="file.id"  :class="{active:selectCode !== 'Moodboard'}">
                         <div class="content_img_item_block" :class="{active:file?.checked}">
                             <img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
-							<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
+							<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
-								<div class="select_img_type">
-									<div
-										class="select_category"
-										@click.stop="showFileCategory(file)"
-									>
-										{{ file.level2Type }}
-										<div
-											v-if="!body"
-											:class="[
-												'icon',
-												'iconfont',
-												'icon-xiala',
-												file.categoryShow
-													? 'icon_rotate'
-													: '',
-											]"
-										></div>
-									</div>
-									<div
-										v-if="!body"
-										class="category_list"
-										v-show="file.categoryShow"
-									>
-										<div
-											:class="[
-												'category_item',
-												file.level2Type == cate.value
-													? 'select_category_item'
-													: '',
-											]"
-											v-for="(
-												cate, index
-											) in disignTypeList"
-											:key="index"
-											@click.stop="selectFileCategory(file, cate)"
-										>
-											{{ cate.value }}
-										</div>
-									</div>
-								</div>
-							</div>
                         </div>
                     </div>
 					<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
@@ -307,10 +268,12 @@ import DesignDetailEnd from './DesignDetailEnd.vue';
 import { getCookie } from "@/tool/cookie";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from 'vue-i18n';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+
 export default defineComponent({
     props: ["msg"],
     components:{
-        Draggable,Sketch,DesignDetailEnd,Chrome
+        Draggable,Sketch,DesignDetailEnd,Chrome,sketchCategory
     },
     setup(prop) {
         const store = useStore();
@@ -321,10 +284,7 @@ export default defineComponent({
         let body = inject('body')//父组件传过来的数据
 		let openClick = ref(1);
 		let searchPictureName = ref('')
-		//模型印花
+		
-		let disignTypeList = [
-              
-            ]
 		let total = ref(0)
         let pageSize = ref(10)
         let currentPage = ref(1)
@@ -342,14 +302,15 @@ export default defineComponent({
 		let selectColorList = ref({
 		})
 		let workspace = ref({})
-
+		let sketchCatecoryList = computed(()=>{
+			return store.state.Workspace.workspacePosition
+		})
 		let {t} = useI18n()
         return{
             store,
             current,
 			openClick,
 			searchPictureName,
-			disignTypeList,
 			total,
 			pageSize,
 			currentPage,
@@ -367,6 +328,7 @@ export default defineComponent({
 			workspace,
 			driver__,
 			body,
+			sketchCatecoryList,
 			t,
         }
     },
@@ -435,18 +397,7 @@ export default defineComponent({
 		},
 	},
 	computed:{
-		getSketchLabel(value) {
+		
-            return (value) => {
-                let lable = "";
-                for (let item of this.disignTypeList) {
-                    if (item.value === value) {
-                        value = item.value;
-                        break;
-                    }
-                }
-                return lable;
-            };
-        },
 		
         getSelectRGB(selectColor){
 			
@@ -484,7 +435,6 @@ export default defineComponent({
 		workspaceCom(newVal,oldVal){
 			this.workspace = newVal
 			this.upload.gender = newVal?.sexEnum?.name
-			this.getPosition()
 		},
     },
 	mounted () {
@@ -552,28 +502,7 @@ export default defineComponent({
 				return  this.store?.state?.Workspace?.workspace
 			})
 		},
-		getPosition(){
+		
-			let params
-			if(this.workspace.sexEnum.name == 'Female'){
-				params = 'FemalePosition'
-			}else{
-				params = 'MalePosition'
-			}
-			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv) => {
-				if (rv) {
-					// let arr = []
-					// rv.forEach((item) => {
-					// 	let obj = {
-					// 		value:item.value,
-					// 		name:item.name,
-					// 		key:item.key,
-					// 	}
-					// 	arr.push(obj)						
-					// });
-					this.disignTypeList = rv
-				}
-			})
-		},
 		deleteFile(num){
             this.uploadList.splice(num, 1)
 		},
@@ -586,6 +515,12 @@ export default defineComponent({
 					file.id = res.data.id;
 					file.url = res.data.url;
 					file.resData = res.data;
+					this.sketchCatecoryList.forEach((item) => {
+						if(item.value == res.data.level2Type){
+							file.categoryValue = item?.name;
+							file.category = item?.value;
+						}
+					});
 					file.designType = res.data.designType
 					let type = this.body?this.current.type:res.data.level2Type
 					file.level2Type = type;
@@ -653,31 +588,6 @@ export default defineComponent({
 		},
 		// this.getLibraryList('Moodboard')
 		// this.getLibraryList('Printboard')
-
-		showFileCategory(file) {
-            file.categoryShow = true;
-            document.addEventListener("click", this.hiddenFileCategory);
-        },
-		 selectFileCategory(file, cate) {
-			file.level2Type = cate.name;
-			 for (let item of this.clothesList) {
-                item.categoryShow = false;
-            }
-			for (let item of this.uploadList) {
-                item.categoryShow = false;
-            }
-			this.setSketchLibrary(file)
-			let DesignDetailEnd = this.$refs.DesignDetailEnd
-			if(DesignDetailEnd.sketchImg.id == file.id){
-				this.selectImgItem(file)
-			}
-        },
-		hiddenFileCategory() {
-            for (let item of this.clothesList) {
-                item.categoryShow = false;
-            }
-            document.removeEventListener("click", this.hiddenFileCategory);
-        },
 		setSketchLibrary(item){
 			let data = {
 				libraryId:[item.id],
@@ -727,10 +637,18 @@ export default defineComponent({
                 size:this.pageSize+this.clothesList.length,
             }
             this.isShowLoading = true
-
             Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                 (rv) => {
-
+					if(this.selectCode == 'Sketchboard'){
+						rv.content.forEach((vItem)=>{
+							this.sketchCatecoryList.forEach((item) => {
+								if(item.value == vItem.level2Type){
+									vItem.categoryValue = item.name
+									vItem.category = item.value
+								}
+							});
+						})
+					}
 					this.clothesList = rv.content
                     this.isShowLoading = false
                     this.total = rv.total

src/component/Detail/habit.vue

@@ -408,7 +408,6 @@ export default defineComponent({
 			}else{
 				num = 1
 			}
-			
 			this.singleTypeList = this.position[num].value
 			this.store.commit("setWorkspacePosition", this.position[num].value);
 
@@ -421,11 +420,21 @@ export default defineComponent({
 			await new Promise(async (resolve) => {
 				await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
 					if (rv) {
+						rv.forEach((item:any) => {
+							let name = item.name
+							item.name = item.value
+							item.value = name
+						});
 						this.position[0].value = rv
 					}
 				})
 				await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
 					if (rv) {
+						rv.forEach((item:any) => {
+							let name = item.name
+							item.name = item.value
+							item.value = name
+						});
 						this.position[1].value = rv
 					}
 				})

src/component/HomePage/ColorboardUpload.vue

@@ -6,7 +6,7 @@
 			</div>
 			<div class="modal_img">
 				<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
-					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
 					</div>
 				</div>
 				<div>
@@ -49,27 +49,7 @@
 								</div>
 							</div>
 						</div> -->
-						<div class="color_setting_operate" v-show="gradientShow">
+					
-							<div class="color_setting_operate_item color_setting_operate_control">
-								<div class="operate_item_box">
-									<div>线性</div>
-								</div>
-								<div class="operate_item_box operate_item_angle">
-									<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
-										<div :style="{'transform':`rotate(${gradient.angle}deg)`}"></div>
-									</div>
-									<!-- <input type="number"> -->
-								</div>
-								<div class="operate_item_box">
-									<div>删除</div>
-								</div>
-							</div>
-							<div class="color_setting_operate_item color_setting_operate_input">
-								<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
-								</div>
-								<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
-							</div>
-						</div>
                     </div>
                     <!-- <div class="color_review_block">
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -167,30 +147,7 @@ export default defineComponent({
 		})
 		let driver__ = inject('driver__')
 		let {t} = useI18n()
-		let gradient = ref({
+		
-			gradientList:[
-				{
-					rgba:{
-						r:117,
-						g:119,
-						b:255,
-						a:1,
-					},
-					left:'0%'
-				},{
-					rgba:{
-						r:0,
-						g:222,
-						b:152,
-						a:1,
-					},
-					left:'100%'
-				},
-			],
-			angle:45,
-			selectIndex:-1,
-		})
-		let gradientShow = ref(false)
         return {
             fileList,
             colorList,
@@ -198,8 +155,6 @@ export default defineComponent({
 			selectColorList,
 			driver__,
 			t,
-			gradient,
-			gradientShow,
         }
     },
     watch:{
@@ -214,21 +169,7 @@ export default defineComponent({
 			handler(newVal,oldVal){
 				this.colorList[this.selectIndex] = newVal.rgba
 				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
-				if(this.gradient.selectIndex>-1 && this.gradientShow){
+				
-					this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
-					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
-						r:newVal.rgba.r,
-						g:newVal.rgba.g,
-						b:newVal.rgba.b,
-						a:1,
-					}
-				}
-				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
-				if(this.gradientShow){
-					// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
-				}else{
-					this.colorList[this.selectIndex].gradient = ''
-				}
 				this.setColorboardList(colorList)
 				// this.clearSelectColor()
 			},
@@ -256,27 +197,6 @@ export default defineComponent({
                 return data
             }
         },
-		setGradient(){
-			// return this.setGradientAngle(gradient)
-			return (gradient)=>{
-				console.log(gradient,'222');
-				let gradientStr = ''
-				gradient.gradientList.sort((a, b) => {
-					let aArr = a.left.split('%')[0]
-					let bArr = b.left.split('%')[0]
-					return aArr - bArr;
-				});
-				gradient.gradientList.forEach((item,index)=>{
-					let str = ','
-					if(gradient.gradientList.length == index+1)str = ''
-					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
-
-				})
-				console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
-				return `${gradientStr}`
-			}
-			
-		}
     },
     data(){
         return{
@@ -312,29 +232,9 @@ export default defineComponent({
 		const backIcon = document.createElement('div');
 		backIcon.classList.add('vc-sketch-color-wrap')
 		let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
-		let colorDom = document.querySelector('.colorboard_upload_modal .vc-chrome-controls .vc-chrome-active-color')
 		// console.log(colorDom);
 		dropperDom.appendChild(backIcon);
-		colorDom.addEventListener('click',()=>{
+	
-			// this.colorList[this.selectIndex]
-			console.log(123123123123);
-			this.gradient.selectIndex = 0
-			this.gradientShow = !this.gradientShow
-			if(this.gradientShow){
-				if(this.selectColor.rgba.r){
-					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
-						r:this.selectColor.rgba.r,
-						g:this.selectColor.rgba.g,
-						b:this.selectColor.rgba.b,
-						a:1,
-					}
-				}
-				
-				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
-			}else{
-				this.colorList[this.selectIndex].gradient = ''
-			}
-		})
 		backIcon.addEventListener('click', async ()=>{
 			try {
 				const dropper = new EyeDropper();
@@ -374,7 +274,6 @@ export default defineComponent({
 		},
         //选择不同的色块
         selectColorItem(index,color){
-			this.gradientShow = false
 			let hex
 			if(color?.r){
 				hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
@@ -619,59 +518,6 @@ export default defineComponent({
             this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
             this.store.commit('setColorboardList',colorList)
         },
-		mousedownGradient(event,item,index){
-			event.stopPropagation();
-			this.gradient.selectIndex = index
-			let gradientRgba = this.gradient.gradientList[index].rgba
-			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
-			let hex = this.rgbaToHex(rgba)
-            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
-			// isMoible()  true为移动端
-			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
-			let position = {
-				x:event.x,
-				left:event.target.style.left?event.target.style.left.split('%')[0]:0
-			}
-			let mousedownGradient = (e)=>{
-				let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
-				left = (left<0?0:left>100?100:left)
-				// event.target.style.left = (left<0?0:left>100?100:left)+'%'
-				item.left = left+'%'
-			}
-			let mouseupGradient = ()=>{
-				window.removeEventListener('mousemove',mousedownGradient)
-				window.removeEventListener('mouseup',mouseupGradient)
-			}
-			window.addEventListener('mousemove',mousedownGradient)
-			window.addEventListener('mouseup',mouseupGradient)
-			// event.target.addEventListener('touchmove',)
-		},
-		mousedownGradientAngle(event){
-			event.stopPropagation();
-			// isMoible()  true为移动端
-			console.log(event.target.getBoundingClientRect());
-			let domPosition = event.target.getBoundingClientRect()
-			console.log(domPosition.x+domPosition.width/2);
-			let position = {
-				x:domPosition.x+domPosition.width/2,
-				y:domPosition.y+domPosition.height/2,
-			}
-			let angle = this.gradient.angle
-			let mousedownGradientAngle = (e)=>{
-				let X = position.x 
-				let Y = position.y
-				let x = e.x - X
-				let y = Y - e.y
-				angle = Math.atan2(x,y)*(180 / Math.PI)
-				this.gradient.angle = angle
-			}
-			let mouseupGradientAngle = ()=>{
-				window.removeEventListener('mousemove',mousedownGradientAngle)
-				window.removeEventListener('mouseup',mouseupGradientAngle)
-			}
-			window.addEventListener('mousemove',mousedownGradientAngle)
-			window.addEventListener('mouseup',mouseupGradientAngle)
-		}
     }
 })
 </script>

src/component/HomePage/Generate.vue

@@ -78,46 +78,6 @@
                         v-show="file?.status === 'done'"
                     >
                         <img :src="file?.imgUrl" class="upload_img" />
-                        <div v-if="type_.type2 == 'Sketchboard'" class="operate_file_block">
-                            <div class="select_img_type">
-                                <div
-                                    class="select_category"
-                                    @click.stop="showFileCategory(file)"
-                                >
-                                    {{ file.categoryValue }}
-                                    <div
-                                        :class="[
-                                            'icon',
-                                            'iconfont',
-                                            'icon-xiala',
-                                            file.categoryShow
-                                                ? 'icon_rotate'
-                                                : '',
-                                        ]"
-                                    ></div>
-                                </div>
-                                <div
-                                    class="category_list"
-                                    v-show="file.categoryShow"
-                                >
-                                    <div
-                                        :class="[
-                                            'category_item',
-                                            file.category == cate.name
-                                                ? 'select_category_item'
-                                                : '',
-                                        ]"
-                                        v-for="(
-                                            cate, index
-                                        ) in sketchCatecoryList"
-                                        :key="index"
-                                        @click.stop="selectFileCategory(file, cate)"
-                                    >
-                                        {{ cate.value }}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
                         <div
                             class="delete_file_block"
 							:class="[driver__.driver?'hideEvents':'']"
@@ -742,23 +702,7 @@ export default defineComponent({
                 message.warning(res.errMsg);
 			}
         },
-        showFileCategory(file: any) {
+       
-            file.categoryShow = true;
-            document.addEventListener("click", this.hiddenFileCategory);
-        },
-        selectFileCategory(file: any, cate: any) {
-			file.categoryValue = cate?.value;
-            file.category = cate.name;
-			file.categoryShow = false
-            // this.store.commit("setSketchboardFile", this.sketchboardList);
-        },
-        hiddenFileCategory() {
-            for (let item of this.sketchboardList) {
-                item.categoryShow = false;
-            }
-            document.removeEventListener("click", this.hiddenFileCategory);
-        },
-
 		setSketchboardItem(item:any){
 			if(this.checkboxImage){
 				return

src/component/HomePage/Material.vue

@@ -21,46 +21,7 @@
                 <div class="material_content_body scroll_style">
 					<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':''  , selectCode == 'Moodboard' ? 'moodb':''  ]" >
 						<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
-						<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
+						<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
-                            <div class="select_img_type">
-                                <div
-                                    class="select_category"
-                                    @click.stop="showFileCategory(item)"
-                                >
-                                    {{ item?.categoryValue }}
-                                    <div
-                                        :class="[
-                                            'icon',
-                                            'iconfont',
-                                            'icon-xiala',
-                                            item?.categoryShow
-                                                ? 'icon_rotate'
-                                                : '',
-                                        ]"
-                                    ></div>
-                                </div>
-                                <div
-                                    class="category_list"
-                                    v-show="item?.categoryShow"
-                                >
-                                    <div
-                                        :class="[
-                                            'category_item',
-                                            item?.category == cate.name
-                                                ? 'select_category_item'
-                                                : '',
-                                        ]"
-                                        v-for="(
-                                            cate, index
-                                        ) in disignTypeList"
-                                        :key="index"
-                                        @click.stop="selectFileCategory(item, cate)"
-                                    >
-                                        {{ cate.value }}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
 						<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
 						</div>
@@ -86,8 +47,11 @@ import { useStore } from "vuex";
 import GO from '@/tool/GO';
 import { useI18n } from 'vue-i18n';
 import { openGuide,driverObj__ } from "@/tool/guide";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 
 export default defineComponent({
+    components: { sketchCategory },
+
     props: ["msg",'disignTypeList'],
     setup(prop) {
         let myMaterialModalShow = ref(false)
@@ -388,35 +352,6 @@ export default defineComponent({
                 this.isShowLoading = false
             });
         },
-		showFileCategory(file: any) {
-            file.categoryShow = true;
-            document.addEventListener("click", this.hiddenFileCategory);
-        },
-		 selectFileCategory(file: any, cate: any) {
-            file.categoryValue = cate.value;
-            file.category = cate.name;
-			 for (let item of (this.imgList as any)) {
-                item.categoryShow = false;
-            }
-			this.setSketchLibrary(file)
-        },
-		hiddenFileCategory() {
-            for (let item of (this.imgList as any)) {
-                item.categoryShow = false;
-            }
-            document.removeEventListener("click", this.hiddenFileCategory);
-        },
-		setSketchLibrary(item:any){
-			let data = {
-				libraryId:[item.id],
-				level2Type:item.category,
-			}
-			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
-                (rv: any) => {
-                }
-            ).catch((res)=>{
-            });
-		},
     }
 })
 </script>

src/component/HomePage/SketchboardUpload.vue

@@ -46,51 +46,7 @@
                                 v-show="file?.status === 'done'"
                             >
                                 <img :src="file?.imgUrl" class="upload_img" />
-                                <div class="operate_file_block">
+								<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
-                                    <div class="select_img_type">
-                                        <div
-                                            class="select_category"
-                                            @click.stop="showFileCategory(file)"
-                                        >
-                                            {{ file.categoryValue }}
-                                            <div
-                                                :class="[
-                                                    'icon',
-                                                    'iconfont',
-                                                    'icon-xiala',
-                                                    file.categoryShow
-                                                        ? 'icon_rotate'
-                                                        : '',
-                                                ]"
-                                            ></div>
-                                        </div>
-                                        <div
-                                            class="category_list"
-                                            v-show="file.categoryShow"
-                                        >
-                                            <div
-                                                :class="[
-                                                    'category_item',
-                                                    file.category == cate.value
-                                                        ? 'select_category_item'
-                                                        : '',
-                                                ]"
-                                                v-for="(
-                                                    cate, index
-                                                ) in sketchCatecoryList"
-                                                :key="index"
-                                                @click="
-                                                    selectFileCategory(
-                                                        file,
-                                                        cate
-                                                    )
-                                                "
-                                            >
-                                                {{ cate.value }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
                                 <div
                                     class="delete_like_file_block"
                                     @click.stop="deleteFile(file)"
@@ -196,53 +152,7 @@
 					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[driver__.driver?'showEvents':'',item?.checked?'active':'']">
 						<img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt="">
 						<img v-show="item.status == 'Success'" :src="item.imgUrl" @click.stop="generageAdd(item)">
-						<div class="operate_file_block" :class="[driver__.driver?'hideEvents':'']">
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" ></sketchCategory>
-							<div class="select_img_type">
-								<div
-									class="select_category Guide_1_13"
-									@click.stop="showFileCategory(item)"
-								>
-									{{ item.categoryValue }}
-									<div
-										:class="[
-											'icon',
-											'iconfont',
-											'icon-xiala',
-											item.categoryShow
-												? 'icon_rotate'
-												: '',
-										]"
-									></div>
-									
-								</div>
-								<div
-									class="category_list Guide_1_13_1"
-									:class="[driver__.driver?'showEvents':'']"
-									v-show="item.categoryShow"
-								>
-									<div
-										:class="[
-											'category_item',
-											item.category == cate.name
-												? 'select_category_item'
-												: '',
-										]"
-										v-for="(
-											cate, index
-										) in sketchCatecoryList"
-										:key="index"
-										@click.stop="
-											selectFileCategory(
-												item,
-												cate
-											)
-										"
-									>
-										{{ cate.value }}
-									</div>
-								</div>
-							</div>
-						</div>
 						<div
 							class="delete_like_file_block"
 						>
@@ -287,8 +197,10 @@ import scaleImage from "@/component/HomePage/scaleImage.vue";
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from "vue-i18n";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+
 export default defineComponent({
-    components: { Material, Generate,scaleImage },
+    components: { Material, Generate,scaleImage,sketchCategory },
     setup() {
         let fileList: any = ref([
 		]);
@@ -521,7 +433,7 @@ export default defineComponent({
 						name:'',
 					}
 					this.sketchCatecoryList.forEach((item:any) => {
-						if(item.name == res.data.level2Type){
+						if(item.value == res.data.level2Type){
 							category.value = item?.value
 							category.name = item?.name
 						}
@@ -530,8 +442,8 @@ export default defineComponent({
 					file.resData = res.data;
 					// file.pin = false;
 					//category用来数据处理
-					file.categoryValue = category?.value;
+					file.categoryValue = category?.name;
-					file.category = category?.name;
+					file.category = category?.value;
 					file.categoryShow = false;
 					file.id_ = GO.id++
 					file.id = res.data.id
@@ -580,58 +492,6 @@ export default defineComponent({
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         },
-
-        showFileCategory(file: any) {
-            file.categoryShow = true;
-			nextTick().then(()=>{
-				if(this.driver__.driver){
-					driverObj__.moveNext()
-				}
-			})
-			
-            document.addEventListener("click", this.hiddenFileCategory);
-        },
-
-        selectFileCategory(file: any, cate: any) {
-			if(this.openClick == 3){
-				for (let item of this.generateList) {
-					item.categoryShow = false;
-				}
-				file.categoryValue = cate.value;
-				file.category = cate.name;
-				if(this.driver__.driver){
-					driverObj__.moveNext()
-				}
-				// this.store.commit("sketchGenerateFiles", this.fileList);
-			}else{
-				for (let item of this.fileList) {
-					item.categoryShow = false;
-				}
-				file.categoryValue = cate.value;
-				file.category = cate.name;
-				this.store.commit("setSketchboardFile", this.fileList);
-				nextTick().then(()=>{
-					if(this.driver__.driver){
-						driverObj__.moveNext()
-						// driverObj__.moveTo(13)
-					}
-				})
-			}
-        },
-        hiddenFileCategory() {
-			if(this.openClick == 3){
-				for (let item of this.generateList) {
-					item.categoryShow = false;
-				}
-			}else{
-				for (let item of this.fileList) {
-					item.categoryShow = false;
-				}
-			}
-           
-            document.removeEventListener("click", this.hiddenFileCategory);
-        },
-
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
 			let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
@@ -882,9 +742,9 @@ export default defineComponent({
 										element.id_ = GO.id++
 										if(element.category){
 											this.sketchCatecoryList.forEach((itemCategory:any) => {
-												if(itemCategory.name == element.category){
+												if(itemCategory.value == element.category){
-													element.categoryValue = itemCategory?.value
+													element.categoryValue = itemCategory?.name
-													element.category = itemCategory?.name
+													element.category = itemCategory?.value
 												}
 											});
 										}

src/component/HomePage/sketchCategory.vue

@@ -0,0 +1,197 @@
+<template>
+   <div class="operate_file_block">
+		<div class="select_img_type">
+			<div
+				class="select_category"
+				@click.stop="showFileCategory(item)"
+			>
+				{{ item.categoryValue }}
+				<div
+					:class="[
+						'icon',
+						'iconfont',
+						'icon-xiala',
+						item.categoryShow
+							? 'icon_rotate'
+							: '',
+					]"
+				></div>
+			</div>
+			<div
+				class="category_list"
+				v-show="item.categoryShow"
+			>
+				<div
+					:class="[
+						'category_item',
+						item.category == cate.value
+							? 'select_category_item'
+							: '',
+					]"
+					v-for="(
+						cate, index
+					) in disignTypeList"
+					:key="index"
+					@click="
+						selectFileCategory(
+							item,
+							cate
+						)
+					"
+				>
+					{{ cate.name }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref ,nextTick} from "vue";  
+import { Https } from "@/tool/https";
+import { openGuide,driverObj__ } from "@/tool/guide";
+export default defineComponent({
+    name:'filterComponent',
+    props:{
+        disignTypeList:{
+            type:Object
+        },
+        item:{
+            type:Object
+        },
+        generateList:{
+            type:Array
+        },
+		isSetSketchCategory:{
+			type:Boolean,
+			default:false,
+		},
+		driver__:{
+			type:Boolean,
+			default:false,
+		}
+    },
+    setup(props:any){
+		let showFileCategory = (file:any)=> {
+            file.categoryShow = true;
+			nextTick().then(()=>{
+				if(props.driver__.driver){
+					driverObj__.moveNext()
+				}
+			})
+            document.addEventListener("click", hiddenFileCategory);
+        }
+		let hiddenFileCategory = () => {
+			for (let item of props.generateList) {
+				item.categoryShow = false;
+			}
+            document.removeEventListener("click", hiddenFileCategory);
+        }
+		let selectFileCategory = (file: any, cate: any) => {
+			for (let item of props.generateList) {
+				item.categoryShow = false;
+			}
+			file.categoryValue = cate.name;
+			file.category = cate.value;
+			if(props.isSetSketchCategory){
+				setSketchLibrary(props.item)
+			}
+			if(props.driver__.driver){
+				driverObj__.moveNext()
+			}
+				// this.store.commit("sketchGenerateFiles", this.fileList);
+			
+        }
+		let setSketchLibrary = (item:any)=>{
+			let data = {
+				libraryId:[item.id],
+				level2Type:item.category,
+			}
+			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
+                (rv: any) => {
+                }
+            ).catch((res)=>{
+            });
+		}
+        return {
+            showFileCategory,
+			selectFileCategory,
+        }
+        
+    },
+   
+});
+</script>
+<style lang="less">
+//衣服类型下拉菜单
+.operate_file_block{
+	width: 100%;
+	height: 3rem;
+	font-size: 1.6rem;
+	color: #FFFFFF;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	.select_img_type{
+		height: 100%;
+		line-height: 3rem;
+		text-align: center;
+		background: rgba(0,0,0,0.6);
+		position: relative;
+		overflow: initial !important;
+		.select_category{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.icon-xiala{
+				margin-left: 0.8rem;
+			}
+		}
+
+		.icon_rotate{
+			-moz-transform:rotate(180deg);
+			-webkit-transform:rotate(180deg);
+			transform: rotate(180deg);
+			animation-direction: 0.5s;
+		}
+
+		.category_list{
+			position: absolute;
+			width: 100%;
+			cursor: pointer;
+			position: absolute;
+			// top: 3.1rem;
+			margin-top: .2rem;
+			left: 0;
+			// background: rgba(0,0,0,0.4);
+			background-color: rgb(177 177 177);
+			border: 1px solid #343579;
+			border-radius: 0.8rem;
+			// overflow: hidden;
+			z-index: 3;
+			height: 9rem;
+			overflow-x: hidden;
+			&.category_list::-webkit-scrollbar{display: none;}
+
+			.category_item{
+				text-align: left;
+				font-size: 1.4rem;
+				padding: 1rem 1.5rem;
+				line-height: 1.6rem;
+				font-weight: 600;
+				color: #595959;
+
+				&.select_category_item{
+					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+				}
+
+				&:hover{
+					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
+				}
+			}
+		}
+	}
+}
+</style>

src/views/HomeView/library.vue

@@ -53,7 +53,7 @@
                                     </a-select>
                                     <a-select
                                         ref="select"
-										v-show="selectCode == 'Sketchboard'"
+										v-show="selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
                                         v-model:value="designType.value"
                                         :options="disignTypeList"
                                         @change="handleChange"
@@ -240,6 +240,7 @@
 											</div>
 											<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
 												<img :src="file?.imgUrl" class="upload_img" />
+												
 												<div class="delete_file_block rightTop" @click.stop="deleteFile(index)" >
 													<span class="icon iconfont icon-shanchu"></span>
 												</div>
@@ -281,7 +282,7 @@
                                         <div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
 											<img v-show="img.status != 'Success'"  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt="">
 											<img v-show="img.status == 'Success'"  :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" :src="img.imgUrl">
-						
+											
 											<div class="img_item_hover">
                                                 <div class="img_operate_content">
                                                     <div class="img_operate_block">
@@ -295,6 +296,7 @@
                                                     </div>
 												</div>
                                             </div>
+											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="generateList" :item="img"></sketchCategory>
                                         </div>
                                         <div class="content_img_name"></div>
                                     </div>
@@ -345,6 +347,7 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { getCookie } from "@/tool/cookie";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 import { useI18n } from "vue-i18n";
 import { ElCascader } from 'element-plus'
 import { remove } from "jszip";
@@ -358,6 +361,7 @@ export default defineComponent({
 		// RobotAssist,
 		ElCascader,
 		scaleImage,
+		sketchCategory,
     },
     setup() {
 		
@@ -566,6 +570,7 @@ export default defineComponent({
 						arr.push({
 							value:item.name,
 							label:item.value,
+							name:item.value
 						})
 					});
 					this.designType = arr[0]
@@ -575,7 +580,7 @@ export default defineComponent({
 			})
 		},
 		likeFile(item:any,str:string){
-            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
+            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? item.category : ''
 
 			if(str == 'like'){
 				let data = {
@@ -1170,13 +1175,19 @@ export default defineComponent({
 						if(this.isShowMark){//防止取消后有正在执行的获取状态
 							let arr:any = []
 							arr = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' &&  item.status != 'Invalid')
-							console.log(arr);
-							
 							rv.forEach((element:any) => {
 								this.generateList.forEach((item:any,index:any) => {
 									if(item.taskId == element.taskId && element.status == 'Success'){
 										element.imgUrl = element.url
 										this.generateList[index] = element
+										if(element.category){
+											this.disignTypeList.forEach((itemCategory:any) => {
+												if(itemCategory.value == element.category){
+													element.categoryValue = itemCategory?.label
+													element.category = itemCategory?.value
+												}
+											});
+										}
 									}
 								});
 							});
@@ -1683,6 +1694,7 @@ export default defineComponent({
 												display: flex;
 												align-items: center;
 												justify-content: center;
+												opacity: 0;
 												span{
 													font-size: 1.4rem;
 												}
@@ -1693,7 +1705,14 @@ export default defineComponent({
 										}
 										
 									}
-									
+									.upload_item:hover{
+										.upload_file_item{
+											.delete_file_block{
+												opacity: 1;
+											}
+										}
+
+									}
 								}
 								
                             }