调整

src/components/ZghImportButton/api.js

+import request from 'common/src/utils/request'
+
+export function importTemp(query,url) {
+  return request({
+    'Content-type' : 'multipart/form-data',
+    url: url,
+    method: 'post',
+    data: query||{}
+  })
+}
\ No newline at end of file

src/components/ZghImportButton/dialog.vue

+<template>
+  <DefaultDialog :app='app'>
+    <div v-loading='loading' slot="form" style="display: flex;padding: 20px;padding-bottom: 40px;">
+      <el-upload :accept="'.xls,.xlsx,.csv'" :before-upload="BeforeUnloadEvent" :headers="{
+				  'Content-Type': 'multipart/form-data'
+			}" :on-exceed='exceed' :limit='1' class="upload-demo" ref="upload" :action="action()" :on-preview="handlePreview"
+        :on-remove="handleRemove" :file-list="fileList" :on-success='success' :on-error='error' :auto-upload="false">
+        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
+        <!-- 选择导出的模板-->
+        <div slot="tip" class="el-upload__tip">如没有模板文件请下载模板<span>
+          类型:</span><RelSelect style="width: 68px;margin-left: 10px;" :match="{value:'id',label:'name'}" :optionsData="options"  v-model='downType' ></RelSelect><span  @click="toDownload"  style="margin-left: 10px;color: cornflowerblue;cursor: pointer;" >下载</span>
+
+        </div>
+      </el-upload>
+    </div>
+    <div slot="reFooter" class="refooter">
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="app.showDialog=false">取 消</el-button>
+        <el-button type="primary" @click="submitUpload">导 入</el-button>
+      </span>
+    </div>
+  </DefaultDialog>
+</template>
+<script>
+  /* element 不支持formData格式 该组件在上传前钩子被该写，非原生请求方法请==注意 */
+  // import * as XLSX from 'xlsx';
+
+  import request from 'common/src/utils/request'
+  import {
+    importTemp
+  } from './api.js'
+
+  const baseurl = process.env.VUE_APP_BASE_API
+
+  export default {
+    props: {
+      app: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
+    },
+    async mounted() {
+
+
+    },
+    data() {
+      return {
+        fileList: [],
+        loading: false,
+        downType:'Y',
+        options:[{name:'年',id:'Y'},{name:'月',id:'M'}]
+
+      }
+    },
+    methods: {
+
+      readExcelFile(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const data = new Uint8Array(e.target.result);
+            const workbook = XLSX.read(data, {
+              type: 'array'
+            });
+            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+              header: 1
+            });
+            resolve(jsonData);
+          };
+          reader.onerror = (e) => {
+            reject(e);
+          };
+          reader.readAsArrayBuffer(file);
+        })
+      },
+
+      BeforeUnloadEvent(file) {
+        this.loading = true
+        /* 拦截默认上传事件 */
+        let formData = new FormData();
+        formData.append('file', file)
+        importTemp(formData, this.app.url).then(res => {
+          if (res.success) {
+            this.$success('上传成功')
+            this.app.showDialog = false
+            this.$emit('success')
+          }
+        }).finally(res => {
+          this.loading = false
+        })
+        return false
+      },
+      action() {
+        /* 作废 */
+        let baseUrl = request.defaults.baseURL
+        let url = this.app.url
+        if (url[0] === '/') {
+          url = url.substring(1);
+        }
+        rconsole.log(baseUrl + url)
+        return baseUrl + '/' + url
+      },
+      success() {
+        /* 作废 */
+        // this.$success('上传成功')
+        // this.app.showDialog = false
+        // this.$emit('success')
+      },
+      error() {
+        this.$error('上传失败')
+      },
+      exceed() {
+        this.$warning('只能选择一个文件!')
+      },
+      submitUpload() {
+        if (this.$refs.upload.uploadFiles.length == 0) {
+          this.$warning('请选择一条数据!')
+        } else {
+          this.$refs.upload.submit();
+        }
+      },
+      handleRemove(file, fileList) {
+
+      },
+      handlePreview(file) {
+        rconsole.log(file);
+        this.readExcelFile(file.raw).then((data) => {
+
+          // 在这里处理读取到的Excel数据
+        }).catch((error) => {
+          console.error(error);
+        });
+
+      },
+      toDownload() {
+
+
+        /* let url=this.app.url+"/template/download"
+        this.$cDownload(url, {
+              }) */
+        /* 新版下载 */
+        let url = this.app.url + "/template/download"
+        let userToken = null
+        this.$post('/userToken', {}).then(res => {
+          userToken = res.data.userToken
+          let a = document.createElement('a')
+          a.style.display = 'none';
+          a.target = '_blank'
+          a.href = `${baseurl}/${url}?userToken=${userToken}&type=${this.downType}`
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/ZghImportButton/index.vue

+<template>
+	<div style="display: inline-block;margin-right: 0px;" class="">
+		<el-button @click="dr" size="mini" type="primary">{{name}}</el-button>
+		<Dialog  @success='success' v-if='showDialog' :app='this' />
+	</div>
+
+</template>
+<script>
+	import {
+		importTemp
+	} from './api.js'
+	import Dialog from './dialog.vue'
+	export default {
+		props: {
+			name: {
+				type: String,
+				default: '导入'
+			},
+			url: {
+				type: String,
+				default: ''
+			},
+			params: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+			exportName: {
+				type: String,
+				default: '模板.xlsx'
+			}
+		},
+		components: {
+			Dialog
+		},
+		data() {
+			return {
+				DialogWidth: '35vw',
+				showDialog: false,
+				DialogTitle: '导入'
+			}
+		},
+		methods: {
+			success(){
+				this.$emit('success')
+			},
+			dr() {
+				if(this.url){
+					this.showDialog = true
+				}else{
+					throw Error('no url')
+				}
+				
+
+
+
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/main.js

@@ -60,7 +60,7 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
-
+import ZghImportButton from '@/components/ZghImportButton'
 
 /*  */
 
@@ -86,6 +86,7 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('SbsLazyTree', sbsLazyTree)
+Vue.component('ZghImportButton', ZghImportButton)
 
 
 

src/views/fmegl/fmezbpgl/biao/index.vue

@@ -3,7 +3,7 @@
  * @Author: lisu lisu@gavelinfo.com
  * @Date: 2024-09-19 10:55:27
  * @LastEditors: lisu lisu@gavelinfo.com
- * @LastEditTime: 2024-12-06 14:08:23
+ * @LastEditTime: 2024-12-06 15:01:35
  * @FilePath: /zghywpc-vue/src/views/fmegl/fmezbpgl/biao/index.vue
 -->
 <template>
@@ -14,7 +14,7 @@
     <template #toolbar="ctx">
       <!-- 嵌入默认页面工具栏的插槽 ctx.pagePage来操作默认页面 -->
       <!-- <el-button @click="demo(ctx.basePage)" size='mini'  type="primary">示例按钮</el-button> -->
-      <ImportButton @success="()=>{ctx.basePage.refresh()}" :url="'fme/ufmezbp/import'" />
+      <ZghImportButton @success="()=>{ctx.basePage.refresh()}" :url="'fme/ufmezbp/import'" />
     </template>
 
   </BasePage>