add_bom.ftl 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport"
  8. content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  9. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  10. <#include "/base/add_base.ftl">
  11. <style>
  12. .add-list>li{margin: 10px 0;}
  13. input[type=radio]{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-1.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
  14. input[type=radio]:checked{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-2.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
  15. </style>
  16. <title>添加Bom - Bom管理 - RST</title>
  17. </head>
  18. <body>
  19. <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
  20. <span class="c-gray en">&gt;</span> Bom管理
  21. <span class="c-gray en">&gt;</span> 添加Bom
  22. <a class="btn radius r"
  23. style="line-height:1.6em;margin-top:3px;background: #32a3d8;color: #fff;border:1px solid #32a3d8;"
  24. href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
  25. </nav>
  26. <article class="page-container" style="padding: 10px;width: 600px;margin: 0 auto;">
  27. <form action="${path}/admin/bom/save_bom" method="post" class="form form-horizontal" id="form-bom-add">
  28. <div class="row cl">
  29. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所属产品:</label>
  30. <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
  31. <select class="select" size="1" name="produceId" datatype="*" errormsg="请选择产品">
  32. <#if produceList?? && (produceList?size > 0) >
  33. <#list produceList as produce>
  34. <option value="${produce.produceId}" >${produce.produceName}</option>
  35. </#list>
  36. <#else>
  37. <option value="">暂时没有产品,需要到生产产品页面添加产品</option>
  38. </#if>
  39. </select>
  40. </span>
  41. </div>
  42. </div>
  43. <div class="row cl">
  44. <label class="form-label col-xs-4 col-sm-3">修改基础:</label>
  45. <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
  46. <select class="select" size="1" name="bomId">
  47. </select>
  48. </span>
  49. </div>
  50. </div>
  51. <div class="row cl">
  52. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>Bom名称:</label>
  53. <div class="formControls col-xs-8 col-sm-9">
  54. <input type="text" class="input-text" value="" id="bomName" name="bomName" placeholder="请输入1-20位字符的名称" datatype="*1-20" errormsg="请输入1-20位字符的名称!">
  55. </div>
  56. </div>
  57. <div class="row cl">
  58. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>硬件版本:</label>
  59. <div class="formControls col-xs-8 col-sm-9">
  60. <input type="text" class="input-text" value="" id="bomVersion" name="bomVersion" placeholder="请输入1-10位的版本号" datatype="*1-10" errormsg="请输入1-10位的版本号!">
  61. </div>
  62. </div>
  63. <div class="row cl">
  64. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>软件版本:</label>
  65. <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
  66. <select class="select" size="1" id="machineVersionId" name="machineVersionId" datatype="*" errormsg="请选择软件版本">
  67. <#if machineVersionList?? && (machineVersionList?size > 0) >
  68. <#list machineVersionList as version>
  69. <option value="${version.machineVersionId}">${version.machineVersionName}(${version.machineVersionNo})</option>
  70. </#list>
  71. <#else>
  72. <option value="">暂时没有产品,需要到生产产品页面添加产品</option>
  73. </#if>
  74. </select>
  75. </span>
  76. </div>
  77. </div>
  78. <div class="row cl">
  79. <label class="form-label col-xs-4 col-sm-3">备注:</label>
  80. <div class="formControls col-xs-8 col-sm-9">
  81. <textarea name="bomRemarks" id="bomRemarks" cols="" rows="" class="textarea"
  82. placeholder="Bom单备注,最多支持100字符" onKeyUp="$.Huitextarealength(this,100)" ></textarea>
  83. <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
  84. </div>
  85. </div>
  86. <div class="row cl">
  87. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>Bom零件清单:</label>
  88. <div class="formControls col-xs-8 col-sm-9 components">
  89. <input type="hidden" id="bomComponentJson" name="bomComponentJson">
  90. <table class="table table-border table-bordered table-bg table-hover table-sort">
  91. <thead>
  92. <tr class="text-c">
  93. <th width="150">选择零件</th>
  94. <th width="60">零件数量</th>
  95. <th width="20">操作</th>
  96. </tr>
  97. </thead>
  98. <tbody id="componentaAll">
  99. </tbody>
  100. </table>
  101. <span id="componentsMsg" style="color: red"></span>
  102. </div>
  103. </div>
  104. <div class="row cl">
  105. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
  106. <input class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;新增零件&nbsp;&nbsp;" onclick="addComponents('#','')">
  107. </div>
  108. </div>
  109. <div class="row cl">
  110. <label class="form-label col-xs-4 col-sm-3"></label>
  111. <span class="c-red">*提示</span><span>:新增的Bom,需要批次选中该Bom单,才会生效!</span>
  112. </div>
  113. <div class="row cl">
  114. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
  115. <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
  116. </div>
  117. </div>
  118. </form>
  119. </article>
  120. <script type="text/javascript">
  121. $(function(){
  122. $("#form-bom-add").Validform({
  123. tiptype: function (msg, o, cssctl) {
  124. if (o.type == 3) {//失败
  125. layer.msg(msg, {icon: 5, time: 3000});
  126. $(window).scrollTop(o.obj.offset().top - 40);
  127. }
  128. },
  129. datatype: {//自定义验证类型
  130. "select": function (gets, obj, curform, regxp) {
  131. if (gets == "") {
  132. return false;
  133. } else {
  134. return true;
  135. }
  136. }
  137. },
  138. ignoreHidden: true,
  139. tipSweep: true, //若为true,则只在表单提交时验证
  140. ajaxPost: true, //异步提交
  141. beforeCheck: function (curform) { //验证通过之前执行的函数
  142. },
  143. beforeSubmit: function (curform) { //验证通过之后执行的函数
  144. var ptsBomComponentsList = new Array();
  145. $("#componentaAll").find("tr").each(function (){
  146. var ptsBomComponents = {};
  147. ptsBomComponents.componentsId = $(this).find("[name='comName']").eq(0).val();
  148. ptsBomComponents.bomComponentsQuantity = $(this).find("[name='comNumber']").eq(0).val() * 100;
  149. ptsBomComponentsList.push(ptsBomComponents);
  150. })
  151. $("#bomComponentJson").val(JSON.stringify(ptsBomComponentsList));
  152. },
  153. callback: function (data) {//异步回调函数
  154. if (data) {
  155. var index = layer.alert(data.resultMsg, function () {
  156. if (data.resultCode == 200) {
  157. location.href = "${path}/admin/bom/_bom_list";
  158. } else {
  159. layer.close(index);
  160. }
  161. });
  162. }
  163. }
  164. });
  165. })
  166. var allComponents; //所有零件的集合
  167. var staticProduceId; //产品id,用于判断产品更改
  168. var index;
  169. $(function () {
  170. /*添加页面初始化,添加一个零件选择框*/
  171. addComponents("#","");
  172. var produceId = $("[name='produceId']").val();
  173. staticProduceId = produceId;
  174. getBomByProduce(produceId); //获取bom单
  175. /*监听产品选择*/
  176. $("[name='produceId']").change(function(){
  177. var produceId = $(this).val();
  178. getBomByProduce(produceId);
  179. getMachineVersion(produceId);
  180. delComponent(0,"all");
  181. addComponents("#","");
  182. })
  183. /*监听修改基础 bom单*/
  184. $("[name='bomId']").change(function(){
  185. var bomId = $(this).val();
  186. getBom(bomId);
  187. })
  188. })
  189. /* 添加零件 */
  190. function addComponents(componentsId,number) {
  191. if(number == null || number == "" || typeof(number)=="undefined"){
  192. number = 1;
  193. }
  194. var tbody = $("#componentaAll");
  195. var produceId = $("[name='produceId']").val();
  196. if(allComponents == null || produceId != staticProduceId){ //获取零件列表
  197. staticProduceId = produceId;
  198. allComponents = listComponent(produceId);
  199. }
  200. var opHtml = '';
  201. for(var i=0;i<allComponents.length;i++){
  202. var components = allComponents[i];
  203. var isSelect = '';
  204. if(componentsId == components.componentsId){
  205. isSelect = 'selected="selected"';
  206. }
  207. opHtml += '<option value="'+ components.componentsId +'" '+ isSelect +'>'+ components.componentsName +'('+ components.componentsNo + ')</option>';
  208. }
  209. var html = '<tr class="text-c"> '
  210. +'<td> '
  211. +'<select class="select" size="1" name="comName" style="height: 30px;" datatype="*" errormsg="请选择零件"> '
  212. +''
  213. + opHtml
  214. +'</select> '
  215. +'</td> '
  216. +'<td> '
  217. //+'<input type="text" class="input-text" value="'+ number +'" id="" name="comNumber" placeholder="零件数量" datatype="n1-3" errormsg="零件数量只能为数字且不能超过1000件!"> '
  218. +'<input type="text" class="input-text" value="'+ number +'" id="" name="comNumber" placeholder="零件数量" datatype="/^([1-9]\\d{0,2}|0)(\\.\\d{0,2})?$/" errormsg="零件数量只能为数字且不能超过1000件!"> '
  219. +'</td> '
  220. +'<td> '
  221. +'<a style="" href="javascript:void(0);" title="删除" onclick="delComponent(this,1)"> '
  222. +'<i class="Hui-iconfont">&#xe609;</i> '
  223. +'</a> '
  224. +'</td> '
  225. +'</tr>';
  226. tbody.append(html);
  227. }
  228. /*删除零件 type=all时删除所有的零件 */
  229. function delComponent(node,type) {
  230. if(type == "all"){
  231. $("#componentaAll").find("tr").each(function () {
  232. $(this).remove();
  233. })
  234. }else{
  235. //删除零件必须保证还有一个零件
  236. var componentLength = $("#componentaAll").find("tr").length;
  237. if(componentLength > 1){
  238. $(node).parent().parent().remove();
  239. }else{
  240. layer.msg('必须要有一个零件', {icon: 5, time: 3000});
  241. }
  242. }
  243. }
  244. /*获取所有的零件*/
  245. function listComponent(produceId) {
  246. produceId = null; //查询出所有的零件;
  247. var list = new Array();
  248. $.ajax({
  249. type: "POST",
  250. data: {
  251. produceId : produceId
  252. },
  253. url: "${path}/admin/bom/get_listComponents",
  254. async: false,
  255. success: function(data){
  256. if (data.returnCode == 200) {
  257. $("#componentsMsg").html("");
  258. list = data.returnMsg.ptsComponentsList;
  259. }
  260. if(data.returnCode != 200 || list.length < 1){ //提示需要添加零件
  261. $("#componentsMsg").html("该产品没有对应的零件,请到零件管理添加零件");
  262. }
  263. },
  264. error: function(XmlHttpRequest, textStatus, errorThrown){
  265. }
  266. });
  267. return list;
  268. }
  269. /*根据产品id,获取bom集合*/
  270. function getBomByProduce(produceId){
  271. $.ajax({
  272. type: "POST",
  273. data: {
  274. produceId : produceId
  275. },
  276. url: "${path}/admin/bom/get_listBom",
  277. async: false,
  278. success: function(data){
  279. var html = '<option value="">不选择</option>';
  280. if (data.returnCode == 200) {
  281. var bomList = data.returnMsg.ptsBomsList;
  282. for(var i=0;i<bomList.length;i++){
  283. html += '<option value="'+ bomList[i].bomId +'">'+ bomList[i].bomName +'</option>';
  284. }
  285. }
  286. if(data.returnCode != 200 || data.returnMsg.ptsBomsList <1){
  287. defaultAllInput();
  288. }
  289. $("[name='bomId']").html(html);
  290. },
  291. error: function(XmlHttpRequest, textStatus, errorThrown){
  292. }
  293. });
  294. }
  295. /*获取bom信息,赋值在页面上*/
  296. function getBom(bomId){
  297. var index = layer.load(1, {
  298. shade: [0.5,'#fff'] //0.1透明度的白色背景
  299. });
  300. var bom = new Object();
  301. $.ajax({
  302. type: "POST",
  303. data: {
  304. bomId : bomId
  305. },
  306. url: "${path}/admin/bom/get_bom",
  307. async: true,
  308. success: function(data){
  309. if (data.returnCode == 200) {
  310. bom = data.returnMsg.ptsBom;
  311. if(bom != null && bom.bomId != null){
  312. $("#bomName").val(bom.bomName);
  313. $("#bomRemarks").val(bom.bomRemarks);
  314. $("#bomVersion").val(bom.bomVersion);
  315. delComponent(0,"all");
  316. var components = bom.ptsBomComponentsList;
  317. if(components != null && components.length > 0){
  318. for(var i=0;i<components.length;i++){
  319. addComponents(components[i].componentsId,components[i].bomComponentsQuantity/100);
  320. }
  321. }
  322. }else{
  323. defaultAllInput();
  324. }
  325. }else{
  326. defaultAllInput();
  327. }
  328. layer.close(index);
  329. },
  330. error: function(XmlHttpRequest, textStatus, errorThrown){
  331. }
  332. });
  333. }
  334. /* 获取软件版本 */
  335. function getMachineVersion(produceId){
  336. var html = '';
  337. $.ajax({
  338. type: "POST",
  339. data: {
  340. produceId : produceId
  341. },
  342. url: "${path}/admin/bom/get_listMachineVersion",
  343. async: false,
  344. success: function(data){
  345. if (data.returnCode == 200 && data.returnMsg.machineVersionList.length > 0) {
  346. for(var i=0;i<data.returnMsg.machineVersionList.length;i++){
  347. var version = data.returnMsg.machineVersionList[i];
  348. html += '<option value="'+ version.machineVersionId +'">'+ version.machineVersionName +'('+ version.machineVersionNo +')</option>';
  349. }
  350. }else{
  351. html += '<option value="">暂时没有软件版本,需要到生产产品页面添加软件版本</option>';
  352. }
  353. },
  354. error: function(XmlHttpRequest, textStatus, errorThrown){
  355. }
  356. });
  357. $("#machineVersionId").html(html);
  358. }
  359. /*当选择产品或者bom不选择时,都需要重置所有的输入框和表格*/
  360. function defaultAllInput() {
  361. $("#bomName").val("");
  362. $("#bomRemarks").val("");
  363. delComponent(0,"all");
  364. addComponents("#","");
  365. }
  366. </script>
  367. <!--/请在上方写此页面业务相关的脚本-->
  368. </body>
  369. </html>