baobiao-tools.html 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7. <title>报表定制-计量支付SAAS</title>
  8. <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
  9. <link rel="stylesheet" href="css/main.css">
  10. <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
  11. <!--zTree-->
  12. <link rel="stylesheet" href="css/ztree/zTreeStyle.css" type="text/css">
  13. </head>
  14. <body>
  15. <div class="wrapper">
  16. <div class="top-bar">
  17. <div class="logo">
  18. <a>计量支付SAAS后台</a>
  19. </div>
  20. <div class="nav d-flex justify-content-between">
  21. <h4 class="title"><i class="fa fa-wrench"></i> 工具 / 报表定制 / 通用报表</h4>
  22. <div class="dropdown mt-3">
  23. <button class="btn btn-success btn-sm"><i class="fa fa-save"></i> 保存</button>
  24. <a class="btn btn-primary btn-sm" target="_blank" href=""><i class="fa fa-eye"></i> 预览</a>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="aside">
  29. <div class="user-info">
  30. <div class="user-img"><img src="img/avatar-1.jpg"></div>
  31. <h5>admin</h5>
  32. <ul class="min-menu">
  33. <li><a href="user-profile.html"><i class="fa fa-cog"></i></a></li>
  34. <li><a href="login.html"><i class="fa fa-power-off"></i></a></li>
  35. </ul>
  36. </div>
  37. <div class="menu" id="menu">
  38. <li>
  39. <a href="index.html">
  40. <i class="fa fa-dashboard"></i>控制面板
  41. </a>
  42. </li>
  43. <li>
  44. <a href="javascript:void(0);">
  45. <i class="fa fa-users"></i>客户管理<i class="fa fa-angle-down menu-arrow"></i>
  46. </a>
  47. <ul class="sub-menu">
  48. <li><a href="com-list.html">企业版客户</a></li>
  49. </ul>
  50. <ul class="sub-menu">
  51. <li><a href="poj-list.html">项目版客户</a></li>
  52. </ul>
  53. <ul class="sub-menu">
  54. <li><a href="preview-list.html">演示版客户</a></li>
  55. </ul>
  56. </li>
  57. <li>
  58. <a href="news.html">
  59. <i class="fa fa-bell"></i>通知管理</i>
  60. </a>
  61. </li>
  62. <li class="active">
  63. <a href="javascript:void(0);">
  64. <i class="fa fa-wrench"></i>工具<i class="fa fa-angle-down menu-arrow"></i>
  65. </a>
  66. <ul class="sub-menu">
  67. <li><a href="jlguifan.html">计价规范</a></li>
  68. <li><a href="xiangmu.html">项目节</a></li>
  69. <li><a href="qingdan.html">工程量清单</a></li>
  70. <li><a href="bgqingdan.html">台帐模板</a></li>
  71. <li><a href="baobiao.html">报表定制</a></li>
  72. </ul>
  73. </li>
  74. <li>
  75. <a href="javascript:void(0);">
  76. <i class="fa fa-cog"></i>系统管理<i class="fa fa-angle-down menu-arrow"></i>
  77. </a>
  78. <ul class="sub-menu">
  79. <li><a href="permission.html">权限管理</a></li>
  80. </ul>
  81. </li>
  82. <li>
  83. <a href="javascript:void(0);">
  84. <i class="fa fa-user"></i>后台用户<i class="fa fa-angle-down menu-arrow"></i>
  85. </a>
  86. <ul class="sub-menu">
  87. <li><a href="manager.html">用户列表</a></li>
  88. <li><a href="group.html">权限组</a></li>
  89. </ul>
  90. </li>
  91. </div>
  92. </div>
  93. <div class="content-page container-fluid">
  94. <div class="row">
  95. <div class="col-lg-12">
  96. <div class="card-box p-2">
  97. <!--内容-->
  98. <div class="row">
  99. <!--侧栏-->
  100. <div class="col-3">
  101. <div class="tab-bar">
  102. <div class="input-group input-group-sm">
  103. <input type="text" class="form-control" placeholder="输入报表名进行检索" aria-label="Recipient's username" aria-describedby="button-addon2">
  104. <div class="input-group-append">
  105. <button class="btn btn-outline-secondary" type="button" id="button-addon2"><i class="fa fa-search"></i></button>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="tab-content">
  110. <ul id="treeDemo" class="ztree"></ul>
  111. </div>
  112. </div>
  113. <!--右栏-->
  114. <div class="col-9">
  115. <ul class="nav nav-tabs tools-bar px-1" role="tablist">
  116. <li class="nav-item">
  117. <a class="nav-link active" data-toggle="tab" href="#mbxx" role="tab">模板信息</a>
  118. </li>
  119. <li class="nav-item">
  120. <a class="nav-link" data-toggle="tab" href="#mbbj" role="tab">模板布局</a>
  121. </li>
  122. <li class="nav-item">
  123. <a class="nav-link" data-toggle="tab" href="#zbys" role="tab">指标映射</a>
  124. </li>
  125. <li class="nav-item">
  126. <a class="nav-link" data-toggle="tab" href="#zbbf" role="tab">指标摆放</a>
  127. </li>
  128. <li class="nav-item">
  129. <a class="nav-link" data-toggle="tab" href="#sjcl" role="tab">数据预处理</a>
  130. </li>
  131. <li class="nav-item">
  132. <a class="nav-link" data-toggle="tab" href="#jss" role="tab">计算式</a>
  133. </li>
  134. <li class="nav-item">
  135. <a class="nav-link" data-toggle="tab" href="#mbdx" role="tab">模板JS对象</a>
  136. </li>
  137. </ul>
  138. <div class="tab-content">
  139. <!--模板信息-->
  140. <div class="tab-pane active" id="mbxx" role="tabpanel">
  141. <div class="main-data">
  142. <div class="p-3">
  143. <div class="form-group">
  144. <label>报表名称</label>
  145. <input class="form-control form-control-sm" placeholder="输入报表名称">
  146. </div>
  147. <div class="form-group">
  148. <label>页面</label>
  149. <div class="row">
  150. <div class="input-group input-group-sm col-4">
  151. <div class="input-group-prepend"><span class="input-group-text">纸张</span></div>
  152. <select class="form-control input-sm"><option>A3</option><option>A4</option></select>
  153. </div>
  154. <div class="input-group input-group-sm col-4">
  155. <div class="input-group-prepend"><span class="input-group-text">方向</span></div>
  156. <select class="form-control input-sm"><option>横向</option><option>竖向</option></select>
  157. </div>
  158. <div class="input-group input-group-sm col-4">
  159. <div class="input-group-prepend"><span class="input-group-text">单位</span></div>
  160. <select class="form-control input-sm"><option>CM</option></select>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="form-group">
  165. <label>显示调整</label>
  166. <div class="row">
  167. <div class="input-group input-group-sm col-4">
  168. <div class="input-group-prepend"><span class="input-group-text">分栏</span></div>
  169. <select class="form-control input-sm"><option>1</option><option>2</option></select>
  170. </div>
  171. </div>
  172. </div>
  173. <div class="row">
  174. <div class="form-group col-4">
  175. <label>显示行-高度</label>
  176. <input class="form-control form-control-sm">
  177. </div>
  178. <div class="form-group col-4">
  179. <label>显示列 - 宽度</label>
  180. <input class="form-control form-control-sm">
  181. </div>
  182. </div>
  183. </div>
  184. <!--图标-->
  185. <div class="p-3">
  186. <p><i class="icon zyfont zy-ic_format_bold"></i>粗体 / <i class="icon zyfont zy-ic_format_italic"></i>斜体 / <i class="icon zyfont zy-ic_format_underlined"></i>下划线 </p>
  187. <p><i class="icon zyfont zy-ic_format_align_left"></i>左对齐 / <i class="icon zyfont zy-ic_format_align_center"></i>中对齐 / <i class="icon zyfont zy-ic_format_align_right"></i>右对齐</p>
  188. <p><i class="icon zyfont zy-ic_vertical_align_top"></i>上对齐 / <i class="icon zyfont zy-ic_vertical_align_center"></i>中对齐 / <i class="icon zyfont zy-ic_vertical_align_bottom"></i>下对齐</p>
  189. <p><i class="icon zyfont zy-ic_border_outer"></i> 外侧框线 / <i class="icon zyfont zy-ic_border_clear"></i> 无框线 / <i class="icon zyfont zy-ic_border_left"></i> 左框线 / <i class="icon zyfont zy-ic_border_top"></i> 上框线 / <i class="icon zyfont zy-ic_border_right"></i> 右框线 / <i class="icon zyfont zy-ic_border_bottom"></i> 下框线 </p>
  190. <p> <i class="icon zyfont zy-ic_format_shapes"></i>缩放(Shrink) / <i class="icon zyfont zy-ic_exposure_zero"></i>显示0 / <i class="icon zyfont zy-ic_wrap_text"></i>自动折行(Wrap)</p>
  191. </div>
  192. <!--图标-->
  193. </div>
  194. </div>
  195. <!--模板布局-->
  196. <div class="tab-pane" id="mbbj" role="tabpanel">
  197. <div class="main-data">
  198. <div class="p-3">
  199. <div class="ztree-warp" style="height:300px">
  200. ztree 保留空间
  201. </div>
  202. <div class="row mt-5">
  203. <div class="form-group col-3">
  204. <label>边框样式</label>
  205. <select class="form-control form-control-sm"><option>空白</option></select>
  206. </div>
  207. <div class="form-group col-2">
  208. <label>位置</label>
  209. <select class="form-control form-control-sm"><option>上</option></select>
  210. </div>
  211. <div class="form-group col-3">
  212. <label>出现频率</label>
  213. <select class="form-control form-control-sm"><option>每页</option></select>
  214. </div>
  215. <div class="form-group col-2">
  216. <label>高度</label>
  217. <input class="form-control form-control-sm">
  218. </div>
  219. <div class="form-group col-2">
  220. <label>宽度</label>
  221. <input class="form-control form-control-sm">
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <!--指标映射-->
  228. <div class="tab-pane" id="zbys" role="tabpanel">
  229. <div class="main-data">
  230. <div class="p-3">
  231. <div class="row">
  232. <div class="col-6">
  233. <span>报表映射指标(勾选表示:主从关系的ID关联指标)</span>
  234. <div class="ztree-warp" style="height:400px">
  235. ztree 保留空间
  236. </div>
  237. </div>
  238. <div class="col-6">
  239. <span>可映射指标</span>
  240. <div class="ztree-warp" style="height:400px">
  241. ztree 保留空间
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. <!--指标摆放-->
  249. <div class="tab-pane" id="zbbf" role="tabpanel">
  250. <div class="main-data">
  251. <div class="p-3">
  252. <div class="row">
  253. <div class="col-6">
  254. <div class="ztree-warp" style="height:300px">
  255. ztree 保留空间
  256. </div>
  257. </div>
  258. <div class="col-6">
  259. <div class="row">
  260. <div class="col-12">
  261. <div class="ztree-warp" style="height:110px">
  262. ztree 保留空间
  263. </div>
  264. </div>
  265. <div class="col-12 mt-4">
  266. <div class="ztree-warp" style="height:160px">
  267. ztree 保留空间
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  273. <div class="row mt-3">
  274. <div class="form-group col-2">
  275. <label>字体选择</label>
  276. <input class="form-control form-control-sm" type="text">
  277. </div>
  278. <div class="form-group col-2">
  279. <label>字体名称</label>
  280. <input class="form-control form-control-sm" type="text">
  281. </div>
  282. <div class="form-group col-2">
  283. <label>字体大小</label>
  284. <input class="form-control form-control-sm" type="text">
  285. </div>
  286. <div class="form-group col-3">
  287. <label>字体其他特性</label>
  288. <div class="form-check">
  289. <label class="form-check-label">
  290. <input type="checkbox" class="form-check-input">
  291. 粗体
  292. </label>
  293. <label class="form-check-label">
  294. <input type="checkbox" class="form-check-input">
  295. 斜体
  296. </label>
  297. <label class="form-check-label">
  298. <input type="checkbox" class="form-check-input">
  299. 下划线
  300. </label>
  301. </div>
  302. </div>
  303. </div>
  304. <div class="row">
  305. <div class="form-group col-2">
  306. <label>边框样式</label>
  307. <select class="form-control form-control-sm"><option>正常</option></select>
  308. </div>
  309. <div class="form-group col-2">
  310. <label>左边</label>
  311. <input class="form-control form-control-sm">
  312. </div>
  313. <div class="form-group col-2">
  314. <label>右边</label>
  315. <input class="form-control form-control-sm">
  316. </div>
  317. <div class="form-group col-2">
  318. <label>上边</label>
  319. <input class="form-control form-control-sm">
  320. </div>
  321. <div class="form-group col-2">
  322. <label>下边</label>
  323. <input class="form-control form-control-sm">
  324. </div>
  325. </div>
  326. <div class="row">
  327. <div class="form-group col-2">
  328. <label>控制选择</label>
  329. <select class="form-control form-control-sm"><option>正文内容</option></select>
  330. </div>
  331. <div class="form-group col-2">
  332. <label>横向对齐</label>
  333. <select class="form-control form-control-sm"><option>右</option></select>
  334. </div>
  335. <div class="form-group col-2">
  336. <label>纵向对齐</label>
  337. <select class="form-control form-control-sm"><option>下</option></select>
  338. </div>
  339. <div class="form-group col-3">
  340. <label>控制其他特性</label>
  341. <div class="form-check">
  342. <label class="form-check-label">
  343. <input class="form-check-input" type="checkbox">
  344. 自动缩放
  345. </label>
  346. <label class="form-check-label">
  347. <input class="form-check-input" type="checkbox">
  348. 显示0
  349. </label>
  350. <label class="form-check-label">
  351. <input class="form-check-input" type="checkbox">
  352. 自动折行
  353. </label>
  354. </div>
  355. </div>
  356. </div>
  357. <div class="row">
  358. <div class="form-group col">
  359. <label>左</label>
  360. <div class="input-group input-group-sm">
  361. <div class="input-group-prepend"><span class="input-group-text">
  362. <div class="form-check m-0">
  363. <label class="form-check-label">
  364. <input class="form-check-input mt-1" type="checkbox">
  365. 百分比
  366. </label>
  367. </div>
  368. </span>
  369. </div>
  370. <input class="form-control" type="number">
  371. </div>
  372. </div>
  373. <div class="form-group col">
  374. <label>右</label>
  375. <div class="input-group input-group-sm">
  376. <div class="input-group-prepend"><span class="input-group-text">
  377. <div class="form-check m-0">
  378. <label class="form-check-label">
  379. <input class="form-check-input mt-1" type="checkbox">
  380. 百分比
  381. </label>
  382. </div>
  383. </span>
  384. </div>
  385. <input class="form-control" type="number">
  386. </div>
  387. </div>
  388. <div class="form-group col">
  389. <label>上</label>
  390. <div class="input-group input-group-sm">
  391. <div class="input-group-prepend"><span class="input-group-text">
  392. <div class="form-check m-0">
  393. <label class="form-check-label">
  394. <input class="form-check-input mt-1" type="checkbox">
  395. 百分比
  396. </label>
  397. </div>
  398. </span>
  399. </div>
  400. <input class="form-control" type="number">
  401. </div>
  402. </div>
  403. <div class="form-group col">
  404. <label>下</label>
  405. <div class="input-group input-group-sm">
  406. <div class="input-group-prepend"><span class="input-group-text">
  407. <div class="form-check m-0">
  408. <label class="form-check-label">
  409. <input class="form-check-input mt-1" type="checkbox">
  410. 百分比
  411. </label>
  412. </div>
  413. </span>
  414. </div>
  415. <input class="form-control" type="number">
  416. </div>
  417. </div>
  418. <div class="form-group col-2">
  419. <label></label>
  420. <div class="form-check">
  421. <label class="form-check-label">
  422. <input class="form-check-input" type="checkbox">
  423. 自动行高
  424. </label>
  425. </div>
  426. </div>
  427. </div>
  428. <div class="row">
  429. <div class="form-group col-2">
  430. <label>前缀</label>
  431. <input class="form-control form-control-sm">
  432. </div>
  433. <div class="form-group col-2">
  434. <label>后缀</label>
  435. <input class="form-control form-control-sm">
  436. </div>
  437. <div class="form-group col-2">
  438. <label>格式</label>
  439. <input class="form-control form-control-sm">
  440. </div>
  441. <div class="form-group col-2">
  442. <label>默认值</label>
  443. <input class="form-control form-control-sm">
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. <!--数据预处理-->
  450. <div class="tab-pane" id="sjcl" role="tabpanel">
  451. <div class="main-data">
  452. <div class="p-3">
  453. <div class="row">
  454. <div class="col-12">
  455. <a class="btn btn-primary btn-sm mb-1" href="#"><i class=" fa fa-plus-square"></i> 预处理环节</a>
  456. </div>
  457. <div class="col-6">
  458. <div class="ztree-warp" style="height:180px">
  459. ztree 保留空间
  460. </div>
  461. </div>
  462. <div class="col-6">
  463. <div class="ztree-warp" style="height:180px">
  464. ztree 保留空间
  465. </div>
  466. </div>
  467. </div>
  468. <div class="row mt-3">
  469. <div class="input-group input-group-sm col-4">
  470. <div class="input-group-prepend"><span class="input-group-text">预处理数据对象</span></div>
  471. <select class="form-control input-sm" id="select_mapping_data" onchange="preHandleObj.onChangeDataMappingObj(this, 'top')">
  472. <option value="bills">清单</option><option value="ration">定额</option><option value="ration_glj">定额人材机</option><option value="projectGLJ">项目人材机</option></select>
  473. </div>
  474. <div class="input-group input-group-sm col-4">
  475. <div class="input-group-prepend"><span class="input-group-text">排序方式</span></div>
  476. <select class="form-control input-sm" id="select_sort_types" onchange="preHandleSortObj.onSortTypeChange(this)">
  477. <option value="normal">普通</option>
  478. <option value="tree">树结构</option>
  479. <option value="accord_to_parent">依据上级</option>
  480. <option value="self_define">自定义排序</option>
  481. </select>
  482. </div>
  483. </div>
  484. <div class="row mt-3">
  485. <div class="col-6">
  486. <span clas="mb-1">清单顶节点(全空白表示全部)</span>
  487. <div class="ztree-warp" style="height:180px">
  488. ztree 保留空间
  489. </div>
  490. </div>
  491. <div class="col-6">
  492. <span clas="mb-1">清单其他节点(全空白表示全部)</span>
  493. <div class="ztree-warp" style="height:180px">
  494. ztree 保留空间
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. <!--计算式-->
  502. <div class="tab-pane" id="jss" role="tabpanel">
  503. <div class="main-data">
  504. <div class="p-3">
  505. <div class="row">
  506. <div class="col-12">
  507. <span class="mb-1">计算式</span>
  508. <div class="ztree-warp" style="height:140px">
  509. ztree 保留空间
  510. </div>
  511. </div>
  512. </div>
  513. <div class="row mt-3">
  514. <div class="col-4">
  515. <div class="input-group input-group-sm">
  516. <select class="form-control"><option>转换大小写金额</option></select>
  517. <span class="input-group-btn">
  518. <button class="btn btn-primary btn-sm" type="button">套用</button>
  519. </span>
  520. </div>
  521. </div>
  522. </div>
  523. <div class="row mt-3">
  524. <div class="form-group col-3">
  525. <label>计算式执行点</label>
  526. <select class="form-control form-control-sm"><option>预运行</option></select>
  527. </div>
  528. <div class="form-group col-3">
  529. <label>格式串(format)</label>
  530. <input class="form-control form-control-sm">
  531. </div>
  532. <div class="form-group col-12">
  533. <textarea class="form-control" rows="8"></textarea>
  534. </div>
  535. </div>
  536. </div>
  537. </div>
  538. </div>
  539. <!--模板JS对象-->
  540. <div class="tab-pane" id="mbdx" role="tabpanel">
  541. <div class="main-data">
  542. <div class="p-3">
  543. <div class="mb-3">
  544. <a href="#" class="btn btn-sm btn-primary">生成JS文本</a>
  545. <a href="#" class="btn btn-sm btn-primary">导入JS文本</a>
  546. </div>
  547. <div class="form-group">
  548. <textarea class="form-control" rows="21"></textarea>
  549. </div>
  550. </div>
  551. </div>
  552. </div>
  553. </div>
  554. </div>
  555. </div>
  556. <!--内容-->
  557. </div>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. <!--弹出定制报表-->
  563. <div class="modal fade" id="group" data-backdrop="static">
  564. <div class="modal-dialog" role="document">
  565. <div class="modal-content">
  566. <div class="modal-header">
  567. <h5 class="modal-title">报表组</h5>
  568. </div>
  569. <div class="modal-body">
  570. <div class="input-group input-group-sm mb-3">
  571. <input type="text" class="form-control" placeholder="输入组名添加" aria-label="Recipient's username" aria-describedby="button-addon2">
  572. <div class="input-group-append">
  573. <button class="btn btn-primary" type="button" id="button-addon2">添加新组</button>
  574. </div>
  575. </div>
  576. <table class="table table-bordered">
  577. <tr><th>报表组名</th><th>报表</th><th>创建时间</th><th>操作</th></tr>
  578. <tr><td>土建报表</td><td>13</td><td>2018-11-01</td><td><a href="#">编辑</a></td></tr>
  579. <tr><td>绿化报表</td><td>17</td><td>2018-11-02</td><td><a href="#">编辑</a></td></tr>
  580. <tr><td>XX报表</td><td>0</td><td>2018-11-02</td><td><a href="#">编辑</a> <a href="#" class="text-danger">删除</a></td></tr>
  581. <tr><td colspan="3"><input type="text" class="form-control form-control-sm" value="YYY报表"></td><td><a href="#">确认</a> <a href="#" class="text-muted">取消</a></td></tr>
  582. </table>
  583. </div>
  584. <div class="modal-footer">
  585. <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. <!--弹出删除-->
  591. <div class="modal fade" id="addpoj" data-backdrop="static">
  592. <div class="modal-dialog" role="document">
  593. <div class="modal-content">
  594. <div class="modal-header">
  595. <h5 class="modal-title">添加项目</h5>
  596. </div>
  597. <div class="modal-body">
  598. <div class="form-group">
  599. <label for="exampleInputEmail1">项目编号</label>
  600. <input type="text" class="form-control" placeholder="输入项目编号添加">
  601. </div>
  602. <div class="form-group">
  603. <label for="exampleInputEmail1">项目编号</label>
  604. <input type="text" class="form-control is-invalid" placeholder="输入项目编号添加" value="KJ129">
  605. <div class="invalid-feedback">项目不存在</div>
  606. </div>
  607. </div>
  608. <div class="modal-footer">
  609. <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  610. <button type="button" class="btn btn-primary " >确认</button>
  611. </div>
  612. </div>
  613. </div>
  614. </div>
  615. </body>
  616. <script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
  617. <script src="js/popper/popper.min.js" type="text/javascript"></script>
  618. <script src="js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
  619. <script src="js/main.js" type="text/javascript"></script>
  620. <!-- zTree -->
  621. <script type="text/javascript" src="js/ztree/jquery.ztree.core.js"></script>
  622. <script type="text/javascript" src="js/ztree/jquery.ztree.excheck.js"></script>
  623. <!--弹出模板类型-->
  624. <script type="text/javascript">
  625. $('#myModal').modal('show')
  626. </script>
  627. <!-- 演示zTree -->
  628. <SCRIPT type="text/javascript">
  629. <!--
  630. var setting = {
  631. view: {
  632. showIcon: false
  633. },
  634. data: {
  635. simpleData: {
  636. enable: true
  637. }
  638. }
  639. };
  640. var zNodes =[
  641. { id:1, pId:0, name:"父节点1 - 展开", open:true},
  642. { id:11, pId:1, name:"父节点11 - 折叠"},
  643. { id:111, pId:11, name:"叶子节点111叶子节点111叶子节点111叶子节点111叶子节点111叶子节点111"},
  644. { id:112, pId:11, name:"叶子节点112"},
  645. { id:113, pId:11, name:"叶子节点113"},
  646. { id:114, pId:11, name:"叶子节点114"},
  647. { id:12, pId:1, name:"父节点12 - 折叠"},
  648. { id:121, pId:12, name:"叶子节点121"},
  649. { id:122, pId:12, name:"叶子节点122"},
  650. { id:123, pId:12, name:"叶子节点123"},
  651. { id:124, pId:12, name:"叶子节点124"},
  652. { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
  653. { id:2, pId:0, name:"父节点2 - 折叠"},
  654. { id:21, pId:2, name:"父节点21 - 展开", open:true},
  655. { id:211, pId:21, name:"叶子节点211"},
  656. { id:212, pId:21, name:"叶子节点212"},
  657. { id:213, pId:21, name:"叶子节点213"},
  658. { id:214, pId:21, name:"叶子节点214"},
  659. { id:22, pId:2, name:"父节点22 - 折叠"},
  660. { id:221, pId:22, name:"叶子节点221"},
  661. { id:222, pId:22, name:"叶子节点222"},
  662. { id:223, pId:22, name:"叶子节点223"},
  663. { id:224, pId:22, name:"叶子节点224"},
  664. { id:23, pId:2, name:"父节点23 - 折叠"},
  665. { id:231, pId:23, name:"叶子节点231"},
  666. { id:232, pId:23, name:"叶子节点232"},
  667. { id:233, pId:23, name:"叶子节点233"},
  668. { id:234, pId:23, name:"叶子节点234"},
  669. { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
  670. ];
  671. function showIconForTree(treeId, treeNode) {
  672. return !treeNode.isParent;
  673. };
  674. $(document).ready(function(){
  675. $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  676. });
  677. //-->
  678. </SCRIPT>
  679. </html>