blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-15 d734432a8bbbf863dc3de305f56e831c56ac767a
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <x-card v-if="hasPerm('sysOpLog:page')">
4       <div slot="content" class="table-page-search-wrapper">
5         <a-form layout="inline">
6           <a-row :gutter="48">
7             <a-col :md="8" :sm="24">
8               <a-form-item label="日志名称">
9                 <a-input v-model="queryParam.name" allow-clear placeholder="请输入日志名称"/>
10               </a-form-item>
11             </a-col>
12             <a-col :md="8" :sm="24">
13               <a-form-item label="操作类型">
14                 <a-select v-model="queryParam.opType" allow-clear placeholder="请选择操作类型" >
15                   <a-select-option v-for="(item,index) in opTypeDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
16                 </a-select>
17               </a-form-item>
18             </a-col>
19             <template v-if="advanced">
20               <a-col :md="8" :sm="24">
21                 <a-form-item label="是否成功">
22                   <a-select v-model="queryParam.success" placeholder="请选择是否成功" >
23                     <a-select-option v-for="(item,index) in successDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
24                   </a-select>
25                 </a-form-item>
26               </a-col>
27               <a-col :md="10" :sm="24">
28                 <a-form-item label="操作时间">
29                   <a-range-picker
30                     v-model="queryParam.dates"
31                     :show-time="{
32                       hideDisabledOptions: true,
33                       defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
34                     }"
35                     format="YYYY-MM-DD HH:mm:ss"
36                   />
37                 </a-form-item>
38               </a-col>
39             </template>
40             <a-col :md="!advanced && 8 || 24" :sm="24">
41               <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
42                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
43                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
44                 <a @click="toggleAdvanced" style="margin-left: 8px">
45                   {{ advanced ? '收起' : '展开' }}
46                   <a-icon :type="advanced ? 'up' : 'down'"/>
47                 </a>
48               </span>
49             </a-col>
50           </a-row>
51         </a-form>
52       </div>
53     </x-card>
54     <a-card :bordered="false">
55       <s-table
56         ref="table"
57         :columns="columns"
58         :data="loadData"
59         :alert="false"
60         :rowKey="(record) => record.id"
61       >
62         <template slot="operator">
63           <a-popconfirm v-if="hasPerm('sysOpLog:delete')" @confirm="() => sysOpLogDelete()" placement="top" title="确认清空日志？">
64             <a-button type="danger" ghost>清空日志</a-button>
65           </a-popconfirm>
66           <x-down
67             v-if="hasPerm('sysOpLog:export')"
68             ref="batchExport"
69             @batchExport="batchExport"
70           />
71         </template>
72         <span slot="opType" slot-scope="text">
73           {{ 'op_type' | dictType(text) }}
74         </span>
75         <span slot="success" slot-scope="text">
76           {{ 'yes_or_no' | dictType(text) }}
77         </span>
78         <span slot="name" slot-scope="text">
79           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
80         </span>
81         <span slot="url" slot-scope="text">
82           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
83         </span>
84         <span slot="opTime" slot-scope="text">
85           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
86         </span>
87         <span slot="action" slot-scope="text, record">
88           <span slot="action" >
89             <a @click="$refs.detailsOplog.details(record)">查看详情</a>
90           </span>
91         </span>
92       </s-table>
93       <details-oplog ref="detailsOplog"/>
94     </a-card>
95   </div>
96 </template>
97 <script>
98   import { STable, Ellipsis, XCard, XDown } from '@/components'
99   import { sysOpLogPage, sysOpLogDelete, sysOpLogExport } from '@/api/modular/system/logManage'
100   import detailsOplog from './details'
101   import moment from 'moment'
102   export default {
103     components: {
104       XDown,
105       XCard,
106       STable,
107       Ellipsis,
108       detailsOplog
109     },
110     data () {
111       return {
112         advanced: false,
113         // 查询参数
114         queryParam: {},
115         // 表头
116         columns: [
117           {
118             title: '日志名称',
119             dataIndex: 'name',
120             scopedSlots: { customRender: 'name' }
121           },
122           {
123             title: '操作类型',
124             dataIndex: 'opType',
125             scopedSlots: { customRender: 'opType' }
126           },
127           {
128             title: '执行结果',
129             dataIndex: 'success',
130             scopedSlots: { customRender: 'success' }
131           },
132           {
133             title: 'ip',
134             dataIndex: 'ip'
135           },
136           {
137             title: '请求地址',
138             dataIndex: 'url',
139             scopedSlots: { customRender: 'url' }
140           },
141           {
142             title: '操作时间',
143             dataIndex: 'opTime',
144             scopedSlots: { customRender: 'opTime' }
145           },
146           {
147             title: '操作人',
148             dataIndex: 'account'
149           },
150           {
151             title: '详情',
152             dataIndex: 'action',
153             width: '150px',
154             scopedSlots: { customRender: 'action' }
155           }
156         ],
157         // 加载数据方法 必须为 Promise 对象
158         loadData: parameter => {
159           return sysOpLogPage(Object.assign(parameter, this.switchingDate())).then((res) => {
160             return res.data
161           })
162         },
163         opTypeDict: [],
164         successDict: []
165       }
166     },
167     created () {
168       this.sysDictTypeDropDown()
169     },
170     methods: {
171       moment,
172       /**
173        * 查询参数组装
174        */
175       switchingDate () {
176         const dates = this.queryParam.dates
177         if (dates != null) {
178           this.queryParam.searchBeginTime = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss')
179           this.queryParam.searchEndTime = moment(dates[1]).format('YYYY-MM-DD HH:mm:ss')
180           if (dates.length < 1) {
181             delete this.queryParam.searchBeginTime
182             delete this.queryParam.searchEndTime
183           }
184         }
185         const obj = JSON.parse(JSON.stringify(this.queryParam))
186         delete obj.dates
187         return obj
188       },
189       /**
190        * 获取字典数据
191        */
192       sysDictTypeDropDown () {
193         this.opTypeDict = this.$options.filters['dictData']('op_type')
194         this.successDict = this.$options.filters['dictData']('yes_or_no')
195       },
196       /**
197        * 清空日志
198        */
199       sysOpLogDelete () {
200         sysOpLogDelete().then((res) => {
201           if (res.success) {
202             this.$message.success('清空成功')
203             this.$refs.table.refresh(true)
204           } else {
205             this.$message.error('清空失败：' + res.message)
206           }
207         })
208       },
209       /**
210        * 批量导出
211        */
212       batchExport () {
213         sysOpLogExport().then((res) => {
214           this.$refs.batchExport.downloadfile(res)
215         })
216       },
217       toggleAdvanced () {
218         this.advanced = !this.advanced
219       }
220     }
221   }
222 </script>
223 <style lang="less">
224   .table-operator {
225     margin-bottom: 18px;
226   }
227   button {
228     margin-right: 8px;
229   }
230 </style>