税率

src/views/mdm/Bank/components/DataLog.vue

@@ -1,31 +1,44 @@
 <template>
-  <div :style="{ height: '100%', background: '#fff' }">
+  <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>
 
-    <a-table :columns="columns" :data-source="data" :scroll="{y: 500}"  :row-key="record => record.id"
-      />
   </div>
   </template>
   <script lang="ts" setup>
   import { getDataLog } from '/@/api/mdm/Bank';
-  import { defineProps, ref, computed, onMounted, onUnmounted, createVNode, reactive, } from 'vue';
+  import { watch, defineProps, ref, computed, onMounted, onUnmounted, createVNode, reactive, } from 'vue';
   const columns = [
   {
       title: '表名',
       dataIndex: 'tableName',
       key: 'tableName',
-      width: 80
+      width: 100,
+      ellipsis: true,
+      sorter: true
     },
     {
       title: '属性名称',
       dataIndex: 'name',
       key: 'name',
-      width: 140
+      width: 100,
+      ellipsis: true,
+      sorter: true
+    
     },
     {
       title: '操作类型',
       dataIndex: 'operationType',
       key: 'operationType',
-      width: 100,
+      width: 80,
+      sorter: true,
       customRender: ({ record }) => {
         let text = record.operationType
         if (record.operationType == 'INSERT') text='新增'
@@ -38,43 +51,92 @@
       title: '原数据',
       dataIndex: 'oldValue',
       key: 'oldValue',
-      width: 150
+      width: 150,
+      ellipsis: true,
+      sorter: true
     },
     {
       title: '新数据',
       dataIndex: 'newValue',
       key: 'newValue',
-      width: 150
+      width: 150,
+      ellipsis: true,
+      sorter: true
     },
     {
       title: '操作人',
       dataIndex: 'operatorName',
       key: 'operatorName',
-      width: 100
+      width: 100,
+      sorter: true
     },
     {
       title: '操作IP',
       dataIndex: 'operationIp',
       key: 'operationIp',
-      width: 150
+      width: 150,
+      sorter: true
     },
     {
       title: '操作时间',
       dataIndex: 'operationTime',
       key: 'operationTime',
-      width: 150
+      width: 170,
+      sorter: true
     },
   ];
-  const props = defineProps({
+  // 定义props
+  interface Props {
+    visible: boolean;
+    logId?: string;
+    logPath?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
     logId: {
-        type: String,
-        required: true
-    },
-    logPath: {
-        type: String,
-        required: true
-    },
-})
+          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);
+
+// 监听props.visible的变化，同步到visible
+watch(() => props.visible, (newVal) => {
+  visible.value = newVal;
+  console.log(visible.value, 42424)
+  getLogData()
+});
+
+// 监听visible的变化，通知父组件更新
+watch(visible, (newVal) => {
+  console.log(visible.value, 42425)
+  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[];
@@ -83,10 +145,14 @@ console.log(props.logId, 444, props.logPath)
   // const data: DataItem[] = [];
   const data = ref<DataItem[]>([]);
   
+  async function getLogData() {
+    data.value = await getDataLog(props.logId, {},props.logPath)
+    console.log(data.value, 88)
+  }
+
   onMounted( async() => {
     
-  data.value = await getDataLog(props.logId, {},props.logPath)
-  console.log(data.value, 88)
+  
   });
   </script>
   

src/views/mdm/Bank/index.vue

@@ -21,18 +21,19 @@
         </template>
       </BasicTable>
    <BankModal @register="registerModal" @success="handleSuccess" />
-   <!-- <div>
 
-     <DataLog :logId="logId" :logPath="logPath"  />
-   </div> -->
+
+  <DataLog :logId="logId" :logPath="logPath" v-model:visible="modalVisible"/>
+  
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { ref, computed, onMounted, onUnmounted, createVNode, reactive, 
 
 } from 'vue';
-const logId = ref('77773434')
-const logPath = ref('/bank/b')
+const modalVisible = ref(false);
+const logId = ref('')
+const logPath = ref('/mdm/bank/datalog');
   import { Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
@@ -191,8 +192,10 @@ const logPath = ref('/bank/b')
     
     btnEvent[code]();
   }
-  function handleDatalog () {
-     dataObj.visible = true
+  function handleDatalog (record: Recordable) {
+    modalVisible.value = true
+    logId.value = record.id
+    console.log('日志', modalVisible.value, record)
   }
   function handleAdd() {
     if (schemaIdComputedRef.value) {