add.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增档案管理')" />
  5. <th:block th:include="include :: datetimepicker-css" />
  6. </head>
  7. <body class="white-bg">
  8. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  9. <form class="form-horizontal m" id="form-dangan-add">
  10. <div class="row">
  11. <div class="col-sm-6">
  12. <div class="form-group">
  13. <label class="col-sm-3 control-label is-required">系统名称:</label>
  14. <div class="col-sm-8">
  15. <input id="danganName" name="danganName" class="form-control" type="text" required>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="col-sm-6">
  20. <div class="form-group">
  21. <label class="col-sm-3 control-label is-required">系统状态:</label>
  22. <div class="col-sm-8">
  23. <select name="status" class="form-control m-b" th:with="type=${@dict.getType('sys_dangan_status')}" >
  24. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  25. </select>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="row">
  31. <div class="col-sm-6">
  32. <div class="form-group">
  33. <label class="col-sm-3 control-label is-required">系统编号:</label>
  34. <div class="col-sm-8">
  35. <input id="danganNo" name="danganNo" class="form-control" type="text" required>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="col-sm-6">
  40. <div class="form-group">
  41. <label class="col-sm-3 control-label is-required">系统私钥:</label>
  42. <div class="col-sm-8">
  43. <input id="keyId" name="keyId" class="form-control" type="text" required>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="row">
  49. <div class="col-sm-6">
  50. <div class="form-group">
  51. <label class="col-sm-3 control-label">系统负责人:</label>
  52. <div class="col-sm-8">
  53. <input name="sysPerson" class="form-control" type="text">
  54. </div>
  55. </div>
  56. </div>
  57. <div class="col-sm-6">
  58. <div class="form-group">
  59. <label class="col-sm-3 control-label">架构模式:</label>
  60. <div class="col-sm-8">
  61. <select name="mode" class="form-control m-b" th:with="type=${@dict.getType('sys_dangan_mode')}" >
  62. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  63. </select>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="row">
  69. <div class="col-sm-6">
  70. <div class="form-group">
  71. <label class="col-sm-3 control-label">类别:</label>
  72. <div class="col-sm-8">
  73. <input name="fileType" class="form-control" type="text">
  74. </div>
  75. </div>
  76. </div>
  77. <div class="col-sm-6">
  78. <div class="form-group">
  79. <label class="col-sm-3 control-label">型号/版本:</label>
  80. <div class="col-sm-8">
  81. <input name="model" class="form-control" type="text">
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="row">
  87. <div class="col-sm-6">
  88. <div class="form-group">
  89. <label class="col-sm-3 control-label">所属项目ID:</label>
  90. <div class="col-sm-8">
  91. <input name="projectId" class="form-control" type="text">
  92. </div>
  93. </div>
  94. </div>
  95. <div class="col-sm-6">
  96. <div class="form-group">
  97. <label class="col-sm-3 control-label">品牌:</label>
  98. <div class="col-sm-8">
  99. <input name="brand" class="form-control" type="text">
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="row">
  105. <div class="col-sm-6">
  106. <div class="form-group">
  107. <label class="col-sm-3 control-label">运行设备ID:</label>
  108. <div class="col-sm-8">
  109. <input name="runDeviceId" class="form-control" type="text">
  110. </div>
  111. </div>
  112. </div>
  113. <div class="col-sm-6">
  114. <div class="form-group">
  115. <label class="col-sm-3 control-label">关联设备ID:</label>
  116. <div class="col-sm-8">
  117. <input name="relateDeviceId" class="form-control" type="text">
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <div class="row">
  123. <div class="col-sm-6">
  124. <div class="form-group">
  125. <label class="col-sm-3 control-label">维护项目ID:</label>
  126. <div class="col-sm-8">
  127. <input name="maintainItemId" class="form-control" type="text">
  128. </div>
  129. </div>
  130. </div>
  131. <div class="col-sm-6">
  132. <div class="form-group">
  133. <label class="col-sm-3 control-label">厂家质保期:</label>
  134. <div class="col-sm-8">
  135. <input name="factoryTime" class="form-control" type="text">
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. <div class="row">
  141. <div class="col-sm-6">
  142. <div class="form-group">
  143. <label class="col-sm-3 control-label">项目质保期:</label>
  144. <div class="col-sm-8">
  145. <input name="projectTime" class="form-control" type="text">
  146. </div>
  147. </div>
  148. </div>
  149. <div class="col-sm-6">
  150. <div class="form-group">
  151. <label class="col-sm-3 control-label">使用单位:</label>
  152. <div class="col-sm-8">
  153. <input name="useUnit" class="form-control" type="text">
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. <div class="row">
  159. <div class="col-sm-6">
  160. <div class="form-group">
  161. <label class="col-sm-3 control-label">介质:</label>
  162. <div class="col-sm-8">
  163. <input name="medium" class="form-control" type="text">
  164. </div>
  165. </div>
  166. </div>
  167. <div class="col-sm-6">
  168. <div class="form-group">
  169. <label class="col-sm-3 control-label">维护时间:</label>
  170. <div class="col-sm-8">
  171. <div class="input-group">
  172. <input name="maintainTime" id="maintainTime" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
  173. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="row">
  180. <div class="col-sm-6">
  181. <div class="form-group">
  182. <label class="col-sm-3 control-label">认证页面地址:</label>
  183. <div class="col-sm-8">
  184. <input name="pageAddress" class="form-control">
  185. </div>
  186. </div>
  187. </div>
  188. <div class="col-sm-6">
  189. <div class="form-group">
  190. <label class="col-sm-3 control-label">系统状态检测地址:</label>
  191. <div class="col-sm-8">
  192. <input name="testAddress" class="form-control" type="text">
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. <div class="row">
  198. <div class="col-sm-6">
  199. <div class="form-group">
  200. <label class="col-sm-3 control-label">系统建设厂商:</label>
  201. <div class="col-sm-8">
  202. <input name="buildFactory" class="form-control" type="text">
  203. </div>
  204. </div>
  205. </div>
  206. <div class="col-sm-6">
  207. <div class="form-group">
  208. <label class="col-sm-3 control-label">建设时间:</label>
  209. <div class="col-sm-8">
  210. <div class="input-group date">
  211. <input name="buildFactoryTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
  212. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <div class="row">
  219. <div class="col-sm-6">
  220. <div class="form-group">
  221. <label class="col-sm-3 control-label">厂商负责人:</label>
  222. <div class="col-sm-8">
  223. <input name="factoryPerson" class="form-control" type="text">
  224. </div>
  225. </div>
  226. </div>
  227. <div class="col-sm-6">
  228. <div class="form-group">
  229. <label class="col-sm-3 control-label">厂商负责人电话:</label>
  230. <div class="col-sm-8">
  231. <input name="factoryPersonPhone" class="form-control" type="text">
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. <div class="row">
  237. <div class="col-sm-6">
  238. <div class="form-group">
  239. <label class="col-sm-3 control-label">开发语言:</label>
  240. <div class="col-sm-8">
  241. <input name="language" class="form-control" type="text">
  242. </div>
  243. </div>
  244. </div>
  245. <div class="col-sm-6">
  246. <div class="form-group">
  247. <label class="col-sm-3 control-label">部署服务器IP:</label>
  248. <div class="col-sm-8">
  249. <input name="serverIp" class="form-control" type="text">
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="row">
  255. <div class="col-sm-6">
  256. <div class="form-group">
  257. <label class="col-sm-3 control-label">服务器位置:</label>
  258. <div class="col-sm-8">
  259. <input name="serverLocation" class="form-control" type="text">
  260. </div>
  261. </div>
  262. </div>
  263. <div class="col-sm-6">
  264. <div class="form-group">
  265. <label class="col-sm-3 control-label">服务器配置信息:</label>
  266. <div class="col-sm-8">
  267. <input name="serverInfo" class="form-control" type="text">
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. <div class="row">
  273. <div class="col-sm-6">
  274. <div class="form-group">
  275. <label class="col-sm-3 control-label">是否专用服务器:</label>
  276. <div class="col-sm-8">
  277. <select name="serverBasedYesNo" class="form-control m-b" th:with="type=${@dict.getType('sys_dangan_yes_no')}" >
  278. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  279. </select>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="col-sm-6">
  284. <div class="form-group">
  285. <label class="col-sm-3 control-label">运维负责人:</label>
  286. <div class="col-sm-8">
  287. <input name="opsPerson" class="form-control" type="text">
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  292. <div class="row">
  293. <div class="col-sm-6">
  294. <div class="form-group">
  295. <label class="col-sm-3 control-label">主管单位:</label>
  296. <div class="col-sm-8">
  297. <input name="chargeUnit" class="form-control" type="text">
  298. </div>
  299. </div>
  300. </div>
  301. <div class="col-sm-6">
  302. </div>
  303. </div>
  304. <div class="row">
  305. <span style="padding-left: 30%!important;">
  306. ------------------------------------------------apply模块--------------------------------------------------
  307. </span>
  308. </div>
  309. <div class="row">
  310. <div class="col-sm-6">
  311. <div class="form-group">
  312. <label class="col-sm-3 control-label">apply图标:</label>
  313. <div class="col-sm-8">
  314. <input id="iconApp" name="iconApp" class="form-control" type="text" placeholder="选择图标">
  315. <div class="ms-parent" style="width: 100%;">
  316. <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
  317. <div data-th-include="system/dangan/icon"></div>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. <div class="row">
  325. <div class="col-sm-6">
  326. <div class="form-group">
  327. <label class="col-sm-3 control-label">apply类型:</label>
  328. <div class="col-sm-8">
  329. <select name="applyType" id="applyType" class="form-control m-b">
  330. <option value="-1" selected="selected">请选择</option>
  331. <option value="0">APP</option>
  332. <option value="1">H5</option>
  333. </select>
  334. </div>
  335. </div>
  336. </div>
  337. </div>
  338. <div class="row" id="appDiv" style="display: none">
  339. <div class="col-sm-6">
  340. <div class="form-group">
  341. <label class="col-sm-3 control-label">包名:</label>
  342. <div class="col-sm-8">
  343. <input name="packName" class="form-control">
  344. </div>
  345. </div>
  346. </div>
  347. <div class="col-sm-6">
  348. <div class="form-group">
  349. <label class="col-sm-3 control-label">模块名:</label>
  350. <div class="col-sm-8">
  351. <input name="modelName" class="form-control">
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. <div class="row" id="h5Div" style="display: none">
  357. <div class="col-sm-6">
  358. <div class="form-group">
  359. <label class="col-sm-3 control-label">H5_URL地址:</label>
  360. <div class="col-sm-8">
  361. <input name="hUrl" class="form-control">
  362. </div>
  363. </div>
  364. </div>
  365. </div>
  366. <div class="row">
  367. <span style="padding-left: 30%!important;">
  368. ------------------------------------------------APP模块--------------------------------------------------
  369. </span>
  370. </div>
  371. <div class="row">
  372. <div class="col-sm-6">
  373. <div class="form-group">
  374. <label class="col-sm-3 control-label">排序:</label>
  375. <div class="col-sm-8">
  376. <input class="form-control" type="number" name="ord" required>
  377. </div>
  378. </div>
  379. </div>
  380. <div class="col-sm-6">
  381. <div class="form-group">
  382. <label class="col-sm-3 control-label">菜单名:</label>
  383. <div class="col-sm-8">
  384. <input class="form-control" type="text" name="menuName">
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. <div class="row">
  390. <div class="col-sm-6">
  391. <div class="form-group">
  392. <input type="hidden" id="fileName" name="fileName">
  393. <input type="hidden" id="filePath" name="filePath">
  394. <label class="col-sm-3 control-label ">文档信息:</label>
  395. <div class="col-sm-8">
  396. <input id="file" name="file" class="form-control" type="file" onchange="uploadFile();" multiple >
  397. <div id="fileinfo">
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. <div class="col-sm-6">
  403. <div class="form-group">
  404. <input type="hidden" id="iconName" name="iconName">
  405. <input type="hidden" id="iconPath" name="iconPath">
  406. <label class="col-sm-3 control-label ">档案图标信息:</label>
  407. <div class="col-sm-8">
  408. <input id="icon" name="icon" class="form-control" type="file" onchange="uploadIcon();" multiple >
  409. <div id="iconinfo">
  410. </div>
  411. </div>
  412. </div>
  413. </div>
  414. </div>
  415. <div class="row">
  416. <div class="col-sm-12">
  417. <div class="form-group">
  418. <label class="col-sm-1 control-label">备注:</label>
  419. <div class="col-sm-9">
  420. <textarea name="remark" class="form-control" type="text"></textarea>
  421. </div>
  422. </div>
  423. </div>
  424. </div>
  425. </form>
  426. </div>
  427. <th:block th:include="include :: footer" />
  428. <th:block th:include="include :: datetimepicker-js" />
  429. <script th:inline="javascript">
  430. $(function() {
  431. $("input[name='iconApp']").focus(function() {
  432. $(".icon-drop").show();
  433. });
  434. $("#form-dangan-add").click(function(event) {
  435. var obj = event.srcElement || event.target;
  436. if (!$(obj).is("input[name='iconApp']")) {
  437. $(".icon-drop").hide();
  438. }
  439. });
  440. $(".icon-drop").find(".ico-list i").on("click", function() {
  441. let className = $(this).attr('class');
  442. $('#iconApp').val((className+"").replace("icon iconfont ",""));
  443. });
  444. $('input').on('ifChecked', function(event){
  445. var menuType = $(event.target).val();
  446. if (menuType == "M") {
  447. $("#iconApp").parents(".form-group").show();
  448. $("#target").parents(".form-group").hide();
  449. $("input[name='visible']").parents(".form-group").show();
  450. $(".is-refresh").hide();
  451. } else if (menuType == "C") {
  452. $("#iconApp").parents(".form-group").show();
  453. $("#target").parents(".form-group").show();
  454. $("input[name='visible']").parents(".form-group").show();
  455. $(".is-refresh").show();
  456. } else if (menuType == "F") {
  457. $("#iconApp").parents(".form-group").hide();
  458. $("#target").parents(".form-group").hide();
  459. $("input[name='visible']").parents(".form-group").hide();
  460. $(".is-refresh").hide();
  461. }
  462. });
  463. });
  464. $("#applyType").change(function () {
  465. let applyTypeValue = $(this).val();
  466. if(applyTypeValue===0||applyTypeValue==="0"){
  467. $("#appDiv").show();
  468. $("#h5Div").hide();
  469. }else if(applyTypeValue===1||applyTypeValue==="1"){
  470. $("#appDiv").hide();
  471. $("#h5Div").show();
  472. }else{
  473. $("#appDiv").hide();
  474. $("#h5Div").hide();
  475. }
  476. });
  477. var prefix = ctx + "system/dangan"
  478. $("#form-dangan-add").validate({
  479. onkeyup: false,
  480. rules:{
  481. danganName:{
  482. remote: {
  483. url: prefix + "/checkDanganNameUnique",
  484. type: "post",
  485. dataType: "json",
  486. data: {
  487. "danganName": function() {
  488. return $.common.trim($("#danganName").val());
  489. }
  490. },
  491. dataFilter: function(data, type) {
  492. return $.validate.unique(data);
  493. }
  494. }
  495. }
  496. },
  497. messages: {
  498. "danganName": {
  499. remote: "档案名称已经存在"
  500. },
  501. },
  502. focusCleanup: true
  503. });
  504. layui.use('laydate', function() {
  505. var laydate = layui.laydate;
  506. laydate.render({
  507. elem: '#maintainTime',
  508. type: 'datetime',
  509. trigger: 'click'
  510. });
  511. });
  512. function uploadFile(){
  513. var formData = new FormData();
  514. if ($('#file')[0].files[0] == null || $('#file')[0].files[0]==undefined) {
  515. $.modal.alertWarning("请先选择文件路径");
  516. return false;
  517. }
  518. // var this_1= document.getElementById('file');
  519. // var files = this_1.files;
  520. //
  521. // for (var i = 0, len = files.length; i < len; i++) {
  522. // formData.append('files', files[i]);
  523. // }
  524. // 将文件装入FormData对象
  525. formData.append("file",$('#file')[0].files[0]);
  526. $.ajax({
  527. url: ctx + "common/upload",
  528. type: 'post',
  529. cache: false,
  530. data: formData,
  531. processData: false,
  532. contentType: false,
  533. dataType: "json",
  534. success: function(result) {
  535. console.log(result);
  536. if(result.code == '0'){
  537. $("#fileName").val(result.fileName);
  538. $("#filePath").val(result.url);
  539. var fileArr = new Array();
  540. var fileNames =result.fileName;
  541. if(null!=fileNames && fileNames.length>0){
  542. $("#fileinfo").empty();
  543. fileArr = fileNames.split(",");
  544. for(var i=0;i<fileArr.length;i++){
  545. var html = "";
  546. html = "<input type='text' value='"+fileArr[i]+"' class='form-control' style='border: none;' readonly>";
  547. $("#fileinfo").append(html);
  548. }
  549. }
  550. }
  551. }
  552. });
  553. }
  554. function uploadIcon(){
  555. var formData = new FormData();
  556. if ($('#icon')[0].files[0] == null || $('#icon')[0].files[0]==undefined) {
  557. $.modal.alertWarning("请先选择文件路径");
  558. return false;
  559. }
  560. // var this_1= document.getElementById('file');
  561. // var files = this_1.files;
  562. //
  563. // for (var i = 0, len = files.length; i < len; i++) {
  564. // formData.append('files', files[i]);
  565. // }
  566. // 将文件装入FormData对象
  567. formData.append("file",$('#icon')[0].files[0]);
  568. $.ajax({
  569. url: ctx + "common/upload",
  570. type: 'post',
  571. cache: false,
  572. data: formData,
  573. processData: false,
  574. contentType: false,
  575. dataType: "json",
  576. success: function(result) {
  577. console.log(result);
  578. if(result.code == '0'){
  579. $("#iconName").val(result.fileName);
  580. $("#iconPath").val(result.url);
  581. var fileArr = new Array();
  582. var fileNames =result.fileName;
  583. if(null!=fileNames && fileNames.length>0){
  584. $("#iconinfo").empty();
  585. fileArr = fileNames.split(",");
  586. for(var i=0;i<fileArr.length;i++){
  587. var html = "";
  588. html = "<input type='text' value='"+fileArr[i]+"' class='form-control' style='border: none;' readonly>";
  589. $("#iconinfo").append(html);
  590. }
  591. }
  592. }
  593. }
  594. });
  595. }
  596. function submitHandler() {
  597. if ($.validate.form()) {
  598. $.operate.save(prefix + "/add", $('#form-dangan-add').serialize());
  599. }
  600. }
  601. $("input[name='buildFactoryTime']").datetimepicker({
  602. format: "yyyy-mm-dd",
  603. minView: "month",
  604. autoclose: true
  605. });
  606. </script>
  607. </body>
  608. </html>