erp/resources/frontend/src/views/brand/brand.vue

<template>
    <div class="conent">
        <!-- 新增按钮 -->
        <el-button type="primary" @click="handAdd">新增</el-button>

        <!-- 列表 -->
        <div class="table" style="margin-top: 20px">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column prop="name" label="商品品牌"> </el-table-column>
                <el-table-column prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handEdit(scope.row.id, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="handdel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页功能 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
            </el-pagination>
        </div>

        <!-- 新增品牌对话框 -->
        <el-dialog title="新增品牌" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="商品品牌" :label-width="formLabelWidth">
                    <el-input v-model="form.kindName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
            <el-form :model="form1">
                <el-form-item label="编辑品牌" :label-width="formLabelWidth1">
                    <el-input v-model="form1.kindName1"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="EditSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    Brand_goods_types,
    DelBrand_goods_types,
    AddBrandgoods_types,
    editBrand_types,
} from "../../api/rankingData";
export default {
    data() {
        return {
            id: "", //每一项的id
            tableData: [],
            multipleSelection: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            form: {
                kindName: "", //种类名
            },
            form1: {
                kindName1: "", //种类名
            },
            formLabelWidth: "120px",
            formLabelWidth1: "120px",
            newKind: [],
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 15, //每页显示数量
        };
    },
    created() {
        this.getGoods_types();
    },
    methods: {
        // 复选框按钮
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.per_page = val;
            this.getGoods_types();
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.getGoods_types();
        },
        // 新增
        handAdd() {
            this.form.kindName = "";
            this.dialogFormVisible = true;
        },
        // 确认新增
        addSubmit() {
            var string;
            string = this.form.kindName.replace(/\s/g, ",").split(",");
            AddBrandgoods_types({
                names: string,
            }).then((res) => {
                this.$message({
                    type: "success",
                    message: "添加成功",
                });
                this.getGoods_types();
            });
            this.dialogFormVisible = false;
        },
        // 编辑
        handEdit(id, item) {
            this.id = id;
            this.form1.kindName1 = item.name;
            this.dialogFormVisible1 = true;
        },
        // 编辑确定按钮
        EditSubmit() {
            editBrand_types(this.id, {
                name: this.form1.kindName1,
            }).then((res) => {
                this.$message({
                    type: "success",
                    message: "编辑成功",
                });
                this.getGoods_types();
            });
            this.dialogFormVisible1 = false;
        },
        // 删除
        handdel(id) {
            this.$confirm("确定删除此条商品品牌吗?", "确认删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    DelBrand_goods_types(id).then((res) => {
                        this.getGoods_types();
                    });
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 获取列表
        getGoods_types() {
            let page = {
                page: this.current_page,
                per_page: this.per_page,
            };
            Brand_goods_types(page).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.block {
    margin-top: 20px;
}
</style>