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

<style>
  body{
    font-family: "Microsoft YaHei", "微软雅黑" !important;
  }
  .text-num{

  }
  .append{
    color: #5078cb;font-size:12px; margin-left: 10px
  }
  .order-table td {
    padding-top: 10px;
    margin-bottom: 20px;
    border-bottom: solid 1px #ccc;
    border-top: solid 1px #e8e8e8;
  }

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

  .order-table td.last {
    padding-right: 20px;
  }

  .order-table td .static p {
    display: inline-block;
    line-height: 30px;
    padding-top: 5px;
    padding-bottom: 0px;
    width: 150px;
    font-size: 14px;
    color: #666;
    padding-left: 15px;
    border-left: solid 1px #e8e8e8;
  }
  .order-table td .static p:first-child{
    border-left: none;
    width: auto;
    padding-left: 0;
  }
  .order-table td .static p:last-child{
    /*margin-left: 22px;*/
  }
  .order-table td .static p:nth-of-type(3){
    margin-left: 20px;
  }
  .order-table td .main {
    margin-top: 5px;
    margin-bottom: 20px;
    color: #333;
  }
  .static{
    margin: 12px 0;
  }
  .order-table td .main strong {
    font-size: 14px;
  }

  .order-table td .static p strong {
    font-size: 14px;
    font-weight: bold;
    color: #888;
  }

  .order-table td.status {
    position: relative;
    border-left: solid 1px #e8e8e8;
    padding: 10px;
    vertical-align: top;
  }

  .order-table td.status .operate {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    line-height: 40px;
    opacity: 0.8;
    transition: height ease-in-out 0.5s;
    text-decoration: none;
  }

  .order-table td.status .operate-undo {
    background: #428bca;
  }

  .order-table td.status .operate-done {
    background: #cccccc;
  }

  .order-table td.status:hover  .operate {
    height: 40px;
  }

  .unPrinted {
    color: #56a022;
  }
  .order-table td .main strong{
    font-weight: normal;
  }
  .order-table td{
    font-size: 14px;
  }
  .order-table th{
    text-align: center;
  }
  .order-table .text-trans{
    margin-top: -13px;
    margin-right: 1px;
  }
  .menu .new-dot{
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: inherit;
    top: -2px;
  }
  .block {
    position: relative;
  }
</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;
    text-align: center;
  }

  .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: #666;
  }
  .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 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
  }
  .order-table tbody:hover {
    border: 2px solid #3c7cf5
  }
  .order-table tbody:hover .order-bd:nth-last-of-type(1) {
    background: #f8fafe
  }
  .order-table .order-hdt {
    background: #f5f5f5;
  }
