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

package/src/views/match/fieldMatch.vue

@@ -0,0 +1,734 @@
+
+<script>
+// @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
+import { mapGetters } from 'vuex'
+import EntitySubList from '@epxing/components/src/entity-sub-list'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-field-match',
+  setField: false,
+  extends: EntitySubList,
+  data () {
+    return {
+      matchMode: [],
+      sourceField: [],
+      sourceEntity: '',
+      targetEntity: '',
+      entityMatchIds: '',
+      showSourceFieldPopover: false,
+      filterText: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ])
+  },
+  watch: {
+    filterText: {
+      handler (v) {
+        this.$refs.sourceFieldTree.filter(v)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getField (fieldId, arr = this.sourceField) {
+      for (const item of arr) {
+        if (item.id === fieldId) {
+          return item
+        } else if (item.children && item.children.length > 0) {
+          const field = this.getField(fieldId, item.children)
+          if (field) return field
+        }
+      }
+    },
+    addTargetField () {
+      this.$createPage({
+        component: 'match-add-target-field',
+        metaId: 'FM_ATTRIBUTE',
+        entityMeta: this.$metaId,
+        // metaId: this.targetEntity,
+        openType: '2',
+        parentId: this.parentId,
+        targetEntity: this.targetEntity,
+        selectedField: this.data.map(item => item.TARGET_FIELD),
+        title: '添加目标字段'
+      })
+    },
+    async setMarchRule (config, row) {
+      const mode = row.MODE
+      const targetFieldId = row.TARGET_FIELD
+      const sourceFieldId = row.SOURCE_FIELD
+      // const targetC = row['TARGET_FIELD#']
+      if (mode !== 'customize' && !sourceFieldId) {
+        this.$message.error('未选择源对象字段')
+        return
+      }
+      // const sourceC = row['SOURCE_FIELD#']
+      // const sourceC = this.getSourceName(row.SOURCE_FIELD)
+      if (mode === 'conversion') { // 映射转换
+        // 获取源对象字段信息
+        const field = this.getField(sourceFieldId)
+        const targetField = this.getField(targetFieldId, this.targetField)
+        if (!['list', 'radio', 'multibox', 'treeList', 'text', 'textarea', 'bigtext'].includes(field.dataType) || !['list', 'radio', 'multibox', 'treeList', 'text', 'textarea', 'bigtext'].includes(targetField.dataType)) {
+          this.$message.error('映射转换只支持文本或选项类型')
+          return
+        }
+        let conversionWay = row.CONVERSION_WAY
+        if (!conversionWay) {
+          conversionWay = 'manual'
+          if (field.dataType === 'list' || field.dataType === 'radio' || field.dataType === 'multibox' || field.dataType === 'treeList') {
+            conversionWay = 'auto'
+            // 获取选项数量
+            let options = this.getCodeById(field.codeKey)
+            if (!options) {
+              options = await this.$store.dispatch({
+                type: 'ADD_LIST',
+                key: field.codeKey
+              })
+            }
+            if (options.length >= 50) {
+              await this.$confirm('检测到当前字段值较多，可能会存在卡顿的情况，建议您采用手动匹配，手动匹配下可以通过输入或选择的方式追加源对象字段值', '温馨提示', {
+                confirmButtonText: '手动匹配',
+                cancelButtonText: '继续自动匹配',
+                cancelButtonClass: 'el-button--danger'
+              }).then(() => {
+                conversionWay = 'manual'
+              }).catch(() => {
+                conversionWay = 'auto'
+              })
+            }
+          }
+          this.$http.update({
+            entityId: this.$metaId,
+            'bean.ID': row.ID,
+            'bean.CONVERSION_WAY': conversionWay
+          })
+        }
+
+        setTimeout(() => {
+          this.$createPage({
+            component: 'match-conversion',
+            metaId: this.$metaId,
+            openType: '2',
+            title: '映射转换',
+            sourceEntity: this.sourceEntity,
+            targetEntity: this.targetEntity,
+            targetFieldId,
+            entityFieldMatchId: row.ID,
+            sourceFieldId,
+            conversionWay
+          })
+        }, 200)
+      } else if (mode === 'customize') { // 自定义规则
+        // 判断是源对象字段选项还是文本，文本进入手工匹配，选项不超过50条进入自动匹配，否则弹出提示
+        //     [ADD_META] (state, data) {
+        //   state.metas = { ...state.metas, ...data }
+        // },
+        this.$createPage({
+          component: 'match-customize',
+          metaId: this.$metaId,
+          openType: '2',
+          title: '自定义规则',
+          sourceEntity: this.sourceEntity,
+          entityFieldMatchId: row.ID,
+          targetFieldId,
+          // targetC,
+          sourceFieldId,
+          paramList: this.$pageParams.paramList
+
+          // sourceC
+        })
+      } else if (mode === 'direct') {
+        this.$message.info('直接匹配不需要操作')
+      } else {
+        this.$message.info('暂未设置匹配规则')
+      }
+    },
+    // getSourceName (sourceFieldId) {
+    //   const item = this.sourceField.find(item => {
+    //     return item.attribute.id === sourceFieldId
+    //   })
+    //   return item.attriLabel || item.attriName
+    // },
+    // 获取关联关系
+    async getLinkAttr  () {
+      const defaultMetaId = this.upPage.$metaId
+      const { metaId: parentMetaId = defaultMetaId, relationId = '' } = this.$configs
+      let relation = null
+      let linkAttr = ''
+      let relationFlag = relationId
+      // 获取父对象
+      let parentMeta = this.metas[parentMetaId]
+      if (!parentMeta) {
+        parentMeta = await this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: parentMetaId
+        })
+      }
+      this.parentMeta = parentMeta
+      if (relationId.includes('#')) {
+        relationFlag = relationId.split('#')[0]
+        relation = parentMeta.getRelationByFlag(relationFlag)
+        const metaId = relation.entityA
+        linkAttr = parentMeta.getLinkAttr(relationFlag)
+        const field = Object.values(parentMeta.attributes).find(item => item.id === linkAttr)
+        if (field) this.parentField = field.name
+        const attribute = Object.values(parentMeta.attributes).find(item => item.id === linkAttr)
+        if (attribute) this.linkAttrDataB = relationFlag.toUpperCase() + '|' + attribute.name
+        relationFlag = relationId.split('#')[1]
+        // 获取关联父对象
+        parentMeta = this.metas[metaId]
+        if (!parentMeta) {
+          parentMeta = await this.$store.dispatch({
+            type: 'ADD_META',
+            metaId: metaId
+          })
+        }
+      } else {
+        const relation = parentMeta.getRelationByFlag(relationFlag)
+        const field = Object.values(parentMeta.attributes).find(item => item.id === relation.linkAttrB)
+        this.parentField = field.name
+      }
+      relation = parentMeta.getRelationByFlag(relationFlag)
+      const metaId = relation.entityA
+      linkAttr = parentMeta.getLinkAttr(relationFlag)
+      const parentAttr = parentMeta.relatedEntitys.find(item => item.entityA === metaId)
+      const keyAttribute = parentMeta.getKeyAttribute()
+      if (parentAttr.linkAttrB && parentAttr.linkAttrB !== keyAttribute.id && relationId.includes('#')) {
+        const flag = relationId.split('#')[0]
+        const field = Object.values(parentMeta.attributes).find(item => item.id === parentAttr.linkAttrB)
+        this.parentField = flag.toUpperCase() + '|' + field.name
+      }
+      // 获取当前对象
+      let meta = this.metas[metaId]
+      if (!meta) {
+        meta = await this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: metaId
+        })
+      }
+      this.configs.metaId = metaId
+      const attribute = Object.values(meta.attributes).find(item => item.id === linkAttr) || {}
+      this.linkAttrData = attribute.name
+      if (!this.formData[this.parentField] && this.linkAttrDataB) {
+        this.linkAttrData = this.linkAttrDataB
+        this.parentField = null
+      }
+      this.getMatchMode()
+      this.loadFinish = true
+    },
+
+    getMatchMode () {
+      this.$http.getCodes({
+        key: this.$meta.getAttribute('MODE').codeKey || 'FM_FIELD_TRANSFER_MODE',
+        status: 'on'
+      })
+        .then(data => {
+          this.matchMode = data
+        })
+    },
+    getSourceField () {
+      this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: this.sourceEntity,
+        relationSort: '2,3'
+      })
+        .then(data => {
+          if (data) {
+            this.defaultExpandKeys = [data[0].code]
+            data[0].isMain = true
+            const formatData = (arr, parentText, parent) => {
+              arr.forEach((item, index) => {
+                item.disabled = item.type === 'meta'
+                if (parentText) item.linkText = parentText + '/' + item.text
+                if (parent) item.parentField = parent
+                if (item.children) formatData(item.children, !item.isMain ? item.linkText || item.text : '', !item.isMain ? item.id : '')
+              })
+            }
+            formatData(data)
+            this.sourceField = data
+          }
+        })
+    },
+    getTargetField () {
+      this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: this.targetEntity,
+        relationSort: '2,3'
+      })
+        .then(data => {
+          if (data) {
+            const formatData = (arr, parentText, parent) => {
+              arr.forEach((item, index) => {
+                item.disabled = item.type === 'meta'
+                if (parentText) item.linkText = parentText + '/' + item.text
+                if (parent) item.parentField = parent
+                if (item.children) formatData(item.children, !item.isMain ? item.linkText || item.text : '', !item.isMain ? item.id : '')
+              })
+            }
+            formatData(data)
+            this.targetField = data
+          }
+        })
+    },
+    selectionChange (selection, row) {
+      this.selectionIds = [...selection.map(item => item.ID)]
+    },
+    updateFieldRow (field, id, value) {
+      const params = {
+        entityId: this.$metaId,
+        'bean.ID': id
+      }
+      params[`bean.${field}`] = value
+      this.$http.update(params)
+    },
+    updateField (id, props) {
+      if (!props) return
+      const params = {
+        entityId: this.$metaId,
+        'bean.ID': id
+      }
+      for (const key in props) {
+        params[`bean.${key}`] = props[key]
+      }
+      this.$http.update(params)
+    },
+    selectSourceField (row, e) {
+      this.showSourceFieldPopover = true
+      this.activeRow = row
+      e.stopPropagation()
+      if (this.showSourceFieldPopover !== false) {
+        let elem = e.target
+        while (!(elem.className && elem.className.split(' ').includes('el-table__cell'))) {
+          elem = elem.offsetParent
+        }
+        this.$nextTick(() => {
+          let top = elem.offsetTop + this.$refs.table.$el.offsetTop + 100
+          if (this.$refs.table.$el.offsetTop + this.$refs.table.$el.offsetHeight < top + this.$refs.popover.popperElm.offsetHeight) {
+            top = elem.offsetTop + this.$refs.table.$el.offsetTop - this.$refs.popover.popperElm.offsetHeight + 50
+          }
+          this.$refs.popover.popperElm.style.top = top + 'px'
+          this.$refs.popover.popperElm.style.left = elem.offsetLeft + 'px'
+        })
+      }
+    },
+    setSourceField (node) {
+      if (node.type !== 'meta') {
+        this.activeRow.SOURCE_FIELD = node.id
+        this.activeRow.SOURCE_FIELD_CODE = node.linkCode || node.code
+        this.activeRow.SOURCE_FIELD_NAME = node.linkText || node.text
+        this.activeRow['SOURCE_FIELD#'] = node.linkText || node.text
+        this.updateField(this.activeRow.ID, { SOURCE_FIELD: this.activeRow.SOURCE_FIELD, SOURCE_FIELD_CODE: this.activeRow.SOURCE_FIELD_CODE, SOURCE_FIELD_NAME: this.activeRow.SOURCE_FIELD_NAME })
+        this.showSourceFieldPopover = false
+      }
+    },
+    deleteSourceField (row) {
+      row.SOURCE_FIELD = ''
+      row.SOURCE_FIELD_CODE = ''
+      row.SOURCE_FIELD_NAME = ''
+      row['SOURCE_FIELD#'] = ''
+      this.updateField(row.ID, { SOURCE_FIELD: row.SOURCE_FIELD, SOURCE_FIELD_CODE: row.SOURCE_FIELD_CODE, SOURCE_FIELD_NAME: row.SOURCE_FIELD_NAME })
+    },
+    closePopup () {
+      this.showSourceFieldPopover = false
+    },
+    filterNode (value, data) {
+      console.log(value)
+      if (!value) return true
+      return data.text && data.text.indexOf(value) !== -1
+    },
+    renderTargetField (field) {
+      return {
+        default: ({ row }) => {
+          return (
+            <span>{row.TARGET_FIELD_NAME || row['TARGET_FIELD#']}</span>
+          )
+        }
+      }
+    },
+    renderSourceField (field) {
+      return {
+        default: ({ row }) => {
+          return (
+            <el-input class="select__input" modelValue={row.SOURCE_FIELD_NAME || row['SOURCE_FIELD#']} clearable suffix-icon="el-icon-search" size="default" placeholder="请选择" onClick={this.selectSourceField.bind(this, row)} onClear={this.deleteSourceField.bind(this, row)}></el-input>
+          )
+        }
+      }
+    },
+    renderSourceFieldPopover () {
+      return (
+        <el-popover ref="popover" trigger="manual" v-model:visible={this.showSourceFieldPopover} tabindex={1}>
+          <div class="scope-opera__popper" onClick={e => e.stopPropagation()}>
+            <el-input suffix-icon="el-icon-search" size="small" placeholder="请输入字段名称筛选" v-model={this.filterText}></el-input>
+            <el-tree
+              ref={captureRef(this, 'sourceFieldTree')}
+              data={this.sourceField}
+              node-key="id"
+              filter-node-method={this.filterNode}
+              onNodeClick={node => this.setSourceField(node)}
+              v-slots={{
+                default: ({ node, data }) => <span xxxx>{data.text}</span>
+              }}
+            >
+            </el-tree>
+          </div>
+        </el-popover>
+      )
+    },
+    renderMode (field) {
+      return {
+        default: ({ row }) => {
+          return (
+            <el-select v-model={row.MODE} placeholder="请选择" onChange={this.updateFieldRow.bind(this, 'MODE', row.ID)}>
+              {
+                this.matchMode.map((mode) => {
+                  return (
+                    <el-option label={mode.name} key={mode.id} value={mode.code}></el-option>
+                  )
+                })
+              }
+            </el-select>
+          )
+        }
+      }
+    },
+    renderSyncKey (field) {
+      return {
+        default: ({ row }) => {
+          return (
+            <el-switch
+              v-model={row.SYNC_KEY}
+              onChange={this.updateFieldRow.bind(this, 'SYNC_KEY', row.ID)}
+              active-value='1'
+              inactive-value='0'
+            >
+            </el-switch>
+          )
+        }
+      }
+    },
+    renderField (field) {
+      return {
+        default: ({ row }) => {
+          return (
+            <font color={field.color}>
+              { row[field.attriName + '#'] || row[field.attriName] }
+            </font>
+          )
+        }
+      }
+    },
+    /**
+     * 重新加载数据
+     */
+    reloadData () {
+      this.getData(null, data => {
+        // 如果selection里没有 旧删除
+        const existSelection = []
+        const dataMap = {}
+        data.forEach(dataItem => {
+          dataMap[dataItem[this.$metaKey]] = dataItem
+        })
+        this.selection.forEach(item => {
+          if (dataMap[item[this.$metaKey]]) existSelection.push(dataMap[item[this.$metaKey]])
+        })
+        if (!this.$_.isEqual(this.selection, existSelection)) {
+          this.$refs.table.clearSelection()
+          existSelection.forEach(item => {
+            this.$refs.table.toggleRowSelection(item, true)
+          })
+          this.selection = existSelection
+        }
+      })
+    },
+    renderTable () {
+      const { pageFlag, operateColumnFlag, operateColumnWidth, operateColumnPosition, operateColumnLocked, multiSelectColumnFlag, serialColumnFlag, columnOperates = [], sortable } = this.$configs
+      return (
+        <div>
+          <el-table
+            class="list-table"
+            ref="table"
+            rowKey={this.$metaKey}
+            border={true}
+            data={this.data}
+            onSelectionChange={this.selectionChange}
+            onRowDblclick={v => this.viewEntity({}, v)}
+            onSortChange={this.sortChange}
+          >
+            {/* 拖拽排序列 */}
+            <el-table-column
+              width="40"
+              v-slots={{
+                default: () => <i class="epx-entity-list__drag-icon epx-icon-tuozhuai" onMouseover={() => { this.dragStart = true }} onMouseout={() => { this.dragStart = false }}></i>,
+                header: () => <span></span>
+              }}
+            >
+            </el-table-column>
+            {/* 选择列 */}
+            {
+              multiSelectColumnFlag && (
+                <el-table-column
+                  type="selection"
+                  width="55"
+                  reserve-selection={true}
+                >
+                </el-table-column>
+              )
+            }
+            {/* 序号列 */}
+            {
+              serialColumnFlag && (
+                <el-table-column
+                  width="55"
+                  label="序号"
+                  type="index"
+                  index={index => (this.currentPage - 1) * this.pageSize + index + 1}
+                  fixed={this.lockedIndex !== -1}
+                >
+                </el-table-column>
+              )
+            }
+            {/* 操作列 */}
+            {
+              operateColumnFlag !== false && columnOperates.length > 0 && operateColumnPosition !== 'end' && (
+                <el-table-column width={operateColumnWidth} fixed={operateColumnLocked || this.lockedIndex !== -1 ? 'left' : false} label="操作" v-slots={this.renderColumnOperates()}></el-table-column>
+              )
+            }
+            {
+              this.listFields.map((field, index) => {
+                if (field.attriName === 'TARGET_FIELD') {
+                  return (
+                    <el-table-column prop={field.attriName} {...field} min-width={field.width || 120} sortable={sortable} resizable show-overflow-tooltip label={field.attriLabel} fixed={index <= this.lockedIndex} v-slots={this.renderTargetField(field)}>
+                    </el-table-column>
+                  )
+                } else if (field.attriName === 'SOURCE_FIELD') {
+                  return (
+                    <el-table-column prop={field.attriName} {...field} min-width={field.width || 120} sortable={sortable} resizable label={field.attriLabel} fixed={index <= this.lockedIndex} v-slots={this.renderSourceField(field)}>
+                    </el-table-column>
+                  )
+                } else if (field.attriName === 'MODE') {
+                  return (
+                    <el-table-column prop={field.attriName} {...field} min-width={field.width || 120} sortable={sortable} resizable label={field.attriLabel} fixed={index <= this.lockedIndex} v-slots={this.renderMode(field)}>
+                    </el-table-column>
+                  )
+                } else if (field.attriName === 'SYNC_KEY') {
+                  return (
+                    <el-table-column prop={field.attriName} {...field} min-width={field.width || 120} sortable={sortable} resizable show-overflow-tooltip label={field.attriLabel} fixed={index <= this.lockedIndex} v-slots={this.renderSyncKey(field)}>
+                    </el-table-column>
+                  )
+                } else if (field.state !== 'HIDDEN') {
+                  return (
+                    <el-table-column prop={field.attriName} {...field} min-width={field.width || 120} sortable={sortable} resizable show-overflow-tooltip label={field.attriLabel} fixed={index <= this.lockedIndex} v-slots={this.renderField(field)}>
+                    </el-table-column>
+                  )
+                }
+              })
+            }
+            {/* 操作列 */}
+            {
+              operateColumnFlag !== false && columnOperates.length > 0 && operateColumnPosition === 'end' && (
+                <el-table-column width={operateColumnWidth} fixed={operateColumnLocked ? 'right' : false} label="操作" v-slots={this.renderColumnOperates()}></el-table-column>
+              )
+            }
+          </el-table>
+          {/* 分页 */}
+          {
+            pageFlag && (
+              <div class="pagination">
+                <el-pagination
+                  v-loading={this.loading}
+                  currentPage={this.currentPage}
+                  pageSizes={[10, 15, 20, 30, 50, 100, 200]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes,total"
+                  total={this.total}
+                  onSizeChange={this.sizeChange}
+                  onCurrentChange={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+        </div>
+      )
+    }
+  },
+  created () {
+    this.entityMatchIds = this.$query.id
+    const { SOURCE_ENTITY, TARGET_ENTITY } = this.formData
+    this.sourceEntity = SOURCE_ENTITY || this.$query.SOURCE_ENTITY
+    this.targetEntity = TARGET_ENTITY || this.$query.TARGET_ENTITY
+    this.renderComponents.unshift(this.renderSubAdd, this.renderSourceFieldPopover)
+    // this.getMatchMode()
+    this.getSourceField()
+    this.getTargetField()
+    // this.getEntityFields()
+  },
+  mounted () {
+    window.addEventListener('click', this.closePopup)
+  },
+  beforeUnmount () {
+    window.removeEventListener('click', this.closePopup)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px;
+.list-container {
+  background: var(--epx-bg-card);
+  padding:10px;
+  &.fold {
+    .list-operates {
+      display: none;
+    }
+    .list-table {
+      display: none;
+    }
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+.list-table {
+   // 无边框
+  &.no-border {
+     border: 0;
+    border-top: dashed 1px var(--epx-border);
+    &::after {
+      display: none
+    }
+
+      :deep(th.is-leaf),
+      :deep(td) {
+       border-right: 0
+      }
+
+  }
+}
+.list-operates {
+  padding: $paddingSize 0;
+  display: flex;
+  justify-content: space-between;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.column-operates {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid var(--epx-border);
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--epx-radius-base);
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.column-operate-btn {
+  font-size: var(--epx-font-size-base);
+}
+.pagination {
+  padding: $paddingSize 0;
+
+    :deep(.el-select) {
+      margin-left: 24px;
+    }
+    :deep(.el-pagination__total) {
+      float: right;
+    }
+
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  white-space: pre-wrap;
+  background: var(--epx-bg-card);
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: var(--epx-border);
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: var(--epx-font-size-base);
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.scope-opera__popper {
+  max-height: 300px;
+  overflow: auto;
+}
+.select__input {
+  width: 200px;
+}
+</style>