<template>
|
<HMContainer type="card">
|
<template #header>
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams">
|
<el-form-item label="日期范围" prop="timeRange">
|
<TimeRange v-model="queryParams.timeRange" :quickActive="TimeRangeEnum.CurrentDay" @change="handleQueryTable" />
|
</el-form-item>
|
<el-form-item label="操作类型" prop="type">
|
<el-input v-model="queryParams.type" style="width: 226.4px" placeholder="操作类型" clearable @input="debounceQueryTable" />
|
</el-form-item>
|
<el-form-item label="操作人员" prop="user">
|
<el-input v-model="queryParams.user" style="width: 226.4px" placeholder="操作人员" clearable @input="debounceQueryTable" />
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #main>
|
<div class="h-full" ref="chatDragContainerRef">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
class="h100"
|
border
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:data="tableData"
|
highlight-current-row
|
>
|
<el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column>
|
<el-table-column label="用户" prop="user" width="120" fixed="left" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="time" label="时间" width="185" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="操作类型" prop="type" width="170" show-overflow-tooltip> </el-table-column>
|
|
|
<el-table-column label="来源" prop="from" width="120" show-overflow-tooltip> </el-table-column>
|
|
<el-table-column label="IP地址" prop="client_ip" width="170" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="描述" prop="note" show-overflow-tooltip> </el-table-column>
|
|
</el-table>
|
</div>
|
</template>
|
</HMContainer>
|
</template>
|
|
<script setup lang="ts">
|
import { debounce, getItemMap } from '/@/utils/util';
|
|
import { onMounted, ref } from 'vue';
|
|
import * as userApi from '/@/api/auth/user';
|
|
import { getRoleInfoListByPost } from '/@/api/auth/role';
|
import HMContainer from '/@/components/layout/HMContainer.vue';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { computed } from 'vue';
|
import TimeRange from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue';
|
import { TimeRangeEnum } from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/types';
|
import { getOperateLog } from '/@/api/auth/log';
|
import { nextTick } from 'vue';
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
|
//#endregion
|
|
//#region ====================== 表格查询、排序，search form init ======================
|
|
const queryParams = ref({
|
timeRange: [],
|
type: '',
|
user: '',
|
});
|
|
const handleQueryTable = async () => {
|
const res = await getOperateLog({
|
start_time: queryParams.value.timeRange[0],
|
end_time: queryParams.value.timeRange[1],
|
|
type: queryParams.value.type,
|
user: queryParams.value.user,
|
});
|
|
tableData.value = res?.values ?? [];
|
};
|
|
const debounceQueryTable = debounce(handleQueryTable, 400);
|
|
//#endregion
|
|
//#region ====================== 添加修改操作 ======================
|
const optDlgIsShow = ref(false);
|
const optDlgMapRow = ref(null);
|
const openOptDlg = (row?: any) => {
|
optDlgMapRow.value = row;
|
optDlgIsShow.value = true;
|
};
|
|
const updateOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
const insertOpt = (newData) => {
|
tableData.value.push({ ...newData });
|
};
|
//#endregion
|
|
const deleteCurrentRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除用户：【${row.user_name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await userApi.deleteUserInfoByPost({
|
user_id: row.user_id,
|
});
|
const foundIndex = tableData.value.findIndex((item) => item === row);
|
foundIndex > -1 && tableData.value.splice(foundIndex, 1);
|
ElMessage.success('删除用户成功');
|
});
|
};
|
//#region ====================== 修改密码操作 ======================
|
const optPasswordDlgIsShow = ref(false);
|
const optPasswordDlgMapRow = ref(null);
|
const openOptPasswordDlg = (row?: any) => {
|
optPasswordDlgMapRow.value = row;
|
optPasswordDlgIsShow.value = true;
|
};
|
|
const updatePasswordOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 修改角色操作 ======================
|
const optRoleDlgIsShow = ref(false);
|
const optRoleDlgMapRow = ref(null);
|
const openOptRoleDlg = (row?: any) => {
|
optRoleDlgMapRow.value = row;
|
optRoleDlgIsShow.value = true;
|
};
|
|
const updateRoleOpt = (formValue) => {
|
const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
|
if (foundIndex > -1) {
|
tableData.value[foundIndex] = {
|
...tableData.value[foundIndex],
|
...formValue,
|
};
|
}
|
};
|
|
//#endregion
|
|
const roleList = ref([]);
|
const roleMap = computed(() => getItemMap(roleList.value, 'id'));
|
const getRoleList = async () => {
|
const res = await getRoleInfoListByPost();
|
|
roleList.value = res?.values ?? [];
|
};
|
onMounted(async () => {
|
nextTick(() => {
|
handleQueryTable();
|
});
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
