上传记录页面接口

src/views/data/UploadInfor.vue

@@ -2,56 +2,97 @@
   <div class="upload_infor">
     <form>
       <div class="dataName">
-        <span>资料名称</span><input type="text" class="inputStyle focusStyle" v-model="inforName" @focus="hideTip" @blur="checkName()">
+        <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 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>
+          <input
+            type="month"
+            :min="localMonth"
+            class="inputStyle"
+            v-model="materialTime"
+            @change="materialTimeChange"
+          />
+          <span style="margin-left: 30px">经销商范围</span>
+          <select
+            class="selectStyle"
+            v-model="scope"
+            autocomplete="off"
+            @change="scopeChange"
+          >
+            <option value="1">共通</option>
+            <option value="0">部分</option>
           </select>
         </div>
       </div>
-      <div v-show="isShow">
+      <div v-show="scope === '0'">
         <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>
+            <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"/>
+          <input
+            id="dlr"
+            list="dlrs"
+            class="inputStyle"
+            v-model="addByCustomize"
+          />
+          <datalist id="dlrs">
+            <option
+              v-for="(dlr, index) in dlrList"
+              :key="index"
+              :value="dlr"
+            ></option>
           </datalist>
           <button @click.prevent="addBySelf">添加</button>
         </div>
         <div class="addByGroup">
           <span>按小组添加</span>
           <div class="selectBox">
-            <img src="../../img/select.png" @click="showOption">
+            <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)">
+                  <p>{{ item }}</p>
+                  <img
+                    src="../../img/add.png"
+                    @click="addGroup(index)"
+                    v-if="addFlag[index]"
+                  />
+                  <img
+                    src="../../img/delete.png"
+                    @click="deleteGroup(index)"
+                    v-else
+                  />
                 </li>
               </ul>
             </div>
@@ -61,137 +102,133 @@
       </div>
     </form>
     <div class="count">
-      <Count :sum='sum'/>
+      <Count :sum="sum" />
     </div>
     <div class="table">
       <UpLoadTable
-        :tableData='tableData'
-        @change_icon='changeIcon'
-        :imgFlag='imgFlag'
+        :tableData="tableData"
+        @change_icon="changeIcon"
+        :imgFlag="imgFlag"
       />
     </div>
     <div class="page">
       <Tablepage
