<!--
@ 作者: 秦东
@ 时间: 2024-03-06 11:44:26
@ 备注: 低代码表单分组管理
-->
<script lang='ts' setup>
import { fromGroupSearch } from "@/api/DesignForm/gromGroup/types.ts";
import { groupStateAry } from "@/api/DesignForm/gromGroup/data.ts";
const searchArg =reactive<fromGroupSearch>({})
const queryFormRef = ref(ElForm);
const loading = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-03-06 16:39:41
@ 功能: 执行搜索
*/
const searchRun = () => {

}
/**
@ 作者: 秦东
@ 时间: 2024-03-06 16:46:04
@ 功能: 重置查询条件
*/
function resetQuery() {
  	queryFormRef.value.resetFields();
  	searchRun();
}
</script>
<template>
	<div class="app-container">

		<el-affix :offset="120">
			<el-button type="primary">Offset top 120px</el-button>
		</el-affix>

	<!--搜索区域-->
		<div class="search leftAndRight">
			<el-form ref="queryFormRef" :model="searchArg" :inline="true">
				<el-form-item label="分组名称" prop="keywords">
					<el-input
						v-model="searchArg.name"
						placeholder="请输入分组名称"
						clearable
						@keyup.enter="searchRun"
					/>
				</el-form-item>
				<el-form-item label="状态" prop="keywords">
					<el-select v-model="searchArg.state" placeholder="请选择分组状态" clearable>
						<el-option 
							v-for="item in groupStateAry" 
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="searchRun">
						<template #icon><i-ep-search /></template>搜索
					</el-button>
					<el-button @click="resetQuery">
						<template #icon><i-ep-refresh /></template>重置
					</el-button>
				</el-form-item>
			</el-form>
			<div>
				<el-form>
					<el-form-item>
						<el-button type="warning" >
							<template #icon><i-ep-plus /></template>新增
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>


	</div>
</template>
<style  lang='scss' scoped>
.leftAndRight{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right:10px;
}
</style>
