变更记录增加详情

src/components/ChangeRecord/src/ChangeRecord.vue

@@ -21,11 +21,12 @@
           </template>
           <template #description>
             <slot>
-              <div class="dic color-#303133">
+                <div class="dic color-#303133" >
-                {{ item.nickname }} {{ item.content }}
+                  {{ item.nickname }} {{ item.content }}
-              </div>
+                </div>
-
+                <el-button type="primary" bg text style="margin-top: 5px;" @click="seeDistinction(item)">查看变更数据</el-button>
 
+              
               <!-- <div class="tips" v-if="item.type == 2">
                 <span class="color-#f56c6c" style="text-decoration:line-through">原值</span>><span
                   class="color-#67c23a">新值</span>
@@ -41,6 +42,7 @@
           </template>
         </el-step>
       </el-steps>
+      <Distinction ref="distinctionRef" :schema="schema"/>
     </div>
   </div>
 </template>
@@ -48,6 +50,7 @@
 <script lang="ts" setup>
 import download from '@/utils/download'
 import { formatDate } from '@/utils/formatTime'
+import Distinction from '@/components/Distinction/src/Distinction.vue'
 defineComponent({
   name: 'ChangeRecord'
 })
@@ -56,12 +59,22 @@ const props = defineProps({
   changeRecordData: {
     type: Object,
     required: true
+  },
+  schema: {
+    type: Array,
+    required: true
   }
 })
 // 下载文件
 const downFile = (cur) => {
   download.excel(cur.url, cur.name)
 }
+const distinctionRef = ref()
+const seeDistinction = (row) => {
+  console.log(props.schema)
+  console.log(distinctionRef.value)
+  distinctionRef.value.openDistinction(row)
+}
 </script>
 
 

src/components/Detail/src/Detail.vue

@@ -166,7 +166,7 @@
         <ContentWrap class="w-[100%]" v-show="tabsList[current].label=='变更记录'" :style="{height:remarkHeight+'px'}">
           <ElScrollbar ref="scrollbar" :style="{height:(remarkHeight-40)+'px'}">
             <!-- 变更记录组件 -->
-            <ChangeRecord :changeRecordData="changeRecordData" class="mt-20px"  :key="count"/>
+            <ChangeRecord :changeRecordData="changeRecordData" class="mt-20px"  :key="count" :schema="allSchemas.detailSchema"/>
           </ElScrollbar> 
         </ContentWrap>
       </div>

src/components/Distinction/index.ts

@@ -0,0 +1,3 @@
+import Distinction from './src/Distinction.vue'
+
+export { Distinction }

src/components/Distinction/src/Distinction.vue

@@ -0,0 +1,51 @@
+<!-- 变更记录组件 -->
+<template>
+  <el-dialog v-model="dialogVisible" title="变更详情" width="80%" :before-close="handleClose">
+    <div style="display: flex">
+      <div style="flex: 1; width: 0px">
+        <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px"> 变更前 </div>
+        <Descriptions :data="beforeContent" :schema="schema" :columns="2" />
+      </div>
+      <div style="flex: 1; width: 0px; margin-left: 20px">
+        <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px"> 变更后 </div>
+        <Descriptions :data="afterContent" :schema="schema" :columns="2" />
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+defineComponent({
+  name: 'Distinction'
+})
+// 接收父组件数据
+const props = defineProps({
+  schema: {
+    type: Array,
+    required: true
+  }
+})
+const schema = ref(props.schema.filter(item => {
+ return item.field !='updater' &&  item.field !='updateTime' &&  item.field !='creator' &&  item.field !='createTime'
+}))
+const dialogVisible = ref(false)
+const afterContent = ref('')
+const beforeContent = ref('')
+const openDistinction = (row) => {
+  afterContent.value = JSON.parse(row.afterContent)
+  beforeContent.value = JSON.parse(row.beforeContent)
+  console.log(222,props.schema)
+  dialogVisible.value = true
+}
+
+defineExpose({ dialogVisible, openDistinction }) // 提供 open 方法，用于打开弹窗
+</script>
+
+
+<style scoped lang="scss">
+</style>