From 8a0c5cbbbb7f57aef07082cb34388ecdee7360ee Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Wed, 3 Mar 2021 14:06:42 +0800
Subject: [PATCH] feat: 修改SchemaPage组件支持抽屉

---
 examples/views/docs/component/schema-page.md | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 packages/schema-page/index.scss              |  26 ++++++++++++++++++++++++++
 packages/schema-page/index.vue               | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
 3 files changed, 207 insertions(+), 31 deletions(-)

diff --git a/examples/views/docs/component/schema-page.md b/examples/views/docs/component/schema-page.md
index ecbe405..3520594 100644
--- a/examples/views/docs/component/schema-page.md
+++ b/examples/views/docs/component/schema-page.md
@@ -365,7 +365,7 @@ export default {
 
 :::
 
-## 弹窗类型
+## 自定义弹窗
 
 除了本组件内置的`new`、`edit`、`detail`三种弹出框模式之外，还可以通过任意插槽打开任意自定义弹出框。也支持重新定义原有的三种弹框，同时也需要重新自定义表单校验和提交等逻辑。
 
@@ -485,6 +485,115 @@ export default {
 
 :::
 
+## 弹窗类型
+
+弹出框组件默认为`el-dialog`，使用自定义弹窗时，可以设置为`el-drawer`。
+
+::: snippet 通过`openDialog`的config参数配置`is: 'el-drawer'`即可改为抽屉式弹窗，`dialog-xxx-footer`可以设置抽屉固定的footer
+
+```html
+<template>
+  <z-schema-page :schema="schema" :value-table.sync="tableModel">
+    <template #action-button="{ size, openDialog }">
+      <el-button :size="size" @click="openDialog('bill', '账单', { is: 'el-drawer', width: '70%' })">账单</el-button>
+    </template>
+    <template #operation-button="{ openDialog, row }">
+      <el-button type="text" @click="openDialog('load', `配置-${row.name}`, { is: 'el-drawer', width: '400px' })">配载</el-button>
+    </template>
+    <template #table-cell-name="{ value, row, openDetail }">
+      <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link>
+    </template>
+    <template #dialog-bill="{ closeDialog }">
+      <div style="background: #f5f5f5; height: 90vh; display: flex; align-items: center; justify-content: center">一段很长的内容</div>
+      <z-schema-table v-model="billData" :schema="billSchema"></z-schema-table>
+    </template>
+    <template #dialog-bill-footer="{ closeDialog }">
+      <el-button plain @click="closeDialog">关闭</el-button>
+    </template>
+    <template #dialog-load="{ closeDialog }">
+      <el-alert title="这里是一段自定义信息" type="error" show-icon style="margin-bottom: 20px"></el-alert>
+      <z-schema-form v-model="loadModel" :schema="loadSchema"></z-schema-form>
+      <el-button type="primary" @click="closeDialog">关闭弹出框</el-button>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          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 },
+          ]
+        },
+        operation: { width: 120 }
+      },
+      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: '正常' },
+      ],
+      loadModel: {
+        name: '',
+        count: 1,
+        packages: []
+      },
+      loadSchema: {
+        props: { 'label-width': '70px', size: 'small' },
+        items: [
+          { is: 'el-input', prop: 'name', label: '名称' },
+          { is: 'el-input-number', prop: 'count', label: '数量' },
+          {
+            is: 'el-checkbox-group',
+            prop: 'packages',
+            label: '包裹',
+            children: [
+              { is: 'el-checkbox', props: { label: '零食' } },
+              { is: 'el-checkbox', props: { label: '手机' } },
+              { is: 'el-checkbox', props: { label: '电脑' } },
+            ],
+          },
+        ]
+      },
+      billData: [
+        { billno: 'B20210401000001', amount: '18750' },
+        { billno: 'B20210401000002', amount: '637' },
+      ],
+      billSchema: {
+        items: [
+          { label: '单号', prop: 'billno' },
+          { label: '金额', prop: 'amount' },
+        ]
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
+
 ## 按钮权限
 
 本组件不包含自定义业务逻辑，因此配置项不包含权限判断，如果需要按钮的权限判断，可以通过`action`插槽和`operation`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。
diff --git a/packages/schema-page/index.scss b/packages/schema-page/index.scss
index 26cf857..f9c518e 100644
--- a/packages/schema-page/index.scss
+++ b/packages/schema-page/index.scss
@@ -96,4 +96,30 @@
       margin-top: 10px;
     }
   }
+}
+
+.z-schema-page__drawer {
+  .el-drawer__header {
+    padding-bottom: 10px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #DCDFE6;
+  }
+  .el-drawer__body {
+    box-sizing: border-box;
+    height: calc(100vh - 55px);
+  }
+  &-content {
+    padding: 20px;
+    overflow-y: auto;
+  }
+  &-footer {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 10px;
+    background: #fff;
+    border-top: 1px solid #DCDFE6;
+  }
 }
\ No newline at end of file
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
index 2b585eb..aba7ce5 100644
--- a/packages/schema-page/index.vue
+++ b/packages/schema-page/index.vue
@@ -75,19 +75,32 @@
       </slot>
     </div>
     <!-- 弹出框 -->
-    <el-dialog :title="elDialogTitle" :visible.sync="visible" v-bind="_dialogProps" @update:visible="onVisibleUpdate" @close="onDialogClose" @closed="onDialogClosed">
+    <el-drawer :visible="_modalComponent === 'el-drawer' && visible" v-bind="_drawerProps" v-on="_modalListeners">
+      <template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope">
+        <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+      </template>
+      <template v-if="_modalComponent === 'el-drawer' && modalRender">
+        <div v-loading="dialogLoading" class="z-schema-page__drawer-content" :style="`height: calc(100vh - ${getSlot(`dialog-${modalType}-footer`) ? 115 : 55}px);`">
+          <slot :name="`dialog-${modalType}`" v-bind="_slotScope"></slot>
+        </div>
+        <div v-if="getSlot(`dialog-${modalType}-footer`)" class="z-schema-page__drawer-footer">
+          <slot :name="`dialog-${modalType}-footer`" v-bind="_slotScope"></slot>
+        </div>
+      </template>
+    </el-drawer>
+    <el-dialog :visible="_modalComponent === 'el-dialog' && visible" v-bind="_dialogProps" v-on="_modalListeners">
       <template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope">
         <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
       </template>
       <!-- 弹出框内容渲染状态，用于关闭时销毁已渲染的内容 -->
-      <template v-if="elDialogRender">
+      <div v-if="_modalComponent === 'el-dialog' && modalRender" v-loading="dialogLoading">
         <!-- 自定义弹出框内容 -->
-        <slot v-if="getSlot(`dialog-${elDialogType}`)" :name="`dialog-${elDialogType}`" v-bind="_slotScope"></slot>
-        <div v-else v-loading="dialogLoading">
+        <slot v-if="getSlot(`dialog-${modalType}`)" :name="`dialog-${modalType}`" v-bind="_slotScope"></slot>
+        <template v-else>
           <!-- 新增/修改弹出框内容 -->
-          <template v-if="['new', 'edit'].includes(elDialogType)">
+          <template v-if="['new', 'edit'].includes(modalType)">
             <z-schema-form
-              :key="`form-${elDialogType}`"
+              :key="`form-${modalType}`"
               ref="form"
               :value="valueForm"
               @input="e => $emit('update:value-form', e)"
@@ -107,15 +120,15 @@
             </z-schema-form>
           </template>
           <!-- 详情弹出框内容 -->
-          <template v-else-if="elDialogType === 'detail'">
+          <template v-else-if="modalType === 'detail'">
             <z-schema-form key="form-detail" ref="form" v-model="detail" :schema="schema.detail || detailSchema">
               <template v-for="item in getSlotKeys('detail-')" #[item.name]="slotScope">
                 <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
               </template>
             </z-schema-form>
           </template>
-        </div>
-      </template>
+        </template>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -169,10 +182,10 @@ export default {
       layout: get(this.schema, 'pagination.layout') || 'total, sizes, prev, pager, next, jumper',
       total: get(this.schema, 'pagination.total') || 0,
       visible: this.dialogVisible,
-      elDialogRender: true,
-      elDialogType: this.dialogType || 'none',
-      elDialogTitle: this.dialogTitle || '',
-      elDialogProps: {},
+      modalRender: true,
+      modalType: this.dialogType || 'none',
+      modalTitle: this.dialogTitle || '',
+      modalProps: {},
       detailSchema: filterout(cloneDeep(this.schema.form), ['is', 'rules']),
       detail: this.valueDetail || {},
       tableData: this.valueTable || [],
@@ -201,15 +214,15 @@ export default {
       this.$emit('update:dialog-visible', val);
     },
     dialogType(val) {
-      this.elDialogType = val;
+      this.modalType = val;
     },
-    elDialogType(val) {
+    modalType(val) {
       this.$emit('update:dialog-type', val);
     },
     dialogTitle(val) {
-      this.elDialogTitle = val;
+      this.modalTitle = val;
     },
-    elDialogTitle(val) {
+    modalTitle(val) {
       this.$emit('update:dialog-title', val);
     },
     valueTable(val) {
@@ -238,13 +251,41 @@ export default {
       }, defaultScope);
     },
     _dialogProps() {
+      const { is, ...other } = this.modalProps || {};
       return {
-        'destroy-on-close': true,
-        'append-to-body': true,
+        title: this.modalTitle,
         'lock-scroll': false,
+        'append-to-body': true,
+        'destroy-on-close': true,
         'close-on-click-modal': false,
         ...(this.schema.dialog || {}),
-        ...this.elDialogProps,
+        ...other,
+      };
+    },
+    _drawerProps() {
+      const { is, ...other } = this.modalProps || {};
+      return {
+        title: this.modalTitle,
+        size: '50%',
+        'append-to-body': true,
+        'destroy-on-close': true,
+        'close-on-click-modal': false,
+        'custom-class': 'z-schema-page__drawer',
+        ...(this.schema.drawer || {}),
+        ...other,
+      };
+    },
+    _modalComponent() {
+      if (this.modalProps.is === 'el-drawer') {
+        return 'el-drawer';
+      }
+      return 'el-dialog';
+    },
+    _modalListeners() {
+      return {
+        'update:visible': this.onVisibleUpdate,
+        close: this.onDialogClose,
+        closed: this.onDialogClosed,
       };
     },
   },
@@ -300,12 +341,12 @@ export default {
       } else {
         this.submitting = true;
         let submitAPI = this.apiSubmit || this.emptyPromise;
-        if (this.elDialogType === 'new') {
+        if (this.modalType === 'new') {
           submitAPI = this.apiNew || this.apiSubmit || this.emptyPromise;
-        } else if (this.elDialogType === 'edit') {
+        } else if (this.modalType === 'edit') {
           submitAPI = this.apiEdit || this.apiSubmit || this.emptyPromise;
         }
-        submitAPI(this.valueForm, { type: this.elDialogType })
+        submitAPI(this.valueForm, { type: this.modalType })
           .then(() => {
             if (this.$listeners['submit-success']) {
               this.$emit('submit-success');
@@ -365,10 +406,10 @@ export default {
     },
     // 打开弹出框
     openDialog(type, title, config) {
-      this.elDialogRender = true;
-      this.elDialogType = type;
-      this.elDialogTitle = title;
-      this.elDialogProps = config || {};
+      this.modalRender = true;
+      this.modalType = type;
+      this.modalTitle = title;
+      this.modalProps = config || {};
       this.visible = true;
       this.$emit('dialog-change', type);
     },
@@ -382,7 +423,7 @@ export default {
     },
     // 弹出框关闭
     onDialogClose() {
-      this.elDialogType = 'none';
+      this.modalType = 'none';
       this.$emit('dialog-change', 'none');
     },
     // 弹出框关闭动画结束
@@ -390,8 +431,8 @@ export default {
       if (this.$refs.form) {
         this.$refs.form.resetFields();
       }
-      this.elDialogRender = false;
-      this.elDialogProps = {};
+      this.modalRender = false;
+      this.modalProps = {};
       this.$emit('update:value-form', this.cloneDeep(this.originProps).valueForm);
       this.$emit('update:value-detail', this.cloneDeep(this.originProps).detailValue);
     },
--
libgit2 0.21.0