jifuning
/
ximeichang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
							<!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;
        }
        .column-title{
            display: block;
            font-size: 15px;
            color: #97a3b4;
            margin-bottom: 10px;
        }
        input::placeholder{
            font-size: 14px;
            color: #333;
        }
        .api_layout .font-s{
            font-size: 14px;
        }
        .api_layout .input-s{
            height: 40px;
            border: 1px solid #97a3b4;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding-left: 10px;
        }
        .aui-list-item-input1{
            position: relative;
        }
        .aui-list-item-input1:after{
            content:"";
            border-left:5px solid transparent;
            border-right:5px solid transparent;
            border-bottom:5px solid #b3c0ce;
            -webkit-transform-origin:5px 2.5px;
            transform-origin:5px 2.5px;
            -webkit-transition: all .5s ease;
            transition: all .5s ease;
            position:absolute;
            right:10px;
            top:18px;
            -webkit-transform:rotate(180deg);
            transform:rotate(180deg);
        }
        .column-textarea{
            border: 1px solid #97a3b4;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 10px;
            height: 160px;
        }
        .column-textarea::placeholder{
            font-size: 14px;
            color: #333;
        }
        .aui-row{
            border: 1px dashed #c8d2de;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            padding: 10px;
        }
        .technological-process{
            margin-top: 10px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .col{
            color: red;
            font-size: 14px;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding-right: 10px;
            /*width: 25%;*/
        }
        .name{
            border: 1px solid red;
            display: block;
            padding: 3px 6px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin-bottom: 5px;
        }
        .name:last-child{
            margin-bottom: 0;
        }
        .ico-j{
            display: block;
            width: 15px;
            height: 15px;
            background: url("../../image/Arrow.png") no-repeat;
            background-size: contain;
            margin-left: 10px;
        }
        .col:last-child{
            padding-right: 0;
        }
        .col:last-child .ico-j{
            display: none;
        }
        .technologicals{
          margin-bottom: 20px;
        }
        .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;
        }
        .imgParent img{
          width: 104px;
          height: 104px;
          border-radius: 5px;
        }
        .api-toast{
        	width: 100%;
        	height: 100%;
        	position: fixed;
        	top: 0;
        	left: 0;
        	background: rgba(0,0,0,.5);
        }
	</style>
</head>
<body>
  <div class="api_layout">
      <div class="column-row" id="column_row">
        <!-- <div class="column">
            <label class="column-title">选择：</label>
            <div class="aui-list-item-input1">
                <select class="input-select font-s input-s" name="xuanze">
                    <option value="">请选择</option>
                    <option value="你好">你好</option>
                </select>
            </div>
        </div>
        <div class="column">
            <label class="column-title">申请部门：</label>
            <div class="aui-list-item-input1">
                <select class="input-select font-s input-s" name="xuanze1">
                    <option value="">请选择</option>
                    <option value="你好1">你好1</option>
                </select>
            </div>
        </div> -->
        <div class="column">
            <label class="column-title">上传文件：</label>
            <div class="aui-row aui-row-padded">
                <div class="aui-col-xs-4" id="upload">
                    <img src="../../image/upload.png"/>
                    <input type="file" name="" value="" onchange="uploadFile()">
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../image/demo.png"/>
                </div>
                <div class="aui-col-xs-4">
                    <img src="../../image/demo.png"/>
                </div>
            </div>
        </div>
    </div>
    <div class="technologicals" id="technologicals">
       <!-- <label class="column-title">固定审批流程：</label>
       <div class="technological-process">
           <div class="col">
               <div class="name_list">
                   <span class="name">张三你</span>
               </div>
               <i class="ico-j"></i>
           </div>
           <div class="col">
               <div class="name_list">
                   <span class="name">张三你</span>
                   <span class="name">张三</span>
               </div>
               <i class="ico-j"></i>
           </div>
           <div class="col">
               <div class="name_list">
                   <span class="name">张三你</span>
               </div>
               <i class="ico-j"></i>
           </div>
       </div> -->
    </div>
    <div class="aui-btn aui-btn-info aui-btn-block" onclick="submitInfo()">
      提交
    </div>
  </div>
