Lexus-media/src/views/data/UploadInfor.vue

<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>