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