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

<?php

?>
<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        /* width: 350px; */
        /* margin: 0 0 20px; */
        margin-right: 10px;
    }

    .input-item .el-input-group__prepend {
        background-color: #fff;
    }

    .input-item .el-input__inner {
        /* border-right: 0; */
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 15px;
    }

    .select {
        float: left;
        width: 100px;
        margin-right: 10px;
    }

    .el-table .cell .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .open-img .el-dialog {
        margin-top: 0 !important;
    }

    .click-img {
        width: 100%;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .label-text {
        height: 32px;
        margin-right: 10px;
    }

    /*弹出框表格样式 start*/
    .el-dialog__body {
        padding: 5px 20px;
    }

    .card-box {
        padding: 10px;
        border: 1px solid #E3E3E3;
    }

    .table-box {
        border-top: 1px solid #E3E3E3;
        border-left: 1px solid #E3E3E3;
    }

    .table-item {
        border-bottom: 1px solid #E3E3E3;
        border-right: 1px solid #E3E3E3;
        height: 50px;
        padding-left: 5px;
    }

    .table-item .el-radio__label {
        display: none;
    }

    .select-type-box {
        padding: 25px 0;
        height: 40px;
    }

    /*弹出框表格样式 end*/

    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div flex="cross:center box:first">
                <div>广告位模版用于“商品详情页的推荐商品、商详图下房的轮播图和猜你喜欢”模块，可配置商品推荐或广告图展示。</div>
                <div flex="dir:right">
                    <div>
                        <el-button type="primary" size="small" @click="$navigate({r:'mall/goods-template/edit'})">添加广告模板
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table table-body">
            <div flex="dir:left">

                <div class="input-item">
                    <el-input @keyup.enter.native="change" size="small" placeholder="请输入模版编号" v-model="id" clearable @clear="search">
                    </el-input>
                </div>

                <div class="input-item">
                    <el-input @keyup.enter.native="change" size="small" placeholder="请输入模版名称" v-model="name" clearable @clear="search">
                    </el-input>
                </div>

                <div flex="input-item">
                    <div class="label-text" flex="cross:center">状态</div>
                    <el-select size="small" v-model="status" class="select" @change="change">
                        <el-option key="" label="请选择" value=""></el-option>
                        <el-option key="1" label="启用" value="1"></el-option>
                        <el-option key="0" label="禁用" value="0"></el-option>
                    </el-select>
                </div>
            </div>
            <el-table :data="form" stripe style="width: 100%" v-loading="listLoading" @selection-change="handleSelectionChange">

                <el-table-column prop="id" label="模版编号" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="模版名称" align="center">
                </el-table-column>
                <el-table-column prop="is_default" align="center" label="是否为默认模版" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_default == 0">
                            否
                        </div>
                        <div v-else>
                            是
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" prop="created_at" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" align="center" label="状态" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            禁用
                        </div>
                        <div v-else>
                            启用
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="$navigate({r: 'mall/goods-template/edit', id:scope.row.id})" circle>
                            编辑
                        </el-button>
                        <el-button size="small" type="text" @click="switchRow(scope.row)">
                            <span v-if="scope.row.status == 1">禁用</span>
                            <span v-else>启用</span>
                        </el-button>
                        <el-button size="small" type="text" @click="copy(scope.row)">
                            复制
                        </el-button>
                        <el-button size="small" type="text" @click="destroy(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: [],
                pageCount: 0,
                pageCount: 0,
                listLoading: false,
                page: 1,
                btnLoading: false,
                dialogImg: false,
                multipleSelection: [],
                dialogVisible: false,
                activeName: '1',
                dialogPageCount: 0,
                dialogPage: 1,
                dialogList: [],
                template: null,
                templateVisible: false,
                status: '',
                id: '',
                name: '',
            };
        },
        methods: {
            addTemplateVisible() {
                this.templateVisible = true;
            },
            pagination(currentPage) {
                this.page = currentPage;
                this.search();
            },
            change() {
                this.page = 1;
                this.search();
            },

            search() {
                this.listLoading = true;
                request({
                    params: {
                        r: 'mall/goods-template/index',
                        page: this.page,
                        id: this.id,
                        name: this.name,
                        status: this.status,
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.form = e.data.data.list;
                        this.pageCount = e.data.data.page_count;

                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
            },

            //删除
            destroy: function(column) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    request({
                        params: {
                            r: 'mall/goods-template/delete'
                        },
                        data: {
                            id: column.id
                        },
                        method: 'post'
                    }).then(e => {
                        location.reload();
                        this.listLoading = false;
                    }).catch(e => {
                        this.listLoading = false;
                    });
                });
            },
            switchRow: function(row) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods-template/switch',
                    },
                    method: 'post',
                    data: {
                        id: row.id
                    }
                }).then(e => {
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    location.reload();
                });
            },
            copy: function(row) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods-template/copy-template',
                    },
                    method: 'post',
                    data: {
                        id: row.id
                    }
                }).then(e => {
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    location.reload();
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            radioChange(row) {
                this.templateId = row.id;
            },
            openDialog(template) {
                this.template = template;
            },
            dialogClose() {
                this.templateVisible = false;
            },
        },
        mounted: function() {
            this.search();
        }
    });
</script>