materialsStorage.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  9. <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
  10. <link rel="stylesheet" href="../../css/projeck.css">
  11. <style>
  12. html,body{
  13. /*background: #FAFAFA;*/
  14. background: #FAFAFA;
  15. max-height: 100%
  16. }
  17. .get_materials_storage_list {
  18. margin: 70px 15px 0 15px;
  19. background: #fff;
  20. display: flex;
  21. flex-direction: row;
  22. flex-wrap: wrap;
  23. justify-content: space-around;
  24. border-radius: 5px;
  25. }
  26. .get_materials_storage_list_item {
  27. background: #fff;
  28. width: 30%;
  29. margin-top: 10px;
  30. display: flex;
  31. flex-flow: column;
  32. justify-content: flex-start;
  33. align-items: center;
  34. }
  35. .get_materials_storage_list_item img {
  36. width: 40px;
  37. height: 40px;
  38. border-radius: 40px;
  39. display: block;
  40. }
  41. .storage-name {
  42. width: 50px;
  43. padding-top: 5px;
  44. white-space: wrap; /*超出的空白区域不换行*/
  45. overflow: hidden; /*超出隐藏*/
  46. text-overflow: ellipsis; /*文本超出显示省略号*/
  47. }
  48. /*物资*/
  49. /*物资搜索输入框*/
  50. .api_seach_material{
  51. display: flex;
  52. padding: 0 15px;
  53. box-sizing: border-box;
  54. background: #f1f5f7;
  55. width: 90%;
  56. margin: auto;
  57. margin-top: 10px;
  58. justify-content: space-between;
  59. /*border-bottom: 1px solid #ebebeb;*/
  60. }
  61. .api_seach_material_box{
  62. height: auto;
  63. width: 100%;
  64. position: fixed;
  65. top: 0;
  66. left: 0;
  67. z-index: 1000;
  68. background: #fff;
  69. }
  70. .api_seach_material input{
  71. box-sizing: border-box;
  72. height: 44px;
  73. padding-left: 15px;
  74. border: none;
  75. outline: none;
  76. padding-right: 40px;
  77. -webkit-tap-highlight-color:rgba(0,0,0,0);
  78. -webkit-tap-highlight-color: transparent;
  79. }
  80. .right_api_seach {
  81. display: flex;
  82. align-items: center;
  83. width: 100px;
  84. color: #262626;
  85. }
  86. .api_seach_btn {
  87. padding-left: 15px;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <!-- 顶部搜索框 -->
  93. <div style="padding-bottom:10px;"class="api_seach_material_box relative after-borders">
  94. <div class="api_seach_material" id="api_seach_material">
  95. <input type="text" name="" value="" placeholder="请输入需要查询的物资" autofocus="autofocus" class="info" id="info_input">
  96. <div class="right_api_seach" onclick="getDepiction()">
  97. <div class="api_seach_meterial_line">
  98. |
  99. </div>
  100. <div class="api_seach_btn">
  101. 搜索
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <!-- 物资仓库 -->
  107. <div class="get_materials_storage_list relative after-borders" id='materials_storage_list'>
  108. </div>
  109. <div class="noText hide">
  110. <img src="../../image/noText.png" alt="">
  111. </div>
  112. </body>
  113. </html>
  114. <!-- 仓库页面 -->
  115. <script type="text/template" id="templateMaterialStorage">
  116. {{~it:value}}
  117. <div class="get_materials_storage_list_item" onclick="getMaterialClassify('{{=value.id}}')">
  118. <img src="{{=value.thumb}}">
  119. <div class="storage-name">{{=value.name}}</div>
  120. </div>
  121. {{~}}
  122. </script>
  123. <script type="text/javascript" src="../../script/api.js"></script>
  124. <script src="../../script/doT.min.js" charset="utf-8"></script>
  125. <script src="../../script/config.js" charset="utf-8"></script>
  126. <script type="text/javascript">
  127. </script>
  128. <script>
  129. var toast = new auiToast();
  130. apiready = function () {
  131. getMaterialStorageList();
  132. console.log('1212121212');
  133. }
  134. const getMaterialStorageList = (depiction) => {
  135. $http.fnReuestData(UrlRouter.getMaterialStorageList, '', 'get', '',handleMaterStorageCb);
  136. }
  137. const handleMaterStorageCb = (ret,err) => {
  138. if (ret.code === 0) {
  139. $apis.html(materials_storage_list,'#templateMaterialStorage',ret.data);
  140. toast.hide()
  141. } else {
  142. toast.hide()
  143. api.toast({
  144. msg: '获取信息失败',
  145. duration: 2000,
  146. location: 'top'
  147. });
  148. }
  149. }
  150. function getMaterialClassify (id) {
  151. let pageParams = {
  152. id: id
  153. }
  154. $event.openTabLayout('materialsClassify_win','materialsClassify_win','物资分类',pageParams);
  155. }
  156. function getDepiction() {
  157. const material_name = $api.val($api.byId('info_input'));
  158. let pageParams = {
  159. material_name: material_name
  160. }
  161. $api.val($api.byId('info_input'), '');
  162. $event.openTabLayout('materialsList','materialsList','物资列表',pageParams);
  163. }
  164. </script>