tiangong-doc
2024-03-19
目录

TgFilterPlus 查询筛选

# TgFilterPlus 查询筛选

# Attributes

属性名 说明 类型 默认值
page 页面模型 Object {}
rules 规则 Object {}
entity 绑定数据(配合nameField使用) Object {}
validateMessage 校验不通过的提示信息 String 请输入或者选择必填项
enterEmitName enter事件是"查询"/“回车" String 回车
showFilterSetting 是否显示筛选配置 Boolean true
showRows 默认显示查询条件的行数 Number 2
showAll 是否显示全部查询条件 Boolean false

# Events

名称 说明 类型 参数
search 查询按钮的触发事件 Functon entity
reset 重置按钮的触发事件 Functon
updateConfig 筛选配置，进行保存以后的回调函数 Functon

# 配置文件

属性名 说明 类型 默认值
label 名称 String
field 字段 String
span 控件占用长度 int
labelWidth label占用长度 String
show 是否显示 String
query 查询配置 String
componet 控件类型 String
componentProps 控件属性 Object

# componet

值 备注
Input 文本框
Select 下拉框
Choose 放大镜
ChooseEx 多列放大镜
DatePicker 日期框
DateRange 日期区间
DateTimeRange 日期时间区间

# componentProps

属性名 说明 类型 默认值
placeholder 输入框占位文本 String
disabled 是否只读 Boolean false
focusSelect 获取焦点自动全选文本框 (opens new window) Boolean false
dataType 数据类型 String
multiple 是否多选 String
dataJoin 是否显示value-label下拉框 (opens new window) Boolean false
codeOnly 是否只显示值下拉框 (opens new window) Boolean false
dataCustom 自定义数据源下拉框 (opens new window) Boolean false
validate 是否校验放大镜 (opens new window) Boolean false
codeBehind code隐藏放大镜 (opens new window) Boolean false
codeOnly code显示放大镜 (opens new window) Boolean false
nameField 名称字段放大镜 (opens new window) String
format 日期控件显示值格式(日期控件) String
valueFormat 日期控绑定值格式 (日期控件) String
shortcuts 设置快捷选项，需要传入数组对象 (日期控件) Object

# 示例代码

# 基本用法


<tg-filter-plus ref="queryForm" :rules="page.data.rules" :page="page"
                @search="page.search"></tg-filter-plus>

<script>
import QueryPage from "@coreQueryPage";
  import {defaultQueryProps} from '@/web/app/setting/componentSetting'
  import {searchFormSchema} from "./setting/list.set"

