查询表单

Tooltip 在input上面

labelLayout = 'inner-tooltip'

inner-tooltip.vue

<template>
	<div class="filter-form-demo">
		<FilterForm :model-value="model" :config="formConfig" @query="handleQuery" @reset="handleQuery" />
	</div>
	<h5 style="margin-top: 20px">表单数据模型</h5>
	<pre style="padding: 12px; margin: 12px">{{ model }}</pre>
</template>

<script setup lang="tsx">
import { computed, reactive } from 'vue';
import { cloneDeep } from 'lodash-es';
import { FilterForm, pop } from '@erp/biz';
import { config } from './filter-config.tsx';

const formConfig = computed(() => {
	const cfg = cloneDeep(config);
	/**
	 * 标签在输入框里面
	 */
	cfg.labelLayout = 'inner-tooltip';
	/**
	 * 查询池配置
	 */
	cfg.queryPool = 'ceshi-pool';
	return cfg;
});

const data = Array.from({ length: 8 })
	.fill(undefined)
	.map((_, index) => ({
		value: `option${index + 1}`,
		label: `Option ${index + 1}`,
	}));
const value = ['option1', 'option3', 'option5'];

const model = reactive({
	key1: '',
	key4: [],
	key10: [],
	key11: [],
	key7: [],
	key3: '',
});

const handleQuery = model => {
	console.log('handleQuery >>', model);
};
</script>

<style scoped lang="less">
.filter-form-demo {
}
</style>

form-config.tsx

import type { SearchFormI } from '@erp/biz';

export const config: SearchFormI = {
	gridProps: {
		cols: 3,
		colGap: 12,
		rowGap: 16,
	},
	fields: [
		{
			key: 'key1',
			type: 'text',
			tooltip: '商品名称',
		},
		{
			key: 'key2',
			label: '商品编码',
			type: 'text',
		},
		{
			key: 'key3',
			label: '商品分类',
			type: 'select',
			multiple: true,
			options: [
				{
					value: '1',
					label: '分类一',
					render: () => {
						return (
							<span>
								<i class="erpfont icon-info-circle" />
								分类一
							</span>
						);
					},
				},
			],
		},
		{
			key: 'key4',
			label: '男女款',
			type: 'checkbox',
			multiple: true,
			options: [
				{
					label: '男女款',
					value: 1,
				},
				{
					label: '男女款',
					value: 2,
				},
				{
					label: '男女款',
					value: 3,
				},
				{
					label: '男女款',
					value: 4,
				},
				{
					label: '男女款',
					value: 5,
				},
				{
					label: '男女款',
					value: 6,
				},
			],
		},
		{
			key: 'key41',
			label: '男女款',
			type: 'radio',
			multiple: true,
			showExpand: true,
			options: [
				{
					label: '男女款',
					value: 1,
				},
				{
					label: '男女款',
					value: 2,
				},
				{
					label: '男女款',
					value: 3,
				},
				{
					label: '男女款',
					value: 4,
				},
				{
					label: '男女款',
					value: 5,
				},
				{
					label: '男女款',
					value: 6,
				},
			],
		},
		{
			key: 'key5',
			label: '供应商',
			type: 'select',
			options: [
				{
					label: '供应商一',
					value: 1,
				},
			],
		},
		{
			key: 'key7',
			label: '商品状态',
			type: 'checkbox',
			multiple: true,
			options: [
				{
					label: '男女款',
					value: 1,
				},
				{
					label: '男女款',
					value: 2,
				},
				{
					label: '男女款',
					value: 3,
				},
				{
					label: '男女款',
					value: 4,
				},
				{
					label: '男女款',
					value: 5,
				},
				{
					label: '男女款',
					value: 6,
				},
			],
		},
		{
			key: 'key8',
			label: '商品标签',
			type: 'select',
			options: [
				{
					label: '供应商一',
					value: 1,
				},
			],
		},
		{
			key: 'key10',
			label: '创建时间',
			type: 'date',
			multiple: true,
			componentProps: {
				format: 'YYYY/MM/DD',
			},
		},
		{
			key: 'key11',
			label: '创建时间',
			type: 'date',
			multiple: true,
			placeholder: ['开始时间', '结束时间'],
			componentProps: {
				format: 'YYYY/MM/DD',
			},
		},
		{
			key: 'custom',
			label: '自定义',
			type: 'custom',
			component: 'custom',
			options: [],
			showExpand: true,
		},
	],
};