index.vue

<style lang="less" >
    #searchOrderList{
        height:100%;
        background:#eef4fe;
        display:flex;
        flex-direction: column;
        /deep/ .weui-cell_access .weui-cell__ft:after{
            height: 10px;
            width: 10px;
            margin-top: -4px;
            right: 0;
        }
        .Table{
            flex-grow: 1;
            height:1px;
            overflow: auto;
            // -webkit-overflow-scrolling: touch;
        }
        .modal>.content,.modal_active>.content{
            .item{
                width: 240px;
                height: 180px;
                background:#eef4fe;
                border-radius:10px;
                display: flex;
                flex-direction: column;
                .content{
                    height:1px;
                    flex-grow: 1;
                    div{
                        height:40px;
                        line-height: 40px;
                        text-align: center;
                        color:#5cadff;
                    }
                }
            }
        }
    }
</style>

<template>
  <div id="searchOrderList">
    <div class="header">
        <searchComponent placeholder="请输入订单号／客户..." :search="search" :status="status" :typeList="typeList"/>
    </div>
    <div class="Table">
        <customerTable :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>  
    </div>
    <!-- <customerModal :showModal="showModal">
        <div class="item">
            <div class="content">
                <div style="color:#000;font-weight:bold;">选择查看内容</div>
                <div @click="routerToDetail">订单明细</div>
                <div @click="routerToTarck">全流程跟踪</div>
            </div>
            <div class="btns">
                <x-button type="primary" style="background:#6b9bf7;" @click.native="closeModal">取消</x-button>
            </div>
        </div>
    </customerModal> -->
  </div>
</template>

<script>
import Util from '@/libs/util.js'
import searchComponent from '@/components/search'
import customerTable from '@/components/Table'
import customerModal from '@/components/Modal'

import { XButton } from 'vux'

export default {
  name: 'searchOrderList',
  data () {
    return {
        search:{
            dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
            dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
            page:1,
            per_page:30,
            sStatus:'全部'
        },
        list:[],
        columns:[
            {
                width:'30%',
                name:'单号',
                align:'center',
                field:'sOrderNoHTML',
                underline:true,
                color:'#2d8cf0',
                fixed:true,
                fixedLeftWidth:'0px'
            },
            {
                width:'40%',
                name:'客户',
                align:'center',
                field:'sCustomerName',
            },
            {
                width:'20%',
                name:'数量',
                align:'center',
                field:'nQty',
            },
            {
                width:'20%',
                name:'销售员',
                align:'center',
                field:'sSalesName'
            },
            {
                width:'20%',
                name:'状态',
                align:'center',
                field:'sStatus'
            }
        ],
        tableStyle:{
            theadBgColor:'rgba(223,238,253,1)',
            complexTrBgColor:'white',
            singleTrBgColor:'#eef4fe',
            theadTdBorder:false,
            tbodyTdBorder:false,
            tbodyHeight:'calc(100vh - 120px)',
            tbodyTrBorderBottom:'1px solid #dbe9f8',
            width:'100%'
        },
        host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
        // host:'http://192.168.4.40:5001',
        status:[],
        showModal:false,
        row:{},
        typeList:{
            input:true,
            select:true,
            btns:true,
            time:true
        },
        
        upbCustomerGUID:'',//客户ID
    }
  },
  async mounted(){
    window.d = this;

    this.upbCustomerGUID=this.$route.query.upbCustomerGUID||""
    await this.getStatus();
    await this.getHdr();
    this.$store.dispatch('saveUserId',this.$route.params.userId);
  },
  async activated(){
    this.showModal = false;
    this.global.$off('searchData');
    this.global.$off('scrollTable');
    this.global.$off('clickTd');

    //查询条件触发加载
    this.global.$on('searchData',async ()=>{
        this.cleanSearch();
        this.getHdr();
    });
    //滚动加载
    this.global.$on('scrollTable',async ()=>{
        this.getHdr(true);
    })
    //点击表格列触发
    this.global.$on('clickTd',async(res)=>{
        // this.showModal = res.showModal;
        this.row = this.list[res.trIndex];
        this.routerToTarck();
    })
  },
  methods:{
    async getStatus(){
        let res = await this.apiGet(`${this.host}${this.$route.params.userId}/fabricorder/status/`,{},true);
        this.status = res;
        this.status.map(x=>{
            x.sStatus = x.sStatus || '全部';
        })
    },
    async getHdr(flag){
        if(this.search.per_page < 30){
            this.$vux.toast.text('已加载全部数据!', 'middle')
            return false;
        }
        let data = Util.deepClone(this.search);
        if(this.search.sStatus == '全部'){
            let status = [];
            this.status.map(x=>{
                if(x.sStatus != '全部') status.push(x.sStatus);
            })
            data.sStatus = status.join(',');
        }
        data.searchvalue == '' && (delete data.searchvalue);
        this.upbCustomerGUID&&(data.upbCustomerGUID=this.upbCustomerGUID)
        data.begin_date = data.dBeginDate;
        data.end_date = data.dEndDate;
        delete data.dBeginDate;
        delete data.dEndDate;

        let res = await this.apiGet(`${this.host}${this.$route.params.userId}/fabricorder/hdr/`,data,'加载中')
        // let res = await this.apiGet(`http://weixin.huansi.net/apiproxy/huansi/hszh_HSFabricTradeTest/fabricorder/hdr/`,data,'加载中')
        
        if(res.table.length > 0){
            res.table.map(x=>{
                x.dReceivedDate = x.dReceivedDate.split(' ')[0]
                x.sOrderNoHTML = `<div><span style="text-decoration:underline;">${x.sOrderNo}</span></div>`
            });
            
            if(flag){
                this.list = this.list.concat(res.table);
            }else{
                this.list = res.table;
            }
            this.search.page++;
            this.search.per_page = res.table.length;
        }
    },
    closeModal(){
        this.showModal = false;
    },
    cleanSearch(){
        this.search.page = 1;
        this.search.per_page = 30;
        this.list = [];
    },
    routerToDetail(){
        this.$store.dispatch('searchOrderSaveHdr',this.row);
        this.$router.push({name:'searchOrderDetail'})
    },
    routerToTarck(){
        this.$store.dispatch('searchOrderSaveHdr',this.row);
        this.$router.push({name:'searchOrderTrack'})
    }
  },
  components:{
      searchComponent,
      XButton,
      customerTable,
      customerModal
  },
}
</script>