<template>
|
<!--流程模板定义-->
|
<basic-container style="height: calc(100vh - 123px)">
|
<div style="margin-bottom: 5px;">
|
流程分类：
|
<el-select v-model="tempType" :clearable="true" placeholder="请选择" size="small"
|
style="width: 300px;margin-right: 20px;"
|
@change="tempTypeChange">
|
<el-option
|
v-for="item in tempTypeData"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
流程模板名称：
|
<el-input size="small" v-model="tempName" style="width: 300px;margin-right: 10px;"></el-input>
|
<el-button icon="el-icon-search" plain size="small" style="margin-right: 40px;" type="primary"
|
@click="searchData">
|
查询
|
</el-button>
|
</div>
|
<el-container style="height: calc(100% - 100px)">
|
<el-aside style="width: 40%;min-width: 500px;margin-right: 5px;">
|
<avue-crud
|
ref="crud"
|
:data="tableData"
|
:option="option"
|
:table-loading="tableLoading"
|
@on-load="getTableList"
|
@refresh-change="getTableList"
|
@selection-change="selectionChange"
|
@row-click="rowClickHandler"
|
>
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button v-if="permissionList.addBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="handlerAdd">
|
<icon-show :name="permissionList.addBtn.source"></icon-show>
|
增加
|
</el-button>
|
<el-button v-if="permissionList.downloadImportTemplateBtn" class="button-custom-icon" plain size="small"
|
type="primary" @click="downloadTemplateHandler">
|
<icon-show :name="permissionList.downloadImportTemplateBtn.source"></icon-show>
|
下载导入模板
|
</el-button>
|
<el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="uploadHandler">
|
<icon-show :name="permissionList.importBtn.source"></icon-show>
|
导入
|
</el-button>
|
<el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="downloadHandler">
|
<icon-show :name="permissionList.exportBtn.source"></icon-show>
|
导出
|
</el-button>
|
</template>
|
|
<template slot="menu" slot-scope="scope">
|
<el-button v-if="permissionList.editBtn" size="small" type="text"
|
@click="handleEdit(scope.row)">
|
<icon-show :name="permissionList.editBtn.source"></icon-show>
|
编辑
|
</el-button>
|
<el-button v-if="permissionList.delBtn" size="small" type="text"
|
@click="handleDel(scope.row)">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
<el-button size="small" type="text" @click.stop="stopHandler(scope.row)">
|
<span v-if="scope.row.status === 0 && permissionList.stopBtn" style="color: #fa3434;display: flex">
|
<icon-show :name="permissionList.stopBtn.source"></icon-show>
|
停用
|
</span>
|
<span v-if="scope.row.status === 1 && permissionList.actionBtn" style="color: #55b61d;display: flex">
|
<icon-show :name="permissionList.actionBtn.source"></icon-show>
|
启用
|
</span>
|
</el-button>
|
</template>
|
|
</avue-crud>
|
<!-- 创建编辑自定义对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="dialogLoading"
|
:title="dialogType === 'add' ? ' 创建' : '编辑'"
|
:visible.sync="dialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="1000px"
|
@close="dialogClose"
|
>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="saveHandler">确 定</el-button>
|
<el-button size="small" @click="dialogClose">取 消</el-button>
|
</span>
|
</el-dialog>
|
<!-- 导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入流程模板"
|
@updata="getTableList"></upload-file>
|
|
</el-aside>
|
|
<el-main width="60%">
|
<div style="height: 100%;position: relative;">
|
<flow-design style="padding-top: 5px" :is-display.sync="flowBox" :process-definition-id="processDefinitionId" height="calc(100vh - 190px)"></flow-design>
|
<div style="position: absolute;top:0;left: 0;height: 100%;width: 100%"></div>
|
</div>
|
</el-main>
|
</el-container>
|
</basic-container>
|
</template>
|
|
<script>
|
import {mapGetters} from "vuex";
|
import basicOption from "@/util/basic-option";
|
import {getTypeList} from "@/api/processTemplate/type";
|
import {getProcessTempList,saveProcessTemp,updateProcessTemp,deleteProcessTemp,downloadTemplate,download,stopProcessTemp} from "@/api/processTemplate/define";
|
import func from "@/util/func";
|
|
export default {
|
name: "index",
|
data(){
|
return {
|
tempType:'',
|
tempName:'',
|
tempTypeData:[],
|
form:{},
|
tableLoading: false,
|
tableData: [],
|
currentRow:null,
|
selectionList: [],
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/userQueryController/importUser',
|
tipList:[],
|
dialogLoading:false,
|
dialogVisible:false,
|
dialogType:'add',
|
processDefinitionId: '',
|
flowBox: false,
|
}
|
},
|
computed: {
|
ids() {
|
let ids = [];
|
this.selectionList.forEach(ele => {
|
ids.push(ele.id);
|
});
|
return ids.join(",");
|
},
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
|
importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
|
downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false),
|
stopBtn: this.vaildData(this.permission[this.$route.query.id].FREEZE, false),
|
actionBtn: this.vaildData(this.permission[this.$route.query.id].UNFREZE, false),
|
};
|
},
|
option(){
|
return {
|
...basicOption,
|
addBtn:false,
|
editBtn:false,
|
delBtn:false,
|
columnBtn:false,
|
gridBtn:false,
|
width:500,
|
calcHeight: -50,
|
align:'left',
|
headerAlign:'center',
|
menuWidth:190,
|
dialogMenuPosition: 'right',
|
dialogWidth:600,
|
column: [
|
{
|
label: '流程模板名称',
|
prop: 'name'
|
},{
|
label: '版本',
|
prop: 'desc',
|
width:50
|
},{
|
label: '状态',
|
prop: 'status',
|
width:65
|
}]
|
}
|
}
|
},
|
created() {
|
getTypeList().then(res => {
|
this.tempTypeData = res.data.data;
|
})
|
},
|
methods:{
|
getTableList(){
|
this.tableLoading = true;
|
getProcessTempList({tempType:this.tempType,tempName:this.tempName}).then(res => {
|
this.tableData = res.data.data;
|
this.tableLoading = false;
|
})
|
},
|
//流程分类选择
|
tempTypeChange(val){
|
this.getTableList();
|
},
|
searchData(){
|
this.getTableList();
|
},
|
|
handlerAdd(){
|
this.form={};
|
this.dialogVisible=true;
|
this.dialogType='add'
|
},
|
handleEdit(row,index) {
|
this.form={
|
...row
|
}
|
this.dialogVisible = true;
|
this.dialogType = 'edit'
|
},
|
// 编辑保存
|
saveHandler() {
|
if(this.dialogType=='add'){
|
saveProcessTemp(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
});
|
}else{
|
updateProcessTemp(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
})
|
}
|
|
},
|
dialogClose(){
|
this.form={};
|
this.dialogLoading=false;
|
this.dialogVisible=false;
|
},
|
// 删除
|
handleDel(row,index) {
|
let params = {
|
ids: row.id
|
}
|
|
this.$confirm('您确定要删除当前数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteProcessTemp(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
}
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
//选择的行
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
|
// 行单选
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectionList = [row];
|
}
|
);
|
//显示流程图
|
this.processDefinitionId = row.id;
|
this.flowBox = true;
|
},
|
|
// 导出
|
downloadHandler() {
|
if (this.selectionList.length <= 0) {
|
this.$message.warning('请至少选择一条数据进行导出');
|
return;
|
}
|
|
download({enumNames: this.ids}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
})
|
},
|
|
// 下载导入模板
|
downloadTemplateHandler() {
|
downloadTemplate().then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('下载成功');
|
}).catch(err => {
|
})
|
},
|
|
//导入
|
uploadHandler() {
|
this.$refs.upload.visible = true;
|
},
|
// 停用启用
|
stopHandler(row) {
|
let params = {};
|
params = {
|
ids: row.oid,
|
flag: row.status === 0 ? true : false
|
}
|
stopProcessTemp(params).then(res => {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
});
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
