platform-b2c/src/main/webapp/resources/view/vendor/b2b/apBill.html

<style>
  .order-table .header>th {
    height: 38px;
    text-align: center;
    background: #f5f5f5;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
  }

  .order-table .sep-row {
    height: 10px;
  }

  .order-table .selector {
    vertical-align: middle;
    margin: 0 0 2px 0;
  }

  .toolbar label {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .toolbar .select_all {
    margin: 0 6px 0 10px;
    line-height: 20px;
  }

  .toolbar .btn {
    -moz-border-radius: 2px;
    margin-right: 5px;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
  }

  .order-table .order-hd {
    background: #f5f5f5;
    height: 40px;
    line-height: 40px;
  }

  .order-table .order-hd td.first {
    padding-left: 20px;
  }

  .order-table .order-hd .order-main span {
    margin-right: 8px;
  }

  .order-table .order-hd .order-code {
    font-style: normal;
    font-family: verdana;
  }

  .order-table .order-hd .order-sum {
    padding: 0 5px;
    font-size: 15px;
    font-weight: bold;
    color: #CC0000;
  }

  .order-table>tbody {
    border: 1px solid transparent;
  }

  .order-table>tbody:hover {
    border-color: #3c7cf5;
    border-width: 2px;
  }
  .order-table>tbody:hover .order-bdd{
    background: #f8fafe;
  }
  .order-table .operates {
    display: none;
  }

  .order-table>tbody:hover .operates {
    display: block;
  }

  .order-table .order-bd {
    border-bottom: 1px solid #e6e6e6;
  }

  .order-table .order-bd>td {
    padding: 10px 5px;
    /*vertical-align: top;*/
    position: relative;
  }

  .order-table .order-bd .product {
    padding-left: 20px;
  }

  .input-xs,.input-group-xs>.form-control,.input-group-xs>.input-group-addon,.input-group-xs>.input-group-btn>.btn
  {
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }

  .input-group-xs .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

</style>
<style>
  .com_tab {
    height: 40px;
    margin-bottom: 10px;
  }
  .com_tab ul {
    width: 100%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    background: #fff;
  }
  .com_tab ul li {
    height: 40px;
    text-align: center;
    float: left;
    position: relative;
    min-width: 110px;
  }
  .com_tab:nth-of-type(1) ul li.active > a {
    border-bottom: #fff;
    background: #5078cb;
    color: #fff !important;
  }
  .com_tab ul li a {
    min-width: 110px;
  }
  .com_tab ul li > a {
    font-size: 14px;
    height: 40px;
    padding: 0 20px;
    display: inline-block;
  }
  .com_tab:nth-of-type(1) ul li::after {
    background:url('/static/img/vendor/images/downicon.png');
    width: 11px;
    height: 6px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    content: ' ';
    margin-left: -5px;
    display: none;
  }
  .com_tab ul li::after {
    background:url('/static/img/vendor/images/downicon.png');
    width: 11px;
    height: 6px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    content: ' ';
    margin-left: -5px;
    display: none;
  }
  .com_tab ul li.active:after {
    display: block;
  }
  .oder01 ul li.active a{
    border-bottom: 1px solid #fff;
    color: #f15601;
  }
  .oder01 ul li.active a em {
    color: #f15601;
  }
  .oder01 ul li a em {
    color: #323232
  }
  .screen {
    background: #fff;
    padding-top: 10px;
    padding-right: 11px;
    line-height: 32px;
    padding-left: 22px;
    width: 100%;
    height: 50px;
    position: relative;
  }
  .screen .sreach input {
    border: #5078cb 1px solid;
    height: 32px;
    width: 280px;
    box-shadow: none;
    padding-left: 10px;
    background: #fff;
    float: left;
    vertical-align: middle;
    font-size: 14px;
  }
  .screen .sreach a.seek {
    width: 58px;
    height: 32px;
    background: #5078cb;
    color: #fff;
    line-height: 32px;
    float: none;
    border-radius: 2px;
    vertical-align: unset;
  }
  .order-table {
    background: #fff;
    width: 100%;
  }
  .order-table .header > th {
    height: 38px;
    text-align: center;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;
  }

  .order-table .sep-row {
    height: 10px;
  }

  .order-table .selector {
    vertical-align: middle;
    margin: 0 0 2px 0;
  }

  .toolbar label {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .toolbar .select_all {
    margin: 0 6px 0 10px;
    line-height: 20px;
  }

  .toolbar .btn {
    -moz-border-radius: 2px;
    margin-right: 5px;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
  }

  .order-table .order-hd {
    background: #f5f5f5;
    height: 40px;
    line-height: 40px;
  }

  .order-table .order-hd td.first {
    padding-left: 20px;
  }

  .order-table .order-hd .order-main span {
    margin-right: 8px;
  }

  .order-table .order-hd .order-code {
    font-style: normal;
    font-family: verdana;
  }

  .order-table .order-hd .order-sum {
    position: relative;
    padding: 0 5px;
  }

  .order-table .order-hd .dropdown-toggle {
    line-height: 40px;
    display: block;
    color: #5078cb;
    /*padding: 0 10px;*/
  }


  .order-table .operates {
    display: none;
  }

  .order-table > tbody:hover .operates {
    display: block;
  }

  .order-table .order-bd {
    border-bottom: 1px solid #e6e6e6;
  }

  .order-table .order-bd > td {
    padding: 10px 5px;
  }

  .order-table .order-bd .product {
    padding-left: 20px;
  }

  .input-xs, .input-group-xs > .form-control, .input-group-xs > .input-group-addon, .input-group-xs > .input-group-btn > .btn {
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
  .order-table .order-hd .dropdown-toggle:hover + .order-snapshot {
    display: block;
  }
  .order-table .order-hd .order-snapshot{
    padding: 10px 15px;
    display: none;
    width: 250px;
    position: absolute;
    top: 32px;
    left: 39px;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -o-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
  }
  .order-snapshot .title {
    border-top: 1px dashed #ddd;
  }

  .order-snapshot .dl-horizontal dt {
    width: 60px;
    text-align: left;
    font-weight: normal;
    color: #999;
    padding: 4px 0;
  }

  .order-snapshot .dl-horizontal dd {
    margin-left: 80px;
    padding: 4px 0;
  }

  /*arrow*/
  .order-send {
    position: relative;
  }

  .order-send.arrow-border:before, .arrow-border:after {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
  }

  .order-send.arrow-border.arrow-bottom-right:before {
    content: '';
    position: absolute;
    left: -13px;
    border-bottom-color: #fff;
    border-right-color: #fff;
    margin-top: -10px;
  }

  .menu .new-dot {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: inherit;
    top: -2px;
  }
  .f14{
    font-size:14px;
  }
  .screen .sreach input {
    width: 288px
  }
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    margin: 0 !important;
  }
  .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #empty {
    padding: 70px 0;
    margin: 0 auto;
    text-align: center;
  }
  #empty .left_img {
    display: inline-block;
    color: #3f84f6;
  }
  #empty .left_img a {
    font-size: 25px;
    color: #3f84f6;
  }
  #empty .right_link p {
    margin: 0;
    font-size: 14px;
    color: #666;
  }
  #empty_info .empty_title {
    color: #3f84f6;
    font-size: 18px;
  }
  #empty_info .empty_explain {
    font-size: 16px;
    color: #999;
  }
  #empty_info .empty_explain .info {
    text-indent: -22px;
  }
  .f16 {
    font-size: 16px !important;
  }
  .f14 {
    font-size: 14px !important;
  }
  #empty_info {
    padding-left: 60px;
    padding-bottom: 40px;
  }
  table tbody tr td {
    border-bottom: #e8e8e8 1px solid;
    border-right: #e8e8e8 1px solid;
    font-size: 14px;
    color: #333;
  }
  .ng-table-pager::after {
    clear: both;
    content: ' ';
    zoom: 1;
    display: block;
    visibility: hidden;
  }
  .ng-table-pager {
    padding-right: 20px;
    padding-top: 50px;
    margin-right: 0 !important;
  }
  .text-mns {
    padding-right: 15px;
    position: absolute;
    bottom: 64px;
    right: 20px;
    font-size: 12px;
  }
  .Boom18 {
    bottom: 18px;
  }
  .fixed {
    width: 40px;
  }
  .text-trans {
    left: 50%;
    right: auto;
    top: 50%;
    margin: -20px 0 0 -40px;
  }
  .oder01 ul li {
    margin-left: 0px
  }
  .order-table .inquiry-bd .order-number {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #f9f9f9;
    font-weight: 500;
    border: solid 1px #d5d5d5;
    border-radius: 0 0 10px 0;
  }
