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"
		:centered="true"
		@onCancel="clearSetLabel"
	>
		<div class="setLabel_centent">
			<ul class="setLabel_label1" v-for="item1 in options" :key="item1.id">
				<li class="label1_title">
					<a-checkbox
						v-model:checked="item1.checkAll"
						:indeterminate="indeterminate"
						@change="onCheckAllChange(item1.children,$event)"
						>
						{{ item1.label }}
					</a-checkbox>
					<ul class="setLabel_label2" >
						<a-checkbox-group v-model:value="checkedList" :options="item1.children" />
					</ul>
				</li>
			</ul>
		</div>
	</a-modal>
    
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,watch,reactive} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile,base64toFile} from "@/tool/util"
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 cropperTime:any = ref()
		let multiple = ref(false)
		let indeterminate = ref(true)
		const options: CascaderProps['options'] = [
			{
				label: 'Light',
				value: 'light',
				checkAll:false,
				children: new Array(20)
				.fill(null)
				.map((_, index) => ({ label: `Number ${index}`, value: index })),
			},
			{
				label: 'Bamboo',
				value: 'bamboo',
				checkAll:false,
				children: [
				{
					label: 'Little',
					checkAll:false,
					value: 'little',
					children: [
					{
						label: `'Toy Fish'`,
						value: 'fish',
					},
					{
						label: 'Toy Cards',
						value: 'cards',
					},
					{
						label: 'Toy Bird',
						value: 'bird',
					},
					],
				},
				],
			},
		];
		let checkedList = ref([])

		let {t} = useI18n()
        return {
			multiple,
			indeterminate,
			value: ref<string[]>([]),
			options,
			checkedList,
			t
        }
    },
    data(){
        return{
			setLabelShow:false,
        }
    }, 
	mounted(){
	},
	watch: {
		
	},
    methods:{
      init(str:any){
		this.setLabelShow = true
		if(str === 'add'){
			this.multiple = false
		}else{
			this.multiple = true
		}
		
	  },
	  clearSetLabel(){
		this.setLabelShow = false
	  },
	  onCheckAllChange(item:any,e:any){
			console.log(this.checkedList);
			this.checkedList = item
			// this.checkedList.forEach((item)=>{
			// 	item.
			// })
			this.checkedList= e.target.checked ? item : [];
			this.indeterminate= false;
	  }
    
    }
})
</script>
<style lang="less">
.library_setLabel{
	.setLabel_centent{
		display: flex;
		flex-direction: column;
		ul{
			display: flex;
			li{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
		}
	}
}

</style>