cloud-web-corejs 1.0.54-dev.660 → 1.0.54-dev.662

package/src/components/xform/utils/tableColumnHelper.js

@@ -0,0 +1,112 @@
+function buildColumnConfigMap(tableColumns, map = {}) {
+  if (!tableColumns || !tableColumns.length) {
+    return map;
+  }
+  tableColumns.forEach((col) => {
+    if (col.prop) {
+      map[col.prop] = col;
+    }
+    if (col.columnId) {
+      map[`__id__${col.columnId}`] = col;
+    }
+    if (col.children && col.children.length) {
+      buildColumnConfigMap(col.children, map);
+    }
+  });
+  return map;
+}
+
+function enrichColumnList(columns, configMap) {
+  if (!columns || !columns.length) {
+    return columns;
+  }
+  return columns.map((col) => {
+    const newCol = Object.assign({}, col);
+    if (col.slots) {
+      newCol.slots = Object.assign({}, col.slots);
+    }
+    const field = col.field;
+    const columnId = col.params && col.params.columnId;
+    const config =
+      (field && configMap[field]) ||
+      (columnId && configMap[`__id__${columnId}`]);
+    if (config) {
+      applyColumnLabelIcon(newCol, config);
+    }
+    if (col.children && col.children.length) {
+      newCol.children = enrichColumnList(col.children, configMap);
+    }
+    return newCol;
+  });
+}
+
+/**
+ * Apply data-table column header icon config to vxe-table column definition.
+ */
+export function applyColumnLabelIcon(col, columnConfig) {
+  if (!col || !columnConfig) {
+    return col;
+  }
+
+  const iconClass = columnConfig.labelIconClass;
+  const position = columnConfig.labelIconPosition || "front";
+  const tooltip = columnConfig.labelTooltip;
+  const required = !!columnConfig.required;
+  const title = col.title;
+
+  if (!iconClass && !required) {
+    return col;
+  }
+
+  const buildIcon = (h) => {
+    const icon = h("i", { class: ["vxe-cell-help-icon", iconClass] });
+    if (!tooltip) {
+      return icon;
+    }
+    return h(
+      "el-tooltip",
+      {
+        props: { content: tooltip, effect: "dark", placement: "top" },
+      },
+      [icon]
+    );
+  };
+
+  if (iconClass && position === "front" && !required) {
+    col.titlePrefix = {
+      icon: iconClass,
+      ...(tooltip ? { content: tooltip } : {}),
+    };
+    return col;
+  }
+
+  if (required && !iconClass) {
+    col.titlePrefix = { icon: "vxe-cell--required-icon" };
+    return col;
+  }
+
+  col.slots = col.slots || {};
+  delete col.titlePrefix;
+
+  col.slots.header = (params, h) => {
+    const nodes = [];
+    if (required) {
+      nodes.push(h("i", { class: "vxe-cell--required-icon" }));
+    }
+    if (iconClass && position === "front") {
+      nodes.push(buildIcon(h));
+    }
+    nodes.push(h("span", { class: "vxe-cell--title" }, title));
+    if (iconClass && position === "rear") {
+      nodes.push(buildIcon(h));
+    }
+    return nodes;
+  };
+
+  return col;
+}
+
+export function enrichTableColumnsWithLabelIcon(columns, tableColumns) {
+  const configMap = buildColumnConfigMap(tableColumns || []);
+  return enrichColumnList(columns, configMap);
+}

package/src/views/bd/setting/formVersion/compareBasicSection.vue

