skhj-variant 2.1.12

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

@@ -0,0 +1,324 @@
+<template>
+  <div>
+    <el-form :model="formConfig" size="mini" label-position="left" label-width="120px"
+             class="setting-form" @submit.native.prevent>
+      <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
+        <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
+          <el-form-item :label="i18nt('designer.setting.formSize')">
+            <el-select v-model="formConfig.size">
+              <el-option v-for="item in formSizes" :key="item.value" :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelPosition')">
+            <el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
+              <el-radio-button label="left">{{i18nt('designer.setting.leftPosition')}}</el-radio-button>
+              <el-radio-button label="top">{{i18nt('designer.setting.topPosition')}}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelAlign')">
+            <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
+              <el-radio-button label="label-left-align">{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+              <el-radio-button label="label-center-align">{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+              <el-radio-button label="label-right-align">{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelWidth')">
+            <el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formCss')">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{i18nt('designer.setting.addCss')}}</el-button>
+          </el-form-item>
+          <!-- -->
+          <el-form-item :label="i18nt('designer.setting.customClass')">
+            <el-select v-model="formConfig.customClass" multiple filterable allow-create
+                       default-first-option>
+              <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- -->
+          <el-form-item :label="i18nt('designer.setting.globalFunctions')">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <el-form-item label-width="0">
+            <el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formModelName')">
+            <el-input type="text" v-model="formConfig.modelName"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formRefName')">
+            <el-input type="text" v-model="formConfig.refName"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formRulesName')">
+            <el-input type="text" v-model="formConfig.rulesName"></el-input>
+          </el-form-item>
+        </el-collapse-item>
+
+        <el-collapse-item v-if="showEventCollapse()" name="2" :title="i18nt('designer.setting.eventSetting')">
+          <el-form-item label="onFormCreated" label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormCreated')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <el-form-item label="onFormMounted" label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormMounted')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <!-- -->
+          <el-form-item label="onFormDataChange" label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormDataChange')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <!-- -->
+          <!--
+          <el-form-item label="onFormValidate">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          -->
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+
+    <el-dialog :title="i18nt('designer.setting.editFormEventHandler')" :visible.sync="showFormEventDialogFlag"
+               v-if="showFormEventDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
+      <code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
+      <el-alert type="info" :closable="false" title="}"></el-alert>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showFormEventDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveFormEventHandler">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="i18nt('designer.setting.formCss')" :visible.sync="showEditFormCssDialogFlag"
+               v-if="showEditFormCssDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showEditFormCssDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveFormCss">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="i18nt('designer.setting.globalFunctions')" :visible.sync="showEditFunctionsDialogFlag"
+               v-if="showEditFunctionsDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showEditFunctionsDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveGlobalFunctions">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import CodeEditor from '@/components/code-editor/index'
+  import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "@/utils/util"
+
+  export default {
+    name: "form-setting",
+    mixins: [i18n],
+    components: {
+      CodeEditor,
+    },
+    props: {
+      designer: Object,
+      formConfig: Object,
+    },
+    inject: ['getDesignerConfig'],
+    data() {
+      return {
+        designerConfig: this.getDesignerConfig(),
+
+        formActiveCollapseNames: ['1', '2'],
+
+        formSizes: [
+          {label: 'default', value: ''},
+          {label: 'large', value: 'large'},
+          {label: 'medium', value: 'medium'},
+          {label: 'small', value: 'small'},
+          {label: 'mini', value: 'mini'},
+        ],
+
+        showEditFormCssDialogFlag: false,
+        formCssCode: '',
+        cssClassList: [],
+
+        showEditFunctionsDialogFlag: false,
+        functionsCode: '',
+
+        showFormEventDialogFlag: false,
+        formEventHandlerCode: '',
+        curEventName: '',
+
+        eventParamsMap: {
+          'onFormCreated':      'onFormCreated() {',
+          'onFormMounted':      'onFormMounted() {',
+          'onFormDataChange':   'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {',
+          //'onFormValidate':     'onFormValidate() {',
+        },
+
+      }
+    },
+    created() {
+      //导入表单JSON后需要重新加载自定义CSS样式！！！
+      this.designer.handleEvent('form-json-imported', () => {
+        this.formCssCode = this.formConfig.cssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.extractCssClass()
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      })
+    },
+    mounted() {
+      /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
+         此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
+      setTimeout(() => {
+        this.formCssCode = this.formConfig.cssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.extractCssClass()
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      }, 1200)
+    },
+    methods: {
+      showEventCollapse() {
+        if (this.designerConfig['eventCollapse'] === undefined) {
+          return true
+        }
+
+        return !!this.designerConfig['eventCollapse']
+      },
+
+      editFormCss() {
+        this.formCssCode = this.designer.formConfig.cssCode
+        this.showEditFormCssDialogFlag = true
+      },
+
+      extractCssClass() {
+        let regExp = /\..*{/g
+        let result = this.formCssCode.match(regExp)
+        let cssNameArray = []
+
+        if (!!result && result.length > 0) {
+          result.forEach((rItem) => {
+            let classArray = rItem.split(',')  //切分逗号分割的多个class
+            if (classArray.length > 0) {
+              classArray.forEach((cItem) => {
+                let caItem = cItem.trim()
+                if (caItem.indexOf('.', 1) !== -1) {  //查找第二个.位置
+                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1))  //仅截取第一、二个.号之间的class
+                  if (!!newClass) {
+                    cssNameArray.push(newClass.trim())
+                  }
+                } else if (caItem.indexOf(' ') !== -1) {  //查找第一个空格位置
+                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' '))  //仅截取第一、二个.号之间的class
+                  if (!!newClass) {
+                    cssNameArray.push(newClass.trim())
+                  }
+                } else {
+                  if (caItem.indexOf('{') !== -1) {  //查找第一个{位置
+                    let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
+                    cssNameArray.push( newClass.trim() )
+                  } else {
+                    let newClass = caItem.substring(caItem.indexOf('.') + 1)
+                    cssNameArray.push( newClass.trim() )
+                  }
+                }
+              })
+            }
+          })
+        }
+
+        //this.cssClassList.length = 0
+        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
+        this.cssClassList = Array.from( new Set(cssNameArray) )  //数组去重
+      },
+
+      saveFormCss() {
+        this.extractCssClass()
+        this.designer.formConfig.cssCode = this.formCssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.showEditFormCssDialogFlag = false
+
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      },
+
+      editGlobalFunctions() {
+        this.functionsCode = this.designer.formConfig.functions
+        this.showEditFunctionsDialogFlag = true
+      },
+
+      saveGlobalFunctions() {
+        this.designer.formConfig.functions = this.functionsCode
+        insertGlobalFunctionsToHtml(this.functionsCode)
+        this.showEditFunctionsDialogFlag = false
+      },
+
+      editFormEventHandler(eventName) {
+        this.curEventName = eventName
+        this.formEventHandlerCode = this.formConfig[eventName]
+        this.showFormEventDialogFlag = true
+      },
+
+      saveFormEventHandler() {
+        this.formConfig[this.curEventName] = this.formEventHandlerCode
+        this.showFormEventDialogFlag = false
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .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;
+    }
+
+    .radio-group-custom {
+      ::v-deep .el-radio-button__inner {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+    }
+
+    .custom-divider.el-divider--horizontal {
+      margin: 10px 0;
+    }
+  }
+
+  .setting-collapse {
+    ::v-deep .el-collapse-item__content {
+      padding-bottom: 6px;
+    }
+
+    ::v-deep .el-collapse-item__header {
+      font-style: italic;
+      font-weight: bold;
+    }
+  }
+
+  .small-padding-dialog {
+    ::v-deep .el-dialog__body {
+      padding: 6px 15px 12px 15px;
+    }
+  }
+
+</style>

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

@@ -0,0 +1,328 @@
+<template>
+  <el-container class="panel-container">
+    <el-tabs :active-name="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"></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"></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"></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"></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"></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"></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-tabs>
+
+    <el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" :visible.sync="showWidgetEventDialogFlag"
+               v-if="showWidgetEventDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
+      <code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode"></code-editor>
+      <el-alert type="info" :closable="false" title="}"></el-alert>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showWidgetEventDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveEventHandler">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+  </el-container>
+</template>
+
+<script>
+  import CodeEditor from '@/components/code-editor/index'
+  import PropertyEditors from './property-editor/index'
+  import FormSetting from './form-setting'
+  import WidgetProperties from './propertyRegister'
+  import {
+    addWindowResizeHandler,
+  } from "@/utils/util";
+  import i18n from "@/utils/i18n";
+
+  const {COMMON_PROPERTIES, ADVANCED_PROPERTIES, EVENT_PROPERTIES} = WidgetProperties
+
+  export default {
+    name: "SettingPanel",
+    componentName: "SettingPanel",
+    mixins: [i18n],
+    components: {
+      CodeEditor,
+      FormSetting,
+      ...PropertyEditors,
+    },
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      formConfig: Object,
+    },
+    inject: ['getDesignerConfig'],
+    data() {
+      return {
+        designerConfig: this.getDesignerConfig(),
+
+        scrollerHeight: 0,
+
+        activeTab: "2",
+        widgetActiveCollapseNames: ['1', '3'], //['1', '2', '3'],
+        formActiveCollapseNames: ['1', '2'],
+
+        commonProps: COMMON_PROPERTIES,
+        advProps: ADVANCED_PROPERTIES,
+        eventProps: EVENT_PROPERTIES,
+
+        showWidgetEventDialogFlag: false,
+        eventHandlerCode: '',
+        curEventName: '',
+        eventHeader: '',
+
+        subFormChildWidgetFlag: false,
+      }
+    },
+    computed: {
+      optionModel: {
+        get() {
+          return this.selectedWidget.options
+        },
+
+        set(newValue) {
+          this.selectedWidget.options = newValue
+        }
+      },
+
+    },
+    watch: {
+      'designer.selectedWidget': {
+        handler(val) {
+          if (!!val) {
+            this.activeTab = "1"
+          }
+        }
+      },
+
+      'selectedWidget.options': {  //组件属性变动后，立即保存表单JSON！！
+        deep: true,
+        handler() {
+          this.designer.saveCurrentHistoryStep()
+        }
+      },
+
+      formConfig: {
+        deep: true,
+        handler() {
+          this.designer.saveCurrentHistoryStep()
+        }
+      },
+
+    },
+    created() {
+      this.$on('editEventHandler', function (eventName, eventParams) {
+        this.editEventHandler(eventName, eventParams)
+      })
+
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.designer.setCssClassList(cssClassList)
+      })
+    },
+    mounted() {
+      if (!this.designer.selectedWidget) {
+        this.activeTab = "2"
+      } else {
+        this.activeTab = "1"
+      }
+
+      this.scrollerHeight = window.innerHeight - 56 - 48 + 'px'
+      addWindowResizeHandler(() => {
+        this.$nextTick(() => {
+          this.scrollerHeight = window.innerHeight - 56 - 48 + 'px'
+          //console.log(this.scrollerHeight)
+        })
+      })
+    },
+    methods: {
+      showEventCollapse() {
+        if (this.designerConfig['eventCollapse'] === undefined) {
+          return true
+        }
+
+        return !!this.designerConfig['eventCollapse']
+      },
+
+      hasPropEditor(propName, editorName) {
+        if (!editorName) {
+          return false
+        }
+
+        let originalPropName = propName.replace(this.selectedWidget.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
+        return this.designer.hasConfig(this.selectedWidget, originalPropName)
+      },
+
+      getPropEditor(propName, editorName) {
+        let originalPropName = propName.replace(this.selectedWidget.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
+        let ownPropEditorName = `${this.selectedWidget.type}-${originalPropName}-editor`
+        //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
+        if (!!this.$options.components[ownPropEditorName]) {  //局部注册的属性编辑器组件
+          return ownPropEditorName
+        }
+
+        return !!this.$root.$options.components[ownPropEditorName] ? ownPropEditorName : editorName  //全局注册的属性编辑器组件
+      },
+
+      showCollapse(propsObj) {
+        let result = false
+
+        for (let propName in propsObj) {
+          if (!propsObj.hasOwnProperty(propName)) {
+            continue
+          }
+
+          if (this.hasPropEditor(propName, propsObj[propName])) {
+            result = true
+            break
+          }
+        }
+
+        return result
+      },
+
+      editEventHandler(eventName, eventParams) {
+        this.curEventName = eventName
+        this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`
+        this.eventHandlerCode = this.selectedWidget.options[eventName] || ''
+
+        // 设置字段校验函数示例代码
+        if ((eventName === 'onValidate') && (!this.optionModel['onValidate'])) {
+          this.eventHandlerCode = "  /* sample code */\n  /*\n  if ((value > 100) || (value < 0)) {\n    callback(new Error('error message'))  //fail\n  } else {\n    callback();  //pass\n  }\n  */"
+        }
+
+        this.showWidgetEventDialogFlag = true
+      },
+
+      saveEventHandler() {
+        this.selectedWidget.options[this.curEventName] = this.eventHandlerCode
+        this.showWidgetEventDialogFlag = false
+      },
+
+    }
+  }
+</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-style: italic;
+      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>