style 数据版本展示

src/views/modules/monitor/data/DataVersionLog.api.ts

@@ -22,36 +22,6 @@ export const get = (id) => {
   })
 }
 
-/**
- * 添加
- */
-export const add = (obj: DataVersionLog) => {
-  return defHttp.post({
-    url: '/log/dataVersion/add',
-    data: obj,
-  })
-}
-
-/**
- * 更新
- */
-export const update = (obj: DataVersionLog) => {
-  return defHttp.post({
-    url: '/log/dataVersion/update',
-    data: obj,
-  })
-}
-
-/**
- * 删除
- */
-export const del = (id) => {
-  return defHttp.delete({
-    url: '/log/dataVersion/delete',
-    params: { id },
-  })
-}
-
 /**
  * 查询全部
  */
@@ -65,10 +35,16 @@ export const findAll = () => {
  * 数据版本日志
  */
 export interface DataVersionLog extends BaseEntity {
+  // 表名称
+  tableName?: string
   // 数据名称
-  dataName: string
+  dataName?: string
   // 数据主键
-  dataId: string
+  dataId?: string
   // 数据内容
-  dataContent: string
+  dataContent?: string
+  // 本次变动的数据内容
+  changeContent?: string
+  // 数据版本
+  version?: number
 }

src/views/modules/monitor/data/DataVersionLogEdit.vue

@@ -1,113 +0,0 @@
-<template>
-  <basic-modal
-    v-bind="$attrs"
-    :loading="confirmLoading"
-    :width="modalWidth"
-    :title="title"
-    :visible="visible"
-    :mask-closable="showable"
-    @cancel="handleCancel"
-  >
-    <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-item label="主键" :hidden="true">
-        <a-input v-model:value="form.id" :disabled="showable" />
-      </a-form-item>
-      <a-form-item label="数据名称" name="dataName">
-        <a-input v-model:value="form.dataName" :disabled="showable" placeholder="请输入数据名称" />
-      </a-form-item>
-      <a-form-item label="数据主键" name="dataId">
-        <a-input v-model:value="form.dataId" :disabled="showable" placeholder="请输入数据主键" />
-      </a-form-item>
-      <a-form-item label="数据内容" name="dataContent">
-        <a-input v-model:value="form.dataContent" :disabled="showable" placeholder="请输入数据内容" />
-      </a-form-item>
-    </a-form>
-    <template #footer>
-      <a-space>
-        <a-button key="cancel" @click="handleCancel">取消</a-button>
-        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
-      </a-space>
-    </template>
-  </basic-modal>
-</template>
-
-<script lang="ts" setup>
-  import { nextTick, reactive } from 'vue'
-  import { $ref } from 'vue/macros'
-  import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, DataVersionLog } from './DataVersionLog.api'
-  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
-  import { FormEditType } from '/@/enums/formTypeEnum'
-  import { BasicModal } from '/@/components/Modal'
-
-  const {
-    initFormEditType,
-    handleCancel,
-    search,
-    labelCol,
-    wrapperCol,
-    modalWidth,
-    title,
-    confirmLoading,
-    visible,
-    editable,
-    showable,
-    formEditType,
-  } = useFormEdit()
-  // 表单
-  const formRef = $ref<FormInstance>()
-  let form = $ref({
-    id: null,
-    dataName: null,
-    dataId: null,
-    dataContent: null,
-  } as DataVersionLog)
-  // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
-  // 事件
-  const emits = defineEmits(['ok'])
-  // 入口
-  function init(id, editType: FormEditType) {
-    initFormEditType(editType)
-    resetForm()
-    getInfo(id, editType)
-  }
-  // 获取信息
-  function getInfo(id, editType: FormEditType) {
-    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
-      confirmLoading.value = true
-      get(id).then(({ data }) => {
-        form = data
-        confirmLoading.value = false
-      })
-    } else {
-      confirmLoading.value = false
-    }
-  }
-  // 保存
-  function handleOk() {
-    formRef?.validate().then(async () => {
-      confirmLoading.value = true
-      if (formEditType.value === FormEditType.Add) {
-        await add(form)
-      } else if (formEditType.value === FormEditType.Edit) {
-        await update(form)
-      }
-      confirmLoading.value = false
-      handleCancel()
-      emits('ok')
-    })
-  }
-
-  // 重置表单的校验
-  function resetForm() {
-    nextTick(() => {
-      formRef?.resetFields()
-    })
-  }
-  defineExpose({
-    init,
-  })
-</script>
-
-<style lang="less" scoped></style>

