vue2-client 1.16.83 → 1.16.84

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

@@ -1,322 +1,389 @@
-<template>
-  <div class="x-radio-container" :class="wrapperClassObject()">
-    <a-radio-group v-model="innerValue" @change="onChange" :class="['x-radio-group', { 'x-radio-group-left': config.alignLeft }]">
-      <div
-        v-for="item in data"
-        :key="item.value"
-        class="x-radio-item-container"
-        :class="{
-          'x-radio-item-bordered': config.showBorder,
-          'x-radio-item-highlight': config.highlightBorder
-        }"
-        :style="getHighlightBorderStyle(item)">
-        <div class="x-radio-item-wrapper">
-          <div
-            v-if="config.showIndicator && item.bottomLine !== false"
-            class="x-radio-indicator-left"
-            :style="{
-              width: item.indicatorWidth || '4px',
-              backgroundColor: item.indicatorColor || config.indicatorActiveColor,
-              height: item.indicatorHeight || '16px'
-            }"
-          ></div>
-          <a-radio
-            :value="item.value"
-            class="x-radio-item"
-            :class="{ 'x-radio-item-no-dot': config.highlightBorder }"
-          >
-            {{ item.label }}
-          </a-radio>
-        </div>
-        <div
-          v-if="config.showIndicator && item.bottomLine !== false && !config.showBorder && !config.highlightBorder"
-          class="x-radio-indicator-bottom"
-          :style="{
-            width: item.indicatorWidth || '100%',
-            backgroundColor: item.indicatorColor || config.indicatorActiveColor,
-            height: config.indicatorHeight + 'px'
-          }"
-        ></div>
-      </div>
-    </a-radio-group>
-  </div>
-</template>
-
-<script>
-import { getConfigByName } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XRadio',
-  inject: ['getComponentByName'],
-  props: {
-    queryParamsName: {
-      type: Object,
-      default: null
-    },
-    // eslint-disable-next-line vue/require-default-prop
-    value: [String, Number]
-  },
-  data () {
-    return {
-      data: [],
-      innerValue: null,
-      config: {
-        showIndicator: true,
-        indicatorHeight: 3,
-        indicatorActiveColor: '#1890ff',
-        alignLeft: false,
-        showBorder: false,
-        highlightBorder: false
-      }
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  watch: {
-    value (val) {
-      this.innerValue = val
-    }
-  },
-  emits: ['change', 'init'],
-  methods: {
-    async getData (data) {
-      getConfigByName(data, 'af-his', res => {
-        // 1. 先加载选项
-        if (res.radio && Array.isArray(res.radio)) {
-          this.data = res.radio
-          // 2. 加载指示器配置
-          if (res.indicator !== undefined) {
-            // 如果indicator是布尔值，则只控制显示/隐藏
-            if (typeof res.indicator === 'boolean') {
-              this.config.showIndicator = res.indicator
-            } else if (typeof res.indicator === 'object') {
-              this.config = {
-                ...this.config,
-                ...res.indicator
-              }
-            }
-          }
-          // 3. 加载布局配置
-          if (res.layout !== undefined) {
-            if (typeof res.layout === 'object') {
-              this.config = {
-                ...this.config,
-                ...res.layout
-              }
-            }
-          }
-          // 4. 初始化默认值（优先级： 配置defaultValue > 第一个选项）
-          if (this.value !== undefined && this.value !== null) {
-            this.innerValue = this.value // 优先使用外部传入的 value
-          } else if (res.defaultValue !== undefined && res.defaultValue !== null) {
-            // 使用配置中的defaultValue
-            this.innerValue = res.defaultValue
-          } else if (this.data.length > 0) {
-            // 如果没有默认值但有选项，使用第一个选项
-            this.innerValue = this.data[0].value
-          }
-          // 5. 触发初始化事件
-          this.$emit('init', this.innerValue)
-        } else {
-          this.$message.error('配置错误，radio字段不是数组')
-        }
-      })
-    },
-    onChange (e) {
-      this.innerValue = e.target.value
-      this.$emit('change', e.target.value)
-    },
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-      const booleanStyleKeys = [
-        'item-0padding', 'compact'
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`x-radio-${key}`] = true
-      })
-      return classes
-    },
-    getHighlightBorderStyle (item) {
-      if (!this.config.highlightBorder) return {}
-
-      // 如果当前选项被选中且有边框颜色配置，使用配置的颜色
-      if (this.innerValue === item.value && item.borderColor) {
-        return {
-          borderColor: item.borderColor
-        }
-      }
-
-      // 如果当前选项被选中且有indicatorColor配置，使用indicatorColor作为边框颜色
-      if (this.innerValue === item.value && item.indicatorColor) {
-        return {
-          borderColor: item.indicatorColor
-        }
-      }
-
-      // 默认返回空对象，使用CSS中的默认灰色边框
-      return {}
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.x-radio-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.x-radio-group {
-  display: flex;
-  justify-content: space-around;
-
-  &.x-radio-group-left {
-    justify-content: flex-start;
-  }
-}
-
-.x-radio-item-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 0 8px;
-  box-sizing: border-box;
-
-  .x-radio-group-left & {
-    flex: none;
-    align-items: flex-start;
-    text-align: left;
-    margin-right: 16px;
-    padding: 0 4px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  &.x-radio-item-bordered {
-    border: 1px solid #d9d9d9;
-    border-radius: 173px;
-    padding: 8px 12px;
-    margin-right: 8px;
-    background-color: #fff;
-    transition: all 0.3s;
-
-    &:hover {
-      border-color: #40a9ff;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .x-radio-group-left & {
-      margin-right: 8px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  &.x-radio-item-highlight {
-    border: 2px solid #d9d9d9;
-    border-radius: 173px;
-    padding: 8px 12px;
-    margin-right: 8px;
-    background-color: #fff;
-    transition: all 0.3s;
-    position: relative;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .x-radio-group-left & {
-      margin-right: 8px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    // 动态边框颜色通过内联样式设置
-  }
-}
-
-.x-radio-item-wrapper {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .x-radio-group-left & {
-    justify-content: flex-start;
-  }
-}
-
-.x-radio-item {
-  margin-bottom: 8px;
-
-  .x-radio-item-bordered & {
-    margin-bottom: 0;
-  }
-
-  &.x-radio-item-no-dot {
-    :deep(.ant-radio) {
-      display: none;
-    }
-
-    :deep(.ant-radio-wrapper) {
-      padding-left: 0;
-    }
-  }
-}
-
-.x-radio-indicator-left {
-  width: 4px;
-  height: 16px;
-  margin-right: 8px;
-  border-radius: 6px;
-  transition: all 0.3s;
-}
-
-.x-radio-indicator-bottom {
-  height: 3px;
-  transition: all 0.3s;
-  max-width: 100%;
-}
-.x-radio-description {
-  padding: 4px 4px 4px 4px;
-}
-
-.x-radio-item-0padding {
-  &.x-radio-container,
-  .x-radio-container {
-    :deep(.x-radio-item-container) {
-      padding: 0px;
-    }
-  }
-}
-.x-radio-compact {
-  &.x-radio-container,
-  .x-radio-container {
-    :deep(.simple-inline-item){
-      padding: 0px !important;
-    }
-    :deep(.ant-radio-group){
-      display: flex;
-      justify-content: space-between;
-    }
-    :deep(.x-radio-item) > span:last-child {
-      padding-right: 2px;
-      padding-left: 2px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="x-radio-container" :class="wrapperClassObject()">
+    <a-radio-group v-model="innerValue" @change="onChange" :class="['x-radio-group', { 'x-radio-group-left': config.alignLeft }]">
+      <div
+        v-for="item in data"
+        :key="item.value"
+        class="x-radio-item-container"
+        :class="{
+          'x-radio-item-bordered': config.showBorder,
+          'x-radio-item-highlight': config.highlightBorder
+        }"
+        :style="getHighlightBorderStyle(item)">
+        <div class="x-radio-item-wrapper">
+          <div
+            v-if="config.showIndicator && item.bottomLine !== false"
+            class="x-radio-indicator-left"
+            :style="{
+              width: item.indicatorWidth || '4px',
+              backgroundColor: item.indicatorColor || config.indicatorActiveColor,
+              height: item.indicatorHeight || '16px'
+            }"
+          ></div>
+          <a-radio
+            :value="item.value"
+            class="x-radio-item"
+            :class="{ 'x-radio-item-no-dot': config.highlightBorder }"
+          >
+            {{ item.label }}
+          </a-radio>
+        </div>
+        <div
+          v-if="config.showIndicator && item.bottomLine !== false && !config.showBorder && !config.highlightBorder"
+          class="x-radio-indicator-bottom"
+          :style="{
+            width: item.indicatorWidth || '100%',
+            backgroundColor: item.indicatorColor || config.indicatorActiveColor,
+            height: config.indicatorHeight + 'px'
+          }"
+        ></div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XRadio',
+  inject: ['getComponentByName'],
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: null
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    value: [String, Number]
+  },
+  data () {
+    return {
+      data: [],
+      innerValue: null,
+      config: {
+        showIndicator: true,
+        indicatorHeight: 3,
+        indicatorActiveColor: '#1890ff',
+        alignLeft: false,
+        showBorder: false,
+        highlightBorder: false
+      }
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  watch: {
+    value (val) {
+      this.innerValue = val
+    }
+  },
+  emits: ['change', 'init'],
+  methods: {
+    async getData (data) {
+      getConfigByName(data, 'af-his', res => {
+        // 1. 先加载选项
+        if (res.radio && Array.isArray(res.radio)) {
+          this.data = res.radio
+          // 2. 加载指示器配置
+          if (res.indicator !== undefined) {
+            // 如果indicator是布尔值，则只控制显示/隐藏
+            if (typeof res.indicator === 'boolean') {
+              this.config.showIndicator = res.indicator
+            } else if (typeof res.indicator === 'object') {
+              this.config = {
+                ...this.config,
+                ...res.indicator
+              }
+            }
+          }
+          // 3. 加载布局配置
+          if (res.layout !== undefined) {
+            if (typeof res.layout === 'object') {
+              this.config = {
+                ...this.config,
+                ...res.layout
+              }
+            }
+          }
+          // 4. 初始化默认值（优先级： 配置defaultValue > 第一个选项）
+          if (this.value !== undefined && this.value !== null) {
+            this.innerValue = this.value // 优先使用外部传入的 value
+          } else if (res.defaultValue !== undefined && res.defaultValue !== null) {
+            // 使用配置中的defaultValue
+            this.innerValue = res.defaultValue
+          } else if (this.data.length > 0) {
+            // 如果没有默认值但有选项，使用第一个选项
+            this.innerValue = this.data[0].value
+          }
+          // 5. 触发初始化事件
+          this.$emit('init', this.innerValue)
+        } else {
+          this.$message.error('配置错误，radio字段不是数组')
+        }
+      })
+    },
+    onChange (e) {
+      this.innerValue = e.target.value
+      this.$emit('change', e.target.value)
+    },
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+      const booleanStyleKeys = [
+        'item-0padding', 'compact', 'out-radio'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`x-radio-${key}`] = true
+      })
+      return classes
+    },
+    getHighlightBorderStyle (item) {
+      if (!this.config.highlightBorder) return {}
+
+      // 如果当前选项被选中且有边框颜色配置，使用配置的颜色
+      if (this.innerValue === item.value && item.borderColor) {
+        return {
+          borderColor: item.borderColor
+        }
+      }
+
+      // 如果当前选项被选中且有indicatorColor配置，使用indicatorColor作为边框颜色
+      if (this.innerValue === item.value && item.indicatorColor) {
+        return {
+          borderColor: item.indicatorColor
+        }
+      }
+
+      // 默认返回空对象，使用CSS中的默认灰色边框
+      return {}
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.x-radio-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.x-radio-group {
+  display: flex;
+  justify-content: space-around;
+
+  &.x-radio-group-left {
+    justify-content: flex-start;
+  }
+}
+
+.x-radio-item-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+
+  .x-radio-group-left & {
+    flex: none;
+    align-items: flex-start;
+    text-align: left;
+    margin-right: 16px;
+    padding: 0 4px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &.x-radio-item-bordered {
+    border: 1px solid #d9d9d9;
+    border-radius: 173px;
+    padding: 8px 12px;
+    margin-right: 8px;
+    background-color: #fff;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #40a9ff;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .x-radio-group-left & {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.x-radio-item-highlight {
+    border: 2px solid #d9d9d9;
+    border-radius: 173px;
+    padding: 8px 12px;
+    margin-right: 8px;
+    background-color: #fff;
+    transition: all 0.3s;
+    position: relative;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .x-radio-group-left & {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    // 动态边框颜色通过内联样式设置
+  }
+}
+
+.x-radio-item-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .x-radio-group-left & {
+    justify-content: flex-start;
+  }
+}
+
+.x-radio-item {
+  margin-bottom: 8px;
+
+  .x-radio-item-bordered & {
+    margin-bottom: 0;
+  }
+
+  &.x-radio-item-no-dot {
+    :deep(.ant-radio) {
+      display: none;
+    }
+
+    :deep(.ant-radio-wrapper) {
+      padding-left: 0;
+    }
+  }
+}
+
+.x-radio-indicator-left {
+  width: 4px;
+  height: 16px;
+  margin-right: 8px;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+
+.x-radio-indicator-bottom {
+  height: 3px;
+  transition: all 0.3s;
+  max-width: 100%;
+}
+.x-radio-description {
+  padding: 4px 4px 4px 4px;
+}
+
+.x-radio-item-0padding {
+  &.x-radio-container,
+  .x-radio-container {
+    :deep(.x-radio-item-container) {
+      padding: 0px;
+    }
+  }
+}
+.x-radio-compact {
+  &.x-radio-container,
+  .x-radio-container {
+    :deep(.simple-inline-item){
+      padding: 0px !important;
+    }
+    :deep(.ant-radio-group){
+      display: flex;
+      justify-content: space-between;
+    }
+    :deep(.x-radio-item) > span:last-child {
+      padding-right: 2px;
+      padding-left: 2px;
+    }
+  }
+}
+/* 门诊收费样式：字体规格与间距 42px */
+.x-radio-out-radio {
+  &.x-radio-container,
+  .x-radio-container {
+    :deep(.x-radio-group) {
+      justify-content: flex-start !important; /* 覆盖默认的 space-around */
+    }
+    :deep(.ant-radio-wrapper) {
+      /* 仅归零内外边距，避免额外空隙 */
+      padding: 0;
+      margin: 0;
+    }
+    /* 确保文字本身也应用同样的字体样式（提高优先级并可视化高度） */
+    :deep(.ant-radio-wrapper > span:last-child) {
+      display: inline-block;
+      height: 23px !important;
+      line-height: 23px !important;
+      font-family: "Source Han Sans" !important;
+      font-size: 16px !important;
+      font-weight: normal !important;
+      letter-spacing: 0em !important;
+      color: #313131 !important;
+    }
+    /* 单选框与文字之间保持 5px 间距 */
+    :deep(.ant-radio) { margin-right: 0; }
+    :deep(.ant-radio + span) { padding: 0; margin-left: 5px; }
+    /* 单选框外圈视觉 16x16，边框 #CDCFD4，背景白色 */
+    :deep(.ant-radio-inner) {
+      width: 16px;
+      height: 16px;
+      background: #FFFFFF;
+      box-sizing: border-box;
+      border: 1px solid #CDCFD4;
+    }
+    /* 选中时内部实心点 10x10，背景 #0057FE */
+    :deep(.ant-radio-checked .ant-radio-inner::after) {
+      width: 10px;
+      height: 10px;
+      background: #0057FE;
+      margin: 0;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    /* 保持外圈边框颜色不被默认覆盖 */
+    :deep(.ant-radio-checked .ant-radio-inner) {
+      border-color: #CDCFD4;
+      background: #FFFFFF;
+    }
+    :deep(.x-radio-item-container) {
+      margin-right: 42px; /* 直接设置42px间距，让第二个单选框与第一个文字距离为42px */
+      padding: 0 !important;
+      flex: none !important; /* 覆盖默认的 flex: 1 */
+      align-items: flex-start !important; /* 覆盖默认的 center */
+      text-align: left !important; /* 覆盖默认的 center */
+    }
+    :deep(.x-radio-item-wrapper) {
+      width: auto !important; /* 覆盖默认的 width: 100% */
+    }
+    :deep(.x-radio-item-container:first-child) {
+      margin-left: 4px;
+    }
+    :deep(.x-radio-item-container:last-child) {
+      margin-right: 0;
+    }
+  }
+}
+</style>