aida_front/src/component/LibraryPage/setLabel.vue

<template>
	<a-modal class="library_setLabel" 
		v-model:visible="setLabelShow" 
		:footer="null" 
		title="Edit tag"
		width="65%"
		:maskClosable="false"
			:keyboard="false"
		:centered="true"
		@cancel="clearSetLabel"
	>
		<div class="setLabel_centent">
			<ul class="optionsItem">
				<li class="optionsItem_title" @click.stop="" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
					<div class="setLabel_text" :class="{active:optionsItem.checAll}">
						<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
						<span v-show="!optionsItem.openType" :title="optionsItem.classificationName">{{ optionsItem.classificationName }}</span>
						<input v-show="optionsItem.openType" type="text" v-model="itemName">
						<i v-show="optionsItem.openType" @click.stop="putName(optionsIndex,'affirm',optionsItem)" class="fi fi-br-check"></i>
						<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
					</div>
					
					<ul class="childrenItem active" v-mousewheel>
						<li class="childrenItem_title setLabel_text"  :class="{active:childrenItem.checAll}" v-for="childrenItem,childrenIndex in optionsItem.childList" :key="childrenItem.id">
							<!-- {{optionsItem  }} -->
							<a-checkbox v-model:checked="childrenItem.checkAll" @change="onCheckAllchildrenItem(optionsItem)"></a-checkbox>
							<span v-show="!childrenItem.openType" :title="childrenItem.classificationName">{{ childrenItem.classificationName }}</span>
							<input v-show="childrenItem.openType" type="text" v-model="itemName">
							<i v-show="childrenItem.openType" @click.stop="putName(childrenIndex,'affirm',childrenItem)" class="fi fi-br-check"></i>
							<i v-show="!childrenItem.openType" @click.stop="putName(childrenIndex,'put',childrenItem)" class="fi fi-rr-edit"></i>
						</li>
						<li class="newLabel setLabel_text">
							<input v-show="optionsItem.addOpenType" type="text" v-model="itemName">
							<i @click.stop="putName(-1,'affirm',optionsItem)" v-show="optionsItem.addOpenType" class="fi fi-br-check"></i>
							<div class="addLabel" v-show="!optionsItem.addOpenType" @click="newLabel(optionsItem,optionsItem.id)">+</div>
						</li>
					</ul>
				</li>
				<li class="newLabel setLabel_text optionsItem_title">
					<div>
						<input v-show="openType" type="text" v-model="itemName">
						<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
						<div class="addLabel" v-show="!openType" @click="newLabel('','')">+</div>
					</div>
					<div class="started_btn" @click="removeLabel(options)">Delete</div>
				</li>
			</ul>
		</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';

