横向面板

## Lquery 横向查询面板
由输入框、时间组件、选择器、单选框等控件组成，用以收集用户条件、校验条件、查询数据结果。
### 何时使用
当需多条件查询时
### 应用背景
横向查询面板适用于一般PC页面查询。
### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_095236_524375.png)

------------
查询面板

------------
代码示例如下
```html
<template>
    <div style="height:260px;" v-if="dataset1">
        
        <hi-lquery ref="lqueryddd" :rules="rules" :columnsTotal="2" :fields="fields" :moreFields="moreFields" :size="size" :hideQueryBtn="hideQueryBtn" :isShowScheme="isShowScheme" :isAutoActive="isAutoActive" :sysScheme="sysSchemeData" @beforequery="beforequery" :source="dataset1" @afterquery="afterquery"></hi-lquery>
        <el-button type="primary" @click="clickFn">主要按钮</el-button>
    </div>
</template>

},
                        FNUMBER: {
                            name: "FNUMBER", //字段ID
                            label: "单号", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,

length: 50,
                            rules: [],

},
                        FUSERID: {
                            name: "FUSERID", //字段ID
                            label: "用户", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,
                            readonly: true,
                            length: 50,

},
                        FCREATEDATE: {
                            name: "FCREATEDATE", //字段ID
                            label: "创建时间", //字段描述
                            dbtype: "dbDate", //数据类型
                            required: true,
                            readonly: true,

},
                        FSUPPLIER: {
                            name: "FSUPPLIER", //字段ID
                            label: "供应商", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,

},
                        FNOTE: {
                            name: "FNOTE", //字段ID
                            label: "备注", //字段描述
                            dbtype: "dbString", //数据类型
                            length: 250,
                        },
                        FARRIVALSTATE: {
                            name: "FARRIVALSTATE", //字段ID
                            label: "到货情况", //字段描述
                            dbtype: "dbString", //数据类型
                        },
                        FAUDIT: {
                            name: "FAUDIT", //字段ID
                            label: "审核", //字段描述
                            dbtype: "dbInt", //数据类型
                        },

}
                },
                sysSchemeData: {
                    name: "我的任务",
                    isShowAll: true,
                    selectedKey: "",
                    children: [{
                            key: "item0",
                            desc: "方案erd"
                        },
                        {
                            key: "QueryPlan_WB4LHlsQ",
                            desc: "方案二"
                        }
                    ]
                },
                hideQueryBtn: false,
                isShowScheme: true,
                size: "mini",
                rules: {
                    FName: [{
                        required: true,
                        message: "不能为空",
                        trigger: "blur"
                    }]
                },
                moreFields1: [],
                moreFields: [{
                    name: "field2222",
                    props: {
                        placeholder: "更多字段",
                        type: "datetime"
                    },
                    element: "el-date-picker",
                    label: "更多字段"
                }],
                fields1: [{
                        name: "FUSERID",
                        "label": "用户",
                    }

],

fields: [{
                        name: "field2",
                        "label-width": "110px",
                        props: {
                            placeholder: "申请申请请请",

type: "datetime"
                        },
                        element: "el-date-picker",
                        label: "申请申请请请"
                    },
                    {
                        name: "FARRIVALSTATE",
                        "label": "整型2",
                        "element": "HiNumber"
                    },
                    {
                        name: "field11",
                        "label-width": "100px",
                        element: "HiNumberRange",
                        label: "区间范围"
                    },
                    {
                        name: "FName",
                        element: "el-input",
                        operate: "like",
                        label: "姓名",

value: "",
                        props: {
                            placeholder: "申请申请请请",
                            //关联查询字段，当存在以下字段一起发起查询
                            additionalFields: [{
                                name: "FID",
                                element: "el-input",
                                operate: "like"
                            }, {
                                name: "FNumber",
                                element: "el-input",
                                operate: "like"
                            }]
                        },
                    },
                    {
                        name: "field4",
                        element: "el-input", //element: "el-time-select",
                        label: "发布时间"
                    },
                    {
                        name: "field145",
                        element: "el-date-picker",
                        label: "发布日期"
                    },

{
                        name: "field8",
                        element: "el-select",
                        label: "下拉选择",
                        props: {
                            multiple: false,
                            placeholder: "请选择"
                        },
                        children: [{
                                element: "el-option",
                                props: {
                                    label: "特假",
                                    value: "选项1"
                                }
                            },
                            {
                                element: "el-option",
                                props: {
                                    label: "事假",
                                    value: "选项2"
                                }
                            },
                            {
                                element: "el-option",
                                props: {
                                    value: "选项3",
                                    label: "病假"
                                }
                            }
                        ]
                    }, {
                        name: "field13",
                        element: "HiTimeScheme",
                        value: "days28",
                        label: "时间方案"
                    }
                ]
            };
        },
        created() {
            var me = this;
            window.addEventListener("message", (e) => {
                if (e.data.type === "__pushData") {
                    // TODO 使用父组件传递的初始化数据
                    var obj = JSON.parse(e.data.data.__pushdata);

me.initPushData(obj)
                    console.log(e.data.data);
                }

});
        },
        mounted() {
            this.dataset1 = this.$dsContainer.createDataSet(this.datasetCfg);
            user.service.login("admin", "9999").then(res => {
                // setToken(response.ResData.AccessToken);
            });

},
        methods: {
            initPushData(__pushdata) {
                var me = this;
                let pudata = __pushdata;
                if (pudata == null) return;
                else {
                    let pushType = pudata.type;
                    if (pushType === "view") {
                        let storeName = pudata.target.storeName;
                        let paramsData = pudata.target.ps;
                        var param = new dataHelper.queryHelper.Param({
                            paramsData: paramsData
                        });
                        this[storeName].load(param);
                    } else {
                        let sourceStoreName = pudata.source.storeName;
                        let sourceFields = pudata.source.fields;
                        let sourceParamsData = pudata.source.ps;
                        var souceParam = new dataHelper.queryHelper.Param({
                            paramsData: sourceParamsData
                        });
                        let targetStoreName = pudata.target.storeName;
                        let targetFields = pudata.target.fields;
                        let datas = [];
                        this[sourceStoreName].load(souceParam).then(response => {
                            const data = response.dataPack.rows || [];
                            for (var i = 0; i < data.length; i++) {
                                var tempdata = {};
                                for (var j = 0; j < sourceFields.length; j++) {
                                    tempdata[targetFields[j]] = data[sourceFields[j]];
                                }
                                datas.push(tempdata);
                            }
                        });
                        this[targetStoreName].add(datas);
                    }
                }
            },
            pushdata() {
                var dtpushtData = new pushData({
                    "crlName": "DtPushData",
                    "id": "DtPushData_9dFTZc",
                    source: this.dataset1,
                    target: "eaptpl.pro/01521.dir/mokuai.moduledir/dataset.datadir/brand.bizstore|BizEntity_wKIy7I.BizEntity~_extFile",
                    controlDesc: "下推",
                    targetTitle: "bbbbb",
                    targetUrl: "http://www.baidu.com",
                    wheres: [],
                    pushData: [],
                    pushtype: "pushview",

});
                dtpushtData.push();
            },
            beforequery(obj, param) {
                console.log("查询前");
            },
            clickFn() {
                debugger;
                //this.$refs["lqueryddd"].selectSchemeById("item0");
                let _data = {
                    "type": "view",
                    "target": {
                        "storeName": "pGTsvpBQca798ee|pGTsvpBQ",
                        "schemeId": "QueryPlan_WB4LHlsQ",
                        "ps": {
                            "queryCdions": {
                                "join": "or",
                                "items": [{
                                    "sign": "scheme",
                                    "name": "QueryPlan_WB4LHlsQ",
                                    "tablefilter": false,
                                    "dataType": "dbString",
                                    "value": "",
                                    "enabled": true
                                }]
                            }
                        }
                    }
                };
                var param = new dataHelper.queryHelper.Param({
                    initData: _data.target.ps
                });
                debugger;
                let _item = param.where.getConditionByKey("QueryPlan_WB4LHlsQ");
                debugger;
                utils.date
                console.log(utils.date.format("2020/10/22", "yyyy-MM-dd"));
                //utils.string.getDownloadUrl("/e5/data/exec/expr/now.xls");
                console.log(utils.date.format(utils.date.dateAdd("m", "15", "2021-10-22"), "yyyy-MM-dd"));
                // ajax({
                //     url: "http://192.168.4.106:7777/e5/data/exec/expr/now?pn=eaptpl",
                //     method: "post", //可不传，默认post
                //     async: false, //可不传，默认true                   
                //     success: function(response) {

//     },
                //     fail: function() {

//     }
                // });
            },
            afterquery(obj, param) {
                console.log("查询后");
                console.log(param.toStr());
            }
        }
    };
</script>
```

</div>

### Attributes

| 参数                              | 说明                  | 类型      | 可选值                   | 默认值   |
|---------------------------------|---------------------|---------|-----------------------|-------|
| sysSchemeData                   | 方案数据                | Array   | —                     |       |
| isShowScheme                    | 是否显示方案              | Boolean | —                     | true  |
| btnName                         | 查询按钮名称              | String  | —                     | 查询    |
| fields                          | 查询字段配置项             | Array   | —                     |       |
| fields--props--additionalFields | 关联查询字段，值存在一并发起查询    | Array   | —                     |       |
| moreFields                      | 查询更多字段配置项           | Array   | —                     |       |
| size                            | 用于控制该表单内组件的尺寸       | string  | medium / small / mini |       |
| columnsTotal                    | 列数，即：一行所占的总烈数       | Number  | —                     |       |
| labelWidth                      | label宽度，即：label标签宽度 | Number  | —                     | 80    |
| target                          | 查询目标                | Object  | —                     |       |
| cancel                          | 是否取消查询              | Boolean | —                     | false |

### Events

| 事件名称        | 说明  | 回调参数        |
|-------------|-----|-------------|
| beforequery | 查询前 | param(查询参数) |
| afterquery  | 查询后 | param(查询参数) |

</style>