| 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> | |