-        :totalPage='totalPage'
-        :currentPage='currentPage'
-        @change_page='changePage'
-        @jump_page='jumpPage'
+        :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>
+      <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, GROUPLISTS } from './uploadinfo';
+import UpLoadTable from "./components/UploadInforTable";
+import Count from "../../components/Count";
+import Tablepage from "../../components/TablePage";
+import { AREASLIST, GROUPLISTS } from "./uploadinfo";
 export default {
-  props:{
+  props: {
     isManufacturer: {
       type: String,
-      default: 'distributor'
+      default: "distributor",
     },
   },
   components: {
     UpLoadTable,
     Count,
-    Tablepage
-  },
-  watch: {
-    scope(val) {
-      if(val === 'part') {
-        this.isShow = true;
-      } else [
-        this.isShow = false
-      ]
-    }
+    Tablepage,
   },
+  watch: {},
   data() {
     return {
       tipFlag: false, // 是否展示提示
-      isShow: false, // 共通时不展示权限设置
-      inforName: '',
-      inforDes: '',
-      materialTime: '',
-      scope: '1', //1为共通 ， 0为部分
+      inforName: "",
+      inforDes: "",
+      materialTime: "",
+      scope: "1", //1为共通 ， 0为部分
       checkedBoxList: [], // 多选框选中的值
-      addByCustomize: '',
+      addByCustomize: "",
+      dlrList: ["北京博瑞1", "北京博瑞2", "北京博瑞3"], // 自定义添加
       addGroupList: [], // 添加的小组
       addFlag: [true, true, true, true, true, true], // 长度等于groupList.length
       optionFlag: false, // 是否展示按小组添加的选择栏
-      fileDes: '', // 上传的文件名
-      file:'',//上传的文件
+      fileDes: "", // 上传的文件名
+      file: "", //上传的文件
       // 表格配置
       sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
       currentPage: 1,
       areaList: AREASLIST, // 按区域添加
       groupList: GROUPLISTS, // 按小组添加
-      materialTimeList: ['2021/03', '2021/04', '2022/05'], // 素材时间
-      tableData: [{name: '北京博瑞',code: 'L020',area: '东区'},{name: 'a',code: 'a',area: 'N'},{name: 'a',code: 'a',area: 'N'}],
+      localMonth: "",
+      tableData: [], // 表格显示的数据
+      AllDlr: [], // 所有进销商数据
+      dealerList: [], // 筛选以后的数据
       imgFlag: new Array(20).fill(true), // 筛选栏用添加图片还是删除图片
       // 文件
-    }
+    };
   },
-  computed:{
+  computed: {
     // 表格总页数
     totalPage() {
-      return Math.ceil(this.sum/this.pageSize);
-    }
+      return Math.ceil(this.sum / this.pageSize);
+    },
   },
   methods: {
     // 检查名字是否重复 失去焦点判断
-    checkName: function() {
-      if(this.inforName==1) {
+    checkName: function () {
+      if (this.inforName == 1) {
         this.tipFlag = true;
       }
     },
     // 名字不重复，隐藏提示
-    hideTip: function() {
+    hideTip: function () {
       this.tipFlag = false;
     },
     // 素材时间变化
-    materialTimeChange: function() {
+    materialTimeChange: function () {
+      // this.materialTime = this.localMonth.replace('-', '/');
       console.log(this.materialTime);
     },
     // 进销商范围变化
-    scopeChange: function() {
-      console.log(this.scope)
+    scopeChange: function () {
+      console.log(this.scope, "1是共通", "0是部分");
     },
     // 显示隐藏按小组添加下拉框
     showOption() {
       this.optionFlag = !this.optionFlag;
     },
     // 点击按区域添加button
-    addByArea: function() {
-      console.log(this.checkedBoxList);
+    addByArea: function () {
+      console.log(JSON.parse(JSON.stringify(this.checkedBoxList)));
     },
     // 自定义添加
-    addBySelf: function() {
+    addBySelf: function () {
       console.log(this.addByCustomize);
     },
     // 按小组添加，增加小组
-    addGroup: function(index) {
+    addGroup: function (index) {
       this.addFlag.splice(index, 1, false);
-      console.log( this.addFlag);
-      // 添加数据
+      console.log(this.addFlag);
     },
     // 按小组添加，删除小组
-    deleteGroup: function(index) {
+    deleteGroup: function (index) {
       this.addFlag.splice(index, 1, true);
-      // 删除数据
     },
-    // 点击按按小组添加按钮
-    addByGroup: function() {
+    // 点击按小组添加  添加按钮
+    addByGroup: function () {
+      this.addGroupList = [];
       this.addFlag.forEach((item, index) => {
-        if(!item) {
+        if (!item) {
           this.addGroupList.push(this.groupList[index]);
         }
       });
@@ -199,18 +236,19 @@ export default {
       this.optionFlag = false;
     },
     // 筛选
-    changeIcon: function(i) {
-      this.imgFlag.splice(i,1,!this.imgFlag[i]);
-      console.log(i)
+    changeIcon: function (i) {
+      this.imgFlag.splice(i, 1, !this.imgFlag[i]);
+      // 筛选后的数据
     },
     // 获取某一页面的数据，展示在表格
-    changePage: function(page) {
+    changePage: function (page) {
       this.currentPage = page;
       console.log(page);
+      this.getDlrData(this.currentPage);
     },
     // 点击上一页，下一页，首页，尾页
-    jumpPage: function(item) {
-      switch(item) {
+    jumpPage: function (item) {
+      switch (item) {
         case 1:
           this.currentPage = 1;
           break;
@@ -225,9 +263,10 @@ export default {
           break;
       }
       console.log(this.currentPage);
+      this.getDlrData(this.currentPage);
     },
     // 点击提交，检查名字是否重复，获取数据
-    submit: function() {
+    submit: function () {
       this.checkName();
       // if(!this.inforName){
       //   alert('资料名称不能为空');
@@ -241,78 +280,136 @@ export default {
       //   alert('资料名称不能为空');
       //   return false
       // }
-      if(!this.tipFlag){
+      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;
+        const file = document.getElementById("fileInput").value;
         console.log(file);
         // console.log(document.getElementById('fileInput').files[0].name);
       }
       this.submitRequest();
     },
-    // 接口请求
-    submitRequest: function() {
+    // 提交接口
+    submitRequest: function () {
       let paramData = new FormData();
-      paramData.append('file',this.file);
+      paramData.append("file", this.file);
       paramData.append("dataName", this.inforName);
-      paramData.append('dataDesc',this.inforDes);
+      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(paramData.getAll("dataName"));
+      this.$http
+        .uploadFile("/firmsUpload", paramData)
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 获取所有经销商信息接口
+    getAllDlr: function () {
+      this.$http({
+        methods: "post",
+        url: "/sys/agent/selectAgentInfoList",
+        data: {},
       })
-      console.log(this.inforName, this.inforDes, this.materialTime, this.scope, this.addByCustomize, File.size);
+        .then((res) => {
+          console.log(res);
+          this.dlrList = res.data;
+          // this.tableData = this.tableData // 获取tableData的值
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 分页获取所有进销商信息接口
+    getDlrData: function (page) {
+      this.$http({
+        methods: "post",
+        url: "/sys/agent/selectAgentInfoPage",
+        data: {
+          page: page
+        },
+      })
+        .then((res) => {
+          console.log(res);
+          this.tableData = [
+            { name: "北京博瑞", code: "L020", area: "东区" },
+            { name: "a", code: "a", area: "N" },
+            { name: "a", code: "a", area: "N" },
+          ];
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
     // 获取文件名
-    getFileInfo: function(event) {
-      this.fileDes = document.getElementById('fileInput').files[0].name;
+    getFileInfo: function (event) {
+      this.fileDes = document.getElementById("fileInput").files[0].name;
       this.file = event.target.files[0];
-      console.log(this.fileDes,this.file);
-    }
-  }
-}
+      console.log(this.fileDes, this.file);
+    },
+    // 获取当前的月份
+    getLocalMonth: function () {
+      let data = new Date();
+      let year = data.getFullYear();
+      let month = data.getMonth() + 1;
+      if (month < 10) {
+        month = "0" + month;
+      } else {
+        month = month + "";
+      }
+      this.localMonth = year + "-" + month;
+    },
+  },
+  mounted() {
+    this.getLocalMonth();
+  },
+  created() {
+    this.getAllDlr(); // 放到点开进销商范围
+    this.getDlrData(1);
+  },
+};
 </script>
 
 <style scoped lang="less">
-.upload_infor{
-  form{
+.upload_infor {
+  form {
     border: 1px solid #ccc;
     padding: 10px;
   }
-  .dataName{
-    p{
+  .dataName {
+    p {
       margin-left: 65px;
       font-size: 10px;
       color: rgb(206, 84, 84);
     }
   }
-  .inforDes{
+  .inforDes {
     margin: 10px 0 0 0;
-    span{
+    span {
       vertical-align: top;
       margin-right: 17px;
     }
-    textarea{
+    textarea {
       border: 1px solid #ccc;
       border-radius: 3px;
       color: #555555;
       font-size: 12px;
     }
   }
-  .selectType{
+  .selectType {
     margin-top: 10px;
     margin-bottom: 10px;
-    div{
+    div {
       margin-left: 65px;
     }
   }
-  .selectStyle{
+  .selectStyle {
     margin-left: 20px;
     margin-right: 20px;
     padding: 4px 6px;
@@ -322,60 +419,60 @@ export default {
     color: #555555;
     font-size: 12px;
   }
-  .addByArea{
+  .addByArea {
     margin: 10px 0 0 65px;
     display: flex;
     height: 28px;
     align-items: center;
-    span{
+    span {
       margin-right: 10px;
     }
-    div{
+    div {
       margin-right: 18px;
       height: 18px;
-      input{
+      input {
         width: 12px;
         height: 12px;
         vertical-align: middle;
         margin-top: -2px;
-        border:1px solid #ccc
+        border: 1px solid #ccc;
       }
-      span{
+      span {
         margin-left: 2px;
         height: 18px;
         line-height: 18px;
       }
-      button{
-        height: 28px;
-      }
+    }
+    button {
+      height: 28px;
     }
   }
-  .addByCustomize{
+  .addByCustomize {
     margin: 10px 0 0 65px;
-    button{
+    button {
       height: 28px;
     }
-    input{
+    input {
       // background: url('../../img/search.svg') no-repeat center left;
       // background-size: 21px 25px;
       background-color: #fff;
     }
   }
-  .addByGroup{
+  .addByGroup {
     margin: 10px 0 0 65px;
     display: flex;
     align-items: center;
-    .selectBox{
+    .selectBox {
       position: relative;
       margin-left: 17px;
-      img{
+      img {
         width: 144px;
         height: 28px;
-        &:hover{
+        &:hover {
           cursor: pointer;
         }
       }
-      .optionBox{
+      .optionBox {
         position: absolute;
         top: 28px;
         left: 0;
@@ -384,13 +481,13 @@ export default {
         width: 142px;
         background-color: #fff;
         border-radius: 5px;
-        ul{
-            width: 144px;
-            padding-bottom: 6px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-          li{
+        ul {
+          width: 144px;
+          padding-bottom: 6px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          li {
             width: 132px;
             height: 28px;
             font-size: 12px;
@@ -401,10 +498,10 @@ export default {
             display: flex;
             justify-content: space-between;
             padding-right: 5px;
-            img{
+            img {
               width: 20px;
               height: 20px;
-              &:hover{
+              &:hover {
                 cursor: pointer;
               }
             }
@@ -412,35 +509,35 @@ export default {
         }
       }
     }
-    button{
+    button {
       height: 28px;
     }
   }
-  .table{
+  .table {
     margin-top: 10px;
   }
-  .count{
+  .count {
     display: flex;
     justify-content: flex-end;
   }
-  .uploadFile{
+  .uploadFile {
     display: flex;
     margin-top: 35px;
     height: 30px;
     align-items: center;
-    p{
+    p {
       margin-right: 20px;
       height: 20px;
       line-height: 20px;
     }
-    .fileDes{
+    .fileDes {
       width: 100px;
       overflow: hidden;
-      overflow:hidden; /* 超出一行文字自动隐藏 */
-      text-overflow:ellipsis;/* 文字隐藏后添加省略号 */
-      white-space:nowrap; /* 强制不换行 */
+      overflow: hidden; /* 超出一行文字自动隐藏 */
+      text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
+      white-space: nowrap; /* 强制不换行 */
     }
-    label{
+    label {
       height: 30px;
       line-height: 30px;
       width: 56px;
@@ -448,16 +545,16 @@ export default {
       color: #fff;
       text-align: center;
       font-size: 14px;
-      input{
+      input {
         display: none;
       }
     }
   }
-  .submitBtn{
+  .submitBtn {
     margin-top: 50px;
   }
 }
-.inputStyle{
+.inputStyle {
   margin-left: 17px;
   width: 130px;
   height: 18px;
@@ -467,23 +564,23 @@ export default {
   color: #555555;
   font-size: 12px;
 }
-.focusStyle{
+.focusStyle {
   border: 1px solid #ccc;
   line-height: 20px;
   color: #555555;
   outline: none;
 }
-.focusStyle:focus{
+.focusStyle:focus {
   animation: shadowAni 200ms linear forwards;
 }
-@keyframes shadowAni{
-  0%{
+@keyframes shadowAni {
+  0% {
     border-color: #cccccc;
     box-shadow: inset 0px 0px 0 #ccc;
-  };
-  100%{
-    border-color: #75b9F0;
-    box-shadow: 0px 0px 10px #75b9F0;
+  }
+  100% {
+    border-color: #75b9f0;
+    box-shadow: 0px 0px 10px #75b9f0;
   }
 }
 </style>