feat: 复选框

src/mocp/components/global-checkbox/global-checkbox.vue

 <template>
+    <!-- 全局复选框 -->
     <view class="checkbox" :style="getStyle">
         <up-checkbox-group
+            v-model="checkboxValue"
             :placement="placement"
             @change="checkboxChange"
             :disabled="disabled"
@@ -21,7 +23,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import * as dictData from 'mocp/hooks/use-dict/dict-data'
 import { cloneDeep } from 'lodash'
 
@@ -34,7 +36,7 @@ const ps = defineProps({
     },
     dictkey: {
         type: String,
-        default: ''
+        default: 'leaderState'
     },
     modelValue: {
         type: String,
@@ -43,20 +45,7 @@ const ps = defineProps({
     options: {
         type: Array,
         default: () => {
-            return [
-                {
-                    label: '苹果',
-                    value: 1
-                },
-                {
-                    label: '香蕉',
-                    value: 2
-                },
-                {
-                    label: '橙子',
-                    value: 3
-                }
-            ]
+            return []
         }
     },
     labelField: {
@@ -107,6 +96,7 @@ const ps = defineProps({
         default: false
     }
 })
+const checkboxValue = ref([])
 //获取复选框样式
 const getStyle = computed(() => {
     let checkboxAlign = 'flex-start'
@@ -124,7 +114,7 @@ const getCustomStyle = computed(() => {
         ...ps.customStyle
     }
     if (ps.placement == 'row') {
-        _style.marginLeft = '32rpx'
+        _style.marginLeft = '16rpx'
     }
     return _style
 })
@@ -145,6 +135,19 @@ const getColumns = computed(() => {
         }
     }
 })
+//监听设置默认值
+watch(
+    [() => ps.modelValue, () => ps.options],
+    () => {
+        ps.modelValue.split(ps.valueSplit).forEach((item) => {
+            let option = getColumns.value.find((option) => String(option[ps.valueField]) === String(item))
+            if (option) {
+                checkboxValue.value.push(option[ps.valueField])
+            }
+        })
+    },
+    { immediate: true }
+)
 const checkboxChange = (value) => {
     es('update:modelValue', value.join(ps.valueSplit))
     es('change', value.join(ps.valueSplit))