feat: 颜色上传可以从library选择&历史列表参数修改

src/component/Detail/detailLeft/colorBox/index.vue

@@ -16,8 +16,16 @@
 			</div>
 		</div>
 		<div class="detailText">{{$t('DesignPrintOperation.Colorfromimage')}}</div>
-		<div class="uploadImage">
-			<upload @selectUplpadColor="selectUplpadColor"></upload>
+		<div class="uploadImage flex flex-align-center flex-justify-around">
+			<div class="upload-container flex flex-column flex-align-center" :class="{'hide': !showLibrary}">
+				<upload ref="uploadRef" @selectUplpadColor="selectUplpadColor" @selectFile="showLibrary = false"  @deleteColor="showLibrary = true"></upload>
+				<div class="upload-text" v-show="showLibrary"> {{ $t('LibraryPage.Upload') }} </div>
+			</div>
+			<div class="upload-container flex flex-column flex-align-center"  v-show="showLibrary">
+				<!-- <i class="fi fi-rr-followcollection"></i> -->
+				  <SvgIcon name="CLibrary" size="40" @click="handleOpenLibrary" />
+				<div class="upload-text"> {{ $t('LibraryPage.library') }} </div>
+			</div>
 		</div>
 		<div class="detailText">{{$t('DesignPrintOperation.ColorCode')}}</div>
 		<div class="colorCode">
@@ -30,7 +38,14 @@
 			<!-- <div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div> -->
 		</div>
     </div>
-    
+    <SelectImages 
+		ref="selectImages"
+		@select="handleImageSelect"
+		radio
+		full-data
+		:api="Https.httpUrls.queryLibraryPage"
+		isLibrary
+		/>
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,watch,nextTick,toRefs, reactive, onMounted} from 'vue'
@@ -39,14 +54,16 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { useI18n } from 'vue-i18n'
-import { rgbaToHex,rgbToHsv } from "@/tool/util"
+import { rgbaToHex,rgbToHsv,UrlToFile } from "@/tool/util"
 import { message,Upload} from 'ant-design-vue';
+import SelectImages from '@/component/common/SelectImages.vue'
+
 
 import upload from './upload.vue'
 import pallet from './pallet.vue'
 export default defineComponent({
     components:{
-		upload,pallet
+		upload,pallet,SelectImages
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -243,6 +260,33 @@ export default defineComponent({
 					});
 			})
 		}
+
+		const uploadRef = ref<any>(null)
+		const selectImages = ref<any>(null)
+		const showLibrary = ref(true)
+		const handleOpenLibrary = ()=>{
+			selectImages.value.init()
+		}
+		const handleImageSelect = (item:any)=>{
+			console.log('item',item)
+			UrlToFile(item.url,item.name).then((file:any)=>{
+				console.log('file',file)
+				// 构造符合 fileUploadChange 期望的数据结构
+				const fileData = {
+					file: {
+						originFileObj: file,  // 将 File 对象放在 originFileObj 属性中
+						status: 'done'
+					}
+				}
+				uploadRef.value.fileUploadChange(fileData)
+			})
+			// uploadRef.value.selectColor(item)
+		}
+		const handleShowListChange=(val:boolean)=>{
+			console.log('val',val)
+			showLibrary.value = !val
+		}
+
 		const selectUplpadColor = (item:any)=>{
 			colorData.selectColor = JSON.parse(JSON.stringify(item))
 		}
@@ -301,6 +345,14 @@ export default defineComponent({
 			selectUplpadColor,
 			setSelectColor,
 			getTcxColor,
+			handleOpenLibrary,
+			Https,
+			showLibrary,
+			selectImages,
+			uploadRef,
+			handleImageSelect,
+			handleShowListChange,
+
         }
     },
 
@@ -312,6 +364,30 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
+
+.flex{
+	display: flex;
+}
+
+.flex-column{
+	flex-direction: column;
+}
+
+.flex-align-center{
+	align-items: center;
+}
+
+.flex-justify-center{
+	justify-content: center;
+}
+
+.flex-justify-between{
+	justify-content: space-between;
+}
+
+.flex-justify-around{
+	justify-content: space-around;
+}
     .color{
 		// width: 34rem;
 		width: 100%;
@@ -374,6 +450,25 @@ export default defineComponent({
 			height: 10rem;
 			width: 100%;
 			border-radius: .5rem;
+			.upload-container{
+				background-color: #EDEDED;
+				padding: 1rem 2rem;
+				border-radius: 1rem;
+				width: 8rem;
+				height: 8rem;
+				&.hide{
+					width: initial;
+					height: initial;
+					border: none;
+					padding: 0;
+					flex: 1;
+					background-color: transparent;
+					padding-left: 1rem;
+				}
+				:deep(.ant-upload){
+					background: transparent;
+				}
+			}
 		}
 		> .colorCode{
 			margin-bottom: 3rem;

src/component/Detail/detailLeft/colorBox/upload.vue

@@ -44,7 +44,7 @@ import { rgbaToHex } from "@/tool/util"
 export default defineComponent({
     components:{
     },
-	emits:['selectUplpadColor'],
+	emits:['selectUplpadColor','deleteColor','selectFile'],
     setup(props,{emit}) {
 		const {t} = useI18n();
         const store = useStore();
@@ -63,6 +63,8 @@ export default defineComponent({
 		})
 		
 		const fileUploadChange = (data:any)=>{
+						emit('selectFile')
+						console.log('fileUploadChange',data)
             let file:any = data.file
             let fileData = file.originFileObj
             var reader = new FileReader();
@@ -157,6 +159,7 @@ export default defineComponent({
 		const colorDeleteFile = ()=>{
 			colorUpload.uploadList[colorUpload.selectDetail.id] = []
 			colorUpload.colorList[colorUpload.selectDetail.id] = []
+			emit('deleteColor')
 		}
         return{
 			...toRefs(colorUpload),