<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>
