工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
9 天以前 3e359e4550d018035406a97c190b98f83839ba7f
提交 | 用户 | 时间
39248b 1 <!-- 工作流 - 抄送我的流程 -->
H 2 <template>
3e359e 3
820397 4   <ContentWrap>
H 5     <!-- 搜索工作栏 -->
6     <el-form ref="queryFormRef" :inline="true" class="-mb-15px" label-width="68px">
7       <el-form-item label="流程名称" prop="name">
8         <el-input
9           v-model="queryParams.processInstanceName"
3e359e 10           @keyup.enter="handleQuery"
820397 11           class="!w-240px"
H 12           clearable
13           placeholder="请输入流程名称"
14         />
15       </el-form-item>
16       <el-form-item label="抄送时间" prop="createTime">
17         <el-date-picker
18           v-model="queryParams.createTime"
19           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
20           class="!w-240px"
21           end-placeholder="结束日期"
22           start-placeholder="开始日期"
23           type="daterange"
24           value-format="YYYY-MM-DD HH:mm:ss"
25         />
26       </el-form-item>
27       <el-form-item>
28         <el-button @click="handleQuery">
29           <Icon class="mr-5px" icon="ep:search" />
30           搜索
31         </el-button>
32         <el-button @click="resetQuery">
33           <Icon class="mr-5px" icon="ep:refresh" />
34           重置
35         </el-button>
36       </el-form-item>
37     </el-form>
38   </ContentWrap>
39
40   <!-- 列表 -->
41   <ContentWrap>
42     <el-table v-loading="loading" :data="list">
43       <el-table-column align="center" label="流程名" prop="processInstanceName" min-width="180" />
3e359e 44       <el-table-column
H 45         align="center"
46         label="流程发起人"
47         prop="startUser.nickname"
48         min-width="100"
49       />
820397 50       <el-table-column
H 51         :formatter="dateFormatter"
52         align="center"
53         label="流程发起时间"
54         prop="processInstanceStartTime"
55         width="180"
56       />
3e359e 57       <el-table-column align="center" label="抄送节点" prop="activityName" min-width="180" />
H 58       <el-table-column align="center" label="抄送人" min-width="100">
59         <template #default="scope"> {{ scope.row.createUser?.nickname || '系统' }} </template>
60       </el-table-column>
61       <el-table-column align="center" label="抄送意见" prop="reason" width="150" />
820397 62       <el-table-column
H 63         align="center"
64         label="抄送时间"
65         prop="createTime"
66         width="180"
67         :formatter="dateFormatter"
68       />
69       <el-table-column align="center" label="操作" fixed="right" width="80">
70         <template #default="scope">
71           <el-button link type="primary" @click="handleAudit(scope.row)">详情</el-button>
72         </template>
73       </el-table-column>
74     </el-table>
75     <!-- 分页 -->
76     <Pagination
77       v-model:limit="queryParams.pageSize"
78       v-model:page="queryParams.pageNo"
79       :total="total"
80       @pagination="getList"
81     />
82   </ContentWrap>
83 </template>
84 <script lang="ts" setup>
85 import { dateFormatter } from '@/utils/formatTime'
86 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
87
88 defineOptions({ name: 'BpmProcessInstanceCopy' })
89
90 const { push } = useRouter() // 路由
91
92 const loading = ref(false) // 列表的加载中
93 const total = ref(0) // 列表的总页数
94 const list = ref([]) // 列表的数据
95 const queryParams = reactive({
96   pageNo: 1,
97   pageSize: 10,
98   processInstanceId: '',
99   processInstanceName: '',
100   createTime: []
101 })
102 const queryFormRef = ref() // 搜索的表单
103
104 /** 查询任务列表 */
105 const getList = async () => {
106   loading.value = true
107   try {
108     const data = await ProcessInstanceApi.getProcessInstanceCopyPage(queryParams)
109     list.value = data.list
110     total.value = data.total
111   } finally {
112     loading.value = false
113   }
114 }
115
116 /** 处理审批按钮 */
117 const handleAudit = (row: any) => {
3e359e 118   const query = {
H 119     id: row.processInstanceId,
120     activityId: undefined
121   }
122   if (row.activityId) {
123     query.activityId = row.activityId
124   }
820397 125   push({
H 126     name: 'BpmProcessInstanceDetail',
3e359e 127     query: query
820397 128   })
H 129 }
130
131 /** 搜索按钮操作 */
132 const handleQuery = () => {
133   queryParams.pageNo = 1
134   getList()
135 }
136
137 /** 重置按钮操作 */
138 const resetQuery = () => {
139   queryFormRef.value.resetFields()
140   handleQuery()
141 }
142
143 /** 初始化 **/
144 onMounted(() => {
145   getList()
146 })
147 </script>