变更详情描述颜色修改

src/components/Descriptions/src/Descriptions.vue

@@ -28,6 +28,7 @@ const props = defineProps({
   width: propTypes.string.def('50px'),
   labelAlign: propTypes.string.def('right'),
   labelClassName: propTypes.string.def(''),
+  valueClassName: propTypes.string.def(''),
   schema: {
     type: Array as PropType<DescriptionsSchema[]>,
     default: () => []
@@ -126,6 +127,7 @@ const showAll = () =>{
             v-bind="getBindItemValue(item)"
             :label-align="labelAlign"
             :label-class-name="labelClassName"
+            :class-name="valueClassName || item.labelClassName"
             :width="width"
             :span="item.span"
           >
@@ -192,4 +194,14 @@ $prefix-cls: #{$namespace}-descriptions;
     width: 0;
   }
 }
+:deep(.text-red) {
+ color:red!important;
+//  background: #fff3f3;
+}
+:deep(.text-red .el-tag) {
+ background:#fef0f0!important;
+ color:red!important;
+ border-color:#fde2e2!important;
+//  background: #fff3f3;
+}
 </style>

src/components/Distinction/src/Distinction.vue

@@ -2,13 +2,13 @@
 <template>
   <el-dialog v-model="dialogVisible" title="变更详情" width="80%" :before-close="handleClose">
     <div style="display: flex">
-      <div style="flex: 1; width: 0px"  v-if="beforeContent">
+      <div style="flex: 1; width: 0px" v-if="beforeContent">
         <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px"> 变更前 </div>
-        <Descriptions :data="beforeContent" :schema="schema" :columns="2" />
+        <Descriptions :data="beforeContent" :schema="beforeSchema" :columns="2" />
       </div>
       <div style="flex: 1; width: 0px; margin-left: 20px" v-if="afterContent">
         <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px"> 变更后 </div>
-        <Descriptions :data="afterContent" :schema="schema" :columns="2" />
+        <Descriptions :data="afterContent" :schema="afterSchema" :columns="2" />
       </div>
     </div>
     <template #footer>
@@ -30,19 +30,49 @@ const props = defineProps({
     required: true
   }
 })
-const schema = ref(props.schema.filter(item => {
- return item.field !='updater' &&  item.field !='updateTime' &&  item.field !='creator' &&  item.field !='createTime'
-}))
+const beforeSchema = ref(JSON.parse(JSON.stringify(props.schema.filter((item) => {
+    return (
+      item.field != 'updater' &&
+      item.field != 'updateTime' &&
+      item.field != 'creator' &&
+      item.field != 'createTime'
+    )
+  }))))
+const afterSchema = ref(JSON.parse(JSON.stringify(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)
+  areObjectsDifferent(beforeContent.value, afterContent.value)
   dialogVisible.value = true
 }
-
+const areObjectsDifferent = (obj1, obj2) => {
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+  for (let key of keys1) {
+    afterSchema.value.forEach((item) => {
+        if (item.field === key) {
+          item.labelClassName = ''
+        }
+      })
+    if (obj2.hasOwnProperty(key) && obj1[key] !== obj2[key]) {
+      afterSchema.value.forEach((item) => {
+        if (item.field === key) {
+          item.labelClassName = 'text-red'
+        }
+      })
+    }
+  }
+}
 defineExpose({ dialogVisible, openDistinction }) // 提供 open 方法，用于打开弹窗
 </script>