qimall/addons/ScoreMall/backend/views/default/classification.php

<style>
    .input-item {
        width: 150px;
        margin: 0 0 20px;
        display: inline-block;
    }
</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">
            <span>分类</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="handle('add')">添加分类</el-button>
            </div>
        </div>
        <div class="table-body">
            <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column label="编号" prop="id" align="center"></el-table-column>
                <el-table-column label="名称" prop="name" align="center"></el-table-column>
                <el-table-column label="状态" prop="status" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0" type="warning" >已禁用</el-tag>
                        <el-tag v-if="scope.row.status == 1" type="success" >启用中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="created_at" align="center"></el-table-column>
                <el-table-column label="操作" width="300px" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 0" type="text" size="small" @click="send('updateStatus', scope)">启用</el-button>
                        <el-button v-if="scope.row.status == 1" type="text" size="small" @click="send('updateStatus', scope)">禁用</el-button>
                        <el-button type="text" size="small" @click="send('delete', scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
    <!--弹出添加分类-->
    <el-dialog title="添加分类" :visible.sync="isAdd" width="35%">
        <el-form v-loading="loading" :model="addData" label-width="10rem" label-position="right">
            <el-form-item label="分类名称" prop="is_attr">
            <div class="input-item">
                <el-input width="20%" size="small" placeholder="请输入分类名称" v-model="addData.name"></el-input>
            </div>
            </el-form-item>
            <el-form-item label="是否启用" prop="status">
                <div class="input-item">
                    <el-switch v-if="!loading"
                        v-if="addData"
                        v-model="addData.status"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </div>
            </el-form-item>
            <el-form-item style="margin-bottom: 0">
                <el-button type="primary" size="small" style="float: right;width: 80px;margin-right: 20px;" :loading="loading" @click="send('addData')">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--弹出添加分类-->
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            list: [],
            loading: false,
            isAdd: false,
            addData: {
                name: '',
                status: ''
            },
        },
        mounted() {
            this.send('getData');
        },
        methods: {
            send (type, param1 = null) {
                switch (type) {
                    case 'getData':
                        this.loading = true;
                        request({
                            params: {
                                r : 'score-mall/default/classification'
                            },
                            method: 'get'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.list = e.data.data;
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                            self.$message.error(e.data.msg);
                        });
                        break;
                    //提交新增
                    case 'addData':
                        this.loading = true;
                        this.isAdd = false;
                        let addData = Object.assign({type : 'add'}, this.addData);
                        request({
                            params: {
                                r : 'score-mall/default/classification'
                            },
                            data: addData,
                            method: 'post'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                this.list.push(e.data.data);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        });
                        break;
                    //变更状态
                    case 'updateStatus':
                        this.loading = true;
                        let updateStatus = Object.assign({type : 'updateStatus'}, param1.row);
                        request({
                            params: {
                                r : 'score-mall/default/classification'
                            },
                            data: updateStatus,
                            method: 'post'
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                this.list[param1.$index]['status'] = param1.row.status == 1 ? 0: 1;
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        });
                        break;
                    case 'delete':
                        this.$confirm('删除该分类, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.loading = true;
                            let deleteCat = Object.assign({type : 'delete'}, param1.row);
                            request({
                                params: {
                                    r : 'score-mall/default/classification'
                                },
                                data: deleteCat,
                                method: 'post'
                            }).then(e=>{
                                this.loading = false;
                                if (e.data.code == 0) {
                                    this.$message.success(e.data.msg);
                                    this.list.splice(param1.$index, 1);
                                } else {
                                    this.$message.error(e.data.msg);
                                }
                            }).catch(e => {
                                this.loading = false;
                                this.$message.error(e.data.msg);
                            });
                        }).catch(() => {
                            this.$message.info('已取消删除')
                        });
                        break;
                }
            },
            handle(type, param1 = null, param2 = null) {
                switch (type) {
                    //变更状态
                    case 'updateStatus':
                        this.list.splice(param1.$index, 1);

                        break;
                    //添加分类弹窗
                    case 'add':
                        this.isAdd = true;
                        break;
                }
            }
        }
    })
</script>