@yeepay/smart-query

一个基于Vue.js的智能查询组件，支持表单查询和表格展示。

特性

• 支持表单动态配置
• 支持表格动态配置
• 支持单选/多选模式
• 支持分页
• 支持排序
• 支持行操作和单元格操作
• 支持批量操作
• 支持数据脱敏

安装

npm install @yeepay/smart-query

引入

在Vue项目中引入组件：

import SmartQuery from '@yeepay/smart-query'
Vue.use(SmartQuery)

使用

<template>
  <smart-query
    ref="smartQuery"
    :base-url="baseUrl"
    :page-code="pageCode"
    :loading="loading"
    @query="handleQuery"
    @配置自定义事件="handleCustomEvent"
  />
</template>

<script>

export default {
  data() {
    return {
      baseUrl: '',
      pageCode: '',
      loading: false,
      total: 0,
      data: [],
    }
  },
  created() {
    this.baseUrl = '' // 设置基础URL，可以不设置。默认值：https://boss.yeepay.com
    this.pageCode = '' // 获取页面编码
  },
  methods: {
    handleQuery(params) {
      // 处理查询请求
      console.log('查询参数:', params)
      // this.fetchData(params) // 调用自定义查询方法
    },
    handleCustomEvent(form, selRows) {
      // 处理自定义事件
      this.$refs.smartQuery.search() // 手动调用搜索方法
    },
     fetchData(params) {
        this.loading = true
        setTimeout(() => {
           let data = []
           for (let i = 0; i < 10; i++) {
              data.push({
                 user_id: i,
                 payment_amount:'111',
                 user_id_value: i+'_value',
                 user_name: `名字吗${i}_${new Date().getTime()}`,
              })
           }
           this.data = data
           this.total = 100
           this.loading = false
        }, 1000)
     }
  }
}
</script>

属性

| 属性名 | 类型 | 默认值 | 说明 | |----------|------|------|---------------------------------------------------| | ref | String | '' | 可以不设置。手动调用组件查询的时候使用 | | baseUrl | String | '' | 基础URL，可以不设置。默认值：https://boss.yeepay.com | | pageCode | String | '' | 页面编码，用于获取表单和表格配置 | | data | Array | [] | 表格数据；不设置：则默认调用组件内部的查询方法设置：则需要调用自定义查询方法。 | | total | Number | 0 | 数据总数 | | loading | Boolean | false | 加载状态 |

事件

| 事件名 | 说明 | 回调参数 | |--------------|------|------------------------------------------------| | query | 查询事件 | params: { conditions, pageNo, pageSize, sort } | | ... | 自定义事件 | form, selRows |

配置说明

表单配置

{
  "key": "fieldName",
  "label": "字段名称",
  "fieldType": "Input",
  "config": {
    "required": true,
    "defaultValue": "",
    "isFuzzyMatch": false,
    "isMultiValue": false
  }
}

表格配置

{
  "key": "fieldName",
  "label": "字段名称",
  "columnType": "text",
  "config": {
    "width": "100",
    "sortable": true,
    "maskType": "front"
  }
}

操作配置

{
  "id": "actionId",
  "name": "操作名称",
  "type": "row",
  "confirm": true,
  "hybridEvent": "eventName"
}

注意事项

1. 组件依赖 Element UI，请确保项目中已安装
2. 单选模式下：
   • 默认选中第一行
   • 不允许取消选择
   • 不允许全选/全取消
   • 只能选择一行数据

更新日志

v1.0.13

• 修复单选模式下的选择逻辑
• 优化表格操作按钮样式
• 修复数据脱敏显示问题

License

MIT