cloud-web-corejs 1.0.54-dev.78 → 1.0.54-dev.780

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

@@ -1,321 +1,389 @@
-<template>
-  <el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}">
-    <div class="panel-container">
-
-      <el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
-        <el-tab-pane v-if="showComponentLib" name="componentLib">
-          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.componentLib') }}</span>
-
-          <el-collapse v-model="activeNames" class="widget-collapse">
-            <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
-              <draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
-                         :move="checkContainerMove" @end="onContainerDragEnd">
-                <li v-for="(ctn, index) in containers" :key="index" class="container-widget-item"
-                    :title="ctn.displayName"
-                    @dblclick="addContainerByDbClick(ctn)">
-              <span><svg-icon :icon-class="ctn.icon" class-name="color-svg-icon"/>
-                <span>{{ i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`) }}</span>
-              </span>
-                </li>
-              </draggable>
-            </el-collapse-item>
-
-            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
-              <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :move="checkFieldMove"
-                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                <li v-for="(fld, index) in basicFields" :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-item name="3" :title="i18nt('designer.advancedFieldTitle')">
-              <draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :move="checkFieldMove"
-                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                <li v-for="(fld, index) in advancedFields" :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-item name="4" :title="i18nt('designer.customFieldTitle')">
-              <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :move="checkFieldMove"
-                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                <li v-for="(fld, index) in customFields" :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="showMetadataLib" name="metadataLib">
-          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.metadataLib') }}</span>
-
-          <el-collapse v-model="metadataActiveNames" class="widget-collapse">
-            <el-collapse-item name="0" :title="i18nt('designer.containerTitle')">
-              <draggable tag="ul" :list="commonContainers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
-                         :move="checkContainerMove" @end="onContainerDragEnd">
-                <li v-for="(ctn, index) in commonContainers" :key="index" class="container-widget-item"
-                    :title="ctn.displayName"
-                    @dblclick="addContainerByDbClick(ctn)">
-              <span><svg-icon :icon-class="ctn.icon" class-name="color-svg-icon"/>
-                <span>{{ i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`) }}</span>
-              </span>
-                </li>
-              </draggable>
-            </el-collapse-item>
-            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
-              <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :move="checkFieldMove"
-                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                <li v-for="(fld, index) in basicFields" :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-item name="3" :title="i18nt('designer.advancedFieldTitle')">
-              <draggable tag="ul" :list="commonAdvancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :move="checkFieldMove"
-                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                <li v-for="(fld, index) in commonAdvancedFields" :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-item v-if="!!metaFields.main.entityName" name="1" :title="metaFields.main.entityLabel">
-              <draggable tag="ul" :list="metaFields.main.fieldList"
-                         :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                         :move="checkFieldMove"
-                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                <li v-for="(fld, index) in metaFields.main.fieldList" :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>{{ getMetaFieldLabel(fld) }}</span></span>
-                </li>
-              </draggable>
-            </el-collapse-item>
-
-            <template v-if="metaFields.detail && metaFields.detail.length >0">
-              <el-collapse-item v-for="(item,index0) in metaFields.detail" :key="index0" :name="index0+'2'"
-                                :title="item.entityLabel">
-                <draggable tag="ul" :list="item.fieldList" :group="{name: 'dragGroup', pull: 'clone', put: false}"
-                           :move="checkFieldMove"
-                           :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
-                  <li v-for="(fld, index) in item.fieldList" :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>{{ getMetaFieldLabel(fld) }}</span>
-              </span>
-                  </li>
-                </draggable>
-              </el-collapse-item>
-            </template>
-          </el-collapse>
-        </el-tab-pane>
-
-        <!--       <el-tab-pane v-if="showFormTemplates" name="formLib" style="padding: 8px">
-                <span slot="label"><i class="el-icon-c-scale-to-original"></i> {{i18nt('designer.formLib')}}</span>
-
-                <template v-for="(ft, idx) in formTemplates">
-                  <el-card :key="idx" :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
-                    <el-popover placement="right" trigger="hover">
-                      <img slot="reference" :src="ft.imgUrl" style="width: 200px">
-                      <img :src="ft.imgUrl" style="height: 600px;width: 720px">
-                    </el-popover>
-                    <div class="bottom clear-fix">
-                      <span class="ft-title">#{{idx+1}} {{ft.title}}</span>
-                      <el-button type="text" class="right-button" @click="loadFormTemplate(ft.jsonUrl)">
-                        {{i18nt('designer.hint.loadFormTemplate')}}</el-button>
-                    </div>
-                  </el-card>
-                </template>
-              </el-tab-pane>-->
-
-      </el-tabs>
-
-    </div>
-  </el-scrollbar>
-</template>
-
-<script>
-import Draggable from 'vuedraggable'
-import indexMixin from './indexMixin.js';
-
-export default {
-  name: "FieldPanel",
-  mixins: [indexMixin],
-  components: {
-    Draggable,
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.color-svg-icon {
-  color: $--color-primary;
-}
-
-.side-scroll-bar {
-  ::v-deep .el-scrollbar__wrap {
-    overflow-x: hidden;
-  }
-}
-
-// div.panel-container {
-//   padding-bottom: 10px;
-// }
-
-.no-bottom-margin ::v-deep .el-tabs__header {
-  margin-bottom: 0;
-}
-
-.indent-left-margin {
-  ::v-deep .el-tabs__nav {
-    margin-left: 20px;
-  }
-}
-
-.el-collapse-item ::v-deep ul > li {
-  list-style: none;
-}
-
-.widget-collapse {
-  border-top-width: 0;
-
-  ::v-deep .el-collapse-item__header {
-    margin-left: 8px;
-    font-weight: bold;
-  }
-
-  ::v-deep .el-collapse-item__content {
-    padding-bottom: 6px;
-
-    ul {
-      padding-left: 10px; /* 重置IE11默认样式 */
-      margin: 0; /* 重置IE11默认样式 */
-      margin-block-start: 0;
-      margin-block-end: 0.25em;
-      padding-inline-start: 10px;
-
-      &:after {
-        content: "";
-        display: block;
-        clear: both;
-      }
-
-      .container-widget-item, .field-widget-item {
-        display: inline-block;
-        height: 35px;
-        line-height: 35px;
-        width: 117px;
-        float: left;
-        margin: 2px 6px 3px 0;
-        cursor: move;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        background: #f1f2f3;
-        font-size: 12px;
-        padding-left: 12px;
-
-        svg {
-          display: inline-block;
-          //margin: 10px auto 0;
-          width: 1.25em;
-          height: 1.25em;
-          vertical-align: middle;
-          margin-right: 5px;
-
-        }
-
-        span > span {
-          vertical-align: middle;
-        }
-      }
-
-      .container-widget-item:hover, .field-widget-item:hover {
-        background: #EBEEF5;
-        outline: 1px solid $--color-primary;
-      }
-
-      .drag-handler {
-        position: absolute;
-        top: 0;
-        left: 160px;
-        background-color: #dddddd;
-        border-radius: 5px;
-        padding-right: 5px;
-        font-size: 11px;
-        color: #666666;
-      }
-    }
-  }
-}
-
-.el-card.ft-card {
-  border: 1px solid #8896B3;
-}
-
-.ft-card {
-  margin-bottom: 10px;
-
-  .bottom {
-    margin-top: 10px;
-    line-height: 12px;
-  }
-
-  .ft-title {
-    font-size: 13px;
-    font-weight: bold;
-  }
-
-  .right-button {
-    padding: 0;
-    float: right;
-  }
-
-  .clear-fix:before, .clear-fix:after {
-    display: table;
-    content: "";
-  }
-
-  .clear-fix:after {
-    clear: both;
-  }
-
-}
-
-</style>
+<template>
+
+    <div class="panel-container">
+
+      <el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
+        <el-tab-pane v-if="showComponentLib" name="componentLib">
+          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.componentLib') }}</span>
+
+          <el-collapse v-model="activeNames" class="widget-collapse">
+            <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
+              <draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
+                         :move="checkContainerMove" @end="onContainerDragEnd">
+                <li v-for="(ctn, index) in containers" :key="index" class="container-widget-item"
+                    :title="ctn.displayName"
+                    @dblclick="addContainerByDbClick(ctn)">
+              <span><widget-icon :icon="ctn.icon"/>
+                <span>{{ i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`) }}</span>
+              </span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+
+            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
+              <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+                  <span><widget-icon :icon="fld.icon"/><span>{{
+                      i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+                    }}</span></span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+
+            <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
+              <draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in advancedFields" :key="index" class="field-widget-item"
+                    :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+              <span><widget-icon :icon="fld.icon"/>
+              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
+              </span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+
+            <!-- -->
+            <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
+              <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in customFields" :key="index" class="field-widget-item" :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+              <span>
+                <widget-icon :icon="fld.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="showMetadataLib" name="metadataLib">
+          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.metadataLib') }}</span>
+
+          <el-collapse v-model="metadataActiveNames" class="widget-collapse">
+            <el-collapse-item name="0" :title="i18nt('designer.containerTitle')">
+              <draggable tag="ul" :list="commonContainers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
+                         :move="checkContainerMove" @end="onContainerDragEnd">
+                <li v-for="(ctn, index) in commonContainers" :key="index" class="container-widget-item"
+                    :title="ctn.displayName"
+                    @dblclick="addContainerByDbClick(ctn)">
+              <span><widget-icon :icon="ctn.icon"/>
+                <span>{{ i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`) }}</span>
+              </span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
+              <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+                  <span><widget-icon :icon="fld.icon"/><span>{{
+                      i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+                    }}</span></span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+            <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
+              <draggable tag="ul" :list="commonAdvancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in commonAdvancedFields" :key="index" class="field-widget-item"
+                    :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+              <span><widget-icon :icon="fld.icon"/>
+              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
+              </span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+
+
+
+            <el-collapse-item v-if="!!metaFields.main.entityName" name="1" :title="metaFields.main.entityLabel">
+              <draggable tag="ul" :list="metaFields.main.fieldList"
+                         :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in metaFields.main.fieldList" :key="index" class="field-widget-item"
+                    :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+                  <span><widget-icon :icon="fld.icon"/><span>{{ getMetaFieldLabel(fld) }}</span></span>
+                </li>
+              </draggable>
+            </el-collapse-item>
+
+            <template v-if="metaFields.detail && metaFields.detail.length >0">
+              <el-collapse-item v-for="(item,index0) in metaFields.detail" :key="index0" :name="index0+'2'"
+                                :title="item.entityLabel">
+                <draggable tag="ul" :list="item.fieldList" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                           :move="checkFieldMove"
+                           :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                  <li v-for="(fld, index) in item.fieldList" :key="index" class="field-widget-item"
+                      :title="fld.displayName"
+                      @dblclick="addFieldByDbClick(fld)">
+              <span><widget-icon :icon="fld.icon"/>
+              <span>{{ getMetaFieldLabel(fld) }}</span>
+              </span>
+                  </li>
+                </draggable>
+              </el-collapse-item>
+            </template>
+          </el-collapse>
+        </el-tab-pane>
+        <el-tab-pane name="businessLib">
+          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('业务组件') }}</span>
+          <el-collapse v-model="businessActiveNames" class="widget-collapse">
+            <el-collapse-item name="0" :title="i18nt('业务组件')">
+              <draggable tag="ul" :list="businessFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                         :move="checkFieldMove"
+                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
+                <li v-for="(fld, index) in businessFields" :key="index" class="field-widget-item"
+                    :title="fld.displayName"
+                    @dblclick="addFieldByDbClick(fld)">
+              <span><widget-icon :icon="fld.icon"/>
+              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
+              </span>
+                </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><widget-icon :icon="fld.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">
+                <span slot="label"><i class="el-icon-c-scale-to-original"></i> {{i18nt('designer.formLib')}}</span>
+
+                <template v-for="(ft, idx) in formTemplates">
+                  <el-card :key="idx" :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
+                    <el-popover placement="right" trigger="hover">
+                      <img slot="reference" :src="ft.imgUrl" style="width: 200px">
+                      <img :src="ft.imgUrl" style="height: 600px;width: 720px">
+                    </el-popover>
+                    <div class="bottom clear-fix">
+                      <span class="ft-title">#{{idx+1}} {{ft.title}}</span>
+                      <el-button type="text" class="right-button" @click="loadFormTemplate(ft.jsonUrl)">
+                        {{i18nt('designer.hint.loadFormTemplate')}}</el-button>
+                    </div>
+                  </el-card>
+                </template>
+              </el-tab-pane>-->
+
+      </el-tabs>
+
+    </div>
+
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+import indexMixin from './indexMixin.js';
+import { compareFields } from './widgetsConfig';
+
+export default {
+  name: "FieldPanel",
+  mixins: [indexMixin],
+  components: {
+    Draggable,
+    /* 面板组件图标：el-icon- 前缀渲染 element 字体图标，否则渲染 svg-icon */
+    WidgetIcon: {
+      name: "WidgetIcon",
+      functional: true,
+      props: { icon: String },
+      render(h, ctx) {
+        const icon = ctx.props.icon || "";
+        if (icon.indexOf("el-icon-") === 0) {
+          return h("i", { class: [icon, "color-svg-icon", "panel-el-icon"] });
+        }
+        return h("svg-icon", {
+          props: { iconClass: icon, className: "color-svg-icon" },
+        });
+      },
+    },
+  },
+  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>
+
+<style lang="scss" scoped>
+
+.color-svg-icon {
+  color: $--color-primary;
+}
+
+.side-scroll-bar {
+  ::v-deep .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+}
+
+// div.panel-container {
+//   padding-bottom: 10px;
+// }
+
+.no-bottom-margin ::v-deep .el-tabs__header {
+  margin-bottom: 0;
+}
+
+.indent-left-margin {
+  ::v-deep .el-tabs__nav {
+    margin-left: 20px;
+  }
+}
+
+.el-collapse-item ::v-deep ul > li {
+  list-style: none;
+}
+
+.widget-collapse {
+  border-top-width: 0;
+
+  ::v-deep .el-collapse-item__header {
+    margin-left: 8px;
+    font-weight: bold;
+  }
+
+  ::v-deep .el-collapse-item__content {
+    padding-bottom: 6px;
+
+    ul {
+      padding-left: 10px; /* 重置IE11默认样式 */
+      margin: 0; /* 重置IE11默认样式 */
+      margin-block-start: 0;
+      margin-block-end: 0.25em;
+      padding-inline-start: 10px;
+
+      &:after {
+        content: "";
+        display: block;
+        clear: both;
+      }
+
+      .container-widget-item, .field-widget-item {
+        display: inline-block;
+        height: 35px;
+        line-height: 35px;
+        width: calc(50% - 7px);
+        float: left;
+        margin: 2px 6px 3px 0;
+        cursor: move;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        background: #f1f2f3;
+        font-size: 12px;
+        padding-left: 12px;
+
+        svg {
+          display: inline-block;
+          //margin: 10px auto 0;
+          width: 1.25em;
+          height: 1.25em;
+          vertical-align: middle;
+          margin-right: 5px;
+
+        }
+
+        i.panel-el-icon {
+          display: inline-block;
+          font-size: 1.25em;
+          vertical-align: middle;
+          margin-right: 5px;
+        }
+
+        span > span {
+          vertical-align: middle;
+        }
+      }
+
+      .container-widget-item:hover, .field-widget-item:hover {
+        background: #EBEEF5;
+        outline: 1px solid $--color-primary;
+      }
+
+      .drag-handler {
+        position: absolute;
+        top: 0;
+        left: 160px;
+        background-color: #dddddd;
+        border-radius: 5px;
+        padding-right: 5px;
+        font-size: 11px;
+        color: #666666;
+      }
+    }
+  }
+}
+
+.el-card.ft-card {
+  border: 1px solid #8896B3;
+}
+
+.ft-card {
+  margin-bottom: 10px;
+
+  .bottom {
+    margin-top: 10px;
+    line-height: 12px;
+  }
+
+  .ft-title {
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .right-button {
+    padding: 0;
+    float: right;
+  }
+
+  .clear-fix:before, .clear-fix:after {
+    display: table;
+    content: "";
+  }
+
+  .clear-fix:after {
+    clear: both;
+  }
+
+}
+
+</style>