@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/base/ComponentGlobalSet.vue

@@ -0,0 +1,842 @@
+
+<script>
+// @jsx-vue3（T33：T30 JSX 批漏掉的 6 个文件，见 .claude/codemod/codemod-jsx-vue3-tail6.mjs）
+import component from '@epxing/core/src/mixins/component'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-component-global-set',
+  mixins: [component],
+  appType: 'client',
+  data () {
+    return {
+      settingInfo: {},
+      settingComponents: {},
+      componentConfig: {},
+      defaultConfigs: {},
+      showModal: false,
+      eventList: [],
+      opened: {},
+      activeComponent: null,
+      componentCodes: [],
+      isDetail: true
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    appType () {
+      const { appType } = this.$configs
+      return appType
+    }
+    // componentCodes () {
+    //   return Object.keys(this.settingComponents)
+    // }
+    // isDefaultValue () {
+    //   return (key) => {
+    //     const { [key]: defaultValue } = this.defaultConfigs
+    //     const { [key]: value } = this.config
+    //     return defaultValue !== undefined && (value === undefined || this.$_.isEqual(value, defaultValue))
+    //   }
+    // }
+  },
+  watch: {
+    settingComponents: {
+      handler (val) {
+        this.componentCodes = Object.keys(val)
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    save () { // 深拷贝并移除 null 值
+      const cleanObject = (obj) => {
+        const cleaned = {}
+        for (const key in obj) {
+          if (obj[key] !== null && typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+            // 如果值是对象且不为 null，递归清理
+            cleaned[key] = cleanObject(obj[key])
+          } else if (obj[key] !== null) {
+            // 只有当值不为 null 时才保留
+            cleaned[key] = obj[key]
+          }
+        }
+        return cleaned
+      }
+
+      // 清理 componentConfig
+      const cleanedComponentConfig = cleanObject(this.componentConfig)
+      const action = this.settingInfo.ID ? 'update' : 'save'
+      const content = JSON.stringify(cleanedComponentConfig)
+      const params = {
+        action,
+        entityId: 'FM_COMPONENT_GLOBAL_SET',
+        bean: {
+          ID: this.settingInfo.ID,
+          CLIENT: this.CLIENT,
+          CONTENT: content
+        }
+      }
+      if (this.appType === 'system') {
+        params.bean.SYSTEM = this.SYSTEM
+      }
+      console.log(params)
+      this.$http.update(params).then(data => {
+        this.$message.success('保存成功')
+        this.isDetail = true
+        if (action === 'save') this.settingInfo.ID = data
+      })
+    },
+    async getEventList () {
+      let eventList = this.getCodeById('EVENT')
+      if (!eventList) {
+        await this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: 'EVENT'
+        })
+          .then(data => {
+            eventList = data
+          })
+      }
+      this.eventList = eventList
+    },
+    addComponent (component) {
+      const componentList = Object.keys(this.componentConfig)
+      if (componentList.includes(component.CODE)) {
+        this.$message.warning('组件已存在')
+        this.showModal = false
+        return
+      }
+      this.$http.list({
+        entityId: 'FM_PAGE_ATTRIBUTE',
+        'scope.PAGE': component.ID,
+        'scope.IS_GLOBAL': '1',
+        link: 'page'
+      })
+        .then(data => {
+          const arr = data.entitys
+          const comCode = component.CODE
+          this.componentConfig[comCode] = {}
+          this.opened[comCode] = {}
+          this.defaultConfigs[comCode] = {}
+          this.formatComponentData(comCode, arr)
+          this.settingComponents[comCode] = { name: component.TITLE, configs: arr }
+        })
+      this.showModal = false
+    },
+    formatComponentData (comCode, arr) {
+      arr.forEach(item => {
+        const { TYPE, CODE, NAME, CODE_KEY, RELATED_ENTITY, RELATED_ENTITY_KEY, SHOW_CONDITION, DYNAMIC_META_ID, OBJECT_SCOPE, FIELD_EDITABLE, DEFAULT_VALUE_TYPE, DEFAULT_VALUE, DEFAULT_VALUE_DYNAMIC, INPUT_VARIABLE, NOTE, MULTIPLE, SHOW_SUB_FIELD, LIMIT_DATATYPE, OBJECT_FLAG, CUSTOM_FUNCTION, CODE_KEY_SET, CUSTOM_CODE_KEY, EVENT, IS_TREE, FIELD_CONFIGS, REG_EXP, INPUTABLE } = item
+        try {
+          if (DEFAULT_VALUE_TYPE === 'dynamic') {
+            // eslint-disable-next-line no-eval
+            if (DEFAULT_VALUE_DYNAMIC) item.defaultValue = eval(DEFAULT_VALUE_DYNAMIC)
+          } else if (DEFAULT_VALUE) {
+            if (TYPE === 'switch' || TYPE === 'num') {
+              // eslint-disable-next-line no-eval
+              item.defaultValue = eval(DEFAULT_VALUE)
+            } else if (TYPE === 'operates') {
+              item.defaultValue = JSON.parse(DEFAULT_VALUE)
+            } else {
+              item.defaultValue = DEFAULT_VALUE
+            }
+          }
+        } catch (error) {
+          console.error(error)
+        }
+        if (!this.$_.isNil(item.defaultValue)) {
+          this.defaultConfigs[comCode][CODE] = item.defaultValue
+        }
+        item.key = CODE
+        item.label = NAME
+        item.type = TYPE
+        item.showCondition = SHOW_CONDITION
+        item.dynamicMetaId = DYNAMIC_META_ID
+        item.code = CODE_KEY
+        item.object = RELATED_ENTITY
+        item.dataKey = RELATED_ENTITY_KEY
+        item.fieldEditable = FIELD_EDITABLE
+        item.inputVariable = INPUT_VARIABLE === '1'
+        item.tip = NOTE
+        item.regExp = REG_EXP
+        if (INPUTABLE) item.inputable = INPUTABLE === '1'
+        if (TYPE === 'field') {
+          if (MULTIPLE)item.multiple = MULTIPLE !== '0'
+          if (SHOW_SUB_FIELD)item.showSubField = SHOW_SUB_FIELD === '1'
+          if (LIMIT_DATATYPE)item.limit = { dataType: LIMIT_DATATYPE.split(',') }
+        } else if (TYPE === 'object') {
+          if (OBJECT_FLAG)item.flag = OBJECT_FLAG
+          if (IS_TREE)item.isTree = IS_TREE
+          if (FIELD_CONFIGS)item.fieldConfigs = JSON.parse(FIELD_CONFIGS)
+        } else if (TYPE === 'custom') {
+          if (CUSTOM_FUNCTION) {
+            if (typeof this[CUSTOM_FUNCTION] === 'function') {
+              item.renderContent = this[CUSTOM_FUNCTION]
+            }
+          }
+        }
+        if (EVENT) {
+          const event = {}
+          this.eventList.forEach(item => {
+            if (EVENT.includes(item.code)) {
+              event[item.code] = item.name
+            }
+          })
+          item.eventList = event
+        }
+        if (CODE_KEY_SET === '1' && CUSTOM_CODE_KEY) {
+          item.options = JSON.parse(CUSTOM_CODE_KEY)
+        }
+        if (OBJECT_SCOPE) {
+          const scope = JSON.parse(OBJECT_SCOPE)
+          item.scopeParams = scope.scopeParams
+        }
+      })
+    },
+    async getComponentList () {
+      const component = Object.keys(this.componentConfig)
+      // 获取组件信息
+      await this.$http.list({
+        entityId: 'FM_PAGE',
+        'scope.CODE#in': component.join(',')
+      })
+        .then(data => {
+          const arr = data.entitys
+          const obj = {}
+          arr.forEach(item => {
+            obj[item.CODE] = item
+          })
+          component.forEach(code => {
+            if (obj[code]) {
+              this.settingComponents[code] = { name: obj[code].TITLE, configs: [] }
+            }
+          })
+        })
+      this.$http.list({
+        entityId: 'FM_PAGE_ATTRIBUTE',
+        'scope.PAGE|CODE#in': component.join(','),
+        'scope.IS_GLOBAL': '1',
+        link: 'page'
+      })
+        .then(data => {
+          const arr = data.entitys
+          const obj = {}
+          arr.forEach(item => {
+            const comCode = item['PAGE|CODE']
+            if (obj[comCode]) {
+              obj[comCode].configs.push(item)
+            } else {
+              obj[comCode] = { name: item['PAGE|TITLE'], configs: [item] }
+            }
+          })
+          for (const comCode in obj) {
+            if (!this.componentConfig[comCode]) this.componentConfig[comCode] = {}
+            this.defaultConfigs[comCode] = {}
+            this.opened[comCode] = {}
+            if (obj[comCode].configs.length > 0) {
+              this.formatComponentData(comCode, obj[comCode].configs)
+              this.settingComponents[comCode] = obj[comCode]
+            }
+          }
+        })
+    },
+    getGlobalConfig () {
+      const params = {
+        entityId: 'FM_COMPONENT_GLOBAL_SET',
+        'scope.CLIENT': this.CLIENT
+      }
+      if (this.appType === 'system') {
+        params['scope.SYSTEM'] = this.SYSTEM
+      } else {
+        params['scope.SYSTEM#is_null'] = ''
+      }
+      this.$http.find(params)
+        .then(data => {
+          if (data && data.data) {
+            this.settingInfo = data.data
+            if (this.settingInfo.CONTENT) {
+              this.componentConfig = JSON.parse(this.settingInfo.CONTENT)
+            }
+            console.log(this.componentConfig)
+            this.getComponentList()
+          }
+        })
+    },
+    renderModal () {
+      return (
+        <el-dialog
+          title="页面组件查询"
+          modelValue={!!this.showModal}
+          width="960px"
+          append-to-body
+          class="visual-component-select-dialog"
+          onClick={e => e.stopPropagation()}
+          onClose={() => (this.showModal = false)}
+        >
+          <epx-visual-component-library-dialog onClick={this.addComponent.bind(this)}></epx-visual-component-library-dialog>
+        </el-dialog>
+      )
+    },
+    goList () {
+      this.$createPage({
+        component: 'entity-list',
+        metaId: 'FM_COMPONENT_GLOBAL_SET'
+      })
+    },
+    changeConfigItem (comCode, key, value) {
+      this.componentConfig[comCode][key] = value
+    },
+    renderDeatileFormItem (comCode, item) {
+      const defaultValue = this.$_.isNil(item.defaultValue) ? this.defaultConfigs[comCode][item.key] : item.defaultValue
+      const value = this.$_.isNil(this.componentConfig[comCode][item.key]) ? defaultValue : this.componentConfig[comCode][item.key]
+      const { NAME, CUSTOM_CODE_KEY, CODE, CODE_KEY } = item
+      const arr = CUSTOM_CODE_KEY ? JSON.parse(CUSTOM_CODE_KEY) : null
+      let options = null
+      if (arr) {
+        options = arr.map((item, index) => {
+          return {
+            id: index,
+            code: item.value,
+            name: item.label
+          }
+        })
+      }
+      return (
+        <div class={['component-setting', { 'epx-visual-component__form-item--opened': this.opened[comCode][item.key], ['epx-visual-component__form-item--' + item.type]: true }]}>
+          { item.type !== 'font' && <div class="component-setting__label">{item.label}：</div> }
+          { item.type === 'font' ? (
+            <span class="component-setting__label">
+              <i class="epx-visual-component__form-item-fold-icon el-icon-caret-right" onClick={() => (this.opened[comCode][item.key] = !this.opened[comCode][item.key])}></i>
+              {item.label}
+            </span>
+          ) : item.tip ? (
+            <span>
+              {item.label}：
+              <el-tooltip content={item.tip} placement="top">
+                <i class="el-icon-warning epx-visual-component__form-item-tip"></i>
+              </el-tooltip>
+            </span>
+          ) : null }
+          {
+            item.type === 'switch' ? <span>{value ? '是' : '否'}</span>
+              : (<epx-table-form-item
+                value={value}
+                fieldConfigs={{ attriLabel: NAME, attriName: CODE, codeKey: CODE_KEY, state: 'DETAIL', dataType: item.TYPE, options: options }}>
+              </epx-table-form-item>)
+          }
+        </div>
+      )
+    },
+    renderFormItem (comCode, item) {
+      const defaultValue = this.$_.isNil(item.defaultValue) ? this.defaultConfigs[comCode][item.key] : item.defaultValue
+      if (item.type === 'report') {
+        return (
+          <epx-visual-config-design-report
+            value={this.componentConfig[comCode][item.key]}
+            defaultValue={this.defaultConfigs[comCode][item.key]}
+          />
+        )
+      }
+      return (
+        <div class={['component-setting', { 'epx-visual-component__form-item--opened': this.opened[comCode][item.key], ['epx-visual-component__form-item--' + item.type]: true }]}>
+          { item.type !== 'font' && <div class="component-setting__label">{item.label}：</div> }
+          { item.type === 'font' ? (
+            <span class="component-setting__label">
+              <i class="epx-visual-component__form-item-fold-icon el-icon-caret-right" onClick={() => (this.opened[comCode][item.key] = !this.opened[comCode][item.key])}></i>
+              {item.label}
+            </span>
+          ) : item.tip ? (
+            <span>
+              {item.label}
+              <el-tooltip content={item.tip} placement="top">
+                <i class="el-icon-warning epx-visual-component__form-item-tip"></i>
+              </el-tooltip>
+            </span>
+          ) : null }
+          {
+            item.renderContent
+              ? (
+                <div>
+                  {item.renderContent(item)}
+                </div>
+              )
+              : item.type === 'radio' ? (
+                <epx-visual-config-radio
+                  code={item.code}
+                  option-list={item.options}
+                  value={this.componentConfig[comCode][item.key]}
+                  inputable={item.inputable}
+                  defaultValue={defaultValue}
+                  onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                />
+              ) : item.type === 'checkbox' ? (
+                <epx-visual-config-checkbox
+                  code={item.code}
+                  option-list={item.options}
+                  value={this.componentConfig[comCode][item.key]}
+                  defaultValue={defaultValue}
+                  onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                />
+              ) : item.type === 'switch' ? (
+                <epx-visual-config-switch
+                  value={this.componentConfig[comCode][item.key]}
+                  defaultValue={defaultValue}
+                  onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                />
+              ) : item.type === 'action' ? (
+                <epx-visual-config-list
+                  option-list={this.actionList}
+                  value={this.componentConfig[comCode][item.key]}
+                  defaultValue={defaultValue}
+                  code={item.code}
+                  label={item.label}
+                  multiple={item.multiple}
+                  onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                />
+              ) : item.type === 'rule' ? (
+                <epx-visual-config-list
+                  option-list={this.ruleList}
+                  value={this.componentConfig[comCode][item.key]}
+                  defaultValue={defaultValue}
+                  code={item.code}
+                  label={item.label}
+                  multiple={item.multiple}
+                  onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                />
+              ) : item.type === 'tree' ? (
+                <epx-visual-config-tree
+                  option-list={item.options}
+                  value={this.componentConfig[comCode][item.key]}
+                  defaultValue={defaultValue}
+                  onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                />
+              )
+                : item.type === 'row' ? (
+                  <epx-visual-config-row
+                    value={this.config[item.key]}
+                    defaultValue={defaultValue}
+                    treeFieldStore={this.treeFieldStore}
+                    field-options={this.rowFieldOptions || this.fieldOptions}
+                    pageParams={this.pageParams}
+                    pageGlobalConfigs={this.globalConfigs}
+                    scopeConfigs={this.scopeConfigs}
+                    functionOption={this.FunctionOption}
+                    onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                  />
+                ) : item.type === 'list' ? (
+                  <epx-visual-config-list
+                    option-list={item.options}
+                    value={this.componentConfig[comCode][item.key]}
+                    defaultValue={defaultValue}
+                    code={item.code}
+                    label={item.label}
+                    multiple={item.multiple}
+                    onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                  />
+                ) : item.type === 'select' ? (
+                  <epx-visual-config-select
+                    option-list={item.options}
+                    value={this.componentConfig[comCode][item.key]}
+                    defaultValue={defaultValue}
+                    onChangeConfigs={item.change || this.changeConfigItem.bind(this, comCode, item.key)}
+                  />
+                )
+                  : item.type === 'list-field' || (item.type === 'field' && item.fieldEditable === '1') ? (
+                    <epx-visual-config-list-field
+                      value={this.config[item.key]}
+                      componentMetaId={this.componentMetaId}
+                      defaultValue={defaultValue}
+                      rule-list={this.ruleList}
+                      treeFieldStore={this.treeFieldStore}
+                      functionOption={this.FunctionOption}
+                      scopeConfigs={this.scopeConfigs}
+                      pageParams={this.pageParams}
+                      pageGlobalConfigs={this.globalConfigs}
+                      field-options={item.children && item.children.length > 0 ? item.children : this.fieldOptions}
+                      onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                    />
+                  )
+                    : item.type === 'field' ? (
+                      <epx-visual-config-field
+                        value={this.config[item.key]}
+                        defaultValue={defaultValue}
+                        rule-list={this.ruleList}
+                        metaId={item.metaId || this.getConfigMetaId(item)}
+                        treeFieldStore={this.treeFieldStore}
+                        multiple={item.multiple}
+                        limit={item.limit}
+                        scopeConfigs={this.scopeConfigs}
+                        defaultShowSubField={item.showSubField}
+                        onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                      />
+                    )
+                      : item.type === 'm-field' ? (
+                        <epx-visual-config-m-list-field
+                          value={this.config[item.key]}
+                          defaultValue={this.defaultConfigs[comCode][item.key]}
+                          treeFieldStore={this.treeFieldStore}
+                          field-options={this.fieldOptions}
+                          pageParams={this.pageParams}
+                          onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                        />
+                      ) : item.type === 'order-field' ? (
+                        <epx-visual-config-order-field
+                          value={this.config[item.key]}
+                          defaultValue={defaultValue}
+                          metaId={item.metaId || this.getConfigMetaId(item)}
+                          treeFieldStore={this.treeFieldStore}
+                          onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                        />
+                      )
+                        : item.type === 'operates' || item.type === 'operate' ? (
+                          <epx-visual-config-operate
+
+                            value={this.config[item.key]}
+                            defaultValue={defaultValue}
+                            configs={this.config}
+                            metaId={item.metaId}
+                            compMetaId={this.getConfigMetaId(item)}
+                            common-operates={item.commonOperates || this.commonOperates}
+                            operate-options={{ ...(this.operateOptions || {}), ...(item.operateOptions || {}) }}
+                            operate-configs={this.operateConfigs}
+                            treeFieldStore={this.treeFieldStore}
+                            pageParams={this.pageParams}
+                            handlerList={item.handlerList || this.handlerList}
+                            action-list={this.actionList}
+                            rule-list={this.ruleList}
+                            scopeConfigs={this.scopeConfigs}
+                            pageGlobalConfigs={this.globalConfigs}
+                            onChangeOperate={this.changeOperate && this.changeOperate.bind(this, item.key)}
+                            onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                          />
+                        )
+                          : item.type === 'scope' ? (
+                            <epx-visual-config-scope
+                              value={this.config[item.key]}
+                              pageParams={this.pageParams}
+                              treeFieldStore={this.treeFieldStore}
+                              extendFields={item.extendFields}
+                              componentMetaId={this.getConfigMetaId(item)}
+                              scopeConfigs={this.scopeConfigs}
+                              onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                            />
+                          ) : item.type === 'el' ? (
+                            <epx-rule
+                              formulaType='web'
+                              modelValue={this.componentConfig[comCode][item.key]}
+                              onChange={this.changeEl.bind(this, item.key) }
+                              metaId={this.getConfigMetaId(item)}
+                              variableList={this.variableTree}
+                              fieldConfigs={{ state: 'EDIT', functionType: 'web' }}
+                            >
+                            </epx-rule>
+                          )
+                            : item.type === 'num' ? (
+                              <epx-visual-config-number
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={defaultValue}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'chart' ? (
+                              <epx-visual-config-chart
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={defaultValue}
+                                onCallback={item.callback}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'params' ? (
+                              <epx-visual-config-params
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={defaultValue}
+                                treeFieldStore={this.treeFieldStore}
+                                metaId={this.getConfigMetaId(item)}
+                                pageParams={this.pageParams}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'object' || item.type === 'multiobject' ? (
+                              <epx-visual-config-object
+                                type={item.type}
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={defaultValue}
+                                object={item.object}
+                                label={item.label}
+                                dataKey={item.dataKey}
+                                fieldConfigs={item.fieldConfigs}
+                                flag={item.flag}
+                                isTree={item.isTree}
+                                scopeParams={item.key === 'metaViewId' ? [{ field: 'ENTITY', values: this.componentMetaId }] : item.scopeParams}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'font' ? (
+                              <epx-visual-config-font class="epx-visual-config-font"
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'color' ? (
+                              <epx-visual-config-color
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'page' ? (
+                              <epx-visual-config-item-page
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              >
+                              </epx-visual-config-item-page>
+                            ) : item.type === 'event' ? (
+                              <epx-visual-config-event
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={defaultValue}
+                                functionList={this.functionList}
+                                eventList={item.eventList}
+                                pageGlobalConfigs={this.globalConfigs}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'function' ? (
+                              <epx-visual-config-function
+
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={defaultValue}
+                                functionList={this.functionList}
+                                pageGlobalConfigs={this.globalConfigs}
+                                onInput={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'html' ? (
+                              <epx-visual-config-html
+
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                i18nValue={this.componentConfig[comCode][item.key + '.i18n']}
+                                pageGlobalConfigs={this.globalConfigs}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'image' ? (
+                              <epx-visual-config-image
+
+                                label={item.label}
+                                value={this.componentConfig[comCode][item.key]}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                pageGlobalConfigs={this.globalConfigs}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : item.type === 'textarea' ? (
+                              <epx-visual-config-textarea
+
+                                label={item.label}
+                                value={this.componentConfig[comCode][item.key]}
+                                i18nValue={this.componentConfig[comCode][item.key + '.i18n']}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                inputVariable={item.inputVariable}
+                                change={item.change}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            ) : (
+                              <epx-visual-config-input
+
+                                label={item.label}
+                                value={this.componentConfig[comCode][item.key]}
+                                i18nValue={this.componentConfig[comCode][item.key + '.i18n']}
+                                defaultValue={this.defaultConfigs[comCode][item.key]}
+                                inputVariable={item.inputVariable}
+                                regExp={item.regExp}
+                                readonly={item.readonly}
+                                change={item.change}
+                                onChangeConfigs={this.changeConfigItem.bind(this, comCode, item.key)}
+                              />
+                            )
+          }
+        </div>
+      )
+    },
+    scrollToComponent (key) {
+      const container = this.$refs.componentSettingContainer
+      const targetElement = this.$refs[`component-${key}`]
+      this.activeComponent = key
+      if (container && targetElement) {
+        // 计算目标元素相对于容器的偏移量
+        const targetTop = targetElement.offsetTop
+        const headerTop = 58
+
+        container.scrollTo({
+          top: targetTop - headerTop,
+          behavior: 'smooth'
+        })
+      }
+    },
+    deleteSettingComponent (key, e) {
+      e.stopPropagation()
+      this.$confirm('确定删除该组件配置吗？')
+        .then(_ => {
+          this.settingComponents[key] = null
+          delete this.settingComponents[key]
+          delete this.componentConfig[key]
+        })
+    }
+  },
+  created () {
+    this.getGlobalConfig()
+    this.getEventList()
+  },
+  render () {
+    return (
+      <div class="container" style={this.$component.style}>
+        <div class="left">
+          {!this.isDetail && <div class="btn">
+            <el-button style="width:100%" type="primary" onClick={() => (this.showModal = true)}>添加组件</el-button>
+          </div>}
+          <div class="component-list">
+            {
+              this.componentCodes.map(key => {
+                if (this.settingComponents[key]) {
+                  return <div key={key}
+                    class={['component-list-item', { active: this.activeComponent === key }]}
+                    onClick={() => this.scrollToComponent(key)}>
+                    {this.settingComponents[key].name}
+                    <div>
+                      {!this.isDetail && <i class="el-icon-delete" onClick={this.deleteSettingComponent.bind(this, key)}></i>}
+                    </div>
+                  </div>
+                }
+              })
+            }
+          </div>
+        </div>
+        <div class="right">
+          <div class="component-setting-container" ref="componentSettingContainer">
+            {
+              this.componentCodes.map(key => {
+                if (this.settingComponents[key]) {
+                  return <div class="component-setting-item" ref={`component-${key}`}>
+                    <div key={key} class="epx-add-form-item__header">
+                      <span class="epx-add-form-item__title">{this.settingComponents[key].name}</span>
+                    </div>
+                    <div class="component-setting-content">
+                      {
+                        this.settingComponents[key].configs.length > 0 &&
+                        this.settingComponents[key].configs.map(item => {
+                          if (this.isDetail) {
+                            return this.renderDeatileFormItem(key, item)
+                          } else {
+                            return this.renderFormItem(key, item)
+                          }
+                        })
+                      }
+                    </div>
+                  </div>
+                }
+              })
+            }
+          </div>
+          <div class="right-btn">
+            {!this.isDetail ? <span>
+              <el-button type="primary" onClick={this.save}>保存</el-button>
+              <el-button onClick={() => { this.isDetail = true }}>取消</el-button>
+            </span>
+              : <el-button type="primary" onClick={() => { this.isDetail = false }}>编辑</el-button>
+            }
+            {
+              // <el-button type="primary" onClick={this.goList}>goList</el-button>
+            }
+          </div>
+        </div>
+        { this.renderModal()}
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+    height: 100%;
+    display: flex;
+}
+.left{
+    background-color: var(--epx-bg-card);
+    width: 280px;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10px 0;
+}
+.right{
+    width: calc(100% - 290px);
+    height: 100%;
+    margin-left: 10px;
+}
+.btn{
+    padding: 10px 20px 20px;
+}
+.component-list{
+    max-height: calc(100% - 80px);
+    overflow: auto;
+}
+.component-list-item{
+    padding: 10px 20px;
+    cursor: pointer;
+    color: var(--epx-text);
+    // border-bottom: 1px solid var(--epx-border);
+    display: flex;
+    justify-content: space-between;
+    i{
+      color: red;
+      visibility: hidden;
+    }
+}
+.component-list-item:hover{
+    @include bg_color_primary(0.2);
+    @include font_color_primary;
+    i{
+      visibility: visible
+    }
+}
+.component-list-item.active {
+    @include bg_color_primary(0.2);
+    @include font_color_primary;
+}
+.component-setting-container{
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+.right-btn{
+    padding: 10px;
+    text-align: center;
+}
+.component-setting-item{
+    background-color: var(--epx-bg-card);
+    margin-bottom: 20px;
+}
+.component-setting{
+    display: flex;
+    width: 50%;
+    padding: 10px;
+    align-items: baseline;
+}
+.component-setting-content{
+    padding: 10px;
+    display: flex;
+    flex-wrap: wrap;
+}
+.component-setting__label{
+    width: 128px;
+    color: var(--epx-text);
+    line-height: 22px;
+    padding: 7px;
+}
+.epx-visual-component__form-item--font{
+    .epx-visual-config-font{
+        display: none;
+      }
+}
+.epx-visual-component__form-item--opened{
+     .epx-visual-component__form-item-fold-icon {
+        transform: rotate(90deg);
+      }
+      .epx-visual-config-font{
+        display: block;
+      }
+}
+</style>