qimall/addons/Printer/backend/views/default/template.php

<style>
    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0!important;
    }

    .button-item {
        padding: 9px 25px;
    }
    .app-share {
        padding-top: 12px;
        border-top: 1px solid #e2e2e2;
        margin-top: -20px;
    }

    .app-share .app-share-bg {
        position: relative;
        width: 310px;
        height: 360px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center
    }

    .app-share .app-share-bg .title {
        width: 160px;
        height: 29px;
        line-height: 1;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .app-share .app-share-bg .pic-image {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        width: 160px;
        height: 130px;
    }
    .goods-list {
        flex-wrap: wrap;
        margin-top: 10px;
        /* cursor: move; */
    }
    .goods-item,
    .goods-add {
        width: 50px;
        height: 50px;
        position: relative;
        border: 1px solid #e2e2e2;
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .goods-add .el-button {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .goods-delete {
        position: absolute;
        left: calc(100% - 13px);
        top: -13px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        padding: 0 0;
        visibility: hidden;
        z-index: 1;
    }
    .goods-delete .el-icon-close {
        position: absolute;
        top: 6px;
        left: 6px;
    }
    .goods-item:hover .goods-delete {
        visibility: visible;
    }
    .goods-pic {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
        background-repeat: no-repeat;
    }
    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0;
    }
    .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: 0;
    }
    .input-item .el-input-group__append .el-button {
        margin: 0;
    }
    .customize-share-title {
        position: relative;
        margin-top: 10px;
    }
    .customize-share-title .del-btn {
        position: absolute;
        top: -10px;
        left: 70px;
    }
</style>

<div id="app">
<el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>模板列表</span>
        </div>
        <div >
            <el-button style="float: left; margin: 20px" type="primary" size="small"
            @click="$navigate({r: 'printer/default/add-template'})">添加模板
            </el-button>
        </div>
        <div class="table-body">
            <div id="qrcode-info" style="position: fixed;top: 10000000000px;">
                <!-- 二维码 -->
                <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
            </div>
            <el-table v-loading="loading" border :data="list" style="width: 100%;margin-bottom: 15px">
                <el-table-column prop="name" label="模板名称"></el-table-column>
                <el-table-column prop="ticket_nam" label="小票名称"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status==1">启用</div>
                        <div v-if="scope.row.status==0">禁用</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('edit', scope.row.id)" size="small" circle>编辑</el-button>
                        <el-button v-if="scope.row.status==1" type="text" @click="send('set_status',scope.row)" size="small" circle>禁用</el-button>
                        <el-button v-if="scope.row.status==0" type="text" @click="send('set_status',scope.row)" size="small" circle>启用</el-button>
                        <el-button type="text" @click="send('delete_template', scope.row.id)" size="small" circle>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div flex="box:last cross:center">
                <div></div>
                <div>
                <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize"
                                   style="display: inline-block;float: right;" background @current-change="handle('pageChange', $event)"
                                   layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            page: 1,
            pageCount: 0,
            list: [],
            type: [],
            loading: false,
            pagination: null,
        },
        mounted() {
            this.send('get_list');
        },
        methods:{
            send(type, data=null){
                let self = this;
                switch(type){
                    case 'get_list':
                        let params = {
                            r: 'printer/default/template',
                            page: self.page
                        };
                        request({
                            params: params,
                            method: 'get',
                        }).then(e=>{
                            self.loading = false;
                            if (e.data.code == 0){
                                this.list=e.data.data.list;
                                this.pagination = e.data.data.pagination;
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e=>{
                            self.loading = false;
                            self.$message.error(e.data.msg);
                        })
                        break;
                    case 'set_status':
                        if(data.status==1){
                            data.status=0;
                        }else{
                            data.status=1;
                        }
                        request({
                            params: {
                                r: 'printer/default/set-template-status'
                            },
                            method: 'post',
                            data: {
                                id: data.id,status:data.status
                            }
                        }).then(e => {
                            if (e.data.code === 0) {
                                    this.$message.success(e.data.msg);
                                } else {
                                    this.$message.error(e.data.msg);
                                }
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                    case 'delete_template':
                        this.$confirm('删除这条模板信息, 是否继续?','提示',{
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(()=>{
                            request({
                                params: {
                                    r: 'printer/default/set-template-status'
                                },
                                method: 'post',
                                data: {
                                    id: data,status:-1
                                }
                            }).then(e => {
                                if (e.data.code === 0) {
                                        this.$message.success(e.data.msg);
                                        this.send('get_list');
                                    } else {
                                        this.$message.error(e.data.msg);
                                    }
                            }).catch(e=>{
                                this.loading = false;
                                this.$message.error(e.data.msg);
                            })
                        }).catch(()=>{

                        })

                        break;
                }
            },
            handle(type, param1 = null) {
                switch (type) {
                    case 'pageChange':
                        this.page = param1;
                        this.send('get_list');
                        break;
                    case 'edit':
                        let info = {r: 'printer/default/edit-template',id:param1};
                        navigateTo(info)
                }
            }
        },
    })
</script>