提交 f69abccb 编写于 作者: sq3536's avatar sq3536

Merge remote-tracking branch 'origin/master'

...@@ -244,7 +244,7 @@ const onLanguageChange = (item: string) => { ...@@ -244,7 +244,7 @@ const onLanguageChange = (item: string) => {
<a-select <a-select
ref="select" ref="select"
v-model:value="presentLanguage" v-model:value="presentLanguage"
style="width: 110px" style="width: 120px"
:disabled="!isChangeLanguage" :disabled="!isChangeLanguage"
:bordered="false" :bordered="false"
@change="onLanguageChange" @change="onLanguageChange"
...@@ -253,7 +253,7 @@ const onLanguageChange = (item: string) => { ...@@ -253,7 +253,7 @@ const onLanguageChange = (item: string) => {
:value="language" :value="language"
v-for="(language,index) in languages" v-for="(language,index) in languages"
:key="index" :key="index"
>{{language}}</a-select-option> >\{{language}}</a-select-option>
</a-select> </a-select>
</div> </div>
<div class="right-toolbar"> <div class="right-toolbar">
...@@ -282,7 +282,7 @@ const onLanguageChange = (item: string) => { ...@@ -282,7 +282,7 @@ const onLanguageChange = (item: string) => {
</template> </template>
<style lang='scss'> <style lang='scss'>
.app-code-editor { .app-code {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 300px; min-width: 300px;
......
...@@ -35,7 +35,7 @@ const itemClick = (item: IParam) => { ...@@ -35,7 +35,7 @@ const itemClick = (item: IParam) => {
</script> </script>
<template> <template>
<div class="toolbar"> <div class="toolbar">
<a-space v-if="Object.is(mode,'button')" class="toolbar-button" style="gap: 4px;"> <a-space v-if="Object.is(mode,'button')" class="toolbar-buttons" style="gap: 4px;">
<template v-for="(item, index) in items" :key="index"> <template v-for="(item, index) in items" :key="index">
<a-tooltip <a-tooltip
v-if="Object.is(item.itemType, 'DEUIACTION')" v-if="Object.is(item.itemType, 'DEUIACTION')"
...@@ -54,8 +54,9 @@ const itemClick = (item: IParam) => { ...@@ -54,8 +54,9 @@ const itemClick = (item: IParam) => {
:imgPath="item.showIcon && item.imgPath"/> :imgPath="item.showIcon && item.imgPath"/>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<a-dropdown v-else-if="Object.is(item.itemType, 'ITEMS')"> <a-dropdown v-else-if="Object.is(item.itemType, 'ITEMS')" v-show="item.visible">
<a-menu slot="overlay" @click="itemClick"> <!-- todo 模型缺失 -->
<!-- <a-menu slot="overlay" @click="itemClick">
<a-tooltip <a-tooltip
v-for="(childItem, index) in item" v-for="(childItem, index) in item"
v-if="Object.is(item.itemType, 'DEUIACTION')" v-if="Object.is(item.itemType, 'DEUIACTION')"
...@@ -73,7 +74,7 @@ const itemClick = (item: IParam) => { ...@@ -73,7 +74,7 @@ const itemClick = (item: IParam) => {
:imgPath="item.showIcon && item.imgPath"/> :imgPath="item.showIcon && item.imgPath"/>
</a-menu-item> </a-menu-item>
</a-tooltip> </a-tooltip>
</a-menu> </a-menu> -->
</a-dropdown> </a-dropdown>
<template v-else-if="Object.is(item.itemType, 'SEPERATOR')"> <template v-else-if="Object.is(item.itemType, 'SEPERATOR')">
<span class='separator'>|</span> <span class='separator'>|</span>
...@@ -104,6 +105,12 @@ const itemClick = (item: IParam) => { ...@@ -104,6 +105,12 @@ const itemClick = (item: IParam) => {
.toolbar { .toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
.toolbar-buttons {
flex-wrap: wrap;
.ant-space-item {
padding: 3px 0 3px 6px
}
}
.toolbar-link { .toolbar-link {
gap: 0 !important; gap: 0 !important;
display: flex; display: flex;
......
import { FormControlProps } from "@core"; import { FormControlProps, IParam } from "@core";
/** /**
* @description 表单部件的props * @description 表单部件的props
...@@ -8,4 +8,25 @@ import { FormControlProps } from "@core"; ...@@ -8,4 +8,25 @@ import { FormControlProps } from "@core";
*/ */
export interface SearchFormControlProps extends FormControlProps { export interface SearchFormControlProps extends FormControlProps {
/**
* @description 是否显示气泡框
* @type {boolean}
* @memberof SearchFormControlProps
*/
showPopover: boolean;
/**
* @description 选中历史项
* @type {IParam}
* @memberof SearchFormControlProps
*/
selectHistoryItem: IParam;
/**
* @description 历史项
* @type {IParam[]}
* @memberof SearchFormControlProps
*/
historyItems: IParam[];
} }
\ No newline at end of file
import { FormControl, FormControlState } from '@core'; import { FormControl, FormControlState, IParam } from '@core';
/** /**
* @description 搜索表单部件 * @description 搜索表单部件
...@@ -33,15 +33,38 @@ export class SearchFormControl extends FormControl { ...@@ -33,15 +33,38 @@ export class SearchFormControl extends FormControl {
* @memberof SearchFormControl * @memberof SearchFormControl
*/ */
public onCancel() { public onCancel() {
//todo 获取部件实列 this.state.showPopover = false;
} }
/** /**
* @description 确认保存 * @description 添加历史项
* @memberof SearchFormControl * @memberof SearchFormControl
*/ */
public onOk() { public addHistoryItem() {
//todo saveModel服务 //todo saveModel服务
this.state.showPopover = false;
}
/**
* @description 删除历史项
* @param {IParam} item
* @memberof SearchFormControl
*/
public removeHistoryItem(item: IParam) {
const index = this.state.historyItems.findIndex((_item: IParam) => {
return item.name == _item.name && item.value == _item.value;
})
this.state.historyItems.splice(index, 1);
//todo saveModel服务
}
/**
* @description 加载历史项
* @param {IParam} item
* @memberof SearchFormControl
*/
public loadHistoryItem() {
//todo loadModel服务
} }
/** /**
...@@ -58,7 +81,8 @@ export class SearchFormControl extends FormControl { ...@@ -58,7 +81,8 @@ export class SearchFormControl extends FormControl {
loadDraft, loadDraft,
onSearch: this.onSearch.bind(this), onSearch: this.onSearch.bind(this),
onCancel: this.onCancel.bind(this), onCancel: this.onCancel.bind(this),
onOk: this.onOk.bind(this), addHistoryItem: this.addHistoryItem.bind(this),
removeHistoryItem: this.removeHistoryItem.bind(this),
handleEditorEvent: this.handleEditorEvent.bind(this), handleEditorEvent: this.handleEditorEvent.bind(this),
handleComponentEvent: this.handleComponentEvent.bind(this), handleComponentEvent: this.handleComponentEvent.bind(this),
}; };
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
--app-view-layout-header-bg-color: var(--app-color-white); --app-view-layout-header-bg-color: var(--app-color-white);
--app-view-layout-body-bg-color: var(--app-color-white); --app-view-layout-body-bg-color: var(--app-color-white);
--app-view-layout-footer-bg-color: var(--app-color-white); --app-view-layout-footer-bg-color: var(--app-color-white);
--app-view-layout-header-height: 48px; --app-view-layout-header-height: auto;
--app-view-layout-header-border-bottom: var(--app-color-border); --app-view-layout-header-border-bottom: var(--app-color-border);
--app-view-caption-font-size: var(--app-font-size-lg) --app-view-caption-font-size: var(--app-font-size-lg)
} }
\ No newline at end of file
.app-quick-search { .app-view-layout--default {
display: flex; .app-view-layout__header {
align-items: center; .app-view-layout__header-content {
white-space: nowrap;
}
}
.app-quick-search {
display: flex;
align-items: center;
}
} }
\ No newline at end of file
...@@ -16,14 +16,40 @@ ...@@ -16,14 +16,40 @@
.ant-btn { .ant-btn {
margin-right: 4px; margin-right: 4px;
} }
.search-form-history {
margin-right: 12px;
width: 200px;
.ant-select-selection-item {
text-align: left;
}
}
} }
} }
//搜索表单气泡 //搜索表单气泡
.search-form-popover-button { .search-form-popover {
margin-top: 8px; .ant-popover-inner-content {
display: flex; .search-form-buttons {
justify-content: right; margin-top: 8px;
.ant-btn { display: flex;
margin-left: 4px; justify-content: right;
.ant-btn {
margin-left: 4px;
}
}
}
}
.search-form-history-option {
.ant-select-item-option-content {
&:hover {
color: var(--app-color-primary);
}
position: relative;
.anticon-close {
font-size: 12px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
} }
} }
\ No newline at end of file
...@@ -57,7 +57,7 @@ const { state, grid, handleCtrlEvent, handleToolbarEvent } = new GridView(ViewCo ...@@ -57,7 +57,7 @@ const { state, grid, handleCtrlEvent, handleToolbarEvent } = new GridView(ViewCo
<template v-slot:quickSearch> <template v-slot:quickSearch>
<div class='app-quick-search'> <div class='app-quick-search'>
<a-input /> <a-input />
<a-popover> <a-popover trigger="click" :overlayStyle="{width: '50%'}">
<template #content> <template #content>
<{{codeName}}SearchForm <{{codeName}}SearchForm
:context="state.context" :context="state.context"
...@@ -67,7 +67,7 @@ const { state, grid, handleCtrlEvent, handleToolbarEvent } = new GridView(ViewCo ...@@ -67,7 +67,7 @@ const { state, grid, handleCtrlEvent, handleToolbarEvent } = new GridView(ViewCo
@ctrlEvent="handleCtrlEvent" @ctrlEvent="handleCtrlEvent"
></{{codeName}}SearchForm> ></{{codeName}}SearchForm>
</template> </template>
<a-button trigger="click"><filter-outlined /></a-button> <a-button><filter-outlined /></a-button>
</a-popover> </a-popover>
</div> </div>
</template> </template>
......
...@@ -54,6 +54,9 @@ export const CtrlConfig = { ...@@ -54,6 +54,9 @@ export const CtrlConfig = {
controlName: '{{ctrl.name}}', controlName: '{{ctrl.name}}',
controlService: new EditFormService<ControlVO>(ControlVO, new {{pascalCase ctrl.psAppDataEntity.codeName}}Service() ), controlService: new EditFormService<ControlVO>(ControlVO, new {{pascalCase ctrl.psAppDataEntity.codeName}}Service() ),
data: new ControlVO({}), data: new ControlVO({}),
showPopover: false,
selectHistoryItem: {},
historyItems: [],
detailsModel: { detailsModel: {
{{#each ctrl.psDEFormPages as | FormPage | }} {{#each ctrl.psDEFormPages as | FormPage | }}
{{>(lookup 'FORMDETAILSMODEL') items=FormPage.psDEFormDetails}} {{>(lookup 'FORMDETAILSMODEL') items=FormPage.psDEFormDetails}}
......
{{>@macro/front-end/widgets/form-detail/include-form.hbs}} {{>@macro/front-end/widgets/form-detail/include-form.hbs}}
<script setup lang="ts"> <script setup lang="ts">
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { SaveOutlined } from '@ant-design/icons-vue'; import { SaveOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { CtrlConfig } from './{{spinalCase ctrl.codeName}}-searchForm-config'; import { CtrlConfig } from './{{spinalCase ctrl.codeName}}-searchForm-config';
import { SearchFormControl, IActionParam, IParam, ControlAction, IContext } from '@core'; import { SearchFormControl, IActionParam, IParam, ControlAction, IContext } from '@core';
...@@ -26,7 +26,7 @@ interface CtrlEmit { ...@@ -26,7 +26,7 @@ interface CtrlEmit {
const emit = defineEmits<CtrlEmit>(); const emit = defineEmits<CtrlEmit>();
// 安装功能模块,提供状态和能力方法 // 安装功能模块,提供状态和能力方法
const { state, handleEditorEvent, handleComponentEvent, onSearch, loadDraft, onOk, onCancel } = new SearchFormControl(CtrlConfig, props, emit).moduleInstall(); const { state, handleEditorEvent, handleComponentEvent, onSearch, loadDraft, addHistoryItem, onCancel, removeHistoryItem } = new SearchFormControl(CtrlConfig, props, emit).moduleInstall();
</script> </script>
<template> <template>
...@@ -55,14 +55,23 @@ const { state, handleEditorEvent, handleComponentEvent, onSearch, loadDraft, onO ...@@ -55,14 +55,23 @@ const { state, handleEditorEvent, handleComponentEvent, onSearch, loadDraft, onO
</a-col> </a-col>
<a-col class='search-form-footer'> <a-col class='search-form-footer'>
{{#if (eq ctrl.searchButtonStyle 'DEFAULT')}} {{#if (eq ctrl.searchButtonStyle 'DEFAULT')}}
<a-select
allowClear
class="search-form-history"
v-show="state.historyItems.length > 0"
v-model:Value="state.selectHistoryItem"
@change="handleChange"
>
<a-select-option class="search-form-history-option" v-for="(item,index) in state.historyItems" :key="index" :value="item.value">\{{item.name}} <close-outlined @click="() => removeHistoryItem(item)" /></a-select-option>
</a-select>
<a-button class='search-button' @click="onSearch" type="primary">搜索</a-button> <a-button class='search-button' @click="onSearch" type="primary">搜索</a-button>
<a-button class='reset-button' @click='loadDraft'>重置</a-button> <a-button class='reset-button' @click='loadDraft'>重置</a-button>
<a-popover title="存储自定义查询"> <a-popover title="存储自定义查询" v-model:visible='state.showPopover' overlayClassName="search-form-popover">
<template #content> <template #content>
<a-input /> <a-input />
<div class="search-form-popover-button"> <div class="search-form-buttons">
<a-button @click="onCancel">取消</a-button> <a-button @click="onCancel">取消</a-button>
<a-button @click="onOk" type="primary">保存</a-button> <a-button @click="addHistoryItem" type="primary">保存</a-button>
</div> </div>
</template> </template>
<a-button><save-outlined /></a-button> <a-button><save-outlined /></a-button>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册