From 5bfe4d236fd9c2841da100f34c980b4572b67b20 Mon Sep 17 00:00:00 2001
From: chenkl <321200875@qq.com>
Date: Thu, 31 Dec 2020 15:20:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=88=9D=E7=89=88?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/index.vue                     |  7 ++++++-
 src/components/Echart/index.vue                     |  2 +-
 src/components/Setting/index.vue                    | 13 ++++++++++++-
 src/components/Table/components/Slot.vue            |  2 +-
 src/pages/index/axios-config/request.ts             |  1 -
 src/pages/index/layout/modules/Classic.vue          | 10 +++++++++-
 src/pages/index/layout/modules/LeftTop.vue          | 10 +++++++++-
 src/pages/index/layout/modules/Top.vue              | 10 +++++++++-
 src/pages/index/router/index.ts                     |  1 +
 src/pages/index/store/modules/app.ts                | 10 ++++++++++
 .../views/example-demo/example-dialog/index.vue     |  2 +-
 .../index/views/table-demo/screen-table/index.vue   |  4 ++--
 .../index/views/table-demo/tree-and-load/index.vue  |  4 ++--
 13 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index bacc30b..35bee5d 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -11,7 +11,9 @@
 
     <!-- 弹窗内容 -->
     <el-scrollbar class="com-dialog__content">
-      <slot />
+      <div class="content__wrap">
+        <slot />
+      </div>
     </el-scrollbar>
 
     <template v-if="slots.footer" #footer>
@@ -40,6 +42,9 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .com-dialog__content {
+  .content__wrap {
+    padding-right: 10px;
+  }
   @{deep}(.el-scrollbar__wrap ) {
 		max-height: 600px; // 最大高度
 		overflow-x: hidden; // 隐藏横向滚动栏
diff --git a/src/components/Echart/index.vue b/src/components/Echart/index.vue
index 856cb43..e5585e0 100644
--- a/src/components/Echart/index.vue
+++ b/src/components/Echart/index.vue
@@ -62,7 +62,7 @@ export default defineComponent({
         }
       }, 100);
       (window as any).addEventListener('resize', __resizeHandler)
-      sidebarElm = document.getElementsByClassName('sidebar-container-wrap')[0]
+      sidebarElm = document.getElementsByClassName('sidebar__wrap')[0]
       sidebarElm && sidebarElm.addEventListener('transitionend', sidebarResizeHandler)
     })
 
diff --git a/src/components/Setting/index.vue b/src/components/Setting/index.vue
index 4896c23..dd7f8a1 100644
--- a/src/components/Setting/index.vue
+++ b/src/components/Setting/index.vue
@@ -82,6 +82,11 @@
         <el-switch v-model="greyMode" @change="setGreyMode" />
       </div>
 
+      <div class="setting__item">
+        <span>回到顶部</span>
+        <el-switch v-model="showBackTop" @change="setShowBackTop" />
+      </div>
+
       <div class="setting__item">
         <span>页面标题</span>
         <el-input v-model="title" size="mini" @change="setTitle" />
@@ -169,6 +174,11 @@ export default defineComponent({
       appStore.SetGreyMode(greyMode)
     }
 
+    const showBackTop = ref<boolean>(appStore.showBackTop)
+    function setShowBackTop(showBackTop: boolean) {
+      appStore.SetShowBackTop(showBackTop)
+    }
+
     return {
       drawer, toggleClick,
       layout, setLayout,
@@ -182,7 +192,8 @@ export default defineComponent({
       logo, setLogo,
       title, setTitle,
       logoTitle, setLogoTitle,
-      greyMode, setGreyMode
+      greyMode, setGreyMode,
+      showBackTop, setShowBackTop
     }
   }
 })
diff --git a/src/components/Table/components/Slot.vue b/src/components/Table/components/Slot.vue
index c4b3cf5..8bf9428 100644
--- a/src/components/Table/components/Slot.vue
+++ b/src/components/Table/components/Slot.vue
@@ -25,7 +25,7 @@ export default defineComponent({
     return h('span', _this.slots[props.slotName]({
       row: props.row,
       column: props.column,
-      index: props.index
+      $index: props.index
     }))
   }
 })
