From bf7244a861a8b4293017b6b6d668b5549faf0f02 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 26 Jul 2019 18:51:47 +0800
Subject: [PATCH] 完善Scheme组件请求

---
 examples/main.js              |  84 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 examples/router/routes.js     |  26 +++++++++++---------------
 examples/views/docs/scheme.md |   7 +++++--
 examples/views/docs/table.md  |   7 ++-----
 examples/views/page/test.vue  |  83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/detail/index.vue     |   7 +++++++
 packages/form/index.vue       |  27 ++++++++++++---------------
 packages/scheme/index.vue     | 294 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------
 packages/scheme/utils.js      |  41 +++++++++++++++++++++++++++++++++++++++++
 packages/table/index.vue      |   8 ++------
 10 files changed, 486 insertions(+), 98 deletions(-)
 create mode 100644 examples/views/page/test.vue
 create mode 100644 packages/scheme/utils.js

diff --git a/examples/main.js b/examples/main.js
index 38737cb..0e1664e 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -13,7 +13,89 @@ import '@/styles/theme/index.css';
 import '@/styles/nprogress.scss';
 import "highlight.js/styles/color-brewer.css";
 
-Vue.prototype.$axios = axios;
+import { Notification } from 'element-ui';
+
+const request = axios.create({
+  baseURL: 'http://47.110.137.80:7101/',
+  timeout: 1000,
+  headers: {
+    'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE2NTE4ODM0MTEsInN1YiI6ImFkbWluIiwiY3JlYXRlZCI6MTU1MTg4MzQxMTk2NX0.rocgsQq_EEbBDV-BcHpJCUS92KGjBH-0Pf47IrW9v3aj6xJCoFIrnKX4vtpPfYscTk1roBhR5s3I1DIvT8B9wg'
+  }
+});
+
+const codeMessage = {
+  200: '服务器成功返回请求的数据',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据,的操作。',
+  401: '用户没有权限（令牌、用户名、密码错误）。',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器',
+  502: '网关错误',
+  503: '服务不可用，服务器暂时过载或维护',
+  504: '网关超时'
+};
+
+const checkStatus = (response) => {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+  const errortext = codeMessage[response.status] || response.statusText;
+  const messageContent = `
+    ${response.request.responseURL}
+    ${errortext}
+  `;
+  Notification.error({
+    title: `请求错误 ${response.status}:`,
+    message: messageContent,
+    duration: 3000,
+  });
+  const error = new Error(errortext);
+  error.name = response.status;
+  error.response = response;
+  return error;
+}
+
+// respone 拦截器
+request.interceptors.response.use(
+  response => {
+    const { data = {} } = response;
+    const { businessException, errorCode, message, success } = data;
+    if (success) {
+      return data;
+    } else if (businessException) {
+      if (errorCode) {
+        Notification.error({
+          title: '提示',
+          message,
+          duration: 3000,
+        });
+      }
+      return { success: false };
+    } else {
+      if (errorCode) {
+        Notification.error({
+          title: '提示',
+          message: codeMessage[errorCode],
+          duration: 3000,
+        });
+      }
+      return { success: false };
+    }
+  },
+  error => {
+    const e = checkStatus(error.response);
+    return { success: false };
+  });
+
+Vue.prototype.$axios = request;
+
+
 
 // 进度条配置
 NProgress.configure({ showSpinner: false });
diff --git a/examples/router/routes.js b/examples/router/routes.js
index 8a28080..ac83ef2 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -54,24 +54,20 @@ const _components = [
         component: () => import('@/views/docs/scheme.md'),
       },
     ]
+  },
+  {
+    group: '测试',
+    children: [
+      {
+        path: 'test',
+        name: 'test',
+        meta: { title: 'Scheme 测试' },
+        component: () => import('@/views/page/test'),
+      },
+    ]
   }
 ]
 
