refactor 'views-dashboard-analysis' from hardcoded to locale support

src/locales/lang/en-US.js

@@ -2,6 +2,7 @@ import antdEnUS from 'ant-design-vue/es/locale-provider/en_US'
 import momentEU from 'moment/locale/eu'
 import menu from './en-US/menu'
 import setting from './en-US/setting'
+import dashboard from './en-US/dashboard'
 
 const components = {
   antLocale: antdEnUS,
@@ -17,5 +18,6 @@ export default {
 
   ...components,
   ...menu,
-  ...setting
+  ...setting,
+  ...dashboard
 }

src/locales/lang/en-US/dashboard.js

@@ -0,0 +1,5 @@
+import analysis from './dashboard/analysis'
+
+export default {
+    ...analysis
+  }

src/locales/lang/en-US/dashboard/analysis.js

@@ -0,0 +1,36 @@
+export default {
+  'dashboard.analysis.test': 'Gongzhuan No.{no} shop',
+  'dashboard.analysis.introduce': 'Introduce',
+  'dashboard.analysis.total-sales': 'Total Sales',
+  'dashboard.analysis.day-sales': 'Daily Sales',
+  'dashboard.analysis.visits': 'Visits',
+  'dashboard.analysis.visits-trend': 'Visits Trend',
+  'dashboard.analysis.visits-ranking': 'Visits Ranking',
+  'dashboard.analysis.day-visits': 'Daily Visits',
+  'dashboard.analysis.week': 'WoW Change',
+  'dashboard.analysis.day': 'DoD Change',
+  'dashboard.analysis.payments': 'Payments',
+  'dashboard.analysis.conversion-rate': 'Conversion Rate',
+  'dashboard.analysis.operational-effect': 'Operational Effect',
+  'dashboard.analysis.sales-trend': 'Stores Sales Trend',
+  'dashboard.analysis.sales-ranking': 'Sales Ranking',
+  'dashboard.analysis.all-year': 'All Year',
+  'dashboard.analysis.all-month': 'All Month',
+  'dashboard.analysis.all-week': 'All Week',
+  'dashboard.analysis.all-day': 'All day',
+  'dashboard.analysis.search-users': 'Search Users',
+  'dashboard.analysis.per-capita-search': 'Per Capita Search',
+  'dashboard.analysis.online-top-search': 'Online Top Search',
+  'dashboard.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
+  'dashboard.analysis.dropdown-option-one': 'Operation one',
+  'dashboard.analysis.dropdown-option-two': 'Operation two',
+  'dashboard.analysis.channel.all': 'ALL',
+  'dashboard.analysis.channel.online': 'Online',
+  'dashboard.analysis.channel.stores': 'Stores',
+  'dashboard.analysis.sales': 'Sales',
+  'dashboard.analysis.traffic': 'Traffic',
+  'dashboard.analysis.table.rank': 'Rank',
+  'dashboard.analysis.table.search-keyword': 'Keyword',
+  'dashboard.analysis.table.users': 'Users',
+  'dashboard.analysis.table.weekly-range': 'Weekly Range'
+}

src/locales/lang/zh-CN.js

@@ -1,6 +1,7 @@
 import antd from 'ant-design-vue/es/locale-provider/zh_CN'
 import momentCN from 'moment/locale/zh-cn'
 import menu from './zh-CN/menu'
+import dashboard from './zh-CN/dashboard'
 
 const components = {
   antLocale: antd,
@@ -15,5 +16,6 @@ export default {
   'layouts.usermenu.dialog.content': '您确定要注销吗？',
 
   ...components,
-  ...menu
+  ...menu,
+  ...dashboard
 }

src/locales/lang/zh-CN/dashboard.js

@@ -0,0 +1,5 @@
+import analysis from './dashboard/analysis'
+
+export default {
+    ...analysis
+  }

src/locales/lang/zh-CN/dashboard/analysis.js

@@ -0,0 +1,36 @@
+export default {
+  'dashboard.analysis.test': '工专路 {no} 号店',
+  'dashboard.analysis.introduce': '指标说明',
+  'dashboard.analysis.total-sales': '总销售额',
+  'dashboard.analysis.day-sales': '日均销售额￥',
+  'dashboard.analysis.visits': '访问量',
+  'dashboard.analysis.visits-trend': '访问量趋势',
+  'dashboard.analysis.visits-ranking': '门店访问量排名',
+  'dashboard.analysis.day-visits': '日访问量',
+  'dashboard.analysis.week': '周同比',
+  'dashboard.analysis.day': '日同比',
+  'dashboard.analysis.payments': '支付笔数',
+  'dashboard.analysis.conversion-rate': '转化率',
+  'dashboard.analysis.operational-effect': '运营活动效果',
+  'dashboard.analysis.sales-trend': '销售趋势',
+  'dashboard.analysis.sales-ranking': '门店销售额排名',
+  'dashboard.analysis.all-year': '全年',
+  'dashboard.analysis.all-month': '本月',
+  'dashboard.analysis.all-week': '本周',
+  'dashboard.analysis.all-day': '今日',
+  'dashboard.analysis.search-users': '搜索用户数',
+  'dashboard.analysis.per-capita-search': '人均搜索次数',
+  'dashboard.analysis.online-top-search': '线上热门搜索',
+  'dashboard.analysis.the-proportion-of-sales': '销售额类别占比',
+  'dashboard.analysis.dropdown-option-one': '操作一',
+  'dashboard.analysis.dropdown-option-two': '操作二',
+  'dashboard.analysis.channel.all': '全部渠道',
+  'dashboard.analysis.channel.online': '线上',
+  'dashboard.analysis.channel.stores': '门店',
+  'dashboard.analysis.sales': '销售额',
+  'dashboard.analysis.traffic': '客流量',
+  'dashboard.analysis.table.rank': '排名',
+  'dashboard.analysis.table.search-keyword': '搜索关键词',
+  'dashboard.analysis.table.users': '用户数',
+  'dashboard.analysis.table.weekly-range': '周涨幅'
+}

src/views/dashboard/Analysis.vue

@@ -2,48 +2,48 @@
   <div>
     <a-row :gutter="24">
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="总销售额" total="￥126,560">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :loading="loading" :title="$t('dashboard.analysis.total-sales')" total="￥126,560">
+          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <trend flag="up" style="margin-right: 16px;">
-              <span slot="term">周同比</span>
+              <span slot="term">{{ $t('dashboard.analysis.week') }}</span>
               12%
             </trend>
             <trend flag="down">
-              <span slot="term">日同比</span>
+              <span slot="term">{{ $t('dashboard.analysis.day') }}</span>
               11%
             </trend>
           </div>
-          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
+          <template slot="footer">{{ $t('dashboard.analysis.day-sales') }}<span>￥ 234.56</span></template>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :loading="loading" :title="$t('dashboard.analysis.visits')" :total="8846 | NumberFormat">
+          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <mini-area />
           </div>
-          <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
+          <template slot="footer">{{ $t('dashboard.analysis.day-visits') }}<span> {{ '1234' | NumberFormat }}</span></template>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :loading="loading" :title="$t('dashboard.analysis.payments')" :total="6560 | NumberFormat">
+          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <mini-bar />
           </div>
-          <template slot="footer">转化率 <span>60%</span></template>
+          <template slot="footer">{{ $t('dashboard.analysis.conversion-rate') }} <span>60%</span></template>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="运营活动效果" total="78%">
-          <a-tooltip title="指标说明" slot="action">
+        <chart-card :loading="loading" :title="$t('dashboard.analysis.operational-effect')" total="78%">
+          <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
@@ -51,11 +51,11 @@
           </div>
           <template slot="footer">
             <trend flag="down" style="margin-right: 16px;">
-              <span slot="term">同周比</span>
+              <span slot="term">{{ $t('dashboard.analysis.week') }}</span>
               12%
             </trend>
             <trend flag="up">
-              <span slot="term">日环比</span>
+              <span slot="term">{{ $t('dashboard.analysis.day') }}</span>
               80%
             </trend>
           </template>
@@ -68,30 +68,30 @@
         <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
           <div class="extra-wrapper" slot="tabBarExtraContent">
             <div class="extra-item">
-              <a>今日</a>
-              <a>本周</a>
-              <a>本月</a>
-              <a>本年</a>
+              <a>{{ $t('dashboard.analysis.all-day') }}</a>
+              <a>{{ $t('dashboard.analysis.all-week') }}</a>
+              <a>{{ $t('dashboard.analysis.all-month') }}</a>
+              <a>{{ $t('dashboard.analysis.all-year') }}</a>
             </div>
             <a-range-picker :style="{width: '256px'}" />
           </div>
-          <a-tab-pane loading="true" tab="销售额" key="1">
+          <a-tab-pane loading="true" :tab="$t('dashboard.analysis.sales')" key="1">
             <a-row>
               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar :data="barData" title="销售额排行" />
+                <bar :data="barData" :title="$t('dashboard.analysis.sales-trend')" />
               </a-col>
               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="门店销售排行榜" :list="rankList"/>
+                <rank-list :title="$t('dashboard.analysis.sales-ranking')" :list="rankList"/>
               </a-col>
             </a-row>
           </a-tab-pane>
-          <a-tab-pane tab="访问量" key="2">
+          <a-tab-pane :tab="$t('dashboard.analysis.visits')" key="2">
             <a-row>
               <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
-                <bar :data="barData2" title="销售额趋势" />
+                <bar :data="barData2" :title="$t('dashboard.analysis.visits-trend')" />
               </a-col>
               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                <rank-list title="门店销售排行榜" :list="rankList"/>
+                <rank-list :title="$t('dashboard.analysis.visits-ranking')" :list="rankList"/>
               </a-col>
             </a-row>
           </a-tab-pane>
@@ -102,17 +102,17 @@
     <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
       <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-          <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
+          <a-card :loading="loading" :bordered="false" :title="$t('dashboard.analysis.online-top-search')" :style="{ height: '100%' }">
             <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
               <a class="ant-dropdown-link" href="#">
                 <a-icon type="ellipsis" />
               </a>
               <a-menu slot="overlay">
                 <a-menu-item>
-                  <a href="javascript:;">操作一</a>
+                  <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
                 </a-menu-item>
                 <a-menu-item>
-                  <a href="javascript:;">操作二</a>
+                  <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
                 </a-menu-item>
               </a-menu>
             </a-dropdown>
@@ -120,8 +120,8 @@
               <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                 <number-info :total="12321" :sub-total="17.1">
                   <span slot="subtitle">
-                    <span>搜索用户数</span>
-                    <a-tooltip title="指标说明" slot="action">
+                    <span>{{ $t('dashboard.analysis.search-users') }}</span>
+                    <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                       <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                     </a-tooltip>
                   </span>
@@ -134,8 +134,8 @@
               <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                 <number-info :total="2.7" :sub-total="26.2" status="down">
                   <span slot="subtitle">
-                    <span>人均搜索次数</span>
-                    <a-tooltip title="指标说明" slot="action">
+                    <span>{{ $t('dashboard.analysis.per-capita-search') }}</span>
+                    <a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
                       <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                     </a-tooltip>
                   </span>
@@ -164,7 +164,7 @@
           </a-card>
         </a-col>
         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }">
+          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" :title="$t('dashboard.analysis.the-proportion-of-sales')" :style="{ height: '100%' }">
             <div slot="extra" style="height: inherit;">
               <!-- style="bottom: 12px;display: inline-block;" -->
               <span class="dashboard-analysis-iconGroup">
@@ -172,24 +172,24 @@
                   <a-icon type="ellipsis" class="ant-dropdown-link" />
                   <a-menu slot="overlay">
                     <a-menu-item>
-                      <a href="javascript:;">操作一</a>
+                      <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
                     </a-menu-item>
                     <a-menu-item>
-                      <a href="javascript:;">操作二</a>
+                      <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
                     </a-menu-item>
                   </a-menu>
                 </a-dropdown>
               </span>
               <div class="analysis-salesTypeRadio">
                 <a-radio-group defaultValue="a">
-                  <a-radio-button value="a">全部渠道</a-radio-button>
-                  <a-radio-button value="b">线上</a-radio-button>
-                  <a-radio-button value="c">门店</a-radio-button>
+                  <a-radio-button value="a">{{ $t('dashboard.analysis.channel.all') }}</a-radio-button>
+                  <a-radio-button value="b">{{ $t('dashboard.analysis.channel.online') }}</a-radio-button>
+                  <a-radio-button value="c">{{ $t('dashboard.analysis.channel.stores') }}</a-radio-button>
                 </a-radio-group>
               </div>
 
             </div>
-            <h4>销售额</h4>
+            <h4>{{ $t('dashboard.analysis.sales') }}</h4>
             <div>
               <!-- style="width: calc(100% - 240px);" -->
               <div>
@@ -266,28 +266,6 @@ const searchUserScale = [
     max: 10
   }]
 
