流程查询添加 发起人 和 流程名称 筛选

src/views/flowable/process/HistoryList.vue

@@ -1,167 +1,96 @@
 <template>
 	<div class="page">
-		<el-form
-			:inline="true"
-			class="query-form m-b-10"
-			v-if="searchVisible"
-			ref="searchForm"
-			:model="searchForm"
-			@keyup.enter="refreshList()"
-			@submit.prevent
-		>
+		<el-form :inline="true" class="query-form m-b-10" v-if="searchVisible" ref="searchForm" :model="searchForm"
+			@keyup.enter="refreshList()" @submit.prevent>
 			<el-form-item label="实例名称：" prop="title">
-				<el-input
-					v-model="searchForm.title"
-					clearable
-					placeholder="请输入关键词"
-				></el-input>
+				<el-input class="close-clearable" v-model="searchForm.title" clearable placeholder="请输入关键词"></el-input>
+			</el-form-item>
+			<el-form-item label="流程名称：" prop="processDefinitionName">
+				<el-input class="close-clearable" v-model="searchForm.processDefinitionName" clearable
+					placeholder="请输入流程名称"></el-input>
+			</el-form-item>
+			<el-form-item label="发起人：" prop="userName">
+				<el-input v-model="searchForm.userName" placeholder="请选择发起人">
+					<template #suffix>
+						<el-button style="background-color: white;color: #1b1e25;border-color: white;" type="primary"
+							slot="append" icon="el-icon-search" @click="openUserDia2">
+						</el-button>
+					</template>
+				</el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button type="primary" @click="refreshList()" icon="search"
-					>查询</el-button
-				>
-				<el-button
-					type="default"
-					@click="resetSearch()"
-					icon="refresh-right"
-					>重置</el-button
-				>
+				<el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
+				<el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
 			</el-form-item>
 		</el-form>
 		<div class="jp-table">
-			<vxe-toolbar
-				ref="historyToolbar"
-				:refresh="{ query: refreshList }"
-				export
-				print
-				custom
-			>
+			<vxe-toolbar ref="historyToolbar" :refresh="{ query: refreshList }" export print custom>
 				<template #buttons>
-					<el-button
-						type="danger"
-						icon="del-filled"
-						@click="del()"
-						v-show="
-							$refs.historyTable &&
-							$refs.historyTable.getCheckboxRecords().length > 0
-						"
-						>删除
+					<el-button type="danger" icon="del-filled" @click="del()" v-show="$refs.historyTable &&
+						$refs.historyTable.getCheckboxRecords().length > 0
+						">删除
 					</el-button>
 				</template>
 				<template #tools>
-					<vxe-button
-						type="text"
-						:title="searchVisible ? '收起检索' : '展开检索'"
-						icon="vxe-icon-search"
-						class="tool-btn"
-						@click="searchVisible = !searchVisible"
-					></vxe-button>
+					<vxe-button type="text" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
+						class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
 				</template>
 			</vxe-toolbar>
 			<div class="jp-table-body">
-				<vxe-table
-					border="inner"
-					auto-resize
-					resizable
-					height="auto"
-					:loading="loading"
-					size="small"
-					ref="historyTable"
-					show-header-overflow
-					show-overflow
-					highlight-hover-row
-					:menu-config="{}"
-					:print-config="{}"
-					:import-config="{}"
-					:export-config="{}"
-					:data="dataList"
-					:checkbox-config="{}"
-				>
+				<vxe-table border="inner" auto-resize resizable height="auto" :loading="loading" size="small"
+					ref="historyTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
+					:print-config="{}" :import-config="{}" :export-config="{}" :data="dataList" :checkbox-config="{}">
 					<vxe-column type="seq" width="40"></vxe-column>
 					<vxe-column type="checkbox" width="40px"></vxe-column>
 					<vxe-column title="实例名称" field="vars.title">
 					</vxe-column>
+					<vxe-column title="流程名称" field="processDefinitionName">
+					</vxe-column>
+
 					<vxe-column title="流程状态" field="status">
 						<template #default="scope">
