fix: eslint

src/components/packages/formEditor/components/FormTypes/index.js

@@ -2,9 +2,7 @@ import _ from 'lodash'
 const importModules = import.meta.glob('./*/*.vue', { eager: true })
 const modules = {}
 _.forIn(importModules, (func, path) => {
-  modules[_.split(path, '/')[1]] = func.default
+	modules[_.split(path, '/')[1]] = func.default
 })
 const year = 1958
-export {
-  year
-}
+export { year }

src/components/packages/region/Region.js

@@ -1,76 +1,70 @@
 class Region {
-  constructor (data, config) {
-    this.data = data
-    this.config = config
-    this.municipality = ['110000', '120000', '310000', '500000']
-  }
+	constructor(data, config) {
+		this.data = data
+		this.config = config
+		this.municipality = ['110000', '120000', '310000', '500000']
+	}
 
-  getProvince () {
-    const result = []
-    const {
-      province_list: province
-    } = this.data
-    for (const key in province) {
-      result.push({
-        label: province[key],
-        value: key
-      })
-    }
-    return result
-  }
+	getProvince() {
+		const result = []
+		const { province_list: province } = this.data
+		for (const key in province) {
+			result.push({
+				label: province[key],
+				value: key
+			})
+		}
+		return result
+	}
 
-  getCity (code) {
-    const result = []
-    const {
-      city_list: city
-    } = this.data
-    for (const key in city) {
-      if (code.slice(0, 2) === key.slice(0, 2)) {
-        result.push({
-          label: city[key],
-          value: key
-        })
-      }
-    }
-    return result
-  }
+	getCity(code) {
+		const result = []
+		const { city_list: city } = this.data
+		for (const key in city) {
+			if (code.slice(0, 2) === key.slice(0, 2)) {
+				result.push({
+					label: city[key],
+					value: key
+				})
+			}
+		}
+		return result
+	}
 
-  getCounty (code) {
-    const result = []
-    const {
-      county_list: county
-    } = this.data
-    for (const key in county) {
-      if (code.slice(0, 4) === key.slice(0, 4)) {
-        result.push({
-          label: county[key],
-          value: key
-        })
-      }
-    }
-    return result
-  }
+	getCounty(code) {
+		const result = []
+		const { county_list: county } = this.data
+		for (const key in county) {
+			if (code.slice(0, 4) === key.slice(0, 4)) {
+				result.push({
+					label: county[key],
+					value: key
+				})
+			}
+		}
+		return result
+	}
 
-  getAll () {
-    return this.getProvince().map(node0 => {
-      if (this.config.selectType > 1) {
-        if (this.config.isFilter && this.municipality.includes(node0.value)) {
-          node0.children = this.getCounty(String(Number(node0.value) + (node0.value === '500000' ? 200 : 100)))
-        } else {
-          const children = this.getCity(node0.value)
-          node0.children = children.map((node1) => {
-            if (this.config.selectType > 2) {
-              const children = this.getCounty(node1.value)
-              if (children.length) {
-                node1.children = children
-              }
-            }
-            return node1
-          })
-        }
-      }
-      return node0
-    })
-  }
+	getAll() {
+		return this.getProvince().map(node0 => {
+			if (this.config.selectType > 1) {
+				if (this.config.isFilter && this.municipality.includes(node0.value)) {
+					node0.children = this.getCounty(String(Number(node0.value) + (node0.value === '500000' ? 200 : 100)))
+				} else {
+					const children = this.getCity(node0.value)
+					node0.children = children.map(node1 => {
+						if (this.config.selectType > 2) {
+							const children = this.getCounty(node1.value)
+							if (children.length) {
+								node1.children = children
+							}
+						}
+						return node1
+					})
+				}
+			}
+			return node0
+		})
+	}
 }
 export default Region

src/components/packages/region/index.js

@@ -1,5 +1,3 @@
 import './style/index.js'
 import EverrightRegion from './index.vue'
-export {
-  EverrightRegion
-}
+export { EverrightRegion }

src/components/packages/region/index.vue

@@ -1,5 +1,19 @@
 <script>
-import { defineProps, ref, reactive, computed, provide, getCurrentInstance, watch, nextTick, onMounted, isReactive, readonly, toRefs, unref } from 'vue'
+import {
+	defineProps,
+	ref,
+	reactive,
+	computed,
+	provide,
+	getCurrentInstance,
+	watch,
+	nextTick,
+	onMounted,
+	isReactive,
+	readonly,
+	toRefs,
+	unref
+} from 'vue'
 import { ClickOutside as vClickOutside } from 'element-plus'
 import hooks from '@ER/hooks'
 import _ from 'lodash-es'
