first commit

2025-07-14 08:45:13 +08:00
commit 3e86198a82
2710 changed files with 610330 additions and 0 deletions
@@ -0,0 +1,179 @@
+<template>
+    <div class="guava-main-content">
+        <div v-show="v === 'index'" key="index" class="transition-item">
+            <slot></slot>
+        </div>
+
+        <el-card v-if="v === 'edit'" key="edit" shadow="never" class="animated-card">
+            <template #header>
+                <el-row type="flex">
+                    <el-col :span="12">
+                        <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
+                    </el-col>
+                    <el-col :span="12" style="display: flex; justify-content: flex-end">
+                        <slot name="edit_func"></slot>
+                    </el-col>
+                </el-row>
+            </template>
+            <div :class="{ card_scroll: edit_scroll }">
+                <slot name="edit"></slot>
+            </div>
+        </el-card>
+
+        <el-card v-if="v === 'view'" key="view" shadow="never" class="animated-card">
+            <template #header>
+                <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
+            </template>
+            <div :class="{ card_scroll: !view_page_scroll }">
+                <slot name="view"></slot>
+            </div>
+        </el-card>
+
+        <el-card v-if="v === 'approval'" key="approval" shadow="never" class="animated-card">
+            <template #header>
+                <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v = 'index'">返回</el-button>
+            </template>
+            <div :class="{ card_scroll: approval_scroll }">
+                <slot name="approval"></slot>
+            </div>
+        </el-card>
+
+        <el-card v-if="v === 'public'" key="public" shadow="never" class="animated-card">
+            <div slot="header" class="clearfix">
+                <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回</el-button>
+            </div>
+            <div :class="{ card_scroll: public_card_scroll }">
+                <slot name="public"></slot>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+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: {
+        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>
+.guava-main-content {
+    min-height: 100%;
+}
+
+.animated-card {
+    animation-name: cardAnimation;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+    margin-top: 0 !important;
+}
+
+@keyframes cardAnimation {
+    from {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.card_scroll {
+    max-height: calc(100vh - 56px - 40px - 30px - 50px - 34px);
+    overflow-y: auto;
+    position: relative;
+}
+
+.card_scroll {
+    overflow: scroll;
+}
+
+.card_scroll::-webkit-scrollbar {
+    display: none;
+}
+
+.card_scroll::-webkit-scrollbar-vertical {
+    display: none;
+}
+
+.card_scroll::-webkit-scrollbar-horizontal {
+    display: none;
+}
+</style>