春风项目四线(合箱线、总装线)
wujian
2024-01-31 c74dcb8dca7b9e3eded0d20299f19a26a6b70974
提交 | 用户 | 时间
fd2207 1 <template>
2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4       <el-form-item label="操作地址" prop="operIp">
5         <el-input
6           v-model="queryParams.operIp"
7           placeholder="请输入操作地址"
8           clearable
9           style="width: 240px;"
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="系统模块" prop="title">
14         <el-input
15           v-model="queryParams.title"
16           placeholder="请输入系统模块"
17           clearable
18           style="width: 240px;"
19           @keyup.enter.native="handleQuery"
20         />
21       </el-form-item>
22       <el-form-item label="操作人员" prop="operName">
23         <el-input
24           v-model="queryParams.operName"
25           placeholder="请输入操作人员"
26           clearable
27           style="width: 240px;"
28           @keyup.enter.native="handleQuery"
29         />
30       </el-form-item>
31       <el-form-item label="类型" prop="businessType">
32         <el-select
33           v-model="queryParams.businessType"
34           placeholder="操作类型"
35           clearable
36           style="width: 240px"
37         >
38           <el-option
39             v-for="dict in dict.type.sys_oper_type"
40             :key="dict.value"
41             :label="dict.label"
42             :value="dict.value"
43           />
44         </el-select>
45       </el-form-item>
46       <el-form-item label="状态" prop="status">
47         <el-select
48           v-model="queryParams.status"
49           placeholder="操作状态"
50           clearable
51           style="width: 240px"
52         >
53           <el-option
54             v-for="dict in dict.type.sys_common_status"
55             :key="dict.value"
56             :label="dict.label"
57             :value="dict.value"
58           />
59         </el-select>
60       </el-form-item>
61       <el-form-item label="操作时间">
62         <el-date-picker
63           v-model="dateRange"
64           style="width: 240px"
65           value-format="yyyy-MM-dd HH:mm:ss"
66           type="daterange"
67           range-separator="-"
68           start-placeholder="开始日期"
69           end-placeholder="结束日期"
70           :default-time="['00:00:00', '23:59:59']"
71         ></el-date-picker>
72       </el-form-item>
73       <el-form-item>
74         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
75         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
76       </el-form-item>
77     </el-form>
78
79     <el-row :gutter="10" class="mb8">
80       <el-col :span="1.5">
81         <el-button
82           type="danger"
83           plain
84           icon="el-icon-delete"
85           size="mini"
86           :disabled="multiple"
87           @click="handleDelete"
88           v-hasPermi="['monitor:operlog:remove']"
89         >删除</el-button>
90       </el-col>
91       <el-col :span="1.5">
92         <el-button
93           type="danger"
94           plain
95           icon="el-icon-delete"
96           size="mini"
97           @click="handleClean"
98           v-hasPermi="['monitor:operlog:remove']"
99         >清空</el-button>
100       </el-col>
101       <el-col :span="1.5">
102         <el-button
103           type="warning"
104           plain
105           icon="el-icon-download"
106           size="mini"
107           @click="handleExport"
108           v-hasPermi="['monitor:operlog:export']"
109         >导出</el-button>
110       </el-col>
111       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
112     </el-row>
113
114     <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
115       <el-table-column type="selection" width="50" align="center" />
116       <el-table-column label="日志编号" align="center" prop="operId" />
117       <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
118       <el-table-column label="操作类型" align="center" prop="businessType">
119         <template slot-scope="scope">
120           <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
121         </template>
122       </el-table-column>
123       <el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
124       <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
125       <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
126       <el-table-column label="操作状态" align="center" prop="status">
127         <template slot-scope="scope">
128           <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
129         </template>
130       </el-table-column>
131       <el-table-column label="操作日期" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
132         <template slot-scope="scope">
133           <span>{{ parseTime(scope.row.operTime) }}</span>
134         </template>
135       </el-table-column>
136       <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
137         <template slot-scope="scope">
138           <span>{{ scope.row.costTime }}毫秒</span>
139         </template>
140       </el-table-column>
141       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
142         <template slot-scope="scope">
143           <el-button
144             size="mini"
145             type="text"
146             icon="el-icon-view"
147             @click="handleView(scope.row,scope.index)"
148             v-hasPermi="['monitor:operlog:query']"
149           >详细</el-button>
150         </template>
151       </el-table-column>
152     </el-table>
153
154     <pagination
155       v-show="total>0"
156       :total="total"
157       :page.sync="queryParams.pageNum"
158       :limit.sync="queryParams.pageSize"
159       @pagination="getList"
160     />
161
162     <!-- 操作日志详细 -->
163     <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
164       <el-form ref="form" :model="form" label-width="100px" size="mini">
165         <el-row>
166           <el-col :span="12">
167             <el-form-item label="操作模块:">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
168             <el-form-item
169               label="登录信息:"
170             >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
171           </el-col>
172           <el-col :span="12">
173             <el-form-item label="请求地址:">{{ form.operUrl }}</el-form-item>
174             <el-form-item label="请求方式:">{{ form.requestMethod }}</el-form-item>
175           </el-col>
176           <el-col :span="24">
177             <el-form-item label="操作方法:">{{ form.method }}</el-form-item>
178           </el-col>
179           <el-col :span="24">
180             <el-form-item label="请求参数:">{{ form.operParam }}</el-form-item>
181           </el-col>
182           <el-col :span="24">
183             <el-form-item label="返回参数:">{{ form.jsonResult }}</el-form-item>
184           </el-col>
185           <el-col :span="8">
186             <el-form-item label="操作状态:">
187               <div v-if="form.status === 0">正常</div>
188               <div v-else-if="form.status === 1">失败</div>
189             </el-form-item>
190           </el-col>
191           <el-col :span="8">
192             <el-form-item label="消耗时间:">{{ form.costTime }}毫秒</el-form-item>
193           </el-col>
194           <el-col :span="8">
195             <el-form-item label="操作时间:">{{ parseTime(form.operTime) }}</el-form-item>
196           </el-col>
197           <el-col :span="24">
198             <el-form-item label="异常信息:" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
199           </el-col>
200         </el-row>
201       </el-form>
202       <div slot="footer" class="dialog-footer">
203         <el-button @click="open = false">关 闭</el-button>
204       </div>
205     </el-dialog>
206   </div>
207 </template>
208
209 <script>
210 import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
211
212 export default {
213   name: "Operlog",
214   dicts: ['sys_oper_type', 'sys_common_status'],
215   data() {
216     return {
217       // 遮罩层
218       loading: true,
219       // 选中数组
220       ids: [],
221       // 非多个禁用
222       multiple: true,
223       // 显示搜索条件
224       showSearch: true,
225       // 总条数
226       total: 0,
227       // 表格数据
228       list: [],
229       // 是否显示弹出层
230       open: false,
231       // 日期范围
232       dateRange: [],
233       // 默认排序
234       defaultSort: {prop: 'operTime', order: 'descending'},
235       // 表单参数
236       form: {},
237       // 查询参数
238       queryParams: {
239         pageNum: 1,
240         pageSize: 10,
241         operIp: undefined,
242         title: undefined,
243         operName: undefined,
244         businessType: undefined,
245         status: undefined
246       }
247     };
248   },
249   created() {
250     this.getList();
251   },
252   methods: {
253     /** 查询登录日志 */
254     getList() {
255       this.loading = true;
256       list(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
257           this.list = response.rows;
258           this.total = response.total;
259           this.loading = false;
260         }
261       );
262     },
263     // 操作日志类型字典翻译
264     typeFormat(row, column) {
265       return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType);
266     },
267     /** 搜索按钮操作 */
268     handleQuery() {
269       this.queryParams.pageNum = 1;
270       this.getList();
271     },
272     /** 重置按钮操作 */
273     resetQuery() {
274       this.dateRange = [];
275       this.resetForm("queryForm");
276       this.queryParams.pageNum = 1;
277       this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
278     },
279     /** 多选框选中数据 */
280     handleSelectionChange(selection) {
281       this.ids = selection.map(item => item.operId)
282       this.multiple = !selection.length
283     },
284     /** 排序触发事件 */
285     handleSortChange(column, prop, order) {
286       this.queryParams.orderByColumn = column.prop;
287       this.queryParams.isAsc = column.order;
288       this.getList();
289     },
290     /** 详细按钮操作 */
291     handleView(row) {
292       this.open = true;
293       this.form = row;
294     },
295     /** 删除按钮操作 */
296     handleDelete(row) {
297       const operIds = row.operId || this.ids;
298       this.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function() {
299         return delOperlog(operIds);
300       }).then(() => {
301         this.getList();
302         this.$modal.msgSuccess("删除成功");
303       }).catch(() => {});
304     },
305     /** 清空按钮操作 */
306     handleClean() {
307       this.$modal.confirm('是否确认清空所有操作日志数据项?').then(function() {
308         return cleanOperlog();
309       }).then(() => {
310         this.getList();
311         this.$modal.msgSuccess("清空成功");
312       }).catch(() => {});
313     },
314     /** 导出按钮操作 */
315     handleExport() {
316       this.download('monitor/operlog/export', {
317         ...this.queryParams
318       }, `operlog_${new Date().getTime()}.xlsx`)
319     }
320   }
321 };
322 </script>
323