| | |
| | | </div> |
| | | <div class="message-status"> |
| | | <span>操作类型:</span> |
| | | <el-select v-model="operationType" style="margin-left:20px"> |
| | | <el-select v-model="operationType"> |
| | | <el-option v-for="item in operationTypeList" :key="item.id" :label="item.operationType" |
| | | :value="item.operationType"> |
| | | </el-option> |
| | |
| | | </div> |
| | | <div class="message-kind"> |
| | | <span>时间范围:</span> |
| | | <el-input placeholder="选择时间范围" v-model="timeArea"></el-input> |
| | | <el-date-picker v-model="mytime" type="daterange" range-separator="-" start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div class="find"> |
| | | <el-button type="primary" icon="el-icon-search" @click="setTableData">查询</el-button> |
| | | <el-button icon="el-icon-delete-solid">重置</el-button> |
| | | <el-button icon="el-icon-delete-solid" @click="resetTableData">重置</el-button> |
| | | </div> |
| | | </div> |
| | | </header> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <el-table ref="multipleTable" |
| | | <el-table ref="multipleTable" :default-sort="{prop: 'createTime'}" |
| | | :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" |
| | | :data="tableData" style="width: 100%" @sort-change="sortTime" :row-class-name="tableRowClassName" |
| | | @selection-change="tableChange"> |
| | | <el-table-column type="selection" min-width="5"> |
| | | </el-table-column> |
| | | <el-table-column prop="createTime" label="日志时间" min-width="10"> |
| | | <el-table-column prop="createTime" sortable label="日志时间" min-width="10"> |
| | | <template slot-scope="scope"> |
| | | <span>{{changeTime(scope.row.createTime)}}</span> |
| | | </template> |
| | |
| | | </template> |
| | | <script> |
| | | import helper from '@/utils/mydate' |
| | | import {parseTime} from '@/utils/index' |
| | | import { createNamespacedHelpers } from "vuex"; |
| | | const { mapActions } = createNamespacedHelpers("logs"); |
| | | export default { |
| | |
| | | options: [ |
| | | { |
| | | value: 1, |
| | | label: '批量启用', |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '批量禁用', |
| | | }, |
| | | { |
| | | value: 3, |
| | | label: '批量删除', |
| | | } |
| | | ], |
| | | mysort: 0, |
| | | tempList: [], |
| | | timeArea: '', |
| | | operationType: '全部', |
| | | operationTypeList: [], |
| | | mytime: ['',''], |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | }, |
| | | methods: { |
| | | ...mapActions(["getLogsList", 'getLogsOperationType', 'exportLogs']), |
| | | // 重置 |
| | | resetTableData(){ |
| | | const {setTableData} = this |
| | | this.operationType = '全部' |
| | | this.mytime = ['',''] |
| | | this.context = '' |
| | | setTableData(); |
| | | }, |
| | | // 导出日志 |
| | | async handleExport() { |
| | | const { currentPage, pageSize, context, operationType } = this; |
| | |
| | | current: currentPage, |
| | | size: pageSize, |
| | | }); |
| | | let fileName = arr.headers['content-disposition']; |
| | | console.log(fileName); |
| | | if (fileName) { |
| | | fileName = fileName.slice(fileName.indexOf('filename=') + 9); |
| | | } |
| | | const blob = new Blob([arr.data], { |
| | | type: 'application/octet-stream' |
| | | }) |
| | |
| | | const href = window.URL.createObjectURL(blob) |
| | | downloadElement.href = href |
| | | // // 下载后文件名 |
| | | // downloadElement.download = '日志报告'+'.xlsx' |
| | | downloadElement.download = fileName |
| | | document.body.appendChild(downloadElement) |
| | | // 点击下载 |
| | | downloadElement.click() |
| | |
| | | // 获取操作类型 |
| | | async getOperationType() { |
| | | let arr = await this.getLogsOperationType(); |
| | | console.log(arr); |
| | | arr.data.data.unshift({ id: 0, operationType: '全部' }) |
| | | return arr.data.data; |
| | | }, |
| | |
| | | this.tableData = arr.records; |
| | | this.totalNum = arr.total |
| | | }, |
| | | // 时间排序 |
| | | sortTime({ column, prop, order }) { |
| | | if (order === 'ascending') { |
| | | this.mysort = 0 |
| | | } else { |
| | | this.mysort = 1 |
| | | } |
| | | this.setTableData(); |
| | | }, |
| | | // 获取日志数据 |
| | | async getLogList() { |
| | | const { currentPage, pageSize, context, operationType } = this; |
| | | const { currentPage, pageSize, context, operationType, mysort,mytime } = this; |
| | | console.log(mytime) |
| | | let arr = await this.getLogsList({ |
| | | content: context, |
| | | current: currentPage, |
| | | endTime: '', |
| | | endTime: mytime[1] !==''?parseTime(mytime[1]):'', |
| | | id: '', |
| | | operationType: operationType === '全部' ? '' : operationType, |
| | | portEqulpment: '', |
| | | portEquipment: '', |
| | | size: pageSize, |
| | | startTime: '', |
| | | startTime: mytime[0] !==''?parseTime(mytime[0]):'', |
| | | sort: mysort |
| | | }) |
| | | console.log(arr) |
| | | return arr.data.data; |
| | | }, |
| | | // 批量下拉框操作 |
| | |
| | | if (index === 1) { |
| | | this.setTableData(); |
| | | } |
| | | }, |
| | | // |
| | | timechange(data) { |
| | | console.log(data); |
| | | } |
| | | } |
| | | } |
| | |
| | | .message-kind { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | |
| | | span { |
| | | flex: 1; |
| | | } |
| | | |
| | | align-items: center; |
| | | flex: 1; |
| | | .el-input { |
| | | flex: 2; |
| | | flex: 1; |
| | | color: #1d3f57; |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | } |
| | | .el-select{ |
| | | flex: 1; |
| | | } |
| | | .el-date-editor{ |
| | | flex: 1; |
| | | } |
| | | :deep(.el-range-input){ |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | } |
| | |
| | | margin-top: -2px; |
| | | |
| | | .el-button { |
| | | padding: 12px 25px; |
| | | padding: 10px 20px; |
| | | border-radius: 20px; |
| | | } |
| | | } |