vue2-client 1.12.97 → 1.12.98

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="x-checkbox-container">
+    <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字段不是数组')
+        }
+      })
+    },
+    onChange (checkedValues) {
+      this.innerValue = checkedValues
+      this.$emit('change', checkedValues)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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;
+}
+</style>

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

@@ -0,0 +1,254 @@
+# XCheckbox
+
+基于配置的多选框组件，支持从配置中动态加载选项和默认值。
+
+## 何时使用
+
+当需要一个通过配置动态加载的多选控件时使用，特别是选项需要从后端获取的场景。
+
+## 引用方式
+
+```javascript
+import XCheckbox from '@vue2-client/base-client/components/his/XCheckbox/XCheckbox'
+
+export default {
+  components: {
+    XCheckbox
+  }
+}
+```
+
+## 代码演示
+
+```html
+<x-checkbox
+  :queryParamsName="checkboxConfigName"
+  v-model="selectedValues"
+  @change="handleChange"
+  @init="handleInit">
+</x-checkbox>
+```
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| queryParamsName | 查询配置名称 | String/Object | null |
+| value (v-model) | 当前选中值数组 | Array | [] |
+
+### 事件
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| change | 选项变化时的回调 | function(checkedValues: array) |
+| init | 组件初始化完成时的回调 | function({config, options, value}) |
+
+## 配置说明
+
+组件通过 `queryParamsName` 从后端获取配置，配置格式如下：
+
+```json
+{
+  "checkbox": [
+    {
+      "label": "选项A",
+      "value": 1
+    },
+    {
+      "label": "选项B",
+      "value": 2
+    },
+    {
+      "label": "选项C",
+      "value": 3
+    }
+  ],
+  "defaultValue": [1, 2]
+}
+```
+
+## 配置示例
+
+### 基本配置
+
+```json
+{
+  "checkbox": [
+    {
+      "label": "全部",
+      "value": "all"
+    },
+    {
+      "label": "已过期",
+      "value": "expired"
+    },
+    {
+      "label": "30天内",
+      "value": "30days"
+    },
+    {
+      "label": "90天内",
+      "value": "90days"
+    }
+  ],
+  "defaultValue": ["all"]
+}
+```
+
+### 带禁用选项的配置
+
+```json
+{
+  "checkbox": [
+    {
+      "label": "选项A",
+      "value": "a",
+      "disabled": false
+    },
+    {
+      "label": "选项B",
+      "value": "b",
+      "disabled": true
+    },
+    {
+      "label": "选项C",
+      "value": "c",
+      "disabled": false
+    }
+  ],
+  "defaultValue": ["a"]
+}
+```
+
+## 使用示例
+
+### 1. 基础使用
+
+```html
+<template>
+  <x-checkbox
+    :queryParamsName="'MyCheckboxConfig'"
+    v-model="selectedValues"
+    @change="onChange"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValues: []
+    }
+  },
+  methods: {
+    onChange(checkedValues) {
+      console.log('选中的值：', checkedValues)
+    }
+  }
+}
+</script>
+```
+
+### 2. 带初始值的使用
+
+```html
+<template>
+  <x-checkbox
+    :queryParamsName="checkboxConfig"
+    v-model="selectedValues"
+    @change="onChange"
+    @init="onInit"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValues: ['a', 'b'],
+      checkboxConfig: {
+        checkbox: [
+          { label: '选项A', value: 'a' },
+          { label: '选项B', value: 'b' },
+          { label: '选项C', value: 'c' }
+        ],
+        defaultValue: ['a', 'b']
+      }
+    }
+  },
+  methods: {
+    onChange(checkedValues) {
+      console.log('选中的值：', checkedValues)
+    },
+    onInit({ config, options, value }) {
+      console.log('组件初始化完成', { config, options, value })
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. 如果配置中有 `defaultValue`，组件将默认选中这些值
+2. `defaultValue` 必须是数组类型
+3. 选项的 `value` 值必须是唯一的
+4. 可以通过 `v-model` 或 `value` 属性从外部控制选中值
+5. 组件会自动处理选项的禁用状态
+6. 所有的事件回调都会返回选中值的数组
+
+## 常见问题解答（FAQ）
+
+### 1. 如何设置默认选中的选项？
+
+可以通过配置中的 `defaultValue` 字段设置：
+```json
+{
+  "defaultValue": ["value1", "value2"]
+}
+```
+
+或者通过 v-model 绑定：
+```html
+<x-checkbox v-model="selectedValues"></x-checkbox>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      selectedValues: ["value1", "value2"]
+    }
+  }
+}
+```
+
+### 2. 如何禁用某些选项？
+
+在选项配置中添加 `disabled` 属性：
+```json
+{
+  "checkbox": [
+    {
+      "label": "选项A",
+      "value": "a",
+      "disabled": true
+    }
+  ]
+}
+```
+
+### 3. 如何获取选中的值？
+
+可以通过 `change` 事件或 `v-model` 获取：
+```html
+<x-checkbox v-model="selectedValues" @change="onChange"></x-checkbox>
+```
+
+```javascript
+methods: {
+  onChange(checkedValues) {
+    console.log('当前选中的值：', checkedValues)
+  }
+}
+``` 

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

@@ -1,131 +1,131 @@
-<template>
-  <div class="list-wrapper">
-    <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container" ref="listRef">
-      <a-list-item slot="renderItem" slot-scope="item, index" class="list-item" @click="handleClick(index)">
-        <i
-          v-if="icon"
-          class="icon-menu"
-          :style="getIconStyle(item)"
-        ></i>
-        <span
-          class="item-text">
-          {{ item.number }} {{ item.name }}
-        </span>
-        <a-button v-if="button" type="link" class="confirm-btn" @click.stop="click(index)">{{ buttonName }}</a-button>
-      </a-list-item>
-    </a-list>
-  </div>
-</template>
-
-<script>
-
-import { runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XList',
-  props: {
-    queryParamsName: {
-      type: Object,
-      default: null
-    }
-  },
-  inject: ['getComponentByName'],
-  data () {
-    return {
-      data: [],
-      button: false,
-      icon: false,
-      buttonName: ''
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  methods: {
-    async getData (config) {
-        runLogic(config, {}, 'af-his').then(res => {
-          this.button = res.button
-          this.icon = res.icon
-          this.buttonName = res.buttonName
-          this.data = res.data
-        })
-    },
-    handleClick (index) {
-      this.$emit('listClick', this.data[index])
-    },
-    refreshList () {
-      this.getData(this.queryParamsName)
-    },
-    click (index) {
-      this.$emit('click', this.data[index + 1])
-    },
-    getIconStyle (item) {
-      return item.picture
-        ? { backgroundImage: `url(${item.picture})` }
-        : {}
-    },
-    filterData (par) {
-      runLogic(this.queryParamsName, par, 'af-his').then(res => {
-        this.data = res.data
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.list-wrapper {
-  max-height: 240px;
-  overflow-y: auto;
-  padding-right: 2px;
-}
-
-.list-container {
-  width: 100%;
-}
-
-.list-item {
-  height: 35px;
-  border-radius: 6px;
-  background-color: #F4F4F4;
-  padding: 8px 15px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border: 1px solid #D9D9D9;
-  box-sizing: border-box;
-  margin-bottom: 8px !important;
-}
-
-.icon-menu {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  background-color: #ccc;
-  margin-right: 8px;
-}
-
-.item-text {
-  flex: 1;
-}
-
-.confirm-btn {
-  margin-left: auto;
-  padding: 0 8px;
-}
-
-/* 自定义滚动条样式 */
-.list-wrapper::-webkit-scrollbar {
-  width: 6px;
-}
-
-.list-wrapper::-webkit-scrollbar-thumb {
-  background-color: #d9d9d9;
-  border-radius: 3px;
-}
-
-.list-wrapper::-webkit-scrollbar-track {
-  background-color: #f0f0f0;
-}
-</style>
+<template>
+  <div class="list-wrapper">
+    <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container" ref="listRef">
+      <a-list-item slot="renderItem" slot-scope="item, index" class="list-item" @click="handleClick(index)">
+        <i
+          v-if="icon"
+          class="icon-menu"
+          :style="getIconStyle(item)"
+        ></i>
+        <span
+          class="item-text">
+          {{ item.number }} {{ item.name }}
+        </span>
+        <a-button v-if="button" type="link" class="confirm-btn" @click.stop="click(index)">{{ buttonName }}</a-button>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XList',
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: null
+    }
+  },
+  inject: ['getComponentByName'],
+  data () {
+    return {
+      data: [],
+      button: false,
+      icon: false,
+      buttonName: ''
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    async getData (config) {
+        runLogic(config, {}, 'af-his').then(res => {
+          this.button = res.button
+          this.icon = res.icon
+          this.buttonName = res.buttonName
+          this.data = res.data
+        })
+    },
+    handleClick (index) {
+      this.$emit('listClick', this.data[index])
+    },
+    refreshList () {
+      this.getData(this.queryParamsName)
+    },
+    click (index) {
+      this.$emit('click', this.data[index])
+    },
+    getIconStyle (item) {
+      return item.picture
+        ? { backgroundImage: `url(${item.picture})` }
+        : {}
+    },
+    filterData (par) {
+      runLogic(this.queryParamsName, par, 'af-his').then(res => {
+        this.data = res.data
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list-wrapper {
+  max-height: 240px;
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.list-container {
+  width: 100%;
+}
+
+.list-item {
+  height: 35px;
+  border-radius: 6px;
+  background-color: #F4F4F4;
+  padding: 8px 15px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #D9D9D9;
+  box-sizing: border-box;
+  margin-bottom: 8px !important;
+}
+
+.icon-menu {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-color: #ccc;
+  margin-right: 8px;
+}
+
+.item-text {
+  flex: 1;
+}
+
+.confirm-btn {
+  margin-left: auto;
+  padding: 0 8px;
+}
+
+/* 自定义滚动条样式 */
+.list-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.list-wrapper::-webkit-scrollbar-thumb {
+  background-color: #d9d9d9;
+  border-radius: 3px;
+}
+
+.list-wrapper::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+</style>