From eaca9cc0cacf52c3ae88e6ae8fe6e3fdb88480cc Mon Sep 17 00:00:00 2001
From: hyingbo <1363390067@qq.com>
Date: 星期五, 30 五月 2025 17:38:17 +0800
Subject: [PATCH] 添加文件上传下载功能
---
src/views/base/FileDownAndImport.vue | 178 +++++++++++++++++++++++++++++
src/views/base/modules/file/FileImportModule.vue | 152 +++++++++++++++++++++++++
2 files changed, 330 insertions(+), 0 deletions(-)
diff --git a/src/views/base/FileDownAndImport.vue b/src/views/base/FileDownAndImport.vue
new file mode 100644
index 0000000..c6ae250
--- /dev/null
+++ b/src/views/base/FileDownAndImport.vue
@@ -0,0 +1,178 @@
+<template>
+ <a-card :bordered="false">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div class="table-page-search-wrapper">
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-row :gutter="24">
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
+ <a-form-item label="鏂囦欢鍚嶇О">
+ <j-input placeholder="璇疯緭鍏ユ枃浠跺悕绉�" v-model="queryParam.fileName"></j-input>
+ </a-form-item>
+ </a-col>
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+ <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">閲嶇疆</a-button>
+ </span>
+ </a-col>
+ </a-row>
+ </a-form>
+ </div>
+ <!-- 鏌ヨ鍖哄煙-END -->
+
+ <!-- 鎿嶄綔鎸夐挳鍖哄煙 -->
+ <div class="table-operator">
+ <a-button @click="handleAdd()" type="primary" icon="import">涓婁紶</a-button>
+
+ <a-table
+ ref="table"
+ size="middle"
+
+ :scroll="{x:true}"
+ bordered
+ rowKey="id"
+ :columns="columns"
+ :dataSource="dataSource"
+ :pagination="ipagination"
+ :loading="loading"
+ :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+ @change="handleTableChange">
+
+ <span slot="action" slot-scope="text, record">
+ <a @click="handleDownload(record)">涓嬭浇</a>
+ <a-divider type="vertical" />
+ <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)">
+ <a>鍒犻櫎</a>
+ </a-popconfirm>
+ </span>
+ </a-table>
+ </div>
+ <file-import-module ref="fileImportModule" @ok="getTreeDataByApi" />
+ </a-card>
+</template>
+
+<script>
+
+import '@/assets/less/TableExpand.less'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { downFile } from '@/api/manage'
+import FileImportModule from '@views/base/modules/file/FileImportModule'
+
+export default {
+ name: 'FileDownAndImport',
+ mixins:[JeecgListMixin, mixinDevice],
+ components: {
+ FileImportModule
+ },
+ data () {
+ return {
+ description: '鏂囦欢鍒楄〃',
+ // 琛ㄥご
+ columns: [
+ {
+ title: '#',
+ dataIndex: '',
+ key:'rowIndex',
+ width:60,
+ align:"center",
+ customRender:function (t,r,index) {
+ return parseInt(index)+1;
+ }
+ },
+ {
+ title:'鏂囦欢鍚嶇О',
+ align:"center",
+ dataIndex: 'fileName'
+ },
+ {
+ title:'鏂囨。鍚庣紑',
+ align:"center",
+ dataIndex: 'fileSuffix'
+ },
+ {
+ title:'涓婁紶浜�',
+ align:"center",
+ dataIndex: 'createBy_dictText'
+ },
+ {
+ title:'涓婁紶鏃堕棿',
+ align:"center",
+ dataIndex: 'createTime'
+ },
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ align:"center",
+ fixed:"right",
+ width:147,
+ scopedSlots: { customRender: 'action' }
+ }
+ ],
+ url: {
+ list: "/nc/doc/list",
+ delete: "/nc/doc/delete",
+ download: "/nc/doc/download",
+ },
+ dictOptions:{},
+ superFieldList:[],
+ }
+ },
+ created() {
+ this.getSuperFieldList();
+ },
+ computed: {
+ importExcelUrl: function(){
+ return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+ },
+ },
+ methods: {
+ initDictConfig(){
+ },
+ handleOk() {
+ this.loadData();
+ },
+ getSuperFieldList(){
+ let fieldList=[];
+ fieldList.push({type:'string',value:'fileName',text:'鏂囦欢鍚嶇О',dictCode:''})
+ this.superFieldList = fieldList
+ },
+ // 涓嬭浇褰撳墠鍙抽敭閫変腑鏂囨。
+ handleDownload(record) {
+ const that = this
+ downFile(this.url.download, { id: record.id })
+ .then(res => {
+ if (!res) {
+ this.$message.warning('鏂囦欢涓嬭浇澶辫触')
+ return
+ } else {
+ let fileName = record.fileName + "." + record.fileSuffix;
+ if (typeof window.navigator.msSaveBlob !== 'undefined') {
+ window.navigator.msSaveBlob(new Blob([res]), fileName);
+ } else {
+ let url = window.URL.createObjectURL(new Blob([res]));
+ let link = document.createElement('a');
+ link.style.display = 'none';
+ link.href = url;
+ link.setAttribute('download', fileName);
+ document.body.appendChild(link);
+ link.click()
+ document.body.removeChild(link) //涓嬭浇瀹屾垚绉婚櫎鍏冪礌
+ window.URL.revokeObjectURL(url) //閲婃斁鎺塨lob瀵硅薄
+ }
+ }
+ })
+ },
+ handleAdd() {
+ this.$refs.fileImportModule.upload();
+ this.$refs.fileImportModule.title="瀵煎叆"
+ },
+ getTreeDataByApi(){
+ this.loadData();
+ }
+ }
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
\ No newline at end of file
diff --git a/src/views/base/modules/file/FileImportModule.vue b/src/views/base/modules/file/FileImportModule.vue
new file mode 100644
index 0000000..a259c4c
--- /dev/null
+++ b/src/views/base/modules/file/FileImportModule.vue
@@ -0,0 +1,152 @@
+<template>
+ <a-modal :title="title" :visible="visible" @cancel="handleModalClose" :maskClosable="false">
+ <a-upload :multiple="true" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" >
+ <a-button type="primary" :disabled="uploading">
+ <a-icon type="import"/>
+ 閫夊彇鏂囦欢
+ </a-button>
+ </a-upload>
+
+ <template slot="footer">
+ <a-button @click="handleModalClose">鍙栨秷</a-button>
+ <a-button
+ id="custom-upload-button"
+ type="primary"
+ :disabled="fileList.length === 0"
+ :loading="uploading"
+ @click="handleUpload"
+ >
+ 纭
+ </a-button>
+ </template>
+
+ </a-modal>
+</template>
+
+<script>
+import JUpload from '@/components/jeecg/JUpload'
+import { getAction, postAction, uploadAction } from '@/api/manage'
+
+export default {
+ name: 'FileImportModule',
+ components: {
+ JUpload,
+ },
+ data() {
+ return {
+ visible: false,
+ title: '',
+ id:'',
+ fileList: [],
+ uploadParams: {},
+ uploading: false,
+ isUploadMultiple: true,
+ currentDeviceDocClassCode: 'SEND',
+ currentTitleAfterClass: '',
+
+ url: {
+ add: "/nc/doc/add",
+ }
+ }
+ },
+
+ created() {
+ },
+ methods: {
+
+ /**
+ * 閫夋嫨濂芥枃浠剁偣鍑荤‘瀹氬悗
+ * @param file 鏂囦欢瀵硅薄
+ */
+ beforeUpload(file) {
+ if (this.isUploadMultiple) {
+ if (!this.fileList.find(item => item.name === file.name)) this.fileList = [...this.fileList, file]
+ } else this.fileList.splice(0, 1, file)
+ return false
+ },
+
+ /**
+ * 鍒犻櫎鏂囦欢鍒楄〃椤规椂瑙﹀彂
+ * @param file 鏂囦欢瀵硅薄
+ */
+ handleRemove(file) {
+ const index = this.fileList.indexOf(file)
+ const newFileList = this.fileList.slice()
+ newFileList.splice(index, 1)
+ this.fileList = newFileList
+ },
+
+ // 鎺у埗鏂囦欢涓婁紶绐楀彛鍏抽棴骞舵竻绌烘枃浠跺垪琛�
+ handleModalClose() {
+ this.visible = false
+ this.fileList = []
+ },
+
+ upload(){
+ this.isUploadMultiple = true
+ this.visible = true
+ },
+ handleUpload() {
+ const { fileList, $notification, handleModalClose} = this
+ this.uploading = true
+ let uploadedFileCount = 0
+ let uploadSuccessFileCount = 0
+ if (this.fileList.length === 0) {
+ this.$message.info("璇蜂笂浼犳枃浠�")
+ this.uploading = false;
+ }
+ fileList.forEach((file, index) => {
+ const formData = new FormData()
+ formData.append('file', file)
+ uploadAction(this.url.add, formData).then(res => {
+ if (res.success) {
+ file.status = 'done'
+ uploadSuccessFileCount++
+ $notification.success({
+ message: '娑堟伅',
+ description: res.message
+ })
+ } else {
+ file.status = 'error'
+ $notification.error({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ })
+ .catch(err => {
+ file.status = 'error'
+ })
+ .finally(() => {
+ uploadedFileCount++
+ fileList.splice(index, 1, file)
+ if (uploadedFileCount === fileList.length) {
+ if (uploadSuccessFileCount > 0) {
+ this.$emit('ok')
+ }
+ // 褰撴枃浠跺叏閮ㄤ笂浼犲畬鎴愬悗
+ if (uploadSuccessFileCount === fileList.length) {
+ handleModalClose();
+ }
+ this.uploading = false
+ }
+ })
+ })
+ }
+ }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .ant-btn-primary#custom-upload-button {
+ color: #fff;
+ background-color: #67C23A;
+ border-color: #67C23A;
+
+ &[disabled] {
+ color: rgba(0, 0, 0, 0.25);
+ background-color: #f5f5f5;
+ border-color: #d9d9d9;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3