From 888f64e3caa2c53b482fc3fd60ebc17d28ff12c6 Mon Sep 17 00:00:00 2001
From: OrangeM21 <orangemtony@gmail.com>
Date: Thu, 26 Mar 2020 19:28:45 +0800
Subject: [PATCH] =?UTF-8?q?[update]=E4=BF=AE=E6=94=B9El-table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/el-data-table-column.js        |   0
 .../components/self-loading-button.vue        |   0
 .../el-data-table/components/text-button.vue  |   0
 .../el-data-table/components/the-dialog.vue   |   0
 .../components/el-data-table/el-data-table.md |   0
 .../el-data-table/el-data-table.vue           | 100 +++++++++++++++---
 .../components/el-data-table/index.js         |   0
 .../components/el-data-table/index.less       |   0
 .../el-data-table/utils/extract-keys.js       |   0
 .../el-data-table/utils/is-falsey.js          |   0
 .../components/el-data-table/utils/query.js   |   0
 .../utils/search-immediately-item.js          |   0
 .../el-data-table/utils/select-strategy.js    |   0
 .../components/render-form-group.vue          |   0
 .../components/render-form-item.vue           |   0
 .../el-form-renderer/el-form-renderer.md      |   0
 .../el-form-renderer/el-form-renderer.vue     |   0
 .../components/el-form-renderer/index.js      |   0
 .../el-form-renderer/util/enable-when.js      |   0
 .../util/transform-content.js                 |   0
 .../components/el-form-renderer/util/utils.js |   0
 src/i18n/i18n.js                              |   4 +
 src/layout/components/Page/PageContent.vue    |   2 +-
 src/layout/components/Page/PageHeading.vue    |   2 +-
 src/layout/components/Page/index.vue          |   2 +-
 src/layout/components/index.js                |   1 -
 src/main.js                                   |   4 +-
 src/views/users/UserList.vue                  |  34 +++---
 28 files changed, 113 insertions(+), 36 deletions(-)
 rename src/{layout => }/components/el-data-table/components/el-data-table-column.js (100%)
 rename src/{layout => }/components/el-data-table/components/self-loading-button.vue (100%)
 rename src/{layout => }/components/el-data-table/components/text-button.vue (100%)
 rename src/{layout => }/components/el-data-table/components/the-dialog.vue (100%)
 rename src/{layout => }/components/el-data-table/el-data-table.md (100%)
 rename src/{layout => }/components/el-data-table/el-data-table.vue (91%)
 rename src/{layout => }/components/el-data-table/index.js (100%)
 rename src/{layout => }/components/el-data-table/index.less (100%)
 rename src/{layout => }/components/el-data-table/utils/extract-keys.js (100%)
 rename src/{layout => }/components/el-data-table/utils/is-falsey.js (100%)
 rename src/{layout => }/components/el-data-table/utils/query.js (100%)
 rename src/{layout => }/components/el-data-table/utils/search-immediately-item.js (100%)
 rename src/{layout => }/components/el-data-table/utils/select-strategy.js (100%)
 rename src/{layout => }/components/el-form-renderer/components/render-form-group.vue (100%)
 rename src/{layout => }/components/el-form-renderer/components/render-form-item.vue (100%)
 rename src/{layout => }/components/el-form-renderer/el-form-renderer.md (100%)
 rename src/{layout => }/components/el-form-renderer/el-form-renderer.vue (100%)
 rename src/{layout => }/components/el-form-renderer/index.js (100%)
 rename src/{layout => }/components/el-form-renderer/util/enable-when.js (100%)
 rename src/{layout => }/components/el-form-renderer/util/transform-content.js (100%)
 rename src/{layout => }/components/el-form-renderer/util/utils.js (100%)

