From 7b0f4966a8d8d95cfa60ec3b89f47a12edd42e75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9E=E4=BB=99=E9=83=BD=E6=B2=A1=E7=94=A8?=
 <615206459@qq.com>
Date: Wed, 12 Mar 2025 15:04:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20setFocus=20=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/crud/components/form/setFocus.vue   | 63 +++++++++++++++++++
 src/modules/demo/views/crud/index.vue         | 38 ++++++-----
 src/plugins/crud/plugins/form/setFocus.ts     |  6 +-
 3 files changed, 92 insertions(+), 15 deletions(-)
 create mode 100644 src/modules/demo/views/crud/components/form/setFocus.vue

diff --git a/src/modules/demo/views/crud/components/form/setFocus.vue b/src/modules/demo/views/crud/components/form/setFocus.vue
new file mode 100644
index 0000000..467e039
--- /dev/null
+++ b/src/modules/demo/views/crud/components/form/setFocus.vue
@@ -0,0 +1,63 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>setFocus</el-tag>
+			<span>自动聚焦</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['form/setFocus.vue']" />
+
+			<!-- 自定义表单组件 -->
+			<cl-form ref="Form"></cl-form>
+		</div>
+
+		<div class="f">
+			<span class="date">2025-03-12</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="tsx">
+import { useForm } from '@cool-vue/crud';
+import { Plugins } from '/#/crud';
+
+const Form = useForm();
+
+function open() {
+	Form.value?.open(
+		{
+			title: '自动聚焦',
+
+			items: [
+				{
+					label: '昵称',
+					prop: 'nickname',
+					component: {
+						name: 'el-input',
+
+						props: {
+							placeholder: '请输入昵称',
+							clearable: true
+						}
+					}
+				},
+				{
+					prop: 'age',
+					component: {
+						name: 'el-input-number'
+					},
+					// 默认值，第一次打开有效
+					value: 18
+				}
+			]
+		},
+		[
+			// 【很重要】全局已添加该插件
+			// Plugins.Form.setFocus('age'), // 指定自动聚焦的字段
+			Plugins.Form.setFocus('') // 禁用自动聚焦
+		]
+	);
+}
+</script>
diff --git a/src/modules/demo/views/crud/index.vue b/src/modules/demo/views/crud/index.vue
index 7d0dd98..86cf1c2 100644
--- a/src/modules/demo/views/crud/index.vue
+++ b/src/modules/demo/views/crud/index.vue
@@ -3,6 +3,15 @@
 		<div class="crud-demo">
 			<el-tabs v-model="active" type="card" @tab-change="onTabChange">
 				<el-tab-pane v-for="(a, ai) in list" :key="ai" :label="a.title" :name="a.title">
+					<el-alert
+						type="warning"
+						:closable="false"
+						class="mb-[10px]"
+						v-if="['cl-upsert', 'cl-search', 'cl-adv-search'].includes(a.title)"
+					>
+						基于 cl-form 组件封装，以下是扩展的一些用法
+					</el-alert>
+
 					<div v-for="(b, bi) in a.children" :key="bi" class="group">
 						<p class="label"># {{ b.label }}</p>
 
@@ -55,6 +64,7 @@ import FormCrud from './components/form/crud.vue';
 import FormRules from './components/form/rules.vue';
 import FormComponent from './components/form/component/index.vue';
 import FormPlugin from './components/form/plugin/index.vue';
+import FormSetFocus from './components/form/setFocus.vue';
 
 import TableBase from './components/table/base.vue';
 import TableFormatter from './components/table/formatter.vue';
@@ -139,19 +149,6 @@ const list = [
 			}
 		]
 	},
-	{
-		title: 'cl-upsert',
-		children: [
-			{
-				label: '基础',
-				children: [UpsertBase, UpsertEvent, UpsertMode]
-			},
-			{
-				label: '高级',
-				children: [UpsertHook]
-			}
-		]
-	},
 	{
 		title: 'cl-form',
 		children: [
@@ -177,7 +174,20 @@ const list = [
 			},
 			{
 				label: '插件',
-				children: [FormPlugin]
+				children: [FormPlugin, FormSetFocus]
+			}
+		]
+	},
+	{
+		title: 'cl-upsert',
+		children: [
+			{
+				label: '基础',
+				children: [UpsertBase, UpsertEvent, UpsertMode]
+			},
+			{
+				label: '高级',
+				children: [UpsertHook]
 			}
 		]
 	},
diff --git a/src/plugins/crud/plugins/form/setFocus.ts b/src/plugins/crud/plugins/form/setFocus.ts
index c8b30da..7cd9544 100644
--- a/src/plugins/crud/plugins/form/setFocus.ts
+++ b/src/plugins/crud/plugins/form/setFocus.ts
@@ -2,13 +2,17 @@ import { useRefs } from '/@/cool';
 
 /**
  * 设置聚焦，prop为空则默认第一个选项
- * @param prop
+ * @param prop 字段标识
  * @returns
  */
 export function setFocus(prop?: string): ClForm.Plugin {
 	const { refs, setRefs } = useRefs();
 
 	return ({ exposed, onOpen }) => {
+		if (prop === '') {
+			return;
+		}
+
 		const name = prop || exposed.config?.items?.[0]?.prop;
 		let _ref: any;