Skip to content

Commit de89d2b

Browse files
cq-pandacq-panda
committed
增加第二种查询布局方式
1 parent 609f22c commit de89d2b

File tree

6 files changed

+734
-456
lines changed

6 files changed

+734
-456
lines changed

‎Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 100 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -31,69 +31,21 @@
3131
<gridHeader ref="gridHeader" @parentCall="parentCall"></gridHeader>
3232
<!--主界面查询与table表单布局-->
3333
<div class="view-container">
34-
<div class="view-header">
35-
<div class="desc-text">
36-
<Icon type="md-apps" />
37-
<span>{{table.cnName}}</span>
38-
</div>
39-
<div class="notice">
40-
<!-- <Tooltip content="6666666666666666" placement="bottom">
41-
<a>Bottom Center</a>
42-
</Tooltip>-->
43-
<a class="text" :title="extend.text">{{extend.text}}</a>
44-
</div>
45-
<!--快速查询字段-->
46-
<div class="search-line">
47-
<QuickSearch
48-
v-if="singleSearch"
49-
:singleSearch="singleSearch"
50-
:searchFormFileds="searchFormFileds"
51-
:tiggerPress="quickSearchKeyPress"
52-
></QuickSearch>
53-
</div>
54-
<!--操作按钮组-->
55-
<div class="btn-group">
56-
<Button
57-
v-for="(btn,bIndex) in splitButtons"
58-
:key="bIndex"
59-
:type="btn.type"
60-
:class="btn.class"
61-
@click="onClick(btn.onClick)"
62-
>
63-
<Icon :type="btn.icon" />
64-
{{btn.name}}
65-
</Button>
66-
<Dropdown trigger="click" @on-click="changeDropdown" v-if="buttons.length> maxBtnLength">
67-
<Button type="info" ghost>
68-
更多
69-
<Icon type="ios-arrow-down"></Icon>
70-
</Button>
71-
<DropdownMenu slot="list">
72-
<DropdownItem
73-
:name="item.name"
74-
v-for="(item,dIndex) in buttons.slice(maxBtnLength,buttons.length)"
75-
:key="dIndex"
76-
>
77-
<Icon :type="item.icon"></Icon>
78-
{{item.name}}
79-
</DropdownItem>
80-
</DropdownMenu>
81-
</Dropdown>
82-
</div>
83-
84-
<!--查询条件-->
85-
<div class="search-box" v-show="searchBoxShow">
34+
<!-- 2020.09.11增加固定查询表单 -->
35+
<!--查询条件-->
36+
<div class="grid-search">
37+
<div :class="[fiexdSearchForm?'fiexd-search-box':'search-box']" v-show="searchBoxShow">
8638
<vol-form
8739
ref="searchForm"
8840
:label-width="labelWidth"
8941
:formRules="searchFormOptions"
9042
:formFileds="searchFormFileds"
9143
>
92-
<div class="form-closex" slot="footer">
44+
<div v-if="!fiexdSearchForm" class="form-closex" slot="footer">
9345
<Button size="small" type="info" ghost @click="search">
9446
<Icon type="md-search" />查询
9547
</Button>
96-
<!-- <Icon type="md-close-circle" color="color" size="20" /> -->
48+
9749
<Button size="small" type="success" ghost @click="resetSearch">
9850
<Icon type="md-refresh" />重置
9951
</Button>
@@ -103,6 +55,60 @@
10355
</div>
10456
</vol-form>
10557
</div>
58+
<div class="view-header">
59+
<div class="desc-text">
60+
<Icon type="md-apps" />
61+
<span>{{table.cnName}}</span>
62+
</div>
63+
<div class="notice">
64+
<!-- <Tooltip content="6666666666666666" placement="bottom">
65+
<a>Bottom Center</a>
66+
</Tooltip>-->
67+
<a class="text" :title="extend.text">{{extend.text}}</a>
68+
</div>
69+
<!--快速查询字段-->
70+
<div class="search-line">
71+
<QuickSearch
72+
v-if="singleSearch"
73+
:singleSearch="singleSearch"
74+
:searchFormFileds="searchFormFileds"
75+
:tiggerPress="quickSearchKeyPress"
76+
></QuickSearch>
77+
</div>
78+
<!--操作按钮组-->
79+
<div class="btn-group">
80+
<Button
81+
v-for="(btn,bIndex) in splitButtons"
82+
:key="bIndex"
83+
:type="btn.type"
84+
:class="btn.class"
85+
@click="onClick(btn.onClick)"
86+
>
87+
<Icon :type="btn.icon" />
88+
{{btn.name}}
89+
</Button>
90+
<Dropdown
91+
trigger="click"
92+
@on-click="changeDropdown"
93+
v-if="buttons.length> maxBtnLength"
94+
>
95+
<Button type="info" ghost>
96+
更多
97+
<Icon type="ios-arrow-down"></Icon>
98+
</Button>
99+
<DropdownMenu slot="list">
100+
<DropdownItem
101+
:name="item.name"
102+
v-for="(item,dIndex) in buttons.slice(maxBtnLength,buttons.length)"
103+
:key="dIndex"
104+
>
105+
<Icon :type="item.icon"></Icon>
106+
{{item.name}}
107+
</DropdownItem>
108+
</DropdownMenu>
109+
</Dropdown>
110+
</div>
111+
</div>
106112
<vol-box
107113
v-if="boxInit"
108114
:model.sync="boxModel"
@@ -236,15 +242,15 @@ const _const = {
236242
DOWNLOAD: "DownLoadFile", //导出文件
237243
DOWNLOADTEMPLATE: "DownLoadTemplate", //下载导入模板
238244
IMPORT: "Import", //导入(导入表的Excel功能)
239-
UPLOAD: "Upload" //上传文件
245+
UPLOAD: "Upload", //上传文件
240246
};
241247
const comName = [
242248
"gridHeader",
243249
"gridBody",
244250
"gridFooter",
245251
"modelHeader",
246252
"modelBody",
247-
"modelFooter"
253+
"modelFooter",
248254
];
249255
import Empty from "@/components/basic/Empty.vue";
250256
var $viewGridVue, $this;
@@ -266,7 +272,7 @@ let _components = {
266272
// }, 1000);
267273
// },
268274
modelBody: Empty,
269-
modelFooter: Empty
275+
modelFooter: Empty,
270276
};
271277
import VolTable from "@/components/basic/VolTable.vue";
272278
var vueParam = {
@@ -278,11 +284,12 @@ var vueParam = {
278284
VolBox: () => import("@/components/basic/VolBox.vue"),
279285
QuickSearch: () => import("@/components/basic/QuickSearch.vue"),
280286
Audit: () => import("@/components/basic/Audit.vue"),
281-
UploadExcel: () => import("@/components/basic/UploadExcel.vue")
287+
UploadExcel: () => import("@/components/basic/UploadExcel.vue"),
282288
},
283289
props: {},
284290
data() {
285291
return {
292+
fiexdSearchForm: false, //2020.09.011是否固定查询表单，true查询表单将固定显示在表单的最上面
286293
_inited: false,
287294
single: false, //表是否单选
288295
const: _const, //增删改查导入导出等对应的action
@@ -345,7 +352,7 @@ var vueParam = {
345352
//结束编辑后
346353
endEditAfter: (row, column, index) => {
347354
return true;
348-
}
355+
},
349356
},
350357
auditParam: {
351358
//审核对象
@@ -356,8 +363,8 @@ var vueParam = {
356363
//审核选项(可自行再添加)
357364
data: [
358365
{ text: "通过", status: 1 },
359-
{ text: "拒绝", status: 2 }
360-
]
366+
{ text: "拒绝", status: 2 },
367+
],
361368
},
362369
upload: {
363370
//导入上传excel对象
@@ -366,9 +373,9 @@ var vueParam = {
366373
template: {
367374
//下载模板对象
368375
url: "", //下载模板路径
369-
fileName: "" //模板下载的中文名
376+
fileName: "", //模板下载的中文名
370377
},
371-
init: false //是否有导入权限，有才渲染导入组件
378+
init: false, //是否有导入权限，有才渲染导入组件
372379
},
373380
height: 0, //表高度
374381
tableHeight: 0, //查询页面table的高度
@@ -379,8 +386,8 @@ var vueParam = {
379386
labelWidth: 100,
380387
height: 0,
381388
width: 0,
382-
summary: false //弹出框明细table是否显示合计
383-
} //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
389+
summary: false, //弹出框明细table是否显示合计
390+
}, //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
384391
};
385392
},
386393
methods: {
@@ -395,7 +402,7 @@ var vueParam = {
395402
}
396403
}
397404
}
398-
}
405+
},
399406
},
400407
activated() {
401408
//2020.06.25增加activated方法
@@ -411,9 +418,9 @@ var vueParam = {
411418
},
412419
mounted() {
413420
this.mounted();
421+
// this.$refs.searchForm.forEach()
414422
},
415-
beforeCreate() {},
416-
created: function() {
423+
created: function () {
417424
//在其他方法中如果拿不到this，请使用$viewGridVue或$this
418425
$viewGridVue = this;
419426
$this = this;
@@ -437,8 +444,8 @@ var vueParam = {
437444
this.onInited(); //初始化后，如果需要做其他处理在扩展方法中覆盖此方法
438445
this.splitButtons = this.getButtons();
439446
},
440-
beforeUpdate: function() {},
441-
updated: function() {}
447+
beforeUpdate: function () {},
448+
updated: function () {},
442449
};
443450
444451
import props from "./ViewGridConfig/props.js";
@@ -479,3 +486,26 @@ import "@/assets/css/ViewGrid.less";
479486
background: #eee;
480487
}
481488
</style>
489+
<style lang="less">
490+
.grid-search {
491+
position: relative;
492+
.fiexd-search-box {
493+
border-bottom: 1px solid #eee;
494+
margin-bottom: 28px;
495+
padding-bottom: 0px;
496+
padding-top: 5px;
497+
}
498+
.search-box {
499+
background: #fefefe;
500+
margin-top: 45px;
501+
border: 1px solid #ececec;
502+
position: absolute;
503+
z-index: 999;
504+
left: 0;
505+
right: 0;
506+
padding: 25px 40px;
507+
padding-bottom: 0;
508+
box-shadow: 0 7px 18px -12px #bdc0bb;
509+
}
510+
}
511+
</style>

0 commit comments

Comments
 (0)