-							<el-tag :type="scope.row.level"
-								>{{ scope.row.status }}
+							<el-tag :type="scope.row.level">{{ scope.row.status }}
 							</el-tag>
 						</template>
 					</vxe-column>
-					<vxe-column
-						title="流程发起人"
-						field="vars.userName"
-					></vxe-column>
+					<vxe-column title="流程发起人" field="vars.userName"></vxe-column>
 					<vxe-column title="发起时间 " field="startTime">
 					</vxe-column>
 					<vxe-column title="结束时间" field="endTime"> </vxe-column>
-					<vxe-column
-						title="操作"
-						width="150px"
-						type="html"
-						fixed="right"
-						align="center"
-					>
+					<vxe-column title="操作" width="150px" type="html" fixed="right" align="center">
 						<template #default="scope">
-							<el-button
-								type="primary"
-								text
-								@click="detail(scope.row)"
-								>历史
+							<el-button type="primary" text @click="detail(scope.row)">历史
 							</el-button>
-							<el-button
-								type="primary"
-								text
-								@click="trace(scope.row)"
-								>流程图
+							<el-button type="primary" text @click="trace(scope.row)">流程图
 							</el-button>
-							<el-button
-								type="danger"
-								text
-								@click="del(scope.row.id)"
-								>删除
+							<el-button type="danger" text @click="del(scope.row.id)">删除
 							</el-button>
 						</template>
 					</vxe-column>
 				</vxe-table>
-				<vxe-pager
-					background
-					size="small"
-					:current-page="tablePage.currentPage"
-					:page-size="tablePage.pageSize"
-					:total="tablePage.total"
-					:page-sizes="[
+				<vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
+					:total="tablePage.total" :page-sizes="[
 						10,
 						20,
 						100,
 						1000,
 						{ label: '全量数据', value: 1000000 },
-					]"
-					:layouts="[
+					]" :layouts="[
 						'PrevPage',
 						'JumpNumber',
 						'NextPage',
 						'FullJump',
 						'Sizes',
 						'Total',
-					]"
-					@page-change="currentChangeHandle"
-				>
+					]" @page-change="currentChangeHandle">
 				</vxe-pager>
-				<v-dialog
-					title="查看进度"
-					:close-on-click-modal="true"
-					v-model="visible"
-					width="70%"
-					height="600px"
-				>
-					<flow-chart
-						ref="preview"
-						:processInstanceId="processInstanceId"
-					></flow-chart>
+				<v-dialog title="查看进度" :close-on-click-modal="true" v-model="visible" width="70%" height="600px">
+					<flow-chart ref="preview" :processInstanceId="processInstanceId"></flow-chart>
 				</v-dialog>
 			</div>
 		</div>
+		<user-select2 ref="userSelect2" @doSubmit="selectUser2"></user-select2>
+
 	</div>
 </template>
 
@@ -170,12 +99,19 @@
 import pick from "lodash.pick";
 import taskService from "@/api/flowable/taskService";
 import processService from "@/api/flowable/processService";
