| | |
| | | <template> |
| | | <div class="userList"> |
| | | <header> |
| | | <div class="header-nav"> |
| | | <span class="nav-left">数据筛选</span> |
| | | <span class="nav-right">高级搜索</span> |
| | | <div class="userList"> |
| | | <header> |
| | | <div class="header-nav"> |
| | | <span class="nav-left">数据筛选</span> |
| | | <span class="nav-right">高级搜索</span> |
| | | </div> |
| | | <div class="header-content"> |
| | | <div class="search"> |
| | | <span>输入查询:</span> |
| | | <el-input placeholder="内容信息" v-model="context"></el-input> |
| | | </div> |
| | | <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> |
| | | </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> |
| | | </div> |
| | | <div class="find"> |
| | | <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> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <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 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" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span>{{ changeTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="userAgent" label="终端设备" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="operationType" label="操作类型" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="adminId" label="操作人员" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="ip" label="IP地址" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="contain" label="内容" min-width="10"> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- tools --> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="all" @change="selectAll()" |
| | | >全选</el-checkbox |
| | | > |
| | | </div> |
| | | <div class="header-content"> |
| | | <div class="search"> |
| | | <span>输入查询:</span> |
| | | <el-input placeholder="内容信息" v-model="context"></el-input> |
| | | </div> |
| | | <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> |
| | | </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> |
| | | </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> |
| | | </div> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)" |
| | | >反选</el-checkbox |
| | | > |
| | | </div> |
| | | </header> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <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 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"> |
| | | <template slot-scope="scope"> |
| | | <span>{{changeTime(scope.row.createTime)}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="userAgent" label="终端设备" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="operationType" label="操作类型" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="adminId" label="操作人员" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="ip" label="IP地址" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column prop="contain" label="内容" min-width="10"> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- tools --> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <div class="funsItem funs-sp"> |
| | | <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> |
| | | </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-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> |
| | | </div> |
| | | </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-option> |
| | | </el-select> |
| | | </div> |
| | | </main> |
| | | </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> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </main> |
| | | </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: { |
| | | }, |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | context: "", |
| | | totalNum: null, |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | all: false, |
| | | unsame: false, |
| | | myIdx: null, |
| | | preMyIdx: null, |
| | | options: [ |
| | | { |
| | | value: 1, |
| | | label: '批量删除', |
| | | } |
| | | ], |
| | | mysort: 0, |
| | | tempList: [], |
| | | operationType: '全部', |
| | | operationTypeList: [], |
| | | mytime: ['',''], |
| | | } |
| | | }, |
| | | created() { |
| | | this.setTableData(); |
| | | this.setOperationType(); |
| | | }, |
| | | methods: { |
| | | ...mapActions(["getLogsList", 'getLogsOperationType', 'exportLogs']), |
| | | // 重置 |
| | | resetTableData(){ |
| | | const {setTableData} = this |
| | | this.operationType = '全部' |
| | | this.mytime = ['',''] |
| | | this.context = '' |
| | | setTableData(); |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | context: "", |
| | | totalNum: null, |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | all: false, |
| | | unsame: false, |
| | | myIdx: null, |
| | | preMyIdx: null, |
| | | options: [ |
| | | { |
| | | value: 1, |
| | | label: "批量删除", |
| | | }, |
| | | // 导出日志 |
| | | async handleExport() { |
| | | const { currentPage, pageSize, context, operationType } = this; |
| | | let arr = await this.exportLogs({ |
| | | content: context, |
| | | current: currentPage, |
| | | size: pageSize, |
| | | ], |
| | | mysort: 0, |
| | | tempList: [], |
| | | operationType: "全部", |
| | | operationTypeList: [], |
| | | mytime: ["", ""], |
| | | }; |
| | | }, |
| | | created() { |
| | | this.setTableData(); |
| | | this.setOperationType(); |
| | | }, |
| | | methods: { |
| | | ...mapActions(["getLogsList", "getLogsOperationType", "exportLogs"]), |
| | | // 重置 |
| | | resetTableData() { |
| | | const { setTableData } = this; |
| | | this.operationType = "全部"; |
| | | this.mytime = ["", ""]; |
| | | this.context = ""; |
| | | this.currentPage = 1; |
| | | this.setTableData(); |
| | | }, |
| | | setTableDataHandle() { |
| | | this.currentPage = 1; |
| | | this.setTableData(); |
| | | }, |
| | | // 导出日志 |
| | | async handleExport() { |
| | | const { currentPage, pageSize, context, operationType } = this; |
| | | let arr = await this.exportLogs({ |
| | | content: context, |
| | | 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", |
| | | }); |
| | | // content-disposition |
| | | const downloadElement = document.createElement("a"); |
| | | // 创建下载的链接 |
| | | const href = window.URL.createObjectURL(blob); |
| | | downloadElement.href = href; |
| | | // // 下载后文件名 |
| | | downloadElement.download = fileName; |
| | | document.body.appendChild(downloadElement); |
| | | // 点击下载 |
| | | downloadElement.click(); |
| | | // 下载完成移除元素 |
| | | document.body.removeChild(downloadElement); |
| | | // 释放掉blob对象 |
| | | window.URL.revokeObjectURL(href); |
| | | }, |
| | | // 设置操作类型 |
| | | async setOperationType() { |
| | | this.operationTypeList = await this.getOperationType(); |
| | | }, |
| | | // 获取操作类型 |
| | | async getOperationType() { |
| | | let arr = await this.getLogsOperationType(); |
| | | arr.data.data.unshift({ id: 0, operationType: "全部" }); |
| | | return arr.data.data; |
| | | }, |
| | | // 批量删除 |
| | | handleDelete(idarr) { |
| | | this.$confirm("确认删除?").then((_) => { |
| | | this.$axios({ |
| | | method: "post", |
| | | url: "sccg/message/delete?ids=" + idarr, |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "删除成功", |
| | | }); |
| | | 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' |
| | | }) |
| | | // content-disposition |
| | | const downloadElement = document.createElement('a') |
| | | // 创建下载的链接 |
| | | const href = window.URL.createObjectURL(blob) |
| | | downloadElement.href = href |
| | | // // 下载后文件名 |
| | | downloadElement.download = fileName |
| | | document.body.appendChild(downloadElement) |
| | | // 点击下载 |
| | | downloadElement.click() |
| | | // 下载完成移除元素 |
| | | document.body.removeChild(downloadElement) |
| | | // 释放掉blob对象 |
| | | window.URL.revokeObjectURL(href) |
| | | }, |
| | | // 设置操作类型 |
| | | async setOperationType() { |
| | | this.operationTypeList = await this.getOperationType(); |
| | | }, |
| | | // 获取操作类型 |
| | | async getOperationType() { |
| | | let arr = await this.getLogsOperationType(); |
| | | arr.data.data.unshift({ id: 0, operationType: '全部' }) |
| | | return arr.data.data; |
| | | }, |
| | | // 批量删除 |
| | | handleDelete(idarr) { |
| | | this.$confirm('确认删除?') |
| | | .then(_ => { |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/message/delete?ids=' + idarr, |
| | | }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功', |
| | | }) |
| | | this.setTableData(); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.message |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | // 设置表格数据 |
| | | async setTableData() { |
| | | const arr = await this.getLogList(); |
| | | 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, 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: '', |
| | | size: pageSize, |
| | | startTime: mytime[0] !==''?parseTime(mytime[0]):'', |
| | | sort: mysort |
| | | }) |
| | | console.log(arr) |
| | | return arr.data.data; |
| | | }, |
| | | // 批量下拉框操作 |
| | | async selectChange(list) { |
| | | console.log(this.tempList); |
| | | if (this.tempList.length !== 0) { |
| | | this.preMyIdx = list; |
| | | if (list === 3) { |
| | | await this.handleDelete(this.tempList); |
| | | } else if (list === 2) { |
| | | await this.mulUpdateStatus(this.tempList, 0); |
| | | } else { |
| | | await this.mulUpdateStatus(this.tempList, 1); |
| | | } |
| | | this.myIdx = 0; |
| | | } else { |
| | | this.myIdx = this.preMyIdx; |
| | | this.$message({ |
| | | type: 'warning', |
| | | message: '您还没选中任何数据', |
| | | }) |
| | | } |
| | | }, |
| | | // 批量操作 |
| | | mulUpdateStatus(idArr, flag) { |
| | | this.$confirm(flag === 1 ? "您确定要进行批量启用角色吗?" : '您确定要进行批量禁用角色吗?') |
| | | .then(_ => { |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/role/updateStatusBatch?ids=' + idArr + '&status=' + flag, |
| | | }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '更改用户状态成功', |
| | | }) |
| | | this.getUserList(); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.message |
| | | }) |
| | | } |
| | | console.log(res); |
| | | }) |
| | | }) |
| | | .catch(err => { console.log(err) }) |
| | | }, |
| | | // 表格监听 |
| | | tableChange(list) { |
| | | this.tempList = []; |
| | | list.forEach(item => { |
| | | this.tempList.push(item.id); |
| | | }) |
| | | if (list.length === this.tableData.length) { |
| | | this.all = true; |
| | | } else { |
| | | this.all = false |
| | | } |
| | | }, |
| | | // 修改时间格式 |
| | | changeTime(time) { |
| | | return helper(time); |
| | | }, |
| | | // 全选 |
| | | selectAll() { |
| | | this.$refs.multipleTable.toggleAllSelection(); |
| | | }, |
| | | // 反选 |
| | | disSame(list) { |
| | | list.forEach(row => { |
| | | this.$refs.multipleTable.toggleRowSelection(row) |
| | | }) |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 == 0) { |
| | | return 'warning-row'; |
| | | } else { |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | this.currentPage = page; |
| | | this.setTableData(); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | this.currentPage = page; |
| | | this.setTableData(); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | this.currentPage = page; |
| | | this.setTableData(); |
| | | }, |
| | | // 关闭弹窗 |
| | | handleClose(done) { |
| | | done(); |
| | | }, |
| | | // 确认关闭弹窗 |
| | | handleConfirmClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | done(); |
| | | }) |
| | | .catch(err => { |
| | | console.log(err); |
| | | }) |
| | | }, |
| | | // 自定义关闭弹窗 |
| | | closeDialog({ flag, index }) { |
| | | if (index === 1) { |
| | | this.setTableData(); |
| | | } |
| | | }, |
| | | // |
| | | timechange(data) { |
| | | console.log(data); |
| | | } else { |
| | | this.$message({ |
| | | type: "error", |
| | | message: res.message, |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | }, |
| | | // 设置表格数据 |
| | | async setTableData() { |
| | | const arr = await this.getLogList(); |
| | | 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, 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: "", |
| | | size: pageSize, |
| | | startTime: mytime[0] !== "" ? parseTime(mytime[0]) : "", |
| | | sort: mysort, |
| | | }); |
| | | console.log(arr); |
| | | return arr.data.data; |
| | | }, |
| | | // 批量下拉框操作 |
| | | async selectChange(list) { |
| | | console.log(this.tempList); |
| | | if (this.tempList.length !== 0) { |
| | | this.preMyIdx = list; |
| | | if (list === 3) { |
| | | await this.handleDelete(this.tempList); |
| | | } else if (list === 2) { |
| | | await this.mulUpdateStatus(this.tempList, 0); |
| | | } else { |
| | | await this.mulUpdateStatus(this.tempList, 1); |
| | | } |
| | | } |
| | | } |
| | | this.myIdx = 0; |
| | | } else { |
| | | this.myIdx = this.preMyIdx; |
| | | this.$message({ |
| | | type: "warning", |
| | | message: "您还没选中任何数据", |
| | | }); |
| | | } |
| | | }, |
| | | // 批量操作 |
| | | mulUpdateStatus(idArr, flag) { |
| | | this.$confirm( |
| | | flag === 1 |
| | | ? "您确定要进行批量启用角色吗?" |
| | | : "您确定要进行批量禁用角色吗?" |
| | | ) |
| | | .then((_) => { |
| | | this.$axios({ |
| | | method: "post", |
| | | url: "sccg/role/updateStatusBatch?ids=" + idArr + "&status=" + flag, |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "更改用户状态成功", |
| | | }); |
| | | this.getUserList(); |
| | | } else { |
| | | this.$message({ |
| | | type: "error", |
| | | message: res.message, |
| | | }); |
| | | } |
| | | console.log(res); |
| | | }); |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | }); |
| | | }, |
| | | // 表格监听 |
| | | tableChange(list) { |
| | | this.tempList = []; |
| | | list.forEach((item) => { |
| | | this.tempList.push(item.id); |
| | | }); |
| | | if (list.length === this.tableData.length) { |
| | | this.all = true; |
| | | } else { |
| | | this.all = false; |
| | | } |
| | | }, |
| | | // 修改时间格式 |
| | | changeTime(time) { |
| | | return helper(time); |
| | | }, |
| | | // 全选 |
| | | selectAll() { |
| | | this.$refs.multipleTable.toggleAllSelection(); |
| | | }, |
| | | // 反选 |
| | | disSame(list) { |
| | | list.forEach((row) => { |
| | | this.$refs.multipleTable.toggleRowSelection(row); |
| | | }); |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 == 0) { |
| | | return "warning-row"; |
| | | } else { |
| | | return "success-row"; |
| | | } |
| | | return ""; |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | this.currentPage = page; |
| | | this.setTableData(); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | this.currentPage = page; |
| | | this.setTableData(); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | this.currentPage = page; |
| | | this.setTableData(); |
| | | }, |
| | | // 关闭弹窗 |
| | | handleClose(done) { |
| | | done(); |
| | | }, |
| | | // 确认关闭弹窗 |
| | | handleConfirmClose(done) { |
| | | this.$confirm("确认关闭?") |
| | | .then((_) => { |
| | | done(); |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | }); |
| | | }, |
| | | // 自定义关闭弹窗 |
| | | closeDialog({ flag, index }) { |
| | | if (index === 1) { |
| | | this.setTableData(); |
| | | } |
| | | }, |
| | | // |
| | | timechange(data) { |
| | | console.log(data); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .userList { |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | |
| | | .header-nav { |
| | | line-height: 40px; |
| | | padding: 0 30px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | font-weight: 650; |
| | | } |
| | | |
| | | .header-content { |
| | | padding: 0 40px; |
| | | display: flex; |
| | | line-height: 100px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .search, |
| | | .message-status, |
| | | .message-kind { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | flex: 1; |
| | | .el-input { |
| | | 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; |
| | | } |
| | | |
| | | } |
| | | |
| | | .findBtn { |
| | | line-height: 100px; |
| | | margin-left: 15px; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: -2px; |
| | | |
| | | .el-button { |
| | | padding: 10px 20px; |
| | | border-radius: 20px; |
| | | } |
| | | } |
| | | } |
| | | .header-nav { |
| | | line-height: 40px; |
| | | padding: 0 30px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | font-weight: 650; |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | .header-content { |
| | | padding: 0 40px; |
| | | display: flex; |
| | | line-height: 100px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .el-link { |
| | | color: #4b9bb7; |
| | | .search, |
| | | .message-status, |
| | | .message-kind { |
| | | display: flex; |
| | | justify-content: flex-start; |
| | | align-items: center; |
| | | flex: 1; |
| | | .el-input { |
| | | flex: 1; |
| | | color: #1d3f57; |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | } |
| | | |
| | | .leftPx { |
| | | margin-left: 10px; |
| | | .el-select { |
| | | flex: 1; |
| | | } |
| | | |
| | | .mainTitle { |
| | | line-height: 60px; |
| | | .el-date-editor { |
| | | flex: 1; |
| | | } |
| | | |
| | | .main-nav { |
| | | line-height: 40px; |
| | | display: flex; |
| | | padding: 10px; |
| | | justify-content: space-between; |
| | | :deep(.el-range-input) { |
| | | background-color: #09152f; |
| | | } |
| | | } |
| | | |
| | | .tools { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | .findBtn { |
| | | line-height: 100px; |
| | | margin-left: 15px; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: -2px; |
| | | |
| | | .funs { |
| | | display: flex; |
| | | |
| | | .funs-sp { |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .funsItem { |
| | | line-height: 28px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | border-radius: 4px; |
| | | font-size: 12px; |
| | | margin-left: 10px; |
| | | |
| | | .el-checkbox { |
| | | width: 80px; |
| | | padding: 0 10px; |
| | | } |
| | | |
| | | .el-select { |
| | | width: 120px; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &:hover { |
| | | border: 1px solid #4b9bb7; |
| | | } |
| | | |
| | | &:hover .el-checkbox { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .pagination { |
| | | margin-top: 50px; |
| | | display: flex; |
| | | line-height: 50px; |
| | | justify-content: center; |
| | | |
| | | .el-pagination { |
| | | |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | .el-button { |
| | | padding: 10px 20px; |
| | | border-radius: 20px; |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | .line { |
| | | padding: 0 5px; |
| | | } |
| | | |
| | | span:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table::v-deep .warning-row { |
| | | background: #06122c; |
| | | } |
| | | |
| | | .el-table::v-deep .success-row { |
| | | background: #071f39; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | |
| | | .el-link { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .leftPx { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | .mainTitle { |
| | | line-height: 60px; |
| | | } |
| | | |
| | | .main-nav { |
| | | line-height: 40px; |
| | | display: flex; |
| | | padding: 10px; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .tools { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | |
| | | .funs { |
| | | display: flex; |
| | | |
| | | .funs-sp { |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .funsItem { |
| | | line-height: 28px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | border-radius: 4px; |
| | | font-size: 12px; |
| | | margin-left: 10px; |
| | | |
| | | .el-checkbox { |
| | | width: 80px; |
| | | padding: 0 10px; |
| | | } |
| | | |
| | | .el-select { |
| | | width: 120px; |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &:hover { |
| | | border: 1px solid #4b9bb7; |
| | | } |
| | | |
| | | &:hover .el-checkbox { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pagination { |
| | | margin-top: 50px; |
| | | display: flex; |
| | | line-height: 50px; |
| | | justify-content: center; |
| | | |
| | | .el-pagination { |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | &::v-deep .active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | .line { |
| | | padding: 0 5px; |
| | | } |
| | | |
| | | span:hover { |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table::v-deep .warning-row { |
| | | background: #06122c; |
| | | } |
| | | |
| | | .el-table::v-deep .success-row { |
| | | background: #071f39; |
| | | } |
| | | } |
| | | } |
| | | </style> |