platform-b2b/src/main/webapp/resources/tpl/index/sale/order.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;
}

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

.order-table>tbody:hover {
	border-color: #56a022;
	border-width: 2px;
}

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

.order-table .operates i {
	padding: 0 2px;
}

.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;
}

.unPrinted {
	color: #56a022;
}

</style>
<div class="block">
<div class="loading in" ng-class="{'in': loading}">
	<i></i>
</div>
<div class="condition block">
		<div class="row">
			<div class="col-xs-4">
				<div class="btn-group btn-group-sm btn-group-justified">
					<div class="btn-group btn-group-sm">
						<button type="button" class="btn btn-default btn-line"
							ng-class="{'btn-info':active=='all'}" ng-click="setActive('all')">全部</button>
					</div>
					<div class="btn-group btn-group-sm">
						<button type="button" class="btn btn-default btn-line"
							ng-class="{'btn-info':active=='done'}" ng-click="setActive('done')">已回复</button>
					</div>
					<div class="btn-group btn-group-sm">
						<button type="button" class="btn btn-default btn-line"
							ng-class="{'btn-info':active=='todo'}" ng-click="setActive('todo')">待回复</button>
					</div>
					<div class="btn-group btn-group-sm">
						<button type="button" class="btn btn-default btn-line"
							ng-class="{'btn-info':active=='end'}" ng-click="setActive('end')">已结案</button>
					</div>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="search">
					<div class="form-group form-group-sm has-feedback">
						<input type="search" class="form-control input-sm" ng-model="keyword" ng-search="onSearch()" placeholder="输入商品、客户名称或单据流水号搜索" /><span
							class="form-control-feedback text-simple"><i
							class="fa fa-search"></i></span>
					</div>
				</div>
			</div>
			<div class="col-xs-2 toggle">
				<a ng-click="condition.$open=!condition.$open" class="text-simple"><span ng-bind="condition.$open ? '简化筛选条件' : '更多筛选条件'"></span><i class="fa fa-fw" ng-class="{'fa-angle-up': condition.$open, 'fa-angle-down': !condition.$open}"></i></a>
			</div>
		</div>
		<div class="more" ng-class="{'open': condition.$open}">
			<form class="form-inline">
			  <div class="form-group ">
			    <label>日期：</label>
			    <div class="btn-group btn-menu" dropdown is-open="condition.$dateZoneOpen">
				  <button type="button" dropdown-toggle style="width: 85px;" class="btn btn-default btn-xs dropdown-toggle">
				    	{{dateZoneText}}<i class="fa fa-fw fa-angle-down icon-right"></i></span>
				  </button>
				  <ul class="dropdown-menu">
					<li><a ng-click="changeDateZone(1)">一个月内</a></li>
				    <li><a ng-click="changeDateZone(6)">半年内</a></li>
				    <li><a ng-click="changeDateZone()">半年前</a></li>
				  </ul>
				</div>
			    <div class="form-group input-group input-group-xs input-trigger">
						<input type="text" ng-model="condition.dateFrom"
							class="form-control" placeholder="从"
							datepicker-popup="yyyy-MM-dd" is-open="condition.$fromOpened"
							ng-required="true"
							current-text="今天" clear-text="清除" close-text="关闭"
							datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
							ng-focus="openDatePicker($event, condition, '$fromOpened')">
						<span class="input-group-btn">
							<button type="button" class="btn btn-default"
								ng-click="openDatePicker($event, condition, '$fromOpened')">
								<i class="fa fa-calendar"></i>
							</button>
						</span>
					</div>
					<div class="form-group input-group input-group-xs input-trigger">
						<input type="text" ng-model="condition.dateTo"
							class="form-control" placeholder="到"
							datepicker-popup="yyyy-MM-dd" is-open="condition.$toOpened"
							ng-required="true"
							current-text="今天" clear-text="清除" close-text="关闭"
							datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
							ng-focus="openDatePicker($event, condition, '$toOpened')">
						<span class="input-group-btn">
							<button type="button" class="btn btn-default"
								ng-click="openDatePicker($event, condition, '$toOpened')">
								<i class="fa fa-calendar"></i>
							</button>
						</span>
					</div>
			  </div>
			</form>
		</div>
	</div>
