From 8d1cd32a2d450d58d1330dacd784c360a90bc138 Mon Sep 17 00:00:00 2001
From: truthhun <1272881215@qq.com>
Date: Thu, 24 Aug 2023 16:19:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=B8=8A=E4=BC=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2el-table=E4=B8=BAvxe-table=EF=BC=8C=E4=BB=A5=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=A4=A7=E6=89=B9=E9=87=8F=E6=96=87=E6=A1=A3=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package-lock.json     | 29 ++++++++++++++-
 web/package.json          |  6 ++--
 web/pages/upload.vue      | 75 +++++++++++++++++++++------------------
 web/plugins/element-ui.js |  5 +++
 4 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index ab6b603..d94f48e 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -30,7 +30,9 @@
         "vue-template-compiler": "^2.6.14",
         "vue-upload-component": "^2.8.23",
         "vuex-persist": "^3.1.3",
-        "webpack": "^4.46.0"
+        "vxe-table": "^3.6.13",
+        "webpack": "^4.46.0",
+        "xe-utils": "^3.5.12"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.16.3",
@@ -20123,6 +20125,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vxe-table": {
+      "version": "3.6.13",
+      "resolved": "https://registry.npmjs.org/vxe-table/-/vxe-table-3.6.13.tgz",
+      "integrity": "sha512-Lm4J1dH4CAHnHWO/JKPo77SCaggPTdk7RFhCNvkMWRsReBvWwTR4zBUnEwmnomhNorRVdBYETjOnsbfor7us9Q==",
+      "peerDependencies": {
+        "vue": "^2.6.0",
+        "xe-utils": "^3.5.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
@@ -21204,6 +21215,11 @@
         }
       }
     },
+    "node_modules/xe-utils": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/xe-utils/-/xe-utils-3.5.12.tgz",
+      "integrity": "sha512-g+KntGC41vYJ+GzDngy28LIGAu3kSfhQxiprYxv1P6jP3DRVLNnTruBFD4WIVmMF2AUm1o23IMyAcQ10m2XSyQ=="
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
@@ -36543,6 +36559,12 @@
         }
       }
     },
+    "vxe-table": {
+      "version": "3.6.13",
+      "resolved": "https://registry.npmjs.org/vxe-table/-/vxe-table-3.6.13.tgz",
+      "integrity": "sha512-Lm4J1dH4CAHnHWO/JKPo77SCaggPTdk7RFhCNvkMWRsReBvWwTR4zBUnEwmnomhNorRVdBYETjOnsbfor7us9Q==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
@@ -37391,6 +37413,11 @@
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
       "requires": {}
     },
+    "xe-utils": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/xe-utils/-/xe-utils-3.5.12.tgz",
+      "integrity": "sha512-g+KntGC41vYJ+GzDngy28LIGAu3kSfhQxiprYxv1P6jP3DRVLNnTruBFD4WIVmMF2AUm1o23IMyAcQ10m2XSyQ=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index 2daf2c6..a68f04a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -35,7 +35,9 @@
     "vue-template-compiler": "^2.6.14",
     "vue-upload-component": "^2.8.23",
     "vuex-persist": "^3.1.3",
-    "webpack": "^4.46.0"
+    "vxe-table": "^3.6.13",
+    "webpack": "^4.46.0",
+    "xe-utils": "^3.5.12"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",
@@ -55,4 +57,4 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^21.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/web/pages/upload.vue b/web/pages/upload.vue
index 6880417..594433d 100644
--- a/web/pages/upload.vue
+++ b/web/pages/upload.vue
@@ -70,62 +70,57 @@
                       将文件拖到此处，或<em>点击上传</em>
                     </div>
                   </el-upload>
-                  <el-table
+                  <vxe-table
                     v-if="fileList.length > 0"
                     :data="fileList"
                     style="width: 100%"
                     max-height="480"
+                    stripe
+                    border="inner"
+                    :column-config="{resizable: true}"
                   >
