mnt-ltd
/
moredoc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

替换上传页面el-table为vxe-table，以优化大批量文档上传

Browse Source
dev
truthhun 9 months ago
parent 2d6049310e
commit 8d1cd32a2d
4 changed files with 77 additions and 38 deletions
Show Stats Download Patch File Download Diff File

29
web/package-lock.json generated
Unescape View File

@ -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",

6
web/package.json
Unescape View File

@ -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"
}
}
}

75
web/pages/upload.vue
Unescape View File

@ -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;

5
web/plugins/element-ui.js
Unescape View File

@ -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, {

Write Preview
Loading…
Cancel
Save