element 表格行内进行编辑

<template>
    <div class="process_manage">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>审批流程</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="seach_onoff = !seach_onoff">搜索按钮</el-button>
            </div>
            <el-row :gutter="10" :class="seach_onoff ? 'lz-seach-animation' : 'lz-seach'">
                <!-- <el-col :span="5" class="lz-el-col"><el-input v-model="seach_val" @input="seachValue" placeholder="请输入内容"></el-input></el-col>
                <el-col :span="5" class="lz-el-col"><el-button type="primary" size="small" icon="el-icon-search" plain @click="seachValue">搜索</el-button></el-col> -->
            </el-row>
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add_approver">添加审批流程</el-button>
            <el-table :data="processData" border highlight-current-row :class="EditOnoff ? 'tb-edit' : 'tb-edit2'" @row-click="handleCurrentChange">
                <el-table-column fixed prop="createDate" label="创建日期" width="150" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="流程名称" width="150" :show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="small" v-model="EditBefore.name" placeholder="流程名称"></el-input>
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程发起人" width="150" :show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="small" v-model="EditBefore.userName" placeholder="流程发起人" disabled></el-input>
                        <span>{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程状态" width="150">
                    <template scope="scope">
                        <el-switch v-model="EditBefore.status" active-text="启用" inactive-text="禁用" active-value="0" inactive-value="1"></el-switch>
                        <span>{{ scope.row.status == 1 ? '禁用' : '启用' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程简介" :show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="small" v-model="EditBefore.remark" placeholder="流程简介"></el-input>
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="240">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleComplete" v-if="scope.row.id == EditBefore.id && EditOnoff">完成</el-button>
                        <el-button type="text" size="small" @click.stop="EditOnoff = false" v-if="scope.row.id == EditBefore.id && EditOnoff">取消</el-button>
                        <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)" v-else="">编辑</el-button>
                        <el-button type="text" size="small" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button type="text" size="small" @click.stop="handleDelete(scope.$index, scope.row)">设置</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- //分页 -->
            <el-pagination
                style="margin: 20px 0;float: right;"
                @current-change="pageleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
    name: 'process_manage',
    computed: {
        ...mapGetters(['api'])
    },
    data() {
        return {
            seach_onoff: false, //搜索显示
            seach_val: '', //搜索类容
            currentPage: 1, //分页中当前第几页
            count: 0, //分页数据总条数
            processData: [
                //流程数据
                {
                    pmUserName: ''
                }
            ],
            //编辑
            EditOnoff: false, //是否可编辑
            EditBefore: {}, //编辑之前的数据
        };
    },
    mounted() {
        //获取登录用户的组织审批流程
        this.getProcessData();
    },
    methods: {
        //获取当前公司的所有审批流程
        getProcessData() {
            let that = this;
            let req = {
                pageNum: that.currentPage,
                isPage: true
            };
            that.GLOBAL.doPost(that.api.GLOBAL_flow_getByOwner, req, function(res) {
                if (res.code == 200) {
                    that.processData = res.data.list;
                    that.count = res.data.total;
                }
            });
        },
        //点击行
        handleCurrentChange(row, event, column) {
            let that = this;
            console.log(row.id, that.EditBefore.id);
            if (row.id == that.EditBefore.id) {
                that.EditOnoff = true;
            } else {
                that.EditOnoff = false;
            }
        },
        //编辑
        handleEdit(index, row) {
            let that = this;
            console.log(row);
            that.EditOnoff = true;
            //复制编辑前的数据
            that.EditBefore = { ...row };
        },
        //删除
        handleDelete(index, row){
            this.$confirm('是否删除此‘'+row.name+'’流程', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
            }).then(() => {

            }).catch(() => {
            });
        },
        //完成
        handleComplete() {
            let that = this;
            that.EditOnoff = true;
            console.log(that.EditBefore);
            that.$confirm('是否完成此次编辑', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    that.GLOBAL.doPost(that.api.GLOBAL_user_update, JSON.stringify(that.EditBefore), function(res) {
                        console.log(res);
                        if (res.code == 200) {
                            that.$message({ message: res.msg, type: 'success' });
                            that.EditOnoff = false;
                            //获取人员列表
                            that.getByOrg();
                        }
                    });
                })
                .catch(() => {});
        },
        //添加审批人
        add_approver() {
            this.$router.push({name:'processSetting',path:'/processSetting'})
        },
        //分页
        pageleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            let that = this;
            that.currentPage = val;
            //获取当前公司的所有审批流程
            that.getProcessData();
        }
    }
};
</script>

<style scoped="scoped" lang="scss">
.lz-el-col {
    width: 200px;
    margin-bottom: 10px;
}
.el-table .lz-fontsize-weidth {
    font-weight: bold;
}
.el-table .lz-fontsize {
    font-weight: normal;
    color: #888;
}
//搜索动画显示
.lz-seach {
    max-height: 0px;
    margin-bottom: 0px;
    overflow: hidden;
}
.lz-seach-animation {
    animation: lzmover 0.6s ease-in-out forwards;
    display: block;
    overflow: hidden;
}

//表格的可编辑
.tb-edit .el-input {
    display: none;
}
.tb-edit .el-select {
    display: none;
}
.tb-edit .el-switch {
    display: none;
}
.tb-edit .current-row .el-input {
    display: block;
}
.tb-edit .current-row .el-select {
    display: block;
}
.tb-edit .current-row .el-switch {
    display: block;
}
.tb-edit .current-row .el-input + span {
    display: none;
}
.tb-edit .current-row .el-switch + span {
    display: none;
}
.tb-edit .current-row .el-select + span {
    display: none;
}
//取消
.tb-edit2 .current-row .el-input + span {
    display: block;
}
.tb-edit2 .el-input {
    display: none;
}
.tb-edit2 .el-select {
    display: none;
}
.tb-edit2 .el-switch {
    display: none;
}
@keyframes lzmover {
    0% {
        height: 0px;
        opacity: 0;
        margin-bottom: 0px;
    }
    100% {
        height: 100%;
        opacity: 1;
        margin-bottom: 10px;
    }
}

</style>