vue2-client 1.16.83 → 1.16.84

package/src/base-client/components/his/XCheckbox/XCheckbox.vue

@@ -1,134 +1,181 @@
-<template>
-  <div class="x-checkbox-container" :class="wrapperClassObject()">
-    <a-checkbox-group v-model="innerValue" @change="onChange" class="x-checkbox-group">
-      <div v-for="item in data" :key="item.value" class="x-checkbox-item-container">
-        <a-checkbox :value="item.value" class="x-checkbox-item">
-          {{ item.label }}
-        </a-checkbox>
-      </div>
-    </a-checkbox-group>
-  </div>
-</template>
-
-<script>
-import { getConfigByName } from '@vue2-client/services/api/common'
-import { Checkbox } from 'ant-design-vue'
-
-export default {
-  name: 'XCheckbox',
-  components: {
-    ACheckboxGroup: Checkbox.Group,
-    ACheckbox: Checkbox
-  },
-  props: {
-    queryParamsName: {
-      type: Object,
-      default: null
-    },
-    value: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data () {
-    return {
-      data: [],
-      innerValue: [],
-      config: null
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  watch: {
-    value: {
-      handler (val) {
-        this.innerValue = val
-      },
-      deep: true
-    }
-  },
-  emits: ['change', 'init'],
-  methods: {
-    async getData (data) {
-      getConfigByName(data, 'af-his', res => {
-        // 1. 加载选项
-        if (res.checkbox && Array.isArray(res.checkbox)) {
-          this.data = res.checkbox
-          // 2. 初始化默认值（优先级： 配置defaultValue > 空数组）
-          if (res.defaultValue !== undefined && Array.isArray(res.defaultValue)) {
-            this.innerValue = res.defaultValue
-          }
-          // 3. 触发初始化事件
-          this.$emit('init', {
-            config: res,
-            options: this.data,
-            value: this.innerValue
-          })
-        } else {
-          this.$message.error('配置错误，checkbox字段不是数组')
-        }
-      })
-    },
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-      const booleanStyleKeys = [
-        'compact'
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`x-checkbox-${key}`] = true
-      })
-      return classes
-    },
-    onChange (checkedValues) {
-      this.innerValue = checkedValues
-      this.$emit('change', checkedValues)
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.x-checkbox-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.x-checkbox-group {
-  display: flex;
-  justify-content: space-around;
-}
-
-.x-checkbox-item-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 0 8px;
-  box-sizing: border-box;
-}
-
-.x-checkbox-item {
-  margin-bottom: 8px;
-}
-.x-checkbox-compact {
-  &.x-checkbox-container,
-  .x-checkbox-container {
-    :deep(.x-checkbox-item-container){
-      padding: 0px !important;
-      flex: auto !important;
-    }
-    :deep(.x-checkbox-item){
-      margin: 0px;
-    }
-    :deep(.x-checkbox-item) > span:last-child {
-      padding-right: 2px;
-      padding-left: 2px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="x-checkbox-container" :class="wrapperClassObject()">
+    <a-checkbox-group v-model="innerValue" @change="onChange" class="x-checkbox-group">
+      <div v-for="item in data" :key="item.value" class="x-checkbox-item-container">
+        <a-checkbox :value="item.value" class="x-checkbox-item">
+          {{ item.label }}
+        </a-checkbox>
+      </div>
+    </a-checkbox-group>
+  </div>
+</template>
+
+<script>
+import { getConfigByName } from '@vue2-client/services/api/common'
+import { Checkbox } from 'ant-design-vue'
+
+export default {
+  name: 'XCheckbox',
+  components: {
+    ACheckboxGroup: Checkbox.Group,
+    ACheckbox: Checkbox
+  },
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: null
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      data: [],
+      innerValue: [],
+      config: null
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.innerValue = val
+      },
+      deep: true
+    }
+  },
+  emits: ['change', 'init'],
+  methods: {
+    async getData (data) {
+      getConfigByName(data, 'af-his', res => {
+        // 1. 加载选项
+        if (res.checkbox && Array.isArray(res.checkbox)) {
+          this.data = res.checkbox
+          // 2. 初始化默认值（优先级： 配置defaultValue > 空数组）
+          if (res.defaultValue !== undefined && Array.isArray(res.defaultValue)) {
+            this.innerValue = res.defaultValue
+          }
+          // 3. 触发初始化事件
+          this.$emit('init', {
+            config: res,
+            options: this.data,
+            value: this.innerValue
+          })
+        } else {
+          this.$message.error('配置错误，checkbox字段不是数组')
+        }
+      })
+    },
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+      const booleanStyleKeys = [
+        'compact', 'out-checkbox'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`x-checkbox-${key}`] = true
+      })
+      return classes
+    },
+    onChange (checkedValues) {
+      this.innerValue = checkedValues
+      this.$emit('change', checkedValues)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.x-checkbox-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.x-checkbox-group {
+  display: flex;
+  justify-content: space-around;
+}
+
+.x-checkbox-item-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+
+.x-checkbox-item {
+  margin-bottom: 8px;
+}
+.x-checkbox-compact {
+  &.x-checkbox-container,
+  .x-checkbox-container {
+    :deep(.x-checkbox-item-container){
+      padding: 0px !important;
+      flex: auto !important;
+    }
+    :deep(.x-checkbox-item){
+      margin: 0px;
+    }
+    :deep(.x-checkbox-item) > span:last-child {
+      padding-right: 2px;
+      padding-left: 2px;
+    }
+  }
+}
+
+/* out-checkbox：外排版紧凑风格，与表单风格配置保持一致的布尔开关用法 */
+.x-checkbox-container.x-checkbox-out-checkbox {
+  margin-top: 9px;
+
+  :deep(.x-checkbox-group) {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 0 46px;
+  }
+
+  :deep(.x-checkbox-item-container) {
+    flex: 0 0 auto;
+    align-items: flex-start;
+    text-align: left;
+    padding: 0;
+  }
+
+  :deep(.x-checkbox-item) {
+    margin: 0;
+    display: flex;
+    align-items: center;
+
+    .ant-checkbox {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+
+      .ant-checkbox-inner {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    /* 文字标签样式 */
+    span {
+      height: 23px;
+      opacity: 1;
+      font-family: 'Source Han Sans', sans-serif;
+      font-size: 16px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #313131;
+    }
+  }
+}
+</style>