cloud-web-corejs 1.0.54-dev.714 → 1.0.54-dev.716

package/src/components/xform/form-render/compareView.vue

@@ -0,0 +1,76 @@
+<!--
+/**
+ * 表单对比提示组件
+ * 差异判定(isDiff)由字段侧(fieldMixin.compareEquals)算好传入，本组件不做裸值比较；
+ * oldVal 传入的是已解析的展示文本(label)，用于 popover 展示"变更前"值。
+ * 注意：DOM 顺序里 slot 必须始终在前（index 0），图标为其后的条件兄弟节点，
+ * 否则 isDiff 切换时按索引 patch 会重建 slot 内的 input，导致手动输入时失焦。
+ * 视觉上用 flex order 把图标排到输入框前面。
+ */
+-->
+<template>
+  <span class="xform-compare-view">
+    <span class="xform-compare-slot"><slot></slot></span>
+    <span v-if="isCompare && isDiff" class="xform-compare-icon-wrap">
+      <el-popover placement="top-start" width="200" trigger="hover">
+        <div class="xform-compare-old">
+        {{ $t1("变更前") }}：{{ displayOldVal }}
+      </div>
+        <span slot="reference" class="xform-compare-icon">
+          <i class="el-icon-warning"></i>
+        </span>
+      </el-popover>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "CompareView",
+  props: {
+    isCompare: { type: Boolean, default: false },
+    isDiff: { type: Boolean, default: false },
+    oldVal: { default: null },
+    newVal: { default: null },
+  },
+  computed: {
+    displayOldVal() {
+      let v = this.oldVal;
+      if (v === null || v === undefined || v === "") return this.$t1("（空）");
+      return v;
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 对比态用 flex；图标固定在输入框前面（左侧），输入框占满剩余宽度 */
+.xform-compare-view {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+/* DOM 在前但视觉排到后面，输入框自适应占满 */
+.xform-compare-slot {
+  order: 1;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* DOM 在后但视觉排到前面 */
+.xform-compare-icon-wrap {
+  order: 0;
+  flex: 0 0 auto;
+  margin-right: 4px;
+  line-height: 1;
+}
+.xform-compare-icon {
+  color: #e6a23c;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.xform-compare-old {
+  font-size: 12px;
+  word-break: break-all;
+}
+</style>

package/src/components/xform/form-render/container-item/data-table-item.vue

@@ -329,4 +329,19 @@ export default {
 .field-wrapper {
   display: inline-block;
 }
+/* 对比：变更行/新增行整行高亮（vxe 行加 rowClassName） */
+::v-deep .vxe-body--row.xform-compare-row-changed,
+::v-deep .vxe-body--row.xform-compare-row-changed td {
+  background-color: #fdf2e3; /* 橙 - 变更 */
+}
+::v-deep .vxe-body--row.xform-compare-row-changed td:first-child {
+  box-shadow: inset 3px 0 0 #e6a23c;
+}
+::v-deep .vxe-body--row.xform-compare-row-new,
+::v-deep .vxe-body--row.xform-compare-row-new td {
+  background-color: #eef8e3; /* 绿 - 新增 */
+}
+::v-deep .vxe-body--row.xform-compare-row-new td:first-child {
+  box-shadow: inset 3px 0 0 #67c23a;
+}
 </style>

package/src/components/xform/form-render/container-item/data-table-mixin.js

@@ -1424,6 +1424,24 @@ modules = {
     getTableData: function () {
       return this.widget.options.tableData;
     },
+    /**
+     * 注入对比行样式：变更行/新增行整行高亮。组合已有 rowClassName，不覆盖原逻辑。
+     */
+    applyCompareRowClassName: function () {
+      if (!this.vxeOption) return;
+      let prev = this.vxeOption.rowClassName;
+      let self = this;
+      this.$set(this.vxeOption, "rowClassName", function (params) {
+        let cls =
+          typeof prev === "function" ? prev(params) || "" : prev || "";
+        let formRef = self.getFormRef();
+        if (formRef && formRef.isCompare && formRef.getCompareRowClass) {
+          let extra = formRef.getCompareRowClass(self.fieldKeyName, params.row);
+          if (extra) cls = (cls + " " + extra).trim();
+        }
+        return cls;
+      });
+    },
     /**
      * 重置查询表单，并按配置决定是否立即重新查询。
      * @param {Object} options 可覆盖默认重置行为。
@@ -2568,6 +2586,7 @@ modules = {
       }
       this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
         this.vxeOption = opts;
+        this.applyCompareRowClassName();
         this.tryAutoLoadDynamicColumns().finally(() => {
           if (!isQueryTable) {
             setTimeout(() => {

package/src/components/xform/form-render/index.vue

@@ -105,6 +105,11 @@
       :visiable.sync="showUniverDialog"
       :option="univerDialogOption"
     ></univerDialog>
+    <compareDelList
+      v-if="showCompareDelList"
+      :visiable.sync="showCompareDelList"
+      :option="compareDelListOption"
+    ></compareDelList>
   </div>
 </template>
 
@@ -134,7 +139,9 @@ export default {
     fileReferenceDialog: () =>
       import(
         "../../../components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue"
-      )
+      ),
+    compareDelList: () =>
+      import("../../../components/xform/form-render/compareDelList.vue"),
   },
   mixins: [indexMixin, formDynamicFieldMixin],
 };