hdy
2024-03-23 21508c20a9b80b959d935bdf4ed55002fcff8d16
提交 | 用户 | 时间
523903 1 <template>
2   <div class="app-container">
3     <el-card class="box-card">
4         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
5           <el-form-item label="计划编号" prop="planCode">
6             <el-input
7               v-model="queryParams.planCode"
8               placeholder="请输入计划编号"
9               clearable
10               @keyup.enter.native="handleQuery"
11             />
12           </el-form-item>
13           <el-form-item label="计划名称" prop="planName">
14             <el-input
15               v-model="queryParams.planName"
16               placeholder="请输入计划名称"
17               clearable
18               @keyup.enter.native="handleQuery"
19             />
20           </el-form-item>
21 <!--          <el-form-item label="计划类型" prop="planType">-->
22 <!--            <el-select v-model="queryParams.planType" placeholder="请选择计划类型" clearable>-->
23 <!--              <el-option-->
24 <!--                v-for="dict in dict.type.${dictType}"-->
25 <!--                :key="dict.value"-->
26 <!--                :label="dict.label"-->
27 <!--                :value="dict.value"-->
28 <!--              />-->
29 <!--            </el-select>-->
30 <!--          </el-form-item>-->
31           <el-form-item label="状态" prop="state">
32             <el-input
33               v-model="queryParams.state"
34               placeholder="请输入状态"
35               clearable
36               @keyup.enter.native="handleQuery"
37             />
38           </el-form-item>
39           <el-form-item label="设备编码" prop="devicesCode">
40             <el-input
41               v-model="queryParams.devicesCode"
42               placeholder="请输入设备编码"
43               clearable
44               @keyup.enter.native="handleQuery"
45             />
46           </el-form-item>
47           <el-form-item label="设备名称" prop="devicesName">
48             <el-input
49               v-model="queryParams.devicesName"
50               placeholder="请输入设备名称"
51               clearable
52               @keyup.enter.native="handleQuery"
53             />
54           </el-form-item>
55           <el-form-item style="float: right">
56             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
57             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
58           </el-form-item>
59         </el-form>
60     </el-card>
61
62     <el-card style="margin-top: 10px" class="box-card">
63         <el-row :gutter="10" class="mb8">
64           <el-col :span="1.5">
65             <el-button
66               type="primary"
67               plain
68               icon="el-icon-plus"
69               size="mini"
70               @click="handleAdd"
71               v-hasPermi="['em:inspectionPlanTask:add']"
72             >新增</el-button>
73           </el-col>
74           <el-col :span="1.5">
75             <el-button
76               type="success"
77               plain
78               icon="el-icon-edit"
79               size="mini"
80               :disabled="single"
81               @click="handleUpdate"
82               v-hasPermi="['em:inspectionPlanTask:edit']"
83             >修改</el-button>
84           </el-col>
85           <el-col :span="1.5">
86             <el-button
87               type="danger"
88               plain
89               icon="el-icon-delete"
90               size="mini"
91               :disabled="multiple"
92               @click="handleDelete"
93               v-hasPermi="['em:inspectionPlanTask:remove']"
94             >删除</el-button>
95           </el-col>
96           <el-col :span="1.5">
97             <el-button
98               type="warning"
99               plain
100               icon="el-icon-download"
101               size="mini"
102               @click="handleExport"
103               v-hasPermi="['em:inspectionPlanTask:export']"
104             >导出</el-button>
105           </el-col>
106           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
107         </el-row>
108
109         <el-table border v-loading="loading" :data="inspectionPlanTaskList" @selection-change="handleSelectionChange">
110           <el-table-column type="selection" width="55" align="center" />
111           <el-table-column label="ID" align="center" prop="id" />
112           <el-table-column label="计划编号" align="center" prop="planCode">
113           </el-table-column>
114           <el-table-column label="计划名称" align="center" prop="planName">
115           </el-table-column>
116           <el-table-column label="计划类型" align="center" prop="planType">
117           </el-table-column>
118           <el-table-column label="状态" align="center" prop="state">
119           </el-table-column>
120           <el-table-column label="设备编码" align="center" prop="devicesCode">
121           </el-table-column>
122           <el-table-column label="设备名称" align="center" prop="devicesName">
123           </el-table-column>
124           <el-table-column label="品牌" align="center" prop="brand">
125           </el-table-column>
126           <el-table-column label="规格" align="center" prop="specs">
127           </el-table-column>
128           <el-table-column label="结果" align="center" prop="results">
129           </el-table-column>
130           <el-table-column label="备注" align="center" prop="remarks">
131           </el-table-column>
132           <el-table-column label="创建时间" align="center" prop="createTime">
133           </el-table-column>
134           <el-table-column label="创建人" align="center" prop="createUser">
135           </el-table-column>
136           <el-table-column label="修改时间" align="center" prop="updateTime">
137           </el-table-column>
138           <el-table-column label="修改人" align="center" prop="updateUser">
139           </el-table-column>
140           <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
141             <template slot-scope="scope">
142               <el-button
143                 size="mini"
144                 type="success"
145                 plain
146                 style="width: 72px"
147                 icon="el-icon-edit"
148                 @click="handleUpdate(scope.row)"
149                 v-hasPermi="['em:inspectionPlanTask:edit']"
150               >修改</el-button>
151               <el-button
152                 size="mini"
153                 type="danger"
154                 plain
155                 style="width: 72px"
156                 icon="el-icon-delete"
157                 @click="handleDelete(scope.row)"
158                 v-hasPermi="['em:inspectionPlanTask:remove']"
159               >删除</el-button>
160             </template>
161           </el-table-column>
162         </el-table>
163     </el-card>
164
165     <pagination
166       v-show="total>0"
167       :total="total"
168       :page.sync="queryParams.pageNum"
169       :limit.sync="queryParams.pageSize"
170       @pagination="getList"
171     />
172
173     <!-- 添加或修改点检任务对话框 -->
174     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
175       <span slot="title">
176         <i class="el-icon-s-order"></i>
177         {{titleName}}
178       </span>
179       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
180         <el-form-item label="计划编号" prop="planCode">
181           <el-input v-model="form.planCode" placeholder="请输入计划编号" />
182         </el-form-item>
183         <el-form-item label="计划名称" prop="planName">
184           <el-input v-model="form.planName" placeholder="请输入计划名称" />
185         </el-form-item>
186 <!--        <el-form-item label="计划类型" prop="planType">-->
187 <!--          <el-select v-model="form.planType" placeholder="请选择计划类型">-->
188 <!--            <el-option-->
189 <!--              v-for="dict in dict.type.${dictType}"-->
190 <!--              :key="dict.value"-->
191 <!--              :label="dict.label"-->
192 <!--              :value="dict.value"-->
193 <!--            ></el-option>-->
194 <!--          </el-select>-->
195 <!--        </el-form-item>-->
196         <el-form-item label="状态" prop="state">
197           <el-input v-model="form.state" placeholder="请输入状态" />
198         </el-form-item>
199         <el-form-item label="设备编码" prop="devicesCode">
200           <el-input v-model="form.devicesCode" placeholder="请输入设备编码" />
201         </el-form-item>
202         <el-form-item label="设备名称" prop="devicesName">
203           <el-input v-model="form.devicesName" placeholder="请输入设备名称" />
204         </el-form-item>
205         <el-form-item label="品牌" prop="brand">
206           <el-input v-model="form.brand" placeholder="请输入品牌" />
207         </el-form-item>
208         <el-form-item label="规格" prop="specs">
209           <el-input v-model="form.specs" placeholder="请输入规格" />
210         </el-form-item>
211         <el-form-item label="结果" prop="results">
212           <el-input v-model="form.results" placeholder="请输入结果" />
213         </el-form-item>
214         <el-form-item label="备注" prop="remarks">
215           <el-input v-model="form.remarks" placeholder="请输入备注" />
216         </el-form-item>
217         <el-form-item label="创建人" prop="createUser">
218           <el-input v-model="form.createUser" placeholder="请输入创建人" />
219         </el-form-item>
220         <el-form-item label="修改人" prop="updateUser">
221           <el-input v-model="form.updateUser" placeholder="请输入修改人" />
222         </el-form-item>
223       </el-form>
224       <div slot="footer" class="dialog-footer">
225         <el-button type="primary" @click="submitForm">确 定</el-button>
226         <el-button @click="cancel">取 消</el-button>
227       </div>
228     </el-dialog>
229   </div>
230 </template>
231
232 <script>
233 import { listInspectionPlanTask, getInspectionPlanTask, delInspectionPlanTask, addInspectionPlanTask, updateInspectionPlanTask } from "@/api/main/em/inspectionPlanTask/inspectionPlanTask";
234
235 export default {
236   name: "InspectionPlanTask",
237   data() {
238     return {
239       // 遮罩层
240       loading: true,
241       titleName: "",
242       // 选中数组
243       ids: [],
244       // 非单个禁用
245       single: true,
246       // 非多个禁用
247       multiple: true,
248       // 显示搜索条件
249       showSearch: true,
250       // 总条数
251       total: 0,
252       // 点检任务表格数据
253       inspectionPlanTaskList: [],
254       // 弹出层标题
255       title: "",
256       // 是否显示弹出层
257       open: false,
258       // 查询参数
259       queryParams: {
260         pageNum: 1,
261         pageSize: 10,
262         planCode: null,
263         planName: null,
264         planType: null,
265         state: null,
266         devicesCode: null,
267         devicesName: null,
268       },
269       // 表单参数
270       form: {},
271       // 表单校验
272       rules: {
273         id: [
274           { required: true, message: "ID不能为空", trigger: "blur" }
275         ],
276       }
277     };
278   },
279   created() {
280     this.getList();
281   },
282   methods: {
283     /** 查询点检任务列表 */
284     getList() {
285       this.loading = true;
286       listInspectionPlanTask(this.queryParams).then(response => {
287         this.inspectionPlanTaskList = response.rows;
288         this.total = response.total;
289         this.loading = false;
290       });
291     },
292     // 取消按钮
293     cancel() {
294       this.open = false;
295       this.reset();
296     },
297     // 表单重置
298     reset() {
299       this.form = {
300         id: null,
301         planCode: null,
302         planName: null,
303         planType: null,
304         state: null,
305         devicesCode: null,
306         devicesName: null,
307         brand: null,
308         specs: null,
309         results: null,
310         remarks: null,
311         createTime: null,
312         createUser: null,
313         updateTime: null,
314         updateUser: null,
315         spareField1: null,
316         spareField2: null,
317         spareField3: null,
318         spareField4: null
319       };
320       this.resetForm("form");
321     },
322     /** 搜索按钮操作 */
323     handleQuery() {
324       this.queryParams.pageNum = 1;
325       this.getList();
326     },
327     /** 重置按钮操作 */
328     resetQuery() {
329       this.resetForm("queryForm");
330       this.handleQuery();
331     },
332     // 多选框选中数据
333     handleSelectionChange(selection) {
334       this.ids = selection.map(item => item.id)
335       this.single = selection.length!==1
336       this.multiple = !selection.length
337     },
338     /** 新增按钮操作 */
339     handleAdd() {
340       this.reset();
341       this.open = true;
342       this.titleName = "添加点检任务";
343     },
344     /** 修改按钮操作 */
345     handleUpdate(row) {
346       this.reset();
347       const id = row.id || this.ids
348       getInspectionPlanTask(id).then(response => {
349         this.form = response.data;
350         this.open = true;
351         this.titleName = "修改点检任务";
352       });
353     },
354     /** 提交按钮 */
355     submitForm() {
356       this.$refs["form"].validate(valid => {
357         if (valid) {
358           if (this.form.id != null) {
359             updateInspectionPlanTask(this.form).then(response => {
360               this.$modal.msgSuccess("修改成功");
361               this.open = false;
362               this.getList();
363             });
364           } else {
365             addInspectionPlanTask(this.form).then(response => {
366               this.$modal.msgSuccess("新增成功");
367               this.open = false;
368               this.getList();
369             });
370           }
371         }
372       });
373     },
374     /** 删除按钮操作 */
375     handleDelete(row) {
376       const ids = row.id || this.ids;
377       this.$modal.confirm('是否确认删除点检任务编号为"' + ids + '"的数据项?').then(function() {
378         return delInspectionPlanTask(ids);
379       }).then(() => {
380         this.getList();
381         this.$modal.msgSuccess("删除成功");
382       }).catch(() => {});
383     },
384     /** 导出按钮操作 */
385     handleExport() {
386       this.download('em/inspectionPlanTask/export', {
387         ...this.queryParams
388       }, `inspectionPlanTask_${new Date().getTime()}.xlsx`)
389     }
390   }
391 };
392 </script>