feat: add export data hook

client/containers/Project/Setting/ProjectData/ProjectData.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Upload, Icon, message, Select, Tooltip } from 'antd';
+import { Upload, Icon, message, Select, Tooltip, Button } from 'antd';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import './ProjectData.scss';
@@ -11,7 +11,7 @@ const Option = Select.Option;
 const plugin = require('client/plugin.js');
 
 const importDataModule = {};
-
+const exportDataModule = {};
 @connect(
   state => {
     // console.log(state);
@@ -30,7 +30,8 @@ class ProjectData extends Component {
     this.state = {
       selectCatid: "",
       menuList: [],
-      curImportType: null
+      curImportType: null,
+      curExportType: null
     }
   }
   static propTypes = {
@@ -46,7 +47,8 @@ class ProjectData extends Component {
         menuList: menuList
       })
     });
-    plugin.emitHook('import_data', importDataModule, this.props);
+    plugin.emitHook('import_data', importDataModule);
+    plugin.emitHook('export_data', exportDataModule, this.props.match.params.id);
   }
   selectChange(value) {
     this.setState({
@@ -141,6 +143,12 @@ class ProjectData extends Component {
     })
   }
 
+  handleExportType = (val) => {
+    this.setState({
+      curExportType: val
+    })
+  }
+
   /**
    *
    *
@@ -169,8 +177,6 @@ class ProjectData extends Component {
                   {Object.keys(importDataModule).map((name) => {
                     return <Option key={name} value={name}>{importDataModule[name].name}</Option>
                   })}
-
-
                 </Select>
               </div>
               <div className="catidSelect">
@@ -185,7 +191,6 @@ class ProjectData extends Component {
                   {this.state.menuList.map((item, key) => {
                     return <Option key={key} value={item._id + ""}>{item.name}</Option>;
                   })}
-
                 </Select>
               </div>
               <div style={{ marginTop: 16, height: 180 }}>
@@ -198,6 +203,22 @@ class ProjectData extends Component {
                 </Dragger>
               </div>
             </div>
+
+            <div className="dataImportCon" style={{marginLeft: '20px'}}>
+              <div ><h3>数据导出&nbsp;<a target="_blank" rel="noopener noreferrer" href="https://yapi.ymfe.org/data.html" >
+                <Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip>
+              </a></h3></div>
+              <div className="dataImportTile">
+                <Select placeholder="请选择导出数据的方式" onChange={this.handleExportType}>
+                  {Object.keys(exportDataModule).map((name) => {
+                    return <Option key={name} value={exportDataModule[name].route}>{exportDataModule[name].name}</Option>
+                  })}
+                </Select>
+              </div>
+              <div style={{marginTop: '16px', textAlign: 'center', backgroundColor: '#eee'}}>
+                <Button style={{width: '100px', height: '35px'}} type="primary" size="large"> 导出 </Button>
+              </div>
+            </div>
           </div>
         </div>
       </div>

client/containers/Project/Setting/ProjectData/ProjectData.scss

@@ -1,19 +1,24 @@
-.dataImportCon{
-    display: inline-block;
-    background-color: #ececec;
-    padding: 16px;
-    border-radius: 4px;
-    .ant-upload-drag{
+.postman-dataImport{
+    display: flex;
+    .dataImportCon{
+        min-width: 274px;
+        background-color: #ececec;
         padding: 16px;
-        background-color: white;
-    }
-    .dataImportTile{
-        color: #2395f1;
-        padding: 16px 0px;
-        font-weight: 500;
-        width: 100%;
-        .ant-select{
+        border-radius: 4px;
+
+        .ant-upload-drag{
+            padding: 16px;
+            background-color: white;
+        }
+        .dataImportTile{
+            color: #2395f1;
+            padding: 16px 0px;
+            font-weight: 500;
             width: 100%;
+            .ant-select{
+                width: 100%;
+            }
         }
     }
 }
+

client/plugin.js

@@ -9,21 +9,43 @@ let hooks, pluginModule;
  */
 
 hooks = {
+  /**
+   * 第三方登录 //可参考 yapi-plugin-qsso 插件
+   */
   third_login: {
     type: 'component',
     mulit: false,
     listener: null
   },
-  add_interface: {
-    type: 'listener',
-    mulit: true,
-    listener: []
-  },
+  /**
+   * 第三方登录 //可参考 yapi-plugin-qsso 插件
+   */
   import_data: {
     type: 'listener',
     mulit: true,
     listener: []
   },
+   /**
+   * 接口页面 tab 钩子
+   * @param InterfaceTabs
+   * 
+   * @info
+   * 可参考 vendors/exts/yapi-plugin-advanced-mock
+   * let InterfaceTabs = {
+      view: {
+        component: View,
+        name: '预览'
+      },
+      edit: {
+        component: Edit,
+        name: '编辑'
+      },
+      run: {
+        component: Run,
+        name: '运行'
+      }
+    }
+   */
   interface_tab: {
     type: 'listener',
     mulit: true,
@@ -73,14 +95,14 @@ pluginModule = {
   emitHook: emitHook
 }
 let pluginModuleList;
-try{
+try {
   pluginModuleList = require('./plugin-module.js');
-}catch(err){pluginModuleList = {}}
+} catch (err) { pluginModuleList = {} }
 
 
-Object.keys(pluginModuleList).forEach(plugin=>{
+Object.keys(pluginModuleList).forEach(plugin => {
   if (!pluginModuleList[plugin]) return null;
-  if(pluginModuleList[plugin] && typeof pluginModuleList[plugin].module === 'function'){
+  if (pluginModuleList[plugin] && typeof pluginModuleList[plugin].module === 'function') {
     pluginModuleList[plugin].module.call(pluginModule, pluginModuleList[plugin].options)
   }
 })

server/plugin.js

@@ -11,6 +11,7 @@ var hooks = {
     /**
      * 第三方sso登录钩子，暂只支持设置一个
      * @param ctx 
+     * @return 必需返回一个 promise 对象，resolve({username: '', email: ''})
      */
     'third_login': {
         type: 'single',