diff --git a/src/layout/components/el-data-table/components/el-data-table-column.js b/src/components/el-data-table/components/el-data-table-column.js
similarity index 100%
rename from src/layout/components/el-data-table/components/el-data-table-column.js
rename to src/components/el-data-table/components/el-data-table-column.js
diff --git a/src/layout/components/el-data-table/components/self-loading-button.vue b/src/components/el-data-table/components/self-loading-button.vue
similarity index 100%
rename from src/layout/components/el-data-table/components/self-loading-button.vue
rename to src/components/el-data-table/components/self-loading-button.vue
diff --git a/src/layout/components/el-data-table/components/text-button.vue b/src/components/el-data-table/components/text-button.vue
similarity index 100%
rename from src/layout/components/el-data-table/components/text-button.vue
rename to src/components/el-data-table/components/text-button.vue
diff --git a/src/layout/components/el-data-table/components/the-dialog.vue b/src/components/el-data-table/components/the-dialog.vue
similarity index 100%
rename from src/layout/components/el-data-table/components/the-dialog.vue
rename to src/components/el-data-table/components/the-dialog.vue
diff --git a/src/layout/components/el-data-table/el-data-table.md b/src/components/el-data-table/el-data-table.md
similarity index 100%
rename from src/layout/components/el-data-table/el-data-table.md
rename to src/components/el-data-table/el-data-table.md
diff --git a/src/layout/components/el-data-table/el-data-table.vue b/src/components/el-data-table/el-data-table.vue
similarity index 91%
rename from src/layout/components/el-data-table/el-data-table.vue
rename to src/components/el-data-table/el-data-table.vue
index 907197391..ab4d640d2 100644
--- a/src/layout/components/el-data-table/el-data-table.vue
+++ b/src/components/el-data-table/el-data-table.vue
@@ -9,7 +9,7 @@
       <!-- @submit.native.prevent -->
       <!-- 阻止表单提交的默认行为 -->
       <!-- https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 -->
-      <el-form-renderer
+      <!-- <el-form-renderer
         v-if="hasSearchForm"
         ref="searchForm"
         :content="_searchForm"
@@ -21,11 +21,11 @@
           :slot="slot.replace('search:', 'id:')"
           :name="slot"
         />
-        <!--@slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
-        <slot name="search" />
+        @slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
+      <!-- <slot name="search" />
         <el-form-item>
-          <!--https://github.com/ElemeFE/element/pull/5920-->
-          <el-button
+          https://github.com/ElemeFE/element/pull/5920-->
+      <!-- <el-button
             native-type="submit"
             type="primary"
             :size="buttonSize"
@@ -33,7 +33,7 @@
           >查询</el-button>
           <el-button :size="buttonSize" @click="resetSearch">重置</el-button>
         </el-form-item>
-      </el-form-renderer>
+      </el-form-renderer> -->
 
       <el-form v-if="hasHeader">
         <el-form-item>
@@ -66,10 +66,58 @@
             :disabled="selected.length === 0 || (single && selected.length > 1)"
             @click="onDefaultDelete(single ? selected[0] : selected)"
           >{{ deleteText }}</el-button>
-
+          <!-- @dropdown 修改点: 是否有Actions按钮 -->
+          <el-dropdown v-if="hasAction" class="slotaction">
+            <el-button size="small" :disabled="selected.length>0?false:true">
+              更多菜单<i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>批量删除</el-dropdown-item>
+              <el-dropdown-item>批量更新</el-dropdown-item>
+              <el-dropdown-item>禁用所选</el-dropdown-item>
+              <el-dropdown-item>激活所选</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- 样式bug -->
+          <el-dropdown v-if="hasUpload" class="slotupload" style="float:right;">
+            <el-button size="small">
+              CSV<i class="el-icon-arrow-down el-icon--right" />
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>上传</el-dropdown-item>
+              <el-dropdown-item>下载</el-dropdown-item>
+              <el-dropdown-item>更新</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-form-renderer
+            v-if="hasSearchForm"
+            ref="searchForm"
+            class="slotsearch"
+            style="float:right;"
+            :content="_searchForm"
+            inline
+            @submit.native.prevent
+          >
+            <slot
+              v-for="slot in searchLocatedSlotKeys"
+              :slot="slot.replace('search:', 'id:')"
+              :name="slot"
+            />
+            <!--@slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
+            <slot name="search" />
+            <el-form-item style="display:none">
+              <!--https://github.com/ElemeFE/element/pull/5920-->
+              <el-button
+                native-type="submit"
+                type="primary"
+                :size="buttonSize"
+                @click="search"
+              >查询</el-button>
+              <el-button :size="buttonSize" @click="resetSearch">重置</el-button>
+            </el-form-item>
+          </el-form-renderer>
           <!--@slot 额外的header内容, 当headerButtons不满足需求时可以使用，作用域传入selected -->
           <slot name="header" :selected="selected" />