-const searchTableColumns = [
-  {
-    dataIndex: 'index',
-    title: '排名',
-    width: 90
-  },
-  {
-    dataIndex: 'keyword',
-    title: '搜索关键词'
-  },
-  {
-    dataIndex: 'count',
-    title: '用户数'
-  },
-  {
-    dataIndex: 'range',
-    title: '周涨幅',
-    align: 'right',
-    sorter: (a, b) => a.range - b.range,
-    scopedSlots: { customRender: 'range' }
-  }
-]
 const searchData = []
 for (let i = 0; i < 50; i += 1) {
   searchData.push({
@@ -347,7 +325,6 @@ export default {
       // 搜索用户数
       searchUserData,
       searchUserScale,
-      searchTableColumns,
       searchData,
 
       barData,
@@ -363,6 +340,32 @@ export default {
       }
     }
   },
+  computed: {
+    searchTableColumns () {
+        return [
+      {
+        dataIndex: 'index',
+        title: this.$t('dashboard.analysis.table.rank'),
+        width: 90
+      },
+      {
+        dataIndex: 'keyword',
+        title: this.$t('dashboard.analysis.table.search-keyword')
+      },
+      {
+        dataIndex: 'count',
+        title: this.$t('dashboard.analysis.table.users')
+      },
+      {
+        dataIndex: 'range',
+        title: this.$t('dashboard.analysis.table.weekly-range'),
+        align: 'right',
+        sorter: (a, b) => a.range - b.range,
+        scopedSlots: { customRender: 'range' }
+      }
+      ]
+    }
+  },
   created () {
     setTimeout(() => {
       this.loading = !this.loading