</style>
<!--<link rel="stylesheet" href="static/css/public.css">-->
<div class="user_right fr" style="position: relative">
  <div class="com_tab" style="margin-bottom: 10px">
    <ul class="fl" style="width: 100%">
      <li class="active"><a>B2B</a></li>
        <li><a ui-sref="vendorInvoice">优软商城</a></li>
      <li class="down-purchase" style="margin-right: 20px;min-width: 80px;cursor:pointer">
          <span ng-click="exportXls()">
            <i class="fa fa-file-excel-o fa-fw"></i>导出Excel
        </span>
      </li>

    </ul>
  </div>
  <!--<div class="oder01" style="margin-bottom: 10px">-->
    <!--<ul>-->
      <!--<li ng-class="{'active': active=='done'}" ng-click="setActive('done')"><a>已发布</a></li>-->
      <!--<li ng-class="{'active': active=='todo'}" ng-click="setActive('todo')"><a>待发布</a></li>-->
    <!--</ul>-->
  <!--</div>-->
  <div class="screen check-filter">
    <div class="radio-block date-radio" style="width: 33%">
      时间：
      <label class="com-check-radio">
        <input type="radio" id="oneMonth" name="date" ng-click="changeDateZone(1);condition.$open=false" checked>
        <label for="oneMonth"></label>
        30天
      </label>
      <label class="com-check-radio">
        <input type="radio" id="threeMonth" name="date" ng-click="changeDateZone(3);condition.$open=false">
        <label for="threeMonth"></label>
        90天
      </label>
      <label class="com-check-radio">
        <input type="radio" id="sixMonth" name="date" ng-click="changeDateZone(6);condition.$open=false">
        <label for="sixMonth"></label>
        180天
      </label>
      <label class="com-check-radio">
        <input type="radio" id="autoMonth" name="date" ng-click="condition.$open=!condition.$open;changeDateZone(-1)">
        <label for="autoMonth"></label>
        自定义
      </label>
    </div>
    <div class="sreach fr">
      <div ng-show="condition.$open" class="date fl">
        <div class="data-input">
          <input type="text" ng-model="condition.dateFrom"
                 class="form-control select-adder" placeholder="起始时间"
                 datepicker-popup="yyyy-MM-dd"
                 is-open="condition.$fromOpened"
                 max-date="condition.dateTo" current-text="今天" clear-text="清除" close-text="关闭"
                 ng-focus="openFilterDatePicker($event, condition, '$fromOpened')"
                 datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                 style="width: 130px"
          />
          <button class="open" ng-click="openFilterDatePicker($event, condition, '$fromOpened')"></button>
        </div>

        <em>–</em>
        <div class="data-input">
          <input type="text" ng-model="condition.dateTo"
                 class="form-control select-adder" placeholder="结束时间"
                 datepicker-popup="yyyy-MM-dd"
                 is-open="condition.$toOpened"
                 min-date="condition.dateFrom" current-text="今天" clear-text="清除" close-text="关闭"
                 ng-focus="openFilterDatePicker($event, condition, '$toOpened')"
                 datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                 style="width: 130px"
          />
          <button class="open" ng-click="openFilterDatePicker($event, condition, '$toOpened')"></button>
        </div>
      </div>
      <div class="sreach-input fr">
        <input type="search" placeholder="单据编号/客户名称/物料名称" class="form-control" ng-model="keyword" ng-search="onSearch()"/>
        <a class="seek" href="javascript:void(0)" ng-click="onSearch()">搜索</a>
      </div>
    </div>
  </div>
  <table class="order-table block" ng-table="tableParams">
    <thead>
    <tr class="header">
      <th>商品</th>
      <th width="120">单价</th>
      <th width="100">发票数量</th>
      <th width="120">发票金额</th>
      <th width="140">单据信息</th>
      <th width="70">操作</th>
    </tr>
    <!--<tr class="sep-row">-->
      <!--<td colspan="6"></td>-->
    <!--</tr>-->
    </thead>
    <tbody ng-if="$data.length === 0">
    <tr>
      <td colspan="6">
        <div id="empty">
          <div class="left_img">
            <a><img src="static/img/all/empty-cart.png"></a>
            <a>B2B 商务</a>
          </div>
          <div class="right_link">
            <p>暂无对应的发票信息</p>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
    <tbody ng-repeat="bill in $data">
    <tr class="order-hd">
      <td class="first" colspan="6">
        <div class="order-main">
          <!--<span> <input type="checkbox" class="selector"
            ng-model="bill.$selected">
          </span> -->
          <span class="text-num text-bold" title="{{::bill.date | date: 'yyyy年MM月dd日 hh:mm'}}">
            日期：{{bill.date | date:'yyyy-MM-dd'}}
          </span>
          <span>流水号：<a style="color: #5078cb;" ui-sref="fa_apBill_detail({id:bill.id})"><span
            class="text-num" ng-bind="::bill.code"></span></a></span>
          <span title="客户名称">
            <img src="static/img/user/images/shop_home.png">{{::bill.enterprise.enName}}
          </span>
          <span ng-if="isUser" title="票据总额">
            <span ng-bind="::bill.currency"></span>
            <span ng-bind="::bill.apAmount"></span>
          </span>
          <div class="operates">
            <!-- <a href="#" class="text-muted" title="打印">
              <i class="fa fa-print fa-lg fa-fw"></i>
            </a> -->
          </div>
        </div>

      </td>
      <!--<td colspan="3"></td>-->
      <!--<td colspan="1" class="order-sum text-num">-->
			<!---->
      <!--</td>-->
    </tr>
    <tr class="order-bd order-bdd" ng-repeat="item in bill.items">
      <td class="product">
        <div class="text-num text-bold">
          <span ng-bind="::item.product.code"></span>
        </div>
        <div>
          <span ng-bind="::item.product.title"></span>
        </div>
        <div class="text-muted" title="{{::item.product.spec}}"
             ng-bind="::item.product.spec"></div>
      </td>
      <td class="text-center">
        <div class="text-num" title="{{::item.price}}">
          <span ng-if="!isUser" ng-bind="::bill.currency"></span>
          <span ng-if="!isUser" ng-bind="::item.price"></span>
          <span ng-if="isUser" ng-bind="'-'"></span>
        </div>
        <div>&nbsp;</div>
        <div class="text-muted"
             title="{{::'税率：' + item.taxrate + '%'}}">
          税率：<span class="text-num" ng-bind="::item.taxrate"></span>%
        </div>
      </td>
      <td class="text-center">
        <div class="text-num"
             title="{{::item.qty}}" ng-bind="::item.qty"></div>
      </td>
      <td class="text-center br-l">
        <div class="text-num text-bold">
          <span ng-if="!isUser" ng-bind="::bill.currency"></span>
          <span ng-if="!isUser" ng-bind="::item.apAmount"></span>
          <span ng-if="isUser" class="text-num" ng-bind="::'-'"></span>
        </div>
        <div>&nbsp;</div>
        <div class="text-muted">
          税金：
          <span ng-if="!isUser" class="text-num" ng-bind="::bill.currency"></span>
          <span ng-if="!isUser" class="text-num" ng-bind="::item.taxAmount"></span>
          <span ng-if="isUser" class="text-num" ng-bind="::'-'"></span>
        </div>
      </td>
      <td class="br-l" colspan="2" ng-if="item.orderCode">
        <div>单据编号：<span ng-bind="::item.orderCode"></span></div>
        <div>
          第 <span ng-bind="::item.orderDetno"></span> 行
          &nbsp;&nbsp;&nbsp;&nbsp;数量：<span ng-bind="::item.thisvoQty">
				</span><span class="text-muted" ng-bind="::item.product.unit"></span>
        </div>
        <div class="text-muted">单据金额：
          <span ng-if="!isUser" class="text-num" ng-bind="::bill.currency"></span>
          <span ng-if="!isUser" class="text-num" ng-bind="::item.amount"></span>
          <span ng-if="isUser" class="text-num" ng-bind="::'-'"></span>
        </div>
      </td>
      <td class="br-l" colspan="2" ng-if="!item.orderCode">
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;数量：<span ng-bind="::item.thisvoQty">
				</span><span class="text-muted" ng-bind="::item.product.unit"></span>
        </div>
        <div class="text-muted">单据金额：
          <span ng-if="!isUser" class="text-num" ng-bind="::bill.currency"></span>
          <span ng-if="!isUser" class="text-num" ng-bind="::item.amount"></span>
          <span ng-if="isUser" class="text-num" ng-bind="::'-'"></span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <div ng-if="infoCommon.totalElement > 0" class="text-mns text-right" ng-class="infoCommon.totalElement >= 20 ? '': 'Boom18'">
    显示&nbsp;{{(infoCommon .page - 1 ) * infoCommon.size + 1}}-{{infoCommon.all >= 20 ? infoCommon.page *  infoCommon.size: (infoCommon.page - 1 ) * infoCommon.size + infoCommon.all}}&nbsp;条，共&nbsp;{{infoCommon.totalElement}}&nbsp;条
  </div>
</div>