-                    <el-table-column prop="title" label="#" width="50">
-                      <template slot-scope="scope">
-                        {{ scope.$index + 1 }}
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="title" label="文件" min-width="180">
-                      <template slot-scope="scope">
-                        <el-input v-model="scope.row.title" :disabled="loading">
+                    <vxe-column type="seq" width="60"></vxe-column>
+                    <vxe-column field="title" title="文件" min-width="180">
+                      <template #default="{row}">
+                        <el-input v-model="row.title" :disabled="loading">
                           <template slot="append">{{
-                            scope.row.ext
+                            row.ext
                           }}</template></el-input
                         >
-                        <div v-if="scope.row.error">
+                        <div v-if="row.error">
                           <el-progress
-                            :key="scope.row.name"
-                            :percentage="scope.row.percentage"
+                            :key="row.name"
+                            :percentage="row.percentage"
                             status="exception"
                           ></el-progress>
                           <small class="el-link el-link--danger error-tips">{{
-                            scope.row.error
+                            row.error
                           }}</small>
                         </div>
                         <el-progress
-                          v-else-if="scope.row.percentage > 0"
-                          :percentage="scope.row.percentage"
+                          v-else-if="row.percentage > 0"
+                          :percentage="row.percentage"
                         ></el-progress>
                       </template>
-                    </el-table-column>
-                    <el-table-column prop="size" label="大小" width="100">
-                      <template slot-scope="scope">
-                        {{ formatBytes(scope.row.size) }}
+                    </vxe-column>
+                    <vxe-column field="size" title="大小" width="100" sortable>
+                      <template #default="{row}">
+                        <span>{{ formatBytes(row.size) }}</span>
                       </template>
-                    </el-table-column>
-                    <el-table-column
-                      prop="price"
-                      :label="`售价(${settings.system.credit_name || '魔豆'})`"
-                      width="130"
-                    >
-                      <template slot-scope="scope">
+                    </vxe-column>
+                    <vxe-column field="price" :title="`售价(${settings.system.credit_name || '魔豆'})`" :width="130" sortable>
+                      <template #default="{row}">
                         <el-input-number
-                          v-model="scope.row.price"
+                          v-model="row.price"
                           :min="0"
                           :step="1"
                           :disabled="loading"
                           controls-position="right"
                         ></el-input-number>
                       </template>
-                    </el-table-column>
-                    <el-table-column label="操作" width="100" fixed="right">
-                      <template slot="header">
+                    </vxe-column>
+                    <vxe-column width="100" fixed="right">
+                      <template #header>
                         操作 (<el-button
                           type="text"
                           size="mini"
@@ -134,19 +129,19 @@
                           >清空</el-button
                         >)
                       </template>
-                      <template slot-scope="scope">
+                      <template #default="{rowIndex}">
                         <el-button
                           size="mini"
                           type="text"
                           icon="el-icon-delete"
                           :disabled="loading"
-                          @click="handleRemove(scope.$index)"
+                          @click="handleRemove(rowIndex)"
                         >
                           移除
                         </el-button>
                       </template>
-                    </el-table-column>
-                  </el-table>
+                    </vxe-column>
+                  </vxe-table>
                 </el-form-item>
                 <el-form-item style="margin-bottom: 0">
                   <el-button
@@ -538,6 +533,16 @@ export default {
 </script>
 <style lang="scss">
 .page-upload {
+  .vxe-table{
+    .el-input-number{
+      width: 100%;
+    }
+    .vxe-header--column{
+      .vxe-cell{
+        white-space: normal;
+      }
+    }
+  }
   .el-table {
     .el-input-number {
       width: 120px;
diff --git a/web/plugins/element-ui.js b/web/plugins/element-ui.js
index e05a1a6..2ec174f 100644
--- a/web/plugins/element-ui.js
+++ b/web/plugins/element-ui.js
@@ -4,6 +4,11 @@ import hotkeys from 'hotkeys-js'
 import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
 
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+Vue.use(VXETable)
+
 // import locale from 'element-ui/lib/locale/lang/en'
 // Vue.use(Element, { locale })
 Vue.use(VueViewer, {