Update Project V1.7.0

Update Project V1.7.0 #45

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-admin",
-  "version": "1.1.0",
+  "version": "1.7.0",
   "private": true,
   "author": "Dinh Duc Thien",
   "email": "jungjihoonkr97@gmail.com",

src/App.vue

@@ -1,81 +1,88 @@
 <template>
-  <a-config-provider :locale="locale">
-    <router-view/>
-  </a-config-provider>
+<a-config-provider :locale="locale">
+    <router-view />
+</a-config-provider>
 </template>
 
 <script>
-import {enquireScreen} from './utils/util'
-import {mapState, mapMutations} from 'vuex'
+import {
+    enquireScreen
+} from './utils/util'
+import {
+    mapState,
+    mapMutations
+} from 'vuex'
 import themeUtil from '@/utils/themeUtil';
-import {getI18nKey} from '@/utils/routerUtil'
+import {
+    getI18nKey
+} from '@/utils/routerUtil'
 
 export default {
-  name: 'App',
-  data() {
-    return {
-      locale: {}
-    }
-  },
-  created () {
-    this.setHtmlTitle()
-    this.setLanguage(this.lang)
-    enquireScreen(isMobile => this.setDevice(isMobile))
-  },
-  mounted() {
-   this.setWeekModeTheme(this.weekMode)
-  },
-  watch: {
-    weekMode(val) {
-      this.setWeekModeTheme(val)
-    },
-    lang(val) {
-      this.setLanguage(val)
+    name: 'App',
+    data() {
+        return {
+            locale: {}
+        }
     },
-    $route() {
-      this.setHtmlTitle()
+    created() {
+        this.setHtmlTitle()
+        this.setLanguage(this.lang)
+        enquireScreen(isMobile => this.setDevice(isMobile))
     },
-    'theme.mode': function(val) {
-      let closeMessage = this.$message.loading(`You have selected theme mode ${val}, switching...`)
-      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
+    mounted() {
+        this.setWeekModeTheme(this.weekMode)
     },
-    'theme.color': function(val) {
-      let closeMessage = this.$message.loading(`You selected the theme color ${val}, switching...`)
-      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
-    }
-  },
-  computed: {
-    ...mapState('setting', ['theme', 'weekMode', 'lang'])
-  },
-  methods: {
-    ...mapMutations('setting', ['setDevice']),
-    setWeekModeTheme(weekMode) {
-      if (weekMode) {
-        document.body.classList.add('week-mode')
-      } else {
-        document.body.classList.remove('week-mode')
-      }
+    watch: {
+        weekMode(val) {
+            this.setWeekModeTheme(val)
+        },
+        lang(val) {
+            this.setLanguage(val)
+        },
+        $route() {
+            this.setHtmlTitle()
+        },
+        'theme.mode': function (val) {
+            let closeMessage = this.$message(`You have selected theme mode ${val}, switching...`)
+            themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
+        },
+        'theme.color': function (val) {
+            let closeMessage = this.$message(`You selected the theme color ${val}, switching...`)
+            themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
+        }
     },
-    setLanguage(lang) {
-      this.$i18n.locale = lang
-      switch (lang) {
-        case 'VI':
-          this.locale = require('ant-design-vue/es/locale-provider/vi_VN').default
-          break
-        case 'KR':
-          this.locale = require('ant-design-vue/es/locale-provider/ko_KR').default
-          break
-        case 'US':
-        default:
-          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
-          break
-      }
+    computed: {
+        ...mapState('setting', ['theme', 'weekMode', 'lang'])
     },
-    setHtmlTitle() {
-      const route = this.$route
-      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
-      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
-    },
-  }
+    methods: {
+        ...mapMutations('setting', ['setDevice']),
+        setWeekModeTheme(weekMode) {
+            if (weekMode) {
+                document.body.classList.add('week-mode')
+            } else {
+                document.body.classList.remove('week-mode')
+            }
+        },
+        setLanguage(lang) {
+            this.$i18n.locale = lang
+            switch (lang) {
+                case 'VI':
+                    this.locale = require('ant-design-vue/es/locale-provider/vi_VN').default
+                    break
+                case 'KR':
+                    this.locale = require('ant-design-vue/es/locale-provider/ko_KR').default
+                    break
+                case 'US':
+                default:
+                    this.locale = require('ant-design-vue/es/locale-provider/en_US').default
+                    break
+            }
+        },
+        setHtmlTitle() {
+            const route = this.$route
+            const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
+            document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
+        },
+    }
 }
 </script>

src/components/card/ChartCard.vue

@@ -1,80 +1,86 @@
 <template>
-  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+<a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
     <div class="chart-card-header">
-      <div class="meta">
-        <span class="chart-card-title">{{ title }}</span>
-        <span class="chart-card-action">
-          <slot name="action"></slot>
-        </span>
-      </div>
-      <div class="total">
-        <span>{{ total }}</span>
-      </div>
+        <div class="meta">
+            <span class="chart-card-title">{{ title }}</span>
+            <span class="chart-card-action">
+                <slot name="action"></slot>
+            </span>
+        </div>
+        <div class="total">
+            <span>{{ total }}</span>
+        </div>
     </div>
     <div class="chart-card-content">
-      <div class="content-fix">
-        <slot></slot>
-      </div>
+        <div class="content-fix">
+            <slot></slot>
+        </div>
     </div>
     <div class="chart-card-footer">
-      <slot name="footer"></slot>
+        <slot name="footer"></slot>
     </div>
-  </a-card>
+</a-card>
 </template>
 
 <script>
 export default {
-  name: 'ChartCard',
-  props: ['title', 'total', 'loading'],
+    name: 'ChartCard',
+    props: ['title', 'total', 'loading'],
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 .chart-card-header {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
 }
+
 .chart-card-header .meta {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  color: @text-color-second;
-  font-size: 14px;
-  line-height: 22px;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: @text-color-second;
+    font-size: 14px;
+    line-height: 22px;
 }
+
 .chart-card-action {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
 }
+
 .total {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  white-space: nowrap;
-  margin-top: 4px;
-  margin-bottom: 0;
-  font-size: 30px;
-  line-height: 38px;
-  height: 38px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
 }
+
 .chart-card-footer {
-  border-top: 1px solid @border-color-base;
-  padding-top: 9px;
-  margin-top: 8px;
+    border-top: 1px solid @border-color-base;
+    padding-top: 9px;
+    margin-top: 8px;
 }
+
 .chart-card-content {
-  margin-bottom: 12px;
-  position: relative;
-  height: 46px;
-  width: 100%;
+    margin-bottom: 12px;
+    position: relative;
+    height: 46px;
+    width: 100%;
 }
+
 .chart-card-content .content-fix {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
 }
 </style>