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-template-compiler": "^2.6.14",
"vue-upload-component": "^2.8.23", "vue-upload-component": "^2.8.23",
"vuex-persist": "^3.1.3", "vuex-persist": "^3.1.3",
"webpack": "^4.46.0" "vxe-table": "^3.6.13",
"webpack": "^4.46.0",
"xe-utils": "^3.5.12"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.16.3", "@babel/eslint-parser": "^7.16.3",
@ -20123,6 +20125,15 @@
"node": ">=0.10.0" "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": { "node_modules/watchpack": {
"version": "1.7.5", "version": "1.7.5",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz", "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": { "node_modules/xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz", "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": { "watchpack": {
"version": "1.7.5", "version": "1.7.5",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
@ -37391,6 +37413,11 @@
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
"requires": {} "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": { "xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz", "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-template-compiler": "^2.6.14",
"vue-upload-component": "^2.8.23", "vue-upload-component": "^2.8.23",
"vuex-persist": "^3.1.3", "vuex-persist": "^3.1.3",
"webpack": "^4.46.0" "vxe-table": "^3.6.13",
"webpack": "^4.46.0",
"xe-utils": "^3.5.12"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.16.3", "@babel/eslint-parser": "^7.16.3",
@ -55,4 +57,4 @@
"stylelint-config-prettier": "^8.0.2", "stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^21.0.0" "stylelint-config-standard": "^21.0.0"
} }
} }

75
web/pages/upload.vue
Unescape View File

@ -70,62 +70,57 @@
将文件拖到此处，或<em>点击上传</em> 将文件拖到此处，或<em>点击上传</em>
</div> </div>
</el-upload> </el-upload>
<el-table <vxe-table
v-if="fileList.length > 0" v-if="fileList.length > 0"
:data="fileList" :data="fileList"
style="width: 100%" style="width: 100%"
max-height="480" max-height="480"
stripe
border="inner"
:column-config="{resizable: true}"
> >
<el-table-column prop="title" label="#" width="50"> <vxe-column type="seq" width="60"></vxe-column>
<template slot-scope="scope"> <vxe-column field="title" title="文件" min-width="180">
{{ scope.$index + 1 }} <template #default="{row}">
</template> <el-input v-model="row.title" :disabled="loading">
</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">
<template slot="append">{{ <template slot="append">{{
scope.row.ext row.ext
}}</template></el-input }}</template></el-input
> >
<div v-if="scope.row.error"> <div v-if="row.error">
<el-progress <el-progress
:key="scope.row.name" :key="row.name"
:percentage="scope.row.percentage" :percentage="row.percentage"
status="exception" status="exception"
></el-progress> ></el-progress>
<small class="el-link el-link--danger error-tips">{{ <small class="el-link el-link--danger error-tips">{{
scope.row.error row.error
}}</small> }}</small>
</div> </div>
<el-progress <el-progress
v-else-if="scope.row.percentage > 0" v-else-if="row.percentage > 0"
:percentage="scope.row.percentage" :percentage="row.percentage"
></el-progress> ></el-progress>
</template> </template>
</el-table-column> </vxe-column>
<el-table-column prop="size" label="大小" width="100"> <vxe-column field="size" title="大小" width="100" sortable>
<template slot-scope="scope"> <template #default="{row}">
{{ formatBytes(scope.row.size) }} <span>{{ formatBytes(row.size) }}</span>
</template> </template>
</el-table-column> </vxe-column>
<el-table-column <vxe-column field="price" :title="`售价(${settings.system.credit_name || '魔豆'})`" :width="130" sortable>
prop="price" <template #default="{row}">
:label="`售价(${settings.system.credit_name || '魔豆'})`"
width="130"
>
<template slot-scope="scope">
<el-input-number <el-input-number
v-model="scope.row.price" v-model="row.price"
:min="0" :min="0"
:step="1" :step="1"
:disabled="loading" :disabled="loading"
controls-position="right" controls-position="right"
></el-input-number> ></el-input-number>
</template> </template>
</el-table-column> </vxe-column>
<el-table-column label="操作" width="100" fixed="right"> <vxe-column width="100" fixed="right">
<template slot="header"> <template #header>
操作 (<el-button 操作 (<el-button
type="text" type="text"
size="mini" size="mini"
@ -134,19 +129,19 @@
>清空</el-button >清空</el-button
>) >)
</template> </template>
<template slot-scope="scope"> <template #default="{rowIndex}">
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
:disabled="loading" :disabled="loading"
@click="handleRemove(scope.$index)" @click="handleRemove(rowIndex)"
> >
移除 移除
</el-button> </el-button>
</template> </template>
</el-table-column> </vxe-column>
</el-table> </vxe-table>
</el-form-item> </el-form-item>
<el-form-item style="margin-bottom: 0"> <el-form-item style="margin-bottom: 0">
<el-button <el-button
@ -538,6 +533,16 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.page-upload { .page-upload {
.vxe-table{
.el-input-number{
width: 100%;
}
.vxe-header--column{
.vxe-cell{
white-space: normal;
}
}
}
.el-table { .el-table {
.el-input-number { .el-input-number {
width: 120px; 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 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer' 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' // import locale from 'element-ui/lib/locale/lang/en'
// Vue.use(Element, { locale }) // Vue.use(Element, { locale })
Vue.use(VueViewer, { Vue.use(VueViewer, {

Write Preview
Loading…
Cancel
Save