From 0e4ed155a4c248f73b382d3a082e04e6fb37d289 Mon Sep 17 00:00:00 2001
From: Aaron.Liu <427787340@qq.com>
Date: Sun, 17 Oct 2021 22:02:23 +0800
Subject: [PATCH] feat: 新增SchemaPage组件的datagrid效果

---
 examples/views/docs/component/schema-page.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/schema-page/index.vue               | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/examples/views/docs/component/schema-page.md b/examples/views/docs/component/schema-page.md
index c67ec34..1b97cc1 100644
--- a/examples/views/docs/component/schema-page.md
+++ b/examples/views/docs/component/schema-page.md
@@ -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 属性
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
index 93b5883..a8b1640 100644
--- a/packages/schema-page/index.vue
+++ b/packages/schema-page/index.vue
@@ -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(['value-table'], {
   },
 });
 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();
--
libgit2 0.21.0