cloud-web-corejs 1.0.54-dev.8 → 1.0.54-dev.800

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

@@ -1,305 +1,313 @@
-<template>
-  <el-container class="panel-container">
-    <el-tabs v-model="activeTab" style="height: 100%; overflow: hidden">
-      <el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
-        <el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }">
-          <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
-            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
-              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
-                  <template v-for="(editorName, propName) in commonProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-                <el-collapse-item name="4" v-if="showCollapse(wfProps)"
-                                  :title="i18nt('流程属性')">
-                  <template v-for="(editorName, propName) in wfProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
-                  <template v-for="(editorName, propName) in advProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-
-                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
-                  <template v-for="(editorName, propName) in eventProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-              </el-collapse>
-            </el-form>
-          </template>
-
-          <template v-if="!!designer.selectedWidget && !!designer.selectedWidget.category">
-            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
-              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
-                  <template v-for="(editorName, propName) in commonProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-
-                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
-                  <template v-for="(editorName, propName) in advProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
-                  <template v-for="(editorName, propName) in eventProps">
-                    <component
-                      v-if="hasPropEditor(propName, editorName)"
-                      :is="getPropEditor(propName, editorName)"
-                      :designer="designer"
-                      :selected-widget="selectedWidget"
-                      :option-model="optionModel"
-                      :key="propName"
-                    ></component>
-                  </template>
-                </el-collapse-item>
-              </el-collapse>
-            </el-form>
-          </template>
-        </el-scrollbar>
-      </el-tab-pane>
-       <el-tab-pane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
-        <el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }"><form-setting :designer="designer" :form-config="formConfig"></form-setting></el-scrollbar>
-      </el-tab-pane>
-      <!-- <el-tab-pane v-if="!!designer" label="数据源" name="3">
-      	<el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }">
-      		<dataSourceSetting :designer="designer" :form-config="formConfig"></dataSourceSetting>
-      	</el-scrollbar>
-      </el-tab-pane> -->
-    </el-tabs>
-
-    <el-dialog
-      :title="i18nt('designer.setting.editWidgetEventHandler')"
-      :visible.sync="showWidgetEventDialogFlag"
-      v-if="showWidgetEventDialogFlag"
-      :show-close="true"
-      custom-class="dialog-style list-dialog"
-      v-dialog-drag
-      append-to-body=""
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="true"
-      top="7vh"
-    >
-      <div class="cont">
-        <el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
-        <code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode" ref="ecEditor"></code-editor>
-        <el-alert type="info" :closable="false" title="}"></el-alert>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="showWidgetEventDialogFlag = false" class="button-sty" icon="el-icon-close">{{ i18nt('designer.hint.cancel') }}</el-button>
-        <el-button type="primary" @click="saveEventHandler" class="button-sty" icon="el-icon-check">{{ i18nt('designer.hint.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog
-      :title="i18nt('配置编辑')"
-      v-if="showDateConfigDialog"
-      :visible.sync="showDateConfigDialog"
-      :modal="false"
-      :show-close="!0"
-      custom-class="dialog-style list-dialog"
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      v-el-drag-dialog
-      v-el-dialog-center
-    >
-      <div class="cont" style="height: auto;max-height: 500px;">
-        <el-scrollbar class="setting-scrollbar">
-          <el-form :model="columnSelectedWidget.options" size="mini" label-position="left" label-width="120px" class="setting-form"
-                   @submit.native.prevent>
-            <el-collapse v-model="widgetActiveCollapseName1s" class="setting-collapse">
-              <el-collapse-item name="1" v-if="showCollapse1(commonProps)"
-                                :title="i18nt('designer.setting.commonSetting')">
-                <template v-for="(editorName, propName) in commonProps">
-                  <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
-                    :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :key="propName"
-                  ></component>
-                </template>
-              </el-collapse-item>
-
-              <el-collapse-item name="2" v-if="showCollapse1(advProps)"
-                                :title="i18nt('designer.setting.advancedSetting')">
-                <template v-for="(editorName, propName) in advProps">
-                  <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
-                    :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :key="propName"
-                  ></component>
-                </template>
-              </el-collapse-item>
-              <el-collapse-item name="4" v-if="showCollapse1(wfProps)"
-                                :title="i18nt('流程属性')">
-                <template v-for="(editorName, propName) in wfProps">
-                  <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
-                    :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :key="propName"
-                  ></component>
-                </template>
-              </el-collapse-item>
-
-              <el-collapse-item name="3" v-if="showEventCollapse1() && showCollapse1(eventProps)"
-                                :title="i18nt('designer.setting.eventSetting')">
-                <template v-for="(editorName, propName) in eventProps">
-                  <component
-                    v-if="hasPropEditor1(propName, editorName)"
-                    :is="getPropEditor1(propName, editorName)"
-                    :designer="designer"
-                    :selected-widget="columnSelectedWidget"
-                    :option-model="columnSelectedWidget.options"
-                    :key="propName"
-                  ></component>
-                </template>
-              </el-collapse-item>
-            </el-collapse>
-          </el-form>
-        </el-scrollbar>
-      </div>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
-        </el-button>
-        <el-button type="primary" class="button-sty" @click="confirmWidgetPropertyDialog">
-          {{ i18nt('designer.hint.confirm') }}
-        </el-button>
-      </div>
-    </el-dialog>
-  </el-container>
-</template>
-
-<script>
-import PropertyEditors from './property-editor/index';
-import FormSetting from './form-setting';
-import dataSourceSetting from './dataSource-setting';
-import indexMixin from './indexMixin';
-
-export default {
-  name: 'SettingPanel',
-  components: {
-    FormSetting,
-    dataSourceSetting,
-    ...PropertyEditors
-  },
-  mixins: [indexMixin],
-};
-</script>
-
-<style lang="scss" scoped>
-.panel-container {
-  padding: 0 8px;
-}
-
-.setting-scrollbar {
-  ::v-deep .el-scrollbar__wrap {
-    overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
-  }
-}
-
-.setting-collapse {
-  ::v-deep .el-collapse-item__content {
-    padding-bottom: 6px;
-  }
-
-  ::v-deep .el-collapse-item__header {
-    font-weight: bold;
-  }
-}
-
-.setting-form {
-  ::v-deep .el-form-item__label {
-    font-size: 13px;
-    //text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  ::v-deep .el-form-item--mini.el-form-item {
-    margin-bottom: 6px;
-  }
-}
-
-/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
-::v-deep .hide-spin-button input::-webkit-outer-spin-button,
-::v-deep .hide-spin-button input::-webkit-inner-spin-button {
-  -webkit-appearance: none !important;
-}
-
-/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
-::v-deep .hide-spin-button input[type='number'] {
-  -moz-appearance: textfield;
-}
-
-::v-deep .custom-divider.el-divider--horizontal {
-  margin: 10px 0;
-}
-
-::v-deep .custom-divider-margin-top.el-divider--horizontal {
-  margin: 20px 0;
-}
-
-.small-padding-dialog {
-  ::v-deep .el-dialog__body {
-    padding: 6px 15px 12px 15px;
-  }
-}
-</style>
+<template>
+  <el-container class="panel-container">
+    <el-tabs v-model="activeTab" style="height: 100%; overflow: hidden">
+      <el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
+
+          <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
+            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
+              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
+                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
+                  <template v-for="(editorName, propName) in commonProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+                <el-collapse-item name="4" v-if="showCollapse(wfProps)"
+                                  :title="i18nt('流程属性')">
+                  <template v-for="(editorName, propName) in wfProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
+                  <template v-for="(editorName, propName) in advProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+
+                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
+                  <template v-for="(editorName, propName) in eventProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
+            </el-form>
+          </template>
+
+          <template v-if="!!designer.selectedWidget && !!designer.selectedWidget.category">
+            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
+              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
+                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
+                  <template v-for="(editorName, propName) in commonProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+
+                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
+                  <template v-for="(editorName, propName) in advProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
+                  <template v-for="(editorName, propName) in eventProps">
+                    <component
+                      v-if="hasPropEditor(propName, editorName)"
+                      :is="getPropEditor(propName, editorName)"
+                      :designer="designer"
+                      :selected-widget="selectedWidget"
+                      :option-model="optionModel"
+                      :key="propName"
+                    ></component>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
+            </el-form>
+          </template>
+      </el-tab-pane>
+       <el-tab-pane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
+        <form-setting :designer="designer" :form-config="formConfig"></form-setting>
+      </el-tab-pane>
+      <!-- <el-tab-pane v-if="!!designer" label="数据源" name="3">
+      	<el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }">
+      		<dataSourceSetting :designer="designer" :form-config="formConfig"></dataSourceSetting>
+      	</el-scrollbar>
+      </el-tab-pane> -->
+    </el-tabs>
+
+    <el-dialog
+      :title="i18nt('designer.setting.editWidgetEventHandler')"
+      :visible.sync="showWidgetEventDialogFlag"
+      v-if="showWidgetEventDialogFlag"
+      :show-close="true"
+      custom-class="dialog-style list-dialog"
+      v-dialog-drag
+      append-to-body=""
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      top="7vh"
+    >
+      <div class="cont">
+        <el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
+        <code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode" ref="ecEditor"></code-editor>
+        <el-alert type="info" :closable="false" title="}"></el-alert>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showWidgetEventDialogFlag = false" class="button-sty" icon="el-icon-close">{{ i18nt('designer.hint.cancel') }}</el-button>
+        <el-button type="primary" @click="saveEventHandler" class="button-sty" icon="el-icon-check">{{ i18nt('designer.hint.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      v-for="dlg in widgetPropertyDialogs"
+      :key="dlg.id"
+      :title="dlg.title || i18nt('配置编辑')"
+      :visible.sync="dlg.visible"
+      :modal="false"
+      :show-close="!0"
+      custom-class="dialog-style list-dialog"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      append-to-body
+      v-el-drag-dialog
+      v-el-dialog-center
+      :before-close="(done) => handleWidgetPropertyDialogBeforeClose(dlg, done)"
+      @mousedown.native="setActivePropertyDialog(dlg.id)"
+    >
+      <div class="cont" style="height: auto;max-height: 500px;">
+        <el-scrollbar class="setting-scrollbar">
+          <el-form :model="dlg.columnSelectedWidget.options" size="mini" label-position="left" label-width="120px" class="setting-form"
+                   @submit.native.prevent>
+            <el-collapse v-model="dlg.widgetActiveCollapseName1s" class="setting-collapse">
+              <el-collapse-item name="1" v-if="showCollapseForDialog(dlg, commonProps)"
+                                :title="i18nt('designer.setting.commonSetting')">
+                <template v-for="(editorName, propName) in commonProps">
+                  <component
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
+                    :designer="designer"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-common-' + propName"
+                  ></component>
+                </template>
+              </el-collapse-item>
+
+              <el-collapse-item name="2" v-if="showCollapseForDialog(dlg, advProps)"
+                                :title="i18nt('designer.setting.advancedSetting')">
+                <template v-for="(editorName, propName) in advProps">
+                  <component
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
+                    :designer="designer"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-adv-' + propName"
+                  ></component>
+                </template>
+              </el-collapse-item>
+              <el-collapse-item name="4" v-if="showCollapseForDialog(dlg, wfProps)"
+                                :title="i18nt('流程属性')">
+                <template v-for="(editorName, propName) in wfProps">
+                  <component
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
+                    :designer="designer"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-wf-' + propName"
+                  ></component>
+                </template>
+              </el-collapse-item>
+
+              <el-collapse-item name="3" v-if="showEventCollapse1() && showCollapseForDialog(dlg, eventProps)"
+                                :title="i18nt('designer.setting.eventSetting')">
+                <template v-for="(editorName, propName) in eventProps">
+                  <component
+                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
+                    :is="getPropEditorForDialog(dlg, propName, editorName)"
+                    :designer="designer"
+                    :selected-widget="dlg.columnSelectedWidget"
+                    :option-model="dlg.columnSelectedWidget.options"
+                    :tableColumns="dlg.tableColumns"
+                    :key="dlg.id + '-event-' + propName"
+                  ></component>
+                </template>
+              </el-collapse-item>
+            </el-collapse>
+          </el-form>
+        </el-scrollbar>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="closeWidgetPropertyDialog(dlg.id)" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" class="button-sty" @click="confirmWidgetPropertyDialog(dlg)">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import PropertyEditors from './property-editor/index';
+import FormSetting from './form-setting';
+import dataSourceSetting from './dataSource-setting';
+import indexMixin from './indexMixin';
+import widgetPropertyDialogMixin from './widgetPropertyDialogMixin';
+
+export default {
+  name: 'SettingPanel',
+  components: {
+    FormSetting,
+    dataSourceSetting,
+    ...PropertyEditors
+  },
+  mixins: [indexMixin, widgetPropertyDialogMixin],
+};
+</script>
+
+<style lang="scss" scoped>
+.panel-container {
+  padding: 0 8px;
+}
+
+.setting-scrollbar {
+  ::v-deep .el-scrollbar__wrap {
+    overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
+  }
+}
+
+.setting-collapse {
+  ::v-deep .el-collapse-item__content {
+    padding-bottom: 6px;
+  }
+
+  ::v-deep .el-collapse-item__header {
+    font-weight: bold;
+  }
+}
+
+.setting-form {
+  ::v-deep .el-form-item__label {
+    font-size: 13px;
+    //text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  ::v-deep .el-form-item--mini.el-form-item {
+    margin-bottom: 6px;
+  }
+}
+
+/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
+::v-deep .hide-spin-button input::-webkit-outer-spin-button,
+::v-deep .hide-spin-button input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+
+/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
+::v-deep .hide-spin-button input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+::v-deep .custom-divider.el-divider--horizontal {
+  margin: 10px 0;
+}
+
+::v-deep .custom-divider-margin-top.el-divider--horizontal {
+  margin: 20px 0;
+}
+
+.small-padding-dialog {
+  ::v-deep .el-dialog__body {
+    padding: 6px 15px 12px 15px;
+  }
+}
+</style>