qimall/backend/modules/mall/views/cate/index.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-image');

?>
<?= ComponentHelper::loadComponentView('cat-list', __DIR__ . '/component') ?>
<?= ComponentHelper::loadComponentView('cat-transfer', __DIR__ . '/component') ?>
<?= ComponentHelper::loadComponentView('cat-style', __DIR__ . '/component') ?>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<style>
    .new-table-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
    }
</style>
<div id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0;min-width: 1500px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>分类列表</span>
                <div style="float: right;margin-top: -5px">
                    <el-button type="primary" @click="edit" size="small">添加分类</el-button>
                </div>
            </div>
        </div>
        <div class="new-table-body">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="商品分类" name="first">
                        <template v-if="activeName == 'first'">
                            <cat-list></cat-list>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="商品分类转移" name="second">
                        <template v-if="activeName == 'second'">
                            <cat-transfer></cat-transfer>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="分类样式" name="third">
                        <template v-if="activeName == 'third'">
                            <cat-style></cat-style>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'first',
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 编辑
            edit(id) {
                navigateTo({
                    r: 'mall/cate/edit',
                });
            },
        },
        mounted: function() {

        },
    });
</script>