qimall/backend/modules/mall/views/goods/goods-description-template/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-list-page');
ComponentHelper::loadComponentView('com-list-table');
?>

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table ref="table" :api="api" :search-list="searchList">
        <el-table-column label="ID" align="center" prop="id"></el-table-column>
        <el-table-column label="前端字段显示" align="center" prop="frontend_name"></el-table-column>
        <el-table-column label="模板名称" align="center" prop="name"></el-table-column>
        <el-table-column label="商品使用数" align="center" prop="use_num"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="text" @click="toEdit(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        <template slot="header-left">
            <el-button size="mini" type="primary" @click="toEdit(0)">添加模板</el-button>
        </template>
    </com-list-table>
</com-list-page>

<script>
    const application = new Vue({
        el: '#application',
        data: {
            api: 'mall/goods/description-template',
            crumbs: [
                {
                    title: '商品说明',
                }
            ]
        },
        mounted() {
        },
        computed: {
            searchList() {
                return [
                    {
                        label: '模板名称',
                        type: 'text',
                        key: 'name',
                        placeholder: '请输入模板名称',
                        clearable: true,
                    },
                ]
            }
        },
        methods: {
            toEdit(id = 0) {
                this.$navigate({
                    r: 'mall/goods/edit-description-template',
                    id: id
                })
            },
            del(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'mall/goods/del-description-template',
                        },
                        data: {
                            id: id,
                        },
                        method: 'POST'
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$refs.table.getList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    })
                })
            }
        }
    })
</script>