cloud-web-corejs 1.0.54-dev.713 → 1.0.54-dev.715

package/src/components/xform/form-designer/form-widget/field-widget/fieldMixin.js

@@ -222,6 +222,66 @@ modules = {
         ? resultList[0]
         : null;
     },
+    // ===================== 表单对比：差异判定与展示 =====================
+    /**
+     * 差异判定：用「原始存储值」比较（下拉/关联按 code/id 比），可被具体 widget override。
+     */
+    compareEquals: function (a, b) {
+      const isEmpty = (v) =>
+        v === null ||
+        v === undefined ||
+        v === "" ||
+        (Array.isArray(v) && v.length === 0);
+      if (isEmpty(a) && isEmpty(b)) return true;
+      if (isEmpty(a) || isEmpty(b)) return false;
+      if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length) return false;
+        const sa = a.map((x) => String(x)).sort();
+        const sb = b.map((x) => String(x)).sort();
+        return sa.every((x, i) => x === sb[i]);
+      }
+      if (typeof a === "object" || typeof b === "object") {
+        try {
+          return JSON.stringify(a) === JSON.stringify(b);
+        } catch (e) {
+          return a === b;
+        }
+      }
+      return String(a) === String(b);
+    },
+    /**
+     * 把「任意原始值」解析成展示文本(label)，用于对比 popover 展示旧值。
+     * 下拉/单选/多选按 optionItems 解析 code→label；其它类型返回原值。
+     */
+    resolveDisplayValue: function (rawValue) {
+      if (rawValue === null || rawValue === undefined || rawValue === "") {
+        return rawValue;
+      }
+      // 凡是有 optionItems 的映射组件（select/radio/checkbox/status/dropdown 等）
+      // 统一按 optionItems 做 code→label；关联/switch/cascader 等在各自 widget override。
+      let optionItems = this.field.options.optionItems;
+      if (Array.isArray(optionItems) && optionItems.length) {
+        const labelField = this.getOptionItemLabelKey();
+        const valueField = this.getOptionItemValueKey();
+        const values = Array.isArray(rawValue) ? rawValue : [rawValue];
+        const labels = values.map((val) => {
+          const item = optionItems.find((o) => o[valueField] === val);
+          return item ? this.$t1(item[labelField]) : val;
+        });
+        return labels.join(",");
+      }
+      return rawValue;
+    },
+    /**
+     * 对比「变更前」展示值：给出原单的行/主表对象，返回该字段应展示的旧 label。
+     * 默认按本字段存储键取原始值再 resolveDisplayValue；关联搜索类组件（值存 id、
+     * label 存在同行的伴随字段）在各自 mixin override，从 oldRow 里取伴随 label 字段。
+     * @param {Object} oldRow 原单主表对象或子表行对象
+     */
+    resolveCompareOldDisplay: function (oldRow) {
+      let raw = oldRow ? oldRow[this.fieldKeyName] : undefined;
+      return this.resolveDisplayValue(raw);
+    },
     initValueWatchEvent() {
       if (!this.designer) {
         this.$watch(

package/src/components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -18,7 +18,16 @@
       <template v-if="formItemProp === 'false'">
         <template v-if="!field.options.hidden">
           <template v-if="isShowWidget()">
-            <slot></slot>
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <slot></slot>
+            </compareView>
+            <slot v-else></slot>
           </template>
           <template
             v-else-if="
@@ -55,7 +64,16 @@
             </div>
           </template>
           <template v-else>
-            <span>{{ getShowValue() }}</span>
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <span>{{ getShowValue() }}</span>
+            </compareView>
+            <span v-else>{{ getShowValue() }}</span>
           </template>
         </template>
       </template>
@@ -129,7 +147,16 @@
             {{ label }}
           </span>
           <template v-if="isShowWidget()">
-            <slot></slot>
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <slot></slot>
+            </compareView>
+            <slot v-else></slot>
           </template>
           <template
             v-else-if="
@@ -162,7 +189,16 @@
             </div>
           </template>
           <template v-else>
-            <span>{{ getShowValue() }}</span>
+            <compareView
+              v-if="isCompareOn"
+              :isCompare="isCompareOn"
+              :isDiff="compareIsDiff"
+              :oldVal="compareOldDisplay"
+              :newVal="getShowValue()"
+            >
+              <span>{{ getShowValue() }}</span>
+            </compareView>
+            <span v-else>{{ getShowValue() }}</span>
           </template>
         </el-form-item>
       </template>
@@ -216,10 +252,12 @@ import {
   getSubFormNameByFieldId,
   isVabsearchMultiWidget,
 } from "../../../../../components/xform/utils/util";
+import compareView from "../../../../../components/xform/form-render/compareView.vue";
 
 export default {
   name: "form-item-wrapper",
   mixins: [i18n],
+  components: { compareView },
   props: {
     field: Object,
     designer: Object,
@@ -246,15 +284,21 @@ export default {
 
     rules: Array,
   },
-  inject: [
-    "getFormConfig",
-    "getSubFormFieldFlag",
-    "getSubFormName",
-    "tableParam",
-    "formItemProp",
-    "getObjectFieldFlag",
-    "getObjectName",
-  ],
+  inject: {
+    getFormConfig: { default: () => () => ({}) },
+    getSubFormFieldFlag: { default: () => () => false },
+    getSubFormName: { default: () => () => "" },
+    tableParam: { default: null },
+    formItemProp: { default: null },
+    getObjectFieldFlag: { default: () => () => false },
+    getObjectName: { default: () => () => "" },
+    // 表单对比：非对比渲染场景(如设计器)给默认值，避免注入警告
+    getIsCompare: { default: () => () => false },
+    getOldFormData: { default: () => () => ({}) },
+    getCompareRowKey: { default: () => () => "uuid" },
+    getCompareExcludeTypes: { default: () => () => [] },
+    isCompareExcludeField: { default: () => () => false },
+  },
   data() {
     return {
       encryptFormula: null,
@@ -324,6 +368,65 @@ export default {
         (!!this.parentWidget ? this.parentWidget.type === "sub-form" : false)
       );
     },
+
+    // ===================== 表单对比 =====================
+    compareExcluded() {
+      // 按类型排除
+      let types = this.getCompareExcludeTypes() || [];
+      if (types.indexOf(this.field.type) !== -1) return true;
+      // 按字段名排除（系统审计字段 + 业务配置 compareExcludeFields）
+      let fieldKeyName =
+        (this.field.options.keyNameEnabled && this.field.options.keyName) ||
+        this.field.options.name;
+      return !!this.isCompareExcludeField(fieldKeyName);
+    },
+    isCompareOn() {
+      return !this.designer && !this.compareExcluded && !!this.getIsCompare();
+    },
+    // 原单的行/主表对象（供关联类组件取伴随 label 字段）
+    compareOldRow() {
+      // 表格/子表单行内字段：取该行 hData 快照
+      if (this.tableParam && this.tableParam.row) {
+        return this.tableParam.row.hData || null;
+      }
+      // 主表字段
+      return this.getOldFormData() || null;
+    },
+    compareOldRaw() {
+      let property =
+        (this.field.options.keyNameEnabled && this.field.options.keyName) ||
+        this.field.options.name;
+      let row = this.compareOldRow;
+      return row ? row[property] : null;
+    },
+    compareNewRaw() {
+      return this.$parent ? this.$parent.fieldModel : null;
+    },
+    // 表格新增行（无原单匹配，hData 为空或缺失）：整行标识，不逐单元格显示感叹号
+    compareRowIsNew() {
+      if (!this.tableParam || !this.tableParam.row) return false;
+      let hData = this.tableParam.row.hData;
+      return !hData || Object.keys(hData).length === 0;
+    },
+    compareIsDiff() {
+      if (!this.isCompareOn) return false;
+      if (this.compareRowIsNew) return false;
+      let eq =
+        this.$parent && this.$parent.compareEquals
+          ? this.$parent.compareEquals(this.compareOldRaw, this.compareNewRaw)
+          : this.compareOldRaw === this.compareNewRaw;
+      return !eq;
+    },
+    compareOldDisplay() {
+      // 优先用 resolveCompareOldDisplay（可从 oldRow 取关联类的伴随 label 字段）
+      if (this.$parent && this.$parent.resolveCompareOldDisplay) {
+        return this.$parent.resolveCompareOldDisplay(this.compareOldRow);
+      }
+      if (this.$parent && this.$parent.resolveDisplayValue) {
+        return this.$parent.resolveDisplayValue(this.compareOldRaw);
+      }
+      return this.compareOldRaw;
+    },
   },
   created() {
     //

package/src/components/xform/form-designer/form-widget/field-widget/mixins/autocomplete-mixin.js

@@ -182,6 +182,11 @@ export default {
     fieldModelLabel() {
       return this.displayValue;
     },
+    // 对比旧值：label 存在原单同行的伴随字段(displayField)，从 oldRow 取
+    resolveCompareOldDisplay(oldRow) {
+      if (!oldRow) return null;
+      return oldRow[this.displayField] ?? null;
+    },
     /**
      * 远程搜索：调用后台逻辑脚本，返回建议列表
      * el-autocomplete 的 fetch-suggestions 回调签名 (queryString, callback)

package/src/components/xform/form-designer/form-widget/field-widget/mixins/vabsearch-mixin.js

@@ -175,5 +175,18 @@ export default {
     fieldModelLabel() {
       return this.showValue;
     },
+    // 对比旧值：label 存在原单同行的伴随字段(vabSearchName)，从 oldRow 取
+    resolveCompareOldDisplay(oldRow) {
+      if (!oldRow) return null;
+      let labelField = this.field.options.vabSearchName || this.fieldKeyName;
+      let multipleChoices = this.field.options.multipleChoices || false;
+      if (multipleChoices) {
+        let arr = oldRow[this.fieldKeyName];
+        return Array.isArray(arr)
+          ? arr.map((item) => item && item[labelField]).join(",")
+          : null;
+      }
+      return oldRow[labelField] ?? null;
+    },
   }
 }

package/src/components/xform/form-designer/form-widget/field-widget/status-widget.vue

@@ -149,6 +149,17 @@ export default {
       }
       return label;
     },
+    // 对比展示：按 statusParam 做 value→label（status 用 statusParam 而非 optionItems）
+    resolveDisplayValue(rawValue) {
+      if (rawValue === null || rawValue === undefined || rawValue === "") {
+        return rawValue;
+      }
+      let valueField = this.valueField;
+      let labelField = this.labelField;
+      let list = this.field.options.statusParam || [];
+      let item = list.find((it) => it[valueField] === rawValue);
+      return item ? this.getI18nLabel(item[labelField]) : rawValue;
+    },
   },
 };
 </script>

package/src/components/xform/form-designer/form-widget/field-widget/switch-widget.vue

@@ -86,7 +86,15 @@
     },
 
     methods: {
-
+      // 对比展示：布尔值 → activeText/inactiveText
+      resolveDisplayValue(rawValue) {
+        if (rawValue === null || rawValue === undefined || rawValue === "") {
+          return rawValue;
+        }
+        return rawValue
+          ? this.field.options.activeText
+          : this.field.options.inactiveText;
+      },
     }
   }
 </script>

package/src/components/xform/form-designer/widget-panel/index.vue

@@ -163,6 +163,19 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            <el-collapse-item name="compare" :title="i18nt('对比组件')">
+              <draggable tag="ul" :list="compareFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in compareFields" :key="index" class="field-widget-item"
+                    :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+              <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
+              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
+              </span>
+                </li>
+              </draggable>
+            </el-collapse-item>
           </el-collapse>
         </el-tab-pane>
         <!--       <el-tab-pane v-if="showFormTemplates" name="formLib" style="padding: 8px">
@@ -192,12 +205,28 @@
 <script>
 import Draggable from 'vuedraggable'
 import indexMixin from './indexMixin.js';
+import { compareFields } from './widgetsConfig';
 
 export default {
   name: "FieldPanel",
   mixins: [indexMixin],
   components: {
     Draggable,
+  },
+  data() {
+    return {
+      compareFields,
+    };
+  },
+  created() {
+    // 让「对比组件」分组默认展开
+    if (Array.isArray(this.businessActiveNames)) {
+      if (this.businessActiveNames.indexOf("compare") === -1) {
+        this.businessActiveNames.push("compare");
+      }
+    } else if (this.businessActiveNames !== "compare") {
+      this.businessActiveNames = [this.businessActiveNames, "compare"];
+    }
   }
 }
 </script>

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -928,7 +928,7 @@ const autocompleteConfig = {
   //condition传值格式：勾选后关键词以 { condition:[{field,value,filter:'like'}], current,size,searchCount } 结构传递
   conditionFormat: true,
   //condition格式下的分页条数
-  conditionSize: 100,
+  conditionSize: 200,
   //condition格式下查询的数据表(taBm)，留空则取字段本身 keyName
   conditionTaBm: null,
   prefixIcon: null,
@@ -4224,6 +4224,143 @@ export const businessFields = [
   },
 ];
 
+// ============== 对比组件模块（业务组件标签页下的独立分组）==============
+export const compareFields = [
+  {
+    type: "compare-button",
+    targetType: "button",
+    icon: "button",
+    commonFlag: !0,
+    formItemFlag: !1,
+    columnFlag: true,
+    options: {
+      name: "",
+      label: "对比",
+      wfHideFlag: 1,
+      columnWidth: "200px",
+      size: "",
+      displayStyle: "block",
+      disabled: !1,
+      hidden: !1,
+      type: "default",
+      plain: !1,
+      round: !1,
+      circle: !1,
+      icon: null,
+      customClass: "",
+      onCreated: "",
+      onMounted: "",
+      onClick:
+        "this.getFormRef().getGlobalConfig().enableCompareBySource(this)",
+      accessType: "1",
+      clickBindEvent: null,
+      onBeforeClickButton: null,
+      searchDialogConfig: {
+        ...defaultSearchDialogConfig,
+      },
+      addTableDataConfig: {
+        tableRef: null,
+        tableData: {},
+      },
+      ...defaultWfConfig,
+      hiddenByWf: true,
+      ...defaultWidgetShowRuleConfig,
+
+      showRuleFlag: 1,
+      showRuleEnabled: 1,
+      showRules: [],
+    },
+  },
+  {
+    type: "compare-close-button",
+    targetType: "button",
+    icon: "button",
+    commonFlag: !0,
+    formItemFlag: !1,
+    columnFlag: true,
+    options: {
+      name: "",
+      label: "关闭对比",
+      wfHideFlag: 1,
+      columnWidth: "200px",
+      size: "",
+      displayStyle: "block",
+      disabled: !1,
+      hidden: !0, // 默认隐藏，开启对比后由 handleCompareButton 放出
+      type: "default",
+      plain: !1,
+      round: !1,
+      circle: !1,
+      icon: null,
+      customClass: "",
+      onCreated: "",
+      onMounted: "",
+      onClick: "this.getFormRef().getGlobalConfig().disableCompare(this)",
+      accessType: "1",
+      clickBindEvent: null,
+      onBeforeClickButton: null,
+      searchDialogConfig: {
+        ...defaultSearchDialogConfig,
+      },
+      addTableDataConfig: {
+        tableRef: null,
+        tableData: {},
+      },
+      ...defaultWfConfig,
+      hiddenByWf: true,
+      ...defaultWidgetShowRuleConfig,
+
+      showRuleFlag: 1,
+      showRuleEnabled: 1,
+      showRules: [],
+    },
+  },
+  {
+    type: "compare-del-button",
+    targetType: "button",
+    icon: "button",
+    commonFlag: !0,
+    formItemFlag: !1,
+    columnFlag: true,
+    options: {
+      name: "",
+      label: "查看删除明细",
+      wfHideFlag: 1,
+      columnWidth: "200px",
+      size: "",
+      displayStyle: "block",
+      disabled: !1,
+      hidden: !0, // 默认隐藏，开启对比后由 handleCompareButton 放出
+      type: "default",
+      plain: !1,
+      round: !1,
+      circle: !1,
+      icon: null,
+      customClass: "",
+      onCreated: "",
+      onMounted: "",
+      onClick: "this.getFormRef().openCompareDelList('明细表keyName')",
+      accessType: "1",
+      clickBindEvent: null,
+      onBeforeClickButton: null,
+      searchDialogConfig: {
+        ...defaultSearchDialogConfig,
+      },
+      addTableDataConfig: {
+        tableRef: null,
+        tableData: {},
+      },
+      ...defaultWfConfig,
+      hiddenByWf: true,
+      ...defaultWidgetShowRuleConfig,
+
+      showRuleFlag: 1,
+      showRuleEnabled: 1,
+      showRules: [],
+    },
+  },
+];
+
 export const keyNamePrefixMap = {
   vabUpload: "attachments_",
   baseAttachment: "attachments_",

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

@@ -0,0 +1,83 @@
+<!--
+/**
+ * 对比 - 查看删除数据弹窗
+ * option: { subFormName, columns:[{ title, field }], data:[...] }
+ * columns 为空时按首行数据的 key 自动生成列。
+ */
+-->
+<template>
+  <el-dialog
+    custom-class="dialog-style list-dialog dialog-checkbox pd_0"
+    :title="$t1('查看删除数据')"
+    :visible="visiable"
+    width="70%"
+    append-to-body
+    :modal-append-to-body="true"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    v-el-drag-dialog
+    v-el-dialog-center
+  >
+    <div class="cont" style="height: 450px">
+      <vxe-grid
+        border
+        size="mini"
+        height="425px"
+        auto-resize
+        :columns="gridColumns"
+        :data="rows"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "CompareDelList",
+  props: {
+    visiable: { type: Boolean, default: false },
+    option: { type: Object, default: () => ({}) },
+  },
+  computed: {
+    rows() {
+      return (this.option && this.option.data) || [];
+    },
+    cols() {
+      let columns = (this.option && this.option.columns) || [];
+      if (columns.length) return columns;
+      // 无列配置时按首行 key 自动生成（排除内部字段）
+      let first = this.rows[0] || {};
+      return Object.keys(first)
+        .filter((k) => k !== "hData" && !k.startsWith("_"))
+        .map((k) => ({ field: k, title: k }));
+    },
+    // vxe-grid 列：序号列 + 业务列
+    gridColumns() {
+      let seq = {
+        type: "seq",
+        title: this.$t1("序号"),
+        width: 90,
+        align: "center",
+      };
+      let cols = this.cols.map((c) => {
+        let col = {
+          field: c.field,
+          title: c.title,
+          showOverflow: "tooltip",
+        };
+        // 沿用当前数据表格的列宽；都没有时给个最小宽度兜底
+        if (c.width) col.width = c.width;
+        if (c.minWidth) col.minWidth = c.minWidth;
+        if (!c.width && !c.minWidth) col.minWidth = 120;
+        return col;
+      });
+      return [seq].concat(cols);
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit("update:visiable", false);
+    },
+  },
+};
+</script>

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>