blog的后端代码
view | history | commit | commitdiff
inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <x-card v-if="hasPerm('sysVisLog: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.visType" allow-clear placeholder="请选择访问类型" >
15                   <a-select-option v-for="(item,index) in visTypeDict" :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         :columns="columns"
57         :data="loadData"
58         :rowKey="(record) => record.id"
59         :alert="false"
60         ref="table"
61       >
62         <template slot="operator">
63           <a-popconfirm @confirm="() => sysVisLogDelete()" placement="top" title="确认清空日志？" v-if="hasPerm('sysVisLog:delete')">
64             <a-button type="danger" ghost>清空日志</a-button>
65           </a-popconfirm>
66           <x-down
67             v-if="hasPerm('sysVisLog:export')"
68             ref="batchExport"
69             @batchExport="batchExport"
70           />
71         </template>
72         <span slot="name" slot-scope="text">
73           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
74         </span>
75         <span slot="visTime" slot-scope="text">
76           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
77         </span>
78         <span slot="visType" slot-scope="text">
79           {{ 'vis_type' | dictType(text) }}
80         </span>
81         <span slot="success" slot-scope="text">
82           {{ 'yes_or_no' | dictType(text) }}
83         </span>
84         <span slot="action" slot-scope="text, record">
85           <span slot="action" >
86             <a @click="$refs.detailsVislog.details(record)">查看详情</a>
87           </span>
88         </span>
89       </s-table>
90       <details-vislog ref="detailsVislog"/>
91     </a-card>
92   </div>
93 </template>
94 <script>
95   import { STable, Ellipsis, XCard, XDown } from '@/components'
96   import { sysVisLogPage, sysVisLogDelete, sysVisLogExport } from '@/api/modular/system/logManage'
97   import detailsVislog from './details'
98   import moment from 'moment'
99   export default {
100     components: {
101       XDown,
102       XCard,
103       STable,
104       Ellipsis,
105       detailsVislog
106     },
107     data () {
108       return {
109         advanced: false,
110         // 查询参数
111         queryParam: {},
112         // 表头
113         columns: [
114           {
115             title: '日志名称',
116             dataIndex: 'name',
117             scopedSlots: { customRender: 'name' }
118           },
119           {
120             title: '访问类型',
121             dataIndex: 'visType',
122             scopedSlots: { customRender: 'visType' }
123           },
124           {
125             title: '是否成功',
126             dataIndex: 'success',
127             scopedSlots: { customRender: 'success' }
128           },
129           {
130             title: 'ip',
131             dataIndex: 'ip'
132           },
133           {
134             title: '浏览器',
135             dataIndex: 'browser'
136           },
137           {
138             title: '访问时间',
139             dataIndex: 'visTime',
140             scopedSlots: { customRender: 'visTime' }
141           },
142           {
143             title: '访问人',
144             dataIndex: 'account'
145           },
146           {
147             title: '详情',
148             dataIndex: 'action',
149             width: '150px',
150             scopedSlots: { customRender: 'action' }
151           }
152         ],
153         // 加载数据方法 必须为 Promise 对象
154         loadData: parameter => {
155           return sysVisLogPage(Object.assign(parameter, this.switchingDate())).then((res) => {
156             return res.data
157           })
158         },
159         defaultExpandedKeys: [],
160         visTypeDict: [],
161         successDict: []
162       }
163     },
164     /**
165      * 相当于html的onload方法，进来初始化
166      */
167     created () {
168       this.sysDictTypeDropDown()
169     },
170     methods: {
171       moment,
172       /**
173        * 获取字典数据
174        */
175       sysDictTypeDropDown () {
176         this.visTypeDict = this.$options.filters['dictData']('vis_type')
177         this.successDict = this.$options.filters['dictData']('yes_or_no')
178       },
179       /**
180        * 查询参数组装
181        */
182       switchingDate () {
183         const dates = this.queryParam.dates
184         if (dates != null) {
185           this.queryParam.searchBeginTime = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss')
186           this.queryParam.searchEndTime = moment(dates[1]).format('YYYY-MM-DD HH:mm:ss')
187           if (dates.length < 1) {
188             delete this.queryParam.searchBeginTime
189             delete this.queryParam.searchEndTime
190           }
191         }
192         const obj = JSON.parse(JSON.stringify(this.queryParam))
193         delete obj.dates
194         return obj
195       },
196       /**
197        * 批量导出
198        */
199       batchExport () {
200         sysVisLogExport().then((res) => {
201           this.$refs.batchExport.downloadfile(res)
202         })
203       },
204       /**
205        * 清空日志
206        */
207       sysVisLogDelete () {
208         sysVisLogDelete().then((res) => {
209           if (res.success) {
210             this.$message.success('清空成功')
211             this.$refs.table.refresh(true)
212           } else {
213             this.$message.error('清空失败：' + res.message)
214           }
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>