“dzb”
2022-10-24 0a6f89cc126ef05f51b62565c3ea004e82d078b8
src/views/operate/log/index.vue
@@ -12,7 +12,7 @@
                </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>
@@ -20,11 +20,13 @@
                </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>
@@ -38,13 +40,13 @@
                    </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>
@@ -90,6 +92,7 @@
</template>
<script>
import helper from '@/utils/mydate'
import {parseTime} from '@/utils/index'
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("logs");
export default {
@@ -109,21 +112,14 @@
            options: [
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            mysort: 0,
            tempList: [],
            timeArea: '',
            operationType: '全部',
            operationTypeList: [],
            mytime: ['',''],
        }
    },
    created() {
@@ -132,6 +128,14 @@
    },
    methods: {
        ...mapActions(["getLogsList", 'getLogsOperationType', 'exportLogs']),
        // 重置
        resetTableData(){
            const {setTableData} = this
            this.operationType = '全部'
            this.mytime = ['','']
            this.context = ''
            setTableData();
        },
        // 导出日志
        async handleExport() {
            const { currentPage, pageSize, context, operationType } = this;
@@ -140,6 +144,11 @@
                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'
            })
@@ -149,7 +158,7 @@
            const href = window.URL.createObjectURL(blob)
            downloadElement.href = href
            // // 下载后文件名
            // downloadElement.download = '日志报告'+'.xlsx'
            downloadElement.download = fileName
            document.body.appendChild(downloadElement)
            // 点击下载
            downloadElement.click()
@@ -165,7 +174,6 @@
        // 获取操作类型
        async getOperationType() {
            let arr = await this.getLogsOperationType();
            console.log(arr);
            arr.data.data.unshift({ id: 0, operationType: '全部' })
            return arr.data.data;
        },
@@ -199,19 +207,31 @@
            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;
        },
        // 批量下拉框操作
@@ -330,6 +350,10 @@
            if (index === 1) {
                this.setTableData();
            }
        },
        //
        timechange(data) {
            console.log(data);
        }
    }
}
@@ -364,19 +388,25 @@
            .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;
                }
            }
@@ -389,7 +419,7 @@
                margin-top: -2px;
                .el-button {
                    padding: 12px 25px;
                    padding: 10px 20px;
                    border-radius: 20px;
                }
            }