feat: 新增SchemaSelect保留输入值特性

刘汉宸
1 parent 161f4038
Showing 2 changed files with 65 additions and 3 deletions Show diff stats
examples/views/docs/component/schema-select.md
packages/schema-select/index.vue
@@ -103,6 +103,62 @@ export default {
  
 :::
  
+## 保持输入值
+
+若没有查询到相关结果时，允许保持当前输入值为绑定值。
+
+::: snippet 设置`allow-create`允许创建数据源之外的新值。
+
+```html
+<template>
+  <div>
+    <z-schema-select v-model="model" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id" allow-create></z-schema-select>
+    <span>{{ model }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '那谁',
+      schema: {
+        table: {
+          props: {
+            border: false
+          },
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        }
+      },
+    }
+  },
+  methods: {
+    searchAPI(params) {
+      console.log('search', params);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const list = [
+            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+          ];
+          resolve([list, 37]);
+        }, 500);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
 ## 设置默认文本
  
 通常情况下，编辑表单时，若未加载搜索接口，则需要给定一个对应当前值的默认显示的文本
@@ -116,13 +116,14 @@ export default {
       type: String,
       default: 'value',
     },
-    'value-filter': {
+    allowCreate: Boolean,
+    valueFilter: {
       type: Object,
       default() {
         return {};
       },
     },
-    'api-search': Function,
+    apiSearch: Function,
   },
   inject: {
     elForm: {
@@ -232,10 +233,15 @@ export default {
       this.query = this.model;
       if (this.$refs.schema) {
         this.$refs.schema.search();
+        if (this.allowCreate) {
+          this.$emit('input', this.query);
+        }
       }
     },
     onInputFocus() {
-      this.model = '';
+      if (!this.allowCreate) {
+        this.model = '';
+      }
     },
     onInputBlur() {
       if (!this.visible) {
...	...	@@ -103,6 +103,62 @@ export default {
103	103
104	104	:::
105	105
	106	+## 保持输入值
	107	+
	108	+若没有查询到相关结果时，允许保持当前输入值为绑定值。
	109	+
	110	+::: snippet 设置`allow-create`允许创建数据源之外的新值。
	111	+
	112	+```html
	113	+<template>
	114	+ <div>
	115	+ <z-schema-select v-model="model" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id" allow-create></z-schema-select>
	116	+ <span>{{ model }}</span>
	117	+ </div>
	118	+</template>
	119	+
	120	+<script>
	121	+export default {
	122	+ data() {
	123	+ return {
	124	+ model: '那谁',
	125	+ schema: {
	126	+ table: {
	127	+ props: {
	128	+ border: false
	129	+ },
	130	+ items: [
	131	+ { label: '姓名', prop: 'name', minWidth: 120 },
	132	+ { label: '年龄', prop: 'age', minWidth: 120 },
	133	+ { label: '地址', prop: 'address', minWidth: 120 },
	134	+ ]
	135	+ }
	136	+ },
	137	+ }
	138	+ },
	139	+ methods: {
	140	+ searchAPI(params) {
	141	+ console.log('search', params);
	142	+ return new Promise(resolve => {
	143	+ setTimeout(() => {
	144	+ const list = [
	145	+ { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
	146	+ { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
	147	+ { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
	148	+ { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
	149	+ { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
	150	+ ];
	151	+ resolve([list, 37]);
	152	+ }, 500);
	153	+ });
	154	+ },
	155	+ }
	156	+}
	157	+</script>
	158	+```
	159	+
	160	+:::
	161	+
106	162	## 设置默认文本
107	163
108	164	通常情况下，编辑表单时，若未加载搜索接口，则需要给定一个对应当前值的默认显示的文本
...	...
...	...	@@ -116,13 +116,14 @@ export default {
116	116	type: String,
117	117	default: 'value',
118	118	},
119		- 'value-filter': {
	119	+ allowCreate: Boolean,
	120	+ valueFilter: {
120	121	type: Object,
121	122	default() {
122	123	return {};
123	124	},
124	125	},
125		- 'api-search': Function,
	126	+ apiSearch: Function,
126	127	},
127	128	inject: {
128	129	elForm: {
...	...	@@ -232,10 +233,15 @@ export default {
232	233	this.query = this.model;
233	234	if (this.$refs.schema) {
234	235	this.$refs.schema.search();
	236	+ if (this.allowCreate) {
	237	+ this.$emit('input', this.query);
	238	+ }
235	239	}
236	240	},
237	241	onInputFocus() {
238		- this.model = '';
	242	+ if (!this.allowCreate) {
	243	+ this.model = '';
	244	+ }
239	245	},
240	246	onInputBlur() {
241	247	if (!this.visible) {
...	...