contract_stop.html 54 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorate="~{admin/common/common}">
  5. <head>
  6. <title>新增合同</title>
  7. </head>
  8. <body layout:fragment="content">
  9. <style>
  10. .col-sm-2 {
  11. width: 14.666667%
  12. }
  13. .width-180 {
  14. width: 180px
  15. }
  16. /*.width-80 {*/
  17. /*width: 80px*/
  18. /*}*/
  19. .width-25 {
  20. width: 25px
  21. }
  22. label.error {
  23. position: initial !important;
  24. display: block;
  25. !important;
  26. }
  27. .line {
  28. display: block;
  29. text-align: left;
  30. text-align: left;
  31. background-color: #fff;
  32. color: #333;
  33. border-bottom: 1px solid #0a6999;
  34. border-color: #fff;
  35. border-bottom: 1px solid #0a6999;
  36. margin-top: 10px;
  37. vertical-align: middle;
  38. padding: 4px 12px;
  39. height: 31px;
  40. line-height: 31px;
  41. font-size: 14px;
  42. font-weight: bold;
  43. }
  44. </style>
  45. <article class="page-container">
  46. <form class="form form-horizontal" id="form-contract-stop">
  47. <input type="hidden" th:id="id" th:name="id" th:value="${contract.id}"/>
  48. <input type="hidden" id="contract_no" th:name="contract_no" th:value="${contract.contract_no}"/>
  49. <input type="hidden" id="company_name" th:name="company_name" th:value="${contract.company_name}"/>
  50. <input type="hidden" id="company_id" th:name="company_id" th:value="${contract.company_id}"/>
  51. <input type="hidden" id="is_tenancy" th:name="is_tenancy" th:value="${contract.is_tenancy}"/>
  52. <input type="hidden" id="is_property" th:name="is_property" th:value="${contract.is_property}"/>
  53. <input type="hidden" id="is_parking" th:name="is_parking" th:value="${contract.is_parking}"/>
  54. <input type="hidden" id="is_water" th:name="is_water" th:value="${contract.is_water}"/>
  55. <input type="hidden" id="is_electric" th:name="is_electric" th:value="${contract.is_electric}"/>
  56. <div class="line">基本信息</div>
  57. <div class="row cl">
  58. <label class="form-label col-xs-4 col-sm-2">合同编号:</label>
  59. <div class="formControls col-xs-8 col-sm-4">
  60. [[${contract.contract_no}]]
  61. </div>
  62. </div>
  63. <div class="row cl">
  64. <label class="form-label col-xs-4 col-sm-2">企业名称:</label>
  65. <div class="formControls col-xs-8 col-sm-4">
  66. [[${contract.company_name}]]
  67. </div>
  68. </div>
  69. <div class="row cl">
  70. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>合同终止日期:</label>
  71. <div class="formControls col-xs-8 col-sm-4">
  72. <input type="text" id="contract_terminate_date" th:name="contract_terminate_date" required
  73. class="input-text">
  74. <input type="hidden" id="contract_end_date" th:value="${contract.contract_end_date}"/>
  75. </div>
  76. </div>
  77. <div class="row cl" th:if="${is_tenancy}">
  78. <label class="form-label col-xs-4 col-sm-2">已收押金(元):</label>
  79. <div class="formControls col-xs-8 col-sm-4">
  80. [[${contract.deposit_fee}]]
  81. </div>
  82. </div>
  83. <div class="row cl" th:if="${is_tenancy}">
  84. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>退还押金(元):</label>
  85. <div class="formControls col-xs-8 col-sm-4">
  86. <input type="text" class="input-text" required maxlength="20" number="true" min="0"
  87. th:name="returned_deposit_fee"/>
  88. </div>
  89. </div>
  90. <div class="row cl">
  91. <label class="form-label col-xs-4 col-sm-2">其他费用(元):</label>
  92. <div class="formControls col-xs-8 col-sm-4">
  93. <input type="text" class="input-text" maxlength="20" number="true" th:name="final_fee"/>
  94. </div>
  95. </div>
  96. <div class="row cl">
  97. <label class="form-label col-xs-4 col-sm-2">备注:</label>
  98. <div class="formControls col-xs-8 col-sm-9">
  99. <textarea name="" cols="" rows="" th:name="final_remark" class="textarea" placeholder="说点什么..."
  100. dragonfly="true" onKeyUp="$.Huitextarealength(this,200)"></textarea>
  101. </div>
  102. </div>
  103. <div id="fee">
  104. <div th:if="${contract.is_tenancy}">
  105. <div class="line">房租费用</div>
  106. <div>
  107. <!-- <div ><i class="Hui-iconfont" onclick="addTenancyLine()">&#xe600;</i></div> -->
  108. <table id="tenancyTb" style="margin-top: 15px"
  109. class="table table-border table-bordered table-bg table-hover">
  110. <thead>
  111. <tr class="text-c">
  112. <th width="70">缴费期数</th>
  113. <th>开始日期</th>
  114. <th>结束日期</th>
  115. <th>应缴房租(元)</th>
  116. <th>已缴房租(元)</th>
  117. <th>应缴费日期</th>
  118. <th>缴费状态</th>
  119. <th>备注</th>
  120. </tr>
  121. </thead>
  122. <tbody class="pre_tenancy_line" id="pre_tenancy_line">
  123. <tr th:object="${tenancy}" class="text-c">
  124. <td>
  125. <span>上 期</span>
  126. <input type="hidden" id="preTenancyId" th:value="*{id}"/>
  127. </td>
  128. <td class="period_start_date"
  129. th:text="*{#dates.format(period_start_date, 'yyyy-MM-dd')}"></td>
  130. <td class="period_end_date" th:text="*{#dates.format(period_end_date, 'yyyy-MM-dd')}"></td>
  131. <td class="house_fee" th:text="*{house_fee}"></td>
  132. <td class="paid_house_fee" th:text="*{paid_house_fee}"></td>
  133. <td class="pay_time" th:text="*{#dates.format(pay_time, 'yyyy-MM-dd')}"></td>
  134. <td class="td-status status">
  135. <span class="label radius" th:if="*{status}==0">未缴款</span>
  136. <span class="label radius label-success" th:if="*{status}==2">已缴款</span>
  137. <span class="label radius" th:if="*{status}==1">部分缴款</span>
  138. </td>
  139. <td class="remark" th:text="*{remark}"></td>
  140. </tr>
  141. <tr id="lastTenancyfee" style="display:none;" class="text-c">
  142. <td>
  143. <span>末 期</span>
  144. <input type="hidden" class="id" name="lastTenancy.id"/>
  145. </td>
  146. <td>
  147. <input type="text" th:name="lastTenancy.period_start_date"
  148. id="lastTenancy_datemin" class="input-text period_start_date">
  149. </td>
  150. <td>
  151. <input type="text" th:name="lastTenancy.period_end_date"
  152. id="lastTenancy_datemax"
  153. class="input-text period_end_date">
  154. </td>
  155. <td><input type="text" class="input-text width-80 house_fee" required maxlength="20"
  156. number="true" min="0" th:name="lastTenancy.house_fee"/></td>
  157. <td><input type="text" class="input-text width-80 paid_house_fee" required maxlength="20"
  158. number="true" min="0" th:name="lastTenancy.paid_house_fee"/></td>
  159. <td>
  160. <input type="text" th:name="lastTenancy.pay_time"
  161. id="lastTenancy_pay_time"
  162. class="input-text pay_time" required>
  163. </td>
  164. <td>
  165. <span class="select-box">
  166. <select class="select status" required th:name="lastTenancy.status">
  167. <option value="0" selected="selected">未缴费</option>
  168. <option value="1">已缴费</option>
  169. <option value="2">部分缴费</option>
  170. </select>
  171. </span>
  172. </td>
  173. <td><input type="text" class="input-text width-80 remark" th:name="lastTenancy.remark"/>
  174. </td>
  175. </tr>
  176. </tbody>
  177. </table>
  178. </div>
  179. </div>
  180. <div th:if="${contract.is_property}">
  181. <div class="line">物业费</div>
  182. <table id="propertyTb" style="margin-top: 15px"
  183. class="table table-border table-bordered table-bg table-hover">
  184. <thead>
  185. <tr class="text-c">
  186. <th>费用项</th>
  187. <th>开始日期</th>
  188. <th>结束日期</th>
  189. <th>总金额(元)</th>
  190. <th>应缴日期</th>
  191. <th>状态</th>
  192. <th>备注</th>
  193. </tr>
  194. </thead>
  195. <tbody>
  196. <tr id="pre_property_line" class="text-c" th:object="${property}">
  197. <td>
  198. <span>上期</span>
  199. <input type="hidden" id="prePropertyId" th:value="*{id}"/>
  200. </td>
  201. <td class="period_start_date" th:text="*{#dates.format(period_start_date, 'yyyy-MM-dd')}"></td>
  202. <td class="period_end_date" th:text="*{#dates.format(period_end_date, 'yyyy-MM-dd')}"></td>
  203. <td class="total_fee" th:text="(*{price})*(*{number})*(*{payment_cycle})"></td>
  204. <td th:text="*{#dates.format(pay_time, 'yyyy-MM-dd')}"></td>
  205. <td class="td-status">
  206. <span class="label radius" th:unless="*{actural_paid_date}">未缴费</span>
  207. <span class="label radius label-success" th:if="*{actural_paid_date}">已缴费</span>
  208. </td>
  209. <td th:text="*{remarks}"></td>
  210. </tr>
  211. <tr id="lastPropertyfee" class="text-c" style="display:none;">
  212. <td>末期<input type="hidden" class="id" id="lastPropertyId" name="lastProperty.id"/></td>
  213. <td>
  214. <input type="text" th:name="lastProperty.period_start_date"
  215. id="lastProperty_datemin" class="input-text period_start_date">
  216. </td>
  217. <td>
  218. <input type="text" th:name="lastProperty.period_end_date"
  219. id="lastProperty_period_end_date" class="input-text period_end_date">
  220. </td>
  221. <td><input type="text" class="input-text width-80 total_fee" required maxlength="20"
  222. number="true"
  223. min="0" th:name="lastProperty.total_fee"/></td>
  224. <td>
  225. <input type="text" th:name="lastProperty.pay_time" id="lastProperty_pay_time"
  226. class="input-text pay_time" required>
  227. </td>
  228. <td>
  229. <span class="select-box">
  230. <select class="select is_paid" required th:name="lastProperty.is_paid">
  231. <option value="0" selected="selected">未缴费</option>
  232. <option value="1">已缴费</option>
  233. </select>
  234. </span>
  235. </td>
  236. <td><input type="text" class="input-text width-80 remark" th:name="lastProperty.remark"/></td>
  237. </tr>
  238. </tbody>
  239. </table>
  240. </div>
  241. <div th:if="${contract.is_parking}">
  242. <div class="line">停车费</div>
  243. <table id="propertyTb" style="margin-top: 15px"
  244. class="table table-border table-bordered table-bg table-hover">
  245. <thead>
  246. <tr class="text-c">
  247. <th>费用项</th>
  248. <th>开始日期</th>
  249. <th>结束日期</th>
  250. <th>总金额(元)</th>
  251. <th>应缴日期</th>
  252. <th>状态</th>
  253. <th>备注</th>
  254. </tr>
  255. </thead>
  256. <tbody>
  257. <tr id="pre_parking_line" class="text-c" th:object="${parking}">
  258. <td>
  259. <span>上期</span>
  260. <input type="hidden" id="preParkingId" th:value="*{id}"/>
  261. </td>
  262. <td class="period_start_date" th:text="*{#dates.format(period_start_date, 'yyyy-MM-dd')}"></td>
  263. <td class="period_end_date" th:text="*{#dates.format(period_end_date, 'yyyy-MM-dd')}"></td>
  264. <td th:text="(*{price})*(*{number})*(*{payment_cycle})"></td>
  265. <td th:text="*{#dates.format(pay_time, 'yyyy-MM-dd')}"></td>
  266. <td class="td-status">
  267. <span class="label radius" th:unless="*{actural_paid_date}">未缴费</span>
  268. <span class="label radius label-success" th:if="*{actural_paid_date}">已缴费</span>
  269. </td>
  270. <td th:text="*{remarks}"></td>
  271. </tr>
  272. <tr id="lastParkingfee" class="text-c" style="display:none;">
  273. <td>末期<input type="hidden" class="id" id="lastParkingId" name="lastParking.id"/></td>
  274. <td>
  275. <input type="text" th:name="lastParking.period_start_date"
  276. id="lastParking_period_start_date" class="input-text period_start_date">
  277. </td>
  278. <td>
  279. <input type="text" th:name="lastParking.period_end_date"
  280. id="lastParking_period_end_date"
  281. class="input-text period_end_date">
  282. </td>
  283. <td><input type="text" class="input-text width-80 total_fee" required maxlength="20"
  284. number="true"
  285. min="0" th:name="lastParking.total_fee"/></td>
  286. <td>
  287. <input type="text" th:name="lastParking.pay_time"
  288. id="lastParking_pay_time"
  289. class="input-text pay_time" required>
  290. </td>
  291. <td>
  292. <span class="select-box">
  293. <select class="select status is_paid" required th:name="lastParking.is_paid">
  294. <option value="0" th:selected="selected">未缴费</option>
  295. <option value="1">已缴费</option>
  296. </select>
  297. </span>
  298. </td>
  299. <td><input type="text" class="input-text width-80 remark" th:name="lastParking.remark"/></td>
  300. </tr>
  301. </tbody>
  302. </table>
  303. </div>
  304. <div th:if="${contract.is_water}">
  305. <div class="line">水费</div>
  306. <div class="row cl">
  307. <input type="hidden" value="true" name="waterRecord.is_water"/>
  308. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>抄表日期:</label>
  309. <div class="formControls col-xs-8 col-sm-9">
  310. <input type="text" th:name="waterRecord.record_date" required id="water_record_date"
  311. class="input-text">
  312. </div>
  313. </div>
  314. <table style="margin-top: 15px" class="table table-border table-bordered table-bg table-hover">
  315. <thead>
  316. <tr class="text-c">
  317. <th>水表名</th>
  318. <th>是否共用</th>
  319. <th>上期抄表日</th>
  320. <th>上期读数</th>
  321. <th>本期抄表日</th>
  322. <th>本期读数</th>
  323. <th>总吨数</th>
  324. </tr>
  325. </thead>
  326. <tbody>
  327. <tr class="text-c water_length" th:attr="water_length=${#lists.size(contractWaters)}"
  328. th:each="contractWater,iterStat:${contractWaters}" th:object="${contractWater}">
  329. <td>[[*{water_name}]]
  330. <input type="hidden" class="input-text" th:value="*{water_name}"
  331. th:name="'waterRecord.waterReads['+${iterStat.index}+'].water_name'"/>
  332. <input type="hidden" class="input-text" th:value="*{water_id}"
  333. th:name="'waterRecord.waterReads['+${iterStat.index}+'].water_id'"/>
  334. </td>
  335. <td>
  336. <span th:if="*{waterRead.is_common}">是</span>
  337. <span th:unless="*{waterRead.is_common}">否</span>
  338. </td>
  339. <td>
  340. <input type="hidden" class="input-text" th:value="*{waterRead.meter_write}"
  341. th:name="'waterRecord.waterReads['+${iterStat.index}+'].meter_write_before'"/>
  342. <span class="water_meter_write_before">[[*{waterRead.meter_write}]]</span>
  343. </td>
  344. <td><input type="hidden" class="input-text" th:value="*{waterRead.water_current_read}"
  345. th:name="'waterRecord.waterReads['+${iterStat.index}+'].water_before_read'"/>
  346. <span class="water_before_read">[[*{waterRead.water_current_read}]]</span>
  347. </td>
  348. <td><input type="text" class="input-text meter_write_water readonly" required
  349. th:name="'waterRecord.waterReads['+${iterStat.index}+'].meter_write'" readonly/>
  350. </td>
  351. <td><input type="text" class="input-text" onchange="compareWaterRead(this)" required
  352. th:name="'waterRecord.waterReads['+${iterStat.index}+'].water_current_read'"
  353. number="true" min="0" max="99999.9999"/></td>
  354. <td><input type="text" th:name="'waterRecord.waterReads['+${iterStat.index}+'].use_water'"
  355. readonly class="input-text use_water readonly"/>
  356. </td>
  357. </tr>
  358. </tbody>
  359. </table>
  360. <div class="line"></div>
  361. <table class="table table-border table-bordered table-bg table-hover">
  362. <thead>
  363. <tr class="text-c">
  364. <th>水表名称</th>
  365. <th>用水量</th>
  366. <th>单价</th>
  367. <th>小计金额(元)</th>
  368. </tr>
  369. </thead>
  370. <tbody>
  371. <tr class="text-c water_read_company" th:each="contractWater,iterStat:${contractWaters}"
  372. th:object="${contractWater}">
  373. <input type="hidden" required class="input-text" th:value="${contract.company_name}"
  374. th:name="'waterRecord.waterReads['+${iterStat.index}+'].waterReadCompanies[0].company_name'"/>
  375. <input type="hidden" required class="input-text" th:value="${contract.company_id}"
  376. th:name="'waterRecord.waterReads['+${iterStat.index}+'].waterReadCompanies[0].company_id'"/>
  377. <td th:text="*{water_name}"></td>
  378. <td><input type="text" class="input-text use_water" required number="true"
  379. min="0"
  380. max="999.9999"
  381. th:name="'waterRecord.waterReads['+${iterStat.index}+'].waterReadCompanies[0].use_water'"
  382. th:onchange="'initTotalFee('+${iterStat.index}+');'"/></td>
  383. <td>
  384. <input type="text" required number="true" min="0" max="999.9999"
  385. class="input-text water_price"
  386. th:onchange="'initTotalFee('+${iterStat.index}+');'"
  387. th:name="'waterRecord.waterReads['+${iterStat.index}+'].waterReadCompanies[0].water_price'"/>
  388. </td>
  389. <td><input type="text" class="input-text total_fee readonly" readonly
  390. th:name="'waterRecord.waterReads['+${iterStat.index}+'].waterReadCompanies[0].total_fee'"/>
  391. </td>
  392. </tr>
  393. <tr class="text-c">
  394. <td scope="col" colspan="3">其他费用</td>
  395. <td>
  396. <input type="text" class="input-text water_other_fee" number="true" min="0"
  397. max="999.9999" th:name="waterRecord.water_other_fee"
  398. onchange="initTotalFee();"/></td>
  399. </tr>
  400. <tr class="text-c">
  401. <td scope="col" colspan="2">合计</td>
  402. <td><input type="hidden" name="waterRecord.use_water"
  403. class="total_use_water"><span>用水量:</span><span
  404. id="total_use_water"></span><span>(吨)</span></td>
  405. <td><input type="text" class="input-text readonly water_fee" readonly
  406. th:name="waterRecord.water_fee"/></td>
  407. </tr>
  408. </tbody>
  409. </table>
  410. </div>
  411. <div th:if="${contract.is_electric}">
  412. <div class="line">电费</div>
  413. <div class="row cl">
  414. <input type="hidden" value="false" name="electricRecord.is_water"/>
  415. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>抄表日期:</label>
  416. <div class="formControls col-xs-8 col-sm-9">
  417. <input type="text" th:name="electricRecord.record_date" required id="electric_record_date"
  418. class="input-text">
  419. </div>
  420. </div>
  421. <table style="margin-top: 15px" class="table table-border table-bordered table-bg table-hover w2000">
  422. <thead>
  423. <tr class="text-c">
  424. <th class="w80">电表名</th>
  425. <th class="w80">是否共用</th>
  426. <th class="w60">倍率</th>
  427. <th class="w100">上期抄表日</th>
  428. <th class="w80">上期通用</th>
  429. <th class="w80">上期峰值</th>
  430. <th class="w80">上期平值</th>
  431. <th class="w80">上期谷值</th>
  432. <th class="w120">本期抄表日</th>
  433. <th class="w80">本期通用</th>
  434. <th class="w80">本期峰值</th>
  435. <th class="w80">本期平值</th>
  436. <th class="w80">本期谷值</th>
  437. <th class="w80">通用度数</th>
  438. <th class="w80">峰值度数</th>
  439. <th class="w80">平值度数</th>
  440. <th class="w80">谷值度数</th>
  441. </tr>
  442. </thead>
  443. <tbody>
  444. <tr class="text-c electric_length" th:attr="electric_length=${#lists.size(contractElectrics)}"
  445. th:each="contractElectric,iterStat:${contractElectrics}" th:object="${contractElectric}">
  446. <input type="hidden" class="input-text" th:value="*{id}"
  447. th:name="'electricRecord.electricReads['+${iterStat.index}+'].id'"/>
  448. <input type="hidden" class="input-text" th:value="*{electric_name}"
  449. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_name'"/>
  450. <td>[[*{electric_name}]]
  451. <input type="hidden" class="input-text" th:value="*{electric_id}"
  452. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_id'"/>
  453. </td>
  454. <td>
  455. <span th:if="*{electricRead.is_common}">是</span>
  456. <span th:unless="*{electricRead.is_common}">否</span>
  457. </td>
  458. <td class="ratio">
  459. [[*{electricRead.ratio}]]
  460. </td>
  461. <td>
  462. <input type="hidden" class="input-text" th:value="*{electricRead.meter_write}"
  463. th:name="'electricRecord.electricReads['+${iterStat.index}+'].meter_write_before'"/>
  464. <span class="electric_meter_write_before">[[*{electricRead.meter_write}]]</span>
  465. </td>
  466. <td>
  467. <input type="hidden" class="input-text" th:value="*{electricRead.meter_write}"
  468. th:name="'electricRecord.electricReads['+${iterStat.index}+'].meter_write'"/>
  469. <span class="electric_before_read">[[*{electricRead.electric_current_read}]]</span>
  470. </td>
  471. <td>
  472. <input type="hidden" class="input-text"
  473. th:value="*{electricRead.electric_peak_current_read}"
  474. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_peak_before_read'"/>
  475. <span class="electric_peak_before_read">[[*{electricRead.electric_peak_current_read}]]</span>
  476. </td>
  477. <td>
  478. <input type="hidden" class="input-text"
  479. th:value="*{electricRead.electric_flat_current_read}"
  480. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_flat_before_read'"/>
  481. <span class="electric_flat_before_read">[[*{electricRead.electric_flat_current_read}]]</span>
  482. </td>
  483. <td>
  484. <input type="hidden" class="input-text"
  485. th:value="*{electricRead.electric_valley_current_read}"
  486. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_valley_before_read'"/>
  487. <span class="electric_valley_before_read">[[*{electricRead.electric_valley_current_read}]]</span>
  488. </td>
  489. <td><input type="text" class="input-text meter_write_electric readonly"
  490. readonly th:name="'electricReads['+${iterStat.index}+'].meter_write'"/>
  491. </td>
  492. <td><input type="text" onchange="compareElectricRead(this)"
  493. th:class="*{electricRead.is_peak}? 'readonly input-text':'input-text'"
  494. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_current_read'"
  495. number="true"
  496. min="0" max="99999.9999"/>
  497. </td>
  498. <td><input type="text" onchange="comparePeakRead(this)"
  499. th:class="*{!electricRead.is_peak}? 'readonly input-text':'input-text'"
  500. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_peak_current_read'"
  501. number="true"
  502. min="0"
  503. max="99999.9999"/>
  504. </td>
  505. <td><input type="text" onchange="compareFlatRead(this)"
  506. th:class="*{!electricRead.is_peak}? 'readonly input-text':'input-text'"
  507. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_flat_current_read'"
  508. number="true"
  509. min="0"
  510. max="99999.9999"/>
  511. </td>
  512. <td><input type="text" class="input-text" onchange="compareValleyRead(this)"
  513. th:class="*{!electricRead.is_peak}? 'readonly input-text':'input-text'"
  514. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electric_valley_current_read'"
  515. number="true"
  516. min="0"
  517. max="99999.9999"/>
  518. </td>
  519. <td><input type="text"
  520. th:name="'electricRecord.electricReads['+${iterStat.index}+'].use_electric'"
  521. class="input-text readonly use_electric"/>
  522. </td>
  523. <td><input type="text"
  524. th:name="'electricRecord.electricReads['+${iterStat.index}+'].use_peak_electric'"
  525. class="input-text readonly use_peak_electric"/>
  526. </td>
  527. <td><input type="text"
  528. th:name="'electricRecord.electricReads['+${iterStat.index}+'].use_flat_electric'"
  529. class="input-text readonly use_flat_electric"/>
  530. </td>
  531. <td><input type="text"
  532. th:name="'electricRecord.electricReads['+${iterStat.index}+'].use_valley_electric'"
  533. class="input-text readonly use_valley_electric"/>
  534. </td>
  535. </tr>
  536. </tbody>
  537. </table>
  538. <div class="line"></div>
  539. <table class="table table-border table-bordered table-bg table-hover">
  540. <thead class="text-c">
  541. <tr class="text-c">
  542. <th>电表名称</th>
  543. <th>本期通用(度)</th>
  544. <th>本期峰值(度)</th>
  545. <th>本期平值(度)</th>
  546. <th>本期谷值(度)</th>
  547. <th>本期通用(元/度)</th>
  548. <th>本期峰值(元/度)</th>
  549. <th>本期平值(元/度)</th>
  550. <th>本期谷值(元/度)</th>
  551. <th>小计金额(元)</th>
  552. </tr>
  553. </thead>
  554. <tbody>
  555. <tr class="text-c electric_read_company" th:each="contractElectric,iterStat:${contractElectrics}"
  556. th:object="${contractElectric}">
  557. <input type="hidden" required class="input-text" th:value="*{electricRead.is_peak}"
  558. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].is_peak'"/>
  559. <input type="hidden" required class="input-text" th:value="${contract.company_id}"
  560. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].company_id'"/>
  561. <input type="hidden" required class="input-text" th:value="${contract.company_name}"
  562. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].company_name'"/>
  563. <td th:text="*{electric_name}" class="electric_peak"
  564. th:attr="is_peak=*{electricRead.is_peak}"></td>
  565. <td>
  566. <input th:unless="*{electricRead.is_peak}" type="text" required number="true" min="0"
  567. max="999.9999" class="input-text electric_count"
  568. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  569. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_count'"/>
  570. <td>
  571. <input th:if="*{electricRead.is_peak}" type="text" required number="true" min="0"
  572. max="999.9999" class="input-text electric_peak_count"
  573. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  574. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_peak_count'"/>
  575. </td>
  576. <td>
  577. <input th:if="*{electricRead.is_peak}" type="text" required number="true" min="0"
  578. max="999.9999" class="input-text electric_flat_count"
  579. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  580. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_flat_count'"/>
  581. </td>
  582. <td>
  583. <input th:if="*{electricRead.is_peak}" type="text" required number="true" min="0"
  584. max="999.9999" class="input-text electric_valley_count"
  585. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  586. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_valley_count'"/>
  587. </td>
  588. <td>
  589. <input th:unless="*{electricRead.is_peak}" type="text" required number="true" min="0"
  590. max="999.9999" class="input-text electric_price"
  591. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  592. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_price'"/>
  593. </td>
  594. <td>
  595. <input th:if="*{electricRead.is_peak}" type="text" required number="true" min="0"
  596. max="999.9999"
  597. class="input-text electric_peak_price"
  598. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  599. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_peak_price'"/>
  600. </td>
  601. <td>
  602. <input th:if="*{electricRead.is_peak}" type="text" required number="true" min="0"
  603. max="999.9999"
  604. class="input-text electric_flat_price"
  605. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  606. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_flat_price'"/>
  607. </td>
  608. <td>
  609. <input th:if="*{electricRead.is_peak}" type="text" required number="true" min="0"
  610. max="999.9999"
  611. class="input-text electric_valley_price"
  612. th:onchange="'initElectricTotalFee('+${iterStat.index}+');'"
  613. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].electric_valley_price'"/>
  614. </td>
  615. <td>
  616. <input type="text" class="input-text total_fee readonly"
  617. readonly
  618. th:name="'electricRecord.electricReads['+${iterStat.index}+'].electricReadCompanies[0].total_fee'"/>
  619. </td>
  620. </tr>
  621. <tr class="text-c">
  622. <td scope="col" colspan="7">线损费用(元)</td>
  623. <td colspan="2">
  624. 线损率: <input onchange="initElectricTotalFee()" type="text"
  625. class="input-text wire_loss"
  626. th:name="electricRecord.wire_loss"/>%
  627. </td>
  628. <td>
  629. <input onchange="initElectricTotalFee()" type="text"
  630. class="input-text readonly total_wire_loss"
  631. readonly th:name="electricRecord.total_wire_loss"/>
  632. </td>
  633. </tr>
  634. <tr class="text-c">
  635. <td scope="col" colspan="9">基本电费(元)</td>
  636. <td>
  637. <input onchange="initElectricTotalFee()" type="text"
  638. class="input-text base_electric"
  639. th:name="electricRecord.base_electric "/>
  640. </td>
  641. </tr>
  642. <tr class="text-c">
  643. <td scope="col" colspan="9">电力设备租金(元)</td>
  644. <td>
  645. <input onchange="initElectricTotalFee()" type="text"
  646. class="input-text electric_rent"
  647. th:name="electricRecord.electric_rent"/>
  648. </td>
  649. </tr>
  650. <tr class="text-c">
  651. <td scope="col" colspan="9">其他费用(元)</td>
  652. <td>
  653. <input onchange="initElectricTotalFee()" type="text"
  654. class="input-text other_fee" number="true" min="0" max="999.9999"
  655. th:name="electricRecord.other_fee"/>
  656. </td>
  657. </tr>
  658. <tr class="text-c">
  659. <td scope="col" colspan="7">合计</td>
  660. <td colspan="2">用电量 <input type="hidden"
  661. class="input-text readonly total_use_electric" readonly
  662. th:name="electricRecord.use_electric"/> <span
  663. id="total_use_electric"></span></td>
  664. <td>
  665. <input onchange="initElectricTotalFee()" type="text"
  666. class="input-text readonly electric_fee" readonly
  667. th:name="electricRecord.electric_fee"/>
  668. </td>
  669. </tr>
  670. </tbody>
  671. </table>
  672. </div>
  673. </div>
  674. <div class="row cl">
  675. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
  676. <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i>提交
  677. </button>
  678. <button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
  679. </div>
  680. </div>
  681. </form>
  682. <div id="map" style="display: none"></div>
  683. </article>
  684. <script type="text/javascript" th:src="@{/js/build/contract/contract_stop.js}"></script>
  685. <script th:inline="javascript">
  686. var validate_date=true;
  687. $(".readonly").attr("readonly", "readonly");
  688. $(function () {
  689. laydate.render({
  690. elem: '#contract_terminate_date',
  691. done: function (value, date) {
  692. getFee();
  693. $("#contract_terminate_date").blur();
  694. }
  695. });
  696. // 日期表单初始化
  697. laydate.render({
  698. elem: '#water_record_date',
  699. done: function (value) {//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
  700. initWaterMeterWrite(value);
  701. }
  702. });
  703. // 日期表单初始化
  704. laydate.render({
  705. elem: '#electric_record_date',
  706. done: function (value) {//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
  707. initElectricMeterWrite(value);
  708. }
  709. });
  710. function initElectricMeterWrite(value) {
  711. var index = 0;
  712. $(".electric_length").each(function (i) {
  713. $(this).find(".meter_write_electric").val(value);
  714. var meter_write_before = $(this).find(".electric_meter_write_before").html();
  715. if (compareDate(meter_write_before, value)) {
  716. validate_date = false;
  717. index = i;
  718. return false;
  719. }
  720. validate_date = true;
  721. });
  722. if (!validate_date) {
  723. sadMessage("第" + (index + 1) + "行本期抄表日不能小于上期抄表日");
  724. return false;
  725. }
  726. validate_date = true;
  727. }
  728. function initWaterMeterWrite(value) {
  729. var index = 0;
  730. $(".water_length").each(function (i) {
  731. $(this).find(".meter_write_water").val(value);
  732. var meter_write_before = $(this).find(".water_meter_write_before").html();
  733. if (compareDate(meter_write_before, value)) {
  734. validate_date = false;
  735. index = i;
  736. return false;
  737. }
  738. validate_date = true;
  739. });
  740. if (!validate_date) {
  741. sadMessage("第" + (index + 1) + "行本期抄表日不能小于上期抄表日");
  742. return false;
  743. }
  744. validate_date = true;
  745. }
  746. laydate.render({
  747. elem: '#lastTenancy_datemin'
  748. });
  749. laydate.render({
  750. elem: '#lastTenancy_datemax'
  751. });
  752. laydate.render({
  753. elem: '#lastTenancy_pay_time'
  754. });
  755. laydate.render({
  756. elem: '#lastProperty_datemin'
  757. });
  758. laydate.render({
  759. elem: '#lastProperty_period_end_date'
  760. });
  761. laydate.render({
  762. elem: '#lastProperty_pay_time'
  763. });
  764. laydate.render({
  765. elem: '#lastParking_period_start_date'
  766. });
  767. laydate.render({
  768. elem: '#lastParking_period_end_date'
  769. });
  770. laydate.render({
  771. elem: '#lastParking_pay_time'
  772. });
  773. });
  774. /**
  775. * 取消
  776. */
  777. function removeIframe() {
  778. var index = parent.layer.getFrameIndex(window.name);
  779. parent.layer.close(index);
  780. }
  781. function compareWaterRead(obj) {
  782. var meter_write_current = $(obj).val();
  783. var water_before_read = $(obj).parents("tr").find(".water_before_read").html();
  784. if (parseFloat(meter_write_current) < parseFloat(water_before_read)) {
  785. validate_read = false;
  786. sadMessage("本期读数不能小于上期读数");
  787. return false;
  788. }
  789. validate_read = true;
  790. var use_water = meter_write_current - water_before_read;
  791. $(obj).parents("tr").find(".use_water").val(use_water);
  792. }
  793. function compareElectricRead(obj) {
  794. var meter_write_current = $(obj).val();
  795. var water_before_read = $(obj).parents("tr").find(".electric_before_read").html();
  796. if (parseFloat(meter_write_current) < parseFloat(water_before_read)) {
  797. validate_read = false;
  798. sadMessage("本期通用读数不能小于上期通用读数");
  799. return false;
  800. }
  801. validate_read = true;
  802. var use_electric = meter_write_current - water_before_read;
  803. var ratio = $(obj).parents("tr").find(".ratio").html();
  804. if (ratio != null && $.trim(ratio) != '') {
  805. use_electric = use_electric * ratio;
  806. }
  807. $(obj).parents("tr").find(".use_electric").val(use_electric);
  808. }
  809. function comparePeakRead(obj) {
  810. var meter_write_current = $(obj).val();
  811. var water_before_read = $(obj).parents("tr").find(".electric_peak_before_read").html();
  812. if (parseFloat(meter_write_current) < parseFloat(water_before_read)) {
  813. validate_peak_read = false;
  814. sadMessage("本期峰值读数不能小于上期峰值读数");
  815. return false;
  816. }
  817. validate_peak_read = true;
  818. var use_electric = meter_write_current - water_before_read;
  819. var ratio = $(obj).parents("tr").find(".ratio").html();
  820. if (ratio != null && $.trim(ratio) != '') {
  821. use_electric = use_electric * ratio;
  822. }
  823. $(obj).parents("tr").find(".use_peak_electric").val(use_electric);
  824. }
  825. function compareFlatRead(obj) {
  826. var meter_write_current = $(obj).val();
  827. var water_before_read = $(obj).parents("tr").find(".electric_flat_before_read").html();
  828. if (parseFloat(meter_write_current) < parseFloat(water_before_read)) {
  829. validate_flat_read = false;
  830. sadMessage("本期平峰读数不能小于上期平峰读数");
  831. return false;
  832. }
  833. validate_flat_read = true;
  834. var use_electric = meter_write_current - water_before_read;
  835. var ratio = $(obj).parents("tr").find(".ratio").html();
  836. if (ratio != null && $.trim(ratio) != '') {
  837. use_electric = use_electric * ratio;
  838. }
  839. $(obj).parents("tr").find(".use_flat_electric").val(use_electric);
  840. }
  841. function compareValleyRead(obj) {
  842. var meter_write_current = $(obj).val();
  843. var water_before_read = $(obj).parents("tr").find(".electric_valley_before_read").html();
  844. if (parseFloat(meter_write_current) < parseFloat(water_before_read)) {
  845. validate_valley_read = false;
  846. sadMessage("本期谷值读数不能小于上期谷值读数");
  847. return false;
  848. }
  849. validate_valley_read = true;
  850. var use_electric = meter_write_current - water_before_read;
  851. var ratio = $(obj).parents("tr").find(".ratio").html();
  852. if (ratio != null && $.trim(ratio) != '') {
  853. use_electric = use_electric * ratio;
  854. }
  855. $(obj).parents("tr").find(".use_valley_electric").val(use_electric);
  856. }
  857. function initTotalFee(obj) {
  858. var total_use_water = 0;
  859. var all_fee = 0;
  860. var other_fee = $(".water_other_fee").val();
  861. $(".water_read_company").each(function (index, item) {
  862. if (index == obj && obj != null && $.trim(obj) != '') {
  863. if ($(item).find(".water_price").val() && $(item).find(".use_water").val()) {
  864. $(item).find(".total_fee").val(parseFloat($(item).find(".water_price").val()) * parseFloat($(item).find(".use_water").val()));
  865. }
  866. if ($(item).find(".use_water").val()) {
  867. total_use_water += parseFloat($(item).find(".use_water").val());
  868. }
  869. }
  870. if ($(item).find(".total_fee").val()) {
  871. all_fee += parseFloat($(item).find(".total_fee").val());
  872. } else {
  873. all_fee += 0;
  874. }
  875. });
  876. if (other_fee) {
  877. all_fee += parseFloat(other_fee);
  878. }
  879. $(".water_fee").val(all_fee);
  880. if (obj != null && $.trim(obj) != '') {
  881. $(".total_use_water").val(total_use_water);
  882. $("#total_use_water").text(total_use_water);
  883. }
  884. }
  885. function initElectricTotalFee(obj) {
  886. var use_electric = 0;
  887. var all_fee = 0;
  888. var other_fee = $(".other_fee").val();
  889. var total_wire_loss = $(".total_wire_loss").val();
  890. var base_electric = $(".base_electric").val();
  891. var electric_rent = $(".electric_rent").val();
  892. $(".electric_read_company").each(function (index, item) {
  893. if (index == obj && obj != null && $.trim(obj) != '') {
  894. var fee = 0;
  895. if ($(item).find(".electric_peak").attr("is_peak") == 'true') {
  896. var flatFee;
  897. var peakFee;
  898. var valleyFee;
  899. if ($(item).find(".electric_flat_price").val() && $(item).find(".electric_flat_count").val()) {
  900. flatFee = parseFloat($(item).find(".electric_flat_price").val()) * parseFloat($(item).find(".electric_flat_count").val());
  901. }
  902. if ($(item).find(".electric_peak_price").val() && $(item).find(".electric_peak_count").val()) {
  903. peakFee = parseFloat($(item).find(".electric_peak_price").val()) * parseFloat($(item).find(".electric_peak_count").val());
  904. }
  905. if ($(item).find(".electric_valley_price").val() && $(item).find(".electric_valley_count").val()) {
  906. valleyFee = parseFloat($(item).find(".electric_valley_price").val()) * parseFloat($(item).find(".electric_valley_count").val());
  907. }
  908. if (flatFee) {
  909. fee += flatFee;
  910. }
  911. if (peakFee) {
  912. fee += peakFee;
  913. }
  914. if (valleyFee) {
  915. fee += valleyFee;
  916. }
  917. if ($(item).find(".electric_flat_count").val()) {
  918. use_electric += parseFloat($(item).find(".electric_flat_count").val());
  919. }
  920. if ($(item).find(".electric_peak_count").val()) {
  921. use_electric += parseFloat($(item).find(".electric_peak_count").val());
  922. }
  923. if ($(item).find(".electric_valley_count").val()) {
  924. use_electric += parseFloat($(item).find(".electric_valley_count").val());
  925. }
  926. } else {
  927. if ($(item).find(".electric_price").val() && $(item).find(".electric_count").val()) {
  928. var electricFee = parseFloat($(item).find(".electric_price").val()) * parseFloat($(item).find(".electric_count").val());
  929. fee = electricFee;
  930. }
  931. if ($(item).find(".electric_count").val()) {
  932. use_electric += parseFloat($(item).find(".electric_count").val());
  933. }
  934. }
  935. $(item).find(".total_fee").val(fee);
  936. }else{
  937. if ($(item).find(".electric_peak").attr("is_peak") == 'true') {
  938. if($(item).find(".electric_flat_count").val()){
  939. use_electric+=parseFloat($(item).find(".electric_flat_count").val());
  940. }
  941. if($(item).find(".electric_peak_count").val()){
  942. use_electric+=parseFloat($(item).find(".electric_peak_count").val());
  943. }
  944. if($(item).find(".electric_valley_count").val()){
  945. use_electric+=parseFloat($(item).find(".electric_valley_count").val());
  946. }
  947. } else {
  948. if($(item).find(".electric_count").val()){
  949. use_electric+=parseFloat($(item).find(".electric_count").val());
  950. }
  951. }
  952. }
  953. if ($(item).find(".total_fee").val()) {
  954. all_fee += parseFloat($(item).find(".total_fee").val());
  955. }
  956. else {
  957. all_fee += 0;
  958. }
  959. });
  960. var wire_loss = $(".wire_loss").val();
  961. if (wire_loss != null && $.trim(wire_loss) != '') {
  962. total_wire_loss = parseFloat(wire_loss) * all_fee / 100;
  963. $(".total_wire_loss").val(total_wire_loss);
  964. }
  965. if (other_fee) {
  966. all_fee += parseFloat(other_fee);
  967. }
  968. if (total_wire_loss) {
  969. all_fee += parseFloat(total_wire_loss);
  970. if (base_electric)
  971. all_fee += parseFloat(base_electric);
  972. }
  973. if (electric_rent) {
  974. all_fee += parseFloat(electric_rent);
  975. }
  976. if (base_electric) {
  977. all_fee += parseFloat(base_electric);
  978. }
  979. $(".electric_fee").val(all_fee);
  980. $(".total_use_electric").val(use_electric);
  981. $("#total_use_electric").text(use_electric);
  982. }
  983. </script>
  984. </body>
  985. </html>