let {page} = QueryPage()  
page.context.name = 'PageDemo_FrmEciBaseList'
  page.useQueryForm({
    ...defaultQueryProps,  //配置信息
    schema: searchFormSchema,  //查询表单的配置信息
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

配置文件属性

import {tm} from '@i18nHelper'

export const searchFormSchema = [
    {
        label: tm('appGen.code', '代码'), //显示中文名  
        field: "code", //字段名称  
        span: 6, //控件占位长度  
        labelWidth: "100px", //label占用长度  
        show: true, //是否显示该控件  
        query: "auto", //查询配置  
        component: "Select", //控件类型：Input,Select,Choose,DateRange,DateTimeRange  
        componentProps: {
            //组件属性对象  
            dataType: "BASE_SETTLEMENT", //放大镜，下拉框的数据来源  
        },
    },
    {
        label: tm('appGen.name', '名称'), //显示中文名  
        field: "name", //字段名称  
        span: 6, //控件占位长度  
        labelWidth: "100px", //label占用长度  
        show: true, //是否显示该控件  
        query: "auto", //查询配置  
        component: "Input", //控件类型：Input,Select,Choose,DateRange,DateTimeRange  
        componentProps: {
            //组件属性对象  
            //focusSelect: false,//获取焦点，是否自动全选  
        },
    }
];
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

# 日期框配置

修改component:DatePicker

export const searchFormSchema = [
    {
        label: "日期", //显示中文名
        field: "createTime", //字段名称
        span: 12, //控件占位长度  
        show: true, //是否显示该控件  
        query: "A.CREATE_TIME|s|>|and", //查询配置  
        component: "DatePicker", //控件类型
        componentProps: {
            format: "YYYY/MM/DD",  //显示格式
			valueFormat: "YYYY-MM-DD" //选择日期的值格式
        },
    }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 日期框区间配置

修改component:DateRange

export const searchFormSchema = [
    {
        label: "日期", //显示中文名
        field: "createTime", //字段名称
        span: 6, //控件占位长度  
        show: true, //是否显示该控件  
        query: "auto", //查询配置  
        component: "DateRange", //控件类型
        componentProps: {
           
        },
    }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 日期框配置(默认快捷方式)

设置属性：defaultShortcuts :true。开启框架的默认快捷方式

export const searchFormSchema = [
    {
        label: "日期", //显示中文名
        field: "createTime", //字段名称
        span: 12, //控件占位长度  
        show: true, //是否显示该控件  
        query: "A.CREATE_TIME|s|>|and", //查询配置  
        component: "DateRange", //控件类型
        componentProps: {
          defaultShortcuts:true,
          format: "YYYY/MM/DD",  //显示格式
			valueFormat: "YYYY-MM-DD" //选择日期的值格式
        },
    }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 日期框配置(自定义快捷方式)

修改shortcuts属性，自定义跨界方式

export const searchFormSchema = [
    {
        label: "日期", //显示中文名
        field: "createTime", //字段名称
        span: 12, //控件占位长度  
        show: true, //是否显示该控件  
        query: "A.CREATE_TIME|s|>|and", //查询配置  
        component: "DateRange", //控件类型
        componentProps: {
	        format: "YYYY/MM/DD",  //显示格式
			valueFormat: "YYYY-MM-DD" //选择日期的值格式
	        shortcuts: [  
			{  
				text: "本周测试",  
				value: () => {  
				const currentDate = new Date();  
				const startOfWeek = new Date(  
				currentDate.getFullYear(),  
				currentDate.getMonth(),  
				currentDate.getDate() - currentDate.getDay()  
				); // 获取本周的第一天  
				const endOfWeek = new Date(startOfWeek); // 创建一个副本以避免修改原始值  
				endOfWeek.setDate(endOfWeek.getDate() + 6); // 将其设置为本周的最后一天  
				endOfWeek.setTime(endOfWeek.getTime() + 3600 * 1000 * 24 - 1000);  
				return [startOfWeek, endOfWeek];  
					},  
				},  
			],
        },
    }
];
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

# 日期框配置(全局定义快捷方式)

在website.js中添加如下配置

window.website = {
    componentSetting: {
        //日期框的配置
        datePicker: {
            //快捷选项
            shortcuts: [
                {
                    text: "本周test",
                    value: () => {
                        const currentDate = new Date();
                        const startOfWeek = new Date(
                            currentDate.getFullYear(),
                            currentDate.getMonth(),
                            currentDate.getDate() - currentDate.getDay()
                        ); 
                        const endOfWeek = new Date(startOfWeek); 
                        endOfWeek.setDate(endOfWeek.getDate() + 6); 
                        endOfWeek.setTime(endOfWeek.getTime() + 3600 * 1000 * 24 - 1000);
                        return [startOfWeek, endOfWeek];
                    },
                },
                {
                    text: "本月test",
                    value: () => {
                        const now = new Date();
                        const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
                        const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 获取月底日期
                        monthEnd.setTime(monthEnd.getTime() + 3600 * 1000 * 24 - 1000);
                        return [monthStart, monthEnd];
                    },
                }
            ]

        }
    }
}
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

# 自定义查询字段

主要修改是配置文件的：query属性

规则如下：A.xx|s|=|and
        字段名|类型|比较符号|连接符号
类型: s字符串 n数字 d日期
比较符号: = > < >= <= != in nin l rl ll isnull isnotnull between
连接符号: and or

export const searchFormSchema = [
    {
        label: tm('appGen.code', '代码'), //显示中文名  
        field: "code", //字段名称  
        span: 6, //控件占位长度  
        labelWidth: "100px", //label占用长度  
        show: true, //是否显示该控件  
        query: "A.STATUS|s|=|and", //查询配置  
        component: "Select", //控件类型
        componentProps: {
            //组件属性对象  
            dataType: "BASE_SETTLEMENT", //放大镜，下拉框的数据来源  
        },
    }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 字段扩展


通过插槽，重新设置控件的custCode
#custCode 插槽来设置

<tg-filter-plus ref="queryForm" :rules="page.data.rules" :page="page"
                @search="page.search">
                <template #custCode>  
<tg-select-plus dataType="BASE_SETTLEMENT" v-model="page.data.entity.custCode"  
:data-reg-exp="/1*/"></tg-select-plus>  
</template>
                </tg-filter-plus>

<script>
import QueryPage from "@coreQueryPage";
import {defaultQueryProps} from '@/web/app/setting/componentSetting'
import {searchFormSchema} from "./setting/list.set"

let {page} = QueryPage()  
page.context.name = 'PageDemo_FrmEciBaseList'
page.useQueryForm({
    ...defaultQueryProps,  //配置信息
    schema: searchFormSchema,  //查询表单的配置信息
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

配置文件属性

import {tm} from '@i18nHelper'

export const searchFormSchema = [
    {
        label: tm('appGen.custCode', '代码'), //显示中文名  
        field: "custCode", //字段名称  
        span: 6, //控件占位长度  
        labelWidth: "100px", //label占用长度  
        show: true, //是否显示该控件  
        query: "auto", //查询配置  
        component: "Select", 
        componentProps: {
            //组件属性对象  
            dataType: "BASE_SETTLEMENT", 
        },
    },
    {
        label: tm('appGen.name', '名称'), //显示中文名  
        field: "name", //字段名称  
        span: 6, //控件占位长度  
        labelWidth: "100px", //label占用长度  
        show: true, //是否显示该控件  
        query: "auto", //查询配置  
        component: "Input", 
        componentProps: {
           
        },
    }
];
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

# 按钮扩展


<tg-filter-plus ref="queryForm" :rules="page.data.rules" :page="page"
                @search="page.search">
  <template #tg_button>
    <tg-button @click="testAction" name="测试按钮"/>
  </template>
</tg-filter-plus>

<script>
  import {defaultQueryProps} from '@/web/app/setting/componentSetting'
  import {searchFormSchema} from "./setting/list.set"

  page.useQueryForm({
    ...defaultQueryProps,  //配置信息
    schema: searchFormSchema,  //查询表单的配置信息
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 2024/5/28 17:28:37
TgChoosePlusEx 多列放大镜
TgTableListPlus 表格

← TgTableListPlus 表格→

最近更新
01
EciReport模板导出_Core
09-10
02
EciReport模板导出
09-09
03
Core权限平台接口
07-25
更多文章>
Theme by Vdoing