From b1fcdaebabecd8a0623b3be0a3c5424fa745a9f6 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Thu, 18 Jun 2020 19:04:17 +0800
Subject: [PATCH] feat: 优化Scheme自定义渲染及详情和删除接口

---
 examples/styles/index.scss              |  15 +++++++++++++++
 examples/views/docs/component/scheme.md |  12 ++++++++++++
 packages/filter/index.vue               |   9 ++++++---
 packages/form/form-render.vue           |   2 +-
 packages/form/index.vue                 |  12 ++++++++++--
 packages/scheme/index.vue               | 249 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------
 packages/table/index.vue                |   4 +---
 7 files changed, 255 insertions(+), 48 deletions(-)

diff --git a/examples/styles/index.scss b/examples/styles/index.scss
index 9e73f68..0cfee9e 100644
--- a/examples/styles/index.scss
+++ b/examples/styles/index.scss
@@ -53,6 +53,21 @@ body {
   }
 }
 
+.zee-scheme__view {
+  .el-form-item {
+    font-weight: normal !important;
+    margin-bottom: 0 !important;
+    &__label {
+      line-height: 1.5 !important;
+      color: #595959 !important;
+    }
+    &__content {
+      line-height: 1.5 !important;
+      color: #000 !important;
+    }
+  }
+}
+
 @media only screen and (min-width: 1400px) {
   .code-snippet-box {
     .code-snippet {
diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md
index f06e514..6ca93ec 100644
--- a/examples/views/docs/component/scheme.md
+++ b/examples/views/docs/component/scheme.md
@@ -111,6 +111,18 @@ export default {
 <template>
   <z-scheme ref="scheme" :list="list" url="/customer" :http="$http" :alias="{ getUrl: '/getCustomerByCode', getKey: 'code' }" auto real-selection>
     <el-table-column type="selection" align="center" width="40"></el-table-column>
+    <template #render-code="{ value, row, openView }">
+      <el-link type="primary" @click="openView(row)">{{ value }}</el-link>
+    </template>
+    <template #view-name="{ value }">
+      <el-tag size="mini">{{ value }}</el-tag>
+    </template>
+    <template #cell-name="{ value }">
+      <el-tag size="mini" type="danger">{{ value }}</el-tag>
+    </template>
+    <template #form-id="{ value }">
+      <el-tag size="mini">{{ value }}</el-tag>
+    </template>
   </z-scheme>
 </template>
 
diff --git a/packages/filter/index.vue b/packages/filter/index.vue
index 9f8b320..d62c998 100644
--- a/packages/filter/index.vue
+++ b/packages/filter/index.vue
@@ -1,12 +1,11 @@
 <template>
-  <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size">
+  <z-form v-model="model" class="zee-filter" :list="formattedList" :span="span" :labelWidth="labelWidth" :colClass="colVisibleRender" :size="size" :formProps="formProps">
     <div slot="$operation" class="zee-filter__button-group">
       <el-button-group :size="size">
-        <el-button type="primary" @click="handleSearch" :loading="loading"><span>查询</span></el-button>
+        <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
         <el-button @click="handleReset"><span>重置</span></el-button>
         <el-button v-if="showCollapsed" @click="collapsed = !collapsed">
           <span>{{ collapsed ? '展开' : '收起' }}</span>
-          <!-- <i :class="`el-icon-arrow-${collapsed ? 'down' : 'up'}`" class="el-icon--right"></i> -->
         </el-button>
       </el-button-group>
     </div>
@@ -36,6 +35,10 @@ export default {
       default: 3,
     },
     loading: Boolean,
+    formProps: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
diff --git a/packages/form/form-render.vue b/packages/form/form-render.vue
index e07092d..907ec78 100644
--- a/packages/form/form-render.vue
+++ b/packages/form/form-render.vue
@@ -47,7 +47,7 @@
           :class="colClassRender(item, index, colClass)"
         >
           <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'zee-form__item'">
-            <slot v-if="$slots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model="value"></slot>
+            <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot>
             <template v-else>
               <!-- 自定义组件 -->
               <dynamic-render
diff --git a/packages/form/index.vue b/packages/form/index.vue
index e5c2db4..3aefdd2 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -16,7 +16,7 @@
 </style>
 
 <template>
-  <el-form ref="form" :size="size" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'">
+  <el-form ref="form" :size="size" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'" v-bind="formProps">
     <form-render
       :title-class="titleClass"
       :content-class="contentClass"
@@ -64,15 +64,23 @@ export default {
       type: Number,
       default: 24,
     },
+    formProps: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
-      slotKeys: Object.keys(this.$slots),
       model: {},
       formModel: {},
       formList: [],
     };
   },
+  computed: {
+    slotKeys() {
+      return Object.keys(this.$scopedSlots);
+    },
+  },
   watch: {
     value: {
       handler(val = {}) {
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index e86cb97..acd2e79 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -4,44 +4,80 @@
 
 <template>
   <div class="zee-scheme">
+    <!-- 头部内容 -->
     <div v-if="$scopedSlots.header || $slots.header" class="zee-scheme__header">
       <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
     </div>
+    <!-- 筛选组件 -->
     <div class="zee-scheme__filter">
-      <z-filter v-if="filter" :value="_filterModel" :list="listMap.filter | noRulesFilter" :size="size" @input="onFilterInput" @search="search" :loading="loading"></z-filter>
+      <z-filter
+        v-if="filter"
+        :value="_filterModel"
+        :list="filterList || listMap.filter | noRulesFilter"
+        :size="size"
+        @input="onFilterInput"
+        @search="search"
+        :loading="loading"
+        v-bind="filterProps"
+      ></z-filter>
     </div>
+    <!-- 按钮区 -->
     <div v-if="action" class="zee-scheme__action">
       <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
       <template v-else>
         <el-button :size="size" type="primary" @click="openNew">新增</el-button>
-        <slot name="button" :size="size" v-bind="_slotScope"></slot>
+        <el-button :size="size" plain :disabled="selection.length === 0" @click="handleDeleteMul(selection)">删除</el-button>
+        <slot name="button" v-bind="_slotScope"></slot>
       </template>
     </div>
+    <!-- 表格内容 -->
     <div class="zee-scheme__table">
       <z-table
         ref="table"
         v-model="tableData"
         v-loading="loading"
-        :list="listMap.table"
+        :list="tableList || listMap.table"
         :tableProps="{ border: true, 'row-key': 'id', ...tableProps }"
         :size="size"
         @selection-change="onTableSelectionChange"
         @selection="onTableSelection"
       >
         <slot></slot>
+        <!-- 表格列内容渲染 -->
+        <template v-for="(item, index) in renderList">
+          <template v-if="$scopedSlots[`cell-${item.fullKey}`]">
+            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-cell-${index}`">
+              <template slot-scope="{ row, column, $index }">
+                <slot :name="`cell-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
+              </template>
+            </el-table-column>
+          </template>
+          <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
+            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-render-${index}`">
+              <template slot-scope="{ row, column, $index }">
+                <slot :name="`render-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
+              </template>
+            </el-table-column>
+          </template>
+        </template>
+        <slot slot="column-append" name="column-append" v-bind="_slotScope"></slot>
+        <!-- 表格尾追加操作列 -->
         <template #column-end>
-          <el-table-column prop="$operation" label="操作" :width="140" fixed="right">
+          <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
+          <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
             <div class="zee-scheme__table-operation" slot-scope="slotScope">
-              <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope)"></el-button>
-              <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @onConfirm="handleDelete(slotScope)">
+              <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
+              <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @onConfirm="handleDelete([slotScope.row])">
                 <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
               </el-popconfirm>
+              <slot name="operation-button" v-bind="_slotScope"></slot>
             </div>
           </el-table-column>
         </template>
       </z-table>
     </div>
-    <div v-if="pagination" class="zee-scheme__footer">
+    <!-- 底部区域 -->
+    <div class="zee-scheme__footer">
       <div v-if="selection.length > 0" class="selection-info">
         <span>已选中</span>
         <span class="num">{{ selection.length }}</span>
@@ -50,7 +86,9 @@
           <el-button slot="reference" :size="size" type="text">清除</el-button>
         </el-popconfirm>
       </div>
+      <!-- 分页器 -->
       <el-pagination
+        v-if="pagination"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
@@ -61,12 +99,62 @@
       >
       </el-pagination>
     </div>
-    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" destroy-on-close append-to-body :lock-scroll="false" :close-on-click-modal="false" @closed="onDialogClosed">
+    <!-- 弹出框 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      destroy-on-close
+      append-to-body
+      :lock-scroll="false"
+      :close-on-click-modal="false"
+      @closed="onDialogClosed"
+      v-bind="dialogProps"
+    >
       <div v-loading="dialogLoading">
+        <!-- 自定义弹出框标题 -->
         <slot v-if="hadSlot('dialog-title')" slot="title" name="dialog-title" :dialogType="dialogType" v-bind="_slotScope"></slot>
         <template v-if="dialogRender">
+          <!-- 自定义弹出框内容 -->
           <slot v-if="hadSlot(`dialog-${dialogType}`)" :name="`dialog-${dialogType}`" :model="_formModel" v-bind="_slotScope"></slot>
-          <z-form v-else ref="form" :value="_formModel" :list="listMap.form" label-width="80px" :span="12" @input="onFormInput" @validate="onFormValidate"></z-form>
+          <!-- 内置弹出框新增修改表单 -->
+          <template v-if="['new', 'edit'].includes(dialogType)">
+            <z-form
+              ref="form"
+              :value="_formModel"
+              :list="formList || listMap.form"
+              @input="onFormInput"
+              @validate="onFormValidate"
+              v-bind="{ span: 12, 'label-width': '80px', ...formProps }"
+            >
+              <!-- 表单自定义插槽 -->
+              <template v-for="item in renderList">
+                <template v-if="$scopedSlots[`form-${item.fullKey}`]">
+                  <slot :slot="item.fullKey" :name="`form-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                </template>
+              </template>
+            </z-form>
+          </template>
+          <!-- 内置弹出框详情表单 -->
+          <template v-else>
+            <z-form
+              ref="form"
+              class="zee-scheme__view"
+              :value="_formModel"
+              :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
+              v-bind="{ span: 12, 'label-width': '80px', ...viewProps }"
+            >
+              <!-- 详情自定义插槽渲染 -->
+              <template v-for="item in renderList">
+                <template v-if="$scopedSlots[`view-${item.fullKey}`]">
+                  <slot :slot="item.fullKey" :name="`view-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                </template>
+                <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
+                  <slot :slot="item.fullKey" :name="`render-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                </template>
+              </template>
+            </z-form>
+          </template>
+          <!-- 内置弹出框新增修改按钮 -->
           <div class="zee-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
             <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
             <el-button :size="size" plain @click="closeDialog">取消</el-button>
@@ -78,47 +166,52 @@
 </template>
 
 <script>
-import { cloneDeep } from '../_utils';
+import { cloneDeep, get } from '../_utils';
 import { clear } from '../_utils/param';
 
+let propsMap = {};
+const propsKeys = ['tableProps', 'filterProps', 'formProps', 'viewProps', 'dialogProps', 'operationProps'];
+propsKeys.forEach(key => {
+  propsMap[key] = {
+    type: Object,
+    default: function() {
+      return {};
+    },
+  };
+});
+const apiKeys = ['searchApi', 'submitApi', 'addApi', 'modifyApi', 'getApi', 'viewApi', 'deleteApi'];
+apiKeys.forEach(key => {
+  propsMap[key] = {
+    type: Function,
+  };
+});
+const blockKeys = ['filter', 'action', 'pagination', 'operation'];
+blockKeys.forEach(key => {
+  propsMap[key] = {
+    type: Boolean,
+    default: true,
+  };
+});
+
 export default {
   name: 'Scheme',
   props: {
+    ...propsMap,
     list: Array,
-    filter: {
-      type: Boolean,
-      default: true,
-    },
-    action: {
-      type: Boolean,
-      default: true,
-    },
-    pagination: {
-      type: Boolean,
-      default: true,
-    },
+    filterList: Array,
+    tableList: Array,
+    formList: Array,
+    viewList: Array,
     size: {
       type: String,
       default: 'mini',
     },
-    tableProps: {
-      type: Object,
-      default: () => ({}),
-    },
     formModel: Object,
     filterModel: Object,
     auto: Boolean,
     realSelection: Boolean,
-    /* 模板API */
     url: String, // 请求地址
     http: [Function, Promise], // http库
-    /* 自定义API */
-    searchApi: Function, // 搜索
-    submitApi: Function, // 提交
-    addApi: Function, // 新增
-    modifyApi: Function, // 修改
-    getApi: Function, // 查询详情
-    deleteApi: Function, // 删除
     alias: Object, // 别名配置
   },
   data() {
@@ -161,6 +254,17 @@ export default {
       clearRules(list);
       return list;
     },
+    // 详情类型过滤器
+    viewTypeFilter(val = []) {
+      let list = cloneDeep(val);
+      const clearRules = list => {
+        list.forEach(item => {
+          item.type = (h, { model, config }) => h('span', config, model[item.key]);
+        });
+      };
+      clearRules(list);
+      return list;
+    },
   },
   computed: {
     listMap() {
@@ -199,6 +303,28 @@ export default {
       });
       return array;
     },
+    renderList() {
+      // 深度克隆传入的列表，避免原始值被修改
+      const newList = cloneDeep(this.list);
+      // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
+      const generateFullKey = (list, parentKey) => {
+        list.forEach(item => {
+          if (item.group && item.list) {
+            if (item.group.key) {
+              item.fullKey = `${parentKey ? `${parentKey}-${item.group.key}` : item.group.key}`;
+            } else {
+              item.fullKey = parentKey || item.key;
+            }
+            generateFullKey(item.list, item.fullKey);
+          } else {
+            item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
+          }
+        });
+      };
+      // 生成fullKey
+      generateFullKey(newList);
+      return newList;
+    },
     _filterModel() {
       return this.filterModel || this.filterForm || {};
     },
@@ -209,6 +335,9 @@ export default {
       return {
         openDialog: this.openDialog,
         closeDialog: this.closeDialog,
+        openView: this.openView,
+        handleDelete: this.handleDelete,
+        size: this.size,
       };
     },
     _alias() {
@@ -221,6 +350,7 @@ export default {
     },
   },
   methods: {
+    get,
     // 空Promise
     emptyPromise() {
       return new Promise(resolve => resolve());
@@ -367,17 +497,44 @@ export default {
       return undefined;
     },
     // 打开编辑弹出框
-    openEdit({ row }) {
+    openEdit(row) {
       this.dialogLoading = true;
       this.openDialog('edit', '编辑');
       const getRow = () =>
         new Promise(resolve => {
-          resolve({ ...row });
+          resolve(row);
         });
       const getAPI = this.getApi || this._getAPI || getRow;
       getAPI(row)
         .then(result => {
-          this.editForm = { ...result };
+          this.editForm = result;
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+    },
+    // 内置查询详情接口
+    _viewAPI(row) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        const _viewKey = this._alias.viewKey || this._alias.getKey || this._alias.primaryKey || 'id';
+        const _resultKey = this._alias.result || 'result';
+        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_viewKey]: row[_viewKey] } }).then(response => response[_resultKey] || {});
+      }
+      return undefined;
+    },
+    // 打开详情弹出框
+    openView(row) {
+      this.dialogLoading = true;
+      this.openDialog('view', '详情');
+      const getRow = () =>
+        new Promise(resolve => {
+          resolve(row);
+        });
+      const viewAPI = this.viewApi || this.getApi || this._viewAPI || this._getAPI || getRow;
+      viewAPI(row)
+        .then(result => {
+          this.editForm = result;
         })
         .finally(() => {
           this.dialogLoading = false;
@@ -392,7 +549,7 @@ export default {
       return undefined;
     },
     // 删除
-    handleDelete({ row, $index }) {
+    handleDelete(selection) {
       const loading = this.$loading({
         text: '处理中',
         spinner: 'el-icon-loading',
@@ -400,7 +557,7 @@ export default {
       });
       const deleteAPI = this.deleteApi || this._deleteAPI || this.emptyPromise;
       const _deleteKey = this._alias.deleteKey || this._alias.primaryKey || 'id';
-      const keys = [row[_deleteKey]];
+      const keys = selection.map(i => i[_deleteKey]);
       deleteAPI(keys)
         .then(() => {
           this.search();
@@ -410,16 +567,30 @@ export default {
           loading.close();
         });
     },
+    // 批量删除
+    handleDeleteMul(selection) {
+      this.$confirm(`是否删除这 [${selection.length}] 项?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.handleDelete(selection);
+        })
+        .catch(() => {});
+    },
     // 打开弹出框
     openDialog(type, title) {
       this.dialogVisible = true;
       this.dialogRender = true;
       this.dialogType = type;
       this.dialogTitle = title;
+      this.$emit('dialog-change', type);
     },
     // 关闭弹出框
     closeDialog() {
       this.dialogVisible = false;
+      this.$emit('dialog-change', 'none');
     },
     // 清空表单
     clearEditForm() {
diff --git a/packages/table/index.vue b/packages/table/index.vue
index c2a19f0..8722aa0 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -82,9 +82,7 @@ export default {
     // 表格参数
     tableProps: {
       type: Object,
-      default() {
-        return {};
-      },
+      default: () => ({}),
     },
     // 表格事件
     tableEvents: Object,
--
libgit2 0.21.0