vue2-client 1.16.68 → 1.16.69

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

@@ -1,150 +1,305 @@
-<template>
-  <div class="x-radio-container" :class="wrapperClassObject()">
-    <a-radio-group v-model="innerValue" @change="onChange" class="x-radio-group">
-      <div v-for="item in data" :key="item.value" class="x-radio-item-container">
-        <a-radio :value="item.value" class="x-radio-item">
-          {{ item.label }}
-        </a-radio>
-        <div
-          v-if="config.showIndicator && item.bottomLine !== false"
-          class="x-radio-indicator"
-          :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: null
-    }
-  },
-  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. 初始化默认值（优先级： 配置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
-          }
-          // 4. 触发初始化事件
-          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'
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`x-radio-${key}`] = true
-      })
-      return classes
-    },
-  }
-}
-</script>
-
-<style scoped lang="less">
-.x-radio-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.x-radio-group {
-  display: flex;
-  justify-content: space-around;
-}
-
-.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-item {
-  margin-bottom: 8px;
-}
-
-.x-radio-indicator {
-  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;
-    }
-  }
-}
-</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'
+      ]
+      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;
+    }
+  }
+}
+</style>