<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"inactive-text ="Enable"= text-the Active"禁用" 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: to false , // search revealed
seach_val: '' , // search class content
The currentPage: . 1 , // tab of this page several
COUNT: 0 , // total data quantity paging
the processData: [
// flow data
{
pmUserName : ''
}
],
// edit
EditOnoff: to false , // is editable
EditBefore: {}, // the data before the editing
};
},
Mounted () {
// get the logged in user organization approval process for
the this .getProcessData ();
},
Methods: {
// Get the current all the company's approval process
getProcessData () {
the let that = the this ;
the let REQ = {
pageNum: that.currentPage,
isPage: to true
};
that.GLOBAL.doPost (that.api.GLOBAL_flow_getByOwner, REQ, function (RES) {
IF (res.code == 200 is ) {
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) {
the let that = the this ;
the console.log (Row);
that.EditOnoff = to true ;
// copy data before editing
that.EditBefore = {...} Row;
},
// delete
handleDelete ( index, Row) {
the this $ Confirm (. ' delete this' ' + + row.name ' 'process ' , ' prompt ' , {
confirmButtonText: ' OK ' ,
cancelButtonText: ' cancel ' , {,
Type: ' warning '
.}) The then (() => {
.}) The catch (() => {
});
},
// completion
handleComplete () {
the let that = the this ;
that.EditOnoff = to true ;
Console .log (that.EditBefore);
that $ Confirm the (. ' completion of this edit ' , ' Tip '
confirmButtonText: ' OK ' ,
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 = to false ;
// Get a list of people
that.getByOrg ();
}
});
})
. the catch (() => {});
},
// add approver
add_approver () {
the this $ router.push ({name:. ' processSetting ' , path: ' / processSetting ' })
},
// tab
pageleCurrentChange (Val) {
// the console.log (this page `:` $ {Val});
the let = that the this ;
that.currentPage =Val;
// get all the approvals process companies
that.getProcessData ();
}
}
};
</ Script>
<scoped style = " 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 ;
}
// Search animation
.lz- Seach {
max - height: 0px;
margin - bottom: 0px;
overflow: hidden;
}
.lz -seach- Animation {
Animation: lzmover 0 .6s ease- in - OUT Forwards;
the display: Block;
overflow: hidden;
}
// table editable
.tb-edit .el- INPUT {
the display: none;
}
.tb -edit .el- SELECT {
the 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>
