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,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	## API	714	## API
665		715
666	## Attribute 属性	716	## Attribute 属性