+import UserSelect2 from '@/views/utils/UserTreeSelect'
 export default {
+	components: {
+		UserSelect2
+	},
 	data() {
 		return {
 			searchVisible: true,
 			searchForm: {
 				title: "",
+				processDefinitionName: "",
+				userName: "",
+				userId: "",
 			},
 			tablePage: {
 				total: 0,
@@ -287,10 +223,23 @@ export default {
 		},
 		resetSearch() {
 			this.$refs.searchForm.resetFields();
+			this.searchForm.userId = "";
 			this.$nextTick(() => {
 				this.refreshList();
 			});
 		},
+		openUserDia2() {
+			this.$refs.userSelect2.init()
+		},
+		selectUser2(user) {
+			this.searchForm.userName = user[0].name
+			this.searchForm.userId = user[0].id
+		},
 	},
 };
 </script>
+<style scoped>
+.close-clearable {
+	width: 180px;
+}
+</style>

src/views/flowable/process/RunningList.vue

@@ -1,82 +1,45 @@
 <template>
 	<div class="page">
-		<el-form
-			:inline="true"
-			class="query-form m-b-10"
-			v-if="searchVisible"
-			ref="searchForm"
-			:model="searchForm"
-			@keyup.enter="refreshList()"
-			@submit.prevent
-		>
+		<el-form :inline="true" class="query-form m-b-10" v-if="searchVisible" ref="searchForm" :model="searchForm"
+			@keyup.enter="refreshList()" @submit.prevent>
 			<el-form-item label="实例名称：" prop="title">
-				<el-input
-					v-model="searchForm.title"
-					clearable
-					placeholder="请输入关键词"
-				></el-input>
+				<el-input class="close-clearable" v-model="searchForm.title" clearable placeholder="请输入关键词"></el-input>
+			</el-form-item>
+			<el-form-item label="流程名称：" prop="processDefinitionName">
+				<el-input class="close-clearable" v-model="searchForm.processDefinitionName" clearable
+					placeholder="请输入流程名称"></el-input>
+			</el-form-item>
+			<el-form-item label="发起人：" prop="userName">
+				<el-input v-model="searchForm.userName" placeholder="请选择发起人">
+					<template #suffix>
+						<el-button style="background-color: white;color: #1b1e25;border-color: white;" type="primary"
+							slot="append" icon="el-icon-search" @click="openUserDia2">
+						</el-button>
+					</template>
+				</el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button type="primary" @click="refreshList()" icon="search"
-					>查询</el-button
-				>
-				<el-button
-					type="default"
-					@click="resetSearch()"
-					icon="refresh-right"
-					>重置</el-button
-				>
+				<el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
+				<el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
 			</el-form-item>
 		</el-form>
 		<div class="jp-table">
-			<vxe-toolbar
-				ref="runningToolbar"
-				:refresh="{ query: refreshList }"
-				export
-				print
-				custom
-			>
+			<vxe-toolbar ref="runningToolbar" :refresh="{ query: refreshList }" export print custom>
 				<template #buttons>
-					<el-button
-						type="danger"
-						icon="del-filled"
-						@click="del()"
-						v-show="
-							$refs.runningTable &&
-							$refs.runningTable.getCheckboxRecords().length > 0
-						"
-						>作废
+					<el-button type="danger" icon="del-filled" @click="del()" v-show="$refs.runningTable &&
+						$refs.runningTable.getCheckboxRecords().length > 0
+						">作废
 					</el-button>
 				</template>
 				<template #tools>
-					<vxe-button
-						type="text"
-						:title="searchVisible ? '收起检索' : '展开检索'"
-						icon="vxe-icon-search"
-						class="tool-btn"
-						@click="searchVisible = !searchVisible"
-					></vxe-button>
+					<vxe-button type="text" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
+						class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
 				</template>
 			</vxe-toolbar>
 			<div class="jp-table-body">
-				<vxe-table
-					border="inner"
-					auto-resize
-					resizable
-					height="auto"
-					:loading="loading"
-					size="small"
-					ref="runningTable"
-					show-header-overflow
-					show-overflow
-					highlight-hover-row
-					:menu-config="{}"
-					:print-config="{}"
-					:import-config="{}"
-					:export-config="{}"
-					:data="dataList"
-					:checkbox-config="{}"
-				>
+				<vxe-table border="inner" auto-resize resizable height="auto" :loading="loading" size="small"
+					ref="runningTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
+					:print-config="{}" :import-config="{}" :export-config="{}" :data="dataList" :checkbox-config="{}">
 					<vxe-column type="seq" width="40"></vxe-column>
 					<vxe-column type="checkbox" width="40px"></vxe-column>
 					<vxe-column title="标题" field="vars.title"> </vxe-column>
@@ -85,82 +48,44 @@
 					<vxe-column title="当前节点" field="taskName"></vxe-column>
 					<vxe-column title="流程状态" field="status">
 						<template #default="scope">
-							<el-tag :type="scope.row.level"
-								>{{ scope.row.status }}
+							<el-tag :type="scope.row.level">{{ scope.row.status }}
 							</el-tag>
 						</template>
 					</vxe-column>
-					<vxe-column
-						title="流程发起人"
-						field="vars.userName"
-					></vxe-column>
-					<vxe-column
-						title="操作"
-						width="150px"
-						type="html"
-						fixed="right"
-						align="center"
-					>
+					<vxe-column title="流程发起人" field="vars.userName"></vxe-column>
+					<vxe-column title="操作" width="150px" type="html" fixed="right" align="center">
 						<template #default="scope">
-							<el-button
-								type="primary"
-								text
-								@click="detail(scope.row)"
-								>详情
+							<el-button type="primary" text @click="detail(scope.row)">详情
 							</el-button>
-							<el-button
-								type="primary"
-								text
-								@click="trace(scope.row)"
-								>进度
+							<el-button type="primary" text @click="trace(scope.row)">进度
 							</el-button>
-							<el-button
-								type="danger"
-								text
-								@click="del(scope.row.id)"
-								>作废
+							<el-button type="danger" text @click="del(scope.row.id)">作废
 							</el-button>
 						</template>
 					</vxe-column>
 				</vxe-table>
-				<vxe-pager
-					background
-					size="small"
-					:current-page="tablePage.currentPage"
-					:page-size="tablePage.pageSize"
-					:total="tablePage.total"
-					:page-sizes="[
+				<vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
+					:total="tablePage.total" :page-sizes="[
 						10,
 						20,
 						100,
 						1000,
 						{ label: '全量数据', value: 1000000 },
-					]"
-					:layouts="[
+					]" :layouts="[
 						'PrevPage',
 						'JumpNumber',
 						'NextPage',
 						'FullJump',
 						'Sizes',
 						'Total',
-					]"
-					@page-change="currentChangeHandle"
-				>
+					]" @page-change="currentChangeHandle">
 				</vxe-pager>
