修改数据日志全局组件,并添加自动代码生成模板
This commit is contained in:
@ -6,4 +6,4 @@ import pageFooter from './src/PageFooter.vue';
|
||||
export const PageWrapper = withInstall(pageWrapper);
|
||||
export const PageFooter = withInstall(pageFooter);
|
||||
|
||||
export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
|
||||
export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
|
||||
5
src/components/pcitc/index.ts
Normal file
5
src/components/pcitc/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { withInstall } from '/@/utils';
|
||||
|
||||
import dataLog from './src/DataLog.vue';
|
||||
|
||||
export const DataLog = withInstall(dataLog);
|
||||
174
src/components/pcitc/src/DataLog.vue
Normal file
174
src/components/pcitc/src/DataLog.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div >
|
||||
<a-modal
|
||||
:width="1150"
|
||||
v-model:visible="visible"
|
||||
title="数据日志"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-table :style="{ padding: '0 5px'}" :columns="columns" :data-source="data" :scroll="{y: 400}" :pagination="false" :row-key="record => record.id"/>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { ErrorMessageMode } from '/#/axios';
|
||||
import { watch, defineProps, ref, computed, onMounted, onUnmounted, createVNode, reactive, } from 'vue';
|
||||
const columns = [
|
||||
{
|
||||
title: '表名',
|
||||
dataIndex: 'tableName',
|
||||
key: 'tableName',
|
||||
width: 100,
|
||||
ellipsis: true,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '属性名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
ellipsis: true,
|
||||
sorter: true
|
||||
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'operationType',
|
||||
key: 'operationType',
|
||||
width: 80,
|
||||
sorter: true,
|
||||
customRender: ({ record }) => {
|
||||
let text = record.operationType
|
||||
if (record.operationType == 'INSERT') text='新增'
|
||||
if (record.operationType == 'UPDATE') text='修改'
|
||||
if (record.operationType == 'DELETE') text='删除'
|
||||
return text
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '原数据',
|
||||
dataIndex: 'oldValue',
|
||||
key: 'oldValue',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '新数据',
|
||||
dataIndex: 'newValue',
|
||||
key: 'newValue',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'operatorName',
|
||||
key: 'operatorName',
|
||||
width: 100,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作IP',
|
||||
dataIndex: 'operationIp',
|
||||
key: 'operationIp',
|
||||
width: 150,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'operationTime',
|
||||
key: 'operationTime',
|
||||
width: 170,
|
||||
sorter: true
|
||||
},
|
||||
];
|
||||
|
||||
// 定义props
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
logId?: string;
|
||||
logPath?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
logId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
logPath: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
});
|
||||
|
||||
// 定义emit
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'ok', value: string): void;
|
||||
(e: 'cancel'): void;
|
||||
}>();
|
||||
|
||||
// 使用ref来管理visible,因为需要响应式更新
|
||||
const visible = ref(props.visible);
|
||||
|
||||
// 监听visible的变化,通知父组件更新
|
||||
watch(visible, (newVal) => {
|
||||
emit('update:visible', newVal);
|
||||
});
|
||||
|
||||
const handleOk = () => {
|
||||
// 可以在这里处理确定按钮的逻辑,然后关闭弹框
|
||||
emit('ok', '来自子组件的消息');
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel');
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
console.log(props.logId, 444, props.logPath)
|
||||
interface DataItem {
|
||||
children?: DataItem[];
|
||||
}
|
||||
|
||||
// const data: DataItem[] = [];
|
||||
const data = ref<DataItem[]>([]);
|
||||
|
||||
// 监听props.visible的变化,同步到visible
|
||||
watch(() => props.visible, (newVal) => {
|
||||
visible.value = newVal;
|
||||
if(newVal){
|
||||
console.log('显示数据日志,加载数据')
|
||||
getLog();
|
||||
}else{
|
||||
data.value = [];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @description: 获取数据日志
|
||||
*/
|
||||
async function getDataLogData(id: string,url:string, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get<boolean>(
|
||||
{url: url,params:{id}},{errorMessageMode: mode},
|
||||
);
|
||||
}
|
||||
|
||||
async function getLog() {
|
||||
data.value = await getDataLogData(props.logId,props.logPath,{})
|
||||
console.log(data.value, 88)
|
||||
}
|
||||
|
||||
onMounted( async() => {
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user