混入封装 增删改查

export default {
    data() {
        return {
            curPage: 1,
            pageSize: 2,
            total: 0,
            tableData: [],
            isShowEdit: false,
            //不知道调用的接口名
            getModelMethod: null,
            saveMethod: null,
            updateMethod: null,
            delMethod: null,
            searchMethod: null,
            请求返回的数据接收对象：
            mm: {}
        }
    },
    filters: {
        formatDate(val) {
            let birthArray = val.split(" ")[0].split("-");
            return birthArray[0] + "年" + birthArray[1] + "月" + birthArray[2] + "日"
        },
    },
    created() {
        // this.search();
    },
    methods: {
        search(par) {
            this.searchMethod({
                pageSize: this.pageSize,
                curPage: this.curPage,
                condition: this.condition
            }).then(res => {
                // console.log(res);
                this.tableData = res.data.rows;
                this.total = res.data.total;
            })
        },
        doDel(par) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delMethod({id: par.id}).then(res => {
                    if (res.code == 200) {
                        this.curPage=1
                        this.search();
                        this.$message.success("删除成功");
                        
                    } else {
                        this.$message.error("删除失败");
                    }
                }).catch( err => {
                    this.$message.error("删除失败");
                });
            }).catch(() => {
                this.$message.error("已取消删除");
            });
        },
        doSave() {
            console.log(this.mm.id);
            if (this.mm.id) {
                //编辑
                this.updateMethod(this.mm).then(res => {
                    if (res.code == 200) {
                        this.$message.success("保存成功");
                        this.search();
                    } else {
                        this.$message.error("保存失败");
                    }
                    this.isShowEdit = false;
                }).catch( err => {
                    this.$message.error(err.message);
                })
            } else {
                //新增
                this.saveMethod(this.mm).then(res => {
                   
                    if (res.code == 200) {
                        this.$message.success("保存成功");
                        this.search();
                    } else {
                        this.$message.error("保存失败");
                    }
                    this.isShowEdit = false;
                }).catch( err => {
                    this.$message.error(err.message);
                })
            }
            
        },
        doSearch() {
            this.curPage = 1;
            
            this.search();
        },
        goEdit(row) {
            if (this.getModelMethod) {
                this.getModelMethod({id: row.id}).then(res => {
                    this.mm = res.data;
                    this.isShowEdit = true;
                })
            }
        },
        goAdd() {
            this.mm = {};
            this.isShowEdit = true;
        },
        
        changeCurPage(par) {
            this.curPage = par;
            this.search();
        },
        changePageSize(par) {
            this.pageSize = par;
            this.search();
        },
    }
}

//具体的页面

引入封装的整个页面
 <Mytable v-model="condition" :api="api"  :formHead="formHead" > 
</Mytable>

export default {
    //2. 将混入对象与组件进行合并
   
    data() {
        return {
            condition: {
                name: ''
            },
            api:{
                get:"getUmsRoleById",
                save:"saveUmsRole",
                update:"updateUmsRole",
                del:"delUmsRole",
                search:"searchUmsRole"
            },
            formHead:[
                {id:1,prop:"name",lable:"角色名称"},
                {id:2,prop:"code",lable:"编码"},
                {id:3,prop:"status",lable:"状态"},
            ]
        }
    },
    components:{
        Mytable
    },
   
}

//table组件

<template>
<div>
    <!-- 查询区域  -->
    <el-row>
        <el-col :span="8">
            <el-input class="txt" v-model="value.name" placeholder="请输入角色名称"></el-input>
        </el-col>
        <el-col :span="8">
            <el-button type="primary" class="btn_common" @click="doSearch">查询</el-button>
        </el-col>
    </el-row>

    <div style="margin-top: 20px;">
        <el-button type="primary" @click="goAdd">新增</el-button>
    </div>
    <!-- 下面是用户列表 -->
    <div style="margin-top:10px;">

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column v-for="item in formHead" :key="item.id" :prop="item.prop" :label="item.lable">
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="doDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>



        </el-table>

        <el-pagination :current-page="curPage" :page-sizes="[2, 4, 6, 8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="changeCurPage" @size-change="changePageSize">
        </el-pagination>
    </div>

    <el-dialog :visible.sync="isShowEdit" width="30%" title="编辑角色">
        <el-form ref="form" :model="mm" label-width="80px">
            <el-form-item v-for="item in formHead" :key="item.id" :label="item.label">
                <div class="itemLable">{{item.lable}}:</div>
                
                <cinput  v-model="mm[item.prop]"></cinput>
            </el-form-item>


      
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="doSave">保存</el-button>
            <el-button @click="isShowEdit = false">关闭</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import CommonMixin from '@/mixin/CommonMixin';
export default {
    data() {
        return {
            condition:this.value
        }
    },
    mixins: [CommonMixin],
    props: {
        value: {
            type: [Object, Array, Number],
            default: () => {
                return []
            },
        },

        api: {
            type: [Object, Array, Number],
            default: () => {
                return []
            },
        },
        formHead: {
            type: [Object, Array, Number],
            default: () => {
                return []
            },
        },

    },
    created() {
        this.getModelMethod = this.$api[this.api.get];
        this.saveMethod = this.$api[this.api.save];
        this.updateMethod = this.$api[this.api.update];
        this.delMethod = this.$api[this.api.del];
        this.searchMethod = this.$api[this.api.search]
        this.search();
    },
    watch: {
        tableData(newval, oldval) {
           console.log(newval);
        },
    }
}
</script>