duty-management-web/src/components/cus/cus-form-link/checkbox.vue

<template>
  <div v-loading="loading" :element-loading-background="elementLoadingBackground">
    <el-checkbox-group
        v-bind="$attrs"
        v-model="paramVal"
        @change="handleChange"
    >
      <el-checkbox
          v-for="item in options"
          :label="item[valueKey]"
      >
        {{ item[labelKey] }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick,
  inject
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    param: {},
    label: {},
    options: { type: Array, default: () => [] },
    labelKey: { type: String, default: 'dictLabel' },
    valueKey: { type: String, default: 'dictValue' },
    static: {default: false}
  },
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      paramVal: props.param,
      loading: true,
      elementLoadingBackground: inject('element-loading-background', null)
    })
    watch(() => state.paramVal, (n) => {
      emit('emitParam', n)
    })
    watch(() => props.param, (n) => {
      state.paramVal = n
    })
    watch(() => [props.options, props.static], () => {
      state.loading = false
    })
    const optionsMapCpt = computed(() => {
      const map = new Map()
      props.options?.forEach((v: any) => {
        map.set(v[props.valueKey], v)
      })
      return map
    })
    const handleChange = (val: any) => {
      emit('getObject', val.map((v: any) => optionsMapCpt.value.get(v)))
    }
    onMounted(() => {
      if (props.static !== false || props.options?.length > 0) {
        state.loading = false
      }
    })
    return {
      ...toRefs(state),
      optionsMapCpt,
      handleChange
    }
  },
})
</script>

<style scoped lang="scss">
</style>