aida_front/src/component/LibraryPage/searchLabel.vue

<template>
	<a-modal class="library_rename_modal_component" 
		v-model:visible="renameVisivle" 
		:footer="null" 
		:title="$t('LibraryPage.Rename')"
		width="78%"
		:keyboard="false"
		:maskClosable="false"
		:centered="true"
		@onCancel="closeRenameModal"
	>
		<div class="collection_rename_content">
			<div class="collection_rename_title">{{$t('LibraryPage.Name')}}</div>
			<div class="rename_form_content">
				<input class="rename_form_input" :placeholder="$t('LibraryPage.inputContent3')" v-model="newPicName" @keydown.enter="confrimRename()">
			</div>
			<div class="collection_rename_title">{{$t('LibraryPage.Tag')}}</div>
			<el-cascader 
				:options="options" 
				:filterable="true" 
				v-model="value.editLabelValue"
				:collapse-tags="true" 
				:show-all-levels="false" 
				:placeholder="$t('LibraryPage.Select')"
				:clearable="true"
				:max-collapse-tags=6
				:props="props" 
				ref="cascader1"
				:collapse-tags-tooltip="true"
				@visible-change="dropdownVisibleChange1"
			>
			<template #empty>
					<div>
						{{$t('LibraryPage.Select')}}
					</div>
				</template>
			</el-cascader>
			<div v-show="selectCode == 'Sketchboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div>
			<!-- <div v-show="selectCode == 'Sketchboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div> -->
			<div v-show="selectCode == 'Sketchboard'" class="rename_form_content">
				<div class="select_block">
					<a-select
						ref="select"
						v-model:value="editSex.value"
						:options="sexList"
						@change="getPosition"
					>
						<template #suffixIcon>
							<!-- <span
								class="icon iconfont icon-xiala"
								style="color: #343579"
							></span> -->
							<i class="el-icon el-input__icon icon-arrow-down"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg></i>
						</template>
					</a-select>
					<a-select
						ref="select"
						v-model:value="editDesignType.value"
						:options="disignTypeList"
					>
						<template #suffixIcon>
							<!-- <span
								class="icon iconfont icon-xiala"
								style="color: #343579"
							></span> -->
							<i class="el-icon el-input__icon icon-arrow-down"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg></i>
						</template>
					</a-select>
				</div>
			</div>
			<div class="rename_button_list">
				<div class="rename_button_item rename_cancel_button"  @click="closeRenameModal()">{{ $t('LibraryPage.Cancel') }}</div>
				<div class="rename_button_item rename_submit_button"  @click="confrimRename()">{{ $t('LibraryPage.Sure') }}</div>
			</div>
		</div>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,watch,nextTick,inject} from 'vue'
import { Https } from "@/tool/https";
// import {dataURLtoFile,base64toFile} from "@/tool/util"
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
// import { useStore } from "vuex";
import { useI18n } from 'vue-i18n';
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { ElCascader } from 'element-plus'

