hytc-admin/application/index/view/workorder/detail.html

<link rel="stylesheet" href="__CDN__/assets/addons/workorder/css/detail.css">
<div class="container">
    <div id="content-container" class="container">
        <div class="row">
            <div class="col-md-3">
                {include file="common/sidenav" /}
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h2 class="page-header">
                            工单详情
                            {eq name="isUser" value="1"}
                            <a href="{:url('workorder/my')}" class="btn btn-info pull-right"><i class="fa fa-th-list"></i> 我的工单</a>
                            {else/}
                            <a href="{:url('workorder/manage')}" class="btn btn-info pull-right"><i class="fa fa-th-list"></i> 工单列表</a>
                            {/eq}
                        </h2>

                        <!--手机端的步骤条-->
                        <ol class="breadcrumb mobile_steps visible-xs">
                            <li class="{$row.status.number == 0 ? 'active':'after_step'}">
                                <a href="javascript:;">已提交</a>
                            </li>

                            <li class="{$row.status.number == 1 ? 'active':''} {$row.status.number > 1 ? 'after_step':''}">
                                <a href="javascript:;">已分派</a>
                            </li>

                            <li class="{$row.status.number >= 2 && $row.status.number <= 4 ? 'active':''} {$row.status.number == 5 ? 'after_step':''}">
                                <a href="javascript:;">正在处理</a>
                            </li>

                            <li class="{$row.status.number == 5 ? 'active':''}">
                                <a href="javascript:;">已评价</a>
                            </li>
                        </ol>

                        <div class="steps hidden-xs">
                            <div class="step step-after {$row.status.number == 0 ? 'step-active':''}">
                                <span class="step_text">已提交</span>
                            </div>
                            <div class="step step-after step-before {$row.status.number == 1 ? 'step-active':''}">
                                <span class="step_text">已分派</span>
                            </div>
                            <div class="step step-after step-before {$row.status.number >= 2 && $row.status.number <= 4 ? 'step-active':''}">
                                <span class="step_text">正在处理</span>
                            </div>
                            <div class="step step-before {$row.status.number == 5 ? 'step-active':''}">
                                <span class="step_text">已评价</span>
                            </div>
                        </div>

                        <!--工单信息-->
                        <div class="row detail">
                            <div class="col-md-4 detail_item">编号：{$row.id}</div>
                            {volist name="basicField" id="field"}
                            <div class="col-md-4 detail_item">{$field.title}：{$field.value}</div>
                            {/volist}
                            <div class="col-md-4 detail_item">相关产品/服务：{$row.category.name}</div>
                            <div class="col-md-4 detail_item">紧急程度：{$row.urgentrank.name}</div>
                            <div class="col-md-4 detail_item">状态：{$row.status.pc}</div>
                            <div class="col-md-4 detail_item hidden-xs">创建时间：{$row.createtime_text}</div>
                            <div class="col-md-4 detail_item">操作：
                                {if $row.urging}<a href="javascript:;" data-order_id="{$row.id}" class="urging_workorder">催办</a>{/if}
                                {if $row.close}<a href="javascript:;" data-order_id="{$row.id}" class="close_workorder">关闭工单</a>{/if}
                                {in name="row.status.number" value="2,3,4"}{eq name="isUser" value="1"}<a href="{:url('index/workorder/evaluate', ['id' => $row.id])}">评价工单</a>{/eq}{/in}
                                {in name="row.status.number" value="1,2,3"}{eq name="isUser" value="0"}<a href="javascript:;" data-order_id="{$row.id}" class="transfer_workorder">转接工单</a>{/eq}{/in}
                                {eq name="isUser" value="1"}{eq name="row.status.number" value="5"}<a href="javascript:;" class="del_workorder" data-order_id="{$row.id}">删除工单</a>{/eq}{/eq}
                            </div>

                            {eq name="isUser" value="0"}
                            <form action="{:url('index/workorder/transfer')}" method="post" role="form" class="col-md-12 form-horizontal transfer_form" data-toggle="validator">
                                {:token()}
                                <input type="hidden" name="id" value="{$row.id}"/>
                                <div class="form-group margin-bottom-10">
                                    <div class="control-label col-xs-12 col-sm-2">转接给</div>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" name="transfer_engineer" data-rule="required" id="c-transfer_engineer" class="form-control selectpage" placeholder="请选择工程师" data-source="{:url('api/workorder/searchTransfer',['id' => $row.id])}" data-pagination="false" data-field="title"/>
                                    </div>
                                </div>
                                <div class="form-group margin-bottom-none">
                                    <div class="control-label col-xs-12 col-sm-2"></div>
                                    <div class="col-xs-12 col-sm-8">
                                        <button type="submit" class="btn btn-success"><i class="fa fa-send"></i> 转接工单</button>
                                    </div>
                                </div>
                            </form>
                            {/eq}
                        </div>

                        <!--工程师信息-->
                        {volist name="engineers" id="engineer"}
                        <div class="engineer_info engineer_info_{$engineer.id} col-xs-12 {$engineer.id == $row.engineer_id ? 'visible-xs':'hidden'}">
                            <div class="col-xs-12 basic_info">
                                <img class="img-circle" src="{$engineer.user.avatar|default='__CDN__/assets/img/avatar.png'}" alt="">
                                <div class="basic_info_box">
                                    <p class="basic_info_name">{$engineer.title}</p>
                                    <p class="basic_info_desc">{$engineer.introduce}</p>
                                </div>
                            </div>
                            <div class="col-xs-12 expend_info">
                                {if $engineer.all_order_number}
                                <div class="col-xs-12 expend_info_item">
                                    <div class="col-xs-6">处理工单数</div>
                                    <div class="col-xs-6">{$engineer.all_order_number}</div>
                                </div>
                                {/if}
                                {present name="$engineer.average_solve_time"}
                                <div class="col-xs-12 expend_info_item">
                                    <div class="col-xs-6">平均解决时间</div>
                                    <div class="col-xs-6">{$engineer.average_solve_time}</div>
                                </div>
                                {/present}
                                {present name="$engineer.average_first_response"}
                                <div class="col-xs-12 expend_info_item">
                                    <div class="col-xs-6">平均首次响应</div>
                                    <div class="col-xs-6">{$engineer.average_first_response}</div>
                                </div>
                                {/present}
                                <div class="col-xs-12 expend_info_item {$engineer.wx ? '':'hidden'}">
                                    <div class="col-xs-6">微信号</div>
                                    <div class="col-xs-6">{$engineer.wx}</div>
                                </div>
                                <div class="col-xs-12 expend_info_item {$engineer.qq ? '':'hidden'}">
                                    <div class="col-xs-6">QQ号</div>
                                    <div class="col-xs-6">{$engineer.qq}</div>
                                </div>
                                <div class="col-xs-12 expend_info_item {$engineer.user.mobile ? '':'hidden'}">
                                    <div class="col-xs-6">手机号</div>
                                    <div class="col-xs-6">{$engineer.user.mobile}</div>
                                </div>
                                <div class="col-xs-12 expend_info_item {$engineer.user.email ? '':'hidden'}">
                                    <div class="col-xs-6">邮箱</div>
                                    <div class="col-xs-6">{$engineer.user.email}</div>
                                </div>
                            </div>
                        </div>
                        {/volist}

                        <!--用户信息(供鼠标移入头像显示)-->
                        <div class="engineer_info user_info col-xs-12 hidden">
                            <div class="col-xs-12 basic_info border-none">
                                <img class="img-circle" src="{$row.user.avatar|default='__CDN__/assets/img/avatar.png'}" alt="">
                                <div class="basic_info_box">
                                    <p class="basic_info_name">{$row.user.nickname}</p>
                                    <p class="basic_info_desc">{$row.user.bio}</p>
                                </div>
                            </div>
                        </div>

                        <!--沟通记录-->
                        <div class="detail-content">
                            <p class="detail-content-title">沟通记录</p>
                            <div class="detail-content-list">
                                <ul id="message_items" class="list_items">
                                    {volist name="records" id="record" empty="<div class='empty_record'>暂时还没有沟通记录...</div>"}
                                    <li class="list_item">
                                        <div class="item_meta item_meta_{$isUser ? ($record.sender == 'user' ? 'user':'engineer'):($record.sender == 'user' ? 'engineer':'user')}">
                                            <div class="item_meta_avatar">
                                                {eq name="record.sender" value="engineer"}
                                                <div rel="engineer_popo" data-toggle="popover" data-engineer_id="{$record.engineer.id}" title="{$record.engineer.title}" class="avatar_img">
                                                    <img class="img-circle" src="{$record.engineer.user.avatar|default='__CDN__/assets/img/avatar.png'}">
                                                </div>
                                                {else/}
                                                <div rel="userInfo_popo" data-toggle="popover" title="{$row.user.nickname}" class="avatar_img">
                                                    <img class="img-circle" src="{$row.user.avatar|default='__CDN__/assets/img/avatar.png'}">
                                                </div>
                                                {/eq}
                                            </div>
                                            <div class="item_meta_content_box">
                                                <div class="item_meta_content">
                                                    <div>
                                                        <div class="item_meta_createtime">{$record.createtime_text}&nbsp;&nbsp;&nbsp;&nbsp;{$record.sender == 'engineer' ? $record.engineer.title:$row.user.nickname}</div>
                                                        <div class="item_meta_text">{$record.message.html}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    {/volist}
                                </ul>
                            </div>
                        </div>

                        <!--回复工单-->
                        {lt name="row.status.number" value="4"}
                        <div class="detail_editor">
                            <p class="detail-content-title">我要反馈</p>
                            <div class="detail_editor_box">
                                <form action="{:url('index/workorder/reply', ['id' => $row.id])}" data-toggle="validator" id="message_form" role="form" method="post" class="form-horizontal message_form">
                                    {:token()}
                                    {include file="workorder/common/fields"}
                                    <div class="form-group">
                                        <div class="control-label col-xs-12 col-sm-2"></div>
                                        <div class="col-xs-12 col-sm-8">
                                            <button type="submit" class="btn btn-success"><i class="fa fa-send"></i> 提交{eq name="isUser" value="1"}反馈{else/}回复{/eq}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        {/lt}

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>