fix: bug

wupengfei

4 天以前 0577057e693103e2e28d01b081dbec229b22e206

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
  <el-checkbox-group style="flex: none" v-model="checkList">
    <el-checkbox
      :class="{ 'no-box': noAllCheckboxClass }"
      style="margin-right: 30px"
      :value="true"
      :indeterminate="state.isIndeterminate"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
  </el-checkbox-group>
 
  <FieldCheckBox
    v-model="innerModelValue"
    :value-enum="valueEnum"
    :enumLabelKey="enumLabelKey"
    :enum-value-key="enumValueKey"
    @change="handleCheckedServicesChange"
    v-bind="$attrs"
  ></FieldCheckBox>
</template>
 
<script setup lang="ts">
import { FieldCheckBox } from '@bole-core/components';
import _ from 'lodash';
 
defineOptions({
  name: 'FieldCheckBoxWithAll',
});
 
type Props = {
  modelValue: any[];
  valueEnum: any[];
  enumLabelKey: string;
  enumValueKey: string;
  noAllCheckboxClass?: boolean;
};
 
const props = withDefaults(defineProps<Props>(), {
  noAllCheckboxClass: true,
});
 
const emit = defineEmits<{
  (e: 'update:modelValue', val: Props['modelValue']): void;
  (e: 'change'): void;
}>();
 
const checkList = ref([]);
 
const innerModelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
});
 
const state = reactive({
  checkAll: false,
  isIndeterminate: false,
});
 
const handleCheckAllChange = (val: boolean) => {
  innerModelValue.value = val
    ? props.valueEnum.map((item) => {
        return needConvertValue(item[props.enumValueKey])
          ? Number(item[props.enumValueKey])
          : item[props.enumValueKey];
      })
    : [];
  // state.checkAll = val;
  checkList.value = [val];
  state.isIndeterminate = false;
  emit('change');
};
 
function needConvertValue(value: any) {
  return !_.isNaN(Number(value)) && !_.isBoolean(value);
}
 
const handleCheckedServicesChange = (list: string[]) => {
  const checkedCount = list.length;
  state.checkAll = checkedCount === props.valueEnum.length;
  checkList.value = checkedCount === props.valueEnum.length ? [true] : [];
  state.isIndeterminate = checkedCount > 0 && checkedCount < props.valueEnum.length;
  emit('change');
};
</script>