cloud-web-corejs 1.0.244 → 1.0.246

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

@@ -1,28 +1,29 @@
 <template>
-  <div v-show="false">
+  <div>
     <el-form-item label-width="0">
-      <el-divider class="custom-divider">{{i18nt('designer.setting.customLabelIcon')}}</el-divider>
+      <el-divider class="custom-divider">{{
+        i18nt("designer.setting.customLabelIcon")
+      }}</el-divider>
     </el-form-item>
     <el-form-item :label="i18nt('designer.setting.labelIconClass')">
-      <el-input type="text" v-model="optionModel.labelIconClass"></el-input>
+      <icon-picker v-model="optionModel.labelIconClass"></icon-picker>
     </el-form-item>
   </div>
 </template>
 
 <script>
-  import i18n from "../../../../../components/xform/utils/i18n"
-
-  export default {
-    name: "labelIconClass-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-  }
+import i18n from "@base/components/xform/utils/i18n";
+import IconPicker from "@base/components/xform/icon-picker/index.vue";
+export default {
+  name: "labelIconClass-editor",
+  components: { IconPicker },
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -1,37 +1,37 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.labelIconPosition')" v-show="false">
+  <el-form-item :label="i18nt('designer.setting.labelIconPosition')">
     <el-select v-model="optionModel.labelIconPosition">
-      <el-option v-for="item in labelIconPosition" :key="item.value" :label="item.label"
-                 :value="item.value">
+      <el-option
+        v-for="item in labelIconPosition"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
       </el-option>
     </el-select>
   </el-form-item>
 </template>
 
 <script>
-  import i18n from "../../../../../components/xform/utils/i18n"
+import i18n from "../../../../../components/xform/utils/i18n";
 
-  export default {
-    name: "labelIconPosition-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-    data() {
-      return {
-        labelIconPosition: [
-          {label: 'front', value: 'front'},
-          {label: 'rear', value: 'rear'},
-        ],
-
-      }
-    },
-
-  }
+export default {
+  name: "labelIconPosition-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      labelIconPosition: [
+        { label: "前面", value: "front" },
+        { label: "后面", value: "rear" },
+      ],
+    };
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -1,23 +1,77 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.labelTooltip')" v-show="false">
-    <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>
-  import i18n from "../../../../../components/xform/utils/i18n"
+import i18n from "../../../../../components/xform/utils/i18n";
 
