mashangyoujiu/Application/Retail/View/MemberAnalyze/vip_label.html

<!--[1.7.90]-->
<div id="vip_label" v-cloak>
    <el-form :inline="true" :model="searchForm" size="small">
        <el-form-item>
            <el-input v-model="searchForm.name" clearable placeholder="请输入标签名称"></el-input>
        </el-form-item>
        <el-form-item>
            <date-picker-range :date-time.sync="searchForm.add_time"></date-picker-range>

        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="addLabel">添加标签</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" align="center" width="50" align="center">
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="标签名称" align="center">
            </el-table-column>
            <el-table-column prop="vip_num" label="会员数" align="center">
            </el-table-column>
            <el-table-column prop="created_at" label="添加时间" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="modify(scope.row)">编辑</el-button>
                    <el-button type="text" size="mini" @click="deleteLabel(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination @current-change="CurrentChange" :current-page="currentPage" :page-sizes="[10]"
                   :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 添加弹出 -->
    <el-dialog title="添加标签" :modal-append-to-body="false" :visible.sync="addDialog" width="40%">
        <el-form :inline="true" :model="addForm" class="demo-form-inline">
            <el-form-item label="标签名称">
                <el-input v-model="addForm.info" size="small" maxlength="10" style="width: 300px;">
                </el-input>
                <p style="color: red;font-size: 12px;" v-if="showRed1">该标签已存在</p>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="addOK" size="small">确 定</el-button>
                        </span>
    </el-dialog>
    <!-- 编辑弹出 -->
    <el-dialog title="编辑标签" :modal-append-to-body="false" :visible.sync="modifyDialog" width="40%">
        <el-form :inline="true" :model="modifyForm" class="demo-form-inline">
            <el-form-item label="标签名称">
                <el-input v-model="modifyForm.name" size="small" clearable maxlength="10" style="width: 300px;">
                </el-input>
                <p style="color: red;font-size: 12px;" v-if="showRed2">该标签已存在</p>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="editVipLabel" size="small">确 定</el-button>
                        </span>
    </el-dialog>
</div>
<script type="text/javaScript">
    var vip_label = new Vue({
        el: "#vip_label",
        data: function () {
            return {
                searchForm: {
                    name: '',
                    add_time:'',
                },
                tableData: [],
                addForm: {},
                modifyForm: {
                    name: '',
                    id: 0,
                },
                currentPage: 1,
                total: 0,
                pageSize: 10,
                addDialog: false,
                modifyDialog: false,
                showRed1: false, //显示文字
                showRed2: false,
            }
        },
        created() {
            this.getVipLabel()
        },
        methods: {
            getVipLabel() {
                $.ajax({
                    type: 'post',
                    url: '/index.php/Retail/VipLabel/getVipLabel',
                    data: {
                        ...this.searchForm,
                        page: this.currentPage,
                        pageSize: this.pageSize
                    },
                    success: res => {
                        if (res.status == 1) {
                            this.tableData = res.data.list;
                            this.total = res.data.total;
                        } else {
                            this.tableData = [];
                            this.total = 0;
                        }
                    }
                })
            },
            editVipLabel() {
                $.ajax({
                    type: 'post',
                    url: '/index.php/Retail/VipLabel/editVipLabel',
                    data: {
                        label_id: this.modifyForm.id,
                        name: this.modifyForm.name
                    },
                    success: res => {
                        if (res.status == 1) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            this.modifyDialog = false;
                            this.getVipLabel();
                            this.showRed2 = false;
                        } else {
                            this.showRed2 = true;
                        }
                    }
                })
            },
            modify(item) {
                this.showRed2 = false;
                this.modifyForm = JSON.parse(JSON.stringify(item));
                this.modifyDialog = true;
            },
            onSubmit() {
                this.currentPage = 1;
                this.getVipLabel();
            },
            addLabel() {
                this.showRed1 = false;
                this.addDialog = true;
            },
            addOK() {
                $.ajax({
                    type: 'post',
                    url: '/index.php/Retail/VipLabel/addVipLabel',
                    data: {
                        name: this.addForm.info
                    },
                    success: res => {
                        if (res.status == 1) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.addForm = {};
                            this.addDialog = false;
                            this.getVipLabel()
                        } else {
                            this.showRed1 = true;
                        }
                    }
                })
            },
            deleteLabel(id) {
                this.$confirm('是否删除该标签', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        type: 'post',
                        url: '/index.php/Retail/VipLabel/delVipLabel',
                        data: {
                            label_id: id
                        },
                        success: res => {
                            if (res.status == 1) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.getVipLabel()
                                this.showRed1 = false;
                            } else {
                                this.showRed1 = true
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            CurrentChange(val) {
                this.currentPage = val;
                this.getVipLabel()
            }
        },
    })
</script>