iailab-plat-ui-vue2.git

houzhongjian

2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2

提交 \| 用户 \| 时间
759b1c	1	<template>
H	2	<div class="app-container">
	3	<!-- 搜索工作栏 -->
	4	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	5	<el-form-item label="流程标识" prop="key">
	6	<el-input v-model="queryParams.key" placeholder="请输入流程标识" clearable style="width: 240px;"
	7	@keyup.enter.native="handleQuery"/>
	8	</el-form-item>
	9	<el-form-item label="流程名称" prop="name">
	10	<el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable style="width: 240px;"
	11	@keyup.enter.native="handleQuery"/>
	12	</el-form-item>
	13	<el-form-item label="流程分类" prop="category">
	14	<el-select v-model="queryParams.category" placeholder="流程分类" clearable style="width: 240px">
	15	<el-option v-for="dict in categoryDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
	16	</el-select>
	17	</el-form-item>
	18	<el-form-item>
	19	<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
	20	<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
	21	</el-form-item>
	22	</el-form>
	23
	24	<!-- 操作工具栏 -->
	25	<el-row :gutter="10" class="mb8">
	26	<el-col :span="1.5">
	27	<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
	28	v-hasPermi="['bpm:model:create']">新建流程</el-button>
	29	</el-col>
	30	<el-col :span="1.5">
	31	<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
	32	v-hasPermi="['bpm:model:import']">导入流程</el-button>
	33	</el-col>
	34	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	35	</el-row>
	36
	37	<!-- 列表 -->
	38	<el-table v-loading="loading" :data="list">
	39	<el-table-column label="流程标识" align="center" prop="key" />
	40	<el-table-column label="流程名称" align="center" prop="name" width="200">
	41	<template v-slot="scope">
	42	<el-button type="text" @click="handleBpmnDetail(scope.row)">
	43	<span>{{ scope.row.name }}</span>
	44	</el-button>
	45	</template>
	46	</el-table-column>
	47	<el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
	48	<el-table-column label="表单信息" align="center" prop="formType" width="200">
	49	<template v-slot="scope">
	50	<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
	51	<span>{{ scope.row.formName }}</span>
	52	</el-button>
	53	<el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
	54	<span>{{ scope.row.formCustomCreatePath }}</span>
	55	</el-button>
	56	<label v-else>暂无表单</label>
	57	</template>
	58	</el-table-column>
	59	<el-table-column label="创建时间" align="center" prop="createTime" width="180">
	60	<template v-slot="scope">
	61	<span>{{ parseTime(scope.row.createTime) }}</span>
	62	</template>
	63	</el-table-column>
	64	<el-table-column label="最新部署的流程定义" align="center">
	65	<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
	66	<template v-slot="scope">
	67	<el-tag size="medium" v-if="scope.row.processDefinition">v{{ scope.row.processDefinition.version }}</el-tag>
	68	<el-tag size="medium" type="warning" v-else>未部署</el-tag>
	69	</template>
	70	</el-table-column>
	71	<el-table-column label="激活状态" align="center" prop="processDefinition.version" width="80">
	72	<template v-slot="scope">
	73	<el-switch v-if="scope.row.processDefinition" v-model="scope.row.processDefinition.suspensionState"
	74	:active-value="1" :inactive-value="2" @change="handleChangeState(scope.row)" />
	75	</template>
	76	</el-table-column>
	77	<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
	78	<template v-slot="scope">
	79	<span v-if="scope.row.processDefinition">{{ parseTime(scope.row.processDefinition.deploymentTime) }}</span>
	80	</template>
	81	</el-table-column>
	82	</el-table-column>
	83	<el-table-column label="操作" align="center" width="450" fixed="right">
	84	<template v-slot="scope">
	85	<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
	86	v-hasPermi="['bpm:model:update']">修改流程</el-button>
	87	<el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(scope.row)"
	88	v-hasPermi="['bpm:model:update']">设计流程</el-button>
	89	<el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
	90	v-hasPermi="['bpm:task-assign-rule:query']">分配规则</el-button>
	91	<el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(scope.row)"
	92	v-hasPermi="['bpm:model:deploy']">发布流程</el-button>
	93	<el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(scope.row)"
	94	v-hasPermi="['bpm:process-definition:query']">流程定义</el-button>
	95	<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
	96	v-hasPermi="['bpm:model:delete']">删除</el-button>
	97	</template>
	98	</el-table-column>
	99	</el-table>
	100	<!-- 分页组件 -->
	101	<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
	102	@pagination="getList"/>
	103
	104	<!-- 流程表单配置详情 -->
	105	<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
	106	<parser :key="new Date().getTime()" :form-conf="detailForm" />
	107	</el-dialog>
	108
	109	<!-- 流程模型图的预览 -->
	110	<el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
	111	<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
	112	</el-dialog>
	113
	114	<!-- 对话框(添加 / 修改) -->
	115	<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
	116	<el-form ref="form" :model="form" :rules="rules" label-width="110px">
	117	<el-form-item label="流程标识" prop="key">
	118	<el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id" />
	119	<el-tooltip v-if="!form.id" class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
	120	<i style="padding-left: 5px;" class="el-icon-question" />
	121	</el-tooltip>
	122	<el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
	123	<i style="padding-left: 5px;" class="el-icon-question" />
	124	</el-tooltip>
	125	</el-form-item>
	126	<el-form-item label="流程名称" prop="name">
	127	<el-input v-model="form.name" placeholder="请输入流程名称" :disabled="!!form.id" clearable />
	128	</el-form-item>
	129	<el-form-item v-if="form.id" label="流程分类" prop="category">
	130	<el-select
	131	v-model="form.category"
	132	clearable
	133	placeholder="请选择流程分类"
	134	style="width: 100%"
	135	>
	136	<el-option
	137	v-for="category in categoryList"
	138	:key="category.code"
	139	:label="category.name"
	140	:value="category.code"
	141	/>
	142	</el-select>
	143	</el-form-item>
	144	<el-form-item label="流程描述" prop="description">
	145	<el-input type="textarea" v-model="form.description" clearable />
	146	</el-form-item>
	147	<div v-if="form.id">
	148	<el-form-item label="表单类型" prop="formType">
	149	<el-radio-group v-model="form.formType">
	150	<el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
	151	{{dict.label}}
	152	</el-radio>
	153	</el-radio-group>
	154	</el-form-item>
	155	<el-form-item v-if="form.formType === 10" label="流程表单" prop="formId">
	156	<el-select v-model="form.formId" clearable style="width: 100%">
	157	<el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id"/>
	158	</el-select>
	159	</el-form-item>
	160	<el-form-item v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath" >
	161	<el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
	162	<el-tooltip class="item" effect="light" content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create" placement="top">
	163	<i style="padding-left: 5px;" class="el-icon-question" />
	164	</el-tooltip>
	165	</el-form-item>
	166	<el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath">
	167	<el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
	168	<el-tooltip class="item" effect="light" content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view" placement="top">
	169	<i style="padding-left: 5px;" class="el-icon-question" />
	170	</el-tooltip>
	171	</el-form-item>
	172	</div>
	173	</el-form>
	174	<div slot="footer" class="dialog-footer">
	175	<el-button type="primary" @click="submitForm">确定</el-button>
	176	<el-button @click="cancel">取消</el-button>
	177	</div>
	178	</el-dialog>
	179
	180	<!-- 用户导入对话框 -->
	181	<el-dialog title="导入流程" :visible.sync="upload.open" width="400px" append-to-body>
	182	<el-upload ref="upload" :limit="1" accept=".bpmn, .xml" :headers="upload.headers" :action="upload.url"
	183	:disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
	184	:auto-upload="false" name="bpmnFile" :data="upload.form" drag>
	185	<i class="el-icon-upload"></i>
	186	<div class="el-upload__text">
	187	将文件拖到此处，或
	188	<em>点击上传</em>
	189	</div>
	190	<div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“bpm”或“xml”格式文件！</div>
	191	<div class="el-upload__tip" slot="tip">
	192	<el-form ref="uploadForm" size="mini" label-width="90px" :model="upload.form" :rules="upload.rules" @submit.native.prevent>
	193	<el-form-item label="流程标识" prop="key">
	194	<el-input v-model="upload.form.key" placeholder="请输入流标标识" style="width: 250px;" />
	195	<el-tooltip class="item" effect="light" content="新建后，流程标识不可修改！" placement="top">
	196	<i style="padding-left: 5px;" class="el-icon-question" />
	197	</el-tooltip>
	198	</el-form-item>
	199	<el-form-item label="流程名称" prop="name">
	200	<el-input v-model="upload.form.name" placeholder="请输入流程名称" clearable />
	201	</el-form-item>
	202	<el-form-item label="流程描述" prop="description">
	203	<el-input type="textarea" v-model="upload.form.description" clearable />
	204	</el-form-item>
	205	</el-form>
	206	</div>
	207	</el-upload>
	208	<div slot="footer" class="dialog-footer">
	209	<el-button type="primary" @click="submitFileForm">确定</el-button>
	210	<el-button @click="uploadClose">取消</el-button>
	211	</div>
	212	</el-dialog>
	213
	214	<!-- ========== 流程任务分配规则 ========== -->
	215	<taskAssignRuleDialog ref="taskAssignRuleDialog" />
	216	</div>
	217	</template>
	218
	219	<script>
	220	import {
	221	deleteModel,
	222	deployModel,
	223	getModelPage,
	224	getModel,
	225	updateModelState,
	226	createModel,
	227	updateModel
	228	} from "@/api/bpm/model";
	229	import {DICT_TYPE, getDictDatas} from "@/utils/dict";
	230	import {getForm, getSimpleForms} from "@/api/bpm/form";
	231	import {decodeFields} from "@/utils/formGenerator";
	232	import Parser from '@/components/parser/Parser'
	233	import {getBaseHeader} from "@/utils/request";
	234	import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
	235
	236	import Treeselect from "@riophae/vue-treeselect";
	237	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	238	import { getCategory, listSimpleCategorys } from '@/api/bpm/category'
	239
	240	export default {
	241	name: "BpmModel",
	242	components: {
	243	Parser,
	244	Treeselect,
	245	taskAssignRuleDialog
	246	},
	247	data() {
	248	return {
	249	// 遮罩层
	250	loading: true,
	251	// 显示搜索条件
	252	showSearch: true,
	253	// 总条数
	254	total: 0,
	255	// 表格数据
	256	list: [],
	257	// 查询参数
	258	queryParams: {
	259	pageNo: 1,
	260	pageSize: 10
	261	},
	262	categoryList: [],
	263	// BPMN 数据
	264	showBpmnOpen: false,
	265	bpmnXML: null,
	266	bpmnControlForm: {
	267	prefix: "flowable"
	268	},
	269
	270	// 流程表单详情
	271	detailOpen: false,
	272	detailForm: {
	273	fields: []
	274	},
	275
	276	// 流程表单
	277	title: "",
	278	open: false,
	279	form: {},
	280	// 表单校验
	281	rules: {
	282	key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
	283	name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
	284	formType: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
	285	formId: [{ required: true, message: "业务表单不能为空", trigger: "blur" }],
	286	category: [{ required: true, message: "流程分类不能为空", trigger: "blur" }],
	287	formCustomCreatePath: [{ required: true, message: "表单提交路由不能为空", trigger: "blur" }],
	288	formCustomViewPath: [{ required: true, message: "表单查看路由不能为空", trigger: "blur" }],
	289	},
	290
	291	// 流程导入参数
	292	upload: {
	293	// 是否显示弹出层（用户导入）
	294	open: false,
	295	// 是否禁用上传
	296	isUploading: false,
	297	// 设置上传的请求头部
	298	headers: getBaseHeader(),
	299	// 上传的地址
	300	url: process.env.VUE_APP_BASE_API + '/admin-api' + "/bpm/model/import",
	301	// 表单
	302	form: {},
	303	// 校验规则
	304	rules: {
	305	key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
	306	name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
	307	},
	308	},
	309	// 流程表单的下拉框的数据
	310	forms: [],
	311
	312	// 数据字典
	313	categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
	314	modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
	315	taskAssignRuleDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
	316	};
	317	},
	318	created() {
	319	this.getList();
	320	// 获得流程表单的下拉框的数据
	321	getSimpleForms().then(response => {
	322	this.forms = response.data
	323	})
	324	},
	325	methods: {
	326	/** 查询流程模型列表 */
	327	getList() {
	328	this.loading = true;
	329	getModelPage(this.queryParams).then(response => {
	330	this.list = response.data.list;
	331	this.total = response.data.total;
	332	this.loading = false;
	333	}
	334	);
	335	},
	336	/** 取消按钮 */
	337	cancel() {
	338	this.open = false;
	339	this.reset();
	340	},
	341	// 表单重置
	342	reset() {
	343	this.form = {
	344	id: undefined,
	345	key: undefined,
	346	name: undefined,
	347	description: undefined,
	348	category: undefined,
	349	formType: undefined,
	350	formId: undefined,
	351	formCustomCreatePath: undefined,
	352	formCustomViewPath: undefined
	353	};
	354	this.resetForm("form");
	355	},
	356	/** 搜索按钮操作 */
	357	handleQuery() {
	358	this.queryParams.pageNo = 1;
	359	this.getList();
	360	},
	361	/** 重置按钮操作 */
	362	resetQuery() {
	363	this.dateRange = [];
	364	this.resetForm("queryForm");
	365	this.handleQuery();
	366	},
	367	/** 新增按钮操作 */
	368	handleAdd() {
	369	this.reset();
	370	this.title = "新建模型";
	371	this.open = true;
	372	},
	373	/** 修改按钮操作 */
	374	handleUpdate(row) {
	375	this.reset();
	376	this.getSimpleCategorys()
	377	this.title = "修改模型";
	378	this.open = true;
	379	// 设置 form
	380	this.form = {
	381	...row
	382	};
	383	// 触发一次校验
	384	// this.$refs["form"].validate();
	385	},
	386	getSimpleCategorys () {
	387	listSimpleCategorys().then(response => {
	388	this.categoryList = response.data;
	389	});
	390	},
	391	/** 设计按钮操作 */
	392	handleDesign(row) {
	393	this.$router.push({
	394	name: "BpmModelEditor",
	395	query:{
	396	modelId: row.id
	397	}
	398	});
	399	},
	400	/** 提交按钮 */
	401	submitForm() {
	402	this.$refs["form"].validate(valid => {
	403	if (!valid) {
	404	return;
	405	}
	406	// 更新
	407	if (this.form.id) {
	408	updateModel({
	409	...this.form,
	410	formId: this.form.formType === 10 ? this.form.formId : undefined,
	411	formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
	412	formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined,
	413	}).then(response => {
	414	this.$modal.msgSuccess("修改模型成功");
	415	this.open = false;
	416	this.getList();
	417	});
	418	return;
	419	}
	420	// 创建
	421	createModel(this.form).then(response => {
	422	this.open = false;
	423	this.getList();
	424	this.$alert('<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
	425	'<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
	426	'<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
	427	'<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
	428	'<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
	429	'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
	430	'重要提示', {
	431	dangerouslyUseHTMLString: true,
	432	type: 'success'
	433	});
	434	});
	435	});
	436	},
	437	/** 删除按钮操作 */
	438	handleDelete(row) {
	439	const that = this;
	440	this.$modal.confirm('是否删除该流程！！').then(function() {
	441	deleteModel(row.id).then(response => {
	442	that.getList();
	443	that.$modal.msgSuccess("删除成功");
	444	})
	445	}).catch(() => {});
	446	},
	447	/** 部署按钮操作 */
	448	handleDeploy(row) {
	449	const that = this;
	450	this.$modal.confirm('是否部署该流程！！').then(function() {
	451	deployModel(row.id).then(response => {
	452	that.getList();
	453	that.$modal.msgSuccess("部署成功");
	454	})
	455	}).catch(() => {});
	456	},
	457	/** 流程表单的详情按钮操作 */
	458	handleFormDetail(row) {
	459	// 流程表单
	460	if (row.formId) {
	461	getForm(row.formId).then(response => {
	462	// 设置值
	463	const data = response.data
	464	this.detailForm = {
	465	...JSON.parse(data.conf),
	466	fields: decodeFields(data.fields)
	467	}
	468	// 弹窗打开
	469	this.detailOpen = true
	470	})
	471	// 业务表单
	472	} else if (row.formCustomCreatePath) {
	473	this.$router.push({ path: row.formCustomCreatePath});
	474	}
	475	},
	476	/** 流程图的详情按钮操作 */
	477	handleBpmnDetail(row) {
	478	getModel(row.id).then(response => {
	479	this.bpmnXML = response.data.bpmnXml
	480	// 弹窗打开
	481	this.showBpmnOpen = true
	482	})
	483	},
	484	/** 跳转流程定义的列表 */
	485	handleDefinitionList(row) {
	486	this.$router.push({
	487	name: "BpmProcessDefinition",
	488	query:{
	489	key: row.key
	490	}
	491	});
	492	},
	493	/** 更新状态操作 */
	494	handleChangeState(row) {
	495	const id = row.id;
	496	let state = row.processDefinition.suspensionState;
	497	let statusState = state === 1 ? '激活' : '挂起';
	498	this.$modal.confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?').then(function() {
	499	return updateModelState(id, state);
	500	}).then(() => {
	501	this.getList();
	502	this.$modal.msgSuccess(statusState + "成功");
	503	}).catch(() => {
	504	// 取消后，进行恢复按钮
	505	row.processDefinition.suspensionState = (state === 1 ? 2 : 1);
	506	});
	507	},
	508	/** 导入按钮操作 */
	509	handleImport() {
	510	this.upload.open = true;
	511	},
	512	// 文件上传中处理
	513	handleFileUploadProgress(event, file, fileList) {
	514	this.upload.isUploading = true;
	515	},
	516	// 文件上传成功处理
	517	handleFileSuccess(response, file, fileList) {
	518	if (response.code !== 0) {
	519	this.$modal.msgError(response.msg)
	520	return;
	521	}
	522	// 重置表单
	523	this.uploadClose();
	524	// 提示，并刷新
	525	this.$modal.msgSuccess("导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】");
	526	this.getList();
	527	},
	528	uploadClose() {
	529	// 关闭弹窗
	530	this.upload.open = false;
	531	// 重置上传状态和文件
	532	this.upload.isUploading = false;
	533	this.$refs.upload.clearFiles();
	534	// 重置表单
	535	this.upload.form = {};
	536	this.resetForm("uploadForm");
	537	},
	538	/** 提交上传文件 */
	539	submitFileForm() {
	540	this.$refs["uploadForm"].validate(valid => {
	541	if (!valid) {
	542	return;
	543	}
	544	this.$refs.upload.submit();
	545	})
	546	},
	547	/** 处理任务分配规则列表的按钮操作 */
	548	handleAssignRule(row) {
	549	this.$refs['taskAssignRuleDialog'].initModel(row.id);
	550	},
	551	}
	552	};
	553	</script>
	554
	555	<style lang="scss">
	556	.my-process-designer {
	557	height: calc(100vh - 200px);
	558	}
	559	</style>