DataOps-platform/frontend/src/components/Common/editPage.vue

<template>
    <div class="body d-flex flex-column">
        <v-banner single-line sticky color="#FFF" >
            <div class="d-flex align-center">
              <v-btn text @click="goBack">
                <v-icon>mdi-chevron-left</v-icon>
                返回
              </v-btn>
              {{ title }}
            </div>
            <template v-slot:actions>
                <v-btn class="ma-2 half-button" rounded @click="goBack">取消</v-btn>
                <v-btn color="primary" rounded class="half-button" @click="submit">保存</v-btn>
            </template>
        </v-banner>
        <div class="main">
            <feature-slide class="slide" :width="sideWidth" :items="items" @refresh="$emit('refresh-roles')" />
            <div class="content" :style="`padding-left: ${sideWidth}px`">
              <slot name="body" :data="items"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import FeatureSlide from './featureSlide.vue'

export default {
  components: { FeatureSlide },
  props: {
    roles: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      sideWidth: 300,
      items: [],
      component: []
    }
  },
  watch: {
    roles: {
      handler (val) {
        this.items = cloneDeep(this.roles)
      },
      immediate: true
    }
  },
  methods: {
    goBack () {
      this.$confirm('是否离开当前页面', '离开后不保留编辑内容')
        .then(() => {
          this.$router.go(-1)
        })
        .catch(e => {})
    },
    submit () {
      this.$emit('handleSubmit', this.items)
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
    height: 100%;
}
.main {
    flex: 1;
    .slide {
        box-sizing: border-box;
        padding: 20px;
        height: 100%;
        position: fixed;
        top: 61px;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }
    .content {
        &_box {
            padding: 30px;
        }
    }
}
</style>