<table class="order-table block" ng-table="tableParams">
	<thead>
		<tr class="header">
			<th>商品</th>
			<th width="80">单价</th>
			<th width="100">数量</th>
			<th width="120">交货日期</th>
			<th width="180">单据状态</th>
			<th width="60">操作</th>
		</tr>
		<tr class="sep-row">
			<td colspan="6"></td>
		</tr>
		<tr class="toolbar toolbar-top">
			<td colspan="5">
				<div>
					<label><input type="checkbox" class="selector select_all"
						ng-model="checkboxes.checked" ng-click="checkAll()">全选</label> <a ng-if="active=='todo'" href="javascript:void(0)"
						class="btn btn-default btn-xs" ng-click="replyByBatch()">&nbsp;批量回复&nbsp;</a>
						<div class="btn-group dropdown">
  							<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
    							&nbsp;&nbsp;标记为&nbsp;&nbsp;<span class="caret"></span>&nbsp;
  							</button>
  							<ul class="dropdown-menu" role="menu">
    							<li><a href="javascript:void(0)" ng-click="setDisplay('setRead')">已查看</a></li>
    							<li><a href="javascript:void(0)" ng-click="setDisplay('setUnRead')">未查看</a></li>
    							<li><a href="javascript:void(0)" ng-click="setDisplay('setTop')">置顶</a></li>
  							</ul>
						</div>
				</div> <!-- 分页 -->
			</td>
			<td class="text-center">
				<a href="sale/orders/xls?_state={{active}}&keyword={{keywordXls}}" target="_self" class="text-simple" title="导出Excel表格"><i class="fa fa-file-excel-o fa-fw"></i>导出</a>
			</td>
		</tr>
		<tr class="sep-row">
			<td colspan="6"></td>
		</tr>
	</thead>
	<tbody ng-repeat="order in $data track by order.id">
		<tr class="order-hd" ng-dbclick="order.$collapsed=!order.$collapsed" ng-class="{'text-bold': order.display>0}">
			<td class="first">
				<div class="order-main">
					<span> <input type="checkbox" class="selector"
						ng-model="order.$selected" ng-click="checkOne(order)">
					</span> 
					<a href="javascript:void(0)" ng-if="!order.display" title="标记为未查看" ng-click="setDisplay('setUnRead', order.id)">
						<i class="fa fa-circle-thin"></i>
					</a>
					<a href="javascript:void(0)" ng-if="order.display==1" title="标记为已查看" ng-click="setDisplay('setRead', order.id)">
						<i class="fa fa-circle" style="color: #f40;"></i>
					</a>
					<a href="javascript:void(0)" ng-if="order.display>1" title="标记为已查看" ng-click="setDisplay('setRead', order.id)">
						<i class="fa fa-tags" style="color: #f40;"></i>
					</a>
					&nbsp;&nbsp;<span class="text-num text-bold"
						ng-bind="::order.date | date:'yyyy-MM-dd'"></span> <span>订单号：<a
						class="text-num" ng-bind="::order.code" ui-sref="sale.order_detail({id:order.id})" target="_self"></a></span>
				</div>
			</td>
			<td colspan="3"><a ng-bind="::order.enterprise.enName"></a></td>
			<td colspan="1" class="order-sum">{{::order.currency}}： <span
				ng-bind="::getOrderTotal(order.orderItems) | number : 2"
				class="text-num text-bold"></span>
			</td>
			<td colspan="1" class="text-center">
				<div class="operates">
					<a ng-click="print(order)" title="打印{{order.print? '(已打印)':'(未打印)'}}" ng-class="{'unPrinted' : !order.print, 'text-muted': order.print}"><i
						class="fa fa-print fa-lg"></i></a> <a
						ng-click="order.$collapsed=!order.$collapsed" class="text-muted"
						title="收拢"><i class="fa fa-toggle-down fa-lg"></i></a>
				</div>
			</td>
		</tr>
		<tr class="order-bd" ng-repeat="item in order.orderItems track by item.id"
			ng-if="!order.$collapsed">
			<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"
					ng-bind="::item.product.spec"></div>
			</td>
			<td class="text-center">
				<div class="text-num" ng-bind="::item.price | number:6"></div>
				<div class="text-muted">税率：{{::item.taxrate || 0}}%</div>
			</td>
			<td class="text-center">
				<div class="text-num" ng-bind="::item.qty"></div>
				<div class="text-muted" ng-bind="::item.product.unit"></div>
				<div style="margin: 0 auto" ng-if="item.$editing">
					<input type="text" ng-model="item.reply.qty"
						ng-init="item.reply.qty=item.qty-item.replyQty"
						class="form-control input-xs" placeholder="回复数量">
				</div>
			</td>
			<td class="text-center br-l">
				<div class="text-num" ng-bind="::item.delivery | date:'yyyy-MM-dd'"></div>
				<br>
				<div style="margin: 0 auto"
					class="input-group input-group-xs input-trigger"
					ng-if="item.$editing">
					<input type="text" ng-model="item.reply.delivery"
						class="form-control" placeholder="回复交期"
						datepicker-popup="yyyy-MM-dd" is-open="item.$opened"
						min-date="order.date" ng-required="true" current-text="今天"
						clear-text="清除" close-text="关闭"
						datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
						ng-focus="openDatePicker($event, item, '$opened')"> <span
						class="input-group-btn">
						<button type="button" class="btn btn-default"
							ng-click="openDatePicker($event, item, '$opened')">
							<i class="fa fa-calendar"></i>
						</button>
					</span>
				</div>
			</td>
			<td class="br-l">
				<div ng-if="!item.$editing">
					<div ng-if="!item.replyQty" class="text-muted text-center">未回复</div>
					<div ng-if="item.replyQty > 0 && item.replyQty < item.qty">
						<div class="progress progress-sm">
							<div class="progress-bar progress-bar-success"
								ng-style="{'width': 100*item.replyQty/item.qty + '%'}">
								<span class="sr-only"></span>
							</div>
						</div>
						已回复 <span class="text-default">{{::item.replyQty}}</span> /
						<span>{{::item.qty}}</span>
					</div>
					<div ng-if="item.replyQty > 0" class="dropdown" ng-class="{'text-center': item.replyQty>=item.qty}">
						<a href="javascript:void(0);" class="dropdown-toggle text-default"
							ng-mouseover="getReply(item)">回复历史<i class="fa fa-fw fa-angle-down"></i></a>
						<div class="dropdown-menu pane" style="width: 270px;">
							<div class="pane-body">
								<ul class="list-unstyled list-menu">
									<li ng-repeat="reply in ::item.replies">
										<div class="row row-sm"
											ng-class="{'text-inverse': $index==0}">
											<div class="col-xs-6">数量{{::reply.qty}}</div>
											<div class="col-xs-6">交期{{::reply.delivery |
												date:'yyyy-MM-dd'}}</div>
										</div>
										<div class="text-muted">{{::reply.recorder}}&nbsp;&nbsp;{{::reply.date
											| date:'MM-dd HH:mm'}}&nbsp;回复</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div ng-if="item.acceptQty" class="text-success text-center text-bold f14">
						客户验收：{{::item.acceptQty}}{{::item.product.unit}}
					</div>
					<div ng-if="item.returnQty" class="text-error text-center text-bold f14">
						客户验退：{{::item.returnQty}}{{::item.product.unit}}
					</div>
				</div>
				<div style="margin: 0 auto" ng-if="item.$editing">
					<br><br><input type="text" ng-model="item.reply.remark"
						class="form-control input-xs" placeholder="回复备注" />
				</div>
			</td>
			<td class="text-center br-l">
				<div ng-if="item.replyQty>=item.qty" class="block">
					<span class="text-trans success">已回复</span>
				</div>
				<div ng-if="item.end" class="block">
					<span class="text-trans warning">已结案</span>
				</div>
				<div ng-if="(!item.replyQty || item.replyQty<item.qty) && !item.end">
					<div ng-show="!item.$editing">
						<a ng-click="item.$editing=true">回复</a>
					</div>
					<div ng-if="item.$editing">
						<div>
							<a ng-click="item.$editing=false">取消</a>
						</div>
						<br>
						<div>
							<a ng-click="onReplyClick(item)" class="text-inverse">确认回复</a>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>
</div>