bmbg.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>项目转移</title>
  6. <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  7. <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
  8. <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
  9. <style>
  10. body {
  11. display: flex;
  12. justify-content: space-between;
  13. align-items: center;
  14. height: 100vh;
  15. margin: 0;
  16. }
  17. .left-section,
  18. .right-section {
  19. width: 50%;
  20. height: 100%;
  21. border: 1.5px solid dimgrey;
  22. position: relative; /* 添加这一行,使其成为定位参考 */
  23. }
  24. h2 {
  25. text-align: center;
  26. margin-top: 10%;
  27. color: #0C0C0C;
  28. }
  29. .layui-form-item {
  30. margin-bottom: 15px; /* 控制每个表单项之间的间距 */
  31. }
  32. .right-bottom-btn {
  33. position: absolute;
  34. bottom: 20px; /* 距离底部20px */
  35. right: 20px; /* 距离右边20px */
  36. }
  37. /* 可根据需要自定义样式和布局 */
  38. .left-section .layui-form{
  39. margin-top: 10%;
  40. }
  41. .right-section .layui-form {
  42. margin-top: 10%;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div class="left-section">
  48. <!-- 左侧内容 -->
  49. <h2>转移前</h2>
  50. <div class="layui-form layuimini-form">
  51. <div class="layui-form-item layui-inline" style="width: 100%">
  52. <label class="layui-form-label required" style="width: 17%">项目名称</label>
  53. <div class="layui-input-inline" style="width: 70%">
  54. <input type="text" class="layui-input" th:value="${sta.xmmc}" disabled>
  55. </div>
  56. </div>
  57. <div class="layui-form-item layui-inline" style="width: 100%">
  58. <label class="layui-form-label" style="width: 17%">ERP编号</label>
  59. <div class="layui-input-inline" style="width: 70%">
  60. <input type="text" class="layui-input" th:value="${sta.erpbh}" disabled>
  61. </div>
  62. </div>
  63. <div class="layui-form-item layui-inline" style="width: 100%">
  64. <label class="layui-form-label" style="width: 17%">所属部门</label>
  65. <div class="layui-input-inline" style="width: 70%">
  66. <input type="text" class="layui-input" th:value="${sta.ssbmmc}" disabled>
  67. </div>
  68. </div>
  69. <!-- <div class="layui-form-item layui-inline" style="width: 100%">
  70. <label class="layui-form-label" style="width: 17%">电科院负责人</label>
  71. <div class="layui-input-inline" style="width: 70%">
  72. <input type="text" class="layui-input" th:value="${project.dkyfzrxm}" disabled>
  73. </div>
  74. </div>-->
  75. <div class="layui-form-item layui-inline" style="width: 100%">
  76. <label class="layui-form-label" style="width: 17%">申请人</label>
  77. <div class="layui-input-inline" style="width: 70%">
  78. <input type="text" class="layui-input" th:value="${sta.sqrxm}" disabled>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="right-section">
  84. <!-- 右侧内容 -->
  85. <h2>转移后</h2>
  86. <div class="layui-form layuimini-form">
  87. <div class="layui-form-item layui-inline" style="width: 100%">
  88. <label class="layui-form-label required" style="width: 17%">项目名称</label>
  89. <div class="layui-input-inline" style="width: 70%">
  90. <input type="text" id="xmmc" name="xmmc" class="layui-input" th:value="${sta.xmmc}" disabled>
  91. <input type="hidden" id="id" name="id" class="layui-input" th:value="${sta.id}">
  92. </div>
  93. </div>
  94. <div class="layui-form-item layui-inline" style="width: 100%">
  95. <label class="layui-form-label" style="width: 17%">ERP编号</label>
  96. <div class="layui-input-inline" style="width: 70%">
  97. <input type="text" id="erpbh" name="erpbh" class="layui-input" th:value="${sta.erpbh}" disabled>
  98. </div>
  99. </div>
  100. <div class="layui-form-item layui-inline" style="width: 100%">
  101. <label class="layui-form-label" style="width: 17%">所属部门<span style="color: red;">*</span></label>
  102. <div class="layui-input-inline" style="width: 70%">
  103. <input type="hidden" id="ssbm" name="ssbm" class="layui-input">
  104. <!-- 设置一个下拉框 -->
  105. <select name="ssbmmc" id="ssbmmc" lay-search>
  106. <option value="">请选择</option>
  107. <option th:each="item:${dept}" th:text="${item.deptName}" th:value="${item.deptId}"></option>
  108. </select>
  109. </div>
  110. </div>
  111. <!-- <div class="layui-form-item layui-inline" style="width: 100%">
  112. <label class="layui-form-label" style="width: 17%">电科院负责人<span style="color: red;">*</span></label>
  113. <div class="layui-input-inline" style="width: 70%">
  114. <input type="hidden" id="dkyfzr" name="dkyfzr" class="layui-input">
  115. <input type="text" id = 'dkyfzrxm' name="dkyfzrxm" class="layui-input">
  116. </div>
  117. </div>-->
  118. <div class="layui-form-item layui-inline" style="width: 100%">
  119. <label class="layui-form-label" style="width: 17%">申请人<span style="color: red;">*</span></label>
  120. <div class="layui-input-inline" style="width: 70%">
  121. <input type="hidden" id="sqr" name="sqr" class="layui-input">
  122. <input type="text" id = 'sqrxm' name="sqrxm" class="layui-input">
  123. </div>
  124. </div>
  125. </div>
  126. <!-- 右侧悬浮按钮 -->
  127. <div class="right-bottom-btn">
  128. <button class="layui-btn" lay-filter="saveBtn">
  129. <i class="layui-icon layui-icon-ok"></i>确定
  130. </button>
  131. <button class="layui-btn" lay-filter="cancleBtn">
  132. <i class="layui-icon layui-icon-close"></i>取消
  133. </button>
  134. </div>
  135. </div>
  136. <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
  137. <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
  138. <script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
  139. <script th:src="@{/lib/xm-select-v1.2.2/xm-select.js}" charset="utf-8"></script>
  140. <script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
  141. <script type="text/javascript" th:inline="javascript">
  142. AjaxUtil.ctx = /*[[@{/}]]*/'';
  143. var updateflag = 0;
  144. var xmApproval = {};
  145. // 初始化 LayUI
  146. layui.use(['form','table','tableSelect'], function () {
  147. var form = layui.form,
  148. layer = layui.layer,
  149. tableSelect = layui.tableSelect,
  150. table = layui.table;
  151. //获取创建人
  152. tableSelect.render({
  153. elem: '#sqrxm',
  154. checkedKey: 'userid',
  155. searchKey: 'name',
  156. searchPlaceholder: '搜索申请人',
  157. table:{
  158. url:AjaxUtil.ctx+'prjContract/cjr',
  159. cols:[
  160. [
  161. {type:'radio',title:'😊',width: '7%'},
  162. {type: 'numbers',title: '序号',align: 'center',width: '10%'},
  163. {field:'name',title: '姓名',align: 'center',width:'30%'},
  164. {field: 'deptName',title: '部门',align: 'left',width: '50%'}
  165. ]
  166. ]
  167. },
  168. done: function (elem, data) {
  169. var NEWJSON = [];
  170. var NEWJSON1 = [];
  171. layui.each(data.data, function (index, item) {
  172. NEWJSON.push(item.name);
  173. NEWJSON1.push(item.userId);
  174. });
  175. elem.val(NEWJSON.join(","));
  176. $("#sqr").val(NEWJSON1.join(","));
  177. }
  178. });
  179. // 获取电科院负责人
  180. tableSelect.render({
  181. elem: '#dkyfzrxm',
  182. checkedKey: 'id',
  183. searchKey: 'xm',
  184. searchPlaceholder: '搜索电科院负责人',
  185. table:{
  186. url:AjaxUtil.ctx +'prjContract/dkyfzr',
  187. cols: [
  188. [
  189. {type:'radio',title:'😊',width:'7%'},
  190. {type: 'numbers',title: '序号',align:'center',width: '10%'},
  191. {field: 'xm',title: '姓名',align: 'center',width: '30%'},
  192. {field: 'bmmc',title: '部门',align: 'left',width: '50%'}
  193. ]
  194. ]
  195. },
  196. done: function (elem,data) {
  197. var NEWJSON = [];
  198. var NEWJSON1 = [];
  199. layui.each(data.data, function (index, item) {
  200. NEWJSON.push(item.xm);
  201. NEWJSON1.push(item.id);
  202. });
  203. elem.val(NEWJSON.join(","));
  204. $('#dkyfzr').val(NEWJSON1.join(","));
  205. }
  206. });
  207. $("button[lay-filter='saveBtn']").click(function (data) {
  208. // 提交表单元素
  209. // 将表单元素提交至后台
  210. // 获取表单的数据
  211. // 创建一个集合
  212. var formData = {
  213. 'id': document.getElementById('id').value
  214. ,'xmmc': $('#xmmc').val()
  215. ,'erpbh':$('#erpbh').val()
  216. ,'dkyfzr':$('#dkyfzr').val()
  217. ,'dkyfzrxm':$('#dkyfzrxm').val()
  218. ,'ssbm':$('#ssbm').val()
  219. ,'ssbmmc':$('#ssbmmc').val()
  220. ,'sqr':$('#sqr').val()
  221. ,'sqrxm':$('#sqrxm').val()
  222. }
  223. // 将对象转换为 JSON 字符串
  224. AjaxUtil.post({
  225. url: AjaxUtil.ctx + 'staBudgetapproval/bgbm',
  226. contentType: "application/json",
  227. data: JSON.stringify(formData),
  228. success: function (res) {
  229. if (res.code === 0) {
  230. layer.msg(res.message,{icon: 1}, function (){
  231. setTimeout(function () {
  232. var index = parent.layer.getFrameIndex(window.name);
  233. parent.layer.close(index);
  234. },500);
  235. });
  236. // 获取弹框 并关闭弹
  237. }else {
  238. layer.msg(res.message,{ icon:2 });
  239. }
  240. },
  241. error: function (error) {
  242. layer.msg("请求出错,请稍后重试!", { icon: 2 }); // 处理 Ajax 错误
  243. }
  244. });
  245. });
  246. // 监听取消按钮
  247. $("button[lay-filter='cancleBtn']").click(function () {
  248. var iframeIndex = parent.layer.getFrameIndex(window.name);
  249. parent.layer.close(iframeIndex);
  250. });
  251. });
  252. </script>
  253. </body>
  254. </html>