选煤厂生产管理平台前端代码
dongyukun
2024-12-12 73d7500457564a3f5b1aae94ef18fd295e9f4f9c
提交 | 用户 | 时间
c3134f 1 <template>
D 2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-tabs v-model="typeName" @tab-click="handleClick">
12         <el-tab-pane label="全部" name="first"/>
13         <el-tab-pane label="抄送给我" name="fifth"/>
14         <el-tab-pane label="我处理的" name="second"/>
15         <el-tab-pane label="我发起的" name="third"/>
16       </el-tabs>
17       <el-tabs v-model="activeName" @tab-click="handleClick">
18         <el-tab-pane label="全部" name="first"/>
19         <el-tab-pane label="待审核" name="fifth"/>
20         <el-tab-pane label="待处理" name="second"/>
21         <el-tab-pane label="处理中" name="third"/>
22         <el-tab-pane label="已完成" name="fourth"/>
23       </el-tabs>
24       <el-form-item label="开始时间">
25         <el-date-picker
26           size="mini"
27           v-model="queryParams.startTime"
28           format="YYYY-MM-DD HH:mm:00"
29           value-format="YYYY-MM-DD HH:mm:00"
30           type="datetime"
31           :clearable="false"
32           placeholder="选择日期时间"/>
33       </el-form-item>
34       <el-form-item label="结束时间">
35         <el-date-picker
36           size="mini"
37           v-model="queryParams.endTime"
38           format="YYYY-MM-DD HH:mm:00"
39           value-format="YYYY-MM-DD HH:mm:00"
40           type="datetime"
41           :clearable="false"
42           placeholder="选择日期时间"/>
43       </el-form-item>
44       <el-form-item label="工单类型" prop="xsmz">
45         <el-select
46           v-model="queryParams.xsmz"
47           class="!w-240px"
48           clearable
49           placeholder="请选择工单类型"
50         >
51           <el-option
52             v-for="dict in getIntDictOptions(DICT_TYPE.PMS_XSMZ)"
53             :key="dict.value"
54             :label="dict.label"
55             :value="dict.value"
56           />
57         </el-select>
58       </el-form-item>
59       <el-form-item>
60         <el-input v-model="queryParams.orderNumber" placeholder="工单编号" clearable/>
61       </el-form-item>
62       <el-form-item>
63         <el-input v-model="queryParams.content" placeholder="工单内容" clearable/>
64       </el-form-item>
65       <el-form-item>
66         <el-button type="primary" @click="readHandle()" :disabled="disabled">批量已读</el-button>
67       </el-form-item>
68       <el-form-item>
69         <el-button @click="handleQuery">
70           <Icon icon="ep:search" class="mr-5px"/>
71           搜索
72         </el-button>
73         <el-button @click="resetQuery">
74           <Icon icon="ep:refresh" class="mr-5px"/>
373c50 75           刷新
c3134f 76         </el-button>
D 77       </el-form-item>
78     </el-form>
79   </ContentWrap>
80
81   <!-- 列表 -->
82   <ContentWrap>
83     <el-table border stripe v-loading="loading" :data="list">
84       <el-table-column type="selection" header-align="center" align="center" width="50"/>
85       <!--      <el-table-column type="index" header-align="center" align="center" width="50" label="序号"/>-->
86       <el-table-column prop="statusName" header-align="center" align="center" width="80" label="状态">
87         <template #default="scope">
88           <el-tag v-if="scope.row.status === '0'" size="small" effect="dark" color="#b8d900"
89                   style="border: 0px; padding-top: 1px">待处理
90           </el-tag>
91           <el-tag v-if="scope.row.status === '1'" size="small" effect="dark" color="#3290f9"
92                   style="border: 0px; padding-top: 1px">处理中
93           </el-tag>
94           <el-tag v-if="scope.row.status === '2'" size="small" effect="dark" color="#00b5ad"
95                   style="border: 0px; padding-top: 1px">已完成
96           </el-tag>
97           <el-tag v-if="scope.row.status === '3'" size="small" effect="dark" color="#ffb517"
98                   style="border: 0px; padding-top: 1px">待审核
99           </el-tag>
100         </template>
101       </el-table-column>
102       <el-table-column prop="orderNumber" header-align="center" align="center" min-width="140"
103                        label="工单编号"/>
104       <el-table-column prop="title" header-align="center" align="left" width="200" label="工单标题"/>
105       <el-table-column prop="content" header-align="center" align="left" min-width="300"
106                        label="工单内容" show-overflow-tooltip/>
107       <el-table-column prop="publisherName" header-align="center" align="center" width="80"
108                        label="发布人"/>
109       <el-table-column prop="assignerName" header-align="center" align="center" width="80"
110                        label="办理人"/>
111       <el-table-column prop="publishTime" header-align="center" align="center" min-width="150"
112                        label="发布时间"/>
113       <el-table-column prop="deadline" header-align="center" align="center" min-width="150"
114                        label="截止时间"/>
115       <el-table-column prop="isTimeout" header-align="center" align="center" width="80"
116                        label="是否超时">
117         <template #default="scope">
118           <el-tag v-if="scope.row.isTimeout === '0'">否</el-tag>
119           <el-tag v-if="scope.row.isTimeout === '1'" type="danger">是</el-tag>
120         </template>
121       </el-table-column>
122       <el-table-column prop="readStatus" header-align="center" align="center" width="80"
123                        label="是否已读">
124         <template #default="scope">
125           <el-tag v-if="scope.row.readStatus === '0'" type="danger">否</el-tag>
126           <el-tag v-if="scope.row.readStatus === '1'">是</el-tag>
127         </template>
128       </el-table-column>
129       <el-table-column label="操作" fixed="right" header-align="center" align="center"
130                        width="100" height="100%">
131         <template #default="scope">
132           <el-button type="text" size="small"
133                      @click="orderTaskHandleView(scope.row.id, scope.row.orderType,scope.row.status)">
134             详情
135           </el-button>
136         </template>
137       </el-table-column>
138     </el-table>
139     <!-- 分页 -->
140     <Pagination
141       :total="total"
142       v-model:page="queryParams.pageNo"
143       v-model:limit="queryParams.pageSize"
144       @pagination="getList"
145     />
146   </ContentWrap>
147   <!--电耗明细-->
148   <Form ref="formRef"/>
149 </template>
150 <script lang="ts" setup>
151   import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
152   import * as Task from '@/api/process/task'
153   import {ref} from "vue";
154
155   defineOptions({name: 'Task'})
156
157   const message = useMessage() // 消息弹窗
158   const {t} = useI18n() // 国际化
159
160   const loading = ref(true) // 列表的加载中
161   const total = ref(0) // 列表的总页数
162   const list = ref([]) // 列表的数据
163   const queryParams = reactive({
164     pageNo: 1,
165     pageSize: 10,
166     startDate: undefined,
167     endDate: undefined,
168     xsmz: undefined
169   })
170   const queryFormRef = ref() // 搜索的表单
171
172   /** 查询列表 */
173   const getList = async () => {
174     loading.value = true
175     try {
176       const page = await Task.getTaskPage(queryParams)
177       list.value = page.list
178       total.value = page.total
179     } finally {
180       loading.value = false
181     }
182   }
183
184   /** 搜索按钮操作 */
185   const handleQuery = () => {
186     queryParams.pageNo = 1
187     getList()
188   }
189
190   /** 查看数据操作 */
191   const chartView = ref()
192   const chartHandle = (raw: object) => {
193     chartView.value.open(raw)
194   }
195
196   /** 重置按钮操作 */
197   const resetQuery = () => {
198     queryFormRef.value.resetFields()
199     handleQuery()
200   }
201
202   /** 添加/修改操作 */
203   const formRef = ref()
204   const openForm = (type: string, id?: number) => {
205     formRef.value.open(type, id)
206   }
207
208   /** 删除按钮操作 */
209   const handleDelete = async (id: number) => {
210     try {
211       // 删除的二次确认
212       await message.delConfirm()
213       // 发起删除
214       await Task.deleteTask(id)
215       message.success(t('common.delSuccess'))
216       // 刷新列表
217       await getList()
218     } catch {
219     }
220   }
221
222   /** 初始化 **/
223   onMounted(async () => {
224     await getList()
225   })
226 </script>