添加上传资料接口

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/request/api.js

@@ -1,27 +1,52 @@
-import axios from 'axios';
-import qs from 'qs';
-// axios.defaults.baseURL = 'http://8.136.230.133:8080';
-axios.defaults.baseURL = '/api'
-axios.defaults.timeout = 5000;
-// axios.defaults.headers.common['token'] = token
-
-// 请求拦截器
-axios.interceptors.request.use((config) => {
-    if(config.method.toLowerCase() === 'post') {
-        config.data = qs.stringify(config.data);
-    }
-    return config;
-}, (err) => {
-    console.log('请求拦截',err);
-    return Promise.reject(err);
-})
-
-// 响应拦截器
-axios.interceptors.response.use((config) => {
-    return config;
-}, (err) => {
-    console.log('响应拦截', err);
-    return Promise.reject(err);
-})
-
-export default axios
+import axios from 'axios';
+import qs from 'qs';
+axios.defaults.baseURL = 'http://192.168.2.122:8080';
+//axios.defaults.baseURL = '/api';
+axios.defaults.timeout = 5000;
+// axios.defaults.headers.common['token'] = token
+axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';//配置请求头
+
+// 请求拦截器
+axios.interceptors.request.use((config) => {
+    let baseData = config.data;
+    if(config.method.toLowerCase() === 'post') {
+        config.data = qs.stringify(config.data);
+    }
+    if(config.url === '/firmsUpload'){ //针对上传文件的接口 data不做转义 否则会造成传值为空
+        config.data = baseData
+        console.log(baseData)
+    }
+    return config;
+}, (err) => {
+    console.log('请求拦截',err);
+    return Promise.reject(err);
+})
+
+// 响应拦截器
+axios.interceptors.response.use((config) => {
+    return config;
+}, (err) => {
+    console.log('响应拦截', err);
+    return Promise.reject(err);
+})
+axios.uploadFile = function (url, data) {
+    console.log(data.getAll('file'));
+    let config = {
+        //请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
+        url: url,
+        //基础url前缀
+
+        //请求头信息
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        transformRequest: [data => data],
+        //跨域请求时是否需要使用凭证
+        withCredentials: true,
+        // 返回数据类型
+        responseType: 'json', //default
+    };
+    return axios.post(url, data, config);
+};
+
+export default axios

src/views/data/UploadInfor.vue

