| | |
| | | <div class="message-status"> |
| | | <span>操作类型:</span> |
| | | <el-select v-model="operationType"> |
| | | <el-option v-for="item in operationTypeList" :key="item.id" :label="item.operationType" |
| | | :value="item.operationType"> |
| | | <el-option |
| | | v-for="item in operationTypeList" |
| | | :key="item.id" |
| | | :label="item.operationType" |
| | | :value="item.operationType" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="message-kind"> |
| | | <span>时间范围:</span> |
| | | <el-date-picker v-model="mytime" type="daterange" range-separator="-" start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | <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" @click="resetTableData">重置</el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-search" |
| | | @click="setTableDataHandle" |
| | | >查询</el-button |
| | | > |
| | | <el-button icon="el-icon-delete-solid" @click="resetTableData" |
| | | >重置</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | </header> |
| | |
| | | <div class="main-nav"> |
| | | <span>数据列表</span> |
| | | <div class="main-nav-right"> |
| | | <el-button type="primary" icon="el-icon-upload2" @click="handleExport">导出</el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-upload2" |
| | | @click="handleExport" |
| | | >导出</el-button |
| | | > |
| | | <el-button class="el-icon-delete-solid">清空</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <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%" @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" sortable label="日志时间" min-width="10"> |
| | | <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%" |
| | | @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" |
| | | sortable |
| | | label="日志时间" |
| | | min-width="10" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span>{{changeTime(scope.row.createTime)}}</span> |
| | | </template> |
| | |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox> |
| | | <el-checkbox v-model="all" @change="selectAll()" |
| | | >全选</el-checkbox |
| | | > |
| | | </div> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)" |
| | | >反选</el-checkbox |
| | | > |
| | | </div> |
| | | <div class="funsItem"> |
| | | <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" |
| | | :value="item.value"> |
| | | <el-select |
| | | v-model="myIdx" |
| | | placeholder="批量操作" |
| | | @change="selectChange" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="pagination"> |
| | | <el-pagination background :current-page="currentPage" layout="prev, pager, next" |
| | | :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage" |
| | | @prev-click="handlePrev" @next-click="handleNext"> |
| | | <el-pagination |
| | | background |
| | | :current-page="currentPage" |
| | | layout="prev, pager, next" |
| | | :total="totalNum" |
| | | :page-size="pageSize" |
| | | @current-change="changeCurrentPage" |
| | | @prev-click="handlePrev" |
| | | @next-click="handleNext" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import helper from '@/utils/mydate' |
| | | import {parseTime} from '@/utils/index' |
| | | import helper from "@/utils/mydate"; |
| | | import { parseTime } from "@/utils/index"; |
| | | import { createNamespacedHelpers } from "vuex"; |
| | | const { mapActions } = createNamespacedHelpers("logs"); |
| | | export default { |
| | | components: { |
| | | }, |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | |
| | | options: [ |
| | | { |
| | | value: 1, |
| | | label: '批量删除', |
| | | } |
| | | label: "批量删除", |
| | | }, |
| | | ], |
| | | mysort: 0, |
| | | tempList: [], |
| | | operationType: '全部', |
| | | operationType: "全部", |
| | | operationTypeList: [], |
| | | mytime: ['',''], |
| | | } |
| | | mytime: ["", ""], |
| | | }; |
| | | }, |
| | | created() { |
| | | this.setTableData(); |
| | | this.setOperationType(); |
| | | }, |
| | | methods: { |
| | | ...mapActions(["getLogsList", 'getLogsOperationType', 'exportLogs']), |
| | | ...mapActions(["getLogsList", "getLogsOperationType", "exportLogs"]), |
| | | // 重置 |
| | | resetTableData(){ |
| | | const {setTableData} = this |
| | | this.operationType = '全部' |
| | | this.mytime = ['',''] |
| | | this.context = '' |
| | | setTableData(); |
| | | const { setTableData } = this; |
| | | this.operationType = "全部"; |
| | | this.mytime = ["", ""]; |
| | | this.context = ""; |
| | | this.currentPage = 1; |
| | | this.setTableData(); |
| | | }, |
| | | setTableDataHandle() { |
| | | this.currentPage = 1; |
| | | this.setTableData(); |
| | | }, |
| | | // 导出日志 |
| | | async handleExport() { |
| | |
| | | current: currentPage, |
| | | size: pageSize, |
| | | }); |
| | | let fileName = arr.headers['content-disposition']; |
| | | let fileName = arr.headers["content-disposition"]; |
| | | console.log(fileName); |
| | | if (fileName) { |
| | | fileName = fileName.slice(fileName.indexOf('filename=') + 9); |
| | | fileName = fileName.slice(fileName.indexOf("filename=") + 9); |
| | | } |
| | | const blob = new Blob([arr.data], { |
| | | type: 'application/octet-stream' |
| | | }) |
| | | type: "application/octet-stream", |
| | | }); |
| | | // content-disposition |
| | | const downloadElement = document.createElement('a') |
| | | const downloadElement = document.createElement("a"); |
| | | // 创建下载的链接 |
| | | const href = window.URL.createObjectURL(blob) |
| | | downloadElement.href = href |
| | | const href = window.URL.createObjectURL(blob); |
| | | downloadElement.href = href; |
| | | // // 下载后文件名 |
| | | downloadElement.download = fileName |
| | | document.body.appendChild(downloadElement) |
| | | downloadElement.download = fileName; |
| | | document.body.appendChild(downloadElement); |
| | | // 点击下载 |
| | | downloadElement.click() |
| | | downloadElement.click(); |
| | | // 下载完成移除元素 |
| | | document.body.removeChild(downloadElement) |
| | | document.body.removeChild(downloadElement); |
| | | // 释放掉blob对象 |
| | | window.URL.revokeObjectURL(href) |
| | | window.URL.revokeObjectURL(href); |
| | | }, |
| | | // 设置操作类型 |
| | | async setOperationType() { |
| | |
| | | // 获取操作类型 |
| | | async getOperationType() { |
| | | let arr = await this.getLogsOperationType(); |
| | | arr.data.data.unshift({ id: 0, operationType: '全部' }) |
| | | arr.data.data.unshift({ id: 0, operationType: "全部" }); |
| | | return arr.data.data; |
| | | }, |
| | | // 批量删除 |
| | | handleDelete(idarr) { |
| | | this.$confirm('确认删除?') |
| | | .then(_ => { |
| | | this.$confirm("确认删除?").then((_) => { |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/message/delete?ids=' + idarr, |
| | | }) |
| | | .then(res => { |
| | | method: "post", |
| | | url: "sccg/message/delete?ids=" + idarr, |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功', |
| | | }) |
| | | type: "success", |
| | | message: "删除成功", |
| | | }); |
| | | this.setTableData(); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.message |
| | | }) |
| | | type: "error", |
| | | message: res.message, |
| | | }); |
| | | } |
| | | }) |
| | | }) |
| | | }); |
| | | }); |
| | | }, |
| | | // 设置表格数据 |
| | | async setTableData() { |
| | | const arr = await this.getLogList(); |
| | | this.tableData = arr.records; |
| | | this.totalNum = arr.total |
| | | this.totalNum = arr.total; |
| | | }, |
| | | // 时间排序 |
| | | sortTime({ column, prop, order }) { |
| | | if (order === 'ascending') { |
| | | this.mysort = 0 |
| | | if (order === "ascending") { |
| | | this.mysort = 0; |
| | | } else { |
| | | this.mysort = 1 |
| | | this.mysort = 1; |
| | | } |
| | | this.setTableData(); |
| | | }, |
| | | // 获取日志数据 |
| | | async getLogList() { |
| | | const { currentPage, pageSize, context, operationType, mysort,mytime } = this; |
| | | console.log(mytime) |
| | | const { currentPage, pageSize, context, operationType, mysort, mytime } = |
| | | this; |
| | | console.log(mytime); |
| | | let arr = await this.getLogsList({ |
| | | content: context, |
| | | current: currentPage, |
| | | endTime: mytime[1] !==''?parseTime(mytime[1]):'', |
| | | id: '', |
| | | operationType: operationType === '全部' ? '' : operationType, |
| | | portEquipment: '', |
| | | endTime: mytime[1] !== "" ? parseTime(mytime[1]) : "", |
| | | id: "", |
| | | operationType: operationType === "全部" ? "" : operationType, |
| | | portEquipment: "", |
| | | size: pageSize, |
| | | startTime: mytime[0] !==''?parseTime(mytime[0]):'', |
| | | sort: mysort |
| | | }) |
| | | console.log(arr) |
| | | startTime: mytime[0] !== "" ? parseTime(mytime[0]) : "", |
| | | sort: mysort, |
| | | }); |
| | | console.log(arr); |
| | | return arr.data.data; |
| | | }, |
| | | // 批量下拉框操作 |
| | |
| | | } else { |
| | | this.myIdx = this.preMyIdx; |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: '您还没选中任何数据', |
| | | }) |
| | | type: "warning", |
| | | message: "您还没选中任何数据", |
| | | }); |
| | | } |
| | | }, |
| | | // 批量操作 |
| | | mulUpdateStatus(idArr, flag) { |
| | | this.$confirm(flag === 1 ? "您确定要进行批量启用角色吗?" : '您确定要进行批量禁用角色吗?') |
| | | .then(_ => { |
| | | this.$confirm( |
| | | flag === 1 |
| | | ? "您确定要进行批量启用角色吗?" |
| | | : "您确定要进行批量禁用角色吗?" |
| | | ) |
| | | .then((_) => { |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/role/updateStatusBatch?ids=' + idArr + '&status=' + flag, |
| | | }) |
| | | .then(res => { |
| | | method: "post", |
| | | url: "sccg/role/updateStatusBatch?ids=" + idArr + "&status=" + flag, |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '更改用户状态成功', |
| | | }) |
| | | type: "success", |
| | | message: "更改用户状态成功", |
| | | }); |
| | | this.getUserList(); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.message |
| | | }) |
| | | type: "error", |
| | | message: res.message, |
| | | }); |
| | | } |
| | | console.log(res); |
| | | }); |
| | | }) |
| | | }) |
| | | .catch(err => { console.log(err) }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | }); |
| | | }, |
| | | // 表格监听 |
| | | tableChange(list) { |
| | | this.tempList = []; |
| | | list.forEach(item => { |
| | | list.forEach((item) => { |
| | | this.tempList.push(item.id); |
| | | }) |
| | | }); |
| | | if (list.length === this.tableData.length) { |
| | | this.all = true; |
| | | } else { |
| | | this.all = false |
| | | this.all = false; |
| | | } |
| | | }, |
| | | // 修改时间格式 |
| | |
| | | }, |
| | | // 反选 |
| | | disSame(list) { |
| | | list.forEach(row => { |
| | | this.$refs.multipleTable.toggleRowSelection(row) |
| | | }) |
| | | list.forEach((row) => { |
| | | this.$refs.multipleTable.toggleRowSelection(row); |
| | | }); |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 == 0) { |
| | | return 'warning-row'; |
| | | return "warning-row"; |
| | | } else { |
| | | return 'success-row'; |
| | | return "success-row"; |
| | | } |
| | | return ''; |
| | | return ""; |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | |
| | | }, |
| | | // 确认关闭弹窗 |
| | | handleConfirmClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | this.$confirm("确认关闭?") |
| | | .then((_) => { |
| | | done(); |
| | | }) |
| | | .catch(err => { |
| | | .catch((err) => { |
| | | console.log(err); |
| | | }) |
| | | }); |
| | | }, |
| | | // 自定义关闭弹窗 |
| | | closeDialog({ flag, index }) { |
| | |
| | | // |
| | | timechange(data) { |
| | | console.log(data); |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .userList { |
| | |
| | | :deep(.el-range-input){ |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | } |
| | | |
| | | .findBtn { |
| | |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .pagination { |
| | |
| | | justify-content: center; |
| | | |
| | | .el-pagination { |
| | | |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |