cloud-web-corejs 1.0.54-dev.704 → 1.0.54-dev.705

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.704",
+  "version": "1.0.54-dev.705",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

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

@@ -84,7 +84,11 @@
           >
             <template v-if="field.options.labelIconPosition === 'front'">
               <template v-if="!!field.options.labelTooltip">
-                <el-tooltip :content="field.options.labelTooltip" effect="dark">
+                <el-tooltip
+                  :content="field.options.labelTooltip"
+                  effect="dark"
+                  popper-class="label-tooltip-pre-line"
+                >
                   <i :class="field.options.labelIconClass"></i></el-tooltip
                 ><span :style="{ color: field.options.labelColor }">{{
                   label
@@ -105,6 +109,7 @@
                 ><el-tooltip
                   :content="field.options.labelTooltip"
                   effect="dark"
+                  popper-class="label-tooltip-pre-line"
                 >
                   <i :class="field.options.labelIconClass"></i></el-tooltip
               ></template>

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/table-column-dialog.vue

@@ -647,14 +647,56 @@
             :label="i18nt('designer.setting.labelTooltip')"
             class="form-item-full"
           >
-            <el-input
-              type="text"
-              v-model="rowData.labelTooltip"
-              clearable
-            ></el-input>
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openLabelTooltipDialog"
+            >
+              <span>{{ rowData.labelTooltip }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
           </el-form-item>
         </el-form>
       </div>
+      <el-dialog
+        v-if="labelTooltipDialogVisible"
+        custom-class="dialog-style"
+        :title="i18nt('designer.setting.labelTooltip')"
+        :visible.sync="labelTooltipDialogVisible"
+        :show-close="true"
+        :append-to-body="true"
+        :modal="false"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :destroy-on-close="true"
+        width="520px"
+        v-dialog-drag
+      >
+        <el-input
+          type="textarea"
+          :rows="14"
+          class="label-tooltip-textarea"
+          v-model="labelTooltipValue"
+          clearable
+        ></el-input>
+        <div class="dialog-footer" slot="footer">
+          <el-button
+            @click="labelTooltipDialogVisible = false"
+            class="button-sty"
+            icon="el-icon-close"
+          >
+            {{ i18nt("designer.hint.cancel") }}
+          </el-button>
+          <el-button
+            type="primary"
+            @click="submitLabelTooltipDialog"
+            class="button-sty"
+            icon="el-icon-check"
+          >
+            {{ i18nt("designer.hint.confirm") }}
+          </el-button>
+        </div>
+      </el-dialog>
       <div class="dialog-footer" slot="footer">
         <el-button
           @click="closeRowEditDialog"
@@ -985,6 +1027,8 @@ export default {
       rowData: null,
       rowDataIndex: 0,
       showRowEditDialog: false,
+      labelTooltipDialogVisible: false,
+      labelTooltipValue: "",
       sourceTableColumnsSnapshot: null,
     };
   },
@@ -1964,9 +2008,20 @@ export default {
         this.editRowData.widgetList = this.rowData.widgetList;
       }
       this.showRowEditDialog = false;
+      this.labelTooltipDialogVisible = false;
     },
     closeRowEditDialog() {
       this.showRowEditDialog = false;
+      this.labelTooltipDialogVisible = false;
+    },
+    openLabelTooltipDialog() {
+      this.labelTooltipValue = this.rowData.labelTooltip || "";
+      this.labelTooltipDialogVisible = true;
+    },
+    submitLabelTooltipDialog() {
+      const value = (this.labelTooltipValue || "").trim();
+      this.rowData.labelTooltip = value || null;
+      this.labelTooltipDialogVisible = false;
     },
   },
 };
@@ -2037,4 +2092,8 @@ export default {
     margin: 10px 0;
   }
 }
+
+::v-deep .label-tooltip-textarea textarea {
+  min-height: 320px;
+}
 </style>

package/src/components/xform/form-designer/setting-panel/property-editor/labelTooltip-editor.vue