@@ -1,496 +1,499 @@
-<template>
-  <div class="upload_infor">
-    <form>
-      <div class="dataName">
-        <span>资料名称</span><input type="text" class="inputStyle focusStyle" v-model="inforName" @focus="hideTip" @blur="checkName()">
-        <p v-show="tipFlag">资料名称不能重复，请重新输入</p>
-      </div>
-      <div  class="inforDes">
-        <span>资料描述</span><textarea name="inforDes" cols="40" rows="4" class="focusStyle" v-model="inforDes"></textarea>
-      </div>
-      <div class="selectType">
-        <p>选择类型</p>
-        <div>
-          <span>素材时间</span>
-          <select name="materialTime" class="selectStyle" v-model="materialTime" autocomplete="off" @change="materialTimeChange">
-            <option value="" selected>请选择</option>
-            <option  v-for="(time, index) in materialTimeList" :key="index" :value="time">{{time}}</option>
-          </select>
-          <span>经销商范围</span>
-          <select class="selectStyle" v-model="scope" autocomplete="off" @change="scopeChange">
-            <option value="" selected>共通</option>
-            <option value="part">部分</option>
-          </select>          
-        </div>
-      </div>
-      <div v-show="isShow">
-        <p>权限设置</p>
-        <div class="addByArea">
-          <span>按区域添加</span>
-          <div v-for="(item, index) in areaList" :key="index">
-            <input type="checkbox" :value="item.sign" v-model="checkedBoxList"><span>{{item.area}}</span>
-          </div>
-          <button @click.prevent="addByArea">添加</button>
-        </div>
-        <div class="addByCustomize">
-          <span>自定义添加</span>
-          <input id="drl" list="drls" class="inputStyle focusStyle" v-model="addByCustomize"/>
-          <datalist id="drls" value='12'>
-            <option value="BMW"/>
-            <option value="Ford"/>
-            <option value="Volvo"/>
-          </datalist>
-          <button @click.prevent="addBySelf">添加</button>
-        </div>
-        <div class="addByGroup">
-          <span>按小组添加</span>
-          <div class="selectBox">
-            <img src="../../img/select.png" @click="showOption">
-            <div class="optionBox" v-if="optionFlag">
-              <ul>
-                <li v-for="(item, index) in groupList" :key="index">
-                  <p>{{item}}</p>
-                  <img src="../../img/add.png" v-if="addFlag[index]" @click="addGroup(index)">
-                  <img src="../../img/delete.png" v-else @click="deleteGroup(index)">
-                </li>
-              </ul>
-            </div>
-          </div>
-          <button @click.prevent="addByGroup">添加</button>
-        </div>
-      </div>
-    </form>
-    <div class="count">
-      <Count :sum='sum'/>
-    </div>
-    <div class="table">
-      <UpLoadTable
-        :trStyle='trStyle'
-        :tableHeader='tableHeader'
-        :tableData='tableData'
-        :tableHeadStyle='tableHeadStyle'
-        :discolor='discolor'
-        @change_icon='changeIcon'
-        :operationStyle='operationStyle'
-        :imgFlag='imgFlag'
-      />
-    </div>
-    <div class="page">
-      <Tablepage
-        :totalPage='totalPage'
-        :currentPage='currentPage'
-        @change_page='changePage'
-        @jump_page='jumpPage'
-      />
-    </div>
-    <div class="uploadFile">
-      <p>附件</p>
-      <p class="fileDes">{{fileDes}}</p>
-      <label for="fileInput" @change="getFileInfo">导入<input type="file" name="fileName" id="fileInput"></label>
-    </div>
-    <button @click="submit" class="submitBtn">提交</button>
-  </div>
-</template>
-
-<script>
-import UpLoadTable from '../../components/UploadInforTable';
-import Count from '../../components/Count';
-import Tablepage from '../../components/TablePage';
-import { AREASLIST, MATERIALTIMESLIST, TABLEHEADS,TABLEHEADSTYLES, TRSSTYLE, GROUPLISTS, OPERATIONSTYLES } from '../../tableConfig/uploadinfo';
-export default {
-  props:{
-    isManufacturer: {
-      type: String,
-      default: 'distributor'
-    },
-  },
-  components: {
-    UpLoadTable,
-    Count,
-    Tablepage
-  },
-  watch: {
-    scope(val) {
-      if(val === 'part') {
-        this.isShow = true;
-      } else [
-        this.isShow = false
-      ]
-    }
-  },
-  data() {
-    return {
-      tipFlag: false, // 是否展示提示
-      isShow: false, // 共通时不展示权限设置
-      inforName: '',
-      inforDes: '',
-      materialTime: '',
-      scope: '',
-      checkedBoxList: [], // 多选框选中的值
-      addByCustomize: '',
-      addGroupList: [], // 添加的小组
-      addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
-      optionFlag: false, // 是否展示按小组添加的选择栏
-      fileDes: '', // 上传的文件名
-      // 表格配置
-      sum: 240, // 一共有多少条数据
-      pageSize: 20, // 每页展示的数据
-      discolor: false, // 是否隔行变色
-      currentPage: 1,
-      areaList: AREASLIST, // 按区域添加
-      groupList: GROUPLISTS, // 按小组添加
-      materialTimeList: MATERIALTIMESLIST, // 素材时间
-      tableHeader: TABLEHEADS, // 表头
-      tableData: [{name: '北京博瑞',code: 'L020',area: '东区'},{name: 'a',code: 'a',area: 'N'},{name: 'a',code: 'a',area: 'N'}],
-      tableHeadStyle: TABLEHEADSTYLES, // 表头样式
-      operationStyle: OPERATIONSTYLES,// 筛选图片样式
-      imgFlag: new Array(20).fill(true), // 筛选栏用添加图片还是删除图片
-      trStyle: TRSSTYLE // 表格tr样式
-      // 文件
-    }
-  },
-  computed:{
-    // 表格总页数
-    totalPage() {
-      return Math.ceil(this.sum/this.pageSize);
-    }
-  },
-  methods: {
-    // 检查名字是否重复 失去焦点判断
-    checkName: function() {
-      if(this.inforName==1) {
-        this.tipFlag = true;
-      }
-    },
-    // 名字不重复，隐藏提示
-    hideTip: function() {
-      this.tipFlag = false;
-    },
-    // 素材时间变化
-    materialTimeChange: function() {
-      console.log(this.materialTime);
-    },
-    // 进销商范围变化
-    scopeChange: function() {
-      console.log(this.scope)
-    },
-    // 显示隐藏按小组添加下拉框
-    showOption() {
-      this.optionFlag = !this.optionFlag;
-    },
-    // 点击按区域添加button
-    addByArea: function() {
-      console.log(this.checkedBoxList);
-    },
-    // 自定义添加
-    addBySelf: function() {
-      console.log(this.addByCustomize);
-    },
-    // 按小组添加，增加小组
-    addGroup: function(index) {
-      this.addFlag.splice(index, 1, false);
-      console.log( this.addFlag);
-      // 添加数据
-    },
-    // 按小组添加，删除小组
-    deleteGroup: function(index) {
-      this.addFlag.splice(index, 1, true);
-      // 删除数据
-    },
-    // 点击按按小组添加按钮
-    addByGroup: function() {
-      this.addFlag.forEach((item, index) => {
-        if(!item) {
-          this.addGroupList.push(this.groupList[index]);
-        }
-      });
-      console.log(JSON.parse(JSON.stringify(this.addGroupList)));
-      this.optionFlag = false;
-    },
-    // 筛选
-    changeIcon: function(i) {
-      this.imgFlag.splice(i,1,!this.imgFlag[i]);
-      console.log(i)
-    },
-    // 获取某一页面的数据，展示在表格
-    changePage: function(page) {
-      this.currentPage = page;
-      console.log(page);
-    },
-    // 点击上一页，下一页，首页，尾页
-    jumpPage: function(item) {
-      switch(item) {
-        case 1:
-          this.currentPage = 1;
-          break;
-        case 2:
-          this.currentPage = this.currentPage - 1;
-          break;
-        case 3:
-          this.currentPage = this.currentPage + 1;
-          break;
-        case 4:
-          this.currentPage = this.totalPage;
-          break;
-      }
-      console.log(this.currentPage);
-    },
-    // 点击提交，检查名字是否重复，获取数据
-    submit: function() {
-      this.checkName();
-      // if(!this.inforName){
-      //   alert('资料名称不能为空');
-      //   return false
-      // }
-      // if(!this.inforDes){
-      //   alert('资料描述不能为空');
-      //   return false
-      // }
-      // if(!this.inforName){
-      //   alert('资料名称不能为空');
-      //   return false
-      // }
-      if(!this.tipFlag){
-        console.log(this.inforName);
-        console.log(this.inforDes);
-        console.log(this.materialTime);
-        console.log(this.scope);
-        console.log(this.tableData);
-        const file = document.getElementById('fileInput').value;
-        console.log(file);
-        // console.log(document.getElementById('fileInput').files[0].name);
-      }
-    },
-    // 接口请求
-    submitRequest: function() {
-      // this.$http({
-      //   method: 'post',
-      //   url: '/auth/checkSign',
-      //   data: {
-      //     token: token
-      //   }
-      // }).then(() => {
-      //   console.log(res);
-      // }).catch((err) => {
-      //   console.log(err);
-      // })
-      // console.log(this.inforName, this.inforDes, this.materialTime, this.scope, this.addByCustomize, File.size);
-      // console.log(FileList.);
-    },
-    // 获取文件名
-    getFileInfo: function() {
-      this.fileDes = document.getElementById('fileInput').files[0].name
-      console.log(this.fileDes);
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.upload_infor{
-  form{
-    border: 1px solid #ccc;
-    padding: 10px;
-  }
-  .dataName{
-    p{
-      margin-left: 65px;
-      font-size: 10px;
-      color: rgb(206, 84, 84);
-    }
-  }
-  .inforDes{
-    margin: 10px 0 0 0;
-    span{
-      vertical-align: top;
-      margin-right: 17px;
-    }
-    textarea{
-      border: 1px solid #ccc;
-      border-radius: 3px;
-      color: #555555;
-      font-size: 12px;
-    }
-  }
-  .selectType{
-    margin-top: 10px;
-    margin-bottom: 10px;
-    div{
-      margin-left: 65px;
-    } 
-  }
-  .selectStyle{
-    margin-left: 20px;
-    margin-right: 20px;
-    padding: 4px 6px;
-    height: 28px;
-    width: 144px;
-    border: 1px solid #ccc;
-    color: #555555;
-    font-size: 12px;
-  }
-  .addByArea{
-    margin: 10px 0 0 65px;
-    display: flex;
-    height: 28px;
-    align-items: center;
-    span{
-      margin-right: 10px;
-    }
-    div{
-      margin-right: 18px;
-      height: 18px;
-      input{
-        width: 12px;
-        height: 12px;
-        vertical-align: middle;
-        margin-top: -2px;
-        border:1px solid #ccc
-      }
-      span{
-        margin-left: 2px;
-        height: 18px;
-        line-height: 18px;
-      }
-      button{
-        height: 28px;
-      }
-    }
-  }
-  .addByCustomize{
-    margin: 10px 0 0 65px;
-    button{
-      height: 28px;
-    }
-    input{
-      // background: url('../../img/search.svg') no-repeat center left;
-      // background-size: 21px 25px;
-      background-color: #fff;
-    }
-  }
-  .addByGroup{
-    margin: 10px 0 0 65px;
-    display: flex;
-    align-items: center;
-    .selectBox{
-      position: relative;
-      margin-left: 17px;
-      img{
-        width: 144px;
-        height: 28px;
-        &:hover{
-          cursor: pointer;
-        }
-      }
-      .optionBox{
-        position: absolute;
-        top: 28px;
-        left: 0;
-        border: 1px solid #ccc;
-        border-top: none;
-        width: 142px;
-        background-color: #fff;
-        border-radius: 5px;
-        ul{
-            width: 144px;
-            padding-bottom: 6px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-          li{
-            width: 132px;
-            height: 28px;
-            font-size: 12px;
-            color: #555555;
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #ccc;
-            display: flex;
-            justify-content: space-between;
-            padding-right: 5px;
-            img{
-              width: 20px;
-              height: 20px;
-              &:hover{
-                cursor: pointer;
-              }
-            }
-          }
-        }
-      }
-    }
-    button{
-      height: 28px;
-    }
-  }
-  .table{
-    margin-top: 10px;
-  }
-  .count{
-    display: flex;
-    justify-content: flex-end;
-  }
-  .uploadFile{
-    display: flex;
-    margin-top: 35px;
-    height: 30px;
-    align-items: center;
-    p{
-      margin-right: 20px;
-      height: 20px;
-      line-height: 20px;
-    }
-    .fileDes{
-      width: 100px;
-      overflow: hidden;
-      overflow:hidden; /* 超出一行文字自动隐藏 */
-      text-overflow:ellipsis;/* 文字隐藏后添加省略号 */
-      white-space:nowrap; /* 强制不换行 */
-    }
-    label{
-      height: 30px;
-      line-height: 30px;
-      width: 56px;
-      background-color: #0056a0;
-      color: #fff;
-      text-align: center;
-      font-size: 14px;
-      input{
-        display: none;
-      }
-    }
-  }
-  .submitBtn{
-    margin-top: 50px;
-  }
-}
-.inputStyle{
-  margin-left: 17px;
-  width: 130px;
-  height: 18px;
-  line-height: 18px;
-  padding: 4px 6px;
-  border: 1px solid #ccc;
-  color: #555555;
-  font-size: 12px;
-}
-.focusStyle{
-  border: 1px solid #ccc;
-  line-height: 20px;
-  color: #555555;
-  outline: none;
-}
-.focusStyle:focus{
-  animation: shadowAni 200ms linear forwards;
-}
-@keyframes shadowAni{
-  0%{
-    border-color: #cccccc;
-    box-shadow: inset 0px 0px 0 #ccc;
-  };
-  100%{
-    border-color: #75b9F0;
-    box-shadow: 0px 0px 10px #75b9F0;
-  }
-}
-</style>
+<template>
+  <div class="upload_infor">
+    <form>
+      <div class="dataName">
+        <span>资料名称</span><input type="text" class="inputStyle focusStyle" v-model="inforName" @focus="hideTip" @blur="checkName()">
+        <p v-show="tipFlag">资料名称不能重复，请重新输入</p>
+      </div>
+      <div  class="inforDes">
+        <span>资料描述</span><textarea name="inforDes" cols="40" rows="4" class="focusStyle" v-model="inforDes"></textarea>
+      </div>
+      <div class="selectType">
+        <p>选择类型</p>
+        <div>
+          <span>素材时间</span>
+          <select name="materialTime" class="selectStyle" v-model="materialTime" autocomplete="off" @change="materialTimeChange">
+            <option value="" selected>请选择</option>
+            <option  v-for="(time, index) in materialTimeList" :key="index" :value="time">{{time}}</option>
+          </select>
+          <span>经销商范围</span>
+          <select class="selectStyle" v-model="scope" autocomplete="off" @change="scopeChange">
+            <option value="" selected>共通</option>
+            <option value="part">部分</option>
+          </select>
+        </div>
+      </div>
+      <div v-show="isShow">
+        <p>权限设置</p>
+        <div class="addByArea">
+          <span>按区域添加</span>
+          <div v-for="(item, index) in areaList" :key="index">
+            <input type="checkbox" :value="item.sign" v-model="checkedBoxList"><span>{{item.area}}</span>
+          </div>
+          <button @click.prevent="addByArea">添加</button>
+        </div>
+        <div class="addByCustomize">
+          <span>自定义添加</span>
+          <input id="drl" list="drls" class="inputStyle focusStyle" v-model="addByCustomize"/>
+          <datalist id="drls" value='12'>
+            <option value="BMW"/>
+            <option value="Ford"/>
+            <option value="Volvo"/>
+          </datalist>
+          <button @click.prevent="addBySelf">添加</button>
+        </div>
+        <div class="addByGroup">
+          <span>按小组添加</span>
+          <div class="selectBox">
+            <img src="../../img/select.png" @click="showOption">
+            <div class="optionBox" v-if="optionFlag">
+              <ul>
+                <li v-for="(item, index) in groupList" :key="index">
+                  <p>{{item}}</p>
+                  <img src="../../img/add.png" v-if="addFlag[index]" @click="addGroup(index)">
+                  <img src="../../img/delete.png" v-else @click="deleteGroup(index)">
+                </li>
+              </ul>
+            </div>
+          </div>
+          <button @click.prevent="addByGroup">添加</button>
+        </div>
+      </div>
+    </form>
+    <div class="count">
+      <Count :sum='sum'/>
+    </div>
+    <div class="table">
+      <UpLoadTable
+        :trStyle='trStyle'
+        :tableHeader='tableHeader'
+        :tableData='tableData'
+        :tableHeadStyle='tableHeadStyle'
+        :discolor='discolor'
+        @change_icon='changeIcon'
+        :operationStyle='operationStyle'
+        :imgFlag='imgFlag'
+      />
+    </div>
+    <div class="page">
+      <Tablepage
+        :totalPage='totalPage'
+        :currentPage='currentPage'
+        @change_page='changePage'
+        @jump_page='jumpPage'
+      />
+    </div>
+    <div class="uploadFile">
+      <p>附件</p>
+      <p class="fileDes">{{fileDes}}</p>
+      <label for="fileInput" @change="getFileInfo($event)">导入<input type="file" name="fileName" id="fileInput"></label>
+    </div>
+    <button @click="submit" class="submitBtn">提交</button>
+  </div>
+</template>
+
+<script>
+import UpLoadTable from '../../components/UploadInforTable';
+import Count from '../../components/Count';
+import Tablepage from '../../components/TablePage';
+import { AREASLIST, MATERIALTIMESLIST, TABLEHEADS,TABLEHEADSTYLES, TRSSTYLE, GROUPLISTS, OPERATIONSTYLES } from '../../tableConfig/uploadinfo';
+export default {
+  props:{
+    isManufacturer: {
+      type: String,
+      default: 'distributor'
+    },
+  },
+  components: {
+    UpLoadTable,
+    Count,
+    Tablepage
+  },
+  watch: {
+    scope(val) {
+      if(val === 'part') {
+        this.isShow = true;
+      } else [
+        this.isShow = false
+      ]
+    }
+  },
+  data() {
+    return {
+      tipFlag: false, // 是否展示提示
+      isShow: false, // 共通时不展示权限设置
+      inforName: '',
+      inforDes: '',
+      materialTime: '',
+      scope: '0',
+      checkedBoxList: [], // 多选框选中的值
+      addByCustomize: '',
+      addGroupList: [], // 添加的小组
+      addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
+      optionFlag: false, // 是否展示按小组添加的选择栏
+      fileDes: '', // 上传的文件名
+      file:'',//上传的文件
+      // 表格配置
+      sum: 240, // 一共有多少条数据
+      pageSize: 20, // 每页展示的数据
+      discolor: false, // 是否隔行变色
+      currentPage: 1,
+      areaList: AREASLIST, // 按区域添加
+      groupList: GROUPLISTS, // 按小组添加
+      materialTimeList: MATERIALTIMESLIST, // 素材时间
+      tableHeader: TABLEHEADS, // 表头
+      tableData: [{name: '北京博瑞',code: 'L020',area: '东区'},{name: 'a',code: 'a',area: 'N'},{name: 'a',code: 'a',area: 'N'}],
+      tableHeadStyle: TABLEHEADSTYLES, // 表头样式
+      operationStyle: OPERATIONSTYLES,// 筛选图片样式
+      imgFlag: new Array(20).fill(true), // 筛选栏用添加图片还是删除图片
+      trStyle: TRSSTYLE // 表格tr样式
+      // 文件
+    }
+  },
+  computed:{
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum/this.pageSize);
+    }
+  },
+  methods: {
+    // 检查名字是否重复 失去焦点判断
+    checkName: function() {
+      if(this.inforName==1) {
+        this.tipFlag = true;
+      }
+    },
+    // 名字不重复，隐藏提示
+    hideTip: function() {
+      this.tipFlag = false;
+    },
+    // 素材时间变化
+    materialTimeChange: function() {
+      console.log(this.materialTime);
+    },
+    // 进销商范围变化
+    scopeChange: function() {
+      console.log(this.scope)
+    },
+    // 显示隐藏按小组添加下拉框
+    showOption() {
+      this.optionFlag = !this.optionFlag;
+    },
+    // 点击按区域添加button
+    addByArea: function() {
+      console.log(this.checkedBoxList);
+    },
+    // 自定义添加
+    addBySelf: function() {
+      console.log(this.addByCustomize);
+    },
+    // 按小组添加，增加小组
+    addGroup: function(index) {
+      this.addFlag.splice(index, 1, false);
+      console.log( this.addFlag);
+      // 添加数据
+    },
+    // 按小组添加，删除小组
+    deleteGroup: function(index) {
+      this.addFlag.splice(index, 1, true);
+      // 删除数据
+    },
+    // 点击按按小组添加按钮
+    addByGroup: function() {
+      this.addFlag.forEach((item, index) => {
+        if(!item) {
+          this.addGroupList.push(this.groupList[index]);
+        }
+      });
+      console.log(JSON.parse(JSON.stringify(this.addGroupList)));
+      this.optionFlag = false;
+    },
+    // 筛选
+    changeIcon: function(i) {
+      this.imgFlag.splice(i,1,!this.imgFlag[i]);
+      console.log(i)
+    },
+    // 获取某一页面的数据，展示在表格
+    changePage: function(page) {
+      this.currentPage = page;
+      console.log(page);
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function(item) {
+      switch(item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
+    // 点击提交，检查名字是否重复，获取数据
+    submit: function() {
+      this.checkName();
+      // if(!this.inforName){
+      //   alert('资料名称不能为空');
+      //   return false
+      // }
+      // if(!this.inforDes){
+      //   alert('资料描述不能为空');
+      //   return false
+      // }
+      // if(!this.inforName){
+      //   alert('资料名称不能为空');
+      //   return false
+      // }
+      if(!this.tipFlag){
+        console.log(this.inforName);
+        console.log(this.inforDes);
+        console.log(this.materialTime);
+        console.log(this.scope);
+        console.log(this.tableData);
+        const file = document.getElementById('fileInput').value;
+        console.log(file);
+        // console.log(document.getElementById('fileInput').files[0].name);
+      }
+      this.submitRequest();
+    },
+    // 接口请求
+    submitRequest: function() {
+      let paramData = new FormData();
+      paramData.append('file',this.file);
+      paramData.append("dataName", this.inforName);
+      paramData.append('dataDesc',this.inforDes);
+      paramData.append("sourceTime", this.materialTime);
+      paramData.append("dealerScope", this.scope);
+      console.log(paramData.getAll('dataName'));
+      this.$http.uploadFile('/firmsUpload',paramData).then((res) => {
+        console.log(res);
+      }).catch((err) => {
+        console.log(err);
+      })
+      console.log(this.inforName, this.inforDes, this.materialTime, this.scope, this.addByCustomize, File.size);
+    },
+    // 获取文件名
+    getFileInfo: function(event) {
+      this.fileDes = document.getElementById('fileInput').files[0].name;
+      this.file = event.target.files[0];
+      console.log(this.fileDes,this.file);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.upload_infor{
+  form{
+    border: 1px solid #ccc;
+    padding: 10px;
+  }
+  .dataName{
+    p{
+      margin-left: 65px;
+      font-size: 10px;
+      color: rgb(206, 84, 84);
+    }
+  }
+  .inforDes{
+    margin: 10px 0 0 0;
+    span{
+      vertical-align: top;
+      margin-right: 17px;
+    }
+    textarea{
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      color: #555555;
+      font-size: 12px;
+    }
+  }
+  .selectType{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    div{
+      margin-left: 65px;
+    }
+  }
+  .selectStyle{
+    margin-left: 20px;
+    margin-right: 20px;
+    padding: 4px 6px;
+    height: 28px;
+    width: 144px;
+    border: 1px solid #ccc;
+    color: #555555;
+    font-size: 12px;
+  }
+  .addByArea{
+    margin: 10px 0 0 65px;
+    display: flex;
+    height: 28px;
+    align-items: center;
+    span{
+      margin-right: 10px;
+    }
+    div{
+      margin-right: 18px;
+      height: 18px;
+      input{
+        width: 12px;
+        height: 12px;
+        vertical-align: middle;
+        margin-top: -2px;
+        border:1px solid #ccc
+      }
+      span{
+        margin-left: 2px;
+        height: 18px;
+        line-height: 18px;
+      }
+      button{
+        height: 28px;
+      }
+    }
+  }
+  .addByCustomize{
+    margin: 10px 0 0 65px;
+    button{
+      height: 28px;
+    }
+    input{
+      // background: url('../../img/search.svg') no-repeat center left;
+      // background-size: 21px 25px;
+      background-color: #fff;
+    }
+  }
+  .addByGroup{
+    margin: 10px 0 0 65px;
+    display: flex;
+    align-items: center;
+    .selectBox{
+      position: relative;
+      margin-left: 17px;
+      img{
+        width: 144px;
+        height: 28px;
+        &:hover{
+          cursor: pointer;
+        }
+      }
+      .optionBox{
+        position: absolute;
+        top: 28px;
+        left: 0;
+        border: 1px solid #ccc;
+        border-top: none;
+        width: 142px;
+        background-color: #fff;
+        border-radius: 5px;
+        ul{
+            width: 144px;
+            padding-bottom: 6px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          li{
+            width: 132px;
+            height: 28px;
+            font-size: 12px;
+            color: #555555;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #ccc;
+            display: flex;
+            justify-content: space-between;
+            padding-right: 5px;
+            img{
+              width: 20px;
+              height: 20px;
+              &:hover{
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+    }
+    button{
+      height: 28px;
+    }
+  }
+  .table{
+    margin-top: 10px;
+  }
+  .count{
+    display: flex;
+    justify-content: flex-end;
+  }
+  .uploadFile{
+    display: flex;
+    margin-top: 35px;
+    height: 30px;
+    align-items: center;
+    p{
+      margin-right: 20px;
+      height: 20px;
+      line-height: 20px;
+    }
+    .fileDes{
+      width: 100px;
+      overflow: hidden;
+      overflow:hidden; /* 超出一行文字自动隐藏 */
+      text-overflow:ellipsis;/* 文字隐藏后添加省略号 */
+      white-space:nowrap; /* 强制不换行 */
+    }
+    label{
+      height: 30px;
+      line-height: 30px;
+      width: 56px;
+      background-color: #0056a0;
+      color: #fff;
+      text-align: center;
+      font-size: 14px;
+      input{
+        display: none;
+      }
+    }
+  }
+  .submitBtn{
+    margin-top: 50px;
+  }
+}
+.inputStyle{
+  margin-left: 17px;
+  width: 130px;
+  height: 18px;
+  line-height: 18px;
+  padding: 4px 6px;
+  border: 1px solid #ccc;
+  color: #555555;
+  font-size: 12px;
+}
+.focusStyle{
+  border: 1px solid #ccc;
+  line-height: 20px;
+  color: #555555;
+  outline: none;
+}
+.focusStyle:focus{
+  animation: shadowAni 200ms linear forwards;
+}
+@keyframes shadowAni{
+  0%{
+    border-color: #cccccc;
+    box-shadow: inset 0px 0px 0 #ccc;
+  };
+  100%{
+    border-color: #75b9F0;
+    box-shadow: 0px 0px 10px #75b9F0;
+  }
+}
+</style>