fix(任务中心): 资源池级联选择器修复

This commit is contained in:
baiqi 2024-10-29 16:14:55 +08:00 committed by Craftsman
parent 5a9eb8c651
commit 5272fd1482
4 changed files with 16 additions and 12 deletions

View File

@ -460,7 +460,6 @@
}
}
.arco-checkbox {
padding-left: 0;
.arco-checkbox-icon {
border: 1px solid var(--color-text-input-border);
}

View File

@ -141,13 +141,16 @@
const cascader: Ref = ref(null);
let selectedLabelObj: Record<string, any> = {}; // label tooltip
const { maxTagCount, getOptionComputedStyle, calculateMaxTag } = useSelect({
selectRef: cascader,
selectVal: innerValue,
isCascade: true,
options: props.options,
panelWidth: props.panelWidth,
});
const { maxTagCount, getOptionComputedStyle, calculateMaxTag } = useSelect(
{
selectRef: cascader,
selectVal: innerValue,
isCascade: true,
options: props.options,
panelWidth: props.panelWidth,
},
props
);
watch(
() => props.modelValue,

View File

@ -1,3 +1,5 @@
import type { MsCascaderProps } from '@/components/business/ms-cascader/index.vue';
import { calculateMaxDepth } from '@/utils';
import type { CascaderOption, SelectOptionData } from '@arco-design/web-vue';
@ -17,7 +19,7 @@ export interface UseSelectOption {
* @param selectRef ref
* @param selectVal v-model
*/
export default function useSelect(config: UseSelectOption) {
export default function useSelect(config: UseSelectOption, props?: MsCascaderProps) {
const maxTagCount = ref(0);
const selectWidth = ref(0);
const selectViewInner = ref<HTMLElement | null>(null); // 输入框内容容器 DOM
@ -55,7 +57,7 @@ export default function useSelect(config: UseSelectOption) {
}
const getOptionComputedStyle = computed(() => {
if (config.isCascade) {
if (config.isCascade && selectWidth.value > 0) {
// 减去 80px 是为了防止溢出,因为会出现单选框、右侧箭头
return {
width:
@ -71,7 +73,7 @@ export default function useSelect(config: UseSelectOption) {
});
watch(
() => config.options,
() => props?.options,
(arr) => {
if (config.isCascade && arr && arr.length > 0) {
// 级联选择器的选项发生变化时,重新计算最大深度

View File

@ -16,7 +16,7 @@
:options="resourcePoolOptions"
:placeholder="t('common.pleaseSelect')"
option-size="small"
class="w-[240px]"
class="w-[300px]"
:prefix="t('ms.taskCenter.resourcePool')"
:virtual-list-props="{ height: 200 }"
strictly