jifuning
/
yangchangwan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
							<!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/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        body{
          background: #FAFAFA;
        }
        /*物资*/
        /*物资搜索输入框*/
        .api_seach_material{
          display: flex;
          padding: 0 15px;
          box-sizing: border-box;
          background: #f1f5f7;
          width: 90%;
          margin: auto;
          margin-top: 10px;
          justify-content: space-between;
          /*border-bottom: 1px solid #ebebeb;*/
        }
        .api_seach_material_box{
          height: auto;
          width: 100%;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1000;
          background: #fff;
        }
        .api_seach_material input{
          box-sizing: border-box;
          height: 44px;
          /*width: 100%;*/
          padding-left: 15px;
          border: none;
          outline: none;
          padding-right: 40px;
          -webkit-tap-highlight-color:rgba(0,0,0,0);
          -webkit-tap-highlight-color: transparent;
        }
        .right_api_seach {
          display: flex;
          align-items: center;
          width: 100px;
          color: #262626;
        }
        .api_seach_btn {
          padding-left: 15px;
        }


        /*物资分类样式*/
        .get_materials_classify_list {
          margin-top: 70px;
        }
        .materials_classify_container {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding: 10px;
          margin: 10px 0 0 0;
          border-top: solid 1px #e8e8e8;
          border-bottom: solid 1px #e8e8e8;
          background: #fff;
        }
        /*.materials_classify_title {
          padding: 10px 0 0 10px;
          color: #1890ff;
          background: red;
        }*/
        .left_classify_id {
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          width: 50px;
          height: 50px;
          margin-left: 10px;
          border-radius: 50px;
          background: #009fe8;
          color: #fafafa;
        }

        .right_classify_title {
          margin-left: 50px;
          /*color: #009fe8;*/
        }
    </style>

</head>
<body>
  <!-- 顶部搜索框 -->
  <div style="padding-bottom:10px;"class="api_seach_material_box relative after-borders">
    <div class="api_seach_material" id="api_seach_material">
      <input type="text" name="" value="" placeholder="请输入需要查询的物资" autofocus="autofocus" class="info" id="info_input">
      <div class="right_api_seach" onclick="getDepiction()">
        <div class="api_seach_meterial_line">
          |
        </div>
        <div class="api_seach_btn">
          搜索
        </div>
     </div>
    </div>
  </div>
  <!-- 分类列表 -->
  <div class="get_materials_classify_list" id='materials_classify_list'>

  </div>
  <div class="noText hide">
    <img src="../../image/noText.png" alt="">
  </div>
</body>
</html>

<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/doT.min.js" charset="utf-8"></script>
<script src="../../script/config.js" charset="utf-8"></script>

<!-- 物资分类 -->
<script type="text/template" id="templateMaterialClassify">
   {{~it:value}}
     <div class="materials_classify_container" onclick="getMaterialsChidList('{{=value.id}}')">
       <div class="left_classify_id">
         <div class="classify_number">编号</div>
         <div class="classify_id">{{=value.id}}</div>
       </div>
       <div class="right_classify_title">
            {{=value.title}}
       </div>
     </div>
   {{~}}
</script>
<script>
  let toast = new auiToast();
  let storageValue
  apiready = function () {
    getMaterialsClassify()
    let storage = api.pageParam.id || '';
    storageValue = storage
    // console.log(JSON.stringify(storageValue));
  }

  const getMaterialsClassify = () => {
    $http.fnReuestData(UrlRouter.getMaterialClassifyList,'','get','',handleMaterClassifyCb)
  }
  const handleMaterClassifyCb = (ret,err) => {
    if (ret.code === 0) {
        $apis.html(materials_classify_list,'#templateMaterialClassify',ret.data);
        toast.hide()
    } else {
      toast.hide()
      api.toast({
          msg: '获取信息失败',
          duration: 2000,
          location: 'top'
      });
    }
  }
  const getDepiction = () => {
    const material_name = $api.val($api.byId('info_input'));
    let pageParams = {
      material_name: material_name,
      storage: storageValue
    }
    $api.val($api.byId('info_input'), '');
    $event.openTabLayout('materialsList','materialsList','物资列表',pageParams);
  }

  const getMaterialsChidList = (id) => {
      let pageParams = {
        classify: id || '',
        storage: storageValue
      }
      $event.openTabLayout('materialsList'+Math.random(),'materialsList','物资列表',pageParams);
  }
</script>