vue2-client 1.15.84 → 1.15.86

package/src/base-client/components/his/XRadio/index.md

@@ -1,234 +1,234 @@
-# XRadio
-
-基于配置的单选组件，支持从配置中动态加载选项和默认值。
-
-## 何时使用
-
-当需要一个通过配置动态加载的单选控件时使用，特别是选项需要从后端获取的场景。
-
-## 引用方式
-
-```javascript
-import XRadio from '@vue2-client/base-client/components/his/XRadio/XRadio'
-
-export default {
-  components: {
-    XRadio
-  }
-}
-```
-
-## 代码演示
-
-```html
-<x-radio
-  :queryParamsName="radioConfigName"
-  @change="handleChange"
-  @init="handleInit">
-</x-radio>
-```
-
-## API
-
-| 参数              | 说明                   | 类型                | 默认值  |
-|-----------------|----------------------|-------------------|------|
-| queryParamsName | 查询配置名称              | String/Object     | null |
-| value           | 当前选中值（可用于外部控制）      | String/Number     | null |
-
-### 事件
-
-| 事件名    | 说明           | 回调参数                                          |
-|--------|--------------|-----------------------------------------------|
-| change | 选项变化时的回调    | function(value)                               |
-| radio  | 选项变化时的回调（兼容） | function(value)                               |
-| init   | 组件初始化完成时的回调  | function({config, options, value})           |
-
-### 配置说明
-
-组件通过 `queryParamsName` 从后端获取配置，配置格式如下：
-
-```json
-{
-  "radio": [
-    {
-      "label": "选项A",
-      "value": 1
-    },
-    {
-      "label": "选项B",
-      "value": 2
-    },
-    {
-      "label": "选项C",
-      "value": 3
-    },
-    {
-      "label": "选项D",
-      "value": 4
-    }
-  ],
-  "defaultValue": 2
-}
-```
-
-## 配置示例
-----
-
-### 基本配置
-
-```json
-{
-  "radio": [
-    {
-      "label": "全部",
-      "value": "all",
-      "bottomLine": true,
-      "indicatorColor": "#1890ff",
-      "indicatorWidth": "50%"
-    },
-    {
-      "label": "已过期",
-      "value": "expired",
-      "bottomLine": true,
-      "indicatorColor": "#ff4d4f",
-      "indicatorWidth": "70%"
-    },
-    {
-      "label": "30天内",
-      "value": "30days",
-      "bottomLine": true,
-      "indicatorColor": "#52c41a",
-      "indicatorWidth": "60%"
-    },
-    {
-      "label": "90天内",
-      "value": "90days",
-      "bottomLine": false
-    },
-    {
-      "label": "180天内",
-      "value": "180days",
-      "bottomLine": true,
-      "indicatorColor": "#722ed1",
-      "indicatorWidth": "30px"
-    },
-    {
-      "label": "360天内",
-      "value": "360days",
-      "bottomLine": true,
-      "indicatorColor": "#eb2f96",
-      "indicatorWidth": "40%"
-    }
-  ],
-  "defaultValue": "all",
-  "indicator": {
-    "showIndicator": true,
-    "indicatorHeight": 4,
-    "indicatorBgColor": "#f5f5f5",
-    "indicatorActiveColor": "#1890ff"
-  }
-}
-```
-
-### 不同线条宽度效果示例
-
-以下是几种常见的线条宽度配置效果：
-
-1. **完整宽度**：`"indicatorWidth": "100%"`（默认值）
-   - 线条完全填充选项宽度
-   - 适合强调整个选项区域
-
-2. **居中宽度**：`"indicatorWidth": "50%"`
-   - 线条占选项宽度的一半，自动居中
-   - 提供清晰的视觉提示，同时保持简洁
-
-3. **固定宽度**：`"indicatorWidth": "30px"`
-   - 线条使用固定像素宽度，不随选项宽度变化
-   - 适合保持所有线条视觉上的一致性
-
-4. **较小宽度**：`"indicatorWidth": "20%"`
-   - 线条宽度较小，提供微妙的视觉提示
-   - 适合不希望线条过于引人注目的场景
-
-注意事项
-----
-
-1. 如果配置中有 `defaultValue`，组件将默认选中该值对应的选项
-2. 如果没有 `defaultValue` 但有选项，将默认选中第一个选项
-3. 如果外部通过 `value` 属性传入值，优先使用外部值
-4. 每个选项可以通过 `bottomLine` 属性控制是否显示底部线条
-5. 可以通过 `indicatorColor` 设置线条颜色，线条颜色始终显示，不受选中状态影响
-6. 通过 `indicatorWidth` 可以自定义线条宽度
-7. 线条宽度仅在其所属选项范围内显示，不会侵入其他选项区域
-8. 线条宽度如果设置为百分比值（如"50%"），则是相对于选项宽度计算的
-9. 线条默认宽度为"100%"，即完全填充选项宽度
-10. 要完全隐藏线条区域，可以在全局配置中设置 `"indicator": false`
-11. 要隐藏单个选项的线条，可以为该选项设置 `"bottomLine": false`
-12. 全局配置中的 `indicatorHeight` 控制所有线条的高度，单位为像素
-13. 推荐为每个选项设置不同颜色，以增强视觉辨识度
-14. 线条宽度建议不要设置过小，以免影响用户视觉体验
-
-## 常见问题解答（FAQ）
-
-### 1. 如何控制线条的显示和隐藏？
-
-**全局控制**：
-```json
-{
-  "indicator": false
-}
-```
-
-**单个选项控制**：
-```json
-{
-  "radio": [
-    { "label": "选项A", "value": 1, "bottomLine": true },
-    { "label": "选项B", "value": 2, "bottomLine": false }
-  ]
-}
-```
-
-### 2. 线条颜色如何设置？
-
-每个选项可以单独设置线条颜色：
-```json
-{
-  "radio": [
-    { "label": "选项A", "value": 1, "indicatorColor": "#1890ff" },
-    { "label": "选项B", "value": 2, "indicatorColor": "#52c41a" }
-  ]
-}
-```
-
-也可以设置全局默认颜色：
-```json
-{
-  "indicator": {
-    "indicatorActiveColor": "#1890ff"
-  }
-}
-```
-
-### 3. 如何调整线条宽度？
-
-线条宽度可以使用百分比或像素值：
-```json
-{
-  "radio": [
-    { "label": "选项A", "value": 1, "indicatorWidth": "50%" },
-    { "label": "选项B", "value": 2, "indicatorWidth": "30px" }
-  ]
-}
-```
-
-### 4. 如何调整线条高度？
-
-线条高度在全局配置中统一设置：
-```json
-{
-  "indicator": {
-    "indicatorHeight": 5
-  }
-}
-```
+# XRadio
+
+基于配置的单选组件，支持从配置中动态加载选项和默认值。
+
+## 何时使用
+
+当需要一个通过配置动态加载的单选控件时使用，特别是选项需要从后端获取的场景。
+
+## 引用方式
+
+```javascript
+import XRadio from '@vue2-client/base-client/components/his/XRadio/XRadio'
+
+export default {
+  components: {
+    XRadio
+  }
+}
+```
+
+## 代码演示
+
+```html
+<x-radio
+  :queryParamsName="radioConfigName"
+  @change="handleChange"
+  @init="handleInit">
+</x-radio>
+```
+
+## API
+
+| 参数              | 说明                   | 类型                | 默认值  |
+|-----------------|----------------------|-------------------|------|
+| queryParamsName | 查询配置名称              | String/Object     | null |
+| value           | 当前选中值（可用于外部控制）      | String/Number     | null |
+
+### 事件
+
+| 事件名    | 说明           | 回调参数                                          |
+|--------|--------------|-----------------------------------------------|
+| change | 选项变化时的回调    | function(value)                               |
+| radio  | 选项变化时的回调（兼容） | function(value)                               |
+| init   | 组件初始化完成时的回调  | function({config, options, value})           |
+
+### 配置说明
+
+组件通过 `queryParamsName` 从后端获取配置，配置格式如下：
+
+```json
+{
+  "radio": [
+    {
+      "label": "选项A",
+      "value": 1
+    },
+    {
+      "label": "选项B",
+      "value": 2
+    },
+    {
+      "label": "选项C",
+      "value": 3
+    },
+    {
+      "label": "选项D",
+      "value": 4
+    }
+  ],
+  "defaultValue": 2
+}
+```
+
+## 配置示例
+----
+
+### 基本配置
+
+```json
+{
+  "radio": [
+    {
+      "label": "全部",
+      "value": "all",
+      "bottomLine": true,
+      "indicatorColor": "#1890ff",
+      "indicatorWidth": "50%"
+    },
+    {
+      "label": "已过期",
+      "value": "expired",
+      "bottomLine": true,
+      "indicatorColor": "#ff4d4f",
+      "indicatorWidth": "70%"
+    },
+    {
+      "label": "30天内",
+      "value": "30days",
+      "bottomLine": true,
+      "indicatorColor": "#52c41a",
+      "indicatorWidth": "60%"
+    },
+    {
+      "label": "90天内",
+      "value": "90days",
+      "bottomLine": false
+    },
+    {
+      "label": "180天内",
+      "value": "180days",
+      "bottomLine": true,
+      "indicatorColor": "#722ed1",
+      "indicatorWidth": "30px"
+    },
+    {
+      "label": "360天内",
+      "value": "360days",
+      "bottomLine": true,
+      "indicatorColor": "#eb2f96",
+      "indicatorWidth": "40%"
+    }
+  ],
+  "defaultValue": "all",
+  "indicator": {
+    "showIndicator": true,
+    "indicatorHeight": 4,
+    "indicatorBgColor": "#f5f5f5",
+    "indicatorActiveColor": "#1890ff"
+  }
+}
+```
+
+### 不同线条宽度效果示例
+
+以下是几种常见的线条宽度配置效果：
+
+1. **完整宽度**：`"indicatorWidth": "100%"`（默认值）
+   - 线条完全填充选项宽度
+   - 适合强调整个选项区域
+
+2. **居中宽度**：`"indicatorWidth": "50%"`
+   - 线条占选项宽度的一半，自动居中
+   - 提供清晰的视觉提示，同时保持简洁
+
+3. **固定宽度**：`"indicatorWidth": "30px"`
+   - 线条使用固定像素宽度，不随选项宽度变化
+   - 适合保持所有线条视觉上的一致性
+
+4. **较小宽度**：`"indicatorWidth": "20%"`
+   - 线条宽度较小，提供微妙的视觉提示
+   - 适合不希望线条过于引人注目的场景
+
+注意事项
+----
+
+1. 如果配置中有 `defaultValue`，组件将默认选中该值对应的选项
+2. 如果没有 `defaultValue` 但有选项，将默认选中第一个选项
+3. 如果外部通过 `value` 属性传入值，优先使用外部值
+4. 每个选项可以通过 `bottomLine` 属性控制是否显示底部线条
+5. 可以通过 `indicatorColor` 设置线条颜色，线条颜色始终显示，不受选中状态影响
+6. 通过 `indicatorWidth` 可以自定义线条宽度
+7. 线条宽度仅在其所属选项范围内显示，不会侵入其他选项区域
+8. 线条宽度如果设置为百分比值（如"50%"），则是相对于选项宽度计算的
+9. 线条默认宽度为"100%"，即完全填充选项宽度
+10. 要完全隐藏线条区域，可以在全局配置中设置 `"indicator": false`
+11. 要隐藏单个选项的线条，可以为该选项设置 `"bottomLine": false`
+12. 全局配置中的 `indicatorHeight` 控制所有线条的高度，单位为像素
+13. 推荐为每个选项设置不同颜色，以增强视觉辨识度
+14. 线条宽度建议不要设置过小，以免影响用户视觉体验
+
+## 常见问题解答（FAQ）
+
+### 1. 如何控制线条的显示和隐藏？
+
+**全局控制**：
+```json
+{
+  "indicator": false
+}
+```
+
+**单个选项控制**：
+```json
+{
+  "radio": [
+    { "label": "选项A", "value": 1, "bottomLine": true },
+    { "label": "选项B", "value": 2, "bottomLine": false }
+  ]
+}
+```
+
+### 2. 线条颜色如何设置？
+
+每个选项可以单独设置线条颜色：
+```json
+{
+  "radio": [
+    { "label": "选项A", "value": 1, "indicatorColor": "#1890ff" },
+    { "label": "选项B", "value": 2, "indicatorColor": "#52c41a" }
+  ]
+}
+```
+
+也可以设置全局默认颜色：
+```json
+{
+  "indicator": {
+    "indicatorActiveColor": "#1890ff"
+  }
+}
+```
+
+### 3. 如何调整线条宽度？
+
+线条宽度可以使用百分比或像素值：
+```json
+{
+  "radio": [
+    { "label": "选项A", "value": 1, "indicatorWidth": "50%" },
+    { "label": "选项B", "value": 2, "indicatorWidth": "30px" }
+  ]
+}
+```
+
+### 4. 如何调整线条高度？
+
+线条高度在全局配置中统一设置：
+```json
+{
+  "indicator": {
+    "indicatorHeight": 5
+  }
+}
+```

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