-				<v-dialog
-					title="查看进度"
-					:close-on-click-modal="true"
-					v-model="visible"
-					width="70%"
-					height="600px"
-				>
-					<flow-chart
-						ref="preview"
-						:processInstanceId="processInstanceId"
-					></flow-chart>
+				<v-dialog title="查看进度" :close-on-click-modal="true" v-model="visible" width="70%" height="600px">
+					<flow-chart ref="preview" :processInstanceId="processInstanceId"></flow-chart>
 				</v-dialog>
 			</div>
 		</div>
+		<user-select2 ref="userSelect2" @doSubmit="selectUser2"></user-select2>
 	</div>
 </template>
 
@@ -169,12 +94,19 @@
 import pick from "lodash.pick";
 import taskService from "@/api/flowable/taskService";
 import processService from "@/api/flowable/processService";
+import UserSelect2 from '@/views/utils/UserTreeSelect'
 export default {
+	components: {
+		UserSelect2
+	},
 	data() {
 		return {
 			searchVisible: true,
 			searchForm: {
 				title: "",
+				processDefinitionName: "",
+				userName: "",
+				userId: "",
 			},
 			tablePage: {
 				total: 0,
@@ -283,10 +215,24 @@ export default {
 		},
 		resetSearch() {
 			this.$refs.searchForm.resetFields();
+			this.searchForm.userId = "";
 			this.$nextTick(() => {
 				this.refreshList();
 			});
 		},
+		openUserDia2() {
+			this.$refs.userSelect2.init()
+		},
+		selectUser2(user) {
+			this.searchForm.userName = user[0].name
+			this.searchForm.userId = user[0].id
+		},
 	},
 };
 </script>
+
+<style scoped>
+.close-clearable {
+	width: 180px;
+}
+</style>

src/views/utils/UserTreeSelect.vue

@@ -10,7 +10,7 @@
       append-to-body
 	  v-model="visible">
       <div style="height: calc(100% - 80px);">
-        <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+        <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="list()" @submit.native.prevent>
           <!-- 搜索框-->
           <el-form-item label="" prop="name">
             <el-input v-model="searchForm.name" placeholder="请输入用户名称" clearable></el-input>