export default defineComponent({
	components:{
        VueCropper,
		ElCascader,
    },
    setup() {
        let newPicName:any = ref('')
        let renameVisivle:any = ref(false)
		let editDesignType:any = ref({
			value:''
		})
        let selectCode:any = ref('')
		let {t} = useI18n()
		let value = ref({
			labelValue:[],
			editLabelValue:[],
		})
		let disignTypeList:any = [
              
		]
		let props = {
			multiple: true,
			checkStrictly: true,
			emitPath:true,
			children:'childList',
			value:'id',
			label:'classificationName',
		}
        let selectSingleImg:any = ref({}) //保存单个图片数据
		const options:any = ref([
		]);
		let editSex:any = ref({
			value:''
		})
		let sexList:any = [
               
            ]
		let sex:any = ref('Meal')
        let designType:any = ref('Outwear')
        let renameType:any = ref('total')//修改名字的方式single-单个 batch-批量
        let selectImgList:any = ref([])

        return {
            newPicName,
            renameVisivle,
			editDesignType,
			selectCode,
			value,
			t,
			disignTypeList,
			props,
			selectSingleImg,
			options,
			editSex,
			sexList,
			sex,
			designType,
			renameType,
			selectImgList,
        }
    },
    data(){
        return{
			setLabelShow:false,
        }
    }, 
	mounted(){
		
	},
	watch: {
	},
    methods:{
      init(data:any,type:any){
		let parent:any = this.$parent
		this.selectCode = parent.selectCode || ''
		this.value = parent.value || ''
		this.disignTypeList = parent.disignTypeList || []
		this.sexList = parent.sexList || []
		this.sex = parent.sex || ''
		this.designType = parent.designType || ''
		this.selectImgList = parent.selectImgList || ''
		this.options = parent.options || []
		
		this.newPicName = ''
		this.editSex = this.sex
		this.editDesignType = this.designType
		if(type =='batch' && !this.selectImgList.length){ //批量但未选中
			this.newPicName = ''
			return
		}
		this.getPresentClass(data,type)
		this.renameType = type
		this.renameVisivle = true
	  },
	  getPresentClass(data:any,type:any){
		let classData = {
				"classificationIdList": [],
				"classificationName": "",
				"createTime": "",
				"deleteConfirm": 0,
				"id": 0,
				"isDeleted": 0,
				"libraryIdList": [data.id],
				"parentId": 0,
				"type": "",
				"updateTime": "",
				"userId": 0
			}
			this.value.editLabelValue = []
			this.selectSingleImg = data
			this.newPicName = data.name
			
            if(type === 'total'){
				Https.axiosPost(Https.httpUrls.getRelClassificationIdList, classData).then(
					(rv: any) => {
						this.value.editLabelValue = rv
					}
				).catch((res)=>{
				});
            }else{
				if(this.selectCode == 'History'){
					classData.libraryIdList = [data.id]
				}else{
					classData.libraryIdList = data
				}
				Https.axiosPost(Https.httpUrls.getRelPublicClassificationIdList, classData).then(
					(rv: any) => {
						this.value.editLabelValue = rv
					}
				).catch((res)=>{
				});
			}
	  },
	  async getPosition(){
			let params
			if(this.sex.value == 'Female'){
				params = 'FemalePosition'
			}else{
				params = 'MalePosition'
			}
			await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
				if (rv) {
					let arr:any = []
					rv.forEach((item:any) => {
						arr.push({
							value:item.name,
							label:item.value,
						})
					});
					this.designType = arr[0]
					this.editDesignType = arr[0]
					this.disignTypeList = arr
					// this.workspaceItem.position = this.singleTypeList[0].label
				}
			})
		},
	  closeRenameModal(){
            this.renameVisivle= false;
            this.newPicName = ''
			this.value.editLabelValue = []
			// this.value.labelValue = []
        },
		async confrimRename(){
            let data = {
                libraryIds:this.renameType === 'total' ? this.selectImgList : [this.selectSingleImg.id] ,
                libraryName:this.newPicName,//library名字
                userGroupName:this.newPicName,//history名字
				userGroupId :this.selectSingleImg.id,//history id
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,  
            }
			let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
			let labelArr:any = []
			this.value.editLabelValue.forEach((item:any)=>{
				labelArr.push(item[item.length-1]?item[item.length-1]:item)
			})
			let data2 = {
				"classificationIdList": labelArr,
				"classificationName": "",
				"createTime": "",
				"id": 0,
				"libraryIdList": this.renameType === 'total' ? this.selectImgList : [this.selectSingleImg.id],
				"type": this.selectCode,
				"updateTime": "",
				"userId": 0
			}
			let bor = false
			if(this.newPicName && this.selectCode == 'History'){//多选修改名字

				await Https.axiosPost(Https.httpUrls.updateUserGroupName, data).then(
					(rv: any) => {
						bor = true 
					}
				).catch((res)=>{
				});
			}else{
				await Https.axiosPost(Https.httpUrls.batchUpdateLibraryName, data).then(
					(rv: any) => {
						bor = true 
					}
				).catch((res)=>{
				});
			}
			if(this.renameType == 'total'){//多选修改标签
				await Https.axiosPost(Https.httpUrls.editRelPublicClassificationIdList, data2).then(
					(rv: any) => {
						bor = true 
					}
				).catch((res)=>{
				});
			}else{
				await Https.axiosPost(Https.httpUrls.relationLibrary, data2).then(
					(rv: any) => {
						bor = true 
					}
				).catch((res)=>{
				});
				
			}
			let data3 = {
				libraryId:this.renameType === 'total' ?  this.selectImgList : [this.selectSingleImg.id],
				level2Type:this.editDesignType.value,
			}
			if(this.selectCode == 'Sketchboard'){
				await Https.axiosPost(Https.httpUrls.setSketchLibrary,data3).then(
					(rv) => {
					}
				).catch((res)=>{
				});
			}
			let parent:any = this.$parent
			if(this.selectCode == 'History'){
				parent.getHistoryList()
			}else{
				parent.getLibraryList('')
			}
			this.closeRenameModal() 
        },
		dropdownVisibleChange1(){
			let element:any = this.$refs.cascader1
			let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
			if(el){
				el.innerHTML = this.t('LibraryPage.NoLabel')
			}
		},
    }
})
</script>
<style lang="less">
.library_rename_modal_component{

.collection_rename_content{
	padding:0 6.8rem 1.8rem;

	.collection_rename_title{
		margin: 2rem 0rem 1rem 0;
		font-size: var(--aida-fsize1-8);
	}
	.rename_form_content{

		.rename_form_input{
			width: 100%;
			height: 4.6rem;
			border: 0.1rem solid #d9d9d9;
			padding-left: 2.1rem;
			line-height: 4.6rem;
			font-size: 1.8rem;
			box-sizing: border-box;
			border-radius: 4px;

			&::placeholder {
				color:#adabb9
			}
		}
		.select_block{
			display: flex;
			justify-content: space-between;
			font-size: 1.8rem;
			color:#adabb9;
			font-weight: 300;
			.ant-select{
				border-radius: 4px;
				width: 48%;
				border: 0.1rem solid #d9d9d9 !important;
				.ant-select-arrow{
					.icon-xiala{
						margin-left: -0rem;
					}
				}
			}
			.ant-select-selection-item{
				color:#262626;
				font-weight: 300;
			}
			.ant-select-selector{
				margin-left: 0rem;
				color:#adabb9;
				width: 100%;
				padding-left: 2.1rem;
			}
			.icon-xiala{
				color: #adabb9 !important;
				font-weight: 400;
			}
		}
	}

	.rename_button_list{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 3rem;

		.rename_button_item{
			width: 8.6rem;
			height: 3.2rem;
			line-height: 3.2rem;
			text-align: center;
			font-size: 1.4rem;
			cursor: pointer;
		}

		.rename_cancel_button{
			background: #E4E5EB;
			color: #030303;
			margin-right: 1.8rem;
		}

		.rename_submit_button{
			background: #343579;
			color: #FFFFFF;
		}
	}
	.el-cascader{
		.el-input--suffix{
		--el-input-hover-border-color: #d9d9d9;
			// border: .1rem solid #d9d9d9;
		}
		height: 4.6rem;
		.el-tag__content{
			line-height: 2.5;
			.el-cascader__tags{
				
			}
		}
		.el-input__wrapper{
			padding-left: 0;
		}
		.el-cascader__search-input,.el-input__inner{
			margin: 0;
			width: 100%;
			height: 4.6rem;
			padding-left: 2.1rem;
			line-height: 4.6rem;
			font-size: 1.8rem;
			box-sizing: border-box;
		}
	}

	
}
}

</style>