<template>
|
<div class="cascader-filter">
|
<div v-for="(item, index) in radioList" :key="index">
|
<el-bus-radio
|
:from-dict="false"
|
:options="item"
|
:props="mProps"
|
:value="currentValue[index] || ''"
|
v-bind="$attrs"
|
@change="onRadioChange($event, index)"
|
></el-bus-radio>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import cacheStorage from 'el-business-cache-utils'
|
import utils from 'el-business-utils'
|
import _get from 'lodash.get'
|
|
export default {
|
inheritAttrs: false,
|
props: {
|
value: {
|
type: [Array, String, Number],
|
default() {
|
return this.emitPath ? [] : null
|
},
|
},
|
emitPath: {
|
type: Boolean,
|
default: true,
|
},
|
props: Object,
|
interfaceUri: {
|
type: String,
|
default: '',
|
},
|
otherInterfaceUri: {
|
type: String,
|
default: '',
|
},
|
extraQuery: {
|
type: Object,
|
default: null,
|
},
|
code: {
|
type: String,
|
},
|
codeOnPath: {
|
type: Boolean,
|
default() {
|
return utils.isTrueEmpty(this?.$ELBUSINESS?.dictCodeOnPath)
|
? false
|
: this?.$ELBUSINESS?.dictCodeOnPath
|
},
|
},
|
codeRequestKey: {
|
type: String,
|
default() {
|
return this?.$ELBUSINESS?.dictCodeRequestKey || 'type'
|
},
|
},
|
},
|
data() {
|
return {
|
options: [],
|
}
|
},
|
computed: {
|
mProps() {
|
const DEFAULT_PROPS = {
|
label: 'label',
|
value: 'value',
|
allLabel: '不限',
|
allValue: '',
|
dataPath: '',
|
}
|
return Object.assign(
|
{},
|
DEFAULT_PROPS,
|
this.$ELBUSINESS?.radioProps,
|
this.props
|
)
|
},
|
mInterfaceUri() {
|
return (
|
this.interfaceUri ||
|
this.$ELBUSINESS?.dictInterfaceUri ||
|
'wxkj/code/value'
|
)
|
},
|
currentValue() {
|
return this.emitPath ? this.value : this.getArrayValue(this.value)
|
},
|
radioList() {
|
if (Array.isArray(this.options) && this.options.length > 0) {
|
const list = [this.options]
|
let mList = this.options
|
if (Array.isArray(this.currentValue) && this.currentValue.length > 0) {
|
this.currentValue.forEach((item) => {
|
const child = mList.find((i) => i[this.mProps.value] === item)
|
if (
|
child &&
|
Array.isArray(child.children) &&
|
child.children.length > 0
|
) {
|
list.push(child.children)
|
mList = child.children
|
}
|
})
|
}
|
return list
|
}
|
return []
|
},
|
},
|
mounted() {
|
if (this.otherInterfaceUri) {
|
this.getOtherOptions()
|
} else if (this.code) {
|
this.getOptionList()
|
}
|
},
|
methods: {
|
async getOptionList() {
|
if (this.$ELBUSINESS?.enableCache) {
|
const list = cacheStorage.getItem(this.code)
|
if (Array.isArray(list)) {
|
this.options = list
|
this.$emit('optionsChange', this.options)
|
return
|
}
|
}
|
const requestUrl = this.codeOnPath
|
? utils.joinPath(this.mInterfaceUri, this.code)
|
: this.mInterfaceUri
|
const { code, data } = await this.$elBusHttp.request(requestUrl, {
|
params: this.codeOnPath
|
? undefined
|
: { [this.codeRequestKey]: this.code },
|
})
|
if (code === 0) {
|
if (this.$ELBUSINESS?.enableCache) {
|
if (Array.isArray(data)) {
|
cacheStorage.setItem(this.code, data)
|
}
|
}
|
this.options = data || []
|
this.$emit('optionsChange', this.options)
|
} else {
|
console.warn('can not get option list')
|
}
|
},
|
async getOtherOptions() {
|
const params = Object.assign({}, this.extraQuery)
|
const { code, data } = await this.$elBusHttp.request(
|
this.otherInterfaceUri,
|
{
|
params,
|
}
|
)
|
if (code === 0) {
|
if (this.mProps.dataPath) {
|
this.options = _get(data || [], this.mProps.dataPath)
|
} else {
|
this.options = data || []
|
}
|
this.$emit('optionsChange', this.options)
|
}
|
},
|
getArrayValue(value) {
|
const list = this.tree2List(this.options)
|
const deepValue = (v) => {
|
if (v) {
|
const current = list.find((i) => i[this.mProps.value] === v)
|
return [].concat(v, deepValue(current.parentId))
|
}
|
return []
|
}
|
if (Array.isArray(this.options) && this.options.length > 0) {
|
return deepValue(value).reverse()
|
}
|
return []
|
},
|
tree2List(tree) {
|
const toList = (arr, parentId = null) => {
|
if (Array.isArray(arr))
|
return Array.prototype.concat.apply(
|
[],
|
arr.map((i) => toList(i))
|
)
|
else if (Reflect.has(arr, 'children'))
|
return [
|
arr,
|
...toList(
|
arr.children.map((i) => ({
|
...i,
|
parentId: arr[this.mProps.value],
|
}))
|
),
|
]
|
return [arr]
|
}
|
return toList(tree)
|
},
|
onRadioChange(e, index) {
|
const value = this.currentValue.slice(0, index)
|
if (e !== this.mProps.allValue) {
|
value.push(e)
|
}
|
const emitPath = this.emitPath
|
if (emitPath) {
|
this.$emit('input', value)
|
this.$emit('change', value)
|
} else {
|
const emitValue = value.length > 0 ? value.pop() : ''
|
this.$emit('input', emitValue)
|
this.$emit('change', emitValue)
|
}
|
},
|
},
|
}
|
</script>
|
