add plan component

package.json

@@ -52,8 +52,9 @@
     "mapv": "^2.0.62",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.9.6",
+    "qs": "^6.10.1",
     "screenfull": "^5.1.0",
+    "sortablejs": "^1.13.0",
     "vab-icon": "^0.0.1",
     "vue": "^2.6.12",
     "vue-echarts": "5.0.0-beta.0",
@@ -69,17 +70,17 @@
     "zx-verify": "^0.0.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^4.5.11",
-    "@vue/cli-service": "^4.5.11",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "body-parser": "^1.19.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.1",
-    "eslint": "^7.21.0",
+    "eslint": "^7.22.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.7.0",
+    "eslint-plugin-vue": "^7.8.0",
     "filemanager-webpack-plugin": "^4.0.0",
     "image-webpack-loader": "^7.0.1",
     "lint-staged": "^10.5.4",
@@ -90,7 +91,7 @@
     "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-recess-order": "^2.3.0",
-    "svg-sprite-loader": "^5.2.1",
+    "svg-sprite-loader": "^6.0.2",
     "vue-template-compiler": "^2.6.12",
     "webpackbar": "^4.0.0"
   },

src/views/index/components/Plan.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <vab-icon icon="send-plane-2-line" />
+      计划
+      <el-tag class="card-header-tag" type="success">
+        祝用框架的小伙伴都能住上别墅，开上保时捷
+      </el-tag>
+    </template>
+    <el-table :data="tableData" row-key="title" height="283px">
+      <el-table-column align="center" label="拖拽" width="50px">
+        <template #default="{}">
+          <vab-icon
+            style="cursor: pointer"
+            :icon="['fas', 'arrows-alt']"
+          ></vab-icon>
+        </template>
+      </el-table-column>
+      <el-table-column width="20px" />
+      <el-table-column prop="title" label="目标" width="230px" />
+      <el-table-column label="进度" width="220px">
+        <template #default="{ row }">
+          <el-progress :percentage="row.percentage" :color="row.color" />
+        </template>
+      </el-table-column>
+      <el-table-column width="50px" />
+      <el-table-column prop="endTIme" label="完成时间" />
+    </el-table>
+  </el-card>
+</template>
+<script>
+  import Sortable from 'sortablejs'
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            title: '帮助中小企业盈利1个亿',
+            endTIme: '2099-12-31',
+            percentage: 50,
+            color: '#95de64',
+          },
+          {
+            title: '帮助10万个人',
+            endTIme: '2029-12-31',
+            percentage: 8,
+            color: '#69c0ff',
+          },
+          {
+            title: '交个帅气的男朋友',
+            endTIme: '2021-12-31',
+            percentage: 76,
+            color: '#1890FF',
+          },
+          {
+            title: 'vue-admin-beautiful标星过1K',
+            endTIme: '2020-03-31',
+            percentage: 100,
+            color: '#ffc069',
+          },
+          {
+            title: '活到老，学到老',
+            endTIme: '2094-12-16',
+            percentage: 25,
+            color: '#5cdbd3',
+          },
+          {
+            title: '变成像尤雨溪一样优秀的人',
+            endTIme: '此生无望',
+            percentage: 1,
+            color: '#b37feb',
+          },
+        ],
+      }
+    },
+    mounted() {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd({ newIndex, oldIndex }) {
+          const currRow = _this.tableData.splice(oldIndex, 1)[0]
+          _this.tableData.splice(newIndex, 0, currRow)
+        },
+      })
+    },
+  }
+</script>

src/views/index/index.vue

@@ -194,6 +194,8 @@
           <el-alert :closable="false" :title="userAgent" type="info"></el-alert>
           <br />
         </el-card>
+
+        <plan></plan>
       </el-col>
 
       <el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13">
@@ -223,10 +225,12 @@
   import { getList } from '@/api/changeLog'
   import { getNoticeList } from '@/api/notice'
   import { getRepos, getStargazers } from '@/api/github'
+  import Plan from './components/Plan'
   export default {
     name: 'Index',
     components: {
       VabChart,
+      Plan,
     },
     data() {
       return {