提交 759cea21 编写于 作者: ibizdev's avatar ibizdev

chitanda 部署微服务应用 [TrainSys,网页端]

上级 57e79896
......@@ -554,6 +554,71 @@ export class AppSearchFormBase extends SearchFormControlBase {
}
}
/**
* @description 绘制搜索按钮
* @param {string} style 样式
* @memberof AppSearchFormBase
*/
renderSearchButton(style: string) {
if (this.controlInstance.formStyle != 'SEARCHBAR' && style != 'NONE') {
if (style == 'SEARCHONLY') {
return (
<div class="search-action-right">
<i-button class="search" size="default" type='primary' on-click={(...params: any[]) => throttle(this.search,params,this)}>{this.$t('app.searchbutton.search')}</i-button>
</div>
)
} else {
return (
<div class="search-action-right">
<i-button class="search" size="default" type='primary' on-click={(...params: any[]) => throttle(this.search,params,this)}>{this.$t('app.searchbutton.search')}</i-button>
<dropdown transfer trigger="custom" transfer-class-name="search-dropdown" visible={this.dropdownVisible} placement="bottom-end" on-on-clickoutside={(event: any) => this.clickOutside(event)}>
<span class="search-dropdown-icon">
<icon type="ios-arrow-down" onClick={() => this.dropdownVisible = !this.dropdownVisible}/>
</span>
<dropdown-menu slot='list'>
<dropdown-item>
<div class="search-dropdown-item" on-click={() => this.reset()}>
{this.$t('app.searchbutton.reset')}
</div>
</dropdown-item>
<dropdown-item>
<poptip
ref="propip"
trigger="hover"
placement="left"
title="存储自定义查询"
popper-class="searchform-poptip"
transfer
on-on-popper-show={() => this.saveItemName = ''}>
<div class="search-dropdown-item save-search">保存条件</div>
<div slot="content">
<i-input class="save-search save-name" v-model={this.saveItemName} placeholder=""></i-input>
<div class="save-action">
<button class="ivu-btn ivu-btn-default save-search cancel" on-click={(...params: any[]) => throttle(this.onCancel,params,this)}>{this.$t('app.commonwords.cancel')}</button>
<button class="ivu-btn ivu-btn-primary save-search save" type="primary" on-click={(...params: any[]) => throttle(this.onOk,params,this)}>{this.$t('app.commonwords.save')}</button>
</div>
</div>
</poptip>
</dropdown-item>
{
this.historyItems?.map((item: any) => {
return (
<dropdown-item>
<div class="search-dropdown-item history-item">
<span class="history-item caption" title={item.name} on-click={() => this.data = JSON.parse(JSON.stringify(item.data))}>{item.name}</span>
<i class="el-icon-close history-item" on-click={(e: any) => throttle(this.removeHistoryItem,[e, item],this)}/>
</div>
</dropdown-item>
)
})
}
</dropdown-menu>
</dropdown>
</div>
)
}
}
}
/**
* 绘制内容
......@@ -589,61 +654,11 @@ export class AppSearchFormBase extends SearchFormControlBase {
<input style='display:none;' />
<row>
<i-col style={this.getColStyle()} class="form-content">
<row>
<row class="search-content">
{this.renderFormContent()}
</row>
{this.renderSearchButton(searchButtonStyle)}
</i-col>
{this.controlInstance.formStyle != 'SEARCHBAR' && searchButtonStyle != 'NONE' &&
<i-col
style={this.getColStyle('button')}
class="search-action-footer">
{this.historyItems?.length>0 ?
<el-select
size="small"
popper-class="search-action-select"
value={this.selectItem}
on-change={this.onFilterChange.bind(this)}>
{this.historyItems.map((item: any)=> {
return (
<el-option
key={item.value}
label={item.name}
value={item.value}
>
<div class="searchform-action-item" on-click={() => { if (this.selectItem == item.value) { this.data = JSON.parse(JSON.stringify(item.data)); } }}>
<span title={item.name}>{item.name}</span>
<i class="el-icon-close" on-click={(e: any) => throttle(this.removeHistoryItem,[e, item],this)}/>
</div>
</el-option>
)
})}
</el-select> : null}
{Object.keys(this.data).length > 0 && <row class='search-button'>
{ searchButtonStyle == 'DEFAULT' || searchButtonStyle == 'SEARCHONLY' ?
<i-button class='search_reset' size='default' type='primary' on-click={(...params: any[]) => throttle(this.search,params,this)}>{this.$t('app.searchbutton.search')}</i-button> : null }
{ searchButtonStyle == 'DEFAULT' ?
<i-button class='search_reset reset' size='default' on-click={(...params: any[]) => throttle(this.reset,params,this)}>{this.$t('app.searchbutton.reset')}</i-button> : null }
{this.enableSaveFilter && searchButtonStyle == 'DEFAULT' ?
<poptip
ref="propip"
trigger="hover"
placement="top-end"
title="存储自定义查询"
popper-class="searchform-poptip"
transfer
on-on-popper-show={() => this.saveItemName = ''}>
<i-button class="save-button"><i class="fa fa-floppy-o" aria-hidden="true"></i></i-button>
<div slot="content">
<i-input v-model={this.saveItemName} placeholder=""></i-input>
<div class="save-action">
<i-button on-click={(...params: any[]) => throttle(this.onCancel,params,this)}>{this.$t('app.commonwords.cancel')}</i-button>
<i-button type="primary" on-click={(...params: any[]) => throttle(this.onOk,params,this)}>{this.$t('app.commonwords.save')}</i-button>
</div>
</div>
</poptip> : null}
</row>}
</i-col>
}
</row>
</i-form>
);
......
......@@ -12,49 +12,35 @@
>.ivu-row {
height: 100%;
}
.search-action-footer {
height: 42px;
padding: 4px 6px 0 0;
display: flex;
justify-content: flex-end;
.el-select {
padding-right: 12px;
}
> .search-button {
.search_reset, .save-button {
height: 28px;
margin-right: 4px;
margin-left: 0;
}
.save-button {
margin-right: 0;
}
}
}
}
.app-search-form.no-search-action, .app-search-form.right-button {
.form-content {
height: 100%;
}
}
// 按钮在右侧
.app-search-form.right-button {
> .ivu-row {
display: flex;
.search-action-footer {
height: 100%;
padding-top: 0;
> .search-button {
padding-top: 2px;
.search_reset, .save-button {
margin-top: 0;
}
.search-content {
width: calc(100% - 100px);
padding-right: 8px;
}
.search-action-right {
width: 100px;
.search {
height: 28px;
width: 80px;
margin-left: 0;
border-radius: 4px 0 0 4px;
}
.search-dropdown-icon {
width: 19px;
height: 28px;
position: relative;
background: #2d8cf0;
color: #fff;
top: 2px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 4px 4px 0;
border-left: 1px solid;
}
}
}
}
.form-content {
height: calc(100% - 42px);
}
.app-search-form-flex {
height: 100%;
......@@ -83,6 +69,32 @@
}
}
}
.search-dropdown {
width: 100px !important;
max-height: 150px !important;
overflow-x: hidden;
.ivu-dropdown-item {
height: 32px;
display: flex;
align-items: center;
padding: 4px 8px !important;
.search-dropdown-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.history-item {
display: flex;
.history-item.caption {
width: 80px;
}
.el-icon-close.history-item {
position: relative;
top: 3px;
}
}
}
}
}
.searchform-popover.el-popover {
z-index: 1024 !important;
width: 50%;
......
......@@ -21,6 +21,13 @@
.ivu-dropdown-menu {
.ivu-dropdown-item {
&.ivu-dropdown-item-disabled {
color:#c5c8ce;
&:hover {
color:#c5c8ce;
background-color: #fff;
}
}
&:hover {
background-color: #ecf5ff;
color: #66b1ff;
......
......@@ -97,7 +97,9 @@ export class ViewToolbar extends Vue {
* @memberof ViewToolbar
*/
@Emit('item-click')
public itemClick(uiAction: any, e: MouseEvent): void { }
public itemClick(uiAction: any, e?: MouseEvent): void {
e?.stopPropagation();
}
/**
* 绘制分割线
......@@ -129,7 +131,7 @@ export class ViewToolbar extends Vue {
if (item.items && item.items.length > 0) {
return this.renderMenuGroup(item);
}
return <dropdown-item>{this.renderMenuItem(item,false)}</dropdown-item>;
return <dropdown-item disabled={item.disabled} name={item.name}>{this.renderMenuItem(item,false)}</dropdown-item>;
});
}
......@@ -290,7 +292,7 @@ export class ViewToolbar extends Vue {
}
if (Object.is(item.itemType, 'ITEMS') && item.items && item.items.length > 0) {
return (
<dropdown transfer transfer-class-name="view-toolbar-transfer" v-show={item.visabled} trigger='click'>
<dropdown transfer transfer-class-name="view-toolbar-transfer" v-show={item.visabled} trigger='click' on-on-click={(name: string) => throttle(this.itemClick,[{ tag: name }],this)}>
<el-tooltip disabled={!item.tooltip}>
<app-button
caption={item.caption}
......
......@@ -76,6 +76,13 @@ export class SearchFormControlBase extends EditFormControlBase implements Search
*/
public enableSaveFilter: boolean = true;
/**
* @description 是否显示搜索下拉
* @type {boolean}
* @memberof SearchFormControlBase
*/
public dropdownVisible: boolean = false;
/**
* 监听静态参数变化
*
......@@ -289,6 +296,17 @@ export class SearchFormControlBase extends EditFormControlBase implements Search
});
}
/**
* @description 点击外部区域关闭下拉
* @memberof SearchFormControlBase
*/
public clickOutside(event: any) {
const className: string = event.target.className;
if (!className.includes('save-search') && className !== 'ivu-input ivu-input-default' && !className.includes('history-item')) {
this.dropdownVisible = false;
}
}
/**
* 搜索
*
......@@ -334,7 +352,6 @@ export class SearchFormControlBase extends EditFormControlBase implements Search
}
let propip: any = this.$refs.propip;
propip.handleMouseleave();
// this.onSave();
}
/**
......
......@@ -429,7 +429,7 @@
"name" : "fetch",
"getPSAppDEMethod" : {
"modelref" : true,
"id" : "FetchDefault"
"id" : "FetchUp"
},
"getPSAppDataEntity" : {
"modelref" : true,
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册