-// const _components = [
-//   {
-//     path: 'select',
-//     name: 'select',
-//     meta: { title: 'Select 选择器', group },
-//     component: () => import('@/views/docs/select.md'),
-//   },
-//   {
-//     path: 'form',
-//     name: 'form',
-//     meta: { title: 'Form 表单' },
-//     component: () => import('@/views/docs/form.md'),
-//   },
-// ]
-
 let _components_children = [];
 _components.forEach(data => {
   _components_children = [..._components_children, ...data.children]
diff --git a/examples/views/docs/scheme.md b/examples/views/docs/scheme.md
index 4b0518a..8733f42 100644
--- a/examples/views/docs/scheme.md
+++ b/examples/views/docs/scheme.md
@@ -11,6 +11,9 @@ Scheme是一个数据驱动的解决方案，通过既定的业务配置参数�
 ```html
 <template>
   <eagle-scheme :list="schemeList">
+    <!-- <div slot="action-bar" slot-scope="{ handleNew }">
+      <el-button type="warn" @click="handleNew">新增</el-button>
+    </div> -->
     <el-button slot="action-button" type="success" plain size="small">启用</el-button>
     <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
     <el-table-column type="selection" width="50" align="center"></el-table-column>
@@ -66,9 +69,9 @@ export default {
         { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
         { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
           exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
-        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting' }, tip: '类型随便填' },
+        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
         { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
-        { type: 'el-input', key: 'status', label: '状态', formScheme: { label: '状态码' } },
+        { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
       ],
       dataSource: [
         { label: '选项A', value: 'A' },
diff --git a/examples/views/docs/table.md b/examples/views/docs/table.md
index 206847e..e720b63 100644
--- a/examples/views/docs/table.md
+++ b/examples/views/docs/table.md
@@ -10,7 +10,7 @@
 
 ```html
 <template>
-  <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps"></eagle-table>
+  <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
 </template>
 
 <script>
@@ -23,9 +23,6 @@ export default {
         { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
         { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
       ],
-      tableProps: {
-        border: true
-      },
       tableList: [
         { key: 'name', label: '名称',
           formatter(row, column) {
@@ -107,7 +104,7 @@ export default {
     }
   },
   mounted() {
-    console.log(this.$refs.table.tableInstance);
+    console.log(this.$refs.table.instance);
   },
   methods: {
     handleSubmit(value) {
diff --git a/examples/views/page/test.vue b/examples/views/page/test.vue
new file mode 100644
index 0000000..c4342f2
--- /dev/null
+++ b/examples/views/page/test.vue
@@ -0,0 +1,83 @@
+<template>
+  <eagle-scheme
+    :option="{ $http: $axios, url: '/dataDictionary', detailMethod: 'queryById', getMethod: 'queryById', editMethod: 'modify' }"
+    :list="schemeList"
+    :formProps="{ span: 24, 'label-width': '60px' }"
+    :detailProps="{ span: 24, 'label-width': '50px' }"
+    :dialogProps="dialogProps"
+    @dialog-change="handleDialogChange"
+  ></eagle-scheme>
+</template>
+
+<script>
+export default {
+  name: 'test',
+  data() {
+    return {
+      schemeList: [
+        { type: 'el-input', label: 'ID', key: 'id', include: 'form', visible: (model, { formMode } = {}) => { return formMode == 'edit' },
+          props: { disabled: true },
+        },
+        { type: 'el-input', label: '编码', key: 'code', exclude: 'search',
+          rules: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
+          props: { placeholder: '编码' },
+        },
+        { type: 'el-input', label: '名称', key: 'name',
+          rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+          props: { placeholder: '名称' },
+        },
+        { type: 'el-input', label: '备注', key: 'remark', include: 'table',
+          props: { placeholder: '备注' },
+        },
+      ],
+      dialogType: '',
+    }
+  },
+  computed: {
+    dialogProps() {
+      return { width: this.dialogType === 'dialog-form' ? '500px' : '400px' };
+    }
+  },
+  methods: {
+    async searchAPI(param) {
+      return this.$axios.get(`/dataDictionary/page?current=1&size=10`)
+        .then((response) => {
+          const { result = [], totalCount = 0 } = response || {};
+          return { result, totalCount };
+        }).catch(() => {
+          return {};
+        });
+    },
+    async getAPI(param) {
+      return this.$axios.get(`/dataDictionary/queryById?id=${param.id}`)
+        .then((response) => {
+          const { result = {} } = response || {};
+          return result;
+        }).catch(() => {
+          return {};
+        });
+    },
+    async newAPI(param) {
+      return this.$axios.post('/dataDictionary/add', param)
+        .then((response) => {
+          const { success = false } = response || {};
+          return success;
+        }).catch(() => {
+          return false;
+        });
+    },
+    async editAPI(param) {
+      return this.$axios.post('/dataDictionary/modify', param)
+        .then((response) => {
+          const { success = false } = response || {};
+          return success;
+        }).catch(() => {
+          return false;
+        });
+    },
+    handleDialogChange(type) {
+      this.dialogType = type;
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/packages/detail/index.vue b/packages/detail/index.vue
index cb79745..5070d2d 100644
--- a/packages/detail/index.vue
+++ b/packages/detail/index.vue
@@ -145,6 +145,13 @@ export default {
     list(value) {
       this.initModel(value);
     },
+    model: {
+      handler(val) {
+        this.$emit("input", val);
+        this.$emit("change", val);
+      },
+      deep: true
+    }
   },
   methods: {
     // 设置表单值
diff --git a/packages/form/index.vue b/packages/form/index.vue
index 9c7fd6c..a3b92ae 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -17,7 +17,7 @@
 </style>
 
 <template>
-  <el-form class="eagle-form" ref="form" :model="model" v-bind="formProps">
+  <el-form class="eagle-form" ref="form" :model="model" v-bind="{ size: 'small', 'label-width': '90px', ...formProps }">
     <el-row :gutter="15">
       <template v-for="(data, index) in listOption.dataList">
         <template v-if="listOption.isGroup">
@@ -72,12 +72,7 @@ export default {
     // 表单参数
     formProps: {
       type: Object,
-      default() {
-        return {
-          size: 'small',
-          'label-width': '70px'
-        }
-      }
+      default() { return {} }
     },
     // 纯净提交
     submitPure: {
@@ -87,13 +82,15 @@ export default {
     // 底部样式
     footerStyle: {
       type: [String, Object],
-      default: 'text-align: center'
+      default: 'text-align: center;margin-top: 20px;'
     },
     // 表单项占位
     span: {
       type: Number,
       default: 24
-    }
+    },
+    // 用于做动态判断的参数集
+    params: Object,
   },
   data() {
     return {
@@ -199,7 +196,7 @@ export default {
     bindItemEvent(item) {
       if (item.on) {
         if (typeof item.on === 'function') {
-          return item.on(this.model);
+          return item.on(this.model, this.params);
         } else {
           return item.on
         }
@@ -218,9 +215,9 @@ export default {
       let visible = true;
       const item = this.listKeySet[key] || {};
       if (typeof item.visible === 'function') {
-        visible = item.visible({ ...this.model }); // 返回model的复制结果，判断类属性禁止改变model，防止循环导致内存溢出
+        visible = item.visible({ ...this.model }, this.params); // 返回model的复制结果，判断类属性禁止改变model，防止循环导致内存溢出
       } else {
-        visible = item.visible === undefined ? true : item.visible; // 没有定义visible时返回true，否则返回visible定义的值。【注意：不可写成“ !item.visible ”】
+        visible = item.visible === undefined ? true : item.visible; // 没有定义visible时返回true，否则返回visible定义的值(包括false)。【注意：不可写成“ !item.visible ”】
       }
       return visible;
     },
@@ -228,7 +225,7 @@ export default {
     bindItemVisible(visible = true) {
       let result = visible;
       if (typeof visible === 'function') {
-        result = visible(this.model);
+        result = visible(this.model, this.params);
       }
       return result;
     },
@@ -236,7 +233,7 @@ export default {
     bindItemShow(show = true) {
       let result = show;
       if (typeof show === 'function') {
-        result = show(this.model);
+        result = show(this.model, this.params);
       }
       return result;
     },
@@ -246,7 +243,7 @@ export default {
       let result = { ...props };
       Object.keys(result).forEach(key => {
         if (typeof result[key] === 'function') {
-          result[key] = result[key](this.model);
+          result[key] = result[key](this.model, this.params);
         }
       });
       return result;
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index ce97662..945812a 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -33,9 +33,11 @@
   display: flex;
   align-items: center;
 }
-.eagle-scheme__table .eagle-scheme__table-btn:not(:first-child) {
-  padding-left: 10px;
+.eagle-scheme__table .eagle-scheme__table-btn:not(:last-child) {
+  padding-left: 0px;
+  padding-right: 10px;
   margin-left: 0px;
+  margin-right: 0px;
 }
 .eagle-scheme__pagination {
   text-align: right;
@@ -59,17 +61,20 @@
     </div>
     <!-- 操作按钮栏 -->
     <div v-if="!option.showActionBar" class="eagle-scheme__action" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)">
-      <el-button class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">新增</el-button>
-      <el-button v-if="hasSelectionSlot" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">删除</el-button>
-      <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot>
-      <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0" class="eagle-scheme__action-btn eagle-scheme__text-selection">已选中<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>项</div>
+      <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" :handleNew="handleNew" :handleDelete="handleDelete" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot>
+      <template v-else>
+        <el-button class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">新增</el-button>
+        <el-button v-if="hasSelectionSlot" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">删除</el-button>
+        <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot>
+        <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0" class="eagle-scheme__action-btn eagle-scheme__text-selection">已选中<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>项</div>
+      </template>
     </div>
     <div class="eagle-scheme__table">
       <!-- 表格 -->
       <eagle-table ref="eagle-table" :list="_tableList" :value="tableData"
         v-loading="tableLoading"
         element-loading-background="rgba(255, 255, 255, 0.6)"
-        :tableProps="{ size: 'small', border: true, 'row-key': 'id', ...tableProps }"
+        :tableProps="{ border: true, 'row-key': 'id', ...tableProps }"
         :tableEvents="{
           'selection-change': handleTableSelectionChange,
           ...tableEvents,
@@ -109,8 +114,8 @@
           :page-size="pageSize" :total="totalCount" v-bind="{ 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper', ...paginationProps }"></el-pagination>
       </div>
     </div>
-    <el-dialog :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }">
-      <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" :list="_formList" v-model="formModel" :span="formProps.span || 12" :formProps="{ size: 'small', 'label-width': '90px', ...formProps }" @submit="handleSubmit" @cancel="handleCancel">
+    <el-dialog v-loading="dialogLoading" element-loading-background="rgba(255, 255, 255, 0.3)" :custom-class="dialogProps['custom-class'] || 'eagle-scheme__dialog'" :title="dialogProps.title || dialogTitle" :visible.sync="dialogVisible" v-bind="{ width: '65%', ...dialogProps }">
+      <eagle-form v-if="dialogType === 'dialog-form' && !$scopedSlots['dialog-form'] && !$slots['dialog-form']" :list="_formList" v-model="formModel" :params="{ formMode }" :span="formProps.span || 12" :formProps="formProps" @submit="handleSubmit" @cancel="handleCancel">
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`form-${key}`] || $slots[`form-${key}`]" :name="`form-${key}`" :slot="key" :model="formModel"></slot>
@@ -120,7 +125,7 @@
           <slot v-if="$scopedSlots[`form-item-${item.key}`] || $slots[`form-item-${item.key}`]" :name="`form-item-${item.key}`" :slot="`item-${item.key}`" :model="formModel"></slot>
         </template>
       </eagle-form>
-      <eagle-detail v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="_formList">
+      <eagle-detail v-else-if="dialogType === 'dialog-view' && !$scopedSlots['dialog-view'] && !$slots['dialog-view']" v-model="formModel" :list="list || detailList || _formList" :span="detailProps.span || 8" :detailProps="detailProps">
         <!-- 表单分组具名插槽 -->
         <template v-for="key in formGroupSlotsKeys">
           <slot v-if="$scopedSlots[`view-${key}`] || $slots[`view-${key}`]" :name="`view-${key}`" :slot="key" :model="formModel"></slot>
@@ -138,6 +143,9 @@
 
 <script>
 import { generateListSpace } from './parser';
+import { stringify } from './utils';
+
+let _$http = null;
 
 export default {
   name: 'Scheme',
@@ -155,6 +163,8 @@ export default {
     formList: Array,
     // 表格配置
     tableList: Array,
+    // 详情配置
+    detailList: Array,
     // 表格参数
     tableProps: {
       type: Object,
@@ -170,6 +180,11 @@ export default {
       type: Object,
       default() { return {} }
     },
+    // 详情参数
+    detailProps: {
+      type: Object,
+      default() { return {} }
+    },
     // 分页参数
     paginationProps: {
       type: Object,
@@ -179,7 +194,7 @@ export default {
     dialogProps: {
       type: Object,
       default() { return {} }
-    }
+    },
   },
   data() {
     return {
@@ -191,6 +206,8 @@ export default {
       _formList: [],
       // 表单值
       formModel: {},
+      // 表单模式 新增(new)/编辑(edit)/详情(view)
+      formMode: 'new',
       // 表格配置
       _tableList: [],
       // 当前页
@@ -205,25 +222,10 @@ export default {
       dialogTitle: '',
       // 弹出框类型
       dialogType: '',
+      // 弹出框加载状态
+      dialogLoading: false,
       // 表格数据
-      tableData: [
-        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
-        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
-        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
-        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: '' },
-        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
-        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
-        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
-        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
-        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: '' },
-        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
-        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: '' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
-        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: '' },
-      ],
+      tableData: [],
       // 表格选中项
       tableSelection: [],
       // 表格加载状态
@@ -244,13 +246,16 @@ export default {
       this._tableList = this.tableList || [];
     }
     this.totalCount = this.tableData.length;
+    // 传入axios标准的http库
+    if (this.option.$http) {
+      _$http = this.option.$http;
+    }
   },
   mounted() {
-    this.$axios.get('http://47.110.137.80:7102/article/categoryCode')
-      .then((response) => {
-        // handle success
-        console.log(response);
-      });
+    // 设置自动加载数据
+    if (!this.option.auto) {
+      this.handleSearch();
+    }
   },
   computed: {
     // 解析表单组件分组具名插槽名称
@@ -274,17 +279,45 @@ export default {
   },
   methods: {
     // 查询数据
-    handleSearch(param) {
-      this.tableLoading = true;
-      setTimeout(() => {
-        this.tableLoading = false;
-        console.log({
-          param,
-          searchModel: this.searchModel,
-          currentPage: this.currentPage,
-          pageSize: this.pageSize
+    async handleSearch(value) {
+      const param = {
+        ...this.searchModel,
+        ...value,
+        currentPage: this.currentPage,
+        pageSize: this.pageSize
+      };
+      this.doSearch(param);
+    },
+    // 查询数据逻辑
+    async doSearch(param) {
+      if (this.option.searchAPI) { // 配置了自定义查询API的情况
+        console.log('searchAPI');
+        this.tableLoading = true;
+        try {
+          const { result = [], totalCount = 0 } = await this.option.searchAPI(param);
+          this.tableData = result;
+          this.totalCount = totalCount;
+        } catch (error) {
+          console.error(error);
+        } finally {
+          this.tableLoading = false;
+        }
+      } else if (_$http && this.option.url) { // 给定了http的情况
+        console.log('_$http search');
+        this.tableLoading = true;
+        _$http.get(`${this.option.url.trim('/')}/${this.option.searchMethod || 'page'}?${stringify(param)}`)
+        .then((response) => {
+          const { result = [], totalCount = 0 } = response || {};
+          this.tableData = result;
+          this.totalCount = totalCount;
+        })
+        .finally(() => {
+          this.tableLoading = false;
         });
-      }, 2000);
+      } else {
+        this.tableLoading = true;
+        setTimeout(() => { this.tableLoading = false; }, 1500);
+      }
     },
     // 查看按钮
     handleView({ row }) {
@@ -292,11 +325,43 @@ export default {
       this.dialogType = 'dialog-view';
       this.tableCurrentRow = row;
       this.formModel = {};
-      // 设置表单值
-      Object.keys(row).forEach(key => {
-        this.formModel[key] = row[key];
-      });
+      this.formMode = "view";
+      this.$emit('dialog-change', this.dialogType);
       this.showDialog();
+      this.doDetail(row);
+    },
+    // 查询单项数据详情
+    async doDetail(param) {
+      const { primaryKey = 'id', detailPrimaryKey } = this.option || {};
+      if (this.option.detailAPI) { // 配置了自定义查询API的情况
+        console.log('detailAPI');
+        this.dialogLoading = true;
+        try {
+          const result = await this.option.detailAPI(param);
+          this.setFormModel(result);
+        } catch (error) {
+          console.error(error);
+        } finally {
+          this.dialogLoading = false;
+        }
+      } else if (_$http && this.option.url) { // 给定了http的情况
+        console.log('_$http detail');
+        this.dialogLoading = true;
+        const defaultDetailMethod = `info/${detailPrimaryKey || primaryKey}/${param[detailPrimaryKey] || param[primaryKey]}`;
+        const detailMethodFormat = this.option.detailMethod ? `${this.option.detailMethod.trim('/')}?${stringify({ [detailPrimaryKey || primaryKey]: param[detailPrimaryKey || primaryKey] })}` : undefined;
+        _$http.get(`${this.option.url.trim('/')}/${detailMethodFormat || defaultDetailMethod}`)
+        .then(response => {
+          const { result = {} } = response || {};
+          this.setFormModel(result);
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+      } else {
+        this.dialogLoading = true;
+        this.setFormModel(param);
+        setTimeout(() => { this.dialogLoading = false; }, 1500);
+      }
     },
     // 新增按钮
     handleNew({ row }) {
@@ -304,19 +369,53 @@ export default {
       this.dialogType = 'dialog-form';
       this.tableCurrentRow = row;
       this.formModel = {};
+      this.formMode = "new";
+      this.$emit('dialog-change', this.dialogType);
       this.showDialog();
     },
     // 编辑按钮
-    handleEdit({ row }) {
+    async handleEdit({ row }) {
       this.dialogTitle = '编辑';
       this.dialogType = 'dialog-form';
       this.tableCurrentRow = row;
       this.formModel = {};
-      // 设置表单值
-      Object.keys(row).forEach(key => {
-        this.formModel[key] = row[key];
-      });
+      this.formMode = "edit";
+      this.$emit('dialog-change', this.dialogType);
       this.showDialog();
+      this.doGet(row);
+    },
+    // 查询单项数据
+    async doGet(param) {
+      const { primaryKey = 'id', getPrimaryKey } = this.option || {};
+      if (this.option.getAPI) { // 配置了自定义查询API的情况
+        console.log('getAPI');
+        this.dialogLoading = true;
+        try {
+          const result = await this.option.getAPI(param);
+          this.setFormModel(result);
+        } catch (error) {
+          console.error(error);
+        } finally {
+          this.dialogLoading = false;
+        }
+      } else if (_$http && this.option.url) { // 给定了http的情况
+        console.log('_$http get');
+        this.dialogLoading = true;
+        const defaultGetMethod = `get/${getPrimaryKey || primaryKey}/${param[getPrimaryKey] || param[primaryKey]}`;
+        const getMethodFormat = this.option.getMethod ? `${this.option.getMethod.trim('/')}?${stringify({ [getPrimaryKey || primaryKey]: param[getPrimaryKey || primaryKey] })}` : undefined;
+        _$http.get(`${this.option.url.trim('/')}/${getMethodFormat || defaultGetMethod}`)
+        .then(response => {
+          const { result = {} } = response || {};
+          this.setFormModel(result);
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+      } else {
+        this.dialogLoading = true;
+        this.setFormModel(param);
+        setTimeout(() => { this.dialogLoading = false; }, 1500);
+      }
     },
     // 删除按钮
     handleDelete(type, scope) {
@@ -326,6 +425,14 @@ export default {
         console.log(type, this.tableSelection);
       }
     },
+    // 设置表单值
+    setFormModel(value) {
+      if (value && value instanceof Object) {
+        Object.keys(value).forEach(key => {
+          this.formModel[key] = value[key];
+        });
+      }
+    },
     // 改变每页总数大小
     handleSizeChange(val) {
       this.currentPage = 1;
@@ -339,7 +446,85 @@ export default {
     },
     // 表单提交
     handleSubmit(param) {
-      console.log({ param });
+      if (this.formMode === 'new') {
+        this.doNewSubmit(param);
+      } else if (this.formMode === 'edit') {
+        this.doEditSubmit(param);
+      } else {
+        this.hideDialog();
+        this.handleSearch();
+      }
+    },
+    // 新增提交逻辑
+    async doNewSubmit(param) {
+      const { primaryKey = 'id', formPrimaryKey } = this.option || {};
+      if (this.option.newAPI) { // 配置了自定义查询API的情况
+        console.log('newAPI');
+        this.dialogLoading = true;
+        try {
+          const success = await this.option.newAPI(param);
+          if (success) {
+            this.hideDialog();
+            this.handleSearch();
+            if (this.$message) { this.$message({ message: '提交成功', type: 'success' }); }
+          }
+        } catch (error) {
+          console.error(error);
+        } finally {
+          this.dialogLoading = false;
+        }
+      } else if (_$http && this.option.url) { // 给定了http的情况
+        console.log('_$http new');
+        this.dialogLoading = true;
+        const postData = { ...param };
+        delete postData[formPrimaryKey || primaryKey];
+        _$http.post(`${this.option.url.trim('/')}/${this.option.newMethod || 'add'}`, postData)
+        .then(response => {
+          const { success = false } = response || {};
+          if (success) {
+            this.hideDialog();
+            this.handleSearch();
+            if (this.$message) { this.$message({ message: '提交成功', type: 'success' }); }
+          }
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+      }
+    },
+    // 编辑提交逻辑
+    async doEditSubmit(param) {
+      if (this.option.editAPI) { // 配置了自定义查询API的情况
+        console.log('editAPI');
+        this.dialogLoading = true;
+        try {
+          const success = await this.option.editAPI(param);
+          if (success) {
+            this.hideDialog();
+            this.handleSearch();
+            if (this.$message) { this.$message({ message: '编辑成功', type: 'success' }); }
+          }
+        } catch (error) {
+          console.error(error);
+        } finally {
+          this.dialogLoading = false;
+        }
+      } else if (_$http && this.option.url) { // 给定了http的情况
+        console.log('_$http edit');
+        this.dialogLoading = true;
+        _$http.post(`${this.option.url.trim('/')}/${this.option.editMethod || 'update'}`, param)
+        .then(response => {
+          const { success = false } = response || {};
+          if (success) {
+            this.hideDialog();
+            this.handleSearch();
+            if (this.$message) { this.$message({ message: '编辑成功', type: 'success' }); }
+          }
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+      }
     },
     // 表单取消
     handleCancel() {
@@ -368,6 +553,7 @@ export default {
     setDialog({ title, type, model }) {
       this.dialogTitle = title;
       this.dialogType = type;
+      this.$emit('dialog-change', type);
       if (model) {
         Object.keys(model).forEach(key => {
           this.formModel[key] = model[key];
diff --git a/packages/scheme/utils.js b/packages/scheme/utils.js
new file mode 100644
index 0000000..790fe65
--- /dev/null
+++ b/packages/scheme/utils.js
@@ -0,0 +1,41 @@
+export const stringify = (json) => {
+  const urlEncode = (param, key, encode) => {
+    if (param === null) return '';
+    let paramStr = '';
+    const t = typeof (param);
+    if (t === 'string' || t === 'number' || t === 'boolean') {
+      paramStr = `&${key}=${((encode === null || encode) ? encodeURIComponent(param) : param)}`;
+    } else {
+      for (const i in param) {
+        if (i) {
+          if (param[i] !== undefined && param[i] !== '' && !(param[i] && typeof param[i] === 'string' && /^\s+$/.test(param[i]))) {
+            const k = key == null ? i : `${key}${(param instanceof Array ? `[${i}]` : `.${i}`)}`;
+            paramStr += urlEncode(param[i], k, encode);
+          }
+        }
+      }
+    }
+    return paramStr;
+  };
+  return urlEncode(json).substring(1);
+}
+
+export const parse = (url) => {
+  let obj = {};// 创建一个Object
+  let reg = /[?&][^?&]+=[^?&]+/g;// 正则匹配 ?&开始 =拼接  非?&结束  的参数
+  let arr = url.match(reg);// match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
+  // arr数组形式 ['?id=12345','&a=b']
+  if (arr) {
+    arr.forEach((item) => {
+      /**
+       * tempArr数组    ['id','12345']和['a','b']
+      * 第一个是key，第二个是value
+      * */
+      let tempArr = item.substring(1).split('=');
+      let key = decodeURIComponent(tempArr[0]);
+      let val = decodeURIComponent(tempArr[1]);
+      obj[key] = val;
+    });
+  }
+  return obj;
+}
\ No newline at end of file
diff --git a/packages/table/index.vue b/packages/table/index.vue
index f358385..9975043 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -5,7 +5,7 @@
 </style>
 
 <template>
-  <el-table class="eagle-table" ref="table" :data="tableData" v-bind="tableProps" v-on="tableEvents">
+  <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents">
     <slot></slot>
     <template v-if="list && list.length > 0">
       <template v-for="(item, index) in list">
@@ -32,11 +32,7 @@ export default {
     // 表格参数
     tableProps: {
       type: Object,
-      default() {
-        return {
-          size: 'small',
-        }
-      }
+      default() { return {} }
     },
     // 表格事件
     tableEvents: Object,
--
libgit2 0.21.0