阳滨修改Dashboard和Plan页的ts

package.json

@@ -1,41 +1,44 @@
-{
-  "name": "compdfkit_vendors_manage_front",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "axios": "^1.1.3",
-    "clipboard": "^2.0.11",
-    "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.6",
-    "echarts": "^5.4.0",
-    "element-ui": "^2.15.12",
-    "pinia": "^2.0.24",
-    "vant": "^2.12.53",
-    "vue": "^2.7.14",
-    "vue-router": "^3.5.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "sass": "^1.56.1",
-    "sass-loader": "^13.2.0",
-    "typescript": "~4.5.5"
-  }
-}
+{
+  "name": "compdfkit_vendors_manage_front",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.1.3",
+    "clipboard": "^2.0.11",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.6",
+    "echarts": "^5.4.0",
+    "element-ui": "^2.15.12",
+    "pinia": "^2.0.24",
+    "vant": "^2.12.53",
+    "vue": "^2.7.14",
+    "vue-router": "^3.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "typescript": "~4.5.5",
+    "vue-class-component": "^7.2.6",
+    "vue-property-decorator": "^9.1.2",
+    "vuex-module-decorators": "^2.0.0"
+  }
+}

src/App.vue

@@ -1,62 +1,56 @@
-<template>
-  <div id="app">
-    <Header></Header>
-    <div class="main">
-      <Aside v-if="$route.name !== 'login'"></Aside>
-      <router-view v-if="isRouterAlive"/>
-    </div>
-  </div>
-</template>
-<script>
-import Header from '@/components/common/Header.vue'
-import Aside from '@/components/common/Aside.vue'
-
-export default {
-  name: 'App',
-  components: {
-    Header,
-    Aside
-  },
-  provide () {
-    // 父组件通过provide来提供变量，在子组件中通过inject来注入变量
-    return {
-      reload: this.reload
-    }
-  },
-  data () {
-    return {
-      isRouterAlive: true // 控制视图是否显示
-    }
-  },
-  methods: {
-    reload () {
-      this.isRouterAlive = false
-      this.$nextTick(function () {
-        this.isRouterAlive = true
-      })
-    }
-  }
-}
-</script>
-
-<style>
-#app {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-#app > .main {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-grow: 1;
-  margin-top: 80px;
-}
-@media screen and (max-width: 767px) {
-  #app > .main {
-    flex-direction: column;
-    margin-top: 66px;
-  }
-}
-</style>
+<template>
+  <div id="app">
+    <Header></Header>
+    <div class="main">
+      <Aside v-if="$route.name !== 'login'"></Aside>
+      <router-view v-if="isRouterAlive" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Provide, Vue } from 'vue-property-decorator'
+import Header from '@/components/common/Header.vue'
+import Aside from '@/components/common/Aside.vue'
+
+@Component({
+  components: {
+    Header,
+    Aside
+  }
+})
+export default class App extends Vue {
+  @Provide()
+  reload = () => {
+    this.isRouterAlive = false
+    this.$nextTick(function () {
+      this.isRouterAlive = true
+    })
+  }
+
+  isRouterAlive = true // 控制视图是否显示
+}
+</script>
+
+<style>
+#app {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+#app>.main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  margin-top: 80px;
+}
+
+@media screen and (max-width: 767px) {
+  #app>.main {
+    flex-direction: column;
+    margin-top: 66px;
+  }
+}
+</style>

src/crypto/crypto.js

