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

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

上级 57e79896
...@@ -554,6 +554,71 @@ export class AppSearchFormBase extends SearchFormControlBase { ...@@ -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 { ...@@ -589,61 +654,11 @@ export class AppSearchFormBase extends SearchFormControlBase {
<input style='display:none;' /> <input style='display:none;' />
<row> <row>
<i-col style={this.getColStyle()} class="form-content"> <i-col style={this.getColStyle()} class="form-content">
<row> <row class="search-content">
{this.renderFormContent()} {this.renderFormContent()}
</row> </row>
{this.renderSearchButton(searchButtonStyle)}
</i-col> </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> </row>
</i-form> </i-form>
); );
......
...@@ -12,50 +12,36 @@ ...@@ -12,50 +12,36 @@
>.ivu-row { >.ivu-row {
height: 100%; height: 100%;
} }
.search-action-footer { .form-content {
height: 42px;
padding: 4px 6px 0 0;
display: flex; display: flex;
justify-content: flex-end; .search-content {
.el-select { width: calc(100% - 100px);
padding-right: 12px; padding-right: 8px;
} }
> .search-button { .search-action-right {
.search_reset, .save-button { width: 100px;
.search {
height: 28px; height: 28px;
margin-right: 4px; width: 80px;
margin-left: 0; margin-left: 0;
border-radius: 4px 0 0 4px;
} }
.save-button { .search-dropdown-icon {
margin-right: 0; width: 19px;
} height: 28px;
} position: relative;
} background: #2d8cf0;
} color: #fff;
.app-search-form.no-search-action, .app-search-form.right-button { top: 2px;
.form-content {
height: 100%;
}
}
// 按钮在右侧
.app-search-form.right-button {
> .ivu-row {
display: flex; display: flex;
.search-action-footer { justify-content: center;
height: 100%; align-items: center;
padding-top: 0; border-radius: 0 4px 4px 0;
> .search-button { border-left: 1px solid;
padding-top: 2px;
.search_reset, .save-button {
margin-top: 0;
}
} }
} }
} }
} }
.form-content {
height: calc(100% - 42px);
}
.app-search-form-flex { .app-search-form-flex {
height: 100%; height: 100%;
> .ivu-row { > .ivu-row {
...@@ -83,6 +69,32 @@ ...@@ -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 { .searchform-popover.el-popover {
z-index: 1024 !important; z-index: 1024 !important;
width: 50%; width: 50%;
......
...@@ -21,6 +21,13 @@ ...@@ -21,6 +21,13 @@
.ivu-dropdown-menu { .ivu-dropdown-menu {
.ivu-dropdown-item { .ivu-dropdown-item {
&.ivu-dropdown-item-disabled {
color:#c5c8ce;
&:hover {
color:#c5c8ce;
background-color: #fff;
}
}
&:hover { &:hover {
background-color: #ecf5ff; background-color: #ecf5ff;
color: #66b1ff; color: #66b1ff;
......
...@@ -97,7 +97,9 @@ export class ViewToolbar extends Vue { ...@@ -97,7 +97,9 @@ export class ViewToolbar extends Vue {
* @memberof ViewToolbar * @memberof ViewToolbar
*/ */
@Emit('item-click') @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 { ...@@ -129,7 +131,7 @@ export class ViewToolbar extends Vue {
if (item.items && item.items.length > 0) { if (item.items && item.items.length > 0) {
return this.renderMenuGroup(item); 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 { ...@@ -290,7 +292,7 @@ export class ViewToolbar extends Vue {
} }
if (Object.is(item.itemType, 'ITEMS') && item.items && item.items.length > 0) { if (Object.is(item.itemType, 'ITEMS') && item.items && item.items.length > 0) {
return ( 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}> <el-tooltip disabled={!item.tooltip}>
<app-button <app-button
caption={item.caption} caption={item.caption}
......
...@@ -76,6 +76,13 @@ export class SearchFormControlBase extends EditFormControlBase implements Search ...@@ -76,6 +76,13 @@ export class SearchFormControlBase extends EditFormControlBase implements Search
*/ */
public enableSaveFilter: boolean = true; public enableSaveFilter: boolean = true;
/**
* @description 是否显示搜索下拉
* @type {boolean}
* @memberof SearchFormControlBase
*/
public dropdownVisible: boolean = false;
/** /**
* 监听静态参数变化 * 监听静态参数变化
* *
...@@ -289,6 +296,17 @@ export class SearchFormControlBase extends EditFormControlBase implements Search ...@@ -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 ...@@ -334,7 +352,6 @@ export class SearchFormControlBase extends EditFormControlBase implements Search
} }
let propip: any = this.$refs.propip; let propip: any = this.$refs.propip;
propip.handleMouseleave(); propip.handleMouseleave();
// this.onSave();
} }
/** /**
......
...@@ -429,7 +429,7 @@ ...@@ -429,7 +429,7 @@
"name" : "fetch", "name" : "fetch",
"getPSAppDEMethod" : { "getPSAppDEMethod" : {
"modelref" : true, "modelref" : true,
"id" : "FetchDefault" "id" : "FetchUp"
}, },
"getPSAppDataEntity" : { "getPSAppDataEntity" : {
"modelref" : true, "modelref" : true,
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册