推荐一个动态表单查询条件构造组件（yl-dc-component）

什么是 yl-dc-component

一个基于antdv组件库的动态查询json生成组件，用于构建复杂的条件查询，让查询更加简单灵活。支持条件分组，保存历史条件等功能。后端可基于构造的json进行数据库查询操作。

使用

安装

npm i yl-dc-component
或
yarn add yl-dc-component

案例

<script setup lang="ts">
import 'yl-dc-component/dist/style.css'
import {
     DynamicCondition} from 'yl-dc-component'
import {
     FormSchema} from "yl-dc-component/dist/components/DynamicCondition/src/types/schemas";
import {
     GroupNode} from "yl-dc-component/dist/components/DynamicCondition/src/types/node";
import {
     ref} from "vue";

const schemas: FormSchema[] = [{
     
  label: "配置名称",
  defaultValue: "测试",
  conditionTypes: ['eq', 'like'],
  field: "name"
}, {
     
  label: "接入类型",
  defaultValue: "MicroId_IOT111111",
  conditionTypes: ["not_in", "in", 'eq'],
  component: 'Select',
  componentProps: {
     
    placeholder: '请输入',
    options: [{
     
      label: '微标Iot平台',
      value: 'MicroId_IOT'
    }, {
     
      label: '阿里云Iot平台',
      value: 'Aliyun_Iot'
    }]
  },
  field: "type"
}];

function reset() {
     
  console.log('reset')
}

async function search(ast: GroupNode[]) {
     
  console.log('search', ast)
  const res = await getDataSource({
     
    pageSize