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