training.html 92 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>
  6. 培训班-纵横CLD v2.0
  7. </title>
  8. <meta name="description" content="Page Titile">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
  11. <!-- Call App Mode on ios devices -->
  12. <meta name="apple-mobile-web-app-capable" content="yes" />
  13. <!-- Remove Tap Highlight on Windows Phone IE -->
  14. <meta name="msapplication-tap-highlight" content="no">
  15. <!-- base css -->
  16. <link rel="stylesheet" media="screen, print" href="css/vendors.bundle.css">
  17. <link rel="stylesheet" media="screen, print" href="css/app.bundle.css">
  18. <link rel="stylesheet" media="screen, print" href="css/cld-custom.css">
  19. <!-- Place favicon.ico in the root directory -->
  20. <link rel="shortcut icon" href="img/favicon/favicon.ico">
  21. <link rel="stylesheet" media="screen, print" href="css/fa-regular.css">
  22. <link rel="stylesheet" media="screen, print" href="css/fa-solid.css">
  23. <link rel="stylesheet" media="screen, print" href="css/fa-brands.css">
  24. <link rel="stylesheet" media="screen, print" href="css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css">
  25. </head>
  26. <body class="mod-bg-1 nav-function-fixed header-function-fixed zoom2x">
  27. <!-- DOC: script to save and load page settings -->
  28. <script>
  29. /**
  30. * This script should be placed right after the body tag for fast execution
  31. * Note: the script is written in pure javascript and does not depend on thirdparty library
  32. **/
  33. 'use strict';
  34. var classHolder = document.getElementsByTagName("BODY")[0],
  35. /**
  36. * Load from localstorage
  37. **/
  38. themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) : {},
  39. themeURL = themeSettings.themeURL || '',
  40. themeOptions = themeSettings.themeOptions || '';
  41. /**
  42. * Load theme options
  43. **/
  44. if (themeSettings.themeOptions) {
  45. classHolder.className = themeSettings.themeOptions;
  46. console.log("%c✔ Theme settings loaded", "color: #148f32");
  47. } else {
  48. console.log("Heads up! Theme settings is empty or does not exist, loading default settings...");
  49. }
  50. if (themeSettings.themeURL && !document.getElementById('mytheme')) {
  51. var cssfile = document.createElement('link');
  52. cssfile.id = 'mytheme';
  53. cssfile.rel = 'stylesheet';
  54. cssfile.href = themeURL;
  55. document.getElementsByTagName('head')[0].appendChild(cssfile);
  56. }
  57. /**
  58. * Save to localstorage
  59. **/
  60. var saveSettings = function() {
  61. themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item) {
  62. return /^(nav|header|mod|display)-/i.test(item);
  63. }).join(' ');
  64. if (document.getElementById('mytheme')) {
  65. themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
  66. };
  67. localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
  68. }
  69. /**
  70. * Reset settings
  71. **/
  72. var resetSettings = function() {
  73. localStorage.setItem("themeSettings", "");
  74. }
  75. </script>
  76. <!-- BEGIN Page Wrapper -->
  77. <div class="page-wrapper">
  78. <div class="page-inner">
  79. <!-- BEGIN Left Aside -->
  80. <aside class="page-sidebar">
  81. <div class="page-logo">
  82. <a href="#modal-shortcut" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal">
  83. <div class='icon-stack fa-2x'>
  84. <i class="base base-5 icon-stack-3x opacity-100 color-warning-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-warning-500"></i> <i class="fas fa-credit-card-front icon-stack-2x opacity-100 color-white"></i>
  85. </div>
  86. <span class="page-logo-text mr-1">开票合同</span>
  87. <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
  88. <i class="ni ni-my-apps d-inline-block ml-1 fs-lg color-primary-300"></i>
  89. </a>
  90. </div>
  91. <!-- 侧栏主菜单 -->
  92. <nav id="js-primary-nav" class="primary-nav" role="navigation">
  93. <ul id="js-nav-menu" class="nav-menu">
  94. <li class="">
  95. <a href="#" title="软件锁" data-filter-tags="软件锁">
  96. <i class="fal fa-magic "></i>
  97. <span class="nav-link-text">软件锁</span>
  98. </a>
  99. </li>
  100. <li class="">
  101. <a href="#" title="云版管理" data-filter-tags="云版管理">
  102. <i class="fal fa-cloud "></i>
  103. <span class="nav-link-text">云版管理</span>
  104. </a>
  105. <ul>
  106. <li class="">
  107. <a href="#" title="养护云造价" data-filter-tags="养护云造价">
  108. <span class="nav-link-text">养护云造价</span>
  109. </a>
  110. </li>
  111. <li>
  112. <a href="#" title="大司空云计价" data-filter-tags="大司空云计价">
  113. <span class="nav-link-text">大司空云计价</span>
  114. </a>
  115. </li>
  116. </ul>
  117. </li>
  118. <li class="active open">
  119. <a href="training.html" title="培训班" data-filter-tags="培训班">
  120. <i class="fal fa-magic "></i>
  121. <span class="nav-link-text">培训班</span>
  122. </a>
  123. </li>
  124. </ul>
  125. <div class="filter-message js-filter-message bg-success-600"></div>
  126. </nav>
  127. <!-- END 侧栏主菜单 -->
  128. <!--侧栏底部菜单-->
  129. <div class="nav-footer shadow-top">
  130. <a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify" class="hidden-md-down">
  131. <i class="ni ni-chevron-right"></i>
  132. <i class="ni ni-chevron-right"></i>
  133. </a>
  134. <ul class="list-table m-auto nav-footer-buttons">
  135. <li>
  136. <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Chat logs">
  137. <i class="fal fa-comments"></i>
  138. </a>
  139. </li>
  140. <li>
  141. <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Support Chat">
  142. <i class="fal fa-life-ring"></i>
  143. </a>
  144. </li>
  145. <li>
  146. <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="" data-original-title="Make a call">
  147. <i class="fal fa-phone"></i>
  148. </a>
  149. </li>
  150. </ul>
  151. </div>
  152. </aside>
  153. <!-- END 侧栏主菜单 -->
  154. <div class="page-content-wrapper">
  155. <!-- BEGIN 页面头部 -->
  156. <header class="page-header" role="banner">
  157. <!-- DOC: 侧栏收起工具 -->
  158. <div class="hidden-md-down dropdown-icon-menu position-relative">
  159. <a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="隐藏侧栏">
  160. <i class="ni ni-menu"></i>
  161. </a>
  162. <ul>
  163. <li>
  164. <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="迷你侧栏">
  165. <i class="ni ni-minify-nav"></i>
  166. </a>
  167. </li>
  168. </ul>
  169. </div>
  170. <div class="hidden-lg-up">
  171. <a href="#" class="header-btn btn press-scale-down waves-effect waves-themed" data-action="toggle" data-class="mobile-nav-on">
  172. <i class="ni ni-menu"></i>
  173. </a>
  174. </div>
  175. <!--页面标题-->
  176. <h1 class="subheader-title">
  177. 培训班
  178. </h1>
  179. <!--顶部右栏-->
  180. <div class="ml-auto d-flex">
  181. <!-- 信息提示 -->
  182. <!--信息提示被移除-->
  183. <!-- 用户菜单 -->
  184. <div>
  185. <a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com" class="header-icon d-flex align-items-center justify-content-center ml-2">
  186. <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Dr. Codex Lantern">
  187. <!-- you can also add username next to the avatar with the codes below:
  188. <span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
  189. <i class="ni ni-chevron-down hidden-xs-down"></i> -->
  190. </a>
  191. <div class="dropdown-menu dropdown-menu-animated dropdown-lg">
  192. <div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
  193. <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
  194. <span class="mr-2">
  195. <img src="img/demo/avatars/avatar-admin.png" class="rounded-circle profile-image" alt="Dr. Codex Lantern">
  196. </span>
  197. <div class="info-card-text">
  198. <div class="fs-lg text-truncate text-truncate-lg">张三</div>
  199. <span class="text-truncate text-truncate-md opacity-80">工号:0001</span>
  200. </div>
  201. </div>
  202. </div>
  203. <div class="dropdown-divider m-0"></div>
  204. <a href="#" class="dropdown-item" data-action="app-fullscreen">
  205. <span>员工信息</span>
  206. </a>
  207. <div class="dropdown-divider m-0"></div>
  208. <a href="#" class="dropdown-item" data-action="app-fullscreen">
  209. <span>全屏</span>
  210. <i class="float-right text-muted fw-n">F11</i>
  211. </a>
  212. <div class="dropdown-divider m-0"></div>
  213. <a class="dropdown-item fw-500 pt-3 pb-3" href="page_login_alt.html">
  214. <span>退出登录</span>
  215. </a>
  216. </div>
  217. </div>
  218. </div>
  219. </header>
  220. <!-- END 页面头部 -->
  221. <!-- BEGIN 页面内容 -->
  222. <!-- the #js-page-content id is needed for some plugins to initialize -->
  223. <main id="js-page-content" role="main" class="page-content">
  224. <div class="row">
  225. <div class="col-xl-12">
  226. <div id="panel-1" class="panel">
  227. <div class="panel-hdr">
  228. <!--数据筛选-->
  229. <div class="col-auto pr-0">
  230. <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">本人</button>
  231. <div class="dropdown-menu">
  232. <button class="dropdown-item" type="button">本人及下属</button>
  233. <button class="dropdown-item" type="button">仅本部门</button>
  234. <button class="dropdown-item" type="button">本部门及下属部门</button>
  235. <button class="dropdown-item" type="button">自定义</button>
  236. </div>
  237. </div>
  238. <!--搜索-->
  239. <div class="col-auto ml-auto">
  240. <div class="input-group input-group-sm bg-white shadow-inset-2">
  241. <input type="text" class="form-control bg-transparent" placeholder="培训班名称">
  242. <div class="input-group-append">
  243. <button class="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i class="fal fa-search"></i></button>
  244. </div>
  245. </div>
  246. </div>
  247. <!--时间周期-->
  248. <div class="col-auto pl-0">
  249. <div class="input-group input-group-sm bg-white shadow-inset-2">
  250. <div class="input-group-prepend">
  251. <button class="btn btn-outline-default dropdown-toggle waves-effect waves-themed" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">创建时间</button>
  252. <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; top: 37px; left: 0px; will-change: top, left;">
  253. <a class="dropdown-item" href="#">开班时间</a>
  254. </div>
  255. </div>
  256. <input type="text" class="form-control bg-transparent" placeholder="选择时间周期">
  257. </div>
  258. </div>
  259. <div class="col-auto pl-0">
  260. <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">全部状态</button>
  261. <div class="dropdown-menu">
  262. <button class="dropdown-item" type="button"><i class="fas fa-circle text-info"></i> 进行中</button>
  263. <button class="dropdown-item" type="button"><i class="fas fa-circle text-warning"></i>结算中</button>
  264. <button class="dropdown-item" type="button"><i class="fas fa-circle text-success"></i>结算完成</button>
  265. <button class="dropdown-item" type="button"><i class="fas fa-circle text-secondary"></i> 筹备中</button>
  266. </div>
  267. </div>
  268. <div class="col-auto pl-0">
  269. <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">已显示5列</button>
  270. <div class="dropdown-menu">
  271. <ul class="list-unstyled px-3 pt-2 mb-0">
  272. <li class="mb-2">
  273. <div class="custom-control custom-switch">
  274. <input type="checkbox" class="custom-control-input" id="lie1">
  275. <label class="custom-control-label" for="lie1">结算</label>
  276. </div>
  277. </li>
  278. <li class="mb-2">
  279. <div class="custom-control custom-switch">
  280. <input type="checkbox" class="custom-control-input" id="lie1">
  281. <label class="custom-control-label" for="lie1">回款进度</label>
  282. </div>
  283. </li>
  284. <li class="mb-2">
  285. <div class="custom-control custom-switch">
  286. <input type="checkbox" class="custom-control-input" id="lie1">
  287. <label class="custom-control-label" for="lie1">开班时间</label>
  288. </div>
  289. </li>
  290. <li class="mb-2">
  291. <div class="custom-control custom-switch">
  292. <input type="checkbox" class="custom-control-input" id="lie1">
  293. <label class="custom-control-label" for="lie1">结束时间</label>
  294. </div>
  295. </li>
  296. <li class="mb-2">
  297. <div class="custom-control custom-switch">
  298. <input type="checkbox" class="custom-control-input" id="lie2">
  299. <label class="custom-control-label" for="lie2">客户</label>
  300. </div>
  301. </li>
  302. <li class="mb-2">
  303. <div class="custom-control custom-switch">
  304. <input type="checkbox" class="custom-control-input" id="lie3">
  305. <label class="custom-control-label" for="lie3">学员</label>
  306. </div>
  307. </li>
  308. <li class="mb-2">
  309. <div class="custom-control custom-switch">
  310. <input type="checkbox" class="custom-control-input" id="lie8" checked="">
  311. <label class="custom-control-label" for="lie8">缴费学员</label>
  312. </div>
  313. </li>
  314. <li class="mb-2">
  315. <div class="custom-control custom-switch">
  316. <input type="checkbox" class="custom-control-input" id="lie8" checked="">
  317. <label class="custom-control-label" for="lie8">免费学员</label>
  318. </div>
  319. </li>
  320. <li class="mb-2">
  321. <div class="custom-control custom-switch">
  322. <input type="checkbox" class="custom-control-input" id="lie8" checked="">
  323. <label class="custom-control-label" for="lie8">收入金额</label>
  324. </div>
  325. </li>
  326. <li class="mb-2">
  327. <div class="custom-control custom-switch">
  328. <input type="checkbox" class="custom-control-input" id="lie8" checked="">
  329. <label class="custom-control-label" for="lie8">支出金额</label>
  330. </div>
  331. </li>
  332. <li class="mb-2">
  333. <div class="custom-control custom-switch">
  334. <input type="checkbox" class="custom-control-input" id="lie8" checked="">
  335. <label class="custom-control-label" for="lie8">创建人</label>
  336. </div>
  337. </li>
  338. <li class="mb-2">
  339. <div class="custom-control custom-switch">
  340. <input type="checkbox" class="custom-control-input" id="lie8" checked="">
  341. <label class="custom-control-label" for="lie8">创建时间</label>
  342. </div>
  343. </li>
  344. </ul>
  345. </div>
  346. </div>
  347. <div class="col-auto pl-0">
  348. <button class="btn btn-sm btn-default" data-toggle="dropdown"><i class="fal fa-sort-amount-down"></i> 排序</button>
  349. <div class="dropdown-menu dropdown-menu-right" id="paixu">
  350. <ul class="list-unstyled px-3 pt-2 mb-0">
  351. <li class="mb-2">
  352. <div class="custom-control custom-radio">
  353. <input type="radio" class="custom-control-input" id="pai1" name="paizhi" checked="">
  354. <label class="custom-control-label" for="pai1">创建时间</label>
  355. </div>
  356. </li>
  357. <li class="mb-2">
  358. <div class="custom-control custom-radio">
  359. <input type="radio" class="custom-control-input" id="pai2" name="paizhi">
  360. <label class="custom-control-label" for="pai2">开班时间</label>
  361. </div>
  362. </li>
  363. <li class="mb-2">
  364. <div class="custom-control custom-radio">
  365. <input type="radio" class="custom-control-input" id="pai1" name="paizhi" checked="">
  366. <label class="custom-control-label" for="pai1">结算时间</label>
  367. </div>
  368. </li>
  369. </ul>
  370. <ul class="list-unstyled px-3 pt-2 mb-0 border-top">
  371. <li class="mb-2">
  372. <div class="custom-control custom-radio">
  373. <input type="radio" class="custom-control-input" id="pdown" name="paixu" checked="">
  374. <label class="custom-control-label" for="pdown">递增</label>
  375. </div>
  376. </li>
  377. <li class="mb-2">
  378. <div class="custom-control custom-radio">
  379. <input type="radio" class="custom-control-input" id="pup" name="paixu">
  380. <label class="custom-control-label" for="pup">递减</label>
  381. </div>
  382. </li>
  383. </ul>
  384. </div>
  385. </div>
  386. </div>
  387. <div class="panel-container show">
  388. <!--数据内容区-->
  389. <div class="panel-content">
  390. <table class="table table-bordered table-hover table-striped">
  391. <thead>
  392. <tr>
  393. <th>培训班名称</th>
  394. <th>办事处</th>
  395. <th>结算</th>
  396. <th>回款进度</th>
  397. <th>开班时间</th>
  398. <th>结束时间</th>
  399. <th>客户</th>
  400. <th>学员</th>
  401. <th>缴费/免费学员</th>
  402. <th>收入金额</th>
  403. <th>支出金额</th>
  404. <th>创建人</th>
  405. <th>创建时间</th>
  406. <th>操作</th>
  407. </tr>
  408. </thead>
  409. <tbody>
  410. <tr>
  411. <td><a href="" data-toggle="modal" data-target="#training-detail">ZZZZ培训班</a></td>
  412. <td>广东办</td>
  413. <td><i class="fas fa-circle text-info"></i> 进行中</td>
  414. <td><span class="badge badge-success">100%</span></td>
  415. <td>2021-05-31</td>
  416. <td>2021-06-5</td>
  417. <td>30</td>
  418. <td>50</td>
  419. <td>45/5</td>
  420. <td>¥300000.00</td>
  421. <td>¥200000.00</td>
  422. <td>刘飞</td>
  423. <td>2021-04-01</td>
  424. <td></td>
  425. </tr>
  426. <tr>
  427. <td><a href="" data-toggle="modal" data-target="#training-detail">ZZZZ培训班</a></td>
  428. <td>广东办</td>
  429. <td><i class="fas fa-circle text-warning"></i> 结算中</td>
  430. <td><span class="badge badge-success">100%</span></td>
  431. <td>2021-05-31</td>
  432. <td>2021-06-5</td>
  433. <td>30</td>
  434. <td>50</td>
  435. <td>45/5</td>
  436. <td>¥300000.00</td>
  437. <td>¥200000.00</td>
  438. <td>刘飞</td>
  439. <td>2021-04-01</td>
  440. <td></td>
  441. </tr>
  442. <tr>
  443. <td><a href="" data-toggle="modal" data-target="#training-detail">ZZZZ培训班</a></td>
  444. <td>广东办</td>
  445. <td><i class="fas fa-circle text-success"></i> 结算完成</td>
  446. <td><span class="badge badge-success">100%</span></td>
  447. <td>2021-05-31</td>
  448. <td>2021-06-5</td>
  449. <td>30</td>
  450. <td>50</td>
  451. <td>45/5</td>
  452. <td>¥300000.00</td>
  453. <td>¥200000.00</td>
  454. <td>刘飞</td>
  455. <td>2021-04-01</td>
  456. <td></td>
  457. </tr>
  458. <tr>
  459. <td><a href="" data-toggle="modal" data-target="#training-detail">ZZZZ培训班</a></td>
  460. <td>广东办</td>
  461. <td><i class="fas fa-circle text-secondary"></i> 筹备中</td>
  462. <td><span class="badge badge-warning">0%</span></td>
  463. <td>2021-05-31</td>
  464. <td>2021-06-5</td>
  465. <td>30</td>
  466. <td>50</td>
  467. <td>45/5</td>
  468. <td>¥0.00</td>
  469. <td>¥0.00</td>
  470. <td>刘飞</td>
  471. <td>2021-04-01</td>
  472. <td><a href="#">删除</a></td>
  473. </tr>
  474. </tbody>
  475. </table>
  476. <!--翻页-->
  477. <div class="d-flex justify-content-center">
  478. <ul class="pagination pagination-sm">
  479. <li class="page-item disabled">
  480. <a class="page-link" href="#" aria-label="Previous">
  481. <span aria-hidden="true"><i class="fal fa-chevron-left"></i></span>
  482. </a>
  483. </li>
  484. <li class="page-item active" aria-current="page">
  485. <span class="page-link">
  486. 1
  487. <span class="sr-only">(current)</span>
  488. </span>
  489. </li>
  490. <li class="page-item"><a class="page-link" href="#">2</a></li>
  491. <li class="page-item"><a class="page-link" href="#">3</a></li>
  492. <li class="page-item">
  493. <a class="page-link" href="#" aria-label="Next">
  494. <span aria-hidden="true"><i class="fal fa-chevron-right"></i></span>
  495. </a>
  496. </li>
  497. </ul>
  498. </div>
  499. </div>
  500. </div>
  501. </div>
  502. </div>
  503. </div>
  504. </main>
  505. <!-- END Page Content -->
  506. </div>
  507. </div>
  508. </div>
  509. <!-- END Page Wrapper -->
  510. <!-- BEGIN 培训班详情弹窗-->
  511. <div class="modal fade" id="training-detail" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  512. <div class="modal-dialog modal-xl">
  513. <div class="modal-content">
  514. <div class="dialog-sheet">
  515. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  516. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  517. </button>
  518. <div class="sheet-box row m-0">
  519. <div class="sheet-left-panel">
  520. <!--保存提示-->
  521. <!-- <div class="save-tips">
  522. <div class="alert bg-warning-700 text-white p-2 m-1" role="alert">
  523. <div class="d-flex align-items-center">
  524. <div class="alert-icon">
  525. <i class="fal fa-info-circle"></i>
  526. </div>
  527. <div class="flex-1">
  528. <span class="h5">内容已经修改</span>
  529. </div>
  530. <a href="#" class="btn btn-sm text-white width-8">取消</a>
  531. <a href="#" class="btn btn-light btn-sm width-8">保存</a>
  532. </div>
  533. </div>
  534. </div> -->
  535. <div class="sheet-panel-header d-flex justify-content-between mx-4">
  536. <div>
  537. <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i class="fal fa-external-link"></i></a>
  538. </div>
  539. <div>
  540. </div>
  541. </div>
  542. <div class="sheet-panel-content">
  543. <div class="sheet-panel-form slimScroll1 mx-4">
  544. <div class="form-header mt-3">
  545. <div class="d-flex justify-content-between"><span class="text-muted">培训班</span><span class="text-muted">刘飞 创建于 2019年5月6日 14:55</span></div>
  546. <legend>ZZZZ培训班<h6 class="float-right mt-3"><span class="badge badge-success">100%</span></legend>
  547. </div>
  548. <div class="cldform clearfix">
  549. <div class="cldform-item">
  550. <div class="cldform-label">培训班名称</div>
  551. <div class="cldform-control">
  552. <div class="cldform-contarl-box cldform-contarl-textareabox"><span>ZZZZ培训班</span></div>
  553. </div>
  554. </div>
  555. <div class="cldform-line"></div>
  556. <div class="cldform-item cldform-item-half pr-3">
  557. <div class="cldform-label">开班时间</div>
  558. <div class="cldform-control">
  559. <div class="cldform-contarl-box cldform-contarl-textareabox"><span>2021-05-31</span></div>
  560. </div>
  561. </div>
  562. <div class="cldform-item cldform-item-half pl-3">
  563. <div class="cldform-label">结束时间</div>
  564. <div class="cldform-control">
  565. <div class="cldform-contarl-box cldform-contarl-textareabox"><span>2021-06-5</span></div>
  566. </div>
  567. </div>
  568. <div class="cldform-line"></div>
  569. <div class="cldform-item">
  570. <div class="cldform-label">备注</div>
  571. <div class="cldform-control">
  572. <div class="cldform-contarl-box cldform-contarl-textareabox text-muted"><span>&nbsp;</span></div>
  573. </div>
  574. </div>
  575. <div class="cldform-line"></div>
  576. <div class="cldform-item">
  577. <div class="cldform-label">协作人</div>
  578. <div class="cldform-control">
  579. <div class="cldform-contarl-box cldform-contarl-textareabox"><span><a href="#link-acc" data-toggle="modal" data-target="#link-acc"><i class="far fa-link"></i> 关联员工</a></span></div>
  580. </div>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. </div>
  586. <div class="sheet-right-panel col p-0">
  587. <div class="sheet-panel-tabs mx-4 mt-4">
  588. <ul class="nav nav-tabs sheet-nav-tabs" role="tablist">
  589. <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-jiesuan" role="tab" aria-selected="false">结算表</a></li>
  590. <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab-kehu" role="tab" aria-selected="true">客户</a>
  591. </li>
  592. <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab-xueyuan" role="tab" aria-selected="true">学员</a>
  593. </li>
  594. <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab-jiekuan" role="tab" aria-selected="true">借款</a>
  595. </li>
  596. <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab-shouru" role="tab" aria-selected="true">收入(发票)</a>
  597. </li>
  598. <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab-zhichu" role="tab" aria-selected="true">支出</a>
  599. </li>
  600. <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab-jiangshi" role="tab" aria-selected="true">讲师</a>
  601. </li>
  602. </ul>
  603. <div class="tab-content">
  604. <div class="tab-pane fade sheet-panel-righttop active show " id="tab-jiesuan" role="tabpanel" aria-labelledby="tab-fbilling">
  605. <div class="slimScrol3">
  606. <div class="py-2 px-3">
  607. <table class="table table-sm table-hover table-bordered">
  608. <tbody><tr>
  609. <th class="text-center" rowspan="2">汇总项目</th><th class="text-center" colspan="2">收入按开票金额计算</th><th class="text-center" colspan="2">收入按入账金额计算</th>
  610. </tr><tr>
  611. <th class="text-center">金额</th><th class="text-center">占比</th><th class="text-center">金额</th><th class="text-center">占比</th>
  612. </tr>
  613. <tr>
  614. <th>收入</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  615. </tr>
  616. <tr>
  617. <th>支出</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  618. </tr>
  619. <tr>
  620. <th>利润</th><td class="text-right"><b>0</b></td><td class="text-right">0%</td><td class="text-right"><b>0</b></td><td class="text-right">0%</td>
  621. </tr>
  622. <tr>
  623. <td colspan="5" class="text-center text-muted">收入-支出=利润</td>
  624. </tr>
  625. <tr>
  626. <th>公司利润</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  627. </tr>
  628. <tr>
  629. <th>办事处利润</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  630. </tr>
  631. <tr>
  632. <th>公司收款</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  633. </tr>
  634. <tr>
  635. <td colspan="5" class="text-center text-muted">收入×40%=办事处利润&nbsp;&nbsp;&nbsp;收入×60%=公司利润</td>
  636. </tr>
  637. <tr>
  638. <th>备用金(借款)</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  639. </tr>
  640. <tr>
  641. <th>办事处收款</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  642. </tr>
  643. <tr>
  644. <th>办事处实际支出</th><td class="text-right">0</td><td class="text-right">0%</td><td class="text-right">0</td><td class="text-right">0%</td>
  645. </tr>
  646. <tr>
  647. <th>付总部款</th><td class="text-right"><b>0</b></td><td class="text-right">0%</td><td class="text-right"><b>0</b></td><td class="text-right">0%</td>
  648. </tr>
  649. <tr>
  650. <td colspan="5" class="text-center text-muted">备用金+办事处收款-办事处实际支出=付总部款</td>
  651. </tr>
  652. <tr><td colspan="5">学员:36 人(缴费36 免费0)&nbsp;&nbsp;&nbsp;讲师:36 人</td></tr>
  653. </tbody>
  654. </table>
  655. <table class="table table-bordered table-sm table-hover">
  656. <tbody>
  657. <tr>
  658. <th class="text-center" colspan="2">支出项目</th><th class="text-center">金额</th><th class="text-center" width="150">占开票金额比例</th>
  659. </tr>
  660. <tr><th>交通费</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  661. </tr>
  662. <tr>
  663. <th rowspan="3">讲课费</th><td class="text-center text-muted">外聘</td><td class="text-right">0</td><td class="text-right">0%</td>
  664. </tr>
  665. <tr>
  666. <td class="text-center text-muted">外聘(不计税)</td><td class="text-right">0</td><td class="text-right">0%</td>
  667. </tr>
  668. <tr>
  669. <td class="text-center text-muted">员工</td><td class="text-right">0</td><td class="text-right">0%</td>
  670. </tr>
  671. <tr>
  672. <th>住宿费</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  673. </tr>
  674. <tr>
  675. <th>场租费</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  676. </tr>
  677. <tr>
  678. <th rowspan="2">办公费</th><td class="text-center text-muted">办事处支出</td><td class="text-right">0<!--办事处支出--></td><td class="text-right">0%</td>
  679. </tr>
  680. <tr>
  681. <td class="text-center text-muted">公司支出</td><td class="text-right">0<!--公司支出--></td><td class="text-right">0%</td>
  682. </tr>
  683. <tr>
  684. <th>电话费<!--新增--></th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  685. </tr>
  686. <tr>
  687. <th rowspan="2">邮寄费</th><td class="text-center text-muted">办事处支出</td><td class="text-right">0<!--办事处支出--></td><td class="text-right">0%</td>
  688. </tr>
  689. <tr>
  690. <td class="text-center text-muted">公司支出</td><td class="text-right">0<!--公司支出--></td><td class="text-right">0%</td>
  691. </tr>
  692. <tr>
  693. <th>公关费</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  694. </tr>
  695. <tr>
  696. <th>其他</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  697. </tr>
  698. <tr>
  699. <th>税款</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  700. </tr>
  701. <tr>
  702. <th>研究中心经费</th><td colspan="2" class="text-right">0</td><td class="text-right">0%</td>
  703. </tr>
  704. <tr>
  705. <th>支出小计</th><td class="text-right" colspan="2"><b>0</b></td><td class="text-right"><b>0%</b></td>
  706. </tr>
  707. </tbody>
  708. </table>
  709. </div>
  710. </div>
  711. </div>
  712. <div class="tab-pane fade sheet-panel-righttop" id="tab-kehu" role="tabpanel" aria-labelledby="tab-fapprove">
  713. <div class="slimScrol3">
  714. 客户
  715. </div>
  716. </div>
  717. <div class="tab-pane fade sheet-panel-righttop" id="tab-学员" role="tabpanel" aria-labelledby="tab-fapprove">
  718. <div class="slimScrol3">
  719. 学员
  720. </div>
  721. </div>
  722. <div class="tab-pane fade sheet-panel-righttop" id="tab-jiekuan" role="tabpanel" aria-labelledby="tab-fapprove">
  723. <div class="slimScrol3">
  724. 借款
  725. </div>
  726. </div>
  727. <div class="tab-pane fade sheet-panel-righttop" id="tab-shouru" role="tabpanel" aria-labelledby="tab-fapprove">
  728. <div class="slimScrol3">
  729. 收入(发票)
  730. </div>
  731. </div>
  732. <div class="tab-pane fade sheet-panel-righttop" id="tab-zhichu" role="tabpanel" aria-labelledby="tab-fapprove">
  733. <div class="slimScrol3">
  734. 支出
  735. </div>
  736. </div>
  737. <div class="tab-pane fade sheet-panel-righttop" id="tab-jiangshi" role="tabpanel" aria-labelledby="tab-fapprove">
  738. <div class="slimScrol3">
  739. 讲师
  740. </div>
  741. </div>
  742. </div>
  743. <div class="sheet-btns mt-3">
  744. <a href="#add-invoice" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-invoice"><i class="far fa-link"></i> 关联客户</a>
  745. <a href="#add-invoice" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-invoice"><i class="far fa-link"></i> 关联学员</a>
  746. <a href="#add-invoice" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-invoice"><i class="fal fa-external-link"></i> 培训班结算</a>
  747. </div>
  748. </div>
  749. <div class="sheet-panel-record">
  750. <ul class="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
  751. <li class="nav-item ml-4"><a class="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
  752. </ul>
  753. <div class="tab-content p-3">
  754. <div class="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
  755. <div class="slimScrol4">
  756. <p><a href="#">@李明珠</a> 邮寄发票<br><span class="text-muted">5月5日 14:55</span></p>
  757. </p>
  758. <p><a href="#">@黄嘉玲</a> 打印发票<br><span class="text-muted">5月5日 14:55</span></p>
  759. </p>
  760. <p><a href="#">@蔡频</a> 审批通过<br><span class="text-muted">5月5日 14:55</span></p>
  761. </p>
  762. <p><a href="#">@欧桃珍</a> 审批通过<br><span class="text-muted">5月5日 14:55</span></p>
  763. </p>
  764. <p><a href="#">@陈特</a> 提交申请<br><span class="text-muted">5月5日 14:55</span></p>
  765. </p>
  766. </div>
  767. </div>
  768. </div>
  769. </div>
  770. </div>
  771. </div>
  772. </div>
  773. </div>
  774. </div>
  775. </div>
  776. <!-- BEGIN 回款详情弹窗-->
  777. <div class="modal fade" id="receivables-detail" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  778. <div class="modal-dialog modal-xl">
  779. <div class="modal-content">
  780. <div class="dialog-sheet">
  781. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  782. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  783. </button>
  784. <div class="sheet-box row m-0">
  785. <div class="sheet-left-panel">
  786. <!--保存提示-->
  787. <!-- <div class="save-tips">
  788. <div class="alert bg-warning-700 text-white p-2 m-1" role="alert">
  789. <div class="d-flex align-items-center">
  790. <div class="alert-icon">
  791. <i class="fal fa-info-circle"></i>
  792. </div>
  793. <div class="flex-1">
  794. <span class="h5">内容已经修改</span>
  795. </div>
  796. <a href="#" class="btn btn-sm text-white width-8">取消</a>
  797. <a href="#" class="btn btn-light btn-sm width-8">保存</a>
  798. </div>
  799. </div>
  800. </div> -->
  801. <div class="sheet-panel-header d-flex justify-content-between mx-4">
  802. <div>
  803. <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i class="fal fa-external-link"></i></a>
  804. </div>
  805. <div>
  806. </div>
  807. </div>
  808. <div class="sheet-panel-content">
  809. <div class="sheet-panel-form slimScroll1 mx-4">
  810. <div class="form-header mt-3">
  811. <div class="d-flex justify-content-between"><span class="text-muted">发票</span><span class="text-muted">黄嘉玲 录入于 2019年5月6日 14:55</span></div>
  812. <legend>#SK20160316001</legend>
  813. </div>
  814. <div class="cldform clearfix">
  815. <div class="cldform-item">
  816. <div class="cldform-label">收款金额</div>
  817. <div class="cldform-control">
  818. <div class="cldform-contarl-box cldform-contarl-textareabox"><span>¥3000.00</span></div>
  819. </div>
  820. </div>
  821. <div class="cldform-line"></div>
  822. <div class="cldform-item">
  823. <div class="cldform-label">收款信息</div>
  824. <div class="cldform-control">
  825. <div class="cldform-contarl-box cldform-contarl-textareabox"><span>XXXXXX</span></div>
  826. </div>
  827. </div>
  828. <div class="cldform-line"></div>
  829. <div class="cldform-item">
  830. <div class="cldform-label">收款银行</div>
  831. <div class="cldform-control">
  832. <div class="cldform-contarl-box cldform-contarl-textareabox"><span> 广发银行珠海分行柠溪支行</span></div>
  833. </div>
  834. </div>
  835. <div class="cldform-line"></div>
  836. <div class="cldform-item">
  837. <div class="cldform-label">银行到帐</div>
  838. <div class="cldform-control">
  839. <div class="cldform-contarl-box cldform-contarl-textareabox"><span> 2016-04-11</span></div>
  840. </div>
  841. </div>
  842. <div class="cldform-line"></div>
  843. <div class="cldform-item">
  844. <div class="cldform-label">认领收款</div>
  845. <div class="cldform-control">
  846. <div class="cldform-contarl-box cldform-contarl-textareabox"><span> 张少珊 转入 陈特 2015-04-12 11:30:02</span></div>
  847. </div>
  848. </div>
  849. <div class="cldform-line"></div>
  850. </div>
  851. </div>
  852. </div>
  853. </div>
  854. <div class="sheet-right-panel col p-0">
  855. <div class="sheet-panel-tabs mx-4 mt-4">
  856. <ul class="nav nav-tabs sheet-nav-tabs" role="tablist">
  857. <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-fapprove" role="tab" aria-selected="true">发票</a>
  858. </li>
  859. </ul>
  860. <div class="tab-content">
  861. <div class="tab-pane fade sheet-panel-righttop show active" id="tab-fapprove" role="tabpanel" aria-labelledby="tab-fapprove">
  862. <div class="slimScrol3">
  863. <table class="table">
  864. <thead>
  865. <tr><th>开票流水号</th><th>开票金额</th><th>开票抬头</th><th>开票内容</th></tr>
  866. </thead>
  867. <tbody><tr><td><a href="#invoice-detail" data-toggle="modal" data-target="#receivables-detail">#F20160316001</a></td><td>¥3000.00</td><td>XXX单位</td><td>纵横公路工程造价管理系统V9.0</td></tr>
  868. </tbody></table>
  869. </div>
  870. </div>
  871. </div>
  872. <div class="sheet-btns mt-3">
  873. </div>
  874. </div>
  875. <div class="sheet-panel-record">
  876. <ul class="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
  877. <li class="nav-item ml-4"><a class="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
  878. </ul>
  879. <div class="tab-content p-3">
  880. <div class="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
  881. <div class="slimScrol4">
  882. <p><a href="#">@黄嘉玲</a> 关联新款 <a href="">#SK20160316005</a><br><span class="text-muted">5月5日 14:55</span></p>
  883. </p>
  884. <p><a href="#">@李明珠</a> 与 <a href>#SK20160311342</a> 解绑<br><span class="text-muted">5月5日 14:55</span></p>
  885. </p>
  886. <p><a href="#">@蔡频</a> 退款 ¥5000.00<br><span class="text-muted">5月5日 14:55</span></p>
  887. </p>
  888. <p><a href="#">@欧桃珍</a> 转入 <a href="#">@刘飞</a> <br><span class="text-muted">5月5日 14:55</span></p>
  889. </p>
  890. <p><a href="#">@陈特</a> 设置 广东办待认领<br><span class="text-muted">5月5日 14:55</span></p>
  891. </p>
  892. <p><a href="#">@陈特</a> 设置 公共待认领<br><span class="text-muted">5月5日 14:55</span></p>
  893. </p>
  894. <p><a href="#">@陈特</a> 导入银行到款<br><span class="text-muted">5月5日 14:55</span></p>
  895. </p>
  896. </div>
  897. </div>
  898. </div>
  899. </div>
  900. </div>
  901. </div>
  902. </div>
  903. </div>
  904. </div>
  905. </div>
  906. <!--BEGIN 关联客户内联系人-->
  907. <div class="modal fade" id="link-cont" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  908. <div class="modal-dialog modal-lg">
  909. <div class="modal-content clearfix">
  910. <div class="dialog-sheet">
  911. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  912. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  913. </button>
  914. <div class="m-4">
  915. <div class="input-group bg-white shadow-inset-2">
  916. <div class="input-group-prepend">
  917. <span class="input-group-text bg-transparent border-right-0">
  918. <i class="fal fa-search"></i>
  919. </span>
  920. </div>
  921. <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="搜索联系人(姓名、手机、QQ)">
  922. </div>
  923. </div>
  924. </div>
  925. <div class="modal-search-height border-top border-bottom">
  926. <div class="slimScrol2 p-4 modal-search-result">
  927. <div class="card p-3 mb-3" title="点击关联该联系人">
  928. <div class="row"><div class="col-1 pr-0">张三</div><div class="col-1 pr-0">处长</div><div class="col-2 pr-0">15800000001</div><div class="col-2 pr-0">1231233</div><div class="col-4 pr-0">珠海纵横创新软件有限公司</div><div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">选择ta</a></div></div>
  929. </div>
  930. <div class="card pointer-hover p-3 mb-3" title="点击关联该联系人">
  931. <div class="row"><div class="col-1 pr-0">张三</div><div class="col-1 pr-0"></div><div class="col-2 pr-0">15800000001</div><div class="col-2 pr-0">1231233</div><div class="col-4 pr-0">珠海纵横创新软件有限公司</div><div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">选择ta</a></div></div>
  932. </div>
  933. </div>
  934. </div>
  935. <div class="m-4">
  936. <!-- <a href="#add-contact" data-toggle="modal" data-target="#add-contact" class="btn btn-sm btn-outline-primary"><i class="far fa-plus"></i> 添加并关联新联系人</a> -->
  937. </div>
  938. </div>
  939. </div>
  940. </div>
  941. <!--BEGIN 关联客户-->
  942. <div class="modal fade" id="link-com" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  943. <div class="modal-dialog modal-lg">
  944. <div class="modal-content clearfix">
  945. <div class="dialog-sheet">
  946. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  947. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  948. </button>
  949. <div class="m-4">
  950. <div class="input-group bg-white shadow-inset-2">
  951. <div class="input-group-prepend">
  952. <span class="input-group-text bg-transparent border-right-0">
  953. <i class="fal fa-search"></i>
  954. </span>
  955. </div>
  956. <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="输入客户名称搜索">
  957. </div>
  958. </div>
  959. </div>
  960. <div class="modal-search-height border-top border-bottom">
  961. <div class="slimScrol2 p-4 modal-search-result">
  962. <div class="card p-3 mb-3" title="点击关联该客户">
  963. <div class="row">
  964. <div class="col-6 pr-0">珠海纵横创新软件有限公司</div>
  965. <div class="col-4 pr-0">广东省,珠海市,香洲区</div>
  966. <div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">关联</a></div>
  967. </div>
  968. </div>
  969. </div>
  970. </div>
  971. <div class="m-4">
  972. <!-- <a href="#add-company" data-toggle="modal" data-target="#add-company" class="btn btn-sm btn-outline-primary"><i class="far fa-plus"></i> 添加新客户</a> -->
  973. </div>
  974. </div>
  975. </div>
  976. </div>
  977. <!--BEGIN 关联员工-->
  978. <div class="modal fade" id="link-acc" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  979. <div class="modal-dialog modal-lg">
  980. <div class="modal-content clearfix">
  981. <div class="dialog-sheet">
  982. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  983. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  984. </button>
  985. <div class="m-4">
  986. <div class="input-group bg-white shadow-inset-2">
  987. <div class="input-group-prepend">
  988. <span class="input-group-text bg-transparent border-right-0">
  989. <i class="fal fa-search"></i>
  990. </span>
  991. </div>
  992. <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="搜索员工(姓名)">
  993. </div>
  994. </div>
  995. </div>
  996. <div class="modal-search-height border-top border-bottom">
  997. <div class="slimScrol2 p-4 modal-search-result">
  998. <div class="card p-3 mb-3" title="点击关联该员工">
  999. <div class="row"><div class="col-1 pr-0">张三</div><div class="col-2 pr-0">15800000001</div><div class="col-2 pr-0">总经理</div><div class="col-4 pr-0">总部</div><div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">选择ta</a></div></div>
  1000. </div>
  1001. <div class="card pointer-hover p-3 mb-3" title="点击关联该联系人">
  1002. <div class="row"><div class="col-1 pr-0">张三</div><div class="col-2 pr-0">15800000001</div><div class="col-2 pr-0">经理</div><div class="col-4 pr-0">广东办</div><div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">选择ta</a></div></div>
  1003. </div>
  1004. </div>
  1005. </div>
  1006. <div class="m-4">
  1007. <!-- <a href="#add-contact" data-toggle="modal" data-target="#add-contact" class="btn btn-sm btn-outline-primary"><i class="far fa-plus"></i> 添加并关联新联系人</a> -->
  1008. </div>
  1009. </div>
  1010. </div>
  1011. </div>
  1012. <!--BEGIN 移除公司确认-->
  1013. <div class="modal fade" id="remover-com" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1014. <div class="modal-dialog modal-dialog-centered">
  1015. <div class="modal-content">
  1016. <div class="modal-header">
  1017. <h4 class="modal-title">确认移除</h4>
  1018. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1019. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1020. </button>
  1021. </div>
  1022. <div class="modal-body">
  1023. 为联系人 <b>张三</b> 移除 <b>珠海纵横创新软件有限公司</b>
  1024. </div>
  1025. <div class="modal-footer">
  1026. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1027. <button type="button" class="btn btn-primary waves-effect waves-themed">确认移除</button>
  1028. </div>
  1029. </div>
  1030. </div>
  1031. </div>
  1032. <!--BEGIN 移除联系人确认-->
  1033. <div class="modal fade" id="unlinkcld" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1034. <div class="modal-dialog modal-dialog-centered">
  1035. <div class="modal-content">
  1036. <div class="modal-header">
  1037. <h4 class="modal-title">确认移除</h4>
  1038. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1039. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1040. </button>
  1041. </div>
  1042. <div class="modal-body">
  1043. 为合同 <b>SCS2020-001</b> 移除联系人 <b>张三</b>
  1044. </div>
  1045. <div class="modal-footer">
  1046. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1047. <button type="button" class="btn btn-primary waves-effect waves-themed">确认移除</button>
  1048. </div>
  1049. </div>
  1050. </div>
  1051. </div>
  1052. <!--BEGIN 移除发票确认-->
  1053. <div class="modal fade" id="remove-invoice" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1054. <div class="modal-dialog modal-dialog-centered">
  1055. <div class="modal-content">
  1056. <div class="modal-header">
  1057. <h4 class="modal-title">确认移除</h4>
  1058. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1059. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1060. </button>
  1061. </div>
  1062. <div class="modal-body">
  1063. 为合同 <b>SCS2020-001</b> 移除发票 <b>#F20160316001</b>
  1064. </div>
  1065. <div class="modal-footer">
  1066. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1067. <button type="button" class="btn btn-primary waves-effect waves-themed">确认移除</button>
  1068. </div>
  1069. </div>
  1070. </div>
  1071. </div>
  1072. <!--BEGIN 删除文件确认-->
  1073. <div class="modal fade" id="remove-file" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1074. <div class="modal-dialog modal-dialog-centered">
  1075. <div class="modal-content">
  1076. <div class="modal-header">
  1077. <h4 class="modal-title">确认移除</h4>
  1078. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1079. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1080. </button>
  1081. </div>
  1082. <div class="modal-body">
  1083. 为合同 <b>SCS2020-001</b> 移除文件 <b>XXXXX合同.docx</b>
  1084. </div>
  1085. <div class="modal-footer">
  1086. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1087. <button type="button" class="btn btn-primary waves-effect waves-themed">确认移除</button>
  1088. </div>
  1089. </div>
  1090. </div>
  1091. </div>
  1092. <!--BEGIN 上传文件-->
  1093. <div class="modal fade" id="upload-file" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1094. <div class="modal-dialog modal-dialog-centered">
  1095. <div class="modal-content">
  1096. <div class="modal-header">
  1097. <h4 class="modal-title">上传文件</h4>
  1098. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1099. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1100. </button>
  1101. </div>
  1102. <div class="modal-body">
  1103. </div>
  1104. <div class="modal-footer">
  1105. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1106. <button type="button" class="btn btn-primary waves-effect waves-themed">确认</button>
  1107. </div>
  1108. </div>
  1109. </div>
  1110. </div>
  1111. <!--BEGIN 生成发票-->
  1112. <div class="modal fade" id="create-invoice" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1113. <div class="modal-dialog modal-lg">
  1114. <div class="modal-content">
  1115. <div class="modal-header">
  1116. <h4 class="modal-title">生成发票</h4>
  1117. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1118. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1119. </button>
  1120. </div>
  1121. <div class="modal-body">
  1122. <div class="cldform clearfix">
  1123. <div class="cldform-item ">
  1124. <div class="cldform-label">发票类型<sup class="text-danger"><b>*</b></div>
  1125. <div class="cldform-control">
  1126. <div class="cldform-contarl-box cldform-contarl-textareabox" data-toggle="dropdown" aria-expanded="false"><span class="cldform-contarl-dropdown">请选择<i class="far fa-angle-down mt-1"></i></span></div>
  1127. <div class="dropdown-menu" style="width: 220px; position: absolute; will-change: top, left; top: 35px; left: 90px;" x-placement="bottom-start">
  1128. <button class="dropdown-item">增值税普通发票</button>
  1129. <button class="dropdown-item">增值税专用发票</button>
  1130. </div>
  1131. </div>
  1132. </div>
  1133. <div class="cldform-item">
  1134. <div class="cldform-label">发票代码<sup class="text-danger"><b>*</b></div>
  1135. <div class="cldform-control">
  1136. <textarea class="cldform-contarl-textarea" style="height:36px;width:100%"></textarea>
  1137. </div>
  1138. </div>
  1139. <div class="cldform-line"></div>
  1140. <div class="cldform-item">
  1141. <div class="cldform-label">起始编号<sup class="text-danger"><b>*</b></sup></div>
  1142. <div class="cldform-control">
  1143. <textarea class="cldform-contarl-textarea" style="height:36px;width:100%"></textarea>
  1144. </div>
  1145. </div>
  1146. <div class="cldform-line"></div>
  1147. <div class="cldform-item ">
  1148. <div class="cldform-label">生成数量<sup class="text-danger"><b>*</b></sup></div>
  1149. <div class="cldform-control">
  1150. <textarea class="cldform-contarl-textarea" style="height:36px;width:100%"></textarea>
  1151. </div>
  1152. </div>
  1153. <div class="cldform-line"></div>
  1154. <div class="cldform-item">
  1155. <div class="cldform-label">末张票号</div>
  1156. <div class="cldform-control">
  1157. <div class="cldform-contarl-box cldform-contarl-textareabox"><span>No.9872</span></div>
  1158. </div>
  1159. </div>
  1160. <div class="cldform-line"></div>
  1161. </div>
  1162. </div>
  1163. <div class="modal-footer">
  1164. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1165. <button type="button" class="btn btn-primary waves-effect waves-themed">申请发票</button>
  1166. </div>
  1167. </div>
  1168. </div>
  1169. </div>
  1170. <!--BEGIN 关联发票-->
  1171. <div class="modal fade" id="link-invoice" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1172. <div class="modal-dialog modal-lg">
  1173. <div class="modal-content clearfix">
  1174. <div class="dialog-sheet">
  1175. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1176. <span aria-hidden="true"><i class="fal fa-times"></i></span>
  1177. </button>
  1178. <div class="m-4">
  1179. <div class="input-group bg-white shadow-inset-2">
  1180. <div class="input-group-prepend">
  1181. <span class="input-group-text bg-transparent border-right-0">
  1182. <i class="fal fa-search"></i>
  1183. </span>
  1184. </div>
  1185. <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="输入开票单位检索">
  1186. </div>
  1187. </div>
  1188. </div>
  1189. <div class="modal-search-height border-top border-bottom">
  1190. <div class="px-3 pt-3">
  1191. <div class="custom-control custom-radio custom-control-inline">
  1192. <input type="radio" class="custom-control-input" id="defaultInline1Radio" name="inlineDefaultRadiosExample" checked="">
  1193. <label class="custom-control-label" for="defaultInline1Radio">我的发票</label>
  1194. </div>
  1195. <div class="custom-control custom-radio custom-control-inline">
  1196. <input type="radio" class="custom-control-input" id="defaultInline2Radio" name="inlineDefaultRadiosExample">
  1197. <label class="custom-control-label" for="defaultInline2Radio">部门发票</label>
  1198. </div>
  1199. </div>
  1200. <div class="slimScrol2 p-4 modal-search-result">
  1201. <div class="card p-3 mb-3">
  1202. <div class="row">
  1203. <div class="col-5 pr-0">珠海纵横创新软件有限公司<br><a href="#">#F20160316003</a></div>
  1204. <div class="col-4 pr-0">纵横公路工程造价管理系统V9.0</div>
  1205. <div class="col-auto pr-0">¥3000.00</div>
  1206. <div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">关联</a></div>
  1207. </div>
  1208. </div>
  1209. <div class="card p-3 mb-3">
  1210. <div class="row">
  1211. <div class="col-5 pr-0">珠海纵横创新软件有限公司<br><a href="#">#F20160316005</a></div>
  1212. <div class="col-4 pr-0">纵横公路工程造价管理系统V9.0</div>
  1213. <div class="col-auto pr-0">¥3000.00<sup class="text-danger">专</sup></div>
  1214. <div class="col-auto ml-auto pl-0"><a href="#" class="btn btn-xs btn-outline-primary">关联</a></div>
  1215. </div>
  1216. </div>
  1217. <p class="text-muted text-center">仅显示最近30张发票</p>
  1218. </div>
  1219. </div>
  1220. </div>
  1221. </div>
  1222. </div>
  1223. <!-- BEGIN应用切换 -->
  1224. <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog" aria-labelledby="modal-shortcut" aria-hidden="true">
  1225. <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
  1226. <div class="modal-content">
  1227. <div class="modal-body">
  1228. <ul class="app-list w-auto h-auto p-0 text-left">
  1229. <li>
  1230. <a href="#" class="app-list-item text-white">
  1231. <div class='icon-stack'>
  1232. <i class="base base-5 icon-stack-3x opacity-100 color-primary-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-primary-500"></i> <i class="fas fa-chess icon-stack-2x opacity-100 color-white"></i>
  1233. </div>
  1234. <span class="app-list-name">
  1235. 工作台
  1236. </span>
  1237. </a>
  1238. </li>
  1239. <li>
  1240. <a href="#" class="app-list-item text-white">
  1241. <div class='icon-stack'>
  1242. <i class="base base-5 icon-stack-3x opacity-100 color-info-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-info-500"></i> <i class="fas fa-address-book icon-stack-2x opacity-100 color-white"></i>
  1243. </div>
  1244. <span class="app-list-name">
  1245. 客户
  1246. </span>
  1247. </a>
  1248. </li>
  1249. <li>
  1250. <a href="#" class="app-list-item text-white">
  1251. <div class='icon-stack'>
  1252. <i class="base base-5 icon-stack-3x opacity-100 color-danger-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-danger-500"></i> <i class="fas fa-box icon-stack-2x opacity-100 color-white"></i>
  1253. </div>
  1254. <span class="app-list-name">
  1255. 产品
  1256. </span>
  1257. </a>
  1258. </li>
  1259. <li>
  1260. <a href="#" class="app-list-item text-white">
  1261. <div class='icon-stack'>
  1262. <i class="base base-5 icon-stack-3x opacity-100 color-warning-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-warning-500"></i> <i class="fas fa-credit-card-front icon-stack-2x opacity-100 color-white"></i>
  1263. </div>
  1264. <span class="app-list-name">
  1265. 开票合同
  1266. </span>
  1267. </a>
  1268. </li>
  1269. <li>
  1270. <a href="#" class="app-list-item text-white">
  1271. <div class='icon-stack'>
  1272. <i class="base base-5 icon-stack-3x opacity-100 color-success-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i> <i class="fas fa-clipboard-list icon-stack-2x opacity-100 color-white"></i>
  1273. </div>
  1274. <span class="app-list-name">
  1275. 财务费用
  1276. </span>
  1277. </a>
  1278. </li>
  1279. <li>
  1280. <a href="#" class="app-list-item text-white">
  1281. <div class='icon-stack'>
  1282. <i class="base base-5 icon-stack-3x opacity-100 color-info-300"></i> <i class="base base-7 icon-stack-2x opacity-100 color-info-200"></i> <i class="fas fa-alarm-clock icon-stack-2x opacity-100 color-white"></i>
  1283. </div>
  1284. <span class="app-list-name">
  1285. 考勤
  1286. </span>
  1287. </a>
  1288. </li>
  1289. <li>
  1290. <a href="#" class="app-list-item text-white">
  1291. <div class='icon-stack'>
  1292. <i class="base base-5 icon-stack-3x opacity-100 color-fusion-300"></i> <i class="base base-7 icon-stack-2x opacity-100 color-fusion-200"></i> <i class="fas fa-users icon-stack-2x opacity-100 color-white"></i>
  1293. </div>
  1294. <span class="app-list-name">
  1295. 人资
  1296. </span>
  1297. </a>
  1298. </li>
  1299. <li>
  1300. <a href="#" class="app-list-item text-white">
  1301. <div class='icon-stack'>
  1302. <i class="base base-5 icon-stack-3x opacity-100 color-danger-300"></i> <i class="base base-14 icon-stack-2x opacity-100 color-danger-200"></i> <i class="fas fa-id-card icon-stack-2x opacity-100 color-white"></i>
  1303. </div>
  1304. <span class="app-list-name">
  1305. 我的纵横
  1306. </span>
  1307. </a>
  1308. </li>
  1309. </ul>
  1310. </div>
  1311. </div>
  1312. </div>
  1313. </div>
  1314. <!--BEGIN 筛选-->
  1315. <div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  1316. <div class="modal-dialog">
  1317. <div class="modal-content">
  1318. <div class="modal-header">
  1319. <h4 class="modal-title">自定义筛选</h4>
  1320. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fal fa-times"></i></span></button>
  1321. </div>
  1322. <div class="modal-body">
  1323. <!--条件1-->
  1324. <div class="form-group">
  1325. <label class="form-label d-flex" for="dropdown-on-left">姓名<a href="#" class="ml-auto" title="移除条件"><i class="fal fa-times"></i></a></label>
  1326. <div class="input-group">
  1327. <div class="input-group-prepend">
  1328. <button class="btn btn-outline-default dropdown-toggle waves-effect waves-themed" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">包含</button>
  1329. <div class="dropdown-menu" x-placement="bottom-start">
  1330. <a class="dropdown-item" href="#">包含</a>
  1331. <a class="dropdown-item" href="#">不包含</a>
  1332. <a class="dropdown-item" href="#">是</a>
  1333. <a class="dropdown-item" href="#">不是</a>
  1334. <a class="dropdown-item" href="#">开头为</a>
  1335. <a class="dropdown-item" href="#">结尾为</a>
  1336. <a class="dropdown-item" href="#">空</a>
  1337. <a class="dropdown-item" href="#">不为空</a>
  1338. </div>
  1339. </div>
  1340. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="dropdown-on-left">
  1341. <div class="input-group-append">
  1342. <button class="btn btn-outline-default dropdown-toggle waves-effect waves-themed" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">且</button>
  1343. <div class="dropdown-menu" x-placement="bottom-start">
  1344. <a class="dropdown-item" href="#">或</a>
  1345. </div>
  1346. </div>
  1347. </div>
  1348. </div>
  1349. <!--条件2-->
  1350. <div class="form-group">
  1351. <label class="form-label d-flex" for="dropdown-on-left">姓名<a href="#" class="ml-auto" title="移除条件"><i class="fal fa-times"></i></a></label>
  1352. <div class="input-group">
  1353. <div class="input-group-prepend">
  1354. <button class="btn btn-outline-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">包含</button>
  1355. <div class="dropdown-menu" x-placement="bottom-start">
  1356. <a class="dropdown-item" href="#">包含</a>
  1357. <a class="dropdown-item" href="#">不包含</a>
  1358. <a class="dropdown-item" href="#">是</a>
  1359. <a class="dropdown-item" href="#">不是</a>
  1360. <a class="dropdown-item" href="#">开头为</a>
  1361. <a class="dropdown-item" href="#">结尾为</a>
  1362. <a class="dropdown-item" href="#">空</a>
  1363. <a class="dropdown-item" href="#">不为空</a>
  1364. </div>
  1365. </div>
  1366. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="dropdown-on-left">
  1367. <div class="input-group-append">
  1368. <button class="btn btn-outline-default disabled" type="button">且</button>
  1369. </div>
  1370. </div>
  1371. </div>
  1372. <!--条件3--><!--
  1373. <div class="form-group">
  1374. <label class="form-label d-flex" for="dropdown-on-left">姓名<a href="#" class="ml-auto" title="移除条件"><i class="fal fa-times"></i></a></label>
  1375. <div class="input-group">
  1376. <div class="input-group-prepend">
  1377. <button class="btn btn-outline-default dropdown-toggle waves-effect waves-themed" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">包含</button>
  1378. <div class="dropdown-menu" x-placement="bottom-start">
  1379. <a class="dropdown-item" href="#">包含</a>
  1380. <a class="dropdown-item" href="#">不包含</a>
  1381. <a class="dropdown-item" href="#">是</a>
  1382. <a class="dropdown-item" href="#">不是</a>
  1383. <a class="dropdown-item" href="#">开头为</a>
  1384. <a class="dropdown-item" href="#">结尾为</a>
  1385. <a class="dropdown-item" href="#">空</a>
  1386. <a class="dropdown-item" href="#">不为空</a>
  1387. </div>
  1388. </div>
  1389. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="dropdown-on-left">
  1390. </div>
  1391. </div> -->
  1392. <!--条件 个人标签-->
  1393. <div class="form-group">
  1394. <label class="form-label d-flex" for="dropdown-on-left">个人标签<a href="#" class="ml-auto" title="移除条件"><i class="fal fa-times"></i></a></label>
  1395. <div class="input-group">
  1396. <div class="input-group-prepend">
  1397. <button class="btn btn-outline-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">是</button>
  1398. <div class="dropdown-menu" x-placement="bottom-start">
  1399. <a class="dropdown-item" href="#">是</a>
  1400. <a class="dropdown-item" href="#">不是</a>
  1401. <a class="dropdown-item" href="#">空</a>
  1402. <a class="dropdown-item" href="#">不为空</a>
  1403. </div>
  1404. </div>
  1405. <!--添加标签-->
  1406. <div class="form-control">
  1407. <!--已标签-->
  1408. <i class="fas fa-circle tagcol-01-s mr-1"></i>
  1409. <i class="fas fa-circle tagcol-03-s mr-1"></i>
  1410. <!--添加标签按钮-->
  1411. <a href="javascript:void" class="text-primary" title="添加标签" data-toggle="dropdown"><i class="far fa-plus"></i></a>
  1412. <div class="dropdown-menu">
  1413. <ul class="list-unstyled px-3 pt-2 mb-0">
  1414. <li class="mb-1">
  1415. <div class="input-group bg-white shadow-inset-2">
  1416. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-01-s mr-2"></i>这是一条标签名字很长很长的标签</span>
  1417. <div class="input-group-append">
  1418. <div class="input-group-text border-left-0 bg-transparent">
  1419. <div class="custom-control custom-checkbox">
  1420. <input type="checkbox" class="custom-control-input" id="tabcheck1">
  1421. <label class="custom-control-label" for="tabcheck1"></label>
  1422. </div>
  1423. </div>
  1424. </div>
  1425. </div>
  1426. </li>
  1427. <li class="mb-1">
  1428. <div class="input-group bg-white shadow-inset-2">
  1429. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-02-s mr-2"></i>标签2</span>
  1430. <div class="input-group-append">
  1431. <div class="input-group-text border-left-0 bg-transparent">
  1432. <div class="custom-control custom-checkbox">
  1433. <input type="checkbox" class="custom-control-input" id="tabcheck2">
  1434. <label class="custom-control-label" for="tabcheck2"></label>
  1435. </div>
  1436. </div>
  1437. </div>
  1438. </div>
  1439. </li>
  1440. <li class="mb-1">
  1441. <div class="input-group bg-white shadow-inset-2">
  1442. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-03-s mr-2"></i>标签3</span>
  1443. <div class="input-group-append">
  1444. <div class="input-group-text border-left-0 bg-transparent">
  1445. <div class="custom-control custom-checkbox">
  1446. <input type="checkbox" class="custom-control-input" id="tabcheck3">
  1447. <label class="custom-control-label" for="tabcheck3"></label>
  1448. </div>
  1449. </div>
  1450. </div>
  1451. </div>
  1452. </li>
  1453. <li class="mb-1">
  1454. <div class="input-group bg-white shadow-inset-2">
  1455. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-04-s mr-2"></i>标签4</span>
  1456. <div class="input-group-append">
  1457. <div class="input-group-text border-left-0 bg-transparent">
  1458. <div class="custom-control custom-checkbox">
  1459. <input type="checkbox" class="custom-control-input" id="tabcheck4">
  1460. <label class="custom-control-label" for="tabcheck4"></label>
  1461. </div>
  1462. </div>
  1463. </div>
  1464. </div>
  1465. </li>
  1466. <li class="mb-1">
  1467. <div class="input-group bg-white shadow-inset-2">
  1468. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-05-s mr-2"></i>标签5</span>
  1469. <div class="input-group-append">
  1470. <div class="input-group-text border-left-0 bg-transparent">
  1471. <div class="custom-control custom-checkbox">
  1472. <input type="checkbox" class="custom-control-input" id="tabcheck5">
  1473. <label class="custom-control-label" for="tabcheck5"></label>
  1474. </div>
  1475. </div>
  1476. </div>
  1477. </div>
  1478. </li>
  1479. <li class="mb-1">
  1480. <div class="input-group bg-white shadow-inset-2">
  1481. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-06-s mr-2"></i>标签6</span>
  1482. <div class="input-group-append">
  1483. <div class="input-group-text border-left-0 bg-transparent">
  1484. <div class="custom-control custom-checkbox">
  1485. <input type="checkbox" class="custom-control-input" id="tabcheck6">
  1486. <label class="custom-control-label" for="tabcheck6"></label>
  1487. </div>
  1488. </div>
  1489. </div>
  1490. </div>
  1491. </li>
  1492. <li class="mb-1">
  1493. <div class="input-group bg-white shadow-inset-2">
  1494. <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-07-s mr-2"></i>标签7</span>
  1495. <div class="input-group-append">
  1496. <div class="input-group-text border-left-0 bg-transparent">
  1497. <div class="custom-control custom-checkbox">
  1498. <input type="checkbox" class="custom-control-input" id="tabcheck7">
  1499. <label class="custom-control-label" for="tabcheck7"></label>
  1500. </div>
  1501. </div>
  1502. </div>
  1503. </div>
  1504. </li>
  1505. </ul>
  1506. </div><!--添加标签 end-->
  1507. </div>
  1508. </div>
  1509. </div>
  1510. <!--添加条件-->
  1511. <div class="form-group">
  1512. <a class="btn btn-xs text-primary dropdown-toggle no-arrow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far fa-plus"></i> 添加筛选条件</a>
  1513. <div class="dropdown-menu" x-placement="bottom-start">
  1514. <a class="dropdown-item" href="#">姓名</a>
  1515. <a class="dropdown-item" href="#">公司</a>
  1516. <a class="dropdown-item" href="#">手机</a>
  1517. <a class="dropdown-item" href="#">电话</a>
  1518. <a class="dropdown-item" href="#">QQ</a>
  1519. <a class="dropdown-item" href="#">个人标签</a>
  1520. <a class="dropdown-item" href="#">部门</a>
  1521. <a class="dropdown-item" href="#">职务</a>
  1522. <a class="dropdown-item" href="#">办公室</a>
  1523. <a class="dropdown-item" href="#">地址</a>
  1524. <a class="dropdown-item" href="#">乘车</a>
  1525. <a class="dropdown-item" href="#">地标</a>
  1526. <a class="dropdown-item" href="#">住宿</a>
  1527. </div>
  1528. </div>
  1529. </div>
  1530. <div class="modal-footer">
  1531. <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
  1532. <button type="button" class="btn btn-primary waves-effect waves-themed">确定</button>
  1533. </div>
  1534. </div>
  1535. </div>
  1536. </div>
  1537. </body>
  1538. <!-- base vendor bundle:
  1539. DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
  1540. + pace.js (recommended)
  1541. + jquery.js (core)
  1542. + jquery-ui-cust.js (core)
  1543. + popper.js (core)
  1544. + bootstrap.js (core)
  1545. + slimscroll.js (extension)
  1546. + app.navigation.js (core)
  1547. + ba-throttle-debounce.js (core)
  1548. + waves.js (extension)
  1549. + smartpanels.js (extension)
  1550. + src/../jquery-snippets.js (core) -->
  1551. <script src="js/vendors.bundle.js"></script>
  1552. <script src="js/app.bundle.js"></script>
  1553. <script src="js/cld-custom.js"></script>
  1554. <script src="js/formplugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
  1555. <script>
  1556. // Class definition
  1557. var controls = {
  1558. leftArrow: '<i class="fal fa-angle-left" style="font-size: 1.25rem"></i>',
  1559. rightArrow: '<i class="fal fa-angle-right" style="font-size: 1.25rem"></i>'
  1560. }
  1561. var runDatePicker = function()
  1562. {
  1563. // minimum setup
  1564. $('#datepicker-1').datepicker(
  1565. {
  1566. todayHighlight: true,
  1567. orientation: "bottom left",
  1568. templates: controls
  1569. });
  1570. // input group layout
  1571. $('#datepicker-2').datepicker(
  1572. {
  1573. todayHighlight: true,
  1574. orientation: "bottom left",
  1575. templates: controls
  1576. });
  1577. // input group layout for modal demo
  1578. $('#datepicker-modal-2').datepicker(
  1579. {
  1580. todayHighlight: true,
  1581. orientation: "bottom left",
  1582. templates: controls
  1583. });
  1584. // enable clear button
  1585. $('#datepicker-3').datepicker(
  1586. {
  1587. todayBtn: "linked",
  1588. clearBtn: true,
  1589. todayHighlight: true,
  1590. templates: controls
  1591. });
  1592. // enable clear button for modal demo
  1593. $('#datepicker-modal-3').datepicker(
  1594. {
  1595. todayBtn: "linked",
  1596. clearBtn: true,
  1597. todayHighlight: true,
  1598. templates: controls
  1599. });
  1600. // orientation
  1601. $('#datepicker-4-1').datepicker(
  1602. {
  1603. orientation: "top left",
  1604. todayHighlight: true,
  1605. templates: controls
  1606. });
  1607. $('#datepicker-4-2').datepicker(
  1608. {
  1609. orientation: "top right",
  1610. todayHighlight: true,
  1611. templates: controls
  1612. });
  1613. $('#datepicker-4-3').datepicker(
  1614. {
  1615. orientation: "bottom left",
  1616. todayHighlight: true,
  1617. templates: controls
  1618. });
  1619. $('#datepicker-4-4').datepicker(
  1620. {
  1621. orientation: "bottom right",
  1622. todayHighlight: true,
  1623. templates: controls
  1624. });
  1625. // range picker
  1626. $('#datepicker-5').datepicker(
  1627. {
  1628. todayHighlight: true,
  1629. templates: controls
  1630. });
  1631. // inline picker
  1632. $('#datepicker-6').datepicker(
  1633. {
  1634. todayHighlight: true,
  1635. templates: controls
  1636. });
  1637. }
  1638. $(document).ready(function()
  1639. {
  1640. runDatePicker();
  1641. });
  1642. </script>
  1643. <script type="text/javascript">
  1644. autoFlashHeight();
  1645. $('.slimScroll1').slimScroll({
  1646. position: 'right',
  1647. height: 'auto',
  1648. railVisible: true
  1649. });
  1650. $('.slimScrol2').slimScroll({
  1651. position: 'right',
  1652. height: 'auto',
  1653. railVisible: true
  1654. });
  1655. $('.slimScrol3').slimScroll({
  1656. position: 'right',
  1657. height: 'auto',
  1658. railVisible: true
  1659. });
  1660. $('.slimScrol4').slimScroll({
  1661. position: 'right',
  1662. height: 'auto',
  1663. railVisible: true
  1664. });
  1665. if(window.devicePixelRatio == 2 )
  1666. $("body").addClass("zoom2x");
  1667. </script>
  1668. </html>