zhgh_whcp/target/classes/static/components/plugins/Guava.vue

<template>
  <div class="guava-main-content">
    <div v-show="v === 'index'" key="index" class="transition-item">
      <slot></slot>
    </div>

    <div v-if="v === 'edit'" key="edit" class="page-container animated-card">
      <div class="page-header">
        <div class="header-left">
          <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
        </div>
        <div class="header-right">
          <slot name="edit_func"></slot>
        </div>
      </div>
      <div class="page-content">
        <slot name="edit"></slot>
      </div>
      <div class="page-footer" v-if="$slots.edit_footer">
        <slot name="edit_footer"></slot>
      </div>
    </div>

    <div v-if="v === 'view'" key="view" class="page-container animated-card">
      <div class="page-header">
        <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
      </div>
      <div class="page-content">
        <slot name="view"></slot>
      </div>
      <div class="page-footer" v-if="$slots.view_footer">
        <slot name="view_footer"></slot>
      </div>
    </div>

    <div v-if="v === 'approval'" key="approval" class="page-container animated-card">
      <div class="page-header">
        <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
      </div>
      <div class="page-content">
        <slot name="approval"></slot>
      </div>
      <div class="page-footer" v-if="$slots.approval_footer">
        <slot name="approval_footer"></slot>
      </div>
    </div>

    <div v-if="v === 'public'" key="public" class="page-container animated-card">
      <div class="page-header">
        <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回</el-button>
      </div>
      <div class="page-content">
        <slot name="public"></slot>
      </div>
      <div class="page-footer" v-if="$slots.public_footer">
        <slot name="public_footer"></slot>
      </div>
    </div>
  </div>
</template>

<script nonce="${cspNonce!}">
module.exports = {
  props: {
    value: {
      type: String,
      default: "index"
    },
    //为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
    edit_scroll: {
      type: Boolean,
      default: false
    },
    view_scroll: {
      type: Boolean,
      default: true
    },
    approval_scroll: {
      type: Boolean,
      default: false
    },
    //view 页面是否滚动
    view_page_scroll: {
      type: Boolean,
      default: false
    },
    public_card_scroll: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      v: "index"
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.v = newVal
      },
      immediate: true
    },
    v(newValue, oldValue) {
      this.$emit("vchange", { newValue, oldValue })
      this.$emit("input", newValue)
    }
  },
  methods: {
    index(callback = () => {}) {
      this.v = "index"
      this.$nextTick(() => {
        callback()
      })
    },
    edit(callback = () => {}) {
      this.v = "edit"
      this.$nextTick(() => {
        callback()
      })
    },
    view(callback = () => {}) {
      this.v = "view"
      this.$nextTick(() => {
        callback()
      })
    },
    approval(callback = () => {}) {
      this.v = "approval"
      this.$nextTick(() => {
        callback()
      })
    },
    public(callback = () => {}) {
      this.v = "public"
      this.$nextTick(() => {
        callback()
      })
    },
    back(callback = () => {}) {
      this.v = "index"
      this.$nextTick(() => {
        callback()
      })
    }
  }
}
</script>

<style scoped>
.guava-main-content {
  /*height: 100vh;
  overflow: hidden;*/
}

.page-container {
  height: calc(100vh - 84px);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  animation-name: cardAnimation;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.page-header {
  flex-shrink: 0;
  padding: 12px 24px;
  border-bottom: 1px solid #ebeef5;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header-right button{
  /*padding: 9px 15px;
  font-size: 12px;*/
}


.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  position: relative;
}

/* 隐藏滚动条但保持滚动功能 */
.page-content::-webkit-scrollbar {
  width: 6px;
}

.page-content::-webkit-scrollbar-track {
  background: transparent;
}

.page-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

.page-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

.page-footer{
  flex-shrink: 0;
  padding: 12px 10px;
  border-top: 1px solid rgb(235, 238, 245);
  display: flex;
  justify-content: end;
  align-items: center;
}


@keyframes cardAnimation {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-card {
  animation-name: cardAnimation;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.transition-item {
  height: 100%;
}
</style>