Merge branch 'master' of https://gitee.com/dmc_qq/etc-project

src/components/exportTable/exportTable.vue

@@ -3,7 +3,7 @@
     <el-button ref="hwcell" size="small" type="primary" @click="exportExcel"  v-if="isShow">文件导出</el-button>
     <el-table :data="tableData" style="width: 100%" border>
       <el-table-column type="index" label="序号" width="60" />
-      <el-table-column prop="etcCardNumber" label="ETC卡号" width="190" />
+      <el-table-column prop="etcCardNumber" label="ETC卡号" width="145" />
       <el-table-column prop="licensePlateNumber" label="车牌号" width="100" />
       <el-table-column prop="consumptionType" label="消费类型" width="90" />
       <el-table-column prop="entranceTime" label="入口时间" width="110" />

src/utils/utils.ts

@@ -26,6 +26,10 @@ export function mergeOptions(src: any, opts: any) {
     return optsRet;
 }
 
+/**
+ * 返回当前时间
+ * @returns 
+ */
 export function barkTime() {
     const nowdate = new Date();
     const year = nowdate.getFullYear(),
@@ -41,10 +45,40 @@ export function barkTime() {
         ss = checkTime(s);
     return (year + checkTime(month) + checkTime(date) + hs + ms + ss) + ''
 }
+
 function checkTime(i: number) {
     let s = i + ''
     if (i < 10) {
         s = "0" + i;
     }
     return s;
+}
+
+/**
+ * 文件上传处理
+ * @param uploadFile 文件对象
+ * @param fileName 文件名称
+ * @param fileSize 文件大小限制
+ * @returns 
+ */
+export function barkFileName(uploadFile: any, fileName: string, fileSize: number = 0) {
+    const size: number = Number((uploadFile.size / 1024).toFixed(2)); //KB大小
+
+    return new Promise((resolve, reject) => {
+        if (fileName) {
+            if (fileSize !== 0) {
+                if (size > fileSize) {
+                    reject('超出文件大小限制')
+                }
+            }
+            //截取后缀名
+            const suffix = (uploadFile.name + '').split('.')[1]
+            //   修改文件名称
+            uploadFile.name = fileName + barkTime() + '.' + suffix
+            resolve(uploadFile)
+        } else {
+            reject('模块名不能为空')
+        }
+
+    })
 }

src/views/dengmingcong/cardFillDo/cardFillDo.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 卡签补办 -->
-    <CRUD ref="crudRef" :homeData="datas">
+    <crud-template ref="crudRef" :homeData="datas">
         <!-- 自定义搜索 -->
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
@@ -37,11 +37,11 @@
                 <el-button type="primary">提交</el-button>
             </span>
         </template>
-    </CRUD>
+    </crud-template>
 </template>
 <script setup lang="ts">
 // @ts-ignore crudFrom模板
-import CRUD from "@/crud/index.vue"
+import CrudTemplate from "@/crud/index.vue"
 import {
     Data
 } from '@/data/cardAfter/cardFillDo' //表单配置

src/views/shengbo/blacklistQuery/blacklistQuery.vue

@@ -1,12 +1,13 @@
 <template>
-  <div style="font-size: 13px; color: rgb(209, 65, 65); margin-left: 16px">
+  <div class="OBU-query content-warpper">
+    <div style="font-size: 10px; color: rgb(209, 65, 65);margin-left: 15px;">
     注：目前仅支持中国工商银行贵州省分行、中国工商银行股份有限公司贵州省分行、农业银行、部互联网发行、
     世纪恒通、工行微ETC、工总行直连模式三、贵州农信联社、贵州工行微ETC、世纪恒通GH查询下黑原因！
   </div>
   <div class="top">
     <!-- 输入框 -->
     <div class="topstyle">
-      <span style="margin-right: 10px; width: 40px">卡号</span>
+      <span style="width: 40px">卡号</span>
       <el-input v-model="formdata.ardNumber" placeholder="请输入卡号" style="width: 220px">
       </el-input>
     </div>
@@ -40,11 +41,11 @@
     <div class="topstyle">
       <el-button type="success" :icon="Search" @click="search">搜索</el-button>
       <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
-      <el-button type="primary" :icon="Plus" @click="addTo">添加</el-button>
+      <!-- <el-button type="primary" :icon="Plus" @click="addTo">添加</el-button> -->
     </div>
   </div>
   <!-- 弹窗 -->
-  <div>
+  <!-- <div>
     <el-dialog v-model="dialogFormVisible">
       <span class="as-gravity-center" style="font-size: 25px">卡黑名单-操作(下黑反白)</span>
 
@@ -80,18 +81,18 @@
         </span>
       </template>
     </el-dialog>
-  </div>
+  </div> -->
   <div style="padding-top: 12px">
     <el-table :data="tableData" border style="width: 100%">
       <el-table-column type="index" label="序号" width="60" />
-      <el-table-column prop="ardNumber" label="卡号" width="120" />
+      <el-table-column prop="ardNumber" label="卡号" width="110" />
       <el-table-column prop="blacklistType" label="黑名单类型" width="100" />
-      <el-table-column prop="effectiveTimeOfBlacklist" label="黑名单生效时间" width="170" />
+      <el-table-column prop="effectiveTimeOfBlacklist" label="黑名单生效时间" width="160" />
       <el-table-column prop="state" label="状态" width="60" />
       <el-table-column prop="blacklistAntiWhiteTime" label="黑名单反白时间" width="130" />
       <el-table-column prop="xiaheiOperatorNo" label="下黑操作工号" width="110" />
       <el-table-column prop="causeOfBlack" label="下黑原因" width="200" />
-      <el-table-column prop="antiWhiteOperatorNo" label="反白操作工号" width="130" />
+      <el-table-column prop="antiWhiteOperatorNo" label="反白操作工号" width="110" />
       <el-table-column prop="negativeeasons" label="反白原因" width="110" />
       <el-table-column label="操作" width="90">
         <el-button @click="dialogFormVisible1 = true" style="border-style: none">详情</el-button>
@@ -135,6 +136,7 @@
       </template>
     </el-dialog>
   </div>
+  </div>
   <!-- <div style="padding-top: 12px" class="as-gravity-center-end">
     <el-pagination :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="1000" />
   </div> -->
@@ -165,9 +167,9 @@ const addtodata = reactive({
 //搜索
 function search() {
   proxy.$request
-    .post('api/user',{},
+    .post('/blacklistquery/queryBlackList',{},
       {
-        baseURL: 'http://192.168.101.123:8080',
+        baseURL: 'http://10.52.0.172:10389',
       }
     )
     .then((res: {}) => {
@@ -259,7 +261,7 @@ const tableData: User[] = [
   {
     ardNumber: '52011640230217310678',
     blacklistType: '账户透支',
-    effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
+    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
     state: '在黑',
     blacklistAntiWhiteTime: '',
     xiaheiOperatorNo: 'ETCGsyh002',
@@ -270,7 +272,7 @@ const tableData: User[] = [
   {
     ardNumber: '52011640230217310678',
     blacklistType: '账户透支',
-    effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
+    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
     state: '在黑',
     blacklistAntiWhiteTime: '',
     xiaheiOperatorNo: 'ETCGsyh002',
@@ -281,7 +283,7 @@ const tableData: User[] = [
   {
     ardNumber: '52011640230217310678',
     blacklistType: '账户透支',
-    effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
+    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
     state: '在黑',
     blacklistAntiWhiteTime: '',
     xiaheiOperatorNo: 'ETCGsyh002',
@@ -292,7 +294,7 @@ const tableData: User[] = [
   {
     ardNumber: '52011640230217310678',
     blacklistType: '账户透支',
-    effectiveTimeOfBlacklist: '2020-12-19T03:41:04',
+    effectiveTimeOfBlacklist: '2020-12-19 3:41:04',
     state: '在黑',
     blacklistAntiWhiteTime: '',
     xiaheiOperatorNo: 'ETCGsyh002',
@@ -322,12 +324,13 @@ const tableData: User[] = [
     antiWhiteOperatorNo: '',
     negativeeasons: '',
   },
+  
 ]
 </script>
 <style lang="scss" scoped>
 .top {
   display: flex;
-  margin-left: 10px;
+  //margin-left: 10px;
 }
 .topstyle {
   display: flex;

src/views/shengbo/trafficFlow/trafficFlow.vue

@@ -1,76 +1,63 @@
 <template>
-  <div class="top">
-    <!-- 输入框 -->
-    <div class="topstyle">
-      <el-input v-model="formData.etcCardNumber" placeholder="请输入ETC卡号" style="width: 200px">
-      </el-input>
-    </div>
-    <div class="topstyle">
-      <el-input
-        v-model="formData.licensePlateNumber"
-        placeholder="请输入车牌号"
-        style="width: 200px"
-      >
-      </el-input>
-    </div>
-    <!-- 日期框 -->
-    <div class="topstyle">
-      <el-date-picker
-        v-model="formData.startDate"
-        type="datetime"
-        placeholder="开始日期"
-        value-format="YYYY-MM-DD hh:mm:ss"
-      />
-      <!-- <span>-</span> -->
-      <!-- <el-button>至</el-button> -->
-      <el-date-picker
-        v-model="formData.endDate"
-        type="datetime"
-        placeholder="结束日期"
-        value-format="YYYY-MM-DD hh:mm:ss"
-        style="margin-left: 5px"
-      />
-    </div>
-    <!-- 按钮 -->
-    <div class="topstyle">
-      <el-button type="success" :icon="Search" @click="search">搜索</el-button>
-      <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
-      
-      <el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button>
+  <div class="OBU-query content-warpper">
+    <div class="top">
+      <!-- 输入框 -->
+      <div class="topstyle">
+        <el-input v-model="formData.etcCardNumber" placeholder="请输入ETC卡号" style="width: 200px">
+        </el-input>
+      </div>
+      <div class="topstyle">
+        <el-input
+          v-model="formData.licensePlateNumber"
+          placeholder="请输入车牌号"
+          style="width: 200px"
+        >
+        </el-input>
+      </div>
+      <!-- 日期框 -->
+      <div class="topstyle" style="width: 410px">
+        <el-date-picker
+          v-model="formData.startDate"
+          type="datetime"
+          placeholder="开始日期"
+          value-format="YYYY-MM-DD hh:mm:ss"
+        />
+        <!-- <span>-</span> -->
+        <!-- <el-button>至</el-button> -->
+        <el-date-picker
+          v-model="formData.endDate"
+          type="datetime"
+          placeholder="结束日期"
+          value-format="YYYY-MM-DD hh:mm:ss"
+          style="margin-left: 5px"
+        />
+      </div>
+      <!-- 按钮 -->
+      <div class="topstyle">
+        <el-button type="success" :icon="Search" @click="search">搜索</el-button>
+        <el-button type="warning" :icon="Refresh" @click="reset">重置</el-button>
 
-      <el-button type="primary" plain @click="exportAll">导出所有</el-button>
+        <el-button type="primary" plain @click="exportCurrentPage">导出当前页</el-button>
+
+        <el-button type="primary" plain @click="exportAll">导出所有</el-button>
+      </div>
     </div>
-  </div>
 
-  <div style="padding-top: 12px">
-  <exportTable ref="exportTS"></exportTable>
-    <!-- <el-table :data="tableData1" style="width: 100%" border>
-      <el-table-column type="index" label="序号" width="60" />
-      <el-table-column prop="etcCardNumber" label="ETC卡号" width="190" />
-      <el-table-column prop="licensePlateNumber" label="车牌号" width="100" />
-      <el-table-column prop="consumptionType" label="消费类型" width="90" />
-      <el-table-column prop="entranceTime" label="入口时间" width="110" />
-      <el-table-column prop="entryStationName" label="入口站名" width="110" />
-      <el-table-column prop="exportTime" label="出口时间" width="110" />
-      <el-table-column prop="exitStationName" label="出口站名" width="110" />
-      <el-table-column prop="balanceBeforeTransaction" label="交易前余额（元）" width="140" />
-      <el-table-column prop="transactionAmount" label="交易金额（元）" width="125" />
-      <el-table-column prop="postransactionalance" label="交易后余额（元）" width="140" />
-    </el-table> -->
-  </div>
-  <div style="padding-top: 12px" class="as-gravity-center-end">
-    <el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" />
+    <div style="padding-top: 12px">
+      <exportTable ref="exportTS"></exportTable>
+    </div>
+    <div style="padding-top: 12px" class="as-gravity-center-end">
+      <el-pagination :page-sizes="[10, 20, 30, 40]" :total="1000" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, toRaw,getCurrentInstance, onMounted  } from 'vue'
+import { reactive, ref, toRaw, getCurrentInstance, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Calendar, Search, Refresh } from '@element-plus/icons-vue'
 import type { ElTable } from 'element-plus'
-import exportTable from'../../../components/exportTable/exportTable.vue'
-
-
+import exportTable from '../../../components/exportTable/exportTable.vue'
 
 const { proxy }: any = getCurrentInstance()
 const formData = reactive({
@@ -81,7 +68,7 @@ const formData = reactive({
 })
 const exportTS = ref()
 const tableData = reactive({
-  title: "xx公司表格",
+  title: 'xx公司表格',
   serialNumber: '', //序号
   etcCardNumber: '', //ETC卡号
   licensePlateNumber: '', //车牌号
@@ -110,23 +97,22 @@ const tableData = reactive({
 
 //搜索
 function search() {
-  if(formData.etcCardNumber !=''){
+  if (formData.etcCardNumber != '') {
     proxy.$request
-    .post('/uc/trafficrecord/query',{},
-      {
-        baseURL: 'http://localhost:8080',
-      }
-    )
-    .then((res: {}) => {
-      console.log(res)
-    })
-    .catch((err: {}) => {
-      console.log(err)
-    })
-  }else{
-    
+      .post('/uc/trafficrecord/query',{},
+        {
+          baseURL: 'http://10.52.0.172:10389',
+        }
+      )
+      .then((res: {}) => {
+        console.log(res)
+      })
+      .catch((err: {}) => {
+        console.log(err)
+      })
+  } else {
   }
-  
+
   console.log(toRaw(formData))
   console.log('发送搜索请求')
 }
@@ -138,14 +124,14 @@ function reset() {
   formData.endDate = ''
 }
 //导出当前页
-const exportCurrentPage=()=>{
+const exportCurrentPage = () => {
   exportTS.value.exportExcel()
   // childRef.value.exportExcel()
-   console.log('导出当前页的表格数据')
+  console.log('导出当前页的表格数据')
 }
 //导出所有
 function exportAll() {
-  proxy.$refs.exportTable.exportExcel();
+  proxy.$refs.exportTable.exportExcel()
   console.log('导出所有数据')
 }
 

src/views/system/home/Home copy.vue

@@ -1,50 +0,0 @@
-<template>
-  <!-- accept 限制上传文件格式 .text-->
-  <el-upload
-    ref="uploadRef"
-    action="https://jsonplaceholder.typicode.com/posts/"
-    :auto-upload="false"
-    :on-change="handleChange"
-    :file-list="fileList"
-  >
-    <template #trigger>
-      <el-button type="primary">select file</el-button>
-    </template>
-
-    <el-button class="ml-3" type="success" @click="submitUpload"> upload to server </el-button>
-
-    <template #tip>
-      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
-    </template>
-  </el-upload>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { barkTime } from '@/utils/utils'
-import { UploadProps, UploadUserFile } from 'element-plus'
-
-const uploadRef = ref()
-const fileList = ref<UploadUserFile[]>([])
-
-console.log(barkTime()) //时间戳
-
-const submitUpload = () => {
-  uploadRef.value.submit()
-}
-
-const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
-  // console.log(uploadFile, fileList.value.slice(-1));
-
-  fileList.value = fileList.value.slice(-1)
-  // let imgSize = Number(uploadFile.size / 1024).toFixed(2); // / 1024
-  // //截取后缀名
-  // const suffix = (uploadFile.name + '').split('.')[1]
-  // //修改文件名称
-  // uploadFile.name = barkTime() + '.' + suffix
-  // if (uploadFiles) {
-  //   uploadFiles.value.split(uploadFiles.value.length, 1)
-  // }
-
-  console.log(fileList.value)
-}
-</script>

src/views/system/home/Home copy2.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="app-content">
+    <el-row>
+      <el-col :span="7">
+        <el-upload
+          action="/"
+          :on-change="onChange"
+          :auto-upload="false"
+          :show-file-list="false"
+          accept=".xls, .xlsx"
+        >
+          <el-button size="small" type="primary">选择文件</el-button>
+        </el-upload>
+      </el-col>
+      <el-col :span="7">
+        <el-button size="small" type="primary" @click="exportExcel">文件导出</el-button>
+      </el-col>
+    </el-row>
+    <el-table
+      style="margin:20px 0;"
+      :data="outputs"
+      border
+      :header-cell-style="{background:'#f1f1f1',color:'#606266'}"
+    >
+      <el-table-column label="姓名" prop="name"></el-table-column>
+      <!-- <el-table-column label="年龄" prop="age"></el-table-column> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+
+import * as XLSX from "xlsx";
+
+export default {
+  data() {
+    return {
+      outputs: [], // 保存读取出来的数据列表
+      fileData: "" // 保存选择的文件数据
+    };
+  },
+  create() {
+    console.log(XLSX);
+  }, 
+  methods: {
+    
+    //文件选择时
+    onChange(file, fileList) {
+      this.fileData = file; // 保存当前选择文件
+      this.readExcel(); // 调用读取数据的方法
+    },
+
+    //读取文件数据
+    readExcel(e) {
+      let that = this;
+      const files = that.fileData;
+      if (!files) {
+        //如果没有文件
+        return false;
+      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
+        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
+        return false;
+      }
+      const fileReader = new FileReader();
+      fileReader.onload = ev => {
+        try {
+          const data = ev.target.result;
+          const workbook = XLSX.read(data, {
+            type: "binary"
+          });
+          //导入的文件名称
+          console.log(workbook.SheetNames);
+          const wsname = workbook.SheetNames[0]; //取第一张表
+          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
+          that.outputs = []; //清空接收数据
+          for (var i = 0; i < ws.length; i++) {
+            var sheetData = {
+              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
+              //此处的字段名对应 上面表格数据的字段名
+              age: ws[i]["年龄"],
+              name: ws[i]["姓名"]
+            };
+            that.outputs.push(sheetData);
+          }
+        } catch (e) {
+          console.log(e);
+          return false;
+        }
+      };
+      // 如果为原生 input 则应是 files[0]
+      fileReader.readAsBinaryString(files.raw);
+    },
+
+    //导出文件
+    exportExcel() {
+      if (!this.outputs.length) {
+        this.$message.warning("暂无数据导出");
+        return false;
+      }
+      import("@/utils/Export2Excel").then(excel => {
+        //导出表格头部内容（要与下面字段对照）
+        const tHeader = ["姓名", "年龄"];
+        const filterVal = ["name", "age"];
+        const data = this.formatJson(filterVal);
+        //保存excel
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          //导出的文件名
+          filename: "table-list"
+        });
+      });
+    },
+
+    //格式转换
+    formatJson(filterVal) {
+      return this.outputs.map(v =>
+        // obj = {
+        //   name:'',
+        //   age:''
+        // }
+        filterVal.map(j => {
+          // obj[name]
+          // obj[age]
+          console.log(v[j]);
+          return v[j];
+        })
+      );
+      // [[name,age],[name,age],[name,age]]
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/views/system/home/Home.vue

@@ -1,135 +1,45 @@
 <template>
-  <div class="app-content">
-    <el-row>
-      <el-col :span="7">
-        <el-upload
-          action="/"
-          :on-change="onChange"
-          :auto-upload="false"
-          :show-file-list="false"
-          accept=".xls, .xlsx"
-        >
-          <el-button size="small" type="primary">选择文件</el-button>
-        </el-upload>
-      </el-col>
-      <el-col :span="7">
-        <el-button size="small" type="primary" @click="exportExcel">文件导出</el-button>
-      </el-col>
-    </el-row>
-    <el-table
-      style="margin:20px 0;"
-      :data="outputs"
-      :header-cell-style="{background:'#f1f1f1',color:'#606266'}"
-    >
-      <el-table-column label="姓名" prop="name"></el-table-column>
-      <!-- <el-table-column label="年龄" prop="age"></el-table-column> -->
-    </el-table>
-  </div>
+  <!-- accept 限制上传文件格式 .text :auto-upload="false"-->
+  <el-upload ref="uploadRef" action="https://jsonplaceholder.typicode.com/posts/" 
+    :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :show-file-list="false" :file-list="fileList">
+    <template #trigger>
+      <el-button type="primary">select file</el-button>
+    </template>
+    <el-button class="ml-3" type="success"> upload to server </el-button>
+    <template #tip>
+      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+    </template>
+  </el-upload>
 </template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { barkFileName } from '@/utils/utils'
+import { UploadProps, UploadUserFile } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
-<script>
+const uploadRef = ref()
+const imageUrl = ref('')
+const fileList = ref<UploadUserFile[]>([])
 
-import * as XLSX from "xlsx";
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+  response,
+  uploadFile
+) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+}
 
-export default {
-  data() {
-    return {
-      outputs: [], // 保存读取出来的数据列表
-      fileData: "" // 保存选择的文件数据
-    };
-  },
-  create() {
-    console.log(XLSX);
-  }, 
-  methods: {
-    
-    //文件选择时
-    onChange(file, fileList) {
-      this.fileData = file; // 保存当前选择文件
-      this.readExcel(); // 调用读取数据的方法
-    },
-
-    //读取文件数据
-    readExcel(e) {
-      let that = this;
-      const files = that.fileData;
-      if (!files) {
-        //如果没有文件
-        return false;
-      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
-        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
-        return false;
-      }
-      const fileReader = new FileReader();
-      fileReader.onload = ev => {
-        try {
-          const data = ev.target.result;
-          const workbook = XLSX.read(data, {
-            type: "binary"
-          });
-          //导入的文件名称
-          console.log(workbook.SheetNames);
-          const wsname = workbook.SheetNames[0]; //取第一张表
-          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
-          that.outputs = []; //清空接收数据
-          for (var i = 0; i < ws.length; i++) {
-            var sheetData = {
-              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
-              //此处的字段名对应 上面表格数据的字段名
-              age: ws[i]["年龄"],
-              name: ws[i]["姓名"]
-            };
-            that.outputs.push(sheetData);
-          }
-        } catch (e) {
-          console.log(e);
-          return false;
-        }
-      };
-      // 如果为原生 input 则应是 files[0]
-      fileReader.readAsBinaryString(files.raw);
-    },
-
-    //导出文件
-    exportExcel() {
-      if (!this.outputs.length) {
-        this.$message.warning("暂无数据导出");
-        return false;
-      }
-      import("@/utils/Export2Excel").then(excel => {
-        //导出表格头部内容（要与下面字段对照）
-        const tHeader = ["姓名", "年龄"];
-        const filterVal = ["name", "age"];
-        const data = this.formatJson(filterVal);
-        //保存excel
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          //导出的文件名
-          filename: "table-list"
-        });
-      });
-    },
-
-    //格式转换
-    formatJson(filterVal) {
-      return this.outputs.map(v =>
-        // obj = {
-        //   name:'',
-        //   age:''
-        // }
-        filterVal.map(j => {
-          // obj[name]
-          // obj[age]
-          console.log(v[j]);
-          return v[j];
-        })
-      );
-      // [[name,age],[name,age],[name,age]]
-    }
+//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  console.log(rawFile);
+  
+ if (rawFile.type !== 'image/jpeg') {
+    ElMessage.error('头像图片必须为JPG格式!')
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('头像图片大小不能超过2MB!')
+    return false
   }
-};
-</script>
-
-<style>
-</style>
+  return true
+  // uploadRef.value.clearFiles() 默认上传成功后调用
+}
+</script>