diff --git a/src/pages/index/axios-config/request.ts b/src/pages/index/axios-config/request.ts
index cde9dd9..1634b32 100644
--- a/src/pages/index/axios-config/request.ts
+++ b/src/pages/index/axios-config/request.ts
@@ -19,7 +19,6 @@ const service: AxiosInstance = axios.create({
 // request拦截器
 service.interceptors.request.use(
   (config: AxiosRequestConfig) => {
-    console.log(config)
     if (config.method === 'post' && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
       config.data = qs.stringify(config.data)
     }
diff --git a/src/pages/index/layout/modules/Classic.vue b/src/pages/index/layout/modules/Classic.vue
index f11d1b1..f0e210f 100644
--- a/src/pages/index/layout/modules/Classic.vue
+++ b/src/pages/index/layout/modules/Classic.vue
@@ -63,6 +63,12 @@
     <!-- setting -->
     <setting />
     <!-- setting -->
+
+    <el-backtop
+      v-if="showBackTop"
+      target=".main__wrap--content .el-scrollbar__wrap"
+      :bottom="100"
+    />
   </div>
 </template>
 
@@ -106,6 +112,7 @@ export default defineComponent({
     // const fixedNavbar = computed(() => appStore.fixedNavbar)
     // const fixedTags = computed(() => appStore.fixedTags)
     const fixedHeader = computed(() => appStore.fixedHeader)
+    const showBackTop = computed(() => appStore.showBackTop)
 
     const classObj = computed(() => {
       const obj = {}
@@ -131,7 +138,8 @@ export default defineComponent({
       fixedHeader,
       // fixedNavbar,
       // fixedTags,
-      setCollapsed
+      setCollapsed,
+      showBackTop
     }
   }
 })
diff --git a/src/pages/index/layout/modules/LeftTop.vue b/src/pages/index/layout/modules/LeftTop.vue
index 96d9d80..0e1f6a6 100644
--- a/src/pages/index/layout/modules/LeftTop.vue
+++ b/src/pages/index/layout/modules/LeftTop.vue
@@ -84,6 +84,12 @@
     <!-- setting -->
     <setting />
     <!-- setting -->
+
+    <el-backtop
+      v-if="showBackTop"
+      target=".main__wrap--content .el-scrollbar__wrap"
+      :bottom="100"
+    />
   </div>
 </template>
 
@@ -127,6 +133,7 @@ export default defineComponent({
     // const fixedNavbar = computed(() => appStore.fixedNavbar)
     // const fixedTags = computed(() => appStore.fixedTags)
     const fixedHeader = computed(() => appStore.fixedHeader)
+    const showBackTop = computed(() => appStore.showBackTop)
 
     const classObj = computed(() => {
       const obj = {}
@@ -152,7 +159,8 @@ export default defineComponent({
       fixedHeader,
       // fixedNavbar,
       // fixedTags,
-      setCollapsed
+      setCollapsed,
+      showBackTop
     }
   }
 })
diff --git a/src/pages/index/layout/modules/Top.vue b/src/pages/index/layout/modules/Top.vue
index 44e9fed..cc472d5 100644
--- a/src/pages/index/layout/modules/Top.vue
+++ b/src/pages/index/layout/modules/Top.vue
@@ -71,6 +71,12 @@
     <!-- setting -->
     <setting />
     <!-- setting -->
+
+    <el-backtop
+      v-if="showBackTop"
+      target=".main__wrap--content .el-scrollbar__wrap"
+      :bottom="100"
+    />
   </div>
 </template>
 
@@ -114,6 +120,7 @@ export default defineComponent({
     // const fixedNavbar = computed(() => appStore.fixedNavbar)
     // const fixedTags = computed(() => appStore.fixedTags)
     const fixedHeader = computed(() => appStore.fixedHeader)
+    const showBackTop = computed(() => appStore.showBackTop)
 
     const classObj = computed(() => {
       const obj = {}
@@ -139,7 +146,8 @@ export default defineComponent({
       fixedHeader,
       // fixedNavbar,
       // fixedTags,
-      setCollapsed
+      setCollapsed,
+      showBackTop
     }
   }
 })
diff --git a/src/pages/index/router/index.ts b/src/pages/index/router/index.ts
index ea145ac..e8b28f3 100644
--- a/src/pages/index/router/index.ts
+++ b/src/pages/index/router/index.ts
@@ -510,6 +510,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     path: '/example-demo',
     component: Layout,
     name: 'ExampleDemo',
+    redirect: '/example-demo/example-dialog',
     meta: {
       alwaysShow: true,
       icon: 'example',
diff --git a/src/pages/index/store/modules/app.ts b/src/pages/index/store/modules/app.ts
index 454e9af..f9bc81b 100644
--- a/src/pages/index/store/modules/app.ts
+++ b/src/pages/index/store/modules/app.ts
@@ -16,6 +16,7 @@ export interface AppState {
   logoTitle: String
   userInfo: String
   greyMode: Boolean
+  showBackTop: Boolean
 }
 
 @Module({ dynamic: true, namespaced: true, store, name: 'app' })
@@ -34,6 +35,7 @@ class App extends VuexModule implements AppState {
   public logoTitle = 'vue-ElPlus-admin' // logo标题
   public userInfo = 'userInfo' // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
   public greyMode = false // 是否开始灰色模式，用于特殊悼念日
+  public showBackTop = true // 是否显示回到顶部
 
   @Mutation
   private SET_COLLAPSED(collapsed: boolean): void {
@@ -87,6 +89,10 @@ class App extends VuexModule implements AppState {
   private SET_GREYMODE(greyMode: boolean): void {
     this.greyMode = greyMode
   }
+  @Mutation
+  private SET_SHOWBACKTOP(showBackTop: boolean): void {
+    this.showBackTop = showBackTop
+  }
 
   @Action
   public SetCollapsed(collapsed: boolean): void {
@@ -140,6 +146,10 @@ class App extends VuexModule implements AppState {
   public SetGreyMode(greyMode: boolean): void {
     this.SET_GREYMODE(greyMode)
   }
+  @Action
+  public SetShowBackTop(showBackTop: boolean): void {
+    this.SET_SHOWBACKTOP(showBackTop)
+  }
 }
 
 export const appStore = getModule<App>(App)
diff --git a/src/pages/index/views/example-demo/example-dialog/index.vue b/src/pages/index/views/example-demo/example-dialog/index.vue
index 994cef9..dc618e3 100644
--- a/src/pages/index/views/example-demo/example-dialog/index.vue
+++ b/src/pages/index/views/example-demo/example-dialog/index.vue
@@ -225,7 +225,7 @@ export default defineComponent({
       if (type === 'add') {
         currentChange(1)
       }
-      close()
+      toggleVisible()
       getExampleList()
     }
 
diff --git a/src/pages/index/views/table-demo/screen-table/index.vue b/src/pages/index/views/table-demo/screen-table/index.vue
index 4d0cbde..fcf815c 100644
--- a/src/pages/index/views/table-demo/screen-table/index.vue
+++ b/src/pages/index/views/table-demo/screen-table/index.vue
@@ -12,7 +12,7 @@
     <com-table
       ref="filterTable"
       v-loading="loading"
-      row-field="date"
+      row-key="date"
       :columns="columns"
       :data="tableData"
       :default-sort="{prop: 'date', order: 'descending'}"
@@ -70,7 +70,7 @@ export default defineComponent({
         label: '日期',
         sortable: true,
         width: '180',
-        columnfield: 'date',
+        columnKey: 'date',
         filters: [{ text: '2016-05-01', value: '2016-05-01' }, { text: '2016-05-02', value: '2016-05-02' }, { text: '2016-05-03', value: '2016-05-03' }, { text: '2016-05-04', value: '2016-05-04' }],
         filterMethod: filterHandler
       },
diff --git a/src/pages/index/views/table-demo/tree-and-load/index.vue b/src/pages/index/views/table-demo/tree-and-load/index.vue
index cf23550..2a62062 100644
--- a/src/pages/index/views/table-demo/tree-and-load/index.vue
+++ b/src/pages/index/views/table-demo/tree-and-load/index.vue
@@ -11,7 +11,7 @@
       v-loading="loading"
       :columns="columns"
       :data="tableData"
-      row-field="id"
+      row-key="id"
       border
       default-expand-all
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -21,7 +21,7 @@
       v-loading="loading"
       :columns="columns1"
       :data="tableData1"
-      row-field="id"
+      row-key="id"
       border
       lazy
       :load="load"