123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <template>
- <div class="page-layout-info manager-page-padding" v-loading="loading" :class="{'page-layout-info--border': border}" :style="{ width }">
- <div class="page-layout-info__header" v-if="!cHideHeader">
- <div >
- <slot name="back">
- <cip-button-text @click="backPrePage" icon="el-icon-arrow-left">返回</cip-button-text>
- </slot>
- <span class="page-layout-info__title" v-if="title">
- {{title}}
- </span>
- </div>
- <div>
- <slot name="handle"></slot>
- </div>
- </div>
- <div class="page-layout-info__main">
- <slot></slot>
- </div>
- </div>
- </template>
- <script>
- import { computed } from 'vue'
- import { useRouter } from 'vue-router'
- import { useMain } from '@cip/hooks/use-main'
- import { ElLoading } from 'element-plus'
- import { useCipConfig } from '@cip/components/hooks/use-cip-config'
- import CipButtonText from "@cip/components/cip-button-text";
- export default {
- name: 'PageLayoutInfo',
- components: { CipButtonText },
- props: {
- border: { // handle-bar 是否有边框
- type: Boolean,
- default: true
- },
- title: { // 页面title
- type: String
- },
- width: {
- type: String, // eg: 1px
- default: '100%'
- },
- loading: Boolean,
- hideHeader: {}
- },
- directives: {
- loading: ElLoading.directive
- },
- emits: ['back'],
- setup (props, { emit }) {
- const { closeTab } = useMain()
- const cipConfig = useCipConfig()
- const cHideHeader = computed(() => {
- if (props.hideHeader !== undefined) {
- return props.hideHeader
- } else {
- return cipConfig.layout.hideHeader === true
- }
- })
- const router = useRouter()
- const backPrePage = () => {
- // TODO: 可进一步处理
- router.go(-1)
- closeTab() // 返回时会关闭tab
- }
- return {
- cHideHeader,
- backPrePage
- }
- }
- }
- </script>
- <style lang="less">
- .page-layout-info{
- //&::-webkit-scrollbar { width: 0 !important }
- box-sizing: border-box;
- margin: 0 auto;
- &.page-layout-info--border{
- .page-layout-info__header{
- box-sizing: border-box;
- border: 1px solid #ddd;
- }
- }
- height: 100%;
- @handleBarHeight: 40px;
- background: @background;
- &__header{
- height: @handleBarHeight;
- background: #fff;
- margin-bottom: 8px;
- padding: 0 12px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- &__title{
- font-weight: bold;
- &:before{
- content: " ";
- margin: 8px;
- border-left: 2px solid #bbb;
- line-height: 0.8em;
- }
- }
- &__main{
- height: calc(100% - @handleBarHeight - 8px);
- }
- }
- </style>
|