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