自定义标签

代码事例

<template>
	<div class="search-form-demo">
		<SearchForm :model-value="vm" :config="config" :db-click-query="true" @query="handleQuery" @reset="handleReset"/>
	</div>
	<h5 style="margin-top: 20px">表单数据模型</h5>
	<JsonViewer :data="vm" />
</template>

<script setup lang="tsx">
import { reactive } from 'vue';
import { get, set } from 'lodash-es';
import { SearchForm } from '@erp/biz';
import { SearchFormI } from '@erp/common';
import DoubleSelect from '/common/search-form/double-select.vue';

const vm = reactive({
    key2: 'order_time'
});

const options = [
	{
		label: '订单时间',
		value: 'order_time',
	},
	{
		label: '支付时间',
		value: 'pay_time',
	},
	{
		label: '发货时间',
		value: 'shipping_time',
	},
	{
		label: '确认收货时间',
		value: 'confirm_time',
	},
	{
		label: '计划发货时间',
		value: 'plan_ship_time',
	},
];
// 快捷时间选择
const aOptions = [
	{ value: 'today', label: '今天', type: 'time' },
	{ value: 'yesterday', label: '昨天', type: 'time' },
	{ value: 'week', label: '本周', type: 'time' },
	{ value: 'last30', label: '最近30天', type: 'time' },
	{ value: 'last60', label: '最近60天', type: 'time' },
];

const config: SearchFormI = {
	gridProps: {
		cols: 3,
		colGap: 12,
		rowGap: 16,
	},
    queryPool: 'test-queryPool',
	labelLayout: 'expand',
    ignoreResetKeys: ['key2'],
	fields: [
		{
			key: 'key1',
			type: 'text',
			tooltip: '商品名称',
		},
		{
			key: 'key2',
			label: '商品编码',
			type: 'text',
			slots: {
				label(field, model) {
					return <DoubleSelect modelValue={get(model, field.key)} onUpdate:modelValue={v => set(model, field.key, v)} options={options} aOptions={aOptions}></DoubleSelect>;
				},
                suffix: () => <i class="erpfont icon-icon-original-order" />
			},
		},
		{
			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,
				},
			],
            componentProps: {
                onDblclick(event) {
                    console.log('dblclick >>', event);
                }
            }
		},
		{
			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',
			},
		},
	],
};

const handleQuery = (model, params) => {
	console.log('query >>', model, params);
};

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

<style scoped lang="less">
.search-form-demo {
	height: 500px;

	.search-form {
		border: 1px solid var(--color-border-1);
	}
}
</style>