142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
||
import type { MesMdClientApi } from '#/api/mes/md/client';
|
||
|
||
import { computed, ref, useAttrs, watch } from 'vue';
|
||
|
||
import { IconifyIcon } from '@vben/icons';
|
||
|
||
import { Input, Tooltip } from 'ant-design-vue';
|
||
|
||
import { getClient } from '#/api/mes/md/client';
|
||
|
||
import MdClientSelectDialog from './md-client-select-dialog.vue';
|
||
|
||
defineOptions({ name: 'MdClientSelect', inheritAttrs: false });
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
allowClear?: boolean;
|
||
disabled?: boolean;
|
||
modelValue?: number;
|
||
placeholder?: string;
|
||
}>(),
|
||
{
|
||
allowClear: true,
|
||
disabled: false,
|
||
modelValue: undefined,
|
||
placeholder: '请选择客户',
|
||
},
|
||
);
|
||
const emit = defineEmits<{
|
||
change: [item: MesMdClientApi.Client | undefined];
|
||
'update:modelValue': [value: number | undefined];
|
||
}>();
|
||
const attrs = useAttrs(); // 透传属性
|
||
const dialogRef = ref<InstanceType<typeof MdClientSelectDialog>>(); // 客户选择弹窗
|
||
const hovering = ref(false); // 是否悬停
|
||
const selectedItem = ref<MesMdClientApi.Client>(); // 当前选中客户
|
||
|
||
const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
|
||
const showClear = computed(
|
||
// 是否显示清空图标
|
||
() =>
|
||
props.allowClear &&
|
||
!props.disabled &&
|
||
hovering.value &&
|
||
props.modelValue !== null,
|
||
);
|
||
|
||
/** 根据客户编号回显选择器 */
|
||
async function resolveItemById(id: number | undefined) {
|
||
if (id === null) {
|
||
selectedItem.value = undefined;
|
||
return;
|
||
}
|
||
if (selectedItem.value?.id === id) {
|
||
return;
|
||
}
|
||
try {
|
||
selectedItem.value = await getClient(id as number);
|
||
} catch (error) {
|
||
console.error('[MdClientSelect] resolveItemById failed:', error);
|
||
}
|
||
}
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
(value) => {
|
||
resolveItemById(value);
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
/** 清空已选客户 */
|
||
function clearSelected() {
|
||
selectedItem.value = undefined;
|
||
emit('update:modelValue', undefined);
|
||
emit('change', undefined);
|
||
}
|
||
|
||
/** 打开客户选择弹窗 */
|
||
function handleClick(event: MouseEvent) {
|
||
if (props.disabled) {
|
||
return;
|
||
}
|
||
const target = event.target as HTMLElement;
|
||
if (showClear.value && target.closest('.ant-input-suffix')) {
|
||
event.stopPropagation();
|
||
clearSelected();
|
||
return;
|
||
}
|
||
const selectedIds = props.modelValue === null ? [] : [props.modelValue];
|
||
dialogRef.value?.open(selectedIds as number[], { multiple: false });
|
||
}
|
||
|
||
/** 回填选中的客户 */
|
||
function handleSelected(rows: MesMdClientApi.Client[]) {
|
||
const item = rows[0];
|
||
if (!item) {
|
||
return;
|
||
}
|
||
selectedItem.value = item;
|
||
emit('update:modelValue', item.id);
|
||
emit('change', item);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
v-bind="attrs"
|
||
class="w-full"
|
||
:class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
|
||
@click="handleClick"
|
||
@mouseenter="hovering = true"
|
||
@mouseleave="hovering = false"
|
||
>
|
||
<Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
|
||
<template #title>
|
||
<div v-if="selectedItem" class="leading-6">
|
||
<div>编码：{{ selectedItem.code || '-' }}</div>
|
||
<div>名称：{{ selectedItem.name || '-' }}</div>
|
||
<div>简称：{{ selectedItem.nickname || '-' }}</div>
|
||
<div>电话：{{ selectedItem.telephone || '-' }}</div>
|
||
</div>
|
||
</template>
|
||
<Input
|
||
:disabled="disabled"
|
||
:placeholder="placeholder"
|
||
:value="displayLabel"
|
||
readonly
|
||
>
|
||
<template #suffix>
|
||
<IconifyIcon
|
||
class="size-4"
|
||
:icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
|
||
/>
|
||
</template>
|
||
</Input>
|
||
</Tooltip>
|
||
</div>
|
||
<MdClientSelectDialog ref="dialogRef" @selected="handleSelected" />
|
||
</template>
|