xg-vue/src/views/manage/setting/page/index.vue

<template>
    <el-container v-loading="pageLoad">
        <el-main>
            <el-row :gutter="10">
                <el-col :span="6" v-for="(item,index) in dataList" :key="index">
                    <el-card shadow="never">
                        <div class="card-body">
                            <div class="card-name">{{ item.desc }}</div>
                            <div class="card-edit" @click="editPage(item)">
                                <el-button size="small" text>编辑</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="never">
                        <div class="card-body">
                            <div class="card-add" @click="addPage">
                                <el-icon size="36"><el-icon-plus /></el-icon>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
    <formBody ref="formBody" @success="handleSuccess"></formBody>
</template>

<script>
import formBody from './form'
export default {
    components: {
        formBody
    },
    data() {
        return {
            pageLoad:false,
            dataList:[]
        }
    },
    mounted(){
        this.getPage()
    },
    methods: {
        handleSuccess(){

        },
        editPage(data){
            this.$nextTick(() => {
                this.$refs.formBody.open("edit").setData(data);
            })
        },
        addPage(){
            this.$nextTick(() => {
                this.$refs.formBody.open("add")
            })
        },
        async getPage(){
            this.pageLoad = true;
            var resp = await this.$API.page.list.get();
            this.pageLoad = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.dataList = resp.data;
        }
    }
}
</script>

<style>
.card-body{height: 120px;}
.card-name{font-size: 18px;font-weight: bold;min-height: 100px;}
.card-add{display: flex;align-items: center;justify-content: center;flex: 1;height: 100%;}
</style>