@@ -1,7 +1,42 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.labelTooltip')">
-    <el-input type="text" v-model="optionModel.labelTooltip"></el-input>
-  </el-form-item>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.labelTooltip')">
+      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openDialog">
+        <span>{{ optionModel.labelTooltip }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-dialog
+      v-if="dialogVisible"
+      custom-class="dialog-style"
+      :title="i18nt('designer.setting.labelTooltip')"
+      :visible.sync="dialogVisible"
+      :show-close="true"
+      :append-to-body="true"
+      :modal="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      width="520px"
+      v-dialog-drag
+    >
+      <el-input
+        type="textarea"
+        :rows="14"
+        class="label-tooltip-textarea"
+        v-model="labelTooltipValue"
+        clearable
+      ></el-input>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="dialogVisible = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt("designer.hint.cancel") }}
+        </el-button>
+        <el-button type="primary" @click="submitDialog" class="button-sty" icon="el-icon-check">
+          {{ i18nt("designer.hint.confirm") }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -15,7 +50,28 @@ export default {
     selectedWidget: Object,
     optionModel: Object,
   },
+  data() {
+    return {
+      dialogVisible: false,
+      labelTooltipValue: "",
+    };
+  },
+  methods: {
+    openDialog() {
+      this.labelTooltipValue = this.optionModel.labelTooltip || "";
+      this.dialogVisible = true;
+    },
+    submitDialog() {
+      const value = (this.labelTooltipValue || "").trim();
+      this.optionModel.labelTooltip = value || null;
+      this.dialogVisible = false;
+    },
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+::v-deep .label-tooltip-textarea textarea {
+  min-height: 320px;
+}
+</style>

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

@@ -17,14 +17,22 @@
             <span v-if="!!subWidget.options.labelIconClass" class="custom-label">
               <template v-if="subWidget.options.labelIconPosition === 'front'">
                 <template v-if="!!subWidget.options.labelTooltip">
-                  <el-tooltip :content="subWidget.options.labelTooltip" effect="light">
+                  <el-tooltip
+                    :content="subWidget.options.labelTooltip"
+                    effect="light"
+                    popper-class="label-tooltip-pre-line"
+                  >
                     <i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template>
                 <template v-else>
                   <i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
               </template>
               <template v-else-if="subWidget.options.labelIconPosition === 'rear'">
                 <template v-if="!!subWidget.options.labelTooltip">
-                  {{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
+                  {{subWidget.options.label}}<el-tooltip
+                    :content="subWidget.options.labelTooltip"
+                    effect="light"
+                    popper-class="label-tooltip-pre-line"
+                  >
                   <i :class="subWidget.options.labelIconClass"></i></el-tooltip></template>
                 <template v-else>
                   {{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>

package/src/components/xform/utils/sfc-generator.js

@@ -389,12 +389,12 @@ export function buildFieldWidget(widget, formConfig) {
   let customLabelDom =
 `<template #label><span class="custom-label">${wop.labelIconPosition === 'front' ?
   (!!wop.labelTooltip ?
-      `<el-tooltip content="${wop.labelTooltip}" effect="light"><i class="${wop.labelIconClass}"></i></el-tooltip>${wop.label}` :
+      `<el-tooltip content="${wop.labelTooltip}" effect="light" popper-class="label-tooltip-pre-line"><i class="${wop.labelIconClass}"></i></el-tooltip>${wop.label}` :
       `<i class="${wop.labelIconClass}"></i>${wop.label}`
   )
   :
   (!!wop.labelTooltip ?
-      `${wop.label}<el-tooltip content="${wop.labelTooltip}" effect="light"><i class="${wop.labelIconClass}"></i></el-tooltip>` :
+      `${wop.label}<el-tooltip content="${wop.labelTooltip}" effect="light" popper-class="label-tooltip-pre-line"><i class="${wop.labelIconClass}"></i></el-tooltip>` :
       `${wop.label}<i class="${wop.labelIconClass}"></i>`
   )
 }

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

@@ -63,6 +63,24 @@ export function resolveColumnRequiredFlag(columnConfig) {
   return !!(widgetOptions?.required || editWidgetOptions?.required);
 }
 
+function buildVxeTitlePrefixTooltip(tooltip) {
+  if (!tooltip) {
+    return {};
+  }
+  if (/\r?\n/.test(tooltip)) {
+    return {
+      content: tooltip
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\r\n/g, "\n")
+        .replace(/\n/g, "<br/>"),
+      useHTML: true,
+    };
+  }
+  return { content: tooltip };
+}
+
 export function applyColumnLabelIcon(col, columnConfig) {
   if (!col || !columnConfig) {
     return col;
@@ -86,7 +104,12 @@ export function applyColumnLabelIcon(col, columnConfig) {
     return h(
       "el-tooltip",
       {
-        props: { content: tooltip, effect: "dark", placement: "top" },
+        props: {
+          content: tooltip,
+          effect: "dark",
+          placement: "top",
+          popperClass: "label-tooltip-pre-line",
+        },
       },
       [icon]
     );
@@ -95,7 +118,7 @@ export function applyColumnLabelIcon(col, columnConfig) {
   if (iconClass && position === "front" && !required) {
     col.titlePrefix = {
       icon: iconClass,
-      ...(tooltip ? { content: tooltip } : {}),
+      ...buildVxeTitlePrefixTooltip(tooltip),
     };
     return col;
   }