push
This commit is contained in:
xuziqiang
375
lib/component/form/select/select-tree-api.vue
Normal file
375
lib/component/form/select/select-tree-api.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<a-tree-select
|
||||
v-bind="getBindValues"
|
||||
:tree-data="getOptions"
|
||||
@dropdown-visible-change="dropdownHandle"
|
||||
v-model:value="modelValue"
|
||||
@search="onSearch"
|
||||
:filterOption="onFilterOption"
|
||||
:multiple="multiple"
|
||||
:treeDefaultExpandedKeys="treeDefaultExpandedKeys">
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||
<slot :name="item" v-bind="data || {}"></slot>
|
||||
</template>
|
||||
</a-tree-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, nextTick, PropType, ref, unref, watch } from 'vue';
|
||||
import { cloneDeep, get, isArray, isEqual, isFunction, isString, isUndefined } from 'lodash-es';
|
||||
import { HttpRequestConfig, useApi } from '/nerv-lib/use/use-api';
|
||||
|
||||
type ChangeValue = string | number | undefined | string[] | number[];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsSelectTreeApi',
|
||||
props: {
|
||||
api: {
|
||||
type: [String, Object, Function] as PropType<string | Function | HttpRequestConfig>,
|
||||
required: true,
|
||||
},
|
||||
value: [String, Object, Array, Number],
|
||||
field: String,
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
resultField: {
|
||||
type: String,
|
||||
default: 'data.data',
|
||||
},
|
||||
firstOption: {
|
||||
type: Object,
|
||||
},
|
||||
numberToString: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
immediate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
requiredParams: {
|
||||
type: [Boolean, Object],
|
||||
default: false,
|
||||
},
|
||||
labelField: {
|
||||
type: [String, Function],
|
||||
default: 'label',
|
||||
},
|
||||
valueField: {
|
||||
type: String,
|
||||
default: 'value',
|
||||
},
|
||||
autoSelectFirst: {
|
||||
// 与autoClearValue同时使用，只会执行autoSelectFirst
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
autoClearValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
//数据筛选函数
|
||||
filterData: {
|
||||
type: Function,
|
||||
},
|
||||
// 开启前端筛选默认label包含
|
||||
autoSearch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
//后端筛选字段
|
||||
filterFiled: {
|
||||
type: String,
|
||||
},
|
||||
dropdownReload: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 多选模式
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
unSelectable: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: ['change', 'validateChange'],
|
||||
setup(props, { attrs, emit }) {
|
||||
const options = ref([]);
|
||||
const isLoad = ref(false);
|
||||
const changeValue = ref<any>(undefined);
|
||||
const filterFiledRef = ref<string | undefined>(undefined);
|
||||
let isFirstLoad = !!props.api; // 是否第一次加载
|
||||
let treeDefaultExpandedKeys = ref<any>([]); //展开默认选中值
|
||||
|
||||
const getBindValues = computed(() => {
|
||||
const selectProps: Recordable = {};
|
||||
if (props.filterFiled || props.autoSearch) {
|
||||
selectProps['showSearch'] = true;
|
||||
}
|
||||
|
||||
return {
|
||||
...attrs,
|
||||
...selectProps,
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 设置filterFiled时注册search事件
|
||||
*/
|
||||
const onSearch = computed(() => {
|
||||
if (props.filterFiled) {
|
||||
return (input: string) => {
|
||||
if (filterFiledRef.value !== input) {
|
||||
filterFiledRef.value = input;
|
||||
fetch();
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 设置filterFiled时注册filterOption事件
|
||||
*/
|
||||
const onFilterOption = computed(() => {
|
||||
if (props.autoSearch) {
|
||||
return (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据请求得到的data获取options
|
||||
*/
|
||||
const getOptions = computed(() => {
|
||||
const { firstOption, labelField, valueField, numberToString } = props;
|
||||
const sourceOptions = [];
|
||||
firstOption && sourceOptions.push(firstOption);
|
||||
let acc: any[] = [];
|
||||
unref(options).forEach((next: Recordable) => {
|
||||
const args = { labelField, valueField };
|
||||
transferTreeData(next, null, acc, { ...args });
|
||||
});
|
||||
return acc;
|
||||
});
|
||||
/** 转换树形数据 */
|
||||
function transferTreeData(next: Recordable, parent: any, acc: any, args: any) {
|
||||
const { labelField, valueField, numberToString } = args;
|
||||
let node = null;
|
||||
if (isString(next)) {
|
||||
//值是字符串类型
|
||||
node = {
|
||||
title: next,
|
||||
value: next,
|
||||
key: next,
|
||||
children: [],
|
||||
};
|
||||
} else {
|
||||
const value = get(next, valueField);
|
||||
node = {
|
||||
title: isFunction(labelField) ? labelField(next) : get(next, labelField as string),
|
||||
value: numberToString ? `${value}` : value,
|
||||
key: value,
|
||||
children: [],
|
||||
};
|
||||
}
|
||||
if (props.unSelectable) {
|
||||
const level = props.unSelectable.level;
|
||||
if (next['level'] == level) {
|
||||
node['selectable'] = false;
|
||||
}
|
||||
}
|
||||
if (!parent) {
|
||||
// 根节点
|
||||
acc.push(node);
|
||||
} else {
|
||||
parent.children?.push(node);
|
||||
}
|
||||
if (next.children?.length > 0) {
|
||||
for (const el of next['children']) {
|
||||
transferTreeData(el, node, acc, { ...args });
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取数据
|
||||
*/
|
||||
const fetch = () => {
|
||||
const requestConfig: HttpRequestConfig = { method: 'get' };
|
||||
const { api, params: _params, resultField, filterData } = props;
|
||||
const params: Recordable = cloneDeep(_params);
|
||||
if (props.filterFiled && filterFiledRef.value) {
|
||||
params[props.filterFiled] = filterFiledRef.value;
|
||||
}
|
||||
const { httpRequest } = useApi();
|
||||
httpRequest({ api, params, requestConfig })
|
||||
.then((res: Recordable) => {
|
||||
emit('validateChange', { help: undefined });
|
||||
let data = [];
|
||||
if (resultField) {
|
||||
data = get(res, resultField) || [];
|
||||
// data = data.splice(Math.floor(Math.random() * 3), Math.floor(Math.random() * 5 + 5));
|
||||
} else {
|
||||
data = res;
|
||||
}
|
||||
if (isFunction(filterData)) {
|
||||
options.value = data.filter(filterData);
|
||||
} else {
|
||||
options.value = data;
|
||||
}
|
||||
isLoad.value = true;
|
||||
})
|
||||
.catch((error: any) => {
|
||||
if (error?.response?.status === 403) {
|
||||
emit('validateChange', { help: '暂无权限', validateStatus: 'error' });
|
||||
nextTick(() => {
|
||||
//清空编辑初始值
|
||||
modelValue.value = undefined;
|
||||
});
|
||||
}
|
||||
options.value = [];
|
||||
});
|
||||
};
|
||||
|
||||
let lastParams: any = undefined;
|
||||
|
||||
/**
|
||||
** 延迟获取数据
|
||||
*/
|
||||
async function dropdownHandle(open: boolean) {
|
||||
if (!open) return;
|
||||
if ((!props.immediate && !isLoad.value) || props.dropdownReload) {
|
||||
await fetch();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
** 绑定value
|
||||
*/
|
||||
const modelValue = computed({
|
||||
set(value: ChangeValue) {
|
||||
if (isEqual(value, changeValue.value)) return;
|
||||
changeValue.value = value;
|
||||
triggerChange(value);
|
||||
},
|
||||
get() {
|
||||
return changeValue.value;
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 传入值需要
|
||||
* 前提option已获取到数据
|
||||
*/
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
if (isLoad.value) {
|
||||
modelValue.value = props.value;
|
||||
}
|
||||
// 默认选中值
|
||||
if (props.multiple) {
|
||||
treeDefaultExpandedKeys.value = props.value;
|
||||
} else {
|
||||
treeDefaultExpandedKeys.value = [props.value];
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => getOptions.value,
|
||||
() => {
|
||||
const { value, autoSelectFirst, autoClearValue } = props;
|
||||
|
||||
// 首次加载如果有值则选中值
|
||||
if (isFirstLoad && !isUndefined(value)) {
|
||||
modelValue.value = value;
|
||||
} else if (!filterFiledRef.value) {
|
||||
if (autoSelectFirst) {
|
||||
modelValue.value = getOptions.value[0]?.value;
|
||||
} else if (autoClearValue) {
|
||||
modelValue.value = undefined;
|
||||
}
|
||||
}
|
||||
isFirstLoad = false;
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 重写change ant 初始化数据、删除数据时不触发change
|
||||
* @param value
|
||||
*/
|
||||
function triggerChange(value: ChangeValue) {
|
||||
if (isUndefined(value)) {
|
||||
emit('change', value, undefined);
|
||||
} else if (isArray(value)) {
|
||||
const options: Record<string, any>[] = [];
|
||||
value.forEach((v) => {
|
||||
getOptions.value.forEach((option) => {
|
||||
if (option.value === v) {
|
||||
options.push(option);
|
||||
}
|
||||
});
|
||||
});
|
||||
emit('change', value, options);
|
||||
} else {
|
||||
let op = {};
|
||||
getOptions.value.forEach((option) => {
|
||||
if (option.value === value) {
|
||||
op = option;
|
||||
}
|
||||
});
|
||||
emit('change', value, op);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
** 联动 immediate 为是否主动获取数据
|
||||
*/
|
||||
watch(
|
||||
[() => props.params, () => props.api],
|
||||
async () => {
|
||||
const { params } = props;
|
||||
if (!isEqual(lastParams, params)) {
|
||||
if (props.immediate || true) {
|
||||
//todo 暂时全设为主动获取
|
||||
lastParams = cloneDeep(params);
|
||||
|
||||
await fetch();
|
||||
}
|
||||
isLoad.value = false; // 设置成false 点击下拉才会触发
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: props.immediate },
|
||||
);
|
||||
|
||||
return {
|
||||
dropdownHandle,
|
||||
getOptions,
|
||||
getBindValues,
|
||||
modelValue,
|
||||
onSearch,
|
||||
onFilterOption,
|
||||
treeDefaultExpandedKeys,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user