yl-dc-component v1.1.4

yl-dc-component

描述

一个动态查询json生成组件，用于构建复杂的条件查询，一般用于配合后端数据库查询

演示

组件说明

属性

• DynamicConditionProps

• FormSchema

• ComponentType

type ComponentType =
    | 'Input'
    | 'InputGroup'
    | 'InputPassword'
    | 'InputSearch'
    | 'InputTextArea'
    | 'InputNumber'
    | 'InputCountDown'
    | 'Select'
    | 'ApiSelect'
    | 'TreeSelect'
    | 'ApiTreeSelect'
    | 'RadioButtonGroup'
    | 'RadioGroup'
    | 'Checkbox'
    | 'CheckboxGroup'
    | 'AutoComplete'
    | 'Cascader'
    | 'DatePicker'
    | 'MonthPicker'
    | 'RangePicker'
    | 'WeekPicker'
    | 'TimePicker'
    | 'Switch'
    | 'StrengthMeter'
    | 'Upload'
    | 'IconPicker'
    | 'Render'
    | 'Slider'
    | 'Rate'
    | 'Avatar'
    | 'Divider' | Component | (() => JSX.Element)

• ConditionStorageOption

• LocalStorageConf

• ApiConf

• DynamicConditionAST （该类型为json ast）

• GroupNode

• ConditionNode

• LogicType

• ConditionType

事件

使用

安装

yarn add yl-dc-component
npm install yl-dc-component

引入

import 'yl-dc-component/dist/style.css'
import ylDcComponent from 'yl-dc-component'

示例

<script setup lang="ts">
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: 10,
    page: 1,
    ast
  })

  console.log("搜索结果：", res)
}

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


type SearchModel = {
  pageSize: number;
  page: number;
  ast: GroupNode[]
}

async function getDataSource(searchModel: SearchModel) {
  return fetch("http://localhost:8080/api/page", {
    method: "POST",
    body: JSON.stringify(searchModel) as any,
    headers: {
      "Content-Type": 'application/json'
    }
  })
}

const value = ref<GroupNode[]>();

</script>

<template>
  <div style="background: #eeeeee;height: 100vh">
    <dynamic-condition
        @reset="reset"
        @search="search"
        @save="save"
        v-model:value="value"
        size="small"
        :fromSchemas="schemas">
    </dynamic-condition>
  </div>
</template>

<style scoped>

</style>