@@ -1,29 +1,29 @@
-// crypto.js文件内容
-import CryptoJS from 'crypto-js'
-export default { // 加密
-  /**
-   * @description: 加密
-   * @param {*} word
-   * @param {*} keyStr
-   */
-  set (word, keyStr) {
-    keyStr = keyStr || 'abcdef0123456789' // 16位的密钥，自己定义，和下面的密钥要相同
-    var srcs = CryptoJS.enc.Utf8.parse(word) // 字符串到数组转换，解析明文
-    var key = CryptoJS.enc.Utf8.parse(keyStr) // 字符串到数组转换，解析秘钥
-    // mode:加密方式；padding:填充方式；iv便宜向量（可选）
-    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
-    return encrypted.toString() // 加密后的结果是对象，要转换为文本
-  },
-
-  /**
-   * @description: 解密
-   * @param {*} word
-   * @param {*} keyStr
-   */
-  get (word, keyStr) {
-    keyStr = keyStr || 'abcdef0123456789'
-    var key = CryptoJS.enc.Utf8.parse(keyStr) // 字符串到数组转换
-    var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
-    return CryptoJS.enc.Utf8.stringify(decrypt).toString() // 数组到字符串转换
-  }
-}
+// crypto.js文件内容
+import CryptoJS from 'crypto-js'
+export default { // 加密
+  /**
+   * @description: 加密
+   * @param {*} word
+   * @param {*} keyStr
+   */
+  set (word) {
+    var keyStr = 'abcdef0123456789' // 16位的密钥，自己定义，和下面的密钥要相同
+    var srcs = CryptoJS.enc.Utf8.parse(word) // 字符串到数组转换，解析明文
+    var key = CryptoJS.enc.Utf8.parse(keyStr) // 字符串到数组转换，解析秘钥
+    // mode:加密方式；padding:填充方式；iv便宜向量（可选）
+    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
+    return encrypted.toString() // 加密后的结果是对象，要转换为文本
+  },
+
+  /**
+   * @description: 解密
+   * @param {*} word
+   * @param {*} keyStr
+   */
+  get (word) {
+    var keyStr = 'abcdef0123456789'
+    var key = CryptoJS.enc.Utf8.parse(keyStr) // 字符串到数组转换
+    var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
+    return CryptoJS.enc.Utf8.stringify(decrypt).toString() // 数组到字符串转换
+  }
+}

src/views/billing/plan.vue

