123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- <template>
- <el-tree-select :model-value="modelValue"
- :data="options"
- :clearable="clearable"
- :placeholder="placeholder"
- :disabled="disabled"
- :filterable="filterable"
- :node-key="optionProps.value"
- :style="{width}"
- :multiple="multiple"
- :props="optionProps"
- :check-strictly="checkStrictly"
- :expand-on-click-node="false"
- :current-node-key="modelValue"
- :default-expanded-keys="defaultExpandedKeys"
- @change="updateValue">
- </el-tree-select>
- </template>
- <script>
- import { ElTreeSelect } from 'element-plus'
- import { computed } from 'vue'
- import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '@cip/components/cip-form-input/form-input-props'
- import { isInputEmpty } from '@cip/utils/util'
- export default {
- components: { ElTreeSelect },
- props: formInputProps,
- emits: [...fromInputEmits],
- setup(props, context) {
- const {
- width,
- updateStream,
- proxyValue,
- securityConfig,
- ...formInput
- } = useFormInput(props, context)
- const { options, optionProps } = useOptions(props, false, updateStream)
- const filterable = computed(() => securityConfig.value.filterable ?? false)
- const multiple = computed(() => securityConfig.value.multiple ?? false)
- const checkStrictly = computed(() => securityConfig.value.checkStrictly ?? true)
- function genOptionsMap(options, preNode = null, map = {}) {
- for (const item of options) {
- map[item[optionProps.value.value]] = {
- origin: item,
- path: preNode ? [...map[preNode[optionProps.value.value]].path, item[optionProps.value.value]] : [item[optionProps.value.value]]
- }
- if (item[optionProps.value.children]?.length) {
- genOptionsMap(item[optionProps.value.children], item, map)
- }
- }
- return map
- }
- const modelValue = computed(() => {
- if (multiple.value) {
- return proxyValue.value?.length ? proxyValue.value.split(',') : []
- } else {
- return proxyValue.value
- }
- })
- const dataMap = computed(() => {
- return genOptionsMap(options.value)
- })
- const defaultExpandedKeys = computed(() => {
- if (multiple.value) {
- return modelValue.value.reduce((acc, val) => {
- acc.push(dataMap.value[val]?.path ?? [])
- return acc
- }, [])
- } else {
- return dataMap.value[modelValue.value]?.path ?? []
- }
- })
- const clearValue = () => {
- updateStream.appendValue(undefined)
- updateStream.appendOtherValue(undefined)
- updateStream.end()
- }
- const getNodeLabelFromDataMapByValue = (val) => {
- return dataMap.value[val].origin[optionProps.value.label] ?? ''
- }
- const updateValue = (val) => {
- if (isInputEmpty(val) || (multiple.value && !val.length)) {
- clearValue()
- return
- }
- const otherValue = multiple.value ? val.map(item => getNodeLabelFromDataMapByValue(item)).join(',') : getNodeLabelFromDataMapByValue(val)
- const modelValue = multiple.value ? val.join(',') : val
- updateStream.appendValue(modelValue)
- updateStream.appendOtherValue(otherValue)
- updateStream.end()
- }
- return {
- modelValue,
- checkStrictly,
- defaultExpandedKeys,
- ...formInput,
- proxyValue,
- options,
- width,
- optionProps,
- clearValue,
- multiple,
- filterable,
- updateValue
- }
- }
- }
- </script>
- <style lang="less" scope>
- .basic-select-tree {
- width: 100%;
- }
- .basic-select-tree-popper {
- .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
- height: auto;
- max-height: 274px;
- padding: 0;
- overflow: hidden;
- overflow-y: auto;
- }
- .el-select-dropdown__item.selected {
- font-weight: normal;
- }
- .el-tree-node__label {
- font-weight: normal;
- }
- }
- .select-tree-option {
- .el-tree-node__content {
- height: 32px;
- padding: 0 20px;
- }
- .is-current > .el-tree-node__content .el-tree-node__label {
- color: #409EFF;
- }
- }
- </style>
|