-
           <!--@collapse 自定义折叠按钮, 默认的样式文案不满足时可以使用，scope 默认返回当前折叠状态 Boolean -->
           <slot name="collapse" :isSearchCollapse="isSearchCollapse">
             <el-button
@@ -169,8 +217,22 @@
 
         <!--非树-->
         <template v-else>
+          <!-- 硬核Hack修改 -->
           <el-data-table-column
-            v-for="col in columns"
+            key="selection-key"
+            v-bind="{align: columnsAlign, ...columns[0]}"
+          />
+          <el-data-table-column
+            key="columns-url"
+            v-bind="{align: columnsAlign, ...columns[1]}"
+          >
+            <template slot-scope="scope">
+              <!-- 硬编码到ID -->
+              <el-button type="text" size="small" style="font-size:14px" @click="$router.push({name: columns[1].url, params: { id: scope.row.id }})">{{ scope.row.name }}</el-button>
+            </template>
+          </el-data-table-column>
+          <el-data-table-column
+            v-for="col in columns.filter((c, i) => i !== 0&& i !=1) "
             :key="col.prop"
             v-bind="{align: columnsAlign, ...col}"
           />
@@ -436,6 +498,20 @@ export default {
       type: Boolean,
       default: true
     },
+    /**
+     * 是否有动作按钮
+     */
+    hasAction: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否有动作按钮
+     */
+    hasUpload: {
+      type: Boolean,
+      default: true
+    },
     /**
      * 是否有编辑按钮
      */
