jifuning
/
xinxi_zhongxin_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
							<!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{
            padding: 15px;
        }
        .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-axis {
            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 {
            position: relative;
            margin-bottom: 10px;
            display: flex;
            justify-content: flex-start;
        }
        .remark{
          padding: 2px 3px;
          border-radius: 2px;
          display: none;
        }
        /******/
        .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: 3px;
            color: #fff;
            border-radius: 2px;
            font-size: 13px;
        }
        /*.message-section-staff,
        .message-id-time {
          display: flex;
        }*/
	</style>
</head>
<body>
  <div class="api_layout" id="wordOrder_details">

  </div>
</body>
<script type="text/template" id="template">
    <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'}}
          <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">
                   <i class="{{=it.flows[prop].status == 2?'aui-iconfont aui-icon-correct Correct':(it.flows[prop].status == 3?'aui-iconfont aui-icon-close closes':'Correct')}} layui-timeline-axis"></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="layui-timeline-title remark" style="border:1px solid {{=it.flows[prop].status == 2?'#5FB878':(it.flows[prop].status == 3?'red':'')}};display:{{=it.flows[prop].remark?'inline-block':'none'}}">
                            {{=it.flows[prop].remark}}
                       </div>
                   </div>
               </li>
             </ul>
         {{ } }}
       </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">
   var toast = new auiToast()
    apiready = function(){
      var info = $api.getStorage('data');
      token = JSON.parse(info).data.access_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);
          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 {

          }
      });
    }
</script>
</html>