src/views/modules/monitor/data/DataVersionLogInfo.vue

@@ -0,0 +1,82 @@
+<template>
+  <basic-modal
+    v-bind="$attrs"
+    title="查看"
+    :width="960"
+    :loading="confirmLoading"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-descriptions title="" :column="{ md: 2, sm: 1, xs: 1 }">
+        <a-descriptions-item label="表名称">
+          {{ form.tableName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据名称">
+          {{ form.dataName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据主键">
+          {{ form.dataId }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据版本">
+          {{ form.version }}
+        </a-descriptions-item>
+        <a-descriptions-item label="数据内容">
+          <json-preview :data="JSON.parse(form.dataContent || '{}')" />
+        </a-descriptions-item>
+        <a-descriptions-item label="变动内容">
+          <json-preview :data="JSON.parse(form.changeContent || '{}')" />
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-spin>
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import JsonPreview from '/@/components/CodeEditor/src/json-preview/JsonPreview.vue'
+  import { get, DataVersionLog } from './DataVersionLog.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  let form = $ref<DataVersionLog>({})
+  // 入口
+  function init(id) {
+    visible.value = true
+    getInfo(id)
+  }
+  // 获取信息
+  function getInfo(id) {
+    get(id).then(({ data }) => {
+      form = data
+      confirmLoading.value = false
+    })
+  }
+
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/monitor/data/DataVersionLogList.vue

@@ -4,32 +4,19 @@
       <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
     </div>
     <div class="m-3 p-3 bg-white">
-      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
-        <template #buttons>
-          <a-space>
-            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
-          </a-space>
-        </template>
-      </vxe-toolbar>
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }" />
       <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
         <vxe-column type="seq" width="60" />
+        <vxe-column field="tableName" title="表名称" />
         <vxe-column field="dataName" title="数据名称" />
         <vxe-column field="dataId" title="数据主键" />
-        <vxe-column field="dataContent" title="数据内容" />
+        <vxe-column field="version" title="数据版本" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <span>
               <a href="javascript:" @click="show(row)">查看</a>
             </span>
-            <a-divider type="vertical" />
-            <span>
-              <a href="javascript:" @click="edit(row)">编辑</a>
-            </span>
-            <a-divider type="vertical" />
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-              <a href="javascript:" style="color: red">删除</a>
-            </a-popconfirm>
           </template>
         </vxe-column>
       </vxe-table>
@@ -47,23 +34,27 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue'
+  import { onMounted } from 'vue'
   import { $ref } from 'vue/macros'
-  import { del, page } from './DataVersionLog.api'
+  import { page } from './DataVersionLog.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
-  import DataVersionLogEdit from './DataVersionLogEdit.vue'
+  import DataVersionLogEdit from './DataVersionLogInfo.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
-  import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { QueryField } from '/@/components/Bootx/Query/Query'
+  import { NUMBER, QueryField, STRING } from '/@/components/Bootx/Query/Query'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage } = useMessage()
 
   // 查询条件
-  const fields = [] as QueryField[]
+  const fields = [
+    { field: 'dataName', type: STRING, name: '数据名称', placeholder: '请输入数据名称' },
+    { field: 'tableName', type: STRING, name: '表名称', placeholder: '请输入表名称' },
+    { field: 'dataId', type: STRING, name: '数据主键', placeholder: '请输入数据主键' },
+    { field: 'version', type: NUMBER, name: '数据版本', placeholder: '请输入数据版本' },
+  ] as QueryField[]
 
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
@@ -87,25 +78,9 @@
       pageQueryResHandel(data)
     })
   }
-  // 新增
-  function add() {
-    dataVersionLogEdit.init(null, FormEditType.Add)
-  }
-  // 查看
-  function edit(record) {
-    dataVersionLogEdit.init(record.id, FormEditType.Edit)
-  }
   // 查看
   function show(record) {
-    dataVersionLogEdit.init(record.id, FormEditType.Show)
-  }
-
-  // 删除
-  function remove(record) {
-    del(record.id).then(() => {
-      createMessage.success('删除成功')
-    })
-    queryPage()
+    dataVersionLogEdit.init(record.id)
   }
 </script>
 

src/views/modules/monitor/operate/OperateLogInfo.vue

@@ -50,7 +50,6 @@
   import { $ref } from 'vue/macros'
   import { get, OperateLog } from './OperateLog.api'
   import { BasicModal } from '/@/components/Modal'
-  import Description from '/@/components/Description/src/Description.vue'
   import { DescItem } from '/@/components/Description'
   import { useDict } from '/@/hooks/bootx/useDict'