jifuning
/
zhihui_kuangshan_app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta
      name="format-detection"
      content="telephone=no,email=no,date=no,address=no"
    />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
      body {
        background: #fff;
      }

      .api_layout {
        background: #fff;
        width: 100%;
        /*margin-top: -10px;*/
      }
      .column {
        margin-bottom: 10px;
      }
      .aui-row {
        border: 1px dashed #c8d2de;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px;
      }
      .technological-process {
        margin-top: 10px;
      }
      /*****/
      /*审批进度条*/
      .layui-timeline {
        padding-left: 5px;
      }
      .layui-timeline-item {
        position: relative;
        padding-bottom: 20px;
      }
      .layui-timeline-item:first-child:before {
        display: block;
      }
      .layui-timeline-item:before {
        content: '';
        position: absolute;
        left: 5px;
        top: 0;
        z-index: 0;
        width: 1px;
        height: 100%;
      }
      .layui-timeline-item:before,
      hr {
        background-color: #e6e6e6;
      }
      .layui-timeline-item .layui-timeline-item_top_img {
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        left: -5px;
        top: 0;
        z-index: 10;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background-color: #fff;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
      }
      .Correct {
        color: #5fb878;
        border: 1px solid #5fb878;
      }
      .closes {
        color: red;
        border: 1px solid red;
      }
      .layui-timeline-content {
        padding-left: 25px;
      }
      .layui-text {
        line-height: 22px;
        font-size: 14px;
        color: #666;
      }
      .layui-timeline-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .layui-timeline-reamrk-text {
        color: #4bc612;
      }
      .remark {
        padding: 3px 0 0 2px;
        border-radius: 2px;
        display: none;
      }
      /*手写签名*/
      .signature_img_container {
        margin-top: 5px;
      }

      .tips_signature {
          margin: 5px 14px 0 14px;
          padding: 10px 0 10px 9px;
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05);
          border-radius: 5px;
          color: #7F8C8D;
      }
      .tips_signature img {
          width: 21px;
          height: 21px;
      }
      /******/
      .aui-list-item-input label {
        font-size: 14px;
        height: 21px;
        display: inline-block;
        line-height: 22px;
        margin-right: 5px;
      }
      .aui-list-item-input label:last-child {
        margin-right: 0;
      }
      .itmes li {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 10px 0;
        position: relative;
      }
      .itmes li:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        background: #ebeef3;
        width: 100%;
      }
      .itmes p {
        width: 40%;
        color: #2c3e50;
        font-size: 15px;
      }
      .itmes p:last-child {
        margin-left: 10px;
        width: 55%;
        color: #3498db;
      }
      .column {
        margin-top: 15px;
      }
      .column-title {
        font-size: 15px;
        color: #2c3e50;
        margin-bottom: 5px;
        display: block;
      }
      .header-img {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
      }
      .img-title {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
      }
      /*.personalInfo{
          margin-bottom: 20px;
        }*/
      .personalInfo span {
        display: block;
        font-size: 14px;
        color: #6c6f74;
      }
      .personalInfo span:first-child {
        font-size: 18px;
        color: #002257;
      }
      .examine-success {
        background: #1abc9c;
      }
      .examine-red {
        background: #e74c3c;
      }
      .staff_name {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: 10px;
        line-height: 50px;
        text-align: center;
        color: #fff;
      }
      .aui-col-xs-4 img {
        object-fit: cover;
        border-radius: 3px;
        margin: auto;
      }
      .aui-col-xs-4 span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 0 3px;
        height: 48px;
        text-align: center;
        margin: 5px 0;
        font-size: 15px;
      }
      .fileList img {
        width: 35px;
        height: 35px;
      }
      .name-column span {
        background: #009fe8;
        padding: 4px 4px 2px 4px;
        color: #fff;
        border-radius: 2px;
        font-size: 13px;
      }

      .add-message-remark {
        background: #fff;
        border-radius: 10px;
        position: relative;
      }

      .add-message-remark-child {
        background: #fff;
        margin: 0 15px 15px 15px;
        border-radius: 5px;
        border: 1px solid rgba(224, 225, 226, 1);
      }

      .details-message {
        width: 100%;
        background: #fff;
      }

      .details-message-container {
        padding: 15px;
      }
      .details-message-child {
        padding: 15px;
      }

      .work-order-remarks {
        color: #2C3E50;
        font-size: 15px;
        font-weight: bold;
      }

      .remarkInfo {
        color: #232627;
      }

      .remarkInfo-message {
        background:rgba(236,240,241,1);
        border-radius:2px;
        display: flex;
      }
      .left-line-icon {
        background: #009FE8;
        width: 3px;
        margin: 8px 0;
      }
      .remarkInfo-message div:last-child {
        padding: 7.5px 0 7.5px 10px;
        color: #009FE8;
        /*font-weight: bold;*/
      }

      .more-icon {
        width: 20px;
        height: 20px;
        background: url('../../image/more.png') no-repeat;
        background-position: center;
        background-size: cover;
      }

      .img-item-two {
        position: relative;
        display: inline-block;
        width: 32%;
        margin: 6px 0 6px 6px;
      }

      .img-item-two img {
        z-index: 0;
        height: 27vw;
        width: 27vw;
        object-fit: cover;
        border-radius: 5px;
      }

      .notes-content {
        margin-top: 15px;
      }

      .position-photo-notes {
        padding: 15px;
      }
      /*position*/

      .flex-space {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }

      .flex-start {
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        align-items: center;
      }

      .ico-map {
        width: 25px;
        height: 25px;
        background: url('../../icon/position.png') no-repeat;
        background-position: center;
        background-size: cover;
      }

      .position-map {
        display: flex;
        align-items: center;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 50px;
        background: #F0F0F0;
        font-size: 14px;
        margin-top: 10px;
      }

      .map1 {
        color: #009fe8;
      }

      .map-name {
        width: 99%;
      }

      .names {
        width: 85%;
      }

      .names .map1 {
        width: 100%;
        padding-top: 3px;
        white-space: pre-wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .input-recode {
        border: dashed 1px rgba(200, 210, 222, 1);
        display: flex;
        flex-flow: wrap;
        align-items: center;
        line-height: 100%;
      }
      .postion-title {
        text-align: center;
      }
      .icon-img img {
        width: 60px;
        height: 60px;
        max-width: 28% !important;
        display: inline-block !important;
      }


    </style>
  </head>
  <body>
    <div class="api_layout" id="wordOrder_details">
      <!-- <div class="add-message-remark">
        <div style="height: 15px; width: 100%"></div>
        <div class="add-message-remark-child">
            <div class="position-photo-notes">
                <div class="postion-title">
                  <div style="text-align: center;" class="icon-img"><img src="../../icon/0001.png"></div>
                  <h1 class="work-order-remarks">目的地打卡</h4>
                  <div class="staff-message">
                    hahahahahhaha
                  </div>
                </div>
                <div class="add-msg-list">
                    <div onclick="addPositionNotes()">提交</div>
                </div>
        </div>
    </div>
    </div> -->
    </div>
  </body>
  <script type="text/template" id="template">
    {{? it.open_remark == 2}}
    <div class="add-message-remark">
        <div style="height: 15px; width: 100%"></div>
        <div class="add-message-remark-child">
            <!-- 是否定位 -->
            {{?it.open_gps == 1 && it.open_remark == 1}} {{=getLonLat(it.open_gps)}} {{?}}
            <!-- 定位信息 拍照  以及备注信息 -->
            <div class="position-photo-notes">
                <div class="postion-title">
                  <div class="icon-img"><img src="../../icon/0001.png"></div>
                  <div class="work-order-remarks">目的地打卡</div>
                  <div class="staff-message">
                    {{=it.staff}}
                  </div>
                </div>
                {{? it.open_gps == 1 && it.open_remark == 1}}
                <div class="position-content" id="position_warp"></div>
                {{?}}
                {{? it.open_gps == 1 && it.open_remark == 2}}
                <div class="position-map" onclick="openMaps('{{=it.longitude}}','{{=it.latitude}}')">
                    <div class="map-name flex-start">
                        <i class="ico-map"></i>
                        <div class="names">
                            <p class="map1">{{=it.address}}</p>
                        </div>
                    </div>
                    <p class="more-icon"></p>
                </div>
                {{?}}
                {{? it.open_remark == 1}}
                <div class="notes-content">
                    <div>
                        <div class="remarkInfo">备注内容：</div>
                        <textarea oninput="Oninput(this)" id="remark_information" class="column-textarea font-s column-textarea1" placeholder="请输入备注信息"></textarea>
                    </div>
                </div>
                {{?}}
                {{? it.open_remark == 2 && JSON.parse(it.remark_info).remarkInfo != ''}}
                <div class="notes-content">
                    <div class="remarkInfo-message">
                        <div class="left-line-icon"></div>
                        <div>备注信息</div>
                    </div>
                    <div style="padding-top: 10px;color: #232627;">
                        {{=JSON.parse(it.remark_info).remarkInfo}}
                    </div>
                </div>
                {{?}}
                <!-- {{? it.open_remark == 1}}
                <div class="modula img-warp">
                    <label class="remarkInfo">现场照片：</label>
                    <div class="text-input input-recode file-items-add img-items photoFile">
                        <div class="upload file-width" onclick="uploadImg('remote',this)">
                            <img src="../../image/upload.png" alt="">
                        </div>
                    </div>
                </div>
                {{?}} -->
                <!-- {{? it.open_remark == 2 && JSON.parse(it.remark_info).imageList.length > 0}}
                <div class="modula img-warp">
                    <label class="remarkInfo">现场照片：</label>
                    <div class="text-input input-recode file-items-add img-items photoFile">
                        {{ for (var i = 0; i
                        < JSON.parse(it.remark_info).imageList.length; i++) { }} <div class="img-dv img-item-two" onclick="browseImgTwo('{{=i}}','{{=JSON.parse(it.remark_info).imageList.toString()}}')">
                            <a href="javascript:;">
                                <img src="{{=JSON.parse(it.remark_info).imageList[i]}}">
                            </a>
                    </div>
                    {{ } }}
                </div>
            </div>
            {{?}}  -->
            {{? it.open_remark == 1}}
            <div class="add-msg-list">
                <div onclick="addPositionNotes()">提交</div>
            </div>
            {{?}}
        </div>
    </div>
    </div>
    {{?}}
    <div class="details-message">
      <div class="details-message-container">
        <div class="personalInfo">
          <div class="img-title">
            {{?it.staff_avatar === null}}
              <p class="staff_name" style="background:#{{=Math.random().toString(16).slice(2,8)}}">{{=it.staff.substr(it.staff.length-1,1)}}</p>
            {{??}}
              <img src="{{=it.staff_avatar}}" alt="" class="header-img">
            {{?}}
            <div>
                <span>{{=it.staff}}</span>
                <span>{{=it.section}}</span>
            </div>
          </div>
        </div>
        <ul class="itmes ">
          <!-- <li>
             <p>工单编号：</p>
             <p>#{{=it.id}}</p>
          </li>
          <li>
             <p>工单分类：</p>
             <p>{{=it.classify}}</p>
          </li> -->
          <li>
             <p>流程名称：</p>
             <p>{{=it.title}}</p>
          </li>
        </ul>
        <ul class="itmes ">
          {{ for (var i = 0;i<it.form.length;i++) { }}
            {{?it.form[i].type != 'images' && it.form[i].type != 'files'}}
              <li>
                 <p>{{=it.form[i].label}}：</p>
                 <p>{{=it.form[i].value}}</p>
              </li>
            {{?}}
          {{ } }}
        </ul>
        <div class="column-row">
          {{ for (var i = 0;i<it.form.length;i++) { }}
            {{?it.form[i].type == 'images' && it.form[i].value.length > 0}}
              <div class="column">
                  <label class="column-title">{{=it.form[i].label}}：</label>
                  <div class="aui-row aui-row-padded">
                      {{ for (var j = 0;j<it.form[i].value.length;j++) { }}
                        <div class="aui-col-xs-4">
                            <img src="{{=it.form[i].value[j]}}" class="colsImg" onload="setUpHeight(this)" onclick="browseImg('{{=it.form[i].value}}','{{=j}}')"/>
                        </div>
                      {{ } }}
                  </div>
              </div>
            {{??it.form[i].type == 'files' && it.form[i].value.length > 0}}
            <div class="column">
                <label class="column-title">{{=it.form[i].label}}：</label>
                <div class="aui-row aui-row-padded fileList">
                  {{ for (var j = 0;j<it.form[i].value.length;j++) { }}
                    {{?it.form[i].value[j].path.endsWith('docx') || it.form[i].value[j].path.endsWith('doc')}}
                      <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
                          <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png"/>
                          <span>{{=it.form[i].value[j].name}}</span>
                      </div>
                    {{??it.form[i].value[j].path.endsWith('pdf')}}
                      <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
                          <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png"/>
                          <span>{{=it.form[i].value[j].name}}</span>
                      </div>
                    {{??it.form[i].value[j].path.endsWith('ppt') || it.form[i].value[j].path.endsWith('ptx')}}
                      <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
                          <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png"/>
                          <span>{{=it.form[i].value[j].name}}</span>
                      </div>
                      {{??it.form[i].value[j].path.endsWith('zip') || it.form[i].value[j].path.endsWith('rar')}}
                        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}',true)">
                            <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png"/>
                            <span>{{=it.form[i].value[j].name}}</span>
                        </div>
                      {{??it.form[i].value[j].path.endsWith('xlsx')}}
                        <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
                            <img src="../../icon/{{=it.form[i].value[j].path.substr(it.form[i].value[j].path.length-3,3)}}.png"/>
                            <span>{{=it.form[i].value[j].name}}</span>
                        </div>
                      {{??}}
                      <div class="aui-col-xs-4" onclick="browseFile('{{=it.form[i].value[j].path}}')">
                          <img src="../../icon/OTHER.png"/>
                          <span>{{=it.form[i].value[j].name}}</span>
                      </div>
                    {{?}}
                  {{ } }}
                </div>
            </div>
            {{?}}
          {{ } }}
        </div>
        <div class="technologicals" style="margin-top:10px">
           <label class="column-title">固定审批流程：</label>
           <div class="technological-process">
             {{ for(var prop in it.flows) { }}
               <ul class="layui-timeline">
                   <li class="layui-timeline-item">
                       <img class="layui-timeline-item_top_img" src="{{=it.flows[prop].status == 2 ? '../../image/sureCircle.png' : (it.flows[prop].status == 3 ? '../../image/rejectCircle.png':'../../image/waitCircle.png')}} "></i>
                       <div class="layui-timeline-content layui-text">
                           <div class="layui-timeline-title">
                              <span>{{=it.flows[prop].flow_name}}：</span>
                              <div class="name-column">
                                {{ for (var j = 0;j<it.flows[prop].flow.length;j++) { }}
                                  <span>{{=it.flows[prop].flow[j]}}</span>
                                {{ } }}
                              </div>
                           </div>
                           <div class="remark layui-timeline-reamrk-text" style="border:1px solid {{=it.flows[prop].status == 2?'#4BC612':(it.flows[prop].status == 3?'red':'')}};display:{{=it.flows[prop].remark?'inline-block':'none'}};color:{{=it.flows[prop].status == 2 ? '#4BC612' : (it.flows[prop].status == 3 ? 'red' : '')}};">
                               {{=it.flows[prop].remark}}
                           </div>
                           {{? it.flows[prop].sign}}
                             <div class="signature_img_container">
                               <img class="signature_img" src="{{=it.flows[prop].sign}}" alt="">
                             </div>
                           {{?? it.flows[prop].sign && (it.flows[prop].sign == undefined || it.flows[prop].sign == null)}}
                             <div class="tips_items_signature" onclick="handleOpenSignature()">
                                 <div class="tips_signature">
                                     <img src="../../image/tips.png" alt="">
                                     <div>未添加手写签名，请添加手写签名。</div>
                                 </div>
                             </div>
                           {{?}}
                       </div>
                   </li>
                 </ul>

             {{ } }}
           </div>
        </div>
      </div>
    </div>
  </script>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/doT.min.js"></script>
  <script type="text/javascript" src="../../script/config.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript">
    var toast = new auiToast();
    apiready = function() {
      var info = $api.getStorage('data');
      token = JSON.parse(info).data.access_token;

      // 手机号绑定更新 -> 对应 wordorder/alreadyWordorderDetails.html
      api.addEventListener({
          name: 'updateUserInfoPhone'
      }, function(ret, err) {
          getApplyDe(api.pageParam.ID, token);
      });
      getApplyDe(api.pageParam.ID, token);
    };
    function getApplyDe(id, token) {
      var headers = {
        Authorization: 'Bearer ' + token,
      };
      $http.fnReuestData(
        UrlRouter.getAlreadyDe + id,
        headers,
        'get',
        '',
        function(ret, err) {
          if (ret.code === 0) {
            $apis.html(wordOrder_details, '#template', ret.data);
            if (ret.data.open_remark == 2) {
              $('.details-message-container').addClass('details-message-child');
            }
            toast.hide();
          } else {
            toast.hide();
          }
        }
      );
    }
    // 上传图片的高度
    function setUpHeight(that) {
      that.style.width = that.offsetWidth + 'px';
      that.style.height = that.offsetWidth + 'px';
    }
    //  上传图浏览
    function browseImg(data, i) {
      var imageBrowser = api.require('imageBrowser');
      imageBrowser.openImages({
        imageUrls: data.split(','),
        activeIndex: i,
        showList: false,
      });
    }
    // 上传文件在线浏览
    function browseFile(paths, flag) {
      api.download(
        {
          url: paths,
          report: true,
          cache: true,
          allowResume: true,
        },
        function(ret, err) {
          if (ret.state == 1) {
            if (!flag) {
              var superFile = api.require('superFile');
              superFile.open({path: ret.savePath});
            }
            setTimeout(function() {
              api.toast({
                msg: '下载成功',
                duration: 2000,
                location: 'top',
              });
            }, 100);
          } else {
          }
        }
      );
    }

    // 打开地图
    function openMaps(lon, lat) {
      $event.openTabLayout('map', '../browseQrcode/map', '', {
        lon: lon,
        lat: lat,
      });
    }

    // 图片浏览
    function browseImgTwo(i, value) {
      var imageBrowser = api.require('imageBrowser');
      imageBrowser.openImages({
        imageUrls: value.split(','),
        activeIndex: i,
        showList: false,
      });
    }

    // 手写签名页面
    function handleOpenSignature() {
      $event.openTabLayout('handwrittenSignature', '../personalData/handwrittenSignature', '手写签名', '')
    }

  </script>
</html>