-  export default {
-    name: "labelTooltip-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
+export default {
+  name: "labelTooltip-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    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>
-
+::v-deep .label-tooltip-textarea textarea {
+  min-height: 320px;
+}
 </style>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -202,9 +202,9 @@ const ADVANCED_PROPERTIES = {
   'round': 'round-editor',
   'circle': 'circle-editor',
   'icon': 'icon-editor',
-  // 'labelIconClass': 'labelIconClass-editor',
-  // 'labelIconPosition': 'labelIconPosition-editor',
-  // 'labelTooltip': 'labelTooltip-editor',
+  labelIconClass: "labelIconClass-editor",
+  labelIconPosition: "labelIconPosition-editor",
+  labelTooltip: "labelTooltip-editor",
   // 'appendButton': 'appendButton-editor',
   // 'appendButtonDisabled': 'appendButtonDisabled-editor',
   // 'buttonIcon': 'buttonIcon-editor',

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

@@ -16,6 +16,7 @@ import {
   traverseAllWidgetsNew,
 } from "../../../../components/xform/utils/util";
 import { tableTreeMixins } from "../../../../mixins/tableTree/index.js";
+import { applyColumnLabelIcon } from "../../../../components/xform/utils/tableColumnHelper";
 
 let modules = {};
 const baseRefUtil = {
@@ -699,17 +700,7 @@ modules = {
           visible: t.show,
           slots: {},
         };
-        if (t.required) {
-          col.title = col.title;
-          /* if(!isEditTable){
-            col.titlePrefix = {
-              icon: "vxe-cell--required-icon"
-            }
-          } */
-          col.titlePrefix = {
-            icon: "vxe-cell--required-icon",
-          };
-        }
+        applyColumnLabelIcon(col, t);
         if (t.treeNode) {
           col.treeNode = true;
         }

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/icon-picker/icons.json

@@ -0,0 +1,284 @@
+{
+  "elementIcons": [
+    "platform-eleme",
+    "eleme",
+    "delete-solid",
+    "delete",
+    "s-tools",
+    "setting",
+    "user-solid",
+    "user",
+    "phone",
+    "phone-outline",
+    "more",
+    "more-outline",
+    "star-on",
+    "star-off",
+    "s-goods",
+    "goods",
+    "warning",
+    "warning-outline",
+    "question",
+    "info",
+    "remove",
+    "circle-plus",
+    "success",
+    "error",
+    "zoom-in",
+    "zoom-out",
+    "remove-outline",
+    "circle-plus-outline",
+    "circle-check",
+    "circle-close",
+    "s-help",
+    "help",
+    "minus",
+    "plus",
+    "check",
+    "close",
+    "picture",
+    "picture-outline",
+    "picture-outline-round",
+    "upload",
+    "upload2",
+    "download",
+    "camera-solid",
+    "camera",
+    "video-camera-solid",
+    "video-camera",
+    "message-solid",
+    "bell",
+    "s-cooperation",
+    "s-order",
+    "s-platform",
+    "s-fold",
+    "s-unfold",
+    "s-operation",
+    "s-promotion",
+    "s-home",
+    "s-release",
+    "s-ticket",
+    "s-management",
+    "s-open",
+    "s-shop",
+    "s-marketing",
+    "s-flag",
+    "s-comment",
+    "s-finance",
+    "s-claim",
+    "s-custom",
+    "s-opportunity",
+    "s-data",
+    "s-check",
+    "s-grid",
+    "menu",
+    "share",
+    "d-caret",
+    "caret-left",
+    "caret-right",
+    "caret-bottom",
+    "caret-top",
+    "bottom-left",
+    "bottom-right",
+    "back",
+    "right",
+    "bottom",
+    "top",
+    "top-left",
+    "top-right",
+    "arrow-left",
+    "arrow-right",
+    "arrow-down",
+    "arrow-up",
+    "d-arrow-left",
+    "d-arrow-right",
+    "video-pause",
+    "video-play",
+    "refresh",
+    "refresh-right",
+    "refresh-left",
+    "finished",
+    "sort",
+    "sort-up",
+    "sort-down",
+    "rank",
+    "loading",
+    "view",
+    "c-scale-to-original",
+    "date",
+    "edit",
+    "edit-outline",
+    "folder",
+    "folder-opened",
+    "folder-add",
+    "folder-remove",
+    "folder-delete",
+    "folder-checked",
+    "tickets",
+    "document-remove",
+    "document-delete",
+    "document-copy",
+    "document-checked",
+    "document",
+    "document-add",
+    "printer",
+    "paperclip",
+    "takeaway-box",
+    "search",
+    "monitor",
+    "attract",
+    "mobile",
+    "scissors",
+    "umbrella",
+    "headset",
+    "brush",
+    "mouse",
+    "coordinate",
+    "magic-stick",
+    "reading",
+    "data-line",
+    "data-board",
+    "pie-chart",
+    "data-analysis",
+    "collection-tag",
+    "film",
+    "suitcase",
+    "suitcase-1",
+    "receiving",
+    "collection",
+    "files",
+    "notebook-1",
+    "notebook-2",
+    "toilet-paper",
+    "office-building",
+    "school",
+    "table-lamp",
+    "house",
+    "no-smoking",
+    "smoking",
+    "shopping-cart-full",
+    "shopping-cart-1",
+    "shopping-cart-2",
+    "shopping-bag-1",
+    "shopping-bag-2",
+    "sold-out",
+    "sell",
+    "present",
+    "box",
+    "bank-card",
+    "money",
+    "coin",
+    "wallet",
+    "discount",
+    "price-tag",
+    "news",
+    "guide",
+    "male",
+    "female",
+    "thumb",
+    "cpu",
+    "link",
+    "connection",
+    "open",
+    "turn-off",
+    "set-up",
+    "chat-round",
+    "chat-line-round",
+    "chat-square",
+    "chat-dot-round",
+    "chat-dot-square",
+    "chat-line-square",
+    "message",
+    "postcard",
+    "position",
+    "turn-off-microphone",
+    "microphone",
+    "close-notification",
+    "bangzhu",
+    "time",
+    "odometer",
+    "crop",
+    "aim",
+    "switch-button",
+    "full-screen",
+    "copy-document",
+    "mic",
+    "stopwatch",
+    "medal-1",
+    "medal",
+    "trophy",
+    "trophy-1",
+    "first-aid-kit",
+    "discover",
+    "place",
+    "location",
+    "location-outline",
+    "location-information",
+    "add-location",
+    "delete-location",
+    "map-location",
+    "alarm-clock",
+    "timer",
+    "watch-1",
+    "watch",
+    "lock",
+    "unlock",
+    "key",
+    "service",
+    "mobile-phone",
+    "bicycle",
+    "truck",
+    "ship",
+    "basketball",
+    "football",
+    "soccer",
+    "baseball",
+    "wind-power",
+    "light-rain",
+    "lightning",
+    "heavy-rain",
+    "sunrise",
+    "sunrise-1",
+    "sunset",
+    "sunny",
+    "cloudy",
+    "partly-cloudy",
+    "cloudy-and-sunny",
+    "moon",
+    "moon-night",
+    "dish",
+    "dish-1",
+    "food",
+    "chicken",
+    "fork-spoon",
+    "knife-fork",
+    "burger",
+    "tableware",
+    "sugar",
+    "dessert",
+    "ice-cream",
+    "hot-water",
+    "water-cup",
+    "coffee-cup",
+    "cold-drink",
+    "goblet",
+    "goblet-full",
+    "goblet-square",
+    "goblet-square-full",
+    "refrigerator",
+    "grape",
+    "watermelon",
+    "cherry",
+    "apple",
+    "pear",
+    "orange",
+    "coffee",
+    "ice-tea",
+    "ice-drink",
+    "milk-tea",
+    "potato-strips",
+    "lollipop",
+    "ice-cream-square",
+    "ice-cream-round"
+  ]
+}

package/src/components/xform/icon-picker/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-select :value="value" :disabled="disabled" clearable @clear="clearHandle">
+    <template slot="prefix">
+      <span class="icon-picker-selected" v-if="value !== '' && value != null">
+        <i :class="value"></i>
+      </span>
+    </template>
+
+    <el-option class="icon-picker-option" :value="value">
+      <div>
+        <ul>
+          <li
+            v-for="icon in icons.elementIcons"
+            :key="icon"
+            @click="iconClick('el-icon-' + icon)"
+          >
+            <span><i :class="'el-icon-' + icon"></i></span>
+          </li>
+          <div class="clearfix"></div>
+        </ul>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import icons from "./icons.json";
+
+export default {
+  name: "icon-picker",
+  props: {
+    value: {
+      type: String | null,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  model: {
+    prop: "value",
+    event: "change",
+  },
+  data() {
+    return {
+      icons: icons,
+    };
+  },
+  methods: {
+    iconClick(className) {
+      this.$emit("change", className);
+    },
+
+    clearHandle() {
+      this.$emit("change", "");
+    },
+  },
+};
+</script>
+
+<style scoped>
+::v-deep .el-input--prefix .el-input__inner {
+  padding-left: 30px;
+}
+::v-deep .el-input--suffix .el-input__inner {
+  padding-right: 30px;
+}
+::v-deep .el-input__prefix {
+  left: 5px !important;
+  right: unset !important;
+  line-height: 38px;
+}
+.clearfix {
+  clear: both;
+}
+
+.icon-picker-option.el-select-dropdown__item {
+  width: 307px;
+  height: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.icon-picker-option.el-select-dropdown__item.hover,
+.icon-picker-option.el-select-dropdown__item:hover {
+  background-color: #fff;
+  cursor: default;
+}
+
+.icon-picker-option.el-select-dropdown__item.selected {
+  color: #606266;
+  font-weight: normal;
+}
+
+.icon-picker-option::-webkit-scrollbar {
+  width: 7px;
+  background-color: #eee;
+}
+
+.icon-picker-option::-webkit-scrollbar-track {
+  background-color: #eee;
+}
+
+.icon-picker-option::-webkit-scrollbar-thumb {
+  background: #d7d7d7;
+  border-radius: 7px;
+}
+
+.icon-picker-option > div {
+  cursor: default;
+}
+
+.icon-picker-option ul {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.icon-picker-option ul > li {
+  display: block;
+  margin: 0;
+  padding: 0;
+  float: left;
+  text-align: center;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+}
+
+.icon-picker-option ul > li:hover {
+  color: #327edb;
+  font-size: 18px;
+}
+
+.icon-picker-selected > i {
+  color: #333333;
+  line-height: 30px;
+  margin-left: 6px;
+  font-size: 16px;
+}
+</style>