vue组件系列3、查询下载

2019独角兽企业重金招聘Python工程师标准>>>

直接源码，虽然样式样式不好看，逻辑也不是最优，但是可以留作纪念。毕竟以后类似的功能只需要优化就可以了，不用每次都重头开始。。。

 <template>
  <div class="pre_upload">
    <div class="pre_leve_one">
      <input
        type="text"
        v-model="keyword"
        @keyup.enter="loaddata"
        placeholder="请输入查询关键字"
      />
      <button @click="loaddata">查询</button>&nbsp;&nbsp;{{sel_msg}}
    </div>
    <div class="pre_leve_two">
      <h4>这里展示搜索结果</h4>
      <div
        di="files_data"
        class="pre_files_data"
        v-show="show_tab"
      >
        <table class="pre_dataintable">
          <thead>
            <tr>
              <th>序号</th>
              <th>上传</th>
              <th>名称</th>
              <th>类型</th>
              <th>大小</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item,index) in pre_flies"
              :key="index"
            >
              <td>{{item.id}}</td>
              <td>{{item.username}}</td>
              <td class="pre_tab_name">{{item.name}}</td>
              <td>{{item.type}}</td>
              <td>{{item.size}}&nbsp;KB</td>
              <td>{{item.date}}</td>
              <td>
                &nbsp;&nbsp;
                <button
                  class="pre_btn_down"
                  @click="down_file(item)"
                >下载</button>&nbsp;&nbsp;
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div
        class="pre_block"
        v-show="show_tab"
      >
        <ul style="text-align: right; margin-right: 20px;">
          <li>
            当前页：<label>{{nowpage}}</label>&nbsp;
            合计页：<label>{{maxpage}}</label>&nbsp;&nbsp;
            <a
              href="#"
              @click="firstpage"
            >首页</a>|
            <a
              href="#"
              @click="beforepage"
            >上一页</a>|
            <a
              href="#"
              @click="nextpage"
            >下一页</a>|
            <a
              href="#"
              @click="lastpage"
            >尾页</a>
            <input
              type="text"
              v-model="jumppage"
              value=""
            ><a
              href="#"
              @click="gopage"
              class="go"
            >Go</a>
          </li>
        </ul>
      </div>
    </div>

    <a id="downlink"></a>
    <!-- 放置自定义组件 -->
    <per-message :message_data="msg_obj" />
  </div>
</template> 

<script>
/*
名称：根据关键字查询 下载 预览 组件
日期：2019-03-19
作者：hj
目标：
1、根据关键字查询
2、由服务端生成相关文件，保存到指定路径，然后返回路径，
3、最后a标签绑定绑定返回的路径进行下载
*/
import { base_encode } from "@/utils/base64.js";
import { GetShort,BackSpecial } from "@/utils/localstore.js";

export default {
  name: "pre_downfile",
  components: {    
    'per-message':()=>import("./pre_message.vue"),
  },
  data() {
    return {
      pre_flies: [],
      exist_data: [],
      show_tab: false,     
      sel_msg:'',
      pre_loading:false,
      keyword:'',    
      outFile: "",
      maxpage:'',
      nowpage:'',
      jumppage:'',
      msg_obj:{}
    };
  },  
  created:function(){
      this.nowpage=1;
  },
  methods: {
    firstpage:function(){
        if(Number(this.nowpage)>1){
            this.nowpage=1;
            this.loaddata();
        }else{
            this.msg_obj={'showtype':'warning','note':'已经是第一页'};
        }
    },
    beforepage:function(){
        if(Number(this.nowpage)>1){
            this.nowpage--;
            this.loaddata();
        }else{
            this.msg_obj={'showtype':'warning','note':'已经是第一页'};
        }
    },
    nextpage:function(){
        if(Number(this.nowpage)<Number(this.maxpage)){
            this.nowpage++;
            this.loaddata();
        }else{            
            this.msg_obj={'showtype':'warning','note':'已经是最后一页'};
        }
    },
    lastpage:function(){
        if(Number(this.nowpage)<Number(this.maxpage)){
            this.nowpage=this.maxpage;
            this.loaddata();
        }else{
            this.msg_obj={'showtype':'warning','note':'已经是最后一页'};
        }
    },
    gopage:function(){
        console.log('跳转到='+this.jumppage);
        if(Number(this.jumppage)>0 && Number(this.jumppage)<=Number(this.maxpage)){
            this.nowpage=this.jumppage;
            this.loaddata();
        }else{
            this.msg_obj={'showtype':'warning','note':'跳转页数不在规定范围内,请检查'+this.jumppage};
        }
    },
    loaddata:function(){
      console.log('查询='+this.keyword);
      var postdata='';
      postdata =
          '{"action":"data_downfile_art","user_no":"' +
          GetShort("userno") +
          '","upfile_name":"' +
          this.keyword +
          '","page_num":"'+this.nowpage+'","rowid":"0"}';
      postdata =
          '{"method":"File_down","data":"' + base_encode(postdata) + '"}';
      // 建议加载提示
      this.loading();
      this.pre_loading=false;
      
      this.$postfile(
        "/Data_Back",
        postdata,
        () => {}
      ).then(res => {
        this.pre_loading=true;
        try {         
          res=JSON.parse(res); 
          console.log(res.data);         
          if (res.data.status == 1) {
            this.maxpage=res.data.allpage;
            res = res.data.data;              
            console.log(res);  
            var t=[];
            for(var i=0;i<res.length;i++){
              var td={};
              td.id=i+1;
              td.rowid=res[i].id;
              td.username=res[i].username;
              td.name=res[i].upfile_name;
              td.type=res[i].upfile_type;
              td.size=res[i].upfile_size;
              td.date=String(res[i].sys_date).substring(0,19);              
              t[i]=td;        
            }
            this.pre_flies=t;
            this.show_tab=true;
          } else {
            this.sel_msg = res.msg;
          }
        } catch (ex) {
          this.sel_msg = "查询失败"+ex;
        }
      });
    },
    down_file:function(parm){
      var postdata='';
      postdata =
          '{"action":"data_downfile_data","user_no":"' +
          GetShort("userno") +
          '","upfile_name":"' +
          parm.name +
          '","rowid":"'+parm.rowid+'"}';
      postdata =
          '{"method":"File_down","data":"' + base_encode(postdata) + '"}';
      // 建议加载提示
      this.loading();
      this.pre_loading=false;
      
      this.$postfile(
        "/Data_Back",
        postdata,
        () => {}
      ).then(res => {
        this.pre_loading=true;
        try {         
          res=JSON.parse(res); 
          if (res.data[0].path!='') {
            this.downdata(BackSpecial(res.data[0].path),parm.name);
          } else {
            this.sel_msg = res.msg;
          }
        } catch (ex) {
          this.sel_msg = "查询失败"+ex;
        }
      });

    },
    downdata:function(down_name,excel_name){
        if(down_name!=""){
            this.outFile = document.getElementById("downlink");
            var href=window.location.origin+"/static/"+down_name;
            // console.log(href);
            this.outFile.download = excel_name; // 下载名称
            this.outFile.href = href; // 绑定a标签
            this.outFile.click(); // 模拟点击实现下载                    
        }
    },
    loading:function(){
      var time=0;
      var close=setInterval(function(){
        if(time%2==0){
          this.sel_msg='请等待,查询中......';
        }else{
          this.sel_msg='请稍等,查询中...';
        }
        if(this.pre_loading){
          clearInterval(close);
        }
      },500);
    }

  }
};
</script>


