feat: 新增SchemaPage组件的datagrid效果

Aaron.Liu
1 parent 12f1d04f
Showing 2 changed files with 100 additions and 4 deletions Show diff stats
examples/views/docs/component/schema-page.md
packages/schema-page/index.vue
@@ -661,6 +661,56 @@ export default {
  
 :::
  
+## 静态表格
+
+设置`datagrid`将组建转化为静态表格，即不包含增删改查API的可编辑表格，不分页。
+
+::: snippet 基本参数和基础用法相同
+
+```html
+<template>
+  <eagle-schema-page :schema="schema" :value-table.sync="tableModel" :value-form.sync="formModel" datagrid></eagle-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: false,
+        table: {
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+      },
+      formModel: { name: '', age: '', address: '' },
+      tableModel: [
+        { 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: '正常' },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
 ## API
  
 ## Attribute 属性
@@ -30,9 +30,10 @@
         <eagle-schema-table
           :size="_size"
           :schema="tableSchemaDefaultProps(schema.table)"
-          v-model="tableData"
+          :value="datagrid ? datagridData : tableData"
           v-loading="schema.loading !== false ? tableLoading : false"
           @selection-change="onTableSelectionChange"
+          @input="onTableInput"
         >
           <template #left>
             <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
@@ -59,7 +60,7 @@
       </slot>
     </div>
     <!-- 底部区域 -->
-    <div v-if="schema.selection !== false || schema.pagination !== false || $scopedSlots.footer" class="eagle-schema-page__footer">
+    <div v-if="!datagrid && (schema.selection !== false || schema.pagination !== false || $scopedSlots.footer)" class="eagle-schema-page__footer">
       <slot name="footer" v-bind="_slotScope">
         <div v-if="schema.selection !== false && selection.length > 0" class="selection-info">
           <span>已选中</span>
@@ -173,7 +174,7 @@ setKeysDefault([&#39;value-table&#39;], {
   },
 });
 setKeysDefault(['size', 'dialogTitle', 'dialogType'], String);
-setKeysDefault(['dialogVisible', 'auto', 'loading'], Boolean);
+setKeysDefault(['dialogVisible', 'auto', 'loading', 'datagrid'], Boolean);
 setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function);
  
 export default {
@@ -321,6 +322,11 @@ export default {
         closed: this.onDialogClosed,
       };
     },
+    datagridData() {
+      return this.tableData.map((row, index) => {
+        return { ...row, $index: index };
+      });
+    },
   },
   methods: {
     tableSchemaDefaultProps(val) {
@@ -352,6 +358,9 @@ export default {
     },
     // 查询
     search() {
+      if (this.datagrid) {
+        return;
+      }
       if (!this.tableLoading) {
         this.tableLoading = true;
         const params = {
@@ -371,6 +380,12 @@ export default {
           });
       }
     },
+    // 表格数据改变
+    onTableInput(value) {
+      if (!this.datagrid) {
+        this.tableData = value;
+      }
+    },
     // 重置查询
     onSearch() {
       this.currentPage = 1;
@@ -385,8 +400,25 @@ export default {
         let submitAPI = this.apiSubmit || this.emptyPromise;
         if (this.modalType === 'new') {
           submitAPI = this.apiNew || this.apiSubmit || this.emptyPromise;
+          if (this.datagrid) {
+            submitAPI = () => {
+              return new Promise(resolve => {
+                this.tableData.push(value);
+                resolve();
+              });
+            };
+          }
         } else if (this.modalType === 'edit') {
           submitAPI = this.apiEdit || this.apiSubmit || this.emptyPromise;
+          if (this.datagrid) {
+            submitAPI = () => {
+              return new Promise(resolve => {
+                const { $index, ...other } = value;
+                this.$set(this.tableData, value.$index, other);
+                resolve();
+              });
+            };
+          }
         }
         submitAPI(this.valueForm, { type: this.modalType })
           .then(() => {
@@ -502,7 +534,21 @@ export default {
         customClass: 'eagle-loading-toast',
         background: 'rgba(0, 0, 0, 0)',
       });
-      const deleteAPI = this.apiDelete || this.emptyPromise;
+      let deleteAPI = this.apiDelete || this.emptyPromise;
+      if (this.datagrid) {
+        deleteAPI = () => {
+          return new Promise(resolve => {
+            this.tableData = this.datagridData
+              .filter(row => {
+                return !selection.map(i => i.$index).includes(row.$index);
+              })
+              .map(({ $index, ...other }) => {
+                return other;
+              });
+            resolve();
+          });
+        };
+      }
       deleteAPI(selection)
         .then(() => {
           this.search();
...	...	@@ -661,6 +661,56 @@ export default {
661	661
662	662	:::
663	663
	664	+## 静态表格
	665	+
	666	+设置`datagrid`将组建转化为静态表格，即不包含增删改查API的可编辑表格，不分页。
	667	+
	668	+::: snippet 基本参数和基础用法相同
	669	+
	670	+```html
	671	+<template>
	672	+ <eagle-schema-page :schema="schema" :value-table.sync="tableModel" :value-form.sync="formModel" datagrid></eagle-schema-page>
	673	+</template>
	674	+
	675	+<script>
	676	+export default {
	677	+ data() {
	678	+ return {
	679	+ schema: {
	680	+ filter: false,
	681	+ table: {
	682	+ items: [
	683	+ { prop: 'name', label: '姓名' },
	684	+ { prop: 'age', label: '年龄' },
	685	+ { prop: 'address', label: '地址' },
	686	+ { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
	687	+ ]
	688	+ },
	689	+ form: {
	690	+ props: { labelWidth: '70px', size: 'small', span: 12 },
	691	+ items: [
	692	+ { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
	693	+ { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
	694	+ { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
	695	+ ]
	696	+ },
	697	+ },
	698	+ formModel: { name: '', age: '', address: '' },
	699	+ tableModel: [
	700	+ { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
	701	+ { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
	702	+ { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
	703	+ { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
	704	+ { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
	705	+ ],
	706	+ }
	707	+ },
	708	+}
	709	+</script>
	710	+```
	711	+
	712	+:::
	713	+
664	714	## API
665	715
666	716	## Attribute 属性
...	...
...	...	@@ -30,9 +30,10 @@
30	30	<eagle-schema-table
31	31	:size="_size"
32	32	:schema="tableSchemaDefaultProps(schema.table)"
33		- v-model="tableData"
	33	+ :value="datagrid ? datagridData : tableData"
34	34	v-loading="schema.loading !== false ? tableLoading : false"
35	35	@selection-change="onTableSelectionChange"
	36	+ @input="onTableInput"
36	37	>
37	38	<template #left>
38	39	<el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
...	...	@@ -59,7 +60,7 @@
59	60	</slot>
60	61	</div>
61	62	<!-- 底部区域 -->
62		- <div v-if="schema.selection !== false \|\| schema.pagination !== false \|\| $scopedSlots.footer" class="eagle-schema-page__footer">
	63	+ <div v-if="!datagrid && (schema.selection !== false \|\| schema.pagination !== false \|\| $scopedSlots.footer)" class="eagle-schema-page__footer">
63	64	<slot name="footer" v-bind="_slotScope">
64	65	<div v-if="schema.selection !== false && selection.length > 0" class="selection-info">
65	66	<span>已选中</span>
...	...	@@ -173,7 +174,7 @@ setKeysDefault(['value-table'], {
173	174	},
174	175	});
175	176	setKeysDefault(['size', 'dialogTitle', 'dialogType'], String);
176		-setKeysDefault(['dialogVisible', 'auto', 'loading'], Boolean);
	177	+setKeysDefault(['dialogVisible', 'auto', 'loading', 'datagrid'], Boolean);
177	178	setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function);
178	179
179	180	export default {
...	...	@@ -321,6 +322,11 @@ export default {
321	322	closed: this.onDialogClosed,
322	323	};
323	324	},
	325	+ datagridData() {
	326	+ return this.tableData.map((row, index) => {
	327	+ return { ...row, $index: index };
	328	+ });
	329	+ },
324	330	},
325	331	methods: {
326	332	tableSchemaDefaultProps(val) {
...	...	@@ -352,6 +358,9 @@ export default {
352	358	},
353	359	// 查询
354	360	search() {
	361	+ if (this.datagrid) {
	362	+ return;
	363	+ }
355	364	if (!this.tableLoading) {
356	365	this.tableLoading = true;
357	366	const params = {
...	...	@@ -371,6 +380,12 @@ export default {
371	380	});
372	381	}
373	382	},
	383	+ // 表格数据改变
	384	+ onTableInput(value) {
	385	+ if (!this.datagrid) {
	386	+ this.tableData = value;
	387	+ }
	388	+ },
374	389	// 重置查询
375	390	onSearch() {
376	391	this.currentPage = 1;
...	...	@@ -385,8 +400,25 @@ export default {
385	400	let submitAPI = this.apiSubmit \|\| this.emptyPromise;
386	401	if (this.modalType === 'new') {
387	402	submitAPI = this.apiNew \|\| this.apiSubmit \|\| this.emptyPromise;
	403	+ if (this.datagrid) {
	404	+ submitAPI = () => {
	405	+ return new Promise(resolve => {
	406	+ this.tableData.push(value);
	407	+ resolve();
	408	+ });
	409	+ };
	410	+ }
388	411	} else if (this.modalType === 'edit') {
389	412	submitAPI = this.apiEdit \|\| this.apiSubmit \|\| this.emptyPromise;
	413	+ if (this.datagrid) {
	414	+ submitAPI = () => {
	415	+ return new Promise(resolve => {
	416	+ const { $index, ...other } = value;
	417	+ this.$set(this.tableData, value.$index, other);
	418	+ resolve();
	419	+ });
	420	+ };
	421	+ }
390	422	}
391	423	submitAPI(this.valueForm, { type: this.modalType })
392	424	.then(() => {
...	...	@@ -502,7 +534,21 @@ export default {
502	534	customClass: 'eagle-loading-toast',
503	535	background: 'rgba(0, 0, 0, 0)',
504	536	});
505		- const deleteAPI = this.apiDelete \|\| this.emptyPromise;
	537	+ let deleteAPI = this.apiDelete \|\| this.emptyPromise;
	538	+ if (this.datagrid) {
	539	+ deleteAPI = () => {
	540	+ return new Promise(resolve => {
	541	+ this.tableData = this.datagridData
	542	+ .filter(row => {
	543	+ return !selection.map(i => i.$index).includes(row.$index);
	544	+ })
	545	+ .map(({ $index, ...other }) => {
	546	+ return other;
	547	+ });
	548	+ resolve();
	549	+ });
	550	+ };
	551	+ }
506	552	deleteAPI(selection)
507	553	.then(() => {
508	554	this.search();
...	...