@@ -8,28 +22,28 @@ import { areaList } from '@vant/area-data'
 import Region from './Region'
 import Store from './store'
 export default {
-  name: 'EverrightRegion'
+	name: 'EverrightRegion'
 }
 </script>
 <script setup>
 const props = defineProps({
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  modelValue: {
-    type: Array
-  },
-  placeholder: {
-    type: String
-  }
+	multiple: {
+		type: Boolean,
+		default: false
+	},
+	modelValue: {
+		type: Array
+	},
+	placeholder: {
+		type: String
+	}
 })
 const emit = defineEmits(['update:modelValue', 'change'])
 let inputInitialHeight = 0
 const pressDeleteCount = 0
 const region = new Region(areaList, {
-  isFilter: true,
-  selectType: 3
+	isFilter: true,
+	selectType: 3
 })
 const tooltipRef = ref()
 const tagWrapper = ref()
@@ -41,398 +55,379 @@ const filtering = ref(false)
 const presentTags = ref([])
 const inputHover = ref(false)
 const popperPaneRef = computed(() => {
-  return _.get(unref(tooltipRef), 'popperRef.contentRef', '')
+	return _.get(unref(tooltipRef), 'popperRef.contentRef', '')
 })
 const store = new Store(region.getAll(), {
-  value: 'value',
-  label: 'label',
-  children: 'children',
-  disabled: 'disabled',
-  multiple: props.multiple
+	value: 'value',
+	label: 'label',
+	children: 'children',
+	disabled: 'disabled',
+	multiple: props.multiple
 })
 const state = reactive({
-  Namespace: 'region',
-  menus: [{
-    label: '全部',
-    name: 'all',
-    nodes: store.getNodes()
-  }],
-  popperVisible: false,
-  activeName: 'all',
-  value0: '',
-  checkedValue: []
+	Namespace: 'region',
+	menus: [
+		{
+			label: '全部',
+			name: 'all',
+			nodes: store.getNodes()
+		}
+	],
+	popperVisible: false,
+	activeName: 'all',
+	value0: '',
+	checkedValue: []
 })
 const ns = hooks.useNamespace('Main', state.Namespace)
 provide('Everright', {
-  state
+	state
 })
