vue2-client 1.12.97 → 1.12.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.12.97",
+  "version": "1.12.99",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XCollapse/XCollapse.vue

@@ -63,6 +63,7 @@
             :countVisible="false"
             :env="env"
             @listClick="listClick"
+            @click="click"
           />
         </template>
       </a-collapse-panel>
@@ -134,6 +135,9 @@ export default {
     listClick (data) {
       this.$emit('listClick', data)
     },
+    click (data) {
+      this.$emit('click', data)
+    },
     getConfigByName (componentName) {
       const refKey = `dynamicComponent_${componentName}`
       return this.$refs[refKey]

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -25,7 +25,7 @@
           </template>
           <template v-else-if="cell.type === 'slot'">
             <template
-              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select'].includes(cell.slotType)">
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select' ,'x-checkbox'].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
                 :key="cellIndex"
@@ -60,7 +60,7 @@
           </template>
           <template v-else-if="cell.type === 'slot'">
             <template
-              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select'].includes(cell.slotType)">
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select','x-checkbox'].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
                 :key="cellIndex"
@@ -114,7 +114,8 @@ export default {
     XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
     XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
     XCalendar: () => import('@vue2-client/base-client/components/common/XCalendar/XCalendar.vue'),
-    XTimeSelect: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelect.vue')
+    XTimeSelect: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelect.vue'),
+    XCheckbox: () => import('@vue2-client/base-client/components/his/XCheckbox/XCheckbox.vue'),
   },
   props: {
     // 每一行的配置

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

@@ -57,7 +57,7 @@ export default {
       this.getData(this.queryParamsName)
     },
     click (index) {
-      this.$emit('click', this.data[index + 1])
+      this.$emit('click', this.data[index])
     },
     getIconStyle (item) {
       return item.picture

package/src/pages/userInfoDetailManage/uploadFilesHistory/index.vue

@@ -53,7 +53,7 @@ export default {
   methods: {
     async getfusetypes () {
       this.fusetypes = [{ label: '全部', value: '' }]
-      const res = await post('/api/af-revenue/singleTable_OrderBy', {
+      const res = await post('/api/af-revenue/sql/singleTable_OrderBy', {
         data: {
           items: 'fusetype',
           tablename: 't_files',