<style scoped>
.pre_upload {
  width: 100%;
  min-height: 200px;
  height: 100%;
  background-color: azure;
  text-align: center;
  /* padding: 10px 20px 10px 20px; */
}
.pre_leve_one {
  height: 25px;
  text-align: left;
  padding-top: 18px;
  padding-left: 15px;
}
.pre_leve_one > button {
  margin-left: 10px;
  border-radius: 2px;
  background-color: #fff;
  color: #000000;
  padding: 2px 10px 2px 10px;
}

.pre_leve_two {
  /* padding: 5px; */
  margin: 15px;
  margin-top: 15px;
  border: 1px solid #191970;
  min-height: 200px;
  height: auto;
}

.pre_files_data {
  width: 100%;
  min-height: 200px;
  height: auto;
  /* padding: 10px 20px 10px 20px; */
}

.pre_files_data > ul {
  list-style: none;
}
.pre_files_data > ul > li {
  border: 1px solid black;
}
.pre_files_data > ul > li > span {
  margin-left: 5px;
}

.pre_dataintable {
  margin-top: 15px;
  border-collapse: collapse;
  border: 1px solid #aaa;
  width: 95%;
  /* padding 没有作用 */
  /* padding: 0px 5px 10px 5px; */
  position: relative;
  left: 2%;
}
.pre_dataintable th {
  vertical-align: baseline;
  padding: 5px 15px 5px 6px;
  background-color: #c1ffc1;
  border: 1px solid #3f3f3f;
  text-align: left;
  color: #000000;
  font-size: 16px;
  font-weight: bolder;
}
.pre_dataintable td {
  /* vertical-align: text-top; */
  padding: 6px 15px 6px 6px;
  border: 1px solid #aaa;
}
.pre_dataintable tr:nth-child(odd) {
  background-color: #f5f5f5;
}
.pre_dataintable tr:nth-child(even) {
  background-color: #fff;
}

.pre_tab_name {
  cursor: pointer;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* display: -webkit-box;
  -webkit-line-clamp: 0;
  -webkit-box-orient: vertical; */
}
.pre_tab_name:hover {
  cursor: pointer;
  background-color: #aaa;
}

/* 下载按钮 */
.pre_btn_down {
  color: chartreuse;
  font-weight: bold;
  font-size: 16px;
  width: 100px;
  height: 30px;
}
/* 预览按钮 */
.pre_btn_canle {
  color: black;
  font-weight: bold;
  font-size: 16px;
  width: 100px;
  height: 30px;
}
/* 翻页样式 */
.pre_block {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.pre_block > ul {
  text-align: right;
  list-style: none;
}
.pre_block > ul > li > a {
  text-decoration: none;
}
.pre_block > ul > li > .go {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: 1px solid #cccccc;
  background: #024aee;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  margin-left: 5px;
}
.pre_block > ul > li > a:hover {
  color: #394656;
}
</style>

 

转载于:https://my.oschina.net/qingqingdego/blog/3024863