-const getFlattedNodes = (leafOnly) => {
-  return store.getFlattedNodes(leafOnly)
+const getFlattedNodes = leafOnly => {
+	return store.getFlattedNodes(leafOnly)
 }
-const getCheckedNodes = (leafOnly) => {
-  return getFlattedNodes(leafOnly).filter((node) => node.checked !== false)
+const getCheckedNodes = leafOnly => {
+	return getFlattedNodes(leafOnly).filter(node => node.checked !== false)
 }
 const calculateCheckedValue = (isFire = true) => {
-  const newNodes = getCheckedNodes(false)
-  state.checkedValue = newNodes
-  if (!multiple.value) {
-    if (state.checkedValue.length) {
-      state.value0 = state.checkedValue[0].calcText('/')
-    } else {
-      state.value0 = ''
-    }
-  } else {
-    state.value0 = state.checkedValue.length ? ' ' : ''
-  }
-  isFire && emit('update:modelValue', newNodes.map(e => e.value))
+	const newNodes = getCheckedNodes(false)
+	state.checkedValue = newNodes
+	if (!multiple.value) {
+		if (state.checkedValue.length) {
+			state.value0 = state.checkedValue[0].calcText('/')
+		} else {
+			state.value0 = ''
+		}
+	} else {
+		state.value0 = state.checkedValue.length ? ' ' : ''
+	}
+	isFire &&
+		emit(
+			'update:modelValue',
+			newNodes.map(e => e.value)
+		)
 }
 const multiple = computed(() => !!props.multiple)
 const clearBtnVisible = computed(() => {
-  // return inputHover.value || !!state.checkedValue.length
-  if (
-    filtering.value ||
-    !inputHover.value
-  ) { return false }
+	// return inputHover.value || !!state.checkedValue.length
+	if (filtering.value || !inputHover.value) {
+		return false
+	}
 
-  return !!state.checkedValue.length
+	return !!state.checkedValue.length
 })
-const genTag = (node) => {
-  return {
-    node,
-    key: node.uid,
-    text: node.calcText('/'),
-    hitState: false,
-    closable: !node.isDisabled,
-    isCollapseTag: false
-  }
+const genTag = node => {
+	return {
+		node,
+		key: node.uid,
+		text: node.calcText('/'),
+		hitState: false,
+		closable: !node.isDisabled,
+		isCollapseTag: false
+	}
 }
 const calculatePresentTags = () => {
-  if (!multiple.value) return
+	if (!multiple.value) return
 
-  const nodes = state.checkedValue
-  const tags = []
+	const nodes = state.checkedValue
+	const tags = []
 
-  const allTags = []
-  nodes.forEach((node) => allTags.push(genTag(node)))
-  allPresentTags.value = allTags
+	const allTags = []
+	nodes.forEach(node => allTags.push(genTag(node)))
+	allPresentTags.value = allTags
 
-  if (nodes.length) {
-    const [first, ...rest] = nodes
-    const restCount = rest.length
+	if (nodes.length) {
+		const [first, ...rest] = nodes
+		const restCount = rest.length
 
-    tags.push(genTag(first))
+		tags.push(genTag(first))
 
-    if (restCount) {
-      tags.push({
-        key: -1,
-        text: `+ ${restCount}`,
-        closable: false,
-        isCollapseTag: true
-      })
-    }
-  }
+		if (restCount) {
+			tags.push({
+				key: -1,
+				text: `+ ${restCount}`,
+				closable: false,
+				isCollapseTag: true
+			})
+		}
+	}
 
-  presentTags.value = tags
+	presentTags.value = tags
 }
 const handleEvent = (type, node, index, checked) => {
-  const {
-    multiple
-  } = props
-  if (type === 'click') {
-    // eslint-disable-next-line
+	const { multiple } = props
+	if (type === 'click') {
+		// eslint-disable-next-line
     if (index === -1 || node.isLeaf || !node.isLeaf && node.level === index) {
-    } else {
-      state.menus.forEach((e, i) => {
-        if (i > index + 1) {
-          state.menus[i] = []
-        }
-      })
-      state.menus[index + 1] = {
-        label: node.label,
-        name: node.value,
-        // nodes: [node].concat(node.children)
-        nodes: node.children
-      }
-      state.activeName = node.value
-    }
-  }
-  if (type === 'checkbox') {
-    if (checked === node.checked) return
-    if (props.multiple) {
-      node.doCheck(checked)
-    } else {
-      getCheckedNodes().forEach((e) => {
-        e.doCheck(false)
-      })
-      node.doCheck(checked)
-    }
-    calculateCheckedValue()
-  }
+		} else {
+			state.menus.forEach((e, i) => {
+				if (i > index + 1) {
+					state.menus[i] = []
+				}
+			})
+			state.menus[index + 1] = {
+				label: node.label,
+				name: node.value,
+				// nodes: [node].concat(node.children)
+				nodes: node.children
+			}
+			state.activeName = node.value
+		}
+	}
+	if (type === 'checkbox') {
+		if (checked === node.checked) return
+		if (props.multiple) {
+			node.doCheck(checked)
+		} else {
+			getCheckedNodes().forEach(e => {
+				e.doCheck(false)
+			})
+			node.doCheck(checked)
+		}
+		calculateCheckedValue()
+	}
 }
-const togglePopperVisible = (visible) => {
-  if (visible !== state.popperVisible) {
-    state.popperVisible = visible
-    if (!visible) {
-      hideSuggestionPanel()
-      if (multiple.value) {
-        searchInputValue.value = ''
-      } else {
-        state.checkedValue[0] && (state.value0 = state.checkedValue[0].calcText('/'))
-      }
-    }
-  }
+const togglePopperVisible = visible => {
+	if (visible !== state.popperVisible) {
+		state.popperVisible = visible
+		if (!visible) {
+			hideSuggestionPanel()
+			if (multiple.value) {
+				searchInputValue.value = ''
+			} else {
+				state.checkedValue[0] && (state.value0 = state.checkedValue[0].calcText('/'))
+			}
+		}
+	}
 }
 const updatePopperPosition = () => {
-  nextTick(() => {
-    tooltipRef.value.updatePopper()
-  })
+	nextTick(() => {
+		tooltipRef.value.updatePopper()
+	})
 }
-const deleteTag = (tag) => {
-  const node = tag.node
-  node.doCheck(false)
-  calculateCheckedValue()
+const deleteTag = tag => {
+	const node = tag.node
+	node.doCheck(false)
+	calculateCheckedValue()
 }
-const inCheckedPath = (node) => {
-  return state.checkedValue.some(e => _.intersection(node.pathValues, e.pathValues).length === node.level)
+const inCheckedPath = node => {
+	return state.checkedValue.some(e => _.intersection(node.pathValues, e.pathValues).length === node.level)
 }
 const updateStyle = () => {
-  const inputInner = input.value.input
-  const tagWrapperEl = tagWrapper.value
-  if (tagWrapperEl) {
-    const { offsetHeight } = tagWrapperEl
-    const height =
-      presentTags.value.length > 0
-        ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`
-        : `${inputInitialHeight}px`
-    inputInner.style.height = height
-    updatePopperPosition()
-  }
+	const inputInner = input.value.input
+	const tagWrapperEl = tagWrapper.value
+	if (tagWrapperEl) {
+		const { offsetHeight } = tagWrapperEl
+		const height = presentTags.value.length > 0 ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px` : `${inputInitialHeight}px`
+		inputInner.style.height = height
+		updatePopperPosition()
+	}
 }
 const handleClear = () => {
-  getCheckedNodes().forEach((e) => {
-    e.doCheck(false)
-  })
-  calculateCheckedValue()
-  togglePopperVisible(false)
+	getCheckedNodes().forEach(e => {
+		e.doCheck(false)
+	})
+	calculateCheckedValue()
+	togglePopperVisible(false)
 }
-const searchKeyword = computed(() =>
-  multiple.value ? searchInputValue.value : state.value0
-)
+const searchKeyword = computed(() => (multiple.value ? searchInputValue.value : state.value0))
 const filterMethod = (node, keyword) => {
-  return node.text.includes(keyword)
+	return node.text.includes(keyword)
 }
 const calculateSuggestions = () => {
-  const res = getFlattedNodes(false).filter((node) => {
-    if (node.isDisabled) return false
-    node.calcText('/')
-    return filterMethod(node, searchKeyword.value.trim())
-  })
-  filtering.value = true
-  suggestions.value = res
-  updatePopperPosition()
+	const res = getFlattedNodes(false).filter(node => {
+		if (node.isDisabled) return false
+		node.calcText('/')
+		return filterMethod(node, searchKeyword.value.trim())
+	})
+	filtering.value = true
+	suggestions.value = res
+	updatePopperPosition()
 }
 const handleFilter = _.debounce(() => {
-  const { value } = searchKeyword
+	const { value } = searchKeyword
 
-  if (!value) return
-  calculateSuggestions()
+	if (!value) return
+	calculateSuggestions()
 })
 const hideSuggestionPanel = () => {
-  filtering.value = false
+	filtering.value = false
 }
 const handleInput = (val, e) => {
-  state.popperVisible.value && togglePopperVisible(true)
+	state.popperVisible.value && togglePopperVisible(true)
 
-  if (e && e.isComposing) return
-  val.trim() ? handleFilter() : hideSuggestionPanel()
+	if (e && e.isComposing) return
+	val.trim() ? handleFilter() : hideSuggestionPanel()
 }
-watch(() => props.modelValue, (newVal) => {
-  // const nodes = props.multiple ? newVal : [newVal]
-  const nodes = newVal
-  if (nodes.length) {
-    nodes.forEach((e) => {
-      store.getNodeByValue(e).doCheck(true)
-    })
-  } else {
-    getCheckedNodes().forEach((e) => {
-      e.doCheck(false)
-    })
-  }
-  calculateCheckedValue(false)
-  calculatePresentTags()
-}, { immediate: true, deep: true })
-watch(presentTags, () => {
-  nextTick(() => updateStyle())
-}, { immediate: true })
+watch(
+	() => props.modelValue,
+	newVal => {
+		// const nodes = props.multiple ? newVal : [newVal]
+		const nodes = newVal
+		if (nodes.length) {
+			nodes.forEach(e => {
+				store.getNodeByValue(e).doCheck(true)
+			})
+		} else {
+			getCheckedNodes().forEach(e => {
+				e.doCheck(false)
+			})
+		}
+		calculateCheckedValue(false)
+		calculatePresentTags()
+	},
+	{ immediate: true, deep: true }
+)
+watch(
+	presentTags,
+	() => {
+		nextTick(() => updateStyle())
+	},
+	{ immediate: true }
+)
 onMounted(() => {
-  const inputEl = input.value.$el
-  inputInitialHeight = inputEl.offsetHeight
+	const inputEl = input.value.$el
+	inputInitialHeight = inputEl.offsetHeight
 })
 </script>
 <template>
-  <div
-    :class="[ns.b()]"
-  >
-    <el-tooltip
-      ref="tooltipRef"
-      :popper-class="[ns.e('dropdown')]"
-      effect="light"
-      placement="bottom-start"
-      :visible="state.popperVisible"
-    >
-      <div
-        :class="[ns.e('regin')]"
-        v-click-outside:[popperPaneRef]="() => togglePopperVisible(false)"
-        @mouseenter="inputHover = true"
-        @mouseleave="inputHover = false"
-        @click="() => togglePopperVisible(true)"
-      >
-        <el-input
-          :readonly="multiple"
-          ref="input"
-          :placeholder="searchInputValue ? '' : placeholder"
-          v-model="state.value0"
-          @input="handleInput"
-        >
-          <template #suffix>
-            <el-icon
-              v-if="clearBtnVisible"
-              key="clear"
-              :class="[ns.e('icon'), 'icon-circle-close']"
-              @click.stop="handleClear"
-            >
-              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"></path><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"></path></svg>
-            </el-icon>
-            <el-icon
-              v-else
-              key="arrow-down"
-              :class="[
-                ns.e('icon'),
-                'icon-arrow-down',
-                state.popperVisible && ns.e('reverse')
-              ]"
-              @click.stop="togglePopperVisible()"
-            >
-              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path></svg>
-            </el-icon>
-          </template>
-        </el-input>
-        <div v-if="multiple" ref="tagWrapper" :class="ns.e('tagsWrap')">
-          <el-tag
-            v-for="tag in presentTags"
-            :key="tag.key"
-            type="info"
-            size="default"
-            :closable="tag.closable"
-            disable-transitions
-            @close="deleteTag(tag)"
-          >
-            <template v-if="tag.isCollapseTag === false">
-              <span>{{ tag.text }}</span>
-            </template>
-            <template v-else>
-              <el-tooltip
-                :teleported="false"
-                :disabled="state.popperVisible"
-                :fallback-placements="['bottom', 'top', 'right', 'left']"
-                placement="bottom"
-                effect="light"
-              >
-                <template #default>
-                  <span>{{ tag.text }}</span>
-                </template>
-                <template #content>
-                  <div :class="ns.e('collapse-tags')">
-                    <div
-                      v-for="(tag2, idx) in allPresentTags.slice(1)"
-                      :key="idx"
-                      :class="ns.e('collapse-tag')"
-                    >
-                      <el-tag
-                        :key="tag2.key"
-                        class="in-tooltip"
-                        type="info"
-                        size="default"
-                        :closable="tag2.closable"
-                        disable-transitions
-                        @close="deleteTag(tag2)"
-                      >
-                        <span>{{ tag2.text }}</span>
-                      </el-tag>
-                    </div>
-                  </div>
-                </template>
-              </el-tooltip>
-            </template>
-          </el-tag>
-          <input
-            v-model="searchInputValue"
-            type="text"
-            :class="ns.e('search-input')"
-            @input="(e) => handleInput(searchInputValue, e)"
-            @click.stop="togglePopperVisible(true)"
-          />
-        </div>
-      </div>
-      <template #content>
-        <div>
-          <el-tabs v-show="!filtering" v-model="state.activeName" class="demo-tabs">
-            <el-tab-pane v-for="(item, index) in state.menus" :key="item.name" :label="item.label" :name="item.name">
-              <el-scrollbar
-                tag="ul"
-                :wrap-class="ns.e('wrap')"
-                :view-class="ns.e('list')"
-              >
-                <li
-                  v-for="node in item.nodes"
-                  :key="node.value"
-                  :class="[inCheckedPath(node) && ns.is('Selected')]"
-                  @click.stop="() => handleEvent('click', node, index)">
-                  <el-checkbox
-                    :disabled="node.isDisabled"
-                    :model-value="node.checked"
-                    @click.stop
-                    @update:model-value="(val) => handleEvent('checkbox', node, index, val)"
-                  />
-                  <span :class="[ns.e('label')]">{{node.label}}</span>
-                  <template v-if="!node.isLeaf">
-                    <el-icon :class="['arrow-right', ns.e('postfix')]">
-                      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg>
-                    </el-icon>
-                  </template>
-                </li>
-              </el-scrollbar>
-            </el-tab-pane>
-          </el-tabs>
-          <el-scrollbar
-            v-show="filtering"
-            ref="suggestionPanel"
-            tag="ul"
-            :wrap-class="ns.e('wrap')"
-            :view-class="ns.e('list')"
-          >
-            <template v-if="suggestions.length">
-              <li
-                v-for="node in suggestions"
-                :class="[inCheckedPath(node) && ns.is('Selected')]"
-                :key="node.value">
-                <el-checkbox
-                  :disabled="node.isDisabled"
-                  @update:model-value="(val) => handleEvent('checkbox', node, -1, val)"
-                  :model-value="node.checked"
-                  @click.stop
-                />
-                <span :class="[ns.e('label')]">{{node.text}}</span>
-              </li>
-            </template>
-            <slot v-else name="empty">
-              <li class="el-cascader__empty-text">
-                No matching data
-              </li>
-            </slot>
-          </el-scrollbar>
-        </div>
-      </template>
-    </el-tooltip>
-  </div>
+	<div :class="[ns.b()]">
+		<el-tooltip ref="tooltipRef" :popper-class="[ns.e('dropdown')]" effect="light" placement="bottom-start" :visible="state.popperVisible">
+			<div
+				v-click-outside:[popperPaneRef]="() => togglePopperVisible(false)"
+				:class="[ns.e('regin')]"
+				@mouseenter="inputHover = true"
+				@mouseleave="inputHover = false"
+				@click="() => togglePopperVisible(true)"
+			>
+				<el-input ref="input" v-model="state.value0" :readonly="multiple" :placeholder="searchInputValue ? '' : placeholder" @input="handleInput">
+					<template #suffix>
+						<el-icon v-if="clearBtnVisible" key="clear" :class="[ns.e('icon'), 'icon-circle-close']" @click.stop="handleClear">
+							<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+								<path
+									fill="currentColor"
+									d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
+								></path>
+								<path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"></path>
+							</svg>
+						</el-icon>
+						<el-icon
+							v-else
+							key="arrow-down"
+							:class="[ns.e('icon'), 'icon-arrow-down', state.popperVisible && ns.e('reverse')]"
+							@click.stop="togglePopperVisible()"
+						>
+							<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+								<path
+									fill="currentColor"
+									d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+								></path>
+							</svg>
+						</el-icon>
+					</template>
+				</el-input>
+				<div v-if="multiple" ref="tagWrapper" :class="ns.e('tagsWrap')">
+					<el-tag
+						v-for="tag in presentTags"
+						:key="tag.key"
+						type="info"
+						size="default"
+						:closable="tag.closable"
+						disable-transitions
+						@close="deleteTag(tag)"
+					>
+						<template v-if="tag.isCollapseTag === false">
+							<span>{{ tag.text }}</span>
+						</template>
+						<template v-else>
+							<el-tooltip
+								:teleported="false"
+								:disabled="state.popperVisible"
+								:fallback-placements="['bottom', 'top', 'right', 'left']"
+								placement="bottom"
+								effect="light"
+							>
+								<template #default>
+									<span>{{ tag.text }}</span>
+								</template>
+								<template #content>
+									<div :class="ns.e('collapse-tags')">
+										<div v-for="(tag2, idx) in allPresentTags.slice(1)" :key="idx" :class="ns.e('collapse-tag')">
+											<el-tag
+												:key="tag2.key"
+												class="in-tooltip"
+												type="info"
+												size="default"
+												:closable="tag2.closable"
+												disable-transitions
+												@close="deleteTag(tag2)"
+											>
+												<span>{{ tag2.text }}</span>
+											</el-tag>
+										</div>
+									</div>
+								</template>
+							</el-tooltip>
+						</template>
+					</el-tag>
+					<input
+						v-model="searchInputValue"
+						type="text"
+						:class="ns.e('search-input')"
+						@input="e => handleInput(searchInputValue, e)"
+						@click.stop="togglePopperVisible(true)"
+					/>
+				</div>
+			</div>
+			<template #content>
+				<div>
+					<el-tabs v-show="!filtering" v-model="state.activeName" class="demo-tabs">
+						<el-tab-pane v-for="(item, index) in state.menus" :key="item.name" :label="item.label" :name="item.name">
+							<el-scrollbar tag="ul" :wrap-class="ns.e('wrap')" :view-class="ns.e('list')">
+								<li
+									v-for="node in item.nodes"
+									:key="node.value"
+									:class="[inCheckedPath(node) && ns.is('Selected')]"
+									@click.stop="() => handleEvent('click', node, index)"
+								>
+									<el-checkbox
+										:disabled="node.isDisabled"
+										:model-value="node.checked"
+										@click.stop
+										@update:model-value="val => handleEvent('checkbox', node, index, val)"
+									/>
+									<span :class="[ns.e('label')]">{{ node.label }}</span>
+									<template v-if="!node.isLeaf">
+										<el-icon :class="['arrow-right', ns.e('postfix')]">
+											<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+												<path
+													fill="currentColor"
+													d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+												></path>
+											</svg>
+										</el-icon>
+									</template>
+								</li>
+							</el-scrollbar>
+						</el-tab-pane>
+					</el-tabs>
+					<el-scrollbar v-show="filtering" ref="suggestionPanel" tag="ul" :wrap-class="ns.e('wrap')" :view-class="ns.e('list')">
+						<template v-if="suggestions.length">
+							<li v-for="node in suggestions" :key="node.value" :class="[inCheckedPath(node) && ns.is('Selected')]">
+								<el-checkbox
+									:disabled="node.isDisabled"
+									:model-value="node.checked"
+									@update:model-value="val => handleEvent('checkbox', node, -1, val)"
+									@click.stop
+								/>
+								<span :class="[ns.e('label')]">{{ node.text }}</span>
+							</li>
+						</template>
+						<slot v-else name="empty">
+							<li class="el-cascader__empty-text">No matching data</li>
+						</slot>
+					</el-scrollbar>
+				</div>
+			</template>
+		</el-tooltip>
+	</div>
 </template>

src/components/packages/region/node.js

@@ -1,57 +1,49 @@
 import { isFunction } from '@vue/shared'
 const uid = 0
-const isUndefined = (val) => val === undefined
-const calculatePathNodes = (node) => {
-  const nodes = [node]
-  let { parent } = node
+const isUndefined = val => val === undefined
+const calculatePathNodes = node => {
+	const nodes = [node]
+	let { parent } = node
 
-  while (parent) {
-    nodes.unshift(parent)
-    parent = parent.parent
-  }
+	while (parent) {
+		nodes.unshift(parent)
+		parent = parent.parent
+	}
 
-  return nodes
+	return nodes
 }
 class Node {
-  constructor (data, config, parent, root) {
-    const { value: valueKey, label: labelKey, children: childrenKey } = config
-    const childrenData = data[childrenKey]
-    const pathNodes = calculatePathNodes(this)
-    this.level = root ? 0 : parent ? parent.level + 1 : 1
-    this.value = data[valueKey]
-    this.label = data[labelKey]
-    this.pathNodes = pathNodes
-    this.pathValues = pathNodes.map((node) => node.value)
-    this.pathLabels = pathNodes.map((node) => node.label)
-    this.childrenData = childrenData
-    this.children = (childrenData || []).map(
-      (child) => new Node(child, config, this)
-    )
-  }
+	constructor(data, config, parent, root) {
+		const { value: valueKey, label: labelKey, children: childrenKey } = config
+		const childrenData = data[childrenKey]
+		const pathNodes = calculatePathNodes(this)
+		this.level = root ? 0 : parent ? parent.level + 1 : 1
+		this.value = data[valueKey]
+		this.label = data[labelKey]
+		this.pathNodes = pathNodes
+		this.pathValues = pathNodes.map(node => node.value)
+		this.pathLabels = pathNodes.map(node => node.label)
+		this.childrenData = childrenData
+		this.children = (childrenData || []).map(child => new Node(child, config, this))
+	}
 
-  get isDisabled () {
-    const { data, parent, config } = this
-    const { disabled, checkStrictly } = config
-    const isDisabled = isFunction(disabled)
-      ? disabled(data, this)
-      : !!data[disabled]
-    return isDisabled || (!checkStrictly && parent?.isDisabled)
-  }
+	get isDisabled() {
+		const { data, parent, config } = this
+		const { disabled, checkStrictly } = config
+		const isDisabled = isFunction(disabled) ? disabled(data, this) : !!data[disabled]
+		return isDisabled || (!checkStrictly && parent?.isDisabled)
+	}
 
-  get isLeaf () {
-    const { data, config, childrenData, loaded } = this
-    const { lazy, leaf } = config
-    const isLeaf = isFunction(leaf) ? leaf(data, this) : data[leaf]
+	get isLeaf() {
+		const { data, config, childrenData, loaded } = this
+		const { lazy, leaf } = config
+		const isLeaf = isFunction(leaf) ? leaf(data, this) : data[leaf]
 
-    return isUndefined(isLeaf)
-      ? lazy && !loaded
-        ? false
-        : !(Array.isArray(childrenData) && childrenData.length)
-      : !!isLeaf
-  }
+		return isUndefined(isLeaf) ? (lazy && !loaded ? false : !(Array.isArray(childrenData) && childrenData.length)) : !!isLeaf
+	}
 
-  get valueByOption () {
-    return this.config.emitPath ? this.pathValues : this.value
-  }
+	get valueByOption() {
+		return this.config.emitPath ? this.pathValues : this.value
+	}
 }
 export default Node

src/components/packages/region/store.js

@@ -1,157 +1,150 @@
 import { capitalize, isFunction } from '@vue/shared'
 import _ from 'lodash-es'
-const isUndefined = (val) => val === undefined
-const calculatePathNodes = (node) => {
-  const nodes = [node]
-  let { parent } = node
-  while (parent) {
-    nodes.unshift(parent)
-    parent = parent.parent
-  }
-
-  return nodes
+const isUndefined = val => val === undefined
+const calculatePathNodes = node => {
+	const nodes = [node]
+	let { parent } = node
+	while (parent) {
+		nodes.unshift(parent)
+		parent = parent.parent
+	}
+
+	return nodes
 }
 const flatNodes = (nodes, leafOnly = false) => {
-  return nodes.reduce((res, node) => {
-    if (node.isLeaf) {
-      res.push(node)
-    } else {
-      !leafOnly && res.push(node)
-      res = res.concat(flatNodes(node.children, leafOnly))
-    }
-    return res
-  }, [])
+	return nodes.reduce((res, node) => {
+		if (node.isLeaf) {
+			res.push(node)
+		} else {
+			!leafOnly && res.push(node)
+			res = res.concat(flatNodes(node.children, leafOnly))
+		}
+		return res
+	}, [])
 }
 class Node {
-  checked = false
-  disabled = false
-  constructor (data, config, parent, root) {
-    const { value: valueKey, label: labelKey, children: childrenKey } = config
-    this.data = data
-    this.config = config
-    const childrenData = data[childrenKey]
-    this.parent = parent
-    const pathNodes = calculatePathNodes(this)
-    this.level = root ? 0 : parent ? parent.level + 1 : 1
-    this.value = data[valueKey]
-    this.label = data[labelKey]
-    this.pathNodes = pathNodes
-    this.pathValues = pathNodes.map((node) => node.value)
-    this.pathLabels = pathNodes.map((node) => node.label)
-    this.childrenData = childrenData || []
-    this.children = (childrenData || []).map(
-      (child) => new Node(child, config, this)
-    )
-  }
-
-  calcText (separator) {
-    const text = this.pathLabels.join(separator)
-    this.text = text
-    return this.pathLabels.join(separator)
-  }
-
-  get isDisabled () {
-    const { data, parent, config } = this
-    const { disabled, checkStrictly, multiple } = config
-    const isDisabled = !!data[disabled]
-    // let result = false
-    // if (multiple) {
-    //   result = isDisabled || parent && (parent.isDisabled || parent.checked)
-    // }
-    return isDisabled || parent && (parent.isDisabled || parent.checked)
-    // return isDisabled || (parent && parent.isDisabled)
-  }
-
-  get isLeaf () {
-    const { childrenData } = this
-    return !childrenData.length
-  }
-
-  broadcast (event, ...args) {
-    const handlerName = `onParent${capitalize(event)}`
-    this.children.forEach((child) => {
-      if (child) {
-        // bottom up
-        child.broadcast(event, ...args)
-        child[handlerName] && child[handlerName](...args)
-      }
-    })
-  }
-
-  emit (event, ...args) {
-    const { parent } = this
-    const handlerName = `onChild${capitalize(event)}`
-    if (parent) {
-      parent[handlerName] && parent[handlerName](...args)
-      parent.emit(event, ...args)
-    }
-  }
-
-  onParentCheck (checked) {
-    if (!this.isDisabled) {
-      this.setCheckState(checked)
-    }
-  }
-
-  onChildCheck () {
-    const { children } = this
-    const validChildren = children.filter((child) => !child.isDisabled)
-    const checked = validChildren.length
-      ? validChildren.every((child) => child.checked)
-      : false
-
-    this.setCheckState(checked)
-  }
-
-  doCheck (checked) {
-    if (this.checked === checked) return
-
-    const { multiple } = this.config
-
-    if (!multiple) {
-      this.checked = checked
-    } else {
-      // this.broadcast('check', checked)
-      this.setCheckState(checked)
-      if (checked) {
-        flatNodes(this.children).filter(e => e.checked).forEach(e => {
-          e.doCheck(false)
-        })
-      }
-      // this.emit('check')
-    }
-  }
-
-  setCheckState (checked) {
-    this.checked = checked
-  }
+	checked = false
+	disabled = false
+	constructor(data, config, parent, root) {
+		const { value: valueKey, label: labelKey, children: childrenKey } = config
+		this.data = data
+		this.config = config
+		const childrenData = data[childrenKey]
+		this.parent = parent
+		const pathNodes = calculatePathNodes(this)
+		this.level = root ? 0 : parent ? parent.level + 1 : 1
+		this.value = data[valueKey]
+		this.label = data[labelKey]
+		this.pathNodes = pathNodes
+		this.pathValues = pathNodes.map(node => node.value)
+		this.pathLabels = pathNodes.map(node => node.label)
+		this.childrenData = childrenData || []
+		this.children = (childrenData || []).map(child => new Node(child, config, this))
+	}
+
+	calcText(separator) {
+		const text = this.pathLabels.join(separator)
+		this.text = text
+		return this.pathLabels.join(separator)
+	}
+
+	get isDisabled() {
+		const { data, parent, config } = this
+		const { disabled, checkStrictly, multiple } = config
+		const isDisabled = !!data[disabled]
+		// let result = false
+		// if (multiple) {
+		//   result = isDisabled || parent && (parent.isDisabled || parent.checked)
+		// }
+		return isDisabled || (parent && (parent.isDisabled || parent.checked))
+		// return isDisabled || (parent && parent.isDisabled)
+	}
+
+	get isLeaf() {
+		const { childrenData } = this
+		return !childrenData.length
+	}
+
+	broadcast(event, ...args) {
+		const handlerName = `onParent${capitalize(event)}`
+		this.children.forEach(child => {
+			if (child) {
+				// bottom up
+				child.broadcast(event, ...args)
+				child[handlerName] && child[handlerName](...args)
+			}
+		})
+	}
+
+	emit(event, ...args) {
+		const { parent } = this
+		const handlerName = `onChild${capitalize(event)}`
+		if (parent) {
+			parent[handlerName] && parent[handlerName](...args)
+			parent.emit(event, ...args)
+		}
+	}
+
+	onParentCheck(checked) {
+		if (!this.isDisabled) {
+			this.setCheckState(checked)
+		}
+	}
+
+	onChildCheck() {
+		const { children } = this
+		const validChildren = children.filter(child => !child.isDisabled)
+		const checked = validChildren.length ? validChildren.every(child => child.checked) : false
+
+		this.setCheckState(checked)
+	}
+
+	doCheck(checked) {
+		if (this.checked === checked) return
+
+		const { multiple } = this.config
+
+		if (!multiple) {
+			this.checked = checked
+		} else {
+			// this.broadcast('check', checked)
+			this.setCheckState(checked)
+			if (checked) {
+				flatNodes(this.children)
+					.filter(e => e.checked)
+					.forEach(e => {
+						e.doCheck(false)
+					})
+			}
+			// this.emit('check')
+		}
+	}
+
+	setCheckState(checked) {
+		this.checked = checked
+	}
 }
 export default class Store {
-  constructor (data, config) {
-    const nodes = (data).map((nodeData) => new Node(nodeData, config))
-    this.nodes = nodes
-    this.allNodes = flatNodes(nodes, false)
-    this.leafNodes = flatNodes(nodes, true)
-  }
-
-  getNodes () {
-    return this.nodes
-  }
-
-  getFlattedNodes (leafOnly) {
-    return leafOnly ? this.leafNodes : this.allNodes
-  }
-
-  getNodeByValue (
-    value,
-    leafOnly = false
-  ) {
-    if (!value && value !== 0) return null
-
-    const node = this.getFlattedNodes(leafOnly).find(
-      (node) => _.isEqual(node.value, value) || _.isEqual(node.pathValues, value)
-    )
-
-    return node || null
-  }
+	constructor(data, config) {
+		const nodes = data.map(nodeData => new Node(nodeData, config))
+		this.nodes = nodes
+		this.allNodes = flatNodes(nodes, false)
+		this.leafNodes = flatNodes(nodes, true)
+	}
+
+	getNodes() {
+		return this.nodes
+	}
+
+	getFlattedNodes(leafOnly) {
+		return leafOnly ? this.leafNodes : this.allNodes
+	}
+
+	getNodeByValue(value, leafOnly = false) {
+		if (!value && value !== 0) return null
+
+		const node = this.getFlattedNodes(leafOnly).find(node => _.isEqual(node.value, value) || _.isEqual(node.pathValues, value))
+
+		return node || null
+	}
 }