vue 封装可以公用的增、删、改、查方法

利用mixins混入增删改查公共方法

源码如下

export const formPage = {

    data() {

        return {

            //当前用户信息

            userInfo: {},

            /** 当前页面权限 */

            pagePermission: {},

            pageTitle: '',

            //新增表单

            // 表单弹框

            formConfigModel: {

                show: false,

                title: '',

                loading: false,

                isEdit: false,

            },

            /** 预览图片 */

            previewImage: '',

            /** 预览显示 */

            previewVisible: false,

            /***table数据 */

            pageDataConfigModel: {

                index: 1,

                size: 10,

                // loading: false,

                data: [],

                data_count: 0,

                pageSizeList:[10,20,30,40]

            },

            //需要编辑的参数

            checkOneData: {},

        }

    },

    created() {

        this.refreshData()

    },

    methods: {

        /** 预览功能 */

        previewHandle(url) {

            this.previewImage = url;

            this.previewVisible = true;

        },

        /** 显示添加表单模态框 */

        showAddFormModal() {

            this.formConfigModel.title = "新增" + this.pageTitle;

            this.formConfigModel.show = true;

            this.formConfigModel.loading = false;

            this.formConfigModel.isEdit = false;

            this.afterShowAddModalHandle();

        },

        /** 显示修改表单模态框 */

        showEditFormModal(row) {

            this.formConfigModel.title = "修改" + this.pageTitle;;

            this.formConfigModel.show = true;

            this.formConfigModel.loading = false;

            this.formConfigModel.isEdit = true;

            this.afterShowEditModalHandle(row);

        },

        /** 显示模态框之后操作 */

        afterShowModalHandle() { },

        /** 关闭表单配置模态框 */

        closeFormConfigModel() {

            this.$refs.CreatFormRef.resetFields();

            this.formConfigModel.show = false;

        },

        /** 添加表单数据 */

        addFormData(url, form) {

            return new Promise((resolve, reject) => {

                this.formConfigModel.loading = true;

                this.$http.post(url, form)

                    .then((res) => {

                        if(res.data.status==1){

                            this.formConfigModel.show = false;                    

                        }

                        this.formConfigModel.loading = false;

                        resolve(res);

                        return;

                    })

                    .catch((err) => {

                        this.formConfigModel.loading = false;

                        reject(err);

                        return;

                    });

            });

        },

         //修改表单数据

    updateFormData(url, form) {

        return new Promise((resolve, reject) => {

            var params = this.form.value;

            this.formConfigModel.loading = true;

            this.$http

                .post(url, form)

                .then((res) => {

                    if(res.data.status==1){

                        this.formConfigModel.show = false;                    

                    }

                    this.formConfigModel.loading = false;

                    console.log(res)

                    resolve(res);

                    return;

                })

                .catch((err) => {

                    this.formConfigModel.loading = false;

                    reject(err);

                    return;

                });

        });

    },

    /** 删除表单数据 */

    deleteData(url) {

        return new Promise((resolve, reject) => {

            this.$http.get(url)

                .then((res) => {

                    resolve(res);

                    this.refreshData()

                    return;

                })

                .catch((err) => {

                    reject(err);

                    return;

                });

        });

    },

    //获取数据信息

    refreshData() {    

         this.pageDataConfigModel.index = 1;

         this.getTableData();

    },

    changePageSize(newSize){

        this.pageDataConfigModel.size= newSize;

        this.getTableData();  

    },

    changePageIndex(newIndex){

        this.pageDataConfigModel.index= newIndex;

        this.getTableData();  

    },

    /** 重置搜索条件获取数据 */

    researchForm(searchForm) {

        this.$refs.searchForm.reset();

        this.refreshData();

    },

    /** 查询页面数据处理（可重载） */

    searchPageDataHandle(data) {

        let arr = data.data|| []

        this.pageDataConfigModel.data = arr

        this.pageDataConfigModel.data_count = data.total

    },

    /** 查询页面数据错误处理(可重载) */

    searchPageDataErrHandle() { }

    },

   

}

2.再页面中直接用

import { formPage } from "@/mixins/formPage";

就可以之家调用混入的方法及定义的变量，并且 变量可以重写

vue.js页面如下：