GicSearchForm

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

说明

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

基本用法

示例

vue

<template>
  <div>
    <p>
      <a-button @click="changeVisible">手动控制更多查询条件的显示与隐藏</a-button>
    </p>
    <GicSearchForms
      :form-config="formConfig"
      :btn-config="btnConfig"
      @query="handleQuery"
      @reset="handleReset"
      :columnVisibleSet="false"
      @bill-checked="billChecked"
      :select-list="selectList"
      :unit-config="unitConfig"
      @change-unit="changeUnit"
      @btnClick="btnClick"
      ref="searchForm"
    ></GicSearchForms>
  </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 searchForm = ref()
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 btnConfig = reactive<tableBtnConfig>({
  btns: [
    {
      level: 1,
      type: BtnType.addBill,
      title: '添加',
      icon: 'add',
    },
    {
      level: 2,
      title: '导入',
      type: BtnType.import,
      tempType: '21',
      icon: 'import',
    },
    {
      level: 3,
      title: '导出',
      icon: 'export',
    },
  ],
})
const selectList = reactive<BillTypeItem[]>([
  {
    bill_type_id: '111',
    bill_type_name: '差旅',
  },
  {
    bill_type_id: '222',
    bill_type_name: '会议',
  },
])
const unitConfig = reactive<unitConfig>({
  visible: true,
  defaultVal: Units.yuan,
  disabled: false,
})
let selectData: any = ref([])

//查询
const handleQuery = (obj: any) => {}

//重置
const handleReset = () => {}

//顶部按钮-新增单据
const billChecked = (item: BillTypeItem) => {}

//顶部右侧工具栏-单位切换时触发
const changeUnit = (val: Units) => {}

//顶部按钮-其他按钮单击事件
const btnClick = (icon: string) => {}

//手动修改更多查询项的显隐
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>
    <GicSearchForms
      :form-config="formConfig"
      :btn-config="btnConfig"
      @query="handleQuery"
      @reset="handleReset"
      :columnVisibleSet="false"
      @bill-checked="billChecked"
      :select-list="selectList"
      :unit-config="unitConfig"
      @change-unit="changeUnit"
      @btnClick="btnClick"
      ref="searchForm"
    ></GicSearchForms>
  </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 searchForm = ref()
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 btnConfig = reactive<tableBtnConfig>({
  btns: [
    {
      level: 1,
      type: BtnType.addBill,
      title: '添加',
      icon: 'add',
    },
    {
      level: 2,
      title: '导入',
      type: BtnType.import,
      tempType: '21',
      icon: 'import',
    },
    {
      level: 3,
      title: '导出',
      icon: 'export',
    },
  ],
})
const selectList = reactive<BillTypeItem[]>([
  {
    bill_type_id: '111',
    bill_type_name: '差旅',
  },
  {
    bill_type_id: '222',
    bill_type_name: '会议',
  },
])
const unitConfig = reactive<unitConfig>({
  visible: true,
  defaultVal: Units.yuan,
  disabled: false,
})
let selectData: any = ref([])

//查询
const handleQuery = (obj: any) => {}

//重置
const handleReset = () => {}

//顶部按钮-新增单据
const billChecked = (item: BillTypeItem) => {}

//顶部右侧工具栏-单位切换时触发
const changeUnit = (val: Units) => {}

//顶部按钮-其他按钮单击事件
const btnClick = (icon: string) => {}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

属性 Props

参数	说明	类型	参数说明	是否必传
formConfig	表单数据	formConfig	参考 formConfig 说明	是
btnConfig	表格顶部按钮	tableBtnConfig	参考btnConfig 说明	否
columnVisibleSet	表格操作列显隐配置按钮是否显示	boolean	默认 false	否
eleDataObj	表单元素下拉数据配置	Object	{ `字段名/字典 code`: `[下拉数据]` }	否

事件 Events

事件名	说明	回调参数	参数说明
handleQuery	查询	obj:any	查询表单数据
handleReset	重置
changeUnit	顶部金额单位改变时触发	val:any	当前选中的金额单位
formChange	表单数据改变时触发	(value: any, column: columnItem, option: any)	value 要素数据, column 对应表单项, option 下拉或属性下拉当前选中节点
billChecked	报销单新建单据	menuItem:any	需要新建的单据信息
importSuccess	导入成功触发
btnClick	表格顶部其他按钮单击事件	code:string	单击的按钮 icon

方法 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	按钮是否显示	Boolean	true/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	查询时参数为数组的数据是否需要转换成字符串	Boolean	true/false，默认 false	否
gaps	各表单项之间的上下间距	String	默认 16px，高级查询中为 8px	否
defaultData	表单数据默认值	any	{}	否

GicSearchForm ​

基本用法 ​

属性 Props ​

事件 Events ​

方法 Methods ​

参数说明 ​

btnConfig 说明 ​

tableBtn 说明 ​

formConfig 说明 ​