<template>
	<div class="container resource close-left-menu contaNEW">
      <div class="pop-banner clearfix">
        <div class="operate-btns">
        	<a class="fbtn fb-download" @click='download'>导出</a>
    	</div>
        <h3 class="current-module">高值要货单查询</h3>
      </div>
      <!--purchase-plan start-->
      <div class="purchase-plan">
        <div class="pd-form fast-search-form">
          <div class="group-row">
            <div class="form-group">
              <!-- <label for="cn1" class="label">计划单号</label> -->
              <div class="control select-style">
                <input type="text" id="cn1" maxlength="17" v-rule v-model='search.search_LIKE_billno' placeholder="要货单号"> </div>
            </div>
            <div class="form-group">
              <!-- <label class="label" for='cn2'>商品</label> -->
              <div class="control select-style">
                <input type="text" id="cn8"  maxlength="50" v-rule v-model="search.search_LIKE_goodsinfo" placeholder="商品、耗材包"> </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group form-label">
              <!-- <label for="cn3" class="label">制单日期</label> -->
               <div class="control control-date"  style="height:34px;overflow: inherit;">
              <div style="width: 42%;float: left">
                <datepicker :target.sync="search.search_GTE_startDate " :readonly="readonlyFlag" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;" placeholder="制单开始日期"></datepicker>
              </div>
              <span class="text-and" style="width: 45px;">至</span>
              <div style="width: 48%;float: left;">
                <datepicker :target.sync="search.search_LTE_endDate" :readonly="readonlyFlag"
                 styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;" placeholder="制单结束日期"></datepicker>
              </div>
            </div>
            </div>
            <div class="form-group form-label">
              <!-- <label for="cn1" class="label">供应商</label> -->
              <div class="control">
                <input type="text" id="cn2"  maxlength="20" v-rule v-model="search.search_LIKE_suppliername" placeholder="供应商"> </div>
              <!-- <select-ui :list="billtype" v-model="search.search_LIKE_suppliername"  v-bind:disabled="disabled" class='inp4'></select-ui> -->
                </div>
            </div>
            <div class="group-row">
                <div class="form-group">
                  <label class="label w80">业务状态</label>
                  <div class="control control-filtering control-filtering-green fl" style='width:390px;'>
                    <a class="option"
                    :class="{'all active':search.search_EQ_billstate==''}"
                    href="javascript:void(0)" @click="search.search_EQ_billstate=''">全部</a>
                    <a class="option"
                    :class="{'all active':search.search_EQ_billstate=='N'}"
                    href="javascript:void(0)" @click="search.search_EQ_billstate='N'">未提交</a>
                    <a class="option"
                    :class="{'all active':search.search_EQ_billstate=='Y'}"
                    href="javascript:void(0)" @click="search.search_EQ_billstate='Y'">已提交</a>
                  </div>
                </div>
              </div>
              <div class="group-row">
                <div class="form-group">
                  <label class="label w80">单据类型</label>
                  <div class="control control-filtering control-filtering-green fl" style='width:390px;'>
                    <a class="option"
                    :class="{'all active':search.search_EQ_billtype==''}"
                    href="javascript:void(0)" @click="search.search_EQ_billtype=''">全部</a>
                    <a class="option"
                    :class="{'all active':search.search_EQ_billtype=='H02'}"
                    href="javascript:void(0)" @click="search.search_EQ_billtype='H02'">跟台高值</a>
                    <a class="option"
                    :class="{'all active':search.search_EQ_billtype=='H03'}"
                    href="javascript:void(0)" @click="search.search_EQ_billtype='H03'">备货高值</a>
                  </div>
                </div>
              </div>
              <div class="group-row t-right" >
                <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData">查 询</button>
              </div>
            </div>



        </div>
        <div class="m-20-0">
         <button class="btn button-green" v-link="{path:'/cost/costTypeAdd'}">新增高值要货单</button>
        </div>
        <table class="itable itable-thead-13px">
          <thead id="t_header">
            <tr>
              <th class="w50">序号</th>
              <th class="w100">要货单号</th>
              <th class="w100">制单日期</th>
              <th class="w90">期望到货日期</th>
              <th class="w50">品规数</th>
              <th class="w100">单据类型</th>
              <th class="w100">单据状态</th>
              <th class="w70">操作人</th>
              <th class="w80">备注</th>
              <th class="w110">进度</th>
              <th class="w90">操作</th>
            </tr>
          </thead>
          <tbody>
             <tr v-if="trmedplanList.length==0">
              <td colspan="11" >
              暂无符合条件的记录
              </td>
            </tr>
            <tr v-for="trmedplan in trmedplanList">
              <td>{{$index + 1}}</td>
              <td class="t-left pr10">{{trmedplan.billno}}</td>
              <td class="pr10">{{trmedplan.varchar1 | getYMD}} <br>{{trmedplan.varchar1 | getHMS}}</td>
              <td class="pr10">{{trmedplan.planenddate | getYMD}}</td>
              <td>{{trmedplan.detailrecordsum}}条</td>
              <td>{{trmedplan.billtype | HvBillType }}</td>
              <td>{{trmedplan.billstate | billstate_trdoo }}</td>
              <td class="pr10">{{trmedplan.operatername}}</td>
              <td class="t-left">{{trmedplan.memo}}</td>
              <td class="t-left pl10">
                受理：{{trmedplan.sljd}} <br>
                送货：{{trmedplan.shjd}} <br>
                入库：{{trmedplan.rkjd}} <br>
              </td>
              <td>
              	 <a href="javascript:;" class="btn button-green"  v-link="{path:'/cost/costPlanView/' + trmedplan.guid}">明细</a>
                <!-- <a class="btn-d btn-d-activate" >明细</a>
                <a class="btn-d btn-d-activate" >单据跟踪</a> -->
              </td>


            </tr>
          </tbody>
        </table>
         <pagination
             @page-change="getData"
             :class="['m-20-0']"
             :page-no.sync="search.page"
             :total-pages.sync="search.totalPages"></pagination>
      </div>
      <!--purchase-plan end-->
    </div>