export default defineComponent({
	components:{
        VueCropper,
    },
    setup() {
		let multiple = ref(false)
		let indeterminate = ref(true)
		let options:any = ref([])//父组件传过来的数据
		let type:any = inject('type')//父组件传过来的数据
		let checkedList = ref([])
		let openType = ref(false)
		let itemName = ref('')
		let {t} = useI18n()
        return {
			multiple,
			indeterminate,
			value: ref<string[]>([]),
			options,
			checkedList,
			openType,
			type,
			itemName,
			t
        }
    },
    data(){
        return{
			setLabelShow:false,
        }
    }, 
	mounted(){
	},
	watch: {
		
	},
	directives:{
		mousewheel:{
			mounted (el) {
				let bodyDom:any = document.getElementsByClassName('setLabel_centent')[0]
				nextTick().then(()=>{
					let domParent:any = document.getElementsByClassName('childrenItem')
					let mouseover = (event:any)=>{
						event.stopPropagation()
						bodyDom.classList.add('active')
					}
					let mouseleave = (event:any)=>{
						event.stopPropagation()
						bodyDom.classList.remove('active')
					}
					for (let index = 0; index < domParent.length; index++) {
						domParent[index].addEventListener('mouseover',mouseover,false)
						domParent[index].addEventListener('mouseleave',mouseleave,false)
					}
					el.addEventListener('wheel',(e:WheelEvent)=>{
						let num = 0
						if(e.deltaY > 0){
							num = 25
						}else{
							num = -25
						}
						el.scrollBy(num, 0);
					},true)
				})
				
			}
		}
	},
    methods:{
      init(str:any,data:any){
		this.setLabelShow = true
		if(str === 'add'){
			this.multiple = false
		}else{
			this.multiple = true
		}
		this.clearOpenType()
		this.options = data
	  },
	  clearSetLabel(){
		this.clearOpenType()
		let parent:any = this.$parent
		parent.getClass()
	  },
	  onCheckAllChange(value:any){
		if(value?.childList){
			value?.childList.forEach((item:any) => {
				item.checkAll = value.checkAll
			});
		}
	  },
	  onCheckAllchildrenItem(value:any){
		let boor = value?.childList.every( (item:any) => item.checkAll )
		if(boor){
			value.checkAll = true
		}else{
			value.checkAll = false
		}
	  },
	  clearOpenType(){
		this.options.forEach((optionsItem:any) => {
			optionsItem.openType = false
			optionsItem.addOpenType = false
			if(optionsItem?.childList){
				optionsItem?.childList?.forEach((childrenItem:any) => {
					childrenItem.openType = false
				});
			}
		});
		this.openType = false
	  },
	  putName(index:number,v:string,item:any){
			let data:any 
			if(v == 'put'){
				this.clearOpenType()
				document.addEventListener('click',this.clearOpenType)
				item.openType = true
				this.itemName = item.classificationName
				// this.options[index].openType = true
				// this.itemName = this.workspace.workspaceList[index].workSpaceName
			}else if(v == 'affirm'){
				if(index == -1){
					if(this.itemName == ''){
						message.warning(this.t('Habit.jsContent2'));
						return
					}else{
						
						if(item){
							item.addOpenType = false
							data = {
								classificationName:this.itemName,
								parentId:item.id
							}
						}else{
							this.openType = false
							data = {
								classificationName:this.itemName,
								parentId:''
							}
						}
					}
				}else{
					data = {
						id:item.id,
						classificationName:this.itemName,
					}
					item.classificationName = this.itemName
					item.openType = false
				}
				this.addLabel(data)
				document.removeEventListener('click',this.clearOpenType)
			}
		},
		newLabel(item:any,id:any){
			this.itemName = ''
			this.clearOpenType()

			if(item){
				item.addOpenType = true
			}else{
				this.openType = true
			}
		},
		removeLabel(val:any){
			let data = {
				"classificationIdList": [],
				"deleteConfirm": 0,
			}
			let classificationIdList:any = []
			this.clearOpenType()
			val.forEach((optionsItem:any) => {
				if(optionsItem.checkAll){
					classificationIdList.push(optionsItem.id)
				}else{
					if(optionsItem.childList){
						optionsItem.childList.forEach((childrenItem:any) => {
							if(childrenItem.checkAll){
								classificationIdList.push(childrenItem.id)
							}
						});
					}
				}
			});
			data.classificationIdList = classificationIdList
			this.deleteClass(data)
		},
		addLabel(val:any){
			let data = this.setLabelData()
			if(val.parentId){//新增
				data.parentId = val.parentId
			}
			if(val.id){//修改
				data.id = val.id
			}
			data.classificationName = val.classificationName

			Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
                (rv: any) => {
					this.getClass()
                }	
            ).catch((res)=>{
				this.getClass()
            });
		},
		deleteClass(data:any){
			Https.axiosPost(Https.httpUrls.classificationDelete, data).then(
                (rv: any) => {
					this.getClass()
                }
            ).catch((res)=>{
				if(res.errCode === 2){
					let _this = this
					Modal.confirm({
						title: res.errMsg,
						icon: createVNode(ExclamationCircleOutlined),
						okText: 'Yes',
						cancelText: 'No',
						mask:false,
						zIndex:99999,
						centered:true,
						onOk() {
							data.deleteConfirm = 1
							_this.deleteClass(data)
						},
						onCancel(){
							
						}
					});
				}
            });
		},
		getClass(){
			let data = this.setLabelData()
			Https.axiosPost(Https.httpUrls.queryClassification, data).then(
                (rv: any) => {
					this.options = rv
                }
            ).catch((res)=>{
            });
		},
		setLabelData(){
			let data = {
				"classificationIdList": [],
				"classificationName": "123221",
				"createTime": "",
				"deleteConfirm": '',
				"id": '',
				"libraryId": '',
				"parentId": '',
				"type": this.type?.selectCode._value,
				"updateTime": "",
				"userId": ''
			}
			return data
		}
    }
})
</script>
<style lang="less">
.library_setLabel{
	.ant-modal-content{
		border-radius: 1rem;
		overflow: hidden;
	}
	.setLabel_centent{
		display: flex;
		flex-direction: column;
		// height: 300px;
		min-height: 50rem;
		max-height: 65rem;
		overflow-y: auto;
		// border-radius: ;
		position: relative;
		&.setLabel_centent::-webkit-scrollbar{display: none;}

		&.active{
			overflow: hidden;
		}
		
		ul{
			display: flex;
			li{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				i{
					cursor: pointer;
				}
				input{
					border: 0;
					width: 80%;
					background: rgba(0,0,0,0);
					border-bottom: 1px solid #b5b5b5;
				}
				
			}
			.setLabel_text{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: .5rem 1rem;
				width: 16rem;
				margin: 2rem 2rem;
				border-radius: 1rem;
				justify-content: space-between;
				flex-shrink: 0;
				font-size: 1.8rem;
				font-weight: 900;
				transition: .3s all;
				i{
					display: flex;
				}
				>span{
					max-width: 60%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			
		}
		.optionsItem{
			flex-direction: column;
			padding: 1rem;
			flex: 1;
			
			.optionsItem_title{
				margin-bottom: 2rem;
				border-radius: 1rem;
				align-items: flex-start;
				background-color: #f9f9f9;
				border: 0.1rem solid #ebebeb;
				// border-bottom: 2px solid rgba(0,0,0,.2);
				box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);
				>label{
					align-items: center;
				}
				.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
					opacity: 0;
					transition: .3s all;
				}
				:hover{
					// background: #efefef;
					.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
						opacity: 1;
					}
				}
				.active{
					.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
						opacity: 1 !important;
					}
				}
				.childrenItem{
					max-width: 100%;
					overflow: hidden;
					overflow-x: auto;
					// padding-bottom: 2rem;
					.setLabel_text{
						font-weight: 300;
						margin: 1rem 1rem;
						background: #f0f0f0;
						// background: #d5d5d5;
						font-size: 1.4rem;
						
						label{
							transform: scale(.8);
						}
						.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
							opacity: 0;
							transition: .3s all;
						}
					}
					.setLabel_text:hover{
						// background: #efefef;
						.fi-rr-edit,.fi-br-check,.ant-checkbox-wrapper{
							opacity: 1;
						}
					}
					&.active::-webkit-scrollbar-button:single-button{
						display: none;
					}
					&.active::-webkit-scrollbar {
						/* 竖轴的宽度 */
						width: 1rem;
						/* 横轴的高度 */
						height: 1rem;
						transition: all .3s;
					}
					/* 进度 */
					&.active::-webkit-scrollbar-thumb {
						border-radius: 1rem;
						background: rgba(238, 238, 244, 0);
					}
					/* 轨道 */
					&.active::-webkit-scrollbar-track {
						border-radius: 1rem;
						background: rgba(238, 238, 244, 0);
					}
					&.active:hover {
						// overflow-x: scroll;
						&.active::-webkit-scrollbar-thumb {
							background: #543087;
						}
						/* 轨道 */
						&.active::-webkit-scrollbar-track {
							background: rgba(84, 48, 135,.2);
						}
					}
					
				}
			}
			.newLabel{
				text-align: center;
				justify-content: center;
				&.optionsItem_title{
					width: 100%;
					margin: 0;
					justify-content: space-around;
					border: none;
					background: none;
					position: sticky;
					background: #fff;
					border: none;
					margin-top: auto;
					bottom: 2rem;
					>div{
					}
					.started_btn{
						width: auto;
						position: sticky;
						top: 0;
						z-index: 999;
						// margin-right: auto;
					}
				}
				>div{
					display: flex;
					width: 16rem;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.addLabel{
					border-radius: 50%;
					border: 1px solid #000;
					display: inline-block;
					width: 2rem;
					height: 2rem;
					line-height: 2rem;
					text-align: center;
					cursor: pointer;
				}
				i{
					cursor: pointer;
				}
			}
		}
	}
}

</style>