fix(任务中心): 资源池级联选择器修复
This commit is contained in:
parent
5a9eb8c651
commit
5272fd1482
|
@ -460,7 +460,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.arco-checkbox {
|
.arco-checkbox {
|
||||||
padding-left: 0;
|
|
||||||
.arco-checkbox-icon {
|
.arco-checkbox-icon {
|
||||||
border: 1px solid var(--color-text-input-border);
|
border: 1px solid var(--color-text-input-border);
|
||||||
}
|
}
|
||||||
|
|
|
@ -141,13 +141,16 @@
|
||||||
const cascader: Ref = ref(null);
|
const cascader: Ref = ref(null);
|
||||||
let selectedLabelObj: Record<string, any> = {}; // 存储已选的选项的label,用于多选时展示全部选项的 tooltip
|
let selectedLabelObj: Record<string, any> = {}; // 存储已选的选项的label,用于多选时展示全部选项的 tooltip
|
||||||
|
|
||||||
const { maxTagCount, getOptionComputedStyle, calculateMaxTag } = useSelect({
|
const { maxTagCount, getOptionComputedStyle, calculateMaxTag } = useSelect(
|
||||||
|
{
|
||||||
selectRef: cascader,
|
selectRef: cascader,
|
||||||
selectVal: innerValue,
|
selectVal: innerValue,
|
||||||
isCascade: true,
|
isCascade: true,
|
||||||
options: props.options,
|
options: props.options,
|
||||||
panelWidth: props.panelWidth,
|
panelWidth: props.panelWidth,
|
||||||
});
|
},
|
||||||
|
props
|
||||||
|
);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import type { MsCascaderProps } from '@/components/business/ms-cascader/index.vue';
|
||||||
|
|
||||||
import { calculateMaxDepth } from '@/utils';
|
import { calculateMaxDepth } from '@/utils';
|
||||||
|
|
||||||
import type { CascaderOption, SelectOptionData } from '@arco-design/web-vue';
|
import type { CascaderOption, SelectOptionData } from '@arco-design/web-vue';
|
||||||
|
@ -17,7 +19,7 @@ export interface UseSelectOption {
|
||||||
* @param selectRef 选择器 ref 对象
|
* @param selectRef 选择器 ref 对象
|
||||||
* @param selectVal 选择器的 v-model
|
* @param selectVal 选择器的 v-model
|
||||||
*/
|
*/
|
||||||
export default function useSelect(config: UseSelectOption) {
|
export default function useSelect(config: UseSelectOption, props?: MsCascaderProps) {
|
||||||
const maxTagCount = ref(0);
|
const maxTagCount = ref(0);
|
||||||
const selectWidth = ref(0);
|
const selectWidth = ref(0);
|
||||||
const selectViewInner = ref<HTMLElement | null>(null); // 输入框内容容器 DOM
|
const selectViewInner = ref<HTMLElement | null>(null); // 输入框内容容器 DOM
|
||||||
|
@ -55,7 +57,7 @@ export default function useSelect(config: UseSelectOption) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const getOptionComputedStyle = computed(() => {
|
const getOptionComputedStyle = computed(() => {
|
||||||
if (config.isCascade) {
|
if (config.isCascade && selectWidth.value > 0) {
|
||||||
// 减去 80px 是为了防止溢出,因为会出现单选框、右侧箭头
|
// 减去 80px 是为了防止溢出,因为会出现单选框、右侧箭头
|
||||||
return {
|
return {
|
||||||
width:
|
width:
|
||||||
|
@ -71,7 +73,7 @@ export default function useSelect(config: UseSelectOption) {
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => config.options,
|
() => props?.options,
|
||||||
(arr) => {
|
(arr) => {
|
||||||
if (config.isCascade && arr && arr.length > 0) {
|
if (config.isCascade && arr && arr.length > 0) {
|
||||||
// 级联选择器的选项发生变化时,重新计算最大深度
|
// 级联选择器的选项发生变化时,重新计算最大深度
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
:options="resourcePoolOptions"
|
:options="resourcePoolOptions"
|
||||||
:placeholder="t('common.pleaseSelect')"
|
:placeholder="t('common.pleaseSelect')"
|
||||||
option-size="small"
|
option-size="small"
|
||||||
class="w-[240px]"
|
class="w-[300px]"
|
||||||
:prefix="t('ms.taskCenter.resourcePool')"
|
:prefix="t('ms.taskCenter.resourcePool')"
|
||||||
:virtual-list-props="{ height: 200 }"
|
:virtual-list-props="{ height: 200 }"
|
||||||
strictly
|
strictly
|
||||||
|
|
Loading…
Reference in New Issue