Vue 管理后台的增删改查

 

新建和编辑因为是用的同一个页面或同一个弹框，所以方法是一样的，需要传参区分；删除主要是让提示弹框显示，真正的删除再提示弹框的确定方法；查询可以不传参数。

查询search

searchData() {
            _this.currentPage = 1;
            _this.getList();
        },
getList() {
            _this.isShowLoading = true;
            let obj = {
                page: _this.currentPage,
                size: _this.pageSize,
                name: _this.dataSearch,
            };
            getList(obj)
                .then((res) => {
                    _this.isShowLoading = false;
                    let data = res.data;
                    _this.list = data.list || [];
                    _this.total = data.total;
                })
                .catch((error) => {});
        },

新建Add 修改edit

//页面
toAdd(index, item) {
            switch (index) {
                case 1:
                    _this.$router.push("/");
                    break;
                case 2:
                    _this.$router.push({
                        name: "/",
                        params: {
                            id: item,
                        },
                    });
                    break;
            }
        },




//弹框
addDialog(index, item) {
            _this.addType = index;
            _this.numberDialogVisible = true;
            _this.$nextTick(() => {
                _this.$refs.numberForm.resetFields();
                _this.numberForm = {
                    name: "",
                };
                switch (index) {
                    case 1:
                        _this.addMsg = "添加";
                        break;
                    case 2:
                        _this.addMsg = "修改";
                        _this.numberForm.name = item.name;
                        _this.numberForm.id = item.id;
                        break;
                }
                _this.numberForm = Object.assign({}, _this.numberForm);
            });
        },

删除Detele

deleteDialog(id) {
            _this.id = id;
            _this.deleteDialogVisible = true;
        },
delete() {
        _this.deleteDialogVisible = true;
        let obj = {
            id: _this.id,
        };
        delete(obj)
            .then(res => {
                _this.$message.success("删除成功！");
                _this.deleteDialogVisible = false;
                _this.getList();
            })
            .catch(error => {});
        },