提交 378884bc 编写于 作者: Mosher's avatar Mosher

update:面板更新

上级 be500336
......@@ -14,5 +14,11 @@
{{/if}}
:showCaption="{{item.showCaption}}"
@onPanelItemEvents="onPanelItemEvents">
<AppIconText {{#if item.labelPSSysCss}}class="{{item.labelPSSysCss.cssName}}" {{/if}}{{#if item.psSysImage}}{{#if item.psSysImage.cssClass}}iconClass="{{item.psSysImage.cssClass}}" {{/if}}{{#if item.psSysImage.imagePath}}imgPath="{{item.psSysImage.imagePath}}" {{/if}}{{/if}}text="{{item.caption}}"/>
{{#if item.psSysImage.cssClass}}
<i class="{{item.psSysImage.cssClass}}"/>
{{/if}}
{{#if item.psSysImage.imagePath}}
<img src="{{item.psSysImage.imagePath}}"/>
{{/if}}
<span class="text{{#if item.labelPSSysCss}} {{item.labelPSSysCss.cssName}}{{/if}}">{{item.caption}}</span>
</AppPanelButton>
......@@ -8,12 +8,6 @@
:visible="state.detailsModel.{{item.name}}.visible"
{{#if (or item.width item.height)}}
style="{{#if item.width}}width: {{item.width}}px;{{/if}}{{#if item.height}}height: {{item.height}}px;{{/if}}"
{{/if}}
{{#if item.psSysImage.cssClass}}
iconClass="{{item.psSysImage.cssClass}}"
{{/if}}
{{#if item.psSysImage.imagePath}}
imgPath="{{item.psSysImage.imagePath}}"
{{/if}}
{{#if item.labelPSSysCss}}
labelCssName="{{item.labelPSSysCss.cssName}}"
......@@ -21,10 +15,14 @@
{{#if item.labelPos}}
labelPos="{{item.labelPos}}"
{{/if}}
:showCaption="{{item.showCaption}}">
{{!-- 目前面板属性showCaption一直为false,因此取Caption是否有值作为展示标题模型 --}}
{{!-- :showCaption="{{item.showCaption}}"> --}}
:showCaption="{{#if item.caption}}true{{else}}false{{/if}}">
{{#if item.psEditor}}
<div class="panel-editor-container" style="{{#if item.psEditor.editorWidth}}width: {{item.psEditor.editorWidth}}px;{{/if}}{{#if item.psEditor.editorHeight}}height: {{item.psEditor.editorHeight}}px{{/if}}">
{{> @macro/front-end/editors/include-editor.hbs type=item.psEditor.editorType item=item ctrlType="panel"}}
</div>
<template #editor>
<div class="panel-editor-container" style="{{#if item.psEditor.editorWidth}}width: {{item.psEditor.editorWidth}}px;{{/if}}{{#if item.psEditor.editorHeight}}height: {{item.psEditor.editorHeight}}px{{/if}}">
{{> @macro/front-end/editors/include-editor.hbs type=item.psEditor.editorType item=item ctrlType="panel"}}
</div>
</template>
{{/if}}
</AppPanelField>
......@@ -61,7 +61,7 @@ const hasCounter = (item: IParam): boolean => {
<style lang="scss">
.app-icon-text {
display: flex !important;
display: flex;
align-items: center;
}
.ant-menu-submenu-popup {
......
......@@ -30,9 +30,9 @@ const click = (event: MouseEvent) => {
</script>
<template>
<a-col v-show="visible">
<a-button type="primary" :disabled="disabled" @click.stop="click">
<AppCol :visible="visible" :layoutOpts="layoutOpts">
<a-button type="primary" :disabled="disabled" @click.stop="click" block>
<slot></slot>
</a-button>
</a-col>
</AppCol>
</template>
\ No newline at end of file
......@@ -11,32 +11,14 @@ interface IProps {
const props = withDefaults(defineProps<IProps>(), {
showCaption: true
});
const layout = LayoutTool.useLayout(toRef(props, "layoutOpts"));
const attrs = useAttrs();
const getStyle = computed(() => {
const { parentLayout, selfLayout } = props.layoutOpts;
const style = {};
if (parentLayout === 'FLEX') {
Object.assign(style, layout.value.colStyle);
}
if (selfLayout === 'FLEX') {
Object.assign(style, layout.value.rowStyle);
}
if (attrs.style) {
Object.assign(style, attrs.style);
}
return style;
});
</script>
<template>
<a-col v-show="visible" :style="getStyle">
<AppRow :layoutOpts="layoutOpts" v-show="visible">
<div v-if="showCaption" class="panel-container-header">
<span class="text">{{caption}}</span>
</div>
<slot></slot>
</a-col>
</AppRow>
</template>
\ No newline at end of file
......@@ -18,7 +18,10 @@ const props = withDefaults(defineProps<IProps>(), {
<AppCol :visible="visible" noRoot :layoutOpts="layoutOpts">
<template #default="{ slotClass, slotStyle }">
<div :class="slotClass" :style="slotStyle">
<slot></slot>
<div class="panel-field__label">
<span v-if="showCaption" :class="['text', labelCssName]">{{caption}}</span>
</div>
<slot name="editor"></slot>
</div>
</template>
</AppCol>
......
<script setup lang="ts">
import { ILayoutOpts } from "@core";
import { LayoutTool } from "@core/modules/common/layout-tool";
import { ILayoutOpts, LayoutTool } from "@core";
interface AppRowProps {
layoutOpts: ILayoutOpts;
......@@ -25,7 +24,7 @@ const layout = LayoutTool.useLayout(toRef(props, "layoutOpts"));
</template>
<style lang="scss">
.app-row{
.app-row {
width: 100%;
}
</style>
\ No newline at end of file
......@@ -17,6 +17,17 @@ export class PanelControl extends MainControl {
*/
public declare state: PanelControlState;
/**
* 获取当前激活数据
*
* @return {*}
* @memberof PanelControl
*/
public getData() {
const { data } = toRefs(this.state);
return [data.value];
}
/**
* @description 处理导航数据模块
* @protected
......
.app-panel {
// 面板属性样式配置
.app-panel-field {
display: flex;
width: 100%;
}
.panel-field__label {
height: 32px;
line-height: 32px;
padding-right: 12px;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
}
.panel-editor-container {
line-height: 32px;
flex-grow: 1;
}
}
\ No newline at end of file
......@@ -8,4 +8,5 @@
@use './app-portlet.scss';
@use './app-grid.scss';
@use './app-tree.scss';
@use './app-list.scss';
\ No newline at end of file
@use './app-list.scss';
@use './app-panel.scss';
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册