提交 40caf655 编写于 作者: RedPig97's avatar RedPig97

update:添加表格视图布局组件

上级 8ed46fb9
...@@ -140,6 +140,7 @@ import ExtendActionTimeline from './components/extend-action-timeline/extend-act ...@@ -140,6 +140,7 @@ import ExtendActionTimeline from './components/extend-action-timeline/extend-act
// 布局组件 // 布局组件
import AppIndexViewLayoutLeft from './layout/index-view-layout-left/index-view-layout-left.vue'; import AppIndexViewLayoutLeft from './layout/index-view-layout-left/index-view-layout-left.vue';
import AppIndexViewLayoutTop from './layout/index-view-layout-top/index-view-layout-top.vue'; import AppIndexViewLayoutTop from './layout/index-view-layout-top/index-view-layout-top.vue';
import AppGridViewLayout from './layout/grid-view-layout/grid-view-layout.vue';
// 全局挂载UI实体服务注册中心 // 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister; window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载实体权限服务注册中心 // 全局挂载实体权限服务注册中心
...@@ -168,6 +169,7 @@ export const AppComponents = { ...@@ -168,6 +169,7 @@ export const AppComponents = {
v.prototype.$uiActionTool = UIActionTool; v.prototype.$uiActionTool = UIActionTool;
v.component('app-index-view-layout-top',AppIndexViewLayoutTop); v.component('app-index-view-layout-top',AppIndexViewLayoutTop);
v.component('app-index-view-layout-left',AppIndexViewLayoutLeft); v.component('app-index-view-layout-left',AppIndexViewLayoutLeft);
v.component('app-grid-view-layout',AppGridViewLayout);
v.component('app-department-personnel',AppDepartmentPersonnel); v.component('app-department-personnel',AppDepartmentPersonnel);
v.component('app-panel-button',AppPanelButton); v.component('app-panel-button',AppPanelButton);
v.component('app-panel-field',AppPanelField); v.component('app-panel-field',AppPanelField);
......
.degridview {
// height: 100%;
background-color: transparent;
box-shadow: none;
.grid-header-content {
display: flex;
flex-direction: column;
padding: 16px 4px 20px 7px;
gap: 10px;
background: var(--app-color-white);
box-sizing: border-box;
border: 1px solid var(--app-color-gray-250);
.quick-search-input {
width: 100%;
height: 34px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 4px 10px;
background: var(--app-color-white);
box-sizing: border-box;
border: 1px solid var(--app-color-gray-250);;
z-index: 0;
}
}
.grid-header-bottom {
display: flex;
justify-content: flex-end;
height: 74px;
background-color: transparent;
>.ivu-tooltip .ivu-btn {
width: 110px;
height: 34px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 20px;
background: var(--app-color-white);
border: 1px solid var(--app-color-blue);
border-radius: 0;
z-index: 0;
}
}
.grid-content {
}
}
\ No newline at end of file
<template>
<layout class="view-container degridview">
<header class="grid-header">
<div class="grid-header-top">
<slot name="headerTop" />
</div>
<div class="grid-header-content">
<slot name="headerContent" />
</div>
<div class="grid-header-bottom">
<slot name="headerBottom" />
</div>
</header>
<content class="grid-content content-container">
<slot />
</content>
<footer class="grid-footer">
<slot name="footer" />
</footer>
</layout>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
@Component({})
export default class AppGridViewLayout extends Vue {
}
</script>
<style lang="scss">
@import "./grid-view-layout.scss";
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册