2023-11-8-dist

src/component/LibraryPage/setLabel.vue

@@ -8,16 +8,27 @@
 		:centered="true"
 		@onCancel="clearSetLabel"
 	>
-		<div>
-			<ul>
-				<li></li>
+		<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} from 'vue'
+import { defineComponent,ref,createVNode,watch,reactive} from 'vue'
 import { Https } from "@/tool/https";
 import {dataURLtoFile,base64toFile} from "@/tool/util"
 import { getCookie } from "@/tool/cookie";
@@ -34,10 +45,12 @@ export default defineComponent({
     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 })),
@@ -45,9 +58,11 @@ export default defineComponent({
 			{
 				label: 'Bamboo',
 				value: 'bamboo',
+				checkAll:false,
 				children: [
 				{
 					label: 'Little',
+					checkAll:false,
 					value: 'little',
 					children: [
 					{
@@ -67,12 +82,15 @@ export default defineComponent({
 				],
 			},
 		];
+		let checkedList = ref([])
+
 		let {t} = useI18n()
         return {
 			multiple,
+			indeterminate,
 			value: ref<string[]>([]),
 			options,
-
+			checkedList,
 			t
         }
     },
@@ -84,20 +102,7 @@ export default defineComponent({
 	mounted(){
 	},
 	watch: {
-		sex:{
-			handler(newVal:any,oldVal:any){
-				// let imgbox:any = this.$refs.imgbox
-				// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
-				// if(imgBoxSizeBG){
-				// 	if(newVal == 'Male'){
-				// 		imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
-				// 	}else{
-				// 		imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
-				// 	}
-				// }
-
-			},
-		},
+		
 	},
     methods:{
       init(str:any){
@@ -111,6 +116,15 @@ export default defineComponent({
 	  },
 	  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;
 	  }
     
     }
@@ -118,7 +132,20 @@ export default defineComponent({
 </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>