工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
6 天以前 ca22cdd5550cfa0defb0f430c538698182cdaec1
提交 | 用户 | 时间
820397 1 <template>
H 2   <ContentWrap>
3     <!-- 搜索工作栏 -->
4     <el-form
5       ref="queryFormRef"
6       :inline="true"
7       :model="queryParams"
8       class="-mb-15px"
9       label-width="68px"
10     >
9259c2 11       <el-form-item label="" prop="name">
820397 12         <el-input
H 13           v-model="queryParams.name"
14           class="!w-240px"
15           clearable
16           placeholder="请输入任务名称"
17           @keyup.enter="handleQuery"
18         />
19       </el-form-item>
20       <el-form-item>
21         <el-button @click="handleQuery">
22           <Icon class="mr-5px" icon="ep:search" />
23           搜索
24         </el-button>
25       </el-form-item>
9259c2 26
H 27       <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
28         <el-select
29           v-model="queryParams.category"
30           placeholder="请选择流程分类"
31           clearable
32           class="!w-155px"
33           @change="handleQuery"
34         >
35           <el-option
36             v-for="category in categoryList"
37             :key="category.code"
38             :label="category.name"
39             :value="category.code"
40           />
41         </el-select>
42       </el-form-item>
43
44       <el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
45         <el-select
46           v-model="queryParams.status"
47           placeholder="请选择流程状态"
48           clearable
49           class="!w-155px"
50           @change="handleQuery"
51         >
52           <el-option
53             v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
54             :key="dict.value"
55             :label="dict.label"
56             :value="dict.value"
57           />
58         </el-select>
59       </el-form-item>
60
61       <!-- 高级筛选 -->
62       <el-form-item :style="{ position: 'absolute', right: '0px' }">
63         <el-popover
64           :visible="showPopover"
65           persistent
66           :width="400"
67           :show-arrow="false"
68           placement="bottom-end"
69         >
70           <template #reference>
71             <el-button @click="showPopover = !showPopover" >
72               <Icon icon="ep:plus" class="mr-5px" />高级筛选
73             </el-button>
74
75           </template>
76           <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
77             <el-select
78               v-model="queryParams.category"
79               placeholder="请选择流程发起人"
80               clearable
81               class="!w-390px"
82             >
83               <el-option
84                 v-for="category in categoryList"
85                 :key="category.code"
86                 :label="category.name"
87                 :value="category.code"
88               />
89             </el-select>
90           </el-form-item>
91           <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
92             <el-date-picker
93               v-model="queryParams.createTime"
94               value-format="YYYY-MM-DD HH:mm:ss"
95               type="daterange"
96               start-placeholder="开始日期"
97               end-placeholder="结束日期"
98               :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
99               class="!w-240px"
100             />
101           </el-form-item>
102           <el-form-item class="bold-label" label-position="top">
103             <el-button @click="handleQuery"> 确认</el-button>
104             <el-button @click="showPopover = false"> 取消</el-button>
105             <el-button @click="resetQuery"> 清空</el-button>
106         </el-form-item>
107         </el-popover>
108       </el-form-item>
109
820397 110     </el-form>
H 111   </ContentWrap>
112
113   <!-- 列表 -->
114   <ContentWrap>
115     <el-table v-loading="loading" :data="list">
116       <el-table-column align="center" label="流程" prop="processInstance.name" width="180" />
117       <el-table-column
118         align="center"
119         label="发起人"
120         prop="processInstance.startUser.nickname"
121         width="100"
122       />
123       <el-table-column
124         :formatter="dateFormatter"
125         align="center"
126         label="发起时间"
127         prop="createTime"
128         width="180"
129       />
130       <el-table-column align="center" label="当前任务" prop="name" width="180" />
131       <el-table-column
132         :formatter="dateFormatter"
133         align="center"
134         label="任务开始时间"
135         prop="createTime"
136         width="180"
137       />
138       <el-table-column
139         :formatter="dateFormatter"
140         align="center"
141         label="任务结束时间"
142         prop="endTime"
143         width="180"
144       />
145       <el-table-column align="center" label="审批状态" prop="status" width="120">
146         <template #default="scope">
147           <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
148         </template>
149       </el-table-column>
150       <el-table-column align="center" label="审批建议" prop="reason" min-width="180" />
151       <el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
152         <template #default="scope">
153           {{ formatPast2(scope.row.durationInMillis) }}
154         </template>
155       </el-table-column>
156       <el-table-column align="center" label="流程编号" prop="id" :show-overflow-tooltip="true" />
157       <el-table-column align="center" label="任务编号" prop="id" :show-overflow-tooltip="true" />
158       <el-table-column align="center" label="操作" fixed="right" width="80">
159         <template #default="scope">
160           <el-button link type="primary" @click="handleAudit(scope.row)">历史</el-button>
161         </template>
162       </el-table-column>
163     </el-table>
164     <!-- 分页 -->
165     <Pagination
166       v-model:limit="queryParams.pageSize"
167       v-model:page="queryParams.pageNo"
168       :total="total"
169       @pagination="getList"
170     />
171   </ContentWrap>
172 </template>
173 <script lang="ts" setup>
9259c2 174 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
820397 175 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
H 176 import * as TaskApi from '@/api/bpm/task'
9259c2 177 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
820397 178
H 179 defineOptions({ name: 'BpmTodoTask' })
180
181 const { push } = useRouter() // 路由
182
183 const loading = ref(true) // 列表的加载中
184 const total = ref(0) // 列表的总页数
185 const list = ref([]) // 列表的数据
186 const queryParams = reactive({
187   pageNo: 1,
188   pageSize: 10,
189   name: '',
9259c2 190   category: undefined,
H 191   status: undefined,
820397 192   createTime: []
H 193 })
194 const queryFormRef = ref() // 搜索的表单
9259c2 195 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
H 196 const showPopover = ref(false)
820397 197
H 198 /** 查询任务列表 */
199 const getList = async () => {
200   loading.value = true
201   try {
202     const data = await TaskApi.getTaskDonePage(queryParams)
203     list.value = data.list
204     total.value = data.total
205   } finally {
206     loading.value = false
207   }
208 }
209
210 /** 搜索按钮操作 */
211 const handleQuery = () => {
212   queryParams.pageNo = 1
213   getList()
214 }
215
216 /** 重置按钮操作 */
217 const resetQuery = () => {
218   queryFormRef.value.resetFields()
219   handleQuery()
220 }
221
222 /** 处理审批按钮 */
223 const handleAudit = (row: any) => {
224   push({
225     name: 'BpmProcessInstanceDetail',
226     query: {
3e359e 227       id: row.processInstance.id,
H 228       taskId: row.id
820397 229     }
H 230   })
231 }
232
233 /** 初始化 **/
9259c2 234 onMounted(async () => {
H 235   await getList()
236   categoryList.value = await CategoryApi.getCategorySimpleList()
820397 237 })
H 238 </script>