searchFile_frm.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  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" href="../../css/projeck.css">
  10. <style>
  11. /*title*/
  12. .title{
  13. padding: 10px;
  14. position: relative;
  15. font-size: 12px;
  16. color: #8a8a8a;
  17. display: flex;
  18. justify-content:flex-start;
  19. align-items: center;
  20. overflow: hidden;
  21. }
  22. .title:after{
  23. content: "";
  24. position: absolute;
  25. bottom: 0;
  26. left: 10px;
  27. width: 100%;
  28. height: 1px;
  29. background: #dbdbdb;
  30. }
  31. .title_icon{
  32. width: 15px;
  33. height: 15px;
  34. background: url("../../icon/file_icon.png") center no-repeat;
  35. background-size: cover;
  36. margin-right: 5px;
  37. }
  38. /*文件列表*/
  39. .cloud_list li{
  40. padding: 10px 14px;
  41. display: flex;
  42. justify-content: flex-start;
  43. align-items: center;
  44. flex-wrap: nowrap;
  45. color: #2C3E50;
  46. position: relative;
  47. }
  48. .img_text{
  49. display: flex;
  50. justify-content: flex-start;
  51. align-items: center;
  52. flex-wrap: nowrap;
  53. width: 86%;
  54. }
  55. .file_name_sizes{
  56. width: 82%;
  57. }
  58. .cloud_list li img{
  59. width: 40px;
  60. height: 40px;
  61. margin-right: 13px;
  62. }
  63. .file_name{
  64. font-size: 14px;
  65. margin-bottom: 3px;
  66. overflow: hidden;
  67. text-overflow: ellipsis;
  68. white-space: nowrap;
  69. }
  70. .file_size_time{
  71. color: #9C9FA5;
  72. font-size: 13px;
  73. }
  74. .file_tool{
  75. width: 15px;
  76. height: 15px;
  77. background: url("../../image/more.png") center no-repeat;
  78. background-size: cover;
  79. position: absolute;
  80. top: 27.5px;
  81. right: 14px;
  82. }
  83. .file_tool1{
  84. width: 25px;
  85. height: 25px;
  86. background: url("../../icon/tool.png") center no-repeat;
  87. background-size: cover;
  88. position: absolute;
  89. top: 17.5px;
  90. right: 14px;
  91. }
  92. </style>
  93. </head>
  94. <body>
  95. <div class="api_layout">
  96. <!-- 文件列表-->
  97. <div class="cloud_lists" id="cloud_lists"></div>
  98. </div>
  99. <!-- 下载 -->
  100. <a href="javascript:;" id="upload_file"></a>
  101. </body>
  102. </html>
  103. <script type="text/template" id="templateSearch">
  104. <!-- title-->
  105. <div class="title">
  106. <i class="title_icon"></i>
  107. 文件/文件夹
  108. </div>
  109. <!-- 文件列表-->
  110. {{~it:value:index}}
  111. <ul class="cloud_list">
  112. {{? value.filetype === '0'}}
  113. <li>
  114. <div class="img_text" onclick="openFolderContent('{{=value.filename}}','{{=value.id}}')">
  115. <img src="../../icon/file.png" alt="">
  116. <div class="file_name_sizes">
  117. <p class="file_name">{{=value.filename}}</p>
  118. <p class="file_size_time">{{=value.createtime}}</p>
  119. </div>
  120. </div>
  121. <i class="file_tool" onclick="openTool('{{=value.id}}','{{=value.filename}}')"></i>
  122. </li>
  123. {{??}}
  124. <li>
  125. <div class="img_text">
  126. <img src="{{=value.fileicon}}" alt="">
  127. <div class="file_name_sizes">
  128. <p class="file_name">{{=value.filename}}</p>
  129. <p class="file_size_time">{{=value.createtime}} {{=value.filesizename}}</p>
  130. </div>
  131. </div>
  132. <i class="file_tool1" onclick="openTool('{{=value.id}}','{{=value.filename}}','{{=value.filetype}}')"></i>
  133. </li>
  134. {{?}}
  135. </ul>
  136. {{~}}
  137. </script>
  138. <script type="text/javascript" src="../../script/api.js"></script>
  139. <script type="text/javascript" src="../../script/doT.min.js"></script>
  140. <script type="text/javascript" src="../../script/zepto.js"></script>
  141. <script src="../../script/config.js" charset="utf-8"></script>
  142. <script type="text/javascript">
  143. var token ='',filenames= ''
  144. apiready = function() {
  145. token = api.pageParam.token
  146. }
  147. function searchFileList(filename) {
  148. filenames = filename
  149. var params = {
  150. filename,
  151. page: 1,
  152. limit: 1000,
  153. token
  154. }
  155. $http.requestShowProgress(UrlRouter.fileSearch,'post',params)
  156. .then(ret=>{
  157. if (ret.code === 0) {
  158. $apis.html(cloud_lists,'#templateSearch',ret.rows);
  159. }
  160. })
  161. .catch(err=>{})
  162. }
  163. // open文件夹
  164. function openFolderContent(name,id) {
  165. $event.openTabLayout('cloudDiskDe'+Math.random(),'cloudDiskDe',name,{id,token:token});
  166. }
  167. function openTool(id,name,type) {
  168. var Toolname = type == '0' ? ['重命名']:['下载','重命名']
  169. api.actionSheet({
  170. title: '操作',
  171. cancelTitle: '取消',
  172. destructiveTitle: '删除',
  173. buttons: Toolname
  174. }, function(ret, err) {
  175. var index = ret.buttonIndex;
  176. if (index === 1) {
  177. api.confirm({
  178. title: '确定删除文件?',
  179. msg: '',
  180. buttons: ['确定', '取消']
  181. }, function(ret, err) {
  182. if (ret.buttonIndex === 1) {
  183. deleteFolder(id,name)
  184. }
  185. })
  186. }else if (index === 2) {
  187. if (type != 0) {
  188. mergeFilesNew(id,name)
  189. }else {
  190. renameFolder(id,name,type)
  191. }
  192. }
  193. else if (index === 3) {
  194. if (type != 0) {
  195. renameFolder(id,name,type)
  196. }
  197. }
  198. });
  199. }
  200. // 删除文件或文件夹
  201. function deleteFolder(id,name) {
  202. var params = {
  203. ids: [{id,name}],
  204. token:token
  205. }
  206. $http.requestShowProgress(UrlRouter.delete,'post',params)
  207. .then(ret=>{
  208. if (ret.code === 0) {
  209. api.toast({
  210. msg: '删除成功',
  211. duration: 2000,
  212. location: 'top'
  213. })
  214. searchFileList(filenames)
  215. }else {
  216. api.toast({
  217. msg: '删除失败',
  218. duration: 2000,
  219. location: 'top'
  220. })
  221. }
  222. })
  223. .catch(err=>{
  224. api.toast({
  225. msg: '网络错误,请检查网络!',
  226. duration: 2000,
  227. location: 'top'
  228. })
  229. })
  230. }
  231. // 下载文件 图片
  232. function mergeFilesNew(id) {
  233. var uploadFileElm= $('#upload_file')
  234. api.confirm({
  235. title: '提示',
  236. msg: '是否下载文件',
  237. buttons: ['确定', '取消']
  238. }, function(ret, err) {
  239. var index = ret.buttonIndex;
  240. if (index === 1) {
  241. uploadFileElm.attr('href',`${UrlRouter.download}fileid=${id}&token=${token}`)
  242. uploadFileElm.attr('download',`${UrlRouter.download}fileid=${id}&token=${token}`)
  243. uploadFileElm.click();
  244. }
  245. });
  246. }
  247. // 重命名
  248. function renameFolder(id,name,type) {
  249. var filename = name
  250. fileType = name.substring(name.lastIndexOf('.'))
  251. if (type != 0) {
  252. filename = name.substring(0,name.lastIndexOf('.'))
  253. }
  254. api.prompt({
  255. title: '修改文件名称',
  256. buttons: ['确定', '取消'],
  257. text: filename
  258. }, function(ret, err) {
  259. var text = ret.text;
  260. if (ret.buttonIndex === 1) {
  261. rename(id,ret.text,fileType)
  262. }
  263. });
  264. }
  265. function rename(id,filename,fileType) {
  266. var type = fileType
  267. if (fileType.indexOf('.') != 0 ) {
  268. type = ''
  269. }
  270. var params = {
  271. id,
  272. filename:filename+type,
  273. token,
  274. }
  275. $http.requestShowProgress(UrlRouter.rename,'post',params)
  276. .then(ret=>{
  277. if (ret.code === 0) {
  278. api.toast({
  279. msg: '修改成功',
  280. duration: 2000,
  281. location: 'top'
  282. })
  283. searchFileList(filenames)
  284. }else {
  285. api.toast({
  286. msg: '修改失败',
  287. duration: 2000,
  288. location: 'top'
  289. })
  290. }
  291. })
  292. .catch(err=>{
  293. api.toast({
  294. msg: '网络错误,请检查网络!',
  295. duration: 2000,
  296. location: 'top'
  297. })
  298. })
  299. }
  300. </script>