You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.4 KiB
94 lines
2.4 KiB
import { Component } from "@angular/core";
|
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
|
|
|
|
@Component({
|
|
selector: "app-month-select",
|
|
templateUrl: "./month-select.component.html",
|
|
styleUrls: ["./month-select.component.less"],
|
|
providers: [
|
|
{
|
|
provide: NG_VALUE_ACCESSOR,
|
|
multi: true,
|
|
useExisting: MonthSelectComponent,
|
|
},
|
|
],
|
|
})
|
|
export class MonthSelectComponent implements ControlValueAccessor {
|
|
allMonthChecked = false;
|
|
|
|
indeterminate = false;
|
|
|
|
allMonth = [
|
|
{ value: 1, label: "一月", checked: false },
|
|
{ value: 2, label: "二月", checked: false },
|
|
{ value: 3, label: "三月", checked: false },
|
|
{ value: 4, label: "四月", checked: false },
|
|
{ value: 5, label: "五月", checked: false },
|
|
{ value: 6, label: "六月", checked: false },
|
|
{ value: 7, label: "七月", checked: false },
|
|
{ value: 8, label: "八月", checked: false },
|
|
{ value: 9, label: "九月", checked: false },
|
|
{ value: 10, label: "十月", checked: false },
|
|
{ value: 11, label: "十一月", checked: false },
|
|
{ value: 12, label: "十二月", checked: false },
|
|
];
|
|
|
|
updateAllMonthChecked() {
|
|
this.indeterminate = false;
|
|
if (this.allMonthChecked) {
|
|
this.allMonth = this.allMonth.map((item) => ({
|
|
...item,
|
|
checked: true,
|
|
}));
|
|
} else {
|
|
this.allMonth = this.allMonth.map((item) => ({
|
|
...item,
|
|
checked: false,
|
|
}));
|
|
}
|
|
this.formatVal();
|
|
}
|
|
|
|
monthChecked(checked: boolean, value: number) {
|
|
this.allMonth = this.allMonth.map((i) => (i.value === value ? { ...i, checked } : i));
|
|
this.monthCheckEffect();
|
|
this.formatVal();
|
|
}
|
|
|
|
monthCheckEffect() {
|
|
if (this.allMonth.every((item) => !item.checked)) {
|
|
this.allMonthChecked = false;
|
|
this.indeterminate = false;
|
|
} else if (this.allMonth.every((item) => item.checked)) {
|
|
this.allMonthChecked = true;
|
|
this.indeterminate = false;
|
|
} else {
|
|
this.indeterminate = true;
|
|
}
|
|
}
|
|
|
|
formatVal() {
|
|
const vals = this.allMonth.reduce((a, c) => {
|
|
return c.checked ? a.concat(c.value) : a;
|
|
}, [] as number[]);
|
|
this.onChange(vals);
|
|
}
|
|
|
|
onChange(v: number[]) {}
|
|
|
|
ontouch(v: any) {}
|
|
|
|
writeValue(v: number[]): void {
|
|
// console.log("v", v);
|
|
this.allMonth = this.allMonth.map((i) => (v.includes(i.value) ? { ...i, checked: true } : i));
|
|
this.monthCheckEffect();
|
|
}
|
|
|
|
registerOnChange(fn: any): void {
|
|
this.onChange = fn;
|
|
}
|
|
|
|
registerOnTouched(fn: any): void {
|
|
this.ontouch = fn;
|
|
}
|
|
}
|
|
|