@@ -813,14 +889,12 @@ export default {
     hasSelect() {
       return this.columns.length && this.columns[0].type === 'selection'
     },
-
     selectable() {
       if (this.hasSelect && this.columns[0].selectable) {
         return this.columns[0].selectable
       }
       return () => true
     },
-
     columnsAlign() {
       if (this.columns.some(col => col.columns && col.columns.length)) {
         // 多级表头默认居中
@@ -1091,8 +1165,8 @@ export default {
     // 弹窗相关
     // 除非树形结构在操作列点击新增, 否则 row 是 MouseEvent
     onDefaultNew(row) {
-      this.row = row
-      this.$refs.dialog.show(dialogModes.new)
+      // 屏蔽默认New方法
+      this.onNew()
     },
     onDefaultView(row) {
       this.row = row
diff --git a/src/layout/components/el-data-table/index.js b/src/components/el-data-table/index.js
similarity index 100%
rename from src/layout/components/el-data-table/index.js
rename to src/components/el-data-table/index.js
diff --git a/src/layout/components/el-data-table/index.less b/src/components/el-data-table/index.less
similarity index 100%
rename from src/layout/components/el-data-table/index.less
rename to src/components/el-data-table/index.less
diff --git a/src/layout/components/el-data-table/utils/extract-keys.js b/src/components/el-data-table/utils/extract-keys.js
similarity index 100%
rename from src/layout/components/el-data-table/utils/extract-keys.js
rename to src/components/el-data-table/utils/extract-keys.js
diff --git a/src/layout/components/el-data-table/utils/is-falsey.js b/src/components/el-data-table/utils/is-falsey.js
similarity index 100%
rename from src/layout/components/el-data-table/utils/is-falsey.js
rename to src/components/el-data-table/utils/is-falsey.js
diff --git a/src/layout/components/el-data-table/utils/query.js b/src/components/el-data-table/utils/query.js
similarity index 100%
rename from src/layout/components/el-data-table/utils/query.js
rename to src/components/el-data-table/utils/query.js
diff --git a/src/layout/components/el-data-table/utils/search-immediately-item.js b/src/components/el-data-table/utils/search-immediately-item.js
similarity index 100%
rename from src/layout/components/el-data-table/utils/search-immediately-item.js
rename to src/components/el-data-table/utils/search-immediately-item.js
diff --git a/src/layout/components/el-data-table/utils/select-strategy.js b/src/components/el-data-table/utils/select-strategy.js
similarity index 100%
rename from src/layout/components/el-data-table/utils/select-strategy.js
rename to src/components/el-data-table/utils/select-strategy.js
diff --git a/src/layout/components/el-form-renderer/components/render-form-group.vue b/src/components/el-form-renderer/components/render-form-group.vue
similarity index 100%
rename from src/layout/components/el-form-renderer/components/render-form-group.vue
rename to src/components/el-form-renderer/components/render-form-group.vue
diff --git a/src/layout/components/el-form-renderer/components/render-form-item.vue b/src/components/el-form-renderer/components/render-form-item.vue
similarity index 100%
rename from src/layout/components/el-form-renderer/components/render-form-item.vue
rename to src/components/el-form-renderer/components/render-form-item.vue
diff --git a/src/layout/components/el-form-renderer/el-form-renderer.md b/src/components/el-form-renderer/el-form-renderer.md
similarity index 100%
rename from src/layout/components/el-form-renderer/el-form-renderer.md
rename to src/components/el-form-renderer/el-form-renderer.md
diff --git a/src/layout/components/el-form-renderer/el-form-renderer.vue b/src/components/el-form-renderer/el-form-renderer.vue
similarity index 100%
rename from src/layout/components/el-form-renderer/el-form-renderer.vue
rename to src/components/el-form-renderer/el-form-renderer.vue
diff --git a/src/layout/components/el-form-renderer/index.js b/src/components/el-form-renderer/index.js
similarity index 100%
rename from src/layout/components/el-form-renderer/index.js
rename to src/components/el-form-renderer/index.js
diff --git a/src/layout/components/el-form-renderer/util/enable-when.js b/src/components/el-form-renderer/util/enable-when.js
similarity index 100%
rename from src/layout/components/el-form-renderer/util/enable-when.js
rename to src/components/el-form-renderer/util/enable-when.js
diff --git a/src/layout/components/el-form-renderer/util/transform-content.js b/src/components/el-form-renderer/util/transform-content.js
similarity index 100%
rename from src/layout/components/el-form-renderer/util/transform-content.js
rename to src/components/el-form-renderer/util/transform-content.js
diff --git a/src/layout/components/el-form-renderer/util/utils.js b/src/components/el-form-renderer/util/utils.js
similarity index 100%
rename from src/layout/components/el-form-renderer/util/utils.js
rename to src/components/el-form-renderer/util/utils.js
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
index 5cc800484..74e61f157 100644
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -11,4 +11,8 @@ const i18n = new VueI18n({
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 重点: 为了实现element插件的多语言切换
 
+Vue.prototype.$ti = (key) => {
+  i18n.t(key.toLowerCase)
+}
+
 export default i18n
diff --git a/src/layout/components/Page/PageContent.vue b/src/layout/components/Page/PageContent.vue
index 6429d5d6b..be3f480f0 100644
--- a/src/layout/components/Page/PageContent.vue
+++ b/src/layout/components/Page/PageContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper-content">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
diff --git a/src/layout/components/Page/PageHeading.vue b/src/layout/components/Page/PageHeading.vue
index 10f02d8c1..56b9a7eba 100644
--- a/src/layout/components/Page/PageHeading.vue
+++ b/src/layout/components/Page/PageHeading.vue
@@ -4,7 +4,7 @@
       <div class="page-heading-left-title">
         <slot><h2>{{ title }}</h2></slot>
       </div>
-      <Breadcrumb></Breadcrumb>
+      <Breadcrumb />
     </el-col>
     <el-col :span="4" />
   </el-row>
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index c918fbaa1..572cd7ee6 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -4,7 +4,7 @@
       <slot name="title">{{ pageTitle }}</slot>
     </PageHeading>
     <PageContent>
-      <slot name="content"></slot>
+      <slot name="content" />
     </PageContent>
   </div>
 </template>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
index aec829fbb..748a8db5f 100644
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -4,6 +4,5 @@ export { default as AppMain } from './AppMain'
 export { default as Page } from './Page'
 export { default as ListTables } from './ListTables'
 export { default as TagsView } from './TagsView'
-export { default as ElDataTable } from './el-data-table'
 export { default as Footer } from './Footer'
 export { default as IBox } from './IBox'
diff --git a/src/main.js b/src/main.js
index 2bba465ae..14bd30106 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,8 +36,8 @@ Vue.use(ElementUI, { locale })
 
 Vue.config.productionTip = false
 
-import ElDataTable from '@/layout/components/el-data-table/el-data-table.vue'
-import ElFormRenderer from '@/layout/components/el-form-renderer/el-form-renderer.vue'
+import ElDataTable from '@/components/el-data-table/el-data-table.vue'
+import ElFormRenderer from '@/components/el-form-renderer/el-form-renderer.vue'
 import {
   Message,
   MessageBox
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index e9c549dd8..105354766 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -1,20 +1,6 @@
 <template>
   <IBox :title="$t('route.UserList')">
-    <el-data-table v-bind="tableConfig" style="margin:0 12px 12px 12px;">
-      <template v-slot:header="{selected}">
-        <el-dropdown>
-          <el-button size="small" :disabled="selected.length>0?false:true">
-            更多菜单<i class="el-icon-arrow-down el-icon--right" />
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>批量删除</el-dropdown-item>
-            <el-dropdown-item>批量更新</el-dropdown-item>
-            <el-dropdown-item>禁用所选</el-dropdown-item>
-            <el-dropdown-item>激活所选</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </template>
-    </el-data-table>
+    <el-data-table v-bind="tableConfig" :on-new="onNew" style="margin:0 12px 12px 12px;" />
   </IBox>
 </template>
 
@@ -41,6 +27,8 @@ export default {
         hasEdit: false, // 有编辑按钮
         newText: '创建',
         hasDelete: false,
+        hasAction: true, // 是否有更多操作
+        hasUpload: false,
         hasNew: true,
         // editText: this.$t('action.update'), // 编辑按钮文案
         tableAttrs: {
@@ -67,6 +55,15 @@ export default {
             }
           }
         ],
+        searchForm: [
+          {
+            type: 'input',
+            id: 'search', // 发起请求附带的查询参数
+            width: '200px',
+            el: { placeholder: '搜索', clearable: true, size: 'small' },
+            rules: [{ required: false, trigger: 'blur', max: 12 }]
+          }
+        ],
         columns: [
           { type: 'selection' },
           // Bug
@@ -74,7 +71,8 @@ export default {
           {
             prop: 'name',
             label: this.$t('users.name'),
-            sortable: true // 可排序
+            sortable: true, // 可排序
+            url: 'UserDetail' // 第一个函数指定 路由Template
           },
           {
             prop: 'username',
@@ -104,7 +102,9 @@ export default {
   created() {
   },
   methods: {
-
+    onNew: () => {
+      alert('创建')
+    }
   }
 }
 </script>