@@ -1,72 +1,72 @@
-<template>
-  <div>
-    <a-select
-      v-model="selectedValue"
-      :placeholder="placeholder"
-      class="x-select"
-      :allowClear="true"
-      :showSearch="true"
-      :filter-option="filterOption"
-      @change="handleChange"
-    >
-      <a-select-option v-for="(item, index) in data" :key="index" :value="item.value">
-        {{ item.label }}
-      </a-select-option>
-    </a-select>
-  </div>
-</template>
-
-<script>
-import { runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XSelect',
-  props: {
-    queryParamsName: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      data: [],
-      selectedValue: undefined,
-      placeholder: ''
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  methods: {
-    async getData (config) {
-      try {
-        const res = await runLogic(config, {}, 'af-his')
-        this.data = res.data || []
-        if (res.placeholder) {
-          this.placeholder = res.placeholder
-        }
-        this.selectedValue = undefined
-      } catch (error) {
-        console.error('获取数据失败：', error)
-      }
-    },
-    handleChange (value) {
-      this.selectedValue = value === '' ? undefined : value
-      this.$emit('change', this.selectedValue)
-    },
-    filterOption (input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    }
-  },
-  watch: {
-    selectedValue (val) {
-    }
-  }
-}
-</script>
-
-<style scoped>
-.x-select {
-  min-width: 150px;
-}
-</style>
+<template>
+  <div>
+    <a-select
+      v-model="selectedValue"
+      :placeholder="placeholder"
+      class="x-select"
+      :allowClear="true"
+      :showSearch="true"
+      :filter-option="filterOption"
+      @change="handleChange"
+    >
+      <a-select-option v-for="(item, index) in data" :key="index" :value="item.value">
+        {{ item.label }}
+      </a-select-option>
+    </a-select>
+  </div>
+</template>
+
+<script>
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XSelect',
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      data: [],
+      selectedValue: undefined,
+      placeholder: ''
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    async getData (config) {
+      try {
+        const res = await runLogic(config, {}, 'af-his')
+        this.data = res.data || []
+        if (res.placeholder) {
+          this.placeholder = res.placeholder
+        }
+        this.selectedValue = undefined
+      } catch (error) {
+        console.error('获取数据失败：', error)
+      }
+    },
+    handleChange (value) {
+      this.selectedValue = value === '' ? undefined : value
+      this.$emit('change', this.selectedValue)
+    },
+    filterOption (input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }
+  },
+  watch: {
+    selectedValue (val) {
+    }
+  }
+}
+</script>
+
+<style scoped>
+.x-select {
+  min-width: 150px;
+}
+</style>