ctj-ui-next
搜索 K

Appearance

本页目录

GicSearchForm ​

使用 antdesign Form 二次封装的高级查询组件

说明

  • 高级查询组件无需传入表单数据 formData，需要赋值默认值时给 formConfig 传 defaultData
  • 当给左侧某个按钮添加了 loading 状态，若需要动态修改该变量时，在定义 btnConfig 时注意使用 computed 定义，否则修改 loading 变量无法生效

基本用法 ​

组件演示

示例
vue
<template>
  <div>
    <p>
      <a-button @click="changeVisible">手动控制更多查询条件的显示与隐藏</a-button>
    </p>
    <GicAdvancedQuery
      class="create-view-advanced-query"
      ref="searchFormRef"
      :form-config="formConfig"
      :eleDataObj="eleData"
      @query="doSearch"
      @reset="resetQuery"
      @formChange="handleSearchFormChange"
    >
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { GicSearchForms } from 'ctj-ui-next'
import {
  formItem,
  tableBtnConfig,
  formConfig,
  unitConfig,
  BtnType,
  Units,
  BillTypeItem,
  ControlType,
} from 'ctj-ui-next/lib/index'
const searchFormRef = ref<any>()
const formConfig = reactive(<formConfig>{
  items: [
    {
      field_code: 'checkValue',
      label: '输入查询',
      control_type: ControlType.input,
      configs: {
        placeholder: '费用内容',
      },
    },
    {
      field_code: 'name',
      label: '指标名称',
      control_type: ControlType.treeSelect,
      configs: {
        multiple: true,
        optionsData: [
          {
            label: 'A',
            value: 'A',
            title: 'A',
            children: [
              {
                label: 'a',
                value: 'a',
                title: 'a',
              },
              {
                label: 'b',
                value: 'b',
                title: 'b',
              },
            ],
          },
        ],
      },
    },
    {
      field_code: 'type',
      label: '收款类型',
      control_type: ControlType.select,
      configs: {
        mode: 'multiple',
        optionsData: [
          {
            label: '男',
            value: '1',
            title: '1男',
          },
          {
            label: '女',
            value: '2',
            title: '2女',
          },
        ],
      },
    },
    {
      field_code: 'feeType',
      label: '费用类型',
      control_type: ControlType.select,
    },
    {
      field_code: 'user',
      label: '收款人',
      control_type: ControlType.input,
    },
  ],
  colSpan: 6,
  isConvert: true, //查询获取的参数是否需要将数组格式数据转换为字符串格式
  defaultData: {
    //查询表单默认值
    checkValue: 'test',
  },
  //顶部工具栏默认显示的最多查询项，默认1个
  max: 2,
})
//查询
const handleQuery = (obj: any) => {}

//重置
const handleReset = () => {}
//手动修改更多查询项的显隐
const changeVisible = (val: boolean) => {
  searchForm.value.toggleSearch(true)
}
</script>
<style lang="less" scoped>
#app {
  padding: 8px;
  background-color: #fff;
}
</style>
<template>
  <div>
    <p>
      <a-button @click="changeVisible">手动控制更多查询条件的显示与隐藏</a-button>
    </p>
    <GicAdvancedQuery
      class="create-view-advanced-query"
      ref="searchFormRef"
      :form-config="formConfig"
      :eleDataObj="eleData"
      @query="doSearch"
      @reset="resetQuery"
      @formChange="handleSearchFormChange"
    >
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { GicSearchForms } from 'ctj-ui-next'
import {
  formItem,
  tableBtnConfig,
  formConfig,
  unitConfig,
  BtnType,
  Units,
  BillTypeItem,
  ControlType,
} from 'ctj-ui-next/lib/index'
const searchFormRef = ref<any>()
const formConfig = reactive(<formConfig>{
  items: [
    {
      field_code: 'checkValue',
      label: '输入查询',
      control_type: ControlType.input,
      configs: {
        placeholder: '费用内容',
      },
    },
    {
      field_code: 'name',
      label: '指标名称',
      control_type: ControlType.treeSelect,
      configs: {
        multiple: true,
        optionsData: [
          {
            label: 'A',
            value: 'A',
            title: 'A',
            children: [
              {
                label: 'a',
                value: 'a',
                title: 'a',
              },
              {
                label: 'b',
                value: 'b',
                title: 'b',
              },
            ],
          },
        ],
      },
    },
    {
      field_code: 'type',
      label: '收款类型',
      control_type: ControlType.select,
      configs: {
        mode: 'multiple',
        optionsData: [
          {
            label: '男',
            value: '1',
            title: '1男',
          },
          {
            label: '女',
            value: '2',
            title: '2女',
          },
        ],
      },
    },
    {
      field_code: 'feeType',
      label: '费用类型',
      control_type: ControlType.select,
    },
    {
      field_code: 'user',
      label: '收款人',
      control_type: ControlType.input,
    },
  ],
  colSpan: 6,
  isConvert: true, //查询获取的参数是否需要将数组格式数据转换为字符串格式
  defaultData: {
    //查询表单默认值
    checkValue: 'test',
  },
  //顶部工具栏默认显示的最多查询项，默认1个
  max: 2,
})
//查询
const handleQuery = (obj: any) => {}

//重置
const handleReset = () => {}
//手动修改更多查询项的显隐
const changeVisible = (val: boolean) => {
  searchForm.value.toggleSearch(true)
}
</script>
<style lang="less" scoped>
#app {
  padding: 8px;
  background-color: #fff;
}
</style>

属性 Props ​

参数说明类型参数说明是否必传
formConfig表单数据formConfig参考 formConfig 说明是
eleDataObj表单元素下拉数据配置Object{ 字段名/字典 code: [下拉数据] }否

事件 Events ​

事件名说明回调参数参数说明
handleQuery查询obj:any查询表单数据
handleReset重置

方法 Methods ​

方法名称说明参数
toggleSearch改变“更多”查询条件的显示与隐藏true/false
resetData手动清空查询表单数据无
getQueryData获取全部表单数据无
setFieldValue修改某个字段的值('字段 field_code',值)

参数说明 ​

btnConfig 说明 ​

参数说明类型参数说明是否必传
max顶部允许显示的最多按钮数量number默认 4否
btns顶部按钮tableBtn[]参考tableBtn 说明是
moreText"更多"string默认显示更多否

tableBtn 说明 ​

参数说明类型参数说明是否必传
level按钮级别number/string用于设置不同级别按钮 css，不传即三级按钮否
title按钮显示文字string是
type按钮类型参考枚举 BtnType是
visible按钮是否显示Booleantrue/false否
tempType导入模板string按钮类型为导入时必传否
icon按钮标识string是
remark备注string否
loading加载中boolean否

formConfig 说明 ​

参数说明类型参数说明是否必传
items表单项formItem[]参考formItem 说明是
colSpan表单项占列数number通常为 6 或者 8，默认 6否
max默认显示的查询项数量number默认 1否
labelWidth表单 label 宽度string默认'120px'否
eleDataObj表单元素下拉数据配置Object{ 字段名/字典 code: [下拉数据] }否
isConvert查询时参数为数组的数据是否需要转换成字符串Booleantrue/false，默认 false否
gaps各表单项之间的上下间距String默认 16px，高级查询中为 8px否
defaultData表单数据默认值any{}否

预算单位软件产品开发部