输入选择

代码事例

<template>
	<fk-space direction="vertical">
		<h3>输入组件</h3>
		<fk-space>
			<SelectInput v-model="vm.single" :local-search="true" :multiple="true" :data-source-api="skuOptions" />
			<SelectInput v-model="vm.multiple" :multiple="true" :data-source-api="options" />
		</fk-space>
		<h3>直接调用弹窗</h3>
		<fk-space>
			<fk-button type="primary" @click="handleMultipleSelect">多选</fk-button>
			<fk-button type="primary" @click="handleSingleSelect">单选</fk-button>
		</fk-space>
		<h3>自定义底部按钮</h3>
		<fk-space>
			<fk-button type="primary" @click="handleCustomButton">自定义底部按钮</fk-button>
		</fk-space>
        <h3>本地搜索</h3>
		<fk-space>
			<fk-button type="primary" @click="handleLocalSearch" >本地搜索</fk-button>
		</fk-space>
	</fk-space>
	<fk-row>
		<JsonViewer :data="vm" />
	</fk-row>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { cloneDeep } from 'lodash-es';
import { SelectInput, formatOptionData, http, selectInputPop } from '@erp/biz';
import data from '/biz/shop.json';

const options = () => {
	return cloneDeep(data.data);
};

const skuOptions = () => {
    return http.post('/spuGroup/index', { page: 1, page_size: 9999, is_children: 12 }).then(res => {
        return formatOptionData(res.list, {
            label: 'spu_name',
            value: 'id',
            children: 'spus'
        });
    })
}

const vm = reactive({
	single: '',
	multiple: [],
	result: '',
});

const handleMultipleSelect = () => {
	selectInputPop({
		modelValue: [93],
		dataSourceApi: options,
		multiple: true,
		popTitle: '选择商品标签',
		popTip: '每个标签最多展示50个标签值，如下面列表未显示你想找的标签，请使用搜索查找',
	}).then(res => {
		vm.result = res;
	});
};

const handleSingleSelect = () => {
	selectInputPop({
		modelValue: 93,
		dataSourceApi: options,
		multiple: false,
		popTip: '每个标签最多展示50个标签值，如下面列表未显示你想找的标签，请使用搜索查找',
	}).then(res => {
		vm.result = res;
	});
};
const handleLocalSearch = () => {
	selectInputPop({
		modelValue: 93,
		dataSourceApi: options,
		multiple: true,
        // 本地搜索
        localSearch: true,
		popTip: '每个标签最多展示50个标签值，如下面列表未显示你想找的标签，请使用搜索查找',
	}).then(res => {
		vm.result = res;
	});
};

const handleCustomButton = () => {
	selectInputPop({
		modelValue: 93,
		dataSourceApi: options,
		multiple: true,
		popButtons: [
			{
				code: 'add',
				type: 'primary',
				label: '添加标签到订单',
			},
			{
				code: 'delete',
				type: 'primary',
				label: '从订单中移除标签',
				status: 'danger',
			},
		],
		popTip: '每个标签最多展示50个标签值，如下面列表未显示你想找的标签，请使用搜索查找',
        popButtonClick(button, selected) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(true);
                }, 2000)
            })
        }
	}).then(res => {
		vm.result = res;
	});
};
</script>
<style lang="less" scoped>
:deep(.fk-input-tag) {
	min-width: 200px;
}
:deep(.fk-btn) {
	min-width: 100px;
}
</style>

API

<select-input> Props

参数名	描述	类型	默认值
popup-container	弹出框的挂载容器	union	'body'
on-close	对话框关闭后（动画结束）触发	TSFunctionType	-
on-cancel	点击取消按钮的回调函数	TSFunctionType	-
on-ok	点击确定按钮的回调函数	TSFunctionType	-
biz-params	业务无关的参数	Record	-
biz-model	操作的数据模型	Record	-
biz-type	操作的业务类型	string	-
biz-id	业务ID 用于编辑、查询	string	-
title	标题	string	-
model-value (v-model) (必填)	输入框绑定值	union	-
options	输入框选项	union	-
multiple	是否多选	boolean	false
disabled	是否禁用	boolean	false
placeholder	输入框占位符	string	'请选择'
pop-placeholder	搜索框占位符	string	-
pop-title	弹窗标题	string	-
pop-width	弹窗宽度	union	-
pop-tip	弹窗提示内容	string	-
pop-buttons	弹窗按钮	Array	-
echo-label-api	回显labelAPI	TSFunctionType	-
data-source-api	弹窗数据源	TSFunctionType	-
pop-button-click	pop自定义点击事件	TSFunctionType	-
local-search	是否本地搜索	boolean	false

<select-input-pop> Props

参数名	描述	类型	默认值
popup-container	弹出框的挂载容器	union	'body'
on-close	对话框关闭后（动画结束）触发	TSFunctionType	-
on-cancel	点击取消按钮的回调函数	TSFunctionType	-
on-ok	点击确定按钮的回调函数	TSFunctionType	-
biz-params	业务无关的参数	Record	-
biz-model	操作的数据模型	Record	-
biz-type	操作的业务类型	string	-
biz-id	业务ID 用于编辑、查询	string	-
title	标题	string	-
model-value (v-model) (必填)	输入框绑定值	union	-
options	输入框选项	union	-
multiple	是否多选	boolean	false
disabled	是否禁用	boolean	false
placeholder	输入框占位符	string	-
pop-placeholder	搜索框占位符	string	'请输入关键字，回车搜索'
pop-title	弹窗标题	string	'选择'
pop-width	弹窗宽度	union	800
pop-tip	弹窗提示内容	string	-
pop-buttons	弹窗按钮	Array	-
echo-label-api	回显labelAPI	TSFunctionType	-
data-source-api	弹窗数据源	TSFunctionType	-
pop-button-click	pop自定义点击事件	TSFunctionType	-
local-search	是否本地搜索	boolean	false

SelectInputPopProps

参数名	描述	类型	默认值
modelValue (v-model)	输入框绑定值	(TagData | SelectInputValue)[] | TagData | SelectInputValue	-
options	输入框选项	OptionData[] | (() => OptionData[]) | Promise<OptionData[]>	-
multiple	是否多选	boolean	false
disabled	是否禁用	boolean	false
placeholder	输入框占位符	string	-
popPlaceholder	搜索框占位符	string	-
popTitle	弹窗标题	string	-
popWidth	弹窗宽度	string | number	-
popTip	弹窗提示内容	string	-
popButtons	弹窗按钮	FormButtonType[]	-
echoLabelApi	回显labelAPI	(values: SelectInputValue[]) => SelectInputOptionData[] | Promise<SelectInputOptionData[]>	-
dataSourceApi	弹窗数据源	(params?: { search?: string }) => SelectInputOptionData[] | Promise<SelectInputOptionData[]>	-
popButtonClick	pop自定义点击事件	(button, selected: SelectInputOptionData[]) => boolean | Promise<boolean>	-
localSearch	是否本地搜索	boolean	false

SelectInputOptionData

参数名	描述	类型	默认值
value	选项值	SelectInputValue	-
label	选项label	string	-
checked	是否选中	boolean	false
indeterminate	是否半选	boolean	false
children	子选项	SelectInputOptionData[]	-