</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  href="javascript:void(0)">B2B</a></li>
      <li><a ui-sref="pay_center" href="javascript:void(0)">优软商城</a></li>
      <li class="down-purchase" style="margin-right: 0;min-width: 80px">
        <a href="#" style="min-width: 80px" ng-click="exportXls()" target="_self" title="导出Excel表格" class="blue f14"><i class="fa fa-file-text fa-fw"></i>导出</a>
      </li>
      <li class="down-purchase" style="margin-right: 0;min-width: 80px">
        <a class="text-simple append" style="min-width: 80px" ui-sref="fa_apCheckList" title="新增对账单">
          <i class="fa fa-plus-square fa-fw"></i>新增对账单
        </a>
      </li>

    </ul>
  </div>
  <div class="oder01" style="margin-bottom: 0px">
    <ul>
      <li ng-class="{'active': active=='all'}" ng-click="setActive('all')"><a> 全部</a></li>
      <li ng-class="{'active': active=='done'}" ng-click="setActive('done')"><a>已确认(<em ng-class="{'color-black': !unread.replied }" ng-bind="unread.replied || 0"></em>)</a></li>
      <li ng-class="{'active': active=='todo'}" ng-click="setActive('todo')"><a>未对账</a></li>
      <li ng-class="{'active': active=='end'}" ng-click="setActive('end')"><a>已作废(<em ng-class="{'color-black': !unread.cancelled }" ng-bind="unread.cancelled || 0"></em>)</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 width="230">对账期间</th>
      <th width="180">对账总额</th>
      <th width="180">明细条目</th>
      <th width="100">商品总数</th>
      <th width="100">对账结果</th>
      <th width="100">操作</th>
    </tr>
    </thead>
    <tbody ng-repeat="check in $data">
    <tr class="order-bd order-hdt">
      <td colspan="6" style="text-align: left">
        <a href="javascript:void(0)" ng-if="!isUnread(check.id)" class="circle-icon">
          已读
        </a>
        <a href="javascript:void(0)" ng-if="isUnread(check.id)" class="no-circle-icon">
          未读
        </a>
        <span class="text-num text-bold;" style="font-weight:bold" title="录单时间">日期：{{::check.recordDate | date:'MM月dd日 HH:mm'}}</span>
        &nbsp;&nbsp;&nbsp;
        <span>
          <!--<i class="fa fa-star" ng-class="{'text-default':check.status==201}"></i>-->
          <img src="static/img/user/images/shop_home.png" style="margin-right: 5px">{{::check.custName}}</span>
        <span style="margin-left: 100px;">单据编号：</span>
        <span class="text-num"><a ui-sref="fa_apCheck_detail({id:check.id})" title="点击查看详情" ng-click="setOrdersRead(check.id)" style="color: #5078cb">{{::check.code}}</a></span>
      </td>
    </tr>
    <tr class="order-bd" style="padding: 15px 0 ">
      <td class="first info" colspan="1" style="text-align: left">
        <div class="static">
          <p><span class="f14 text-num">{{::check.beginDate | date:'yyyy/MM/dd'}} - {{::check.endDate | date:'yyyy/MM/dd'}}</span></p>
        </div>
      </td>
      <td>
        <p>
          <strong class="text-num">{{::(isUser?'-':(check.checkAmount | number:2))}}</strong>
          <span ng-if="!isUser" class="text-number">{{::check.currency}}</span>
        </p>
      </td>
      <td>
        <p>
          <strong class="text-num">{{::check.items.length}}</strong> 条<br>
        </p>
      </td>
      <td>
        <p>
          <strong class="text-num">{{getTotalProd(check) | number}}</strong> <i class="fa fa-cubes"></i>
        </p>
      </td>
      <td class="status">
        <div ng-if="check.checkStatus == '未对账'" class="text-center text-muted f14"><br>未对账！</div>
        <div></div>
        <div ng-if="check.checkStatus == '已确认'" class="text-center text-muted f14">
          <br> <i class="fa fa-check-square-o"></i> 已确认
        </div>
        <div ng-if="check.checkStatus == '不同意'" class="text-center text-muted f14">
          <br> <i class="fa fa-check-square-o"></i> 不同意
        </div>
        <div ng-if="check.checkStatus == '已作废'" class="text-center text-muted f14">
          <br> <i class="fa fa-check-square-o"></i> 已作废
        </div>
      </td>
      <td>
        <div ng-hide="check.status" class="block">
          <span class="text-trans error">未提交</span>
        </div>
        <div ng-show="check.status" class="block">
          <span class="text-trans success">已提交</span>
        </div>
        <div class="" style="margin-top: 33px;margin-right: 20px;">
          <a ng-click="print(check)" class="pull-right" title="打印{{check.print? '(已打印)':'(未打印)'}}" ng-class="{'unPrinted' : !check.print, 'text-muted': check.print}"><i class="fa fa-print fa-lg"></i>&nbsp;打印</a>
        </div>
        <!-- <a ui-sref="fa.apCheck_detail({id:check.id})" class="operate operate-undo text-center"
           target="_blank">查看详情</a>	 -->
      </td>
    </tr>
    </tbody>
    <tbody ng-if="tableParams.total() == 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 ng-if="active != 'all'">暂无对账信息！</p>
            <p ng-if="active == 'all'">您还未生成对账单，请立即新增对账！</p>
            <a ng-if="active == 'all'" ui-sref="fa_apCheckList"><i class="fa fa-plus-square fa-fw"></i> 新增对账单</a>
          </div>
        </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>