@@ -1,223 +1,226 @@
-<template>
-  <div class="plan container">
-    <h1>Plan</h1>
-    <Progress></Progress>
-    <div class="block">
-      <div class="top">
-        <h2>Processing Files Balance</h2>
-        <a @click="exportData">
-          <picture>
-            <source type="image/png" media="(min-width: 430px)" srcset="../../../static/images/dashboard/download@2x.png">
-            <source type="image/png" media="(max-width: 429px)" srcset="../../../static/images/dashboard/download.png">
-            <img src="../../../static/images/dashboard/download@2x.png" alt="download">
-          </picture>
-        </a>
-      </div>
-      <div class="plan-table">
-        <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
-          <el-table-column prop="date" label="Date" sortable :formatter="formatterDate" min-width="120"></el-table-column>
-          <el-table-column prop="description" label="Description" min-width="240"></el-table-column>
-          <el-table-column prop="balanceChange" label="Balance Change" min-width="120"></el-table-column>
-          <el-table-column prop="remainingFiles" label="Remaining Files" min-width="120"></el-table-column>
-        </el-table>
-      </div>
-      <div class="pagination">
-        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalNum" @current-change="handleCurrentChange" class="max-page-btn"></el-pagination>
-        <div class="mobile-page-btn">
-          <el-button type="primary" plain icon="el-icon-arrow-left" @click="handleCurrentChangeMobile(currentPage - 1)">Previous</el-button>
-          <el-button type="primary" plain @click="handleCurrentChangeMobile(currentPage + 1)">Next<i class="el-icon-arrow-right el-icon--right"></i></el-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Progress from '@/components/progress/Progress.vue'
-import { getBalanceRecordList, exportBalanceRecordList } from '@/request/api'
-
-export default {
-  components: {
-    Progress
-  },
-  data () {
-    return {
-      tableData: [],
-      pageSize: 8,
-      totalNum: 0,
-      currentPage: 1
-    }
-  },
-  created () {
-    this.getPlanList(this.currentPage)
-  },
-  methods: {
-    // 获取plan列表数据
-    getPlanList (page) {
-      getBalanceRecordList({
-        page: page,
-        size: this.pageSize
-      }).then(res => {
-        if (res.code === '200') {
-          this.tableData = []
-          for (let i = 0; i < res.data.records.length; i++) {
-            this.tableData.push(res.data.records[i])
-            this.totalNum = res.data.total
-          }
-        } else {
-          this.$message.error('Failed to connect.')
-        }
-      }).catch(err => {
-        console.log(err)
-        this.$message.error('Failed to connect.')
-      })
-    },
-    // 日期自定格式
-    formatterDate (row, column) {
-      const data = row[column.property]
-      if (data === null || data === '') return ''
-      const dt = new Date(data)
-      let month = ''
-      switch (dt.getMonth() + 1) {
-        case 1:
-          month = 'Jan'
-          break
-        case 2:
-          month = 'Feb'
-          break
-        case 3:
-          month = 'Mar'
-          break
-        case 4:
-          month = 'Apr'
-          break
-        case 5:
-          month = 'May'
-          break
-        case 6:
-          month = 'Jun'
-          break
-        case 7:
-          month = 'Jul'
-          break
-        case 8:
-          month = 'Aug'
-          break
-        case 9:
-          month = 'Sept'
-          break
-        case 10:
-          month = 'Oct'
-          break
-        case 11:
-          month = 'Nov'
-          break
-        case 12:
-          month = 'Dec'
-          break
-      }
-      return month + ' ' + dt.getDate() + ',' + dt.getFullYear()
-    },
-    handleCurrentChange (page) {
-      this.currentPage = page
-      this.getPlanList(page)
-    },
-    handleCurrentChangeMobile (page) {
-      const totalPageNum = (this.totalNum + this.totalNum % 8) / 8
-      if (page <= 0 || page > totalPageNum) {
-        return
-      } else {
-        this.currentPage = page
-        this.getPlanList(page)
-      }
-    },
-    // 账户消费充值记录导出
-    exportData () {
-      exportBalanceRecordList({}, {
-        responseType: 'blob'
-      }).then(res => {
-        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
-        const downloadElement = document.createElement('a') // 创建a标签
-        const href = window.URL.createObjectURL(blob) // 创建下载的链接
-        downloadElement.href = href
-        downloadElement.download = 'plan.xlsx' // 下载后文件名
-        document.body.appendChild(downloadElement)
-        downloadElement.click() // 点击下载
-        document.body.removeChild(downloadElement) // 下载完成移除元素
-        window.URL.revokeObjectURL(href) // 释放掉blob对象
-      }).catch(err => {
-        console.log(err)
-        this.$message.error('Failed to export.')
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.plan {
-  .top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    img {
-      width: 28px;
-      height: 28px;
-    }
-  }
-  :deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-    background-color: #fff;
-  }
-  .pagination {
-    margin-top: 40px;
-    text-align: right;
-    .mobile-page-btn {
-      display: none;
-      ::v-deep .el-button {
-        width: 114px;
-        height: 40px;
-        border-radius: 6px;
-        font-weight: 700;
-        &:first-child {
-          padding-left: 11px;
-        }
-        &:last-child {
-          text-align: right;
-          padding-left: 13px;
-          margin-left: 12px;
-        }
-      }
-      ::v-deep .el-button--primary.is-plain {
-        background: #fff;
-        border-color: #1460F3;
-      }
-      ::v-deep [class^=el-icon-] {
-        font-weight: 700;
-      }
-      ::v-deep .el-button--primary.is-plain:hover, .el-button--primary.is-plain:focus {
-        color: #1460F3;
-      }
-    }
-  }
-}
-@media screen and (max-width: 767px) {
-  .plan .pagination {
-    text-align: center;
-    .mobile-page-btn {
-      display: inline-block;
-    }
-    .max-page-btn {
-      display: none;
-    }
-  }
-}
-@media screen and (max-width: 320px) {
-  .plan .pagination {
-    .mobile-page-btn {
-      ::v-deep .el-button {
-        width: calc(50% - 6px);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="plan container">
+    <h1>Plan</h1>
+    <Progress></Progress>
+    <div class="block">
+      <div class="top">
+        <h2>Processing Files Balance</h2>
+        <a @click="exportData">
+          <picture>
+            <source type="image/png" media="(min-width: 430px)" srcset="../../../static/images/dashboard/download@2x.png">
+            <source type="image/png" media="(max-width: 429px)" srcset="../../../static/images/dashboard/download.png">
+            <img src="../../../static/images/dashboard/download@2x.png" alt="download">
+          </picture>
+        </a>
+      </div>
+      <div class="plan-table">
+        <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
+          <el-table-column columnprop="date" label="Date" sortable :formatter="formatterDate" min-width="120"></el-table-column>
+          <el-table-column prop="description" label="Description" min-width="240"></el-table-column>
+          <el-table-column prop="balanceChange" label="Balance Change" min-width="120"></el-table-column>
+          <el-table-column prop="remainingFiles" label="Remaining Files" min-width="120"></el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination">
+        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalNum" @current-change="handleCurrentChange" class="max-page-btn"></el-pagination>
+        <div class="mobile-page-btn">
+          <el-button type="primary" plain icon="el-icon-arrow-left" @click="handleCurrentChangeMobile(currentPage - 1)">Previous</el-button>
+          <el-button type="primary" plain @click="handleCurrentChangeMobile(currentPage + 1)">Next<i class="el-icon-arrow-right el-icon--right"></i></el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import Progress from '@/components/progress/Progress.vue'
+import { getBalanceRecordList, exportBalanceRecordList } from '@/request/api'
+
+@Component({
+  components: {
+    Progress
+  }
+})
+export default class Plan extends Vue {
+  tableData:any = []
+  pageSize = 8
+  totalNum = 0
+  currentPage = 1
+
+  created () {
+    this.getPlanList(this.currentPage)
+  }
+
+  // 获取plan列表数据
+  getPlanList (page:number) {
+    getBalanceRecordList({
+      page: page,
+      size: this.pageSize
+    }).then((res:any) => {
+      if (res.code === '200') {
+        this.tableData = []
+        for (let i = 0; i < res.data.records.length; i++) {
+          this.tableData.push(res.data.records[i])
+          this.totalNum = res.data.total
+        }
+      } else {
+        this.$message.error('Failed to connect.')
+      }
+    }).catch(err => {
+      console.log(err)
+      this.$message.error('Failed to connect.')
+    })
+  }
+
+  // 日期自定格式
+  formatterDate (row:any, column:any) {
+    const data = row[column.property]
+    if (data === null || data === '') return ''
+    const dt = new Date(data)
+    let month = ''
+    switch (dt.getMonth() + 1) {
+      case 1:
+        month = 'Jan'
+        break
+      case 2:
+        month = 'Feb'
+        break
+      case 3:
+        month = 'Mar'
+        break
+      case 4:
+        month = 'Apr'
+        break
+      case 5:
+        month = 'May'
+        break
+      case 6:
+        month = 'Jun'
+        break
+      case 7:
+        month = 'Jul'
+        break
+      case 8:
+        month = 'Aug'
+        break
+      case 9:
+        month = 'Sept'
+        break
+      case 10:
+        month = 'Oct'
+        break
+      case 11:
+        month = 'Nov'
+        break
+      case 12:
+        month = 'Dec'
+        break
+    }
+    return month + ' ' + dt.getDate() + ',' + dt.getFullYear()
+  }
+
+  handleCurrentChange (page:number):void {
+    this.currentPage = page
+    this.getPlanList(page)
+  }
+
+  handleCurrentChangeMobile (page:number) {
+    const totalPageNum = (this.totalNum + this.totalNum % 8) / 8
+    if (page <= 0 || page > totalPageNum) {
+      return undefined
+    } else {
+      this.currentPage = page
+      this.getPlanList(page)
+    }
+  }
+
+  // 账户消费充值记录导出
+  exportData () {
+    exportBalanceRecordList({}, {
+      responseType: 'blob'
+    }).then((res:any) => {
+      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+      const downloadElement = document.createElement('a') // 创建a标签
+      const href = window.URL.createObjectURL(blob) // 创建下载的链接
+      downloadElement.href = href
+      downloadElement.download = 'plan.xlsx' // 下载后文件名
+      document.body.appendChild(downloadElement)
+      downloadElement.click() // 点击下载
+      document.body.removeChild(downloadElement) // 下载完成移除元素
+      window.URL.revokeObjectURL(href) // 释放掉blob对象
+    }).catch(err => {
+      console.log(err)
+      this.$message.error('Failed to export.')
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.plan {
+  .top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    img {
+      width: 28px;
+      height: 28px;
+    }
+  }
+  :deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #fff;
+  }
+  .pagination {
+    margin-top: 40px;
+    text-align: right;
+    .mobile-page-btn {
+      display: none;
+      ::v-deep .el-button {
+        width: 114px;
+        height: 40px;
+        border-radius: 6px;
+        font-weight: 700;
+        &:first-child {
+          padding-left: 11px;
+        }
+        &:last-child {
+          text-align: right;
+          padding-left: 13px;
+          margin-left: 12px;
+        }
+      }
+      ::v-deep .el-button--primary.is-plain {
+        background: #fff;
+        border-color: #1460F3;
+      }
+      ::v-deep [class^=el-icon-] {
+        font-weight: 700;
+      }
+      ::v-deep .el-button--primary.is-plain:hover, .el-button--primary.is-plain:focus {
+        color: #1460F3;
+      }
+    }
+  }
+}
+@media screen and (max-width: 767px) {
+  .plan .pagination {
+    text-align: center;
+    .mobile-page-btn {
+      display: inline-block;
+    }
+    .max-page-btn {
+      display: none;
+    }
+  }
+}
+@media screen and (max-width: 320px) {
+  .plan .pagination {
+    .mobile-page-btn {
+      ::v-deep .el-button {
+        width: calc(50% - 6px);
+      }
+    }
+  }
+}
+</style>

src/views/login.vue

@@ -26,33 +26,41 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
 import { loginStore } from '@/store/loginStore'
 import { apiLogin } from '@/request/api'
 import crypto from '@/crypto/crypto'
+import { Form } from 'element-ui'
+
+interface IruleForm {
+  password: string,
+  email: string,
+  isRemenber: boolean
+}
+
+@Component
+export default class Login extends Vue {
+  ruleForm:IruleForm = {
+    password: '',
+    email: '',
+    isRemenber: false
+  }
+
+  rules: any = {
+    email: [
+      { required: true, message: 'Email cannot be blank.', trigger: 'blur' }
+      // { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' }
+    ],
+    password: [
+      { required: true, message: 'Password cannot be blank.', trigger: 'blur' },
+      { min: 6, max: 24, message: 'Incorrect password', trigger: 'blur' }
+    ]
+  }
+
+  showErrTip = false
+  passwordType = false
 
-export default {
-  data () {
-    return {
-      ruleForm: {
-        password: '',
-        email: '',
-        isRemenber: false
-      },
-      rules: {
-        email: [
-          { required: true, message: 'Email cannot be blank.', trigger: 'blur' }
-          // { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, message: 'Password cannot be blank.', trigger: 'blur' },
-          { min: 6, max: 24, message: 'Incorrect password', trigger: 'blur' }
-        ]
-      },
-      passwordType: false,
-      showErrTip: false
-    }
-  },
   mounted () {
     const isRemenber = localStorage.getItem('isRemenber')
     if (isRemenber) {
@@ -60,51 +68,51 @@ export default {
       this.ruleForm.password = crypto.get(localStorage.getItem('password')) || ''
       this.ruleForm.isRemenber = true
     }
-  },
-  methods: {
-    // 登录
-    submitForm (formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          apiLogin({
-            username: this.ruleForm.email,
-            password: this.ruleForm.password
-          }, {}).then(res => {
-            if (res.code === '200') {
-              loginStore().setAuth(true)
-              loginStore().setUser({
-                name: res.data.username,
-                token: res.data.token
-              })
-              localStorage.setItem('username', this.ruleForm.email)
-              const SECRET_PWD = crypto.set(this.ruleForm.password) // 加密
-              localStorage.setItem('password', SECRET_PWD)
-              if (this.ruleForm.isRemenber) {
-                localStorage.setItem('isRemenber', 'true')
-              } else {
-                localStorage.removeItem('isRemenber')
-              }
-              const router = this.$router
-              router.push('/dashboard')
-            } else if (res.code === '-1') {
-              this.showErrTip = true
+  }
+
+  // 登录
+  submitForm (formName:string) {
+    (this.$refs[formName] as Form).validate((valid: boolean) => {
+      if (valid) {
+        apiLogin({
+          username: this.ruleForm.email,
+          password: this.ruleForm.password
+        }, {}).then((res: any) => {
+          if (res.code === '200') {
+            loginStore().setAuth(true)
+            loginStore().setUser({
+              name: res.data.username,
+              token: res.data.token
+            })
+            localStorage.setItem('username', this.ruleForm.email)
+            const SECRET_PWD = crypto.set(this.ruleForm.password) // 加密
+            localStorage.setItem('password', SECRET_PWD)
+            if (this.ruleForm.isRemenber) {
+              localStorage.setItem('isRemenber', 'true')
             } else {
-              this.$message.error('Failed to connect.')
+              localStorage.removeItem('isRemenber')
             }
-          }).catch(err => {
-            console.log(err)
+            const router = this.$router
+            router.push('/dashboard')
+          } else if (res.code === '-1') {
+            this.showErrTip = true
+          } else {
             this.$message.error('Failed to connect.')
-          })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    // 阻止粘贴
-    handlePaste () {
-      return false
-    }
+          }
+        }).catch(err => {
+          console.log(err)
+          this.$message.error('Failed to connect.')
+        })
+      } else {
+        console.log('error submit!!')
+        return false
+      }
+    })
+  }
+
+  // 阻止粘贴
+  handlePaste ():boolean {
+    return false
   }
 }
 </script>

tsconfig.json

@@ -1,42 +1,43 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
-    "allowJs": true
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ],
+    "allowJs": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}