@@ -105,6 +105,12 @@ export default {
     width: calc((100% - 160px) / 2);
     color: #303133;
 
+    .version-blue,
+    .version-green {
+      margin-top: 2px;
+      margin-bottom: 0;
+    }
+
     .compare-revert-btn {
       float: right;
     }

package/src/views/bd/setting/formVersion/compareCodeSection.vue

@@ -5,10 +5,10 @@
   >
     <div class="compare-code-header">
       <div class="compare-header-main">
-        <div class="title"><b>{{ $t1(sectionTitle) }}</b></div>
+        <div class="title">
+          <b>{{ $t1(sectionTitle) }}</b>
+        </div>
         <div v-if="enableDiff" class="compare-diff-legend">
-          <span class="legend-item legend-old">{{ $t1("变更/删除") }}</span>
-          <span class="legend-item legend-new">{{ $t1("变更/新增") }}</span>
           <span class="compare-diff-nav">
             <span
               class="diff-nav-btn"
@@ -28,12 +28,18 @@
               <i class="el-icon-caret-top"></i>{{ $t1("返回顶部") }}
             </span>
             <span v-if="diffNavList.length" class="diff-nav-count">
-              {{ currentDiffIndex < 0 ? "-" : currentDiffIndex + 1 }} / {{ diffNavList.length }}
+              {{ currentDiffIndex < 0 ? "-" : currentDiffIndex + 1 }} /
+              {{ diffNavList.length }}
             </span>
           </span>
         </div>
       </div>
-      <el-tooltip class="item" effect="dark" :content="$t1('全屏')" placement="top">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="$t1('全屏')"
+        placement="top"
+      >
         <el-link class="is-full" :underline="false" @click="toggleFullscreen">
           <i class="iconfont icon-quanping"></i>
         </el-link>
@@ -237,7 +243,10 @@ export default {
 
       const leftText = leftEditor.getValue();
       const rightText = rightEditor.getValue();
-      const { oldMarks, newMarks, diffNavList } = diffLines(leftText, rightText);
+      const { oldMarks, newMarks, diffNavList } = diffLines(
+        leftText,
+        rightText
+      );
       this.diffNavList = diffNavList || [];
       this.currentDiffIndex = -1;
       const Range = ace.require("ace/range").Range;
@@ -262,12 +271,14 @@ export default {
     gotoPrevDiff() {
       if (!this.diffNavList.length) return;
       this.currentDiffIndex =
-        (this.currentDiffIndex - 1 + this.diffNavList.length) % this.diffNavList.length;
+        (this.currentDiffIndex - 1 + this.diffNavList.length) %
+        this.diffNavList.length;
       this.locateCurrentDiff();
     },
     gotoNextDiff() {
       if (!this.diffNavList.length) return;
-      this.currentDiffIndex = (this.currentDiffIndex + 1) % this.diffNavList.length;
+      this.currentDiffIndex =
+        (this.currentDiffIndex + 1) % this.diffNavList.length;
       this.locateCurrentDiff();
     },
     gotoTop() {
@@ -308,10 +319,7 @@ export default {
       const targetRow = Math.max(0, Math.min(row, maxRow));
       editor.scrollToLine(targetRow, true, true, () => {});
       editor.gotoLine(targetRow + 1, 0, true);
-      editor.renderer.scrollCursorIntoView(
-        { row: targetRow, column: 0 },
-        0.5
-      );
+      editor.renderer.scrollCursorIntoView({ row: targetRow, column: 0 }, 0.5);
     },
     locateCurrentDiff() {
       const diffItem = this.diffNavList[this.currentDiffIndex];
@@ -352,6 +360,15 @@ export default {
   @include compare-flex-row;
 
   .compare-code-flex {
+    margin-top: 0;
+
+    .compare-code-col {
+      .version-blue,
+      .version-green {
+        margin-bottom: 8px;
+      }
+    }
+
     ::v-deep .ace-container {
       border: 1px solid #ebeef5;
     }
@@ -449,25 +466,25 @@ export default {
     ::v-deep .ace_marker-layer {
       .compare-diff-old {
         position: absolute;
-        background: rgba(245, 108, 108, 0.28);
+        background: rgba(245, 108, 108, 0.2);
         z-index: 3;
       }
 
       .compare-diff-new {
         position: absolute;
-        background: rgba(103, 194, 58, 0.28);
+        background: rgba(103, 194, 58, 0.2);
         z-index: 3;
       }
 
       .compare-diff-active-old {
         position: absolute;
-        background: rgba(245, 108, 108, 0.55);
+        background: rgba(245, 108, 108, 0.35);
         z-index: 4;
       }
 
       .compare-diff-active-new {
         position: absolute;
-        background: rgba(103, 194, 58, 0.55);
+        background: rgba(103, 194, 58, 0.35);
         z-index: 4;
       }
     }

package/src/views/bd/setting/formVersion/compareContMixin.scss

@@ -1,14 +1,19 @@
 @mixin compare-cont-shell {
   position: relative;
-  margin: 12px 16px;
-  padding: 12px 16px 16px;
+  margin-bottom: 8px;
+  padding: 8px;
   background: #fff;
-  border-radius: 4px;
+  border-radius: 2px;
+
+  ~ .compare-cont {
+    margin-bottom: 0;
+  }
 }
 
 @mixin compare-cont-title {
-  .title {
-    margin-bottom: 12px;
+  > .title {
+    padding: 0 4px;
+    margin-bottom: 8px;
     font-size: 14px;
     color: #303133;
   }
@@ -17,10 +22,17 @@
 @mixin compare-cont-full-link {
   .is-full {
     position: absolute;
-    top: 12px;
-    right: 16px;
+    top: 8px;
+    right: 8px;
+    padding: 2px 3px;
     font-size: 16px;
-    color: #409eff;
+    color: #4595e6;
+    background: #f2f6fc;
+    border-radius: 4px;
+
+    i {
+      font-size: 16px;
+    }
   }
 }
 
@@ -28,28 +40,32 @@
   .version-blue,
   .version-green {
     display: inline-block;
+    height: 22px;
     margin-bottom: 8px;
-    font-size: 13px;
-    font-weight: 600;
+    padding: 0 4px;
+    font-size: 12px;
+    line-height: 22px;
+    color: #fff;
+    vertical-align: middle;
   }
 
   .version-blue {
-    color: #409eff;
+    background: #2c7eeb;
   }
 
   .version-green {
-    color: #67c23a;
+    background: #6dc442;
   }
 }
 
 @mixin compare-flex-row {
   .flex {
     display: flex;
-    gap: 12px;
 
     .flex-1 {
       flex: 1;
       min-width: 0;
+      margin: 0 8px;
     }
   }
 }

package/src/views/bd/setting/formVersion/tableDetailDiff.js

@@ -54,22 +54,22 @@ export function buildDetailDiffMaps(preRows = [], curRows = []) {
 
     if (!preRow) {
       DETAIL_COMPARE_FIELDS.forEach((field) => {
-        curCellDiff[`${key}__${field}`] = true;
+        curCellDiff[`${key}__${field}`] = "add";
       });
       return;
     }
 
     if (!curRow) {
       DETAIL_COMPARE_FIELDS.forEach((field) => {
-        preCellDiff[`${key}__${field}`] = true;
+        preCellDiff[`${key}__${field}`] = "delete";
       });
       return;
     }
 
     DETAIL_COMPARE_FIELDS.forEach((field) => {
       if (!isSameValue(preRow[field], curRow[field])) {
-        preCellDiff[`${key}__${field}`] = true;
-        curCellDiff[`${key}__${field}`] = true;
+        preCellDiff[`${key}__${field}`] = "change";
+        curCellDiff[`${key}__${field}`] = "change";
       }
     });
   });

package/src/views/bd/setting/formVersion/tableModelCompareView.vue

@@ -12,30 +12,46 @@
       :fields="basicFields"
       @reverCallback="$emit('reverCallback')"
     />
-    <div class="compare-cont compare-detail-section" :class="{ 'is-section-fullscreen': detailFullscreen }">
+    <div
+      class="compare-cont compare-detail-section"
+      :class="{ 'is-section-fullscreen': detailFullscreen }"
+    >
       <div class="compare-detail-header">
         <div class="compare-header-main">
-          <div class="title"><b>{{ $t1("明细") }}</b></div>
-          <div class="compare-diff-legend">
-            <span class="legend-item legend-old">{{ $t1("变更/删除") }}</span>
-            <span class="legend-item legend-new">{{ $t1("变更/新增") }}</span>
+          <div class="title">
+            <b>{{ $t1("明细") }}</b>
           </div>
         </div>
-        <el-tooltip class="item" effect="dark" :content="$t1('全屏')" placement="top">
-          <el-link class="is-full" :underline="false" @click="detailFullscreen = !detailFullscreen">
+        <el-tooltip
+          class="item"
+          effect="dark"
+          :content="$t1('全屏')"
+          placement="top"
+        >
+          <el-link
+            class="is-full"
+            :underline="false"
+            @click="detailFullscreen = !detailFullscreen"
+          >
             <i class="iconfont icon-quanping"></i>
           </el-link>
         </el-tooltip>
       </div>
       <div class="compare-detail-grid">
         <span class="version-blue">{{ $t1("版本号") }}：{{ preVersion }}</span>
-        <div class="grid-height" :class="{ 'is-fullscreen-grid': detailFullscreen }">
+        <div
+          class="grid-height"
+          :class="{ 'is-fullscreen-grid': detailFullscreen }"
+        >
           <vxe-grid ref="table-pre" v-bind="preGridOption" />
         </div>
       </div>
       <div class="compare-detail-grid">
         <span class="version-green">{{ $t1("版本号") }}：{{ curVersion }}</span>
-        <div class="grid-height" :class="{ 'is-fullscreen-grid': detailFullscreen }">
+        <div
+          class="grid-height"
+          :class="{ 'is-fullscreen-grid': detailFullscreen }"
+        >
           <vxe-grid ref="table-cur" v-bind="curGridOption" />
         </div>
       </div>
@@ -321,8 +337,15 @@ export default {
       if (!field || !row) return "";
       const diffKey = `${getDetailRowKey(row, rowIndex)}__${field}`;
       const diffMap =
-        side === "pre" ? this.detailDiff.preCellDiff : this.detailDiff.curCellDiff;
-      return diffMap[diffKey] ? `compare-diff-${side === "pre" ? "old" : "new"}` : "";
+        side === "pre"
+          ? this.detailDiff.preCellDiff
+          : this.detailDiff.curCellDiff;
+      const diffType = diffMap[diffKey];
+      if (!diffType) return "";
+      if (diffType === "add") {
+        return "compare-diff-new";
+      }
+      return "compare-diff-old";
     },
   },
 };
@@ -342,6 +365,11 @@ export default {
     .grid-height {
       height: 320px !important;
     }
+
+    .version-blue,
+    .version-green {
+      margin-bottom: 8px;
+    }
   }
 
   .compare-detail-header {
@@ -386,12 +414,12 @@ export default {
   }
 
   ::v-deep .compare-diff-old {
-    background-color: rgba(245, 108, 108, 0.28) !important;
+    background-color: rgba(245, 108, 108, 0.2) !important;
     color: #f56c6c;
   }
 
   ::v-deep .compare-diff-new {
-    background-color: rgba(103, 194, 58, 0.28) !important;
+    background-color: rgba(103, 194, 58, 0.2) !important;
     color: #67c23a;
   }