</body>
<script type="text/template" id="template">
{{ for (var i = 0;i<it.length;i++) { }}
    {{? it[i].type == 'input'}}
      <div class="column">
         <label class="column-title">{{=it[i].label}}：</label>
         <input type="text" name="{{=it[i].name}}" value="" placeholder="请输入{{=it[i].label}}" class="inputBox colimn-input input-s font-s">
      </div>
    {{?? it[i].type == 'radio'}}
      <div class="column">
        <label class="column-title">{{=it[i].label}}：</label>
        <div class="aui-list-item-input radioName" name="{{=it[i].name}}" data-info>
          {{ for(var j=0;j<it[i].select.length;j++) { }}
              <label><input class="aui-radio" type="radio" name="{{=it[i].name}}" value="{{=it[i].select[j]}}" onchange="radioFun(this)">{{=it[i].select[j]}}</label>
          {{ } }}
        </div>
      </div>
    {{?? it[i].type == 'checkbox'}}
      <div class="column">
        <label class="column-title">{{=it[i].label}}：</label>
        <div class="aui-list-item-input checkboxName" name={{=it[i].name}} data-info>
          {{ for(var j=0;j<it[i].select.length;j++) { }}
              <label><input class="aui-checkbox" type="checkbox" name="{{=it[i].name}}" value="{{=it[i].select[j]}}" onchange="checkboxFun(this)">{{=it[i].select[j]}}</label>
          {{ } }}
        </div>
      </div>
    {{?? it[i].type == 'textarea'}}
      <div class="column">
          <label class="column-title">{{=it[i].label}}：</label>
          <textarea name="{{=it[i].name}}" rows="8" cols="80" class="column-textarea font-s column-textarea1" placeholder="请输入{{=it[i].label}}"></textarea>
      </div>
    {{?? it[i].type == 'select'}}
      <div class="column">
          <label class="column-title">选择：</label>
          <div class="aui-list-item-input1">
              <select class="input-select font-s input-s" name="{{=it[i].name}}">
                  <option value="">请选择</option>
                  {{ for(var j=0;j<it[i].select.length;j++) { }}
                      <option value="{{=it[i].select[j]}}">{{=it[i].select[j]}}</option>
                  {{ } }}
              </select>
          </div>
      </div>
    {{?? it[i].type == 'images'}}
      <div class="column">
          <label class="column-title">{{=it[i].label}}：</label>
          <div class="aui-row aui-row-padded uploadImg" data-info name="{{=it[i].name}}">
              <div class="aui-col-xs-4 imgParent" onclick="actionSheetFun(this)" data-url='{{=it[i].url}}'>
                  <img src="../../image/upload.png"/>
              </div>
          </div>
      </div>
    {{?? it[i].type == 'files'}}
      <div class="column">
          <label class="column-title">{{=it[i].label}}：</label>
          <div class="aui-row aui-row-padded uploadFile" data-info name="{{=it[i].name}}">
              <div class="aui-col-xs-4" onclick="browseFile()" data-url='{{=it[i].url}}'>
                  <img src="../../image/upload.png"/>
              </div>
          </div>
      </div>
    {{?}}
{{ } }}
</script>
<script type="text/template" id="templateApply">
    <label class="column-title">固定审批流程：</label>
    <div class="technological-process">
      {{ for(var prop in it) { }}
          <div class="col">
              <div class="name_list">
                {{ for (var j = 0;j<it[prop].length;j++) { }}
                  <span class="name">{{=it[prop][j].name}}</span>
                {{ } }}
              </div>
              <i class="ico-j"></i>
          </div>
      {{ } }}
    </div>
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script src="../../script/Hammer.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript">
   var toast = new auiToast(),token;
   var UIAlbumBrowser;
   var i = 0;
   var imgarr = [];
   var id = ""
    apiready = function(){
      var info = $api.getStorage('data');
      token = JSON.parse(info).data.access_token;
      id = api.pageParam.id;
      getApplyDe(api.pageParam.id,token);
       UIAlbumBrowser = api.require('UIAlbumBrowser');
    };
    function getApplyDe(id,token) {
      var headers = {
          "Authorization": "Bearer " + token
      };
      $http.fnReuestData(UrlRouter.getApplyD+id,headers,'get','',function (ret,err) {
        toast.hide();
        api.setTabLayoutAttr({
            title: ret.data.title
        });
        console.log(JSON.stringify(ret));
        $apis.append(column_row,'#template',ret.data.form);
        $apis.append(technologicals,'#templateApply',ret.data.flow);
      })
    }
    function approValPesonal() {
      api.openFrame({
          name: 'approvalPersonal',
          bounces: false,
          url: 'approvalPersonal.html',
          bgColor:'rgba(0,0,0,.6)',
          rect: {
              x: 0,
              y: 0,
              w: api.winWidth,
              h: 'auto',
          },
          // pageParam: {
          //     username: name,
          //     mobile:phone,
          //     avatar:img,
          //     delp:del
          // }
      });
    }
    // 上传图片
    var headImg;
    // function actionSheetFun() {
    //     api.actionSheet({
    //         title: '选择',
    //         cancelTitle: '取消',
    //         buttons: ['相机','相册']
    //     }, function(ret, err) {
    //         if (ret.buttonIndex !=3) {
    //             var type = 'camera';
    //             if(ret.buttonIndex == 1){
    //                 type = 'camera';
    //             }else {
    //                 type = 'album';
    //             }
    //             api.getPicture({
    //                 sourceType: type
    //             }, function(ret, err){
    //                 if(ret){
    //                     uploadHead(ret.data)
    //                     headImg = ret.data;
    //                 }
    //             });
    //         }
    //     });
    // }
    function actionSheetFun(el) {
        api.actionSheet({
            title: '选择',
            cancelTitle: '取消',
            buttons: ['相机','相册']
        }, function(ret, err) {
            if (ret.buttonIndex !=3) {
                var type = 'camera';
                if(ret.buttonIndex == 1){
                    type = 'camera';
                    api.getPicture({
                        sourceType: type
                    }, function(ret, err){
                        if(ret && ret.data!=""){
                            uploadHead(el,ret.data);
                        }
                    });
                }else {
                    type = 'album';
                    // 支持多图片上传，UIAlbumBrowser模块获取图片路径
                    changeImageUrl(el)
                }
            }
        });
    }
    // upload img
    function uploadHead(el,imgUrl){
        var uploadUrl = $api.attr(el, 'data-url');
        toast.loading({
            title: "上传中",
            duration: 2000
        });
        console.log(imgarr,'imgarr1');
        api.ajax({
            url: urlphp+uploadUrl,
            method: 'post',
            headers : {
                "Authorization": "Bearer " + token,
            },
            data: {
                files: {
                    image:imgUrl
                }
            }
        },function(ret, err){
            if (ret) {
                toast.hide();
                if(ret.code === 0){
                  var data = JSON.stringify(ret.data)
                  var html = `<div class="aui-col-xs-4 imgParent" data-imgData="${data}" onclick="delImg(this)">
                               <img src="${ret.data.path}"/>
                             </div>`;
                   var getAttribute = el.parentNode.getAttribute('data-info');
                   var dataInfo = getAttribute+',,'+JSON.stringify(ret.data)
                   el.parentNode.setAttribute('data-info',dataInfo);
                    $api.append(el.parentNode,html);
                    api.toast({
                        msg: '上传成功',
                        duration: 2000,
                        location: 'top'
                    });
                }else {
                    api.toast({
                        msg: '上传失败',
                        duration: 2000,
                        location: 'top'
                    });
                }
            } else {
                toast.hide();
                api.toast({
                    msg: '网络错误',
                    duration: 2000,
                    location: 'top'
                });
            }
        });

    }
    // radio
    function radioFun(el) {
        var value = el.value;
        if(el.checked){
            el.parentNode.parentNode.setAttribute('data-info',value);
        }
    }
    // chexkbox
    function checkboxFun(el) {
      var value = el.value;
      if(el.checked){
          var getAttribute = el.parentNode.parentNode.getAttribute('data-info').split(',');
          getAttribute.push(value);
          el.parentNode.parentNode.setAttribute('data-info',getAttribute);
      }else {
          var getAttribute = el.parentNode.parentNode.getAttribute('data-info').split(',');
          getAttribute.remove(value);
        el.parentNode.parentNode.setAttribute('data-info',getAttribute);
      }
    }
    // 选择图片库路径
    function changeImageUrl(el) {
      UIAlbumBrowser.imagePicker({
        max: 9,
        styles: {
            bg: '#000000',
            //cameraImg: 'widget://res/cameraImg.png',
            mark: {
                position: 'top_right',
                size: 20
            },
            nav: {
                bg: '#000000',
                cancelColor: '#fff',
                cancelSize: 16,
                nextStepColor: '#7fff00',
                nextStepSize: 16
            },
            thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。
                w: 100, //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
                h: 100 //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
            }
        },
          animation: true,
          }, function(ret) {
              if (ret.eventType == 'nextStep') {
                  if (ret.list && ret.list.length > 0) {
                      imgarr = ret.list;
                      UIAlbumBrowser_transPath(el);
                  }
                  UIAlbumBrowser.closePicker();
              }
              if (ret.originalPath && ret.originalPath.length > 0) {
                  uploadHead(el,ret.originalPath)
              }
      });
    }
    // 转换缩略图路径 ios
    function UIAlbumBrowser_transPath(el) {
        UIAlbumBrowser.transPath({
            path: imgarr[i].path
        }, function(ret, err) {
            if (ret) {
                i++;
                if (i < imgarr.length) {
                    UIAlbumBrowser_transPath(el);
                } else {
                    i = 0;
                }
                uploadHead(el,ret.path)
            }
        });
    }
    // 长安删除图片或者文件
    // var hammertime = new Hammer(document.getElementsByClassName('Longpress'));
    // hammertime.on('press', function(ev) {
    //     console.log(JSON.stringify(ev));
    // });
    // 上传文件
   function uploadFile(el,fileUrl) {
     var uploadUrl = $api.attr(el, 'data-url');
     console.log(uploadUrl,'uploadUrl');
     api.ajax({
         url: urlphp+'api/worksheet/design/up_files',
         method: 'post',
         headers : {
             "Authorization": "Bearer " + token,
         },
         data: {
             files: {
                 file:fileUrl
             }
         }
     },function(ret, err){
       console.log(JSON.stringify(ret));
         if (ret) {
             toast.hide();
             if(ret.code === 0){
                 api.toast({
                     msg: '上传成功',
                     duration: 2000,
                     location: 'top'
                 });
             }else {
                 api.toast({
                     msg: '上传失败',
                     duration: 2000,
                     location: 'top'
                 });
             }
         } else {
             toast.hide();
             api.toast({
                 msg: '网络错误',
                 duration: 2000,
                 location: 'top'
             });
         }
     });
   }
    // 浏览文件,获取文件路径
    function browseFile(el) {
      // var fileBrowser = api.require('fileBrowser');
      // fileBrowser.skin({
      //     skin:0,
      // });
      // fileBrowser.open(function(ret) {
      //     if (ret) {
      //         console.log(JSON.stringify(ret));
      //         uploadFile(el,ret.url)
      //         fileBrowser.close();
      //     }
      // });
      var selectFile = api.require('selectFile');
        selectFile.open(function(ret, err){
            if(ret.status){
              uploadFile(el,ret.path)
                alert(JSON.stringify(ret.path));
            }else{
                alert('选择文件不存在');
            }
        });
    }
    // 提交工单信息
    function submitInfo() {
      var sss = {path:'../../image',nameImg:'soasjoa'};
      var data = JSON.stringify(sss)
      var html = `<div class="aui-col-xs-4 imgParent" data-imgData="${data}" onclick="delImg(this)">
                   <img src="../../image/demo.png"/>
                 </div>`;
       document.getElementById('upload').parentNode.;

      var headers = {
          "Authorization": "Bearer " + token
      };
      var inputBoxArray= [],inputBoxObject = {id:id,otherFlow:[]},inputBox = $api.domAll('.inputBox'),inputSelect = $api.domAll('.input-select'),
      checkboxName = document.querySelectorAll('.checkboxName'),radioName = $api.domAll('.radioName'),uploadImg = $api.domAll('.uploadImg'),columnTextarea = $api.domAll('.column-textarea');
      // 文本框
        for (var i = 0; i < inputBox.length;i++){
            var key = $api.attr(inputBox[i],'name'), value = $api.val(inputBox[i]);
            inputBoxObject[key] = value
            // console.log(JSON.stringify(inputBoxObject));
        }
        // 文本域
        for (var i = 0; i < columnTextarea.length;i++){
            var key = $api.attr(columnTextarea[i],'name'), value = $api.val(columnTextarea[i]);
            inputBoxObject[key] = value
            // console.log(JSON.stringify(inputBoxObject));
        }
        // 下拉选择
        for (var j = 0; j < inputSelect.length; j++) {
          var key = $api.attr(inputSelect[j],'name'), value = $api.val(inputSelect[j]);
          inputBoxObject[key] = value;
        }
        // 单选
        for (var k = 0; k < radioName.length; k++) {
          var val = $api.attr(radioName[k],'data-info'),key = $api.attr(radioName[k],'name');
          inputBoxObject[key] = val;
        }
        // 多选
        for (var t = 0; t < checkboxName.length; t++) {
          var value =checkboxName[t].getAttribute('data-info'),key = checkboxName[t].getAttribute('name');
            console.log(value.split(',').slice(1).join(','),'value')
            inputBoxObject[key] = value.split(',').slice(1).join(',');
        }
        // img
        for (var i = 0; i < uploadImg.length; i++) {
         var value = $api.attr(uploadImg[i],'data-info'),key = $api.attr(uploadImg[i],'name');
         var imageArr = [];
         for (var j = 0; j < value.split(',,').slice(1).length; j++) {
             imageArr.push(JSON.parse(value.split(',,').slice(1)[j]))
         }
         console.log(imageArr)
         inputBoxObject[key] = imageArr;
       }
        console.log(JSON.stringify(inputBoxObject));
      // $http.fnReuestDataJSON(UrlRouter.submitApply,headers,'post',inputBoxObject,function (ret,err) {
      //     toast.hide()
      //     if (ret.code === 0) {
      //       api.toast({
      //           msg: '提交成功',
      //           duration: 2000,
      //           location: 'top'
      //       });
      //     }
      //     console.log(JSON.stringify(ret));
      //     console.log(JSON.stringify(err));
      // })
      $event.openWin('myWordeOrder_win','myWordeOrder_win','','');
    };
    // 删除图片
    function delImg(el) {
      var Imgdata = el.getAttribute('data-imgData');
      console.log(JSON.stringify(Imgdata))
    }
    function uploadFile() {
        
    }
</script>
</html>