<route lang="yaml">
meta:
enabled: true
</route>
<script setup lang="ts">
import {useI18n} from 'vue-i18n'
import {Search, Trash2, WashingMachine} from "lucide-vue-next";
import {ElMessage, ElMessageBox} from "element-plus";
import type {VxeTableEvents} from "vxe-table";
import LogDetail from '@/views/system/Log/LogDetail.vue'
import {list, delOperLog, cleanOperLog} from "@/
api/monitor/operLog.ts";
import {useDict} from '@/utils/dictUtils.ts'
import DictTag from '@/components/DictTag/index.vue'
const {dicts} = useDict('sys_common_status', 'sys_oper_type');
const commonStatusList = computed(() => dicts.value.sys_common_status || []);
const operTypeList = computed(() => dicts.value.sys_oper_type || []);
const {t} = useI18n()
const {pagination, getParams, onSizeChange, onCurrentChange} = usePagination()
const query = reactive<any>({
params: {
pageNum: 1,
pageSize: 30,
code: '',
operationDate: [],
type: '',
},
})
const tableRef = ref()
// 加载中
const loading = ref(false)
// 用户数据
const dataList = ref<any>()
// 详情
const logRow = ref()
const logDetailRef = ref()
const logDetailModel = ref<any>()
// 批量操作
const batch = ref({
selectionDataList: [],
})
const search = ref({...query.params})
function searchReset() {
Object.assign(search.value, query.params)
}
onMounted(() => {
getLogPageList()
})
// 查询日志分页列表
function getLogPageList() {
loading.value = true
query.params.pageNum = getParams().pageNum
query.params.pageSize = getParams().pageSize
list(search.value).then((res: any) => {
dataList.value = res.rows
pagination.value.total = res.total
loading.value = false
})
}
// 全选
const selectAllChangeEvent: VxeTableEvents.CheckboxAll<any> = ({checked}) => {
const $table = tableRef.value
if ($table) {
const records = $table.getCheckboxRecords()
batch.value.selectionDataList = checked ? records : []
}
}
// 勾选
const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = () => {
const $table = tableRef.value
if ($table) {
batch.value.selectionDataList = $table.getCheckboxRecords()
}
}
// 详情
const detailData = (row: any) => {
logRow.value = row
nextTick(() => {
logDetailRef.value.logDetail()
logDetailModel.value = true
})
}
// 删除
function deleteData(row?: any) {
const ids = row?.id || batch.value.selectionDataList.map((item: any) => item.id)
const names = batch.value.selectionDataList.map((item: any) => item.code)
ElMessageBox.confirm(`${t('message.confirmDeletion')} 「 ${names} 」 ?`, t('message.confirmationInfo'), {center: true}).then(() => {
delOperLog(ids).then(() => {
ElMessage({
type: 'success',
message: t('message.delete.success'),
showClose: true,
})
getLogPageList()
})
}).catch(() => {
ElMessage({
type: 'info',
message: t('message.delete.cancel'),
showClose: true,
})
})
}
// 清空
function deleteAllData() {
ElMessageBox.confirm(`${t('message.confirmDeletion')} 「 All 」 ?`, t('message.confirmationInfo'), {center: true}).then(() => {
cleanOperLog().then(() => {
ElMessage({
type: 'success',
message: t('message.delete.success'),
showClose: true,
})
getLogPageList()
})
}).catch(() => {
ElMessage({
type: 'info',
message: t('message.delete.cancel'),
showClose: true,
})
})
}
// 每页数量切换
function sizeChange(size: number) {
onSizeChange(size).then(() => getLogPageList())
}
// 当前页码切换（翻页）
function currentChange(page = 1) {
onCurrentChange(page).then(() => getLogPageList())
}
</script>
<template>
<div class="absolute-container">
<FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
<FaSearchBar :show-toggle="false">
<template #default="{ fold, toggle }">
<ElForm :model="query.params" size="default" inline-message inline class="search-form">
<ElFormItem :label="t('log.list.code')">
<El
Input v-model="query.params.cdde" placeholder="
Input ..." clearable
@keydown.enter="currentChange()" @clear="currentChange()"/>
</ElFormItem>
<ElFormItem :label="t('log.list.type')" v-show="!fold">
<El
Input v-model="query.params.type" placeholder="
Input ..." clearable
@keydown.enter="currentChange()" @clear="currentChange()"/>
</ElFormItem>
<ElFormItem>
<ElButton @click="searchReset(); currentChange()">{{ t('form.rest') }}</ElButton>
<ElButton type="primary" @click="currentChange()" :icon="Search">
{{ t('form.search') }}
</ElButton>
<ElButton link @click="toggle">
<template #icon>
<FaIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top'"/>
</template>
{{ fold ? t('form.unfold') : t('form.packUp') }}
</ElButton>
</ElFormItem>
</ElForm>
</template>
</FaSearchBar>
<ElDivider border-style="dashed"/>
<ElSpace wrap class="button-space">
<ElButton type="danger" size="default" :icon="Trash2" @click="deleteData"
:
disabled="batch.selectionDataList.length === 0">
{{ t('button.delete') }}
</ElButton>
<ElButton type="danger" size="default" :icon="Trash2" @click="deleteAllData">
{{ t('log.list.deleteAll') }}
</ElButton>
</ElSpace>
<div style="height: 100%;">
<vxe-table :data="dataList" border="inner" ref="tableRef" show-overflow v-loading="loading"
@checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent"
:column-config="{ isCurrent: true, isHover: true, resizable: true }"
:checkbox-config="{ highlight: true }" :scroll-y="{ enabled: true, gt: 30 }"
:row-config="{ isCurrent: true, isHover: true }" size="small" height="100%" stripe>
<vxe-column type="seq" width="55" title="#" align="center" fixed="left"/>
<vxe-column type="checkbox" width="55" align="center" fixed="left"/>
<vxe-column field="operId" :title="t('log.list.code')" align="center" min-width="150"/>
<vxe-column field="title" title="系统模块" align="center" min-width="150"/>
<vxe-column field="businessType" :title="t('log.list.type')" align="center" min-width="100">
<template #default="{ row }">
<DictTag :options="operTypeList" :value="row.businessType"/>
</template>
</vxe-column>
<vxe-column field="operName" :title="t('log.list.username')" align="center" min-width="100"/>
<vxe-column field="operIp" :title="t('log.list.ip')" align="center" min-width="140"/>
<vxe-column field="status" :title="t('log.list.status')" align="center" min-width="100">
<template #default="{ row }">
<DictTag :options="commonStatusList" :value="row.status"/>
</template>
</vxe-column>
<vxe-column field="operTime" :title="t('log.list.operationTime')" align="center" min-width="200"/>
<vxe-column field="costTime" align="center" min-width="120">
<template #header>
<span>{{ t('log.list.costTime') }} <sup>ms</sup></span>
</template>
<template #default="{ row }">
<span>{{ row.costTime }} <sup>ms</sup></span>
</template>
</vxe-column>
<vxe-column field="option" :title="t('user.list.option')" align="center" width="130" fixed="right">
<template #default="{ row }">
<el-button-group size="small">
<el-button plain type="primary" :icon="WashingMachine" @click="detailData(row)"/>
<el-button plain type="danger" :icon="Trash2" @click="deleteData(row)"/>
</el-button-group>
</template>
</vxe-column>
</vxe-table>
</div>
<ElPagination :current-page="pagination.pageNum" :total="pagination.total" :page-size="pagination.pageSize"
:page-sizes="pagination.sizes" :layout="pagination.layout" class="pagination" background
@size-change="sizeChange" @current-change="currentChange"/>
</FaPageMain>
<LogDetail :row="logRow" ref="logDetailRef" v-model="logDetailModel"/>
</div>
</template>
[Violation] 'requestAnimationFrame' handler took 132ms
[Violation] Forced reflow while executing
JavaScript took 131ms
jquery-1.8.3.js:13 [Violation] 'setTimeout' handler took 123ms
[Violation] Forced reflow while executing
JavaScript took 122ms
chunk-XQD2IJ5S.js?v=d1e93706:10703 [Violation] 'requestAnimationFrame' handler took 141ms
[Violation] Forced reflow while executing
JavaScript took 141ms
vxe-table.js?v=d1e93706:8763 [Violation] 'setTimeout' handler took 73ms
[Violation] Forced reflow while executing
JavaScript took 71ms
帮我优化
本文详细介绍了如何使用JQuery和原生JavaScript来改变input元素的disabled属性，包括如何从禁用状态变为启用状态以及反之的操作过程。通过具体的代码示例，深入探讨了两者操作方式的差异。
扫一扫
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
