qimall/addons/Store/client/views/cate/index.php

<?php

use common\helpers\ComponentHelper;

?>
<?= ComponentHelper::loadComponentView('cat-list', __DIR__ . '/component') ?>
<?= ComponentHelper::loadComponentView('cat-transfer', __DIR__ . '/component') ?>
<?= ComponentHelper::loadComponentView('cat-style', __DIR__ . '/component') ?>
<?= ComponentHelper::loadComponentView('cat-import', __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" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>分类列表</span>
                <div style="float: right;margin-top: -5px;display: flex;align-items: center;">
                    <el-button type="primary" @click="$confirm('更新导入的主商城分类数据?', '数据更新提示', {
                    confirmButtonText: '确定更新', cancelButtonText: '取消', type: 'warning'}).then(() => syncMallGoodsCate())" size="small" style="margin-right: 8px;" :loading="updateLoading">更新分类</el-button>
                    <cat-import @selected="handleCateImportSelected" :key="component_key_cat_import"><el-button size="small" type="primary">导入分类</el-button></cat-import>
                    <el-button type="primary" @click="edit" size="small" style="margin-left: 8px;">添加分类</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 :key="component_key_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-tabs>
            </template>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'first',
                component_key_cat_list: Math.random() * 100,
                component_key_cat_import: Math.random() * 100,
                updateLoading: false
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 编辑
            edit(id) {
                navigateTo({
                    r: 'store/client/cate/edit',
                });
            },
            handleCateImportSelected(val) {
                if(val.length <= 0) return;
                request({
                    method: 'post',
                    params: { r: 'store/client/cate/import-cate' },
                    data: {cates: val}
                }).then(res => {
                    if(res.data.code == 0) {
                        this.component_key_cat_list = Math.random() * 100;
                        this.component_key_cat_import = Math.random() * 100;
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            },
            syncMallGoodsCate() {
                this.updateLoading = true;
                request({
                    method: 'post',
                    params: { r: 'store/client/cate/sync-cate' }
                }).then(res => {
                    this.updateLoading = false;
                    if(res.data.code == 0) {
                        this.component_key_cat_list = Math.random() * 100;
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            }
        },
        mounted: function() {

        },
    });
</script>