</template>
<script>
	module.exports={
		data:function(){
			return{
       supplierList: [],
			 trmedplanList:[],
        stateAll : 'all active',
        state1 : 'option',
        state2 : 'option',
        // state3 : 'option',
        // state4 : 'option',
        // state5 : 'option',
        // state6 : 'option',
        // state7 : 'option',
				search:{
					pageSize:50,
					page:1,
					totalPages:0,
          search_LIKE_billno: '',
          search_EQ_billstate:'',
          search_LTE_endDate:'',
          search_GTE_startDate: '',
          search_LIKE_goodsinfo:'',
          search_LIKE_suppliername:'',
          search_EQ_billtype:'',
				},
        authoritySetting: {
          oneSearchFlag:false,
          oneMakeMonthPlanFlag:true,
          twoDetailFlag:true,
          twoTraceFlag:true,
      },
			};
		},

		methods:{
      download:function(billno){
              var self = this;

               Ajax.post('/cost/exportTrmedhvplan',this.search)
                .then(function(response){
                  var data=response.data;
                  window.open(data);
                })
            },

			getData:function(isRefresh){
					var self = this;
          if(isRefresh) {
            this.search.page = 1;
          }
    		  Ajax.post('/cost/findtrmedhvplanlist',this.search)
					.then(function(response){
						var data=response.data.data;
            if(response.data.errorCode==0){
              self.$set("trmedplanList",data.list);
              self.search.totalPages=data.totalPages;
            }else{
              layer.msg(response.data.message)
            }

					})
      }
   },

    route:{
      data : function(){
        this.search.search_LIKE_billno=window.sessionStorage.getItem('billno');
        window.sessionStorage.setItem('billno','');
        this.getData();
      }
    },
    watch:{
      'search.search_EQ_billstate':function(){
        this.getData();
      },
      'search.search_EQ_billtype':function(){
        this.getData();
      },
    }

};
</script>