dep_ps.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
  7. <link rel="stylesheet" type="text/css" href="/static/css/layer.css">
  8. <link rel="stylesheet" type="text/css" href="/static/css/css.css">
  9. <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-select.min.css">
  10. <link rel="stylesheet" type="text/css" href="/static/css/macf.css">
  11. <script src="/static/js/jquery.min.js"></script>
  12. <script src="/static/js/bootstrap.min.js"></script>
  13. <script src="/static/js/vue-2.4.0.js"></script>
  14. <script src="/static/js/axios.min.js"></script>
  15. <script src="/static/js/bootstrap-select_new.js"></script>
  16. <script src="/static/js/layer.js"></script>
  17. <title>Document</title>
  18. </head>
  19. <body>
  20. <div id="app">
  21. <!-- navbar-default这个类是设置导航栏 -->
  22. <div class="navbar navbar-default">
  23. <div class="container">
  24. <!-- navbar-header用于设置内容横向显示 -->
  25. <div class="navbar-header">
  26. <a href="/index" class="navbar-brand"></a>
  27. </div>
  28. <!-- navbar-nav用来设置横向显示 -->
  29. <!-- navbar-right用来设置右浮动 -->
  30. <!-- hidden-xs用于当屏幕很小的情况下隐藏div里面的内容 -->
  31. <div class="hidden-xs">
  32. <ul class="nav navbar-nav">
  33. <li class="dropdown">
  34. <!--订单一览表-->
  35. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  36. 订单一览表
  37. <b class="caret"></b>
  38. </a>
  39. <ul class="nav dropdown-menu">
  40. <li><a href="/index">订单一览表</a></li>
  41. <li><a href="#">已结案订单</a></li>
  42. </ul>
  43. </li>
  44. <li class="dropdown">
  45. <!--月度产能评估表-->
  46. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  47. 月度产能评估表
  48. <b class="caret"></b>
  49. </a>
  50. <ul class="nav dropdown-menu">
  51. <li><a href="#">汇总分析</a></li>
  52. <li><a href="#">订单完成情况</a></li>
  53. </ul>
  54. </li>
  55. <li class="dropdown">
  56. <!--月度主排程计划-->
  57. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  58. 月度主排程计划
  59. <b class="caret"></b>
  60. </a>
  61. <ul class="nav dropdown-menu">
  62. <li><a href="/dep_sp">计划主交期</a></li>
  63. <li><a href="#">计划部门交期</a></li>
  64. </ul>
  65. </li>
  66. </ul>
  67. </div>
  68. </div>
  69. </div>
  70. <!--搜索-->
  71. <div class="filter">
  72. <div class="container ">
  73. <label>
  74. <div class="navbar-nav">时间:</div>
  75. <div class="navbar-nav"><input type='date' class="input form-control" v-model="data_time" /></div>
  76. </label>
  77. <label>
  78. <div class="navbar-nav">部门:</div>
  79. <!-- <input type='text' class="input" v-model="DEPT" /> -->
  80. <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
  81. v-model="DEP_DEP" id="field1"></select>
  82. </div>
  83. </label>
  84. <label>
  85. <div class="navbar-nav">单号:</div>
  86. <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
  87. v-model="mo_no" id="field2"></select></div>
  88. </label>
  89. <label class="save def" id="def" @click="seek()">
  90. <div class="btn btn-primary navbar-nav">确定查询</div>
  91. </label>
  92. </div>
  93. </div>
  94. <!-- 内容 -->
  95. <!-- container这个类是设置居中对齐 -->
  96. <div class="container">
  97. <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="zengjia()">新增</button>
  98. <div class="modal fade" id="myModal">
  99. <div class="modal-dialog">
  100. <div class="modal-content" style="width: 300px;">
  101. <!-- 这里是标题 -->
  102. <div class="modal-header">
  103. <div class="modal-title">新增月度排产</div>
  104. </div>
  105. <!-- 这里是内容 -->
  106. <div class="modal-body">
  107. <table>
  108. <tr>
  109. <td>灌装生产线:
  110. <select class="selectpicker form-control" data-live-search="true"
  111. v-model="DEP_DEP" id="field">
  112. </select>
  113. </td>
  114. </tr>
  115. </table>
  116. </div>
  117. <!-- 这里是确定否 -->
  118. <div class="modal-footer">
  119. <button class="btn btn-primary" data-dismiss="modal" @click="add_dep_data()">确定</button>
  120. <button class="btn btn-primary" data-dismiss="modal">取消</button>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <button class="btn btn-primary abc" @click="add_no()" disabled="disabled">保存</button>
  126. <button class="btn btn-primary update" @click="add_no()" disabled="disabled">修改</button>
  127. <button class="btn btn-primary del" @click="add_no()" disabled="disabled">删除</button>
  128. <!-- row这个类是用于设置取消内边距 -->
  129. <table class="table table-bordered table-hover table-striped">
  130. <tbody>
  131. <!-- <tr v-for="(item,i) in list" :key="item.OS_NO" style="background-color: yellowgreen;"> -->
  132. <tr>
  133. <td class="macf_01">序号</td>
  134. <td class="macf_02">产线</td>
  135. <td class="macf_03">产线名称</td>
  136. <td class="macf_04">未完工数量</td>
  137. <td class="macf_05">标准/满线日产能</td>
  138. <td class="macf_07">订单可维持天数</td>
  139. <td class="macf_06">标准直接人员配置</td>
  140. <td class="macf_08">现有产能</td>
  141. <td class="macf_09">现有生产线/人员</td>
  142. <td class="macf_10">现有配置可生产天数</td>
  143. <td class="macf_11">现有辅助工人</td>
  144. <td class="macf_18">现有直接工人</td>
  145. <td class="macf_12">现有出勤人员合计</td>
  146. <td class="macf_13">直接工人274小时/25天</td>
  147. <td class="macf_14">按274小时/25天</td>
  148. <td class="macf_15">计划新增人员配置</td>
  149. <td class="macf_16">需求工时</td>
  150. <td class="macf_17">按25个工作日计算人员需求</td>
  151. <td class="macf_19">人员缺口</td>
  152. <td class="macf_20">编制</td>
  153. <td class="macf_21">备注</td>
  154. <td class="macf_22">操作</td>
  155. </tr>
  156. <tr v-for="(item,i) in data_list" :key="item.DEP_DEP" class="itm_tr">
  157. <td class="macf_01" v-text="i+1"></td> <!--这里是序号-->
  158. <td class="macf_02" v-text="item.dep"></td> <!--产线-->
  159. <td class="macf_03" v-text="item.dep_name"></td> <!--产线名称-->
  160. <td class="macf_04" ><input class="macf_04" type="number" v-model="item.un_qty" disabled="disabled"></td> <!--未完工数量-->
  161. <td class="macf_05"><input class="macf_05" type="number" v-model="item.s_capacity"></td> <!--标准/满线日产能-->
  162. <td class="macf_07"><input class="macf_07" type="number" v-bind:value="Number(item.un_qty)/Number(item.s_capacity) | rounding" disabled="disabled"></td> <!--订单可维持天数-->
  163. <td class="macf_06"><input class="macf_06" type="number" v-model="item.s_d_staffing"></td> <!--标准直接人员配置-->
  164. <td class="macf_08"><input class="macf_08" type="number" v-model="item.e_capacity"></td> <!--现有产能-->
  165. <td class="macf_09"><input class="macf_09" type="number" v-model="item.epl_personnel"></td> <!--现有生产线/人员-->
  166. <td class="macf_10"><input class="macf_10" type="number" v-bind:value="Number(item.un_qty)/Number(item.e_capacity) | rounding" disabled="disabled"></td> <!--现有配置可生产天数-->
  167. <td class="macf_11"><input class="macf_11" type="number" v-model="item.e_a_workers"></td> <!--现有辅助工人-->
  168. <td class="macf_18"><input class="macf_18" type="number" v-model="item.e_d_workers"></td> <!--现有直接工人-->
  169. <td class="macf_12"><input class="macf_12" type="number" v-bind:value="Number(item.e_a_workers)+Number(item.e_d_workers) | rounding" disabled="disabled"></td> <!--现有出勤人员合计-->
  170. <td class="macf_13"><input class="macf_13" type="number" v-bind:value="Number(item.ok_qty)/(Number(item.s_capacity)+Number(item.s_d_staffing)) | rounding" disabled="disabled"></td> <!--直接工人274小时/25天-->
  171. <td class="macf_14"><input class="macf_14" type="number" v-bind:value="Number(item.ok_qty)/(Number(item.s_capacity)+Number(item.s_d_staffing))+Number(item.e_a_workers) | rounding" disabled="disabled"></td> <!--按274小时/25天-->
  172. <td class="macf_15"><input class="macf_15" type="number" v-bind:value="Number(item.ok_qty)/(Number(item.s_capacity)+Number(item.s_d_staffing))-Number(item.e_d_workers) | rounding" disabled="disabled"></td> <!--计划新增人员配置-->
  173. <td class="macf_16"><input class="macf_16" type="number" v-bind:value="Number(item.s_d_staffing)*(Number(item.un_qty)/Number(item.s_capacity))*11 | rounding" disabled="disabled"></td> <!--需求工时-->
  174. <td class="macf_17"><input class="macf_17" type="number" v-bind:value="Number(item.s_d_staffing)*(Number(item.un_qty)/Number(item.s_capacity))*11/274*1.2 | rounding" disabled="disabled"></td> <!--按25个工作日计算人员需求-->
  175. <td class="macf_19"><input class="macf_19" type="number" v-bind:value="Number(item.s_d_staffing)*(Number(item.un_qty)/Number(item.s_capacity))*11/274*1.2-item.e_d_workers | rounding" disabled="disabled"></td> <!--人员缺口-->
  176. <td class="macf_20"><input class="macf_20" type="text" v-model="item.a_strength"></td> <!--编制-->
  177. <td class="macf_21"><textarea class="macf_21" rows="1" cols="10" v-model="item.rem">我是一个文本框。</textarea></td> <!--备注-->
  178. <td class="macf_22">操作</td> <!--操作-->
  179. </tr>
  180. </tbody>
  181. </table>
  182. </div>
  183. <div class="footer">
  184. 分页
  185. </div>
  186. </div>
  187. <script>
  188. var vm = new Vue({
  189. el: '#app',
  190. data: {
  191. data_time: '',
  192. DEPT: '',
  193. ODD: '',
  194. activeIndex: 0,
  195. list: [],
  196. DEP_DEP: '',
  197. DEP_QTY: 0,
  198. DEP_CN: 0,
  199. DEP_RY: '',
  200. DEP_WCTS: '',
  201. DEP_BZ: '',
  202. DEP_SJGS: '',
  203. DEP_RS: '',
  204. DEP_ZJRG: '',
  205. DEP_RYQK: '',
  206. qty: 0,
  207. add_date: [],
  208. data_list:[],
  209. test: [{ "DEP": "1", "DEP_NAME": "2" }, { "DEP": "1", "DEP_NAME": "2" }],
  210. monthly_odd_new: '保存显示',
  211. list_no: [],
  212. list_dep:[],
  213. mo_no:'', //重构开始
  214. dep:'', //车间部门
  215. dep_name:'', //车间部门名称
  216. no:'', // 单号
  217. dd:'', //单据日期
  218. un_qty:0, //未完工数量
  219. s_capacity:0, //标准/满线日产能
  220. s_d_staffing:0, //标准直接人员配置
  221. tolf_days:0, //订单直接人员配置
  222. e_capacity:0, //现有产能
  223. epl_personnel:0, //现有生产线/人员
  224. p_d_f_e_configurations:1, //现有配置可生产天数
  225. a_strength:'', //编制
  226. e_a_workers:0, //现在有辅助工人
  227. work_sum:0, //现有出勤人员合计
  228. zj_274_24:0, //直接工人按按274小时/25天配置人员
  229. a_274_24:0, //按274小时/25天配置人员
  230. new_personnel:0, //计划新增人员配置
  231. rem:'', //备注
  232. need_hours:0, //需求工时
  233. a_25:0, //按25个工作日计算人员需求
  234. e_d_workers:0, //现有直接工人
  235. p_gap:0, //人员缺口
  236. },
  237. methods: {
  238. // 更具部门查询后台数据
  239. add_dep_data() {
  240. // 获取搜索框的值
  241. var serch_var = $("#field").selectpicker('val')
  242. // alert('qq')
  243. if (serch_var == '' | typeof serch_var === 'undefined') {
  244. alert("请选择部门")
  245. return
  246. }
  247. this.DEP_DEP = serch_var
  248. if (this.DEP_DEP == '') {
  249. alert("部门没选择上")
  250. return
  251. }
  252. // 判断部门
  253. // var add_dep_date = {
  254. // DEP_DEP: this.DEP_DEP, DEP_QTY: this.DEP_QTY, DEP_CN: this.DEP_CN, DEP_RY: this.DEP_RY,
  255. // DEP_WCTS: this.DEP_WCTS, DEP_BZ: this.DEP_BZ, DEP_SJGS: this.DEP_SJGS, DEP_RS: this.DEP_RS, DEP_ZJRG: this.DEP_ZJRG, DEP_RYQK: this.DEP_RYQK, qty: this.qty,
  256. // monthly_odd_new: this.monthly_odd_new
  257. // }
  258. // console.log(this.DEP_DEP)
  259. // console.log(1111)
  260. // console.log(this.DEP_DEP)
  261. // this.add_date.push(add_dep_date)
  262. // this.DEP_DEP = this.DEP_RY = this.DEP_WCTS = this.DEP_BZ = this.DEP_SJGS = this.DEP_RS = this.DEP_ZJRG = this.DEP_RYQK = ''
  263. // this.DEP_CN = this.DEP_QTY = 0
  264. axios.get('/depmacf/', {
  265. params: {
  266. dep: this.DEP_DEP
  267. }
  268. })
  269. .then(res => {
  270. // alert(res.data)
  271. var itm = res.data.data
  272. this.data_list.push(itm)
  273. // this.data_list = res.data.data
  274. console.log(this.data_list)
  275. })
  276. .catch(err => {
  277. console.log('error:' + err)
  278. })
  279. // $("#field").selectpicker('val')
  280. },
  281. // 保存单据
  282. add_no() {
  283. //获取单号
  284. if (this.monthly_odd_new == '保存显示') {
  285. {
  286. axios.get('/odd/', {
  287. // params: {
  288. // st_time: '',
  289. // sh_time: '',
  290. // cus_no: '',
  291. // cls_id: '',
  292. // pmc_ok: '',
  293. // }
  294. })
  295. .then(res => {
  296. // alert(res.data)
  297. var data1 = res.data.data
  298. this.monthly_odd_new = data1
  299. // this.add_date.monthly_odd_new = this.monthly_odd_new
  300. this.add_date.forEach((val, index) => {
  301. val["monthly_odd_new"] = this.monthly_odd_new;// 修改 把IsLimit修改成1
  302. // val["LimitAccount"] = 188.0;//增加
  303. // delete val["CustName"];// 删除
  304. })
  305. })
  306. .catch(err => {
  307. console.log('error:' + err)
  308. })
  309. }
  310. }
  311. var aa = [
  312. [
  313. {
  314. "aa":"aa",
  315. "bb":"bb"
  316. }
  317. ]
  318. ]
  319. console.log(this.add_date)
  320. //设置保存按钮为禁止
  321. $(".abc").attr("disabled", "disabled");
  322. //移除修改按钮禁止效果disabled
  323. $('.update').removeAttr('disabled')
  324. //移除删除按钮禁止效果disabled
  325. $('.del').removeAttr('disabled')
  326. this.monthly_odd_new = '保存显示'
  327. //
  328. },
  329. // 获取每一行的计算栏位qty
  330. qty_sum(i) {
  331. this.add_date[i]["qty"] = Number(this.add_date[i]["DEP_QTY"]) + Number(this.add_date[i]["DEP_CN"])
  332. console.log(this.add_date[i]["qty"])
  333. },
  334. // 删除ni zhaod每一行
  335. del(i) {
  336. // this.add_date.$remove(i);
  337. this.add_date.splice(i, 1);
  338. console.log(this.add_date)
  339. },
  340. zengjia() {
  341. // 点击新增的时候渲染下来列表
  342. // 1、获取下拉列表的元素直接赋值tempIdStr
  343. // 2、如果tempIdStr值为空的话则走if流程
  344. $('#field').selectpicker('refresh');
  345. var tempIdStr = $("#field").html();
  346. $("#field").html(tempIdStr)
  347. if (tempIdStr == '') {
  348. var tempIdStr = '<option value="">选择1111</option>';
  349. // var tempIdStr = '<option value="' + this.list[0]['DEP'] + '" v-bind:value="DEP_DEP">' + this.list[0]['DEP'] + '---' + this.list[0]['DEP'] + '</option>';
  350. $("#field").append(tempIdStr);
  351. $.each(this.list_dep, function (i, item) {
  352. var tempId = '<option value="' + item.DEP + '" v-bind:value="DEP_DEP">' + item.DEP + '---' + item.DEP_NAME + '</option>';
  353. $("#field").append(tempId);
  354. // alert(tempId)
  355. });
  356. // 更新 。 这一步很重要
  357. $('#field').selectpicker('refresh');
  358. }
  359. // 移除保存按钮禁止disabled效果
  360. $('.abc').removeAttr('disabled')
  361. //设置修改按钮为禁止效果
  362. $(".update").attr("disabled", "disabled");
  363. //设置删除按钮为禁止效果
  364. $(".del").attr("disabled", "disabled");
  365. },
  366. // 查询单据
  367. seek() {
  368. console.log('查询单据')
  369. //设置保存按钮为禁止效果
  370. $(".abc").attr("disabled", "disabled");
  371. //移除修改按钮禁止效果disabled
  372. $('.update').removeAttr('disabled')
  373. //移除删除按钮禁止效果disabled
  374. $('.del').removeAttr('disabled')
  375. //设置删除行按钮为禁止效果
  376. $(".row_del").attr("disabled", "disabled");
  377. // 获取搜索框的部门
  378. var serch_var1 = $("#field1").selectpicker('val')
  379. // 获取搜索框的单号
  380. var serch_var2 = $("#field2").selectpicker('val')
  381. if (serch_var1 == '' & serch_var2 == '') {
  382. alert('请选择赛选条件')
  383. }
  384. console.log(serch_var1)
  385. console.log(serch_var2)
  386. },
  387. // 查询部门
  388. select_dep() {
  389. axios.get('/dept/', {
  390. // params: {
  391. // st_time: '',
  392. // sh_time: '',
  393. // cus_no: '',
  394. // cls_id: '',
  395. // pmc_ok: '',
  396. // }
  397. })
  398. .then(res => {
  399. // alert(res.data)
  400. var data1 = res.data.data
  401. this.list_dep = data1
  402. // console.log(this.list)
  403. // 设置下拉搜索
  404. var tempIdStr = '<option value="">选择部门</option>';
  405. // var tempIdStr = '<option value="' + this.list[0]['DEP'] + '" v-bind:value="DEP_DEP">' + this.list[0]['DEP'] + '---' + this.list[0]['DEP'] + '</option>';
  406. $("#field1").append(tempIdStr);
  407. $.each(this.list_dep, function (i, item) {
  408. var tempId = '<option value="' + item.DEP + '" v-bind:value="DEP_DEP">' + item.DEP + '---' + item.DEP_NAME + '</option>';
  409. $("#field1").append(tempId);
  410. // alert(tempId)
  411. });
  412. // 更新 。 这一步很重要
  413. $('#field1').selectpicker('refresh');
  414. })
  415. .catch(err => {
  416. console.log('error:' + err)
  417. })
  418. },
  419. // 查询单号
  420. select_odd() {
  421. axios.get('/oddno/', {
  422. // params: {
  423. // st_time: '',
  424. // sh_time: '',
  425. // cus_no: '',
  426. // cls_id: '',
  427. // pmc_ok: '',
  428. // }
  429. })
  430. .then(res => {
  431. // alert(res.data)
  432. var data1 = res.data.data
  433. this.list_no = data1
  434. // 设置下拉搜索
  435. var tempIdStr = '<option value="">选择单号</option>';
  436. $("#field2").append(tempIdStr);
  437. $.each(this.list_no, function (i, item) {
  438. var tempId = '<option value="' + item.MO_NO + '" v-bind:value="mo_no">' + item.MO_NO + '---' + item.MO_NO + '</option>';
  439. $("#field2").append(tempId);
  440. });
  441. // 更新 。 这一步很重要
  442. $('#field2').selectpicker('refresh');
  443. })
  444. .catch(err => {
  445. console.log('error:' + err)
  446. })
  447. }
  448. },
  449. filters:{
  450. rounding (value){
  451. if (typeof value=="number"){
  452. return value.toFixed(2)
  453. }
  454. else{
  455. return "No Number!!!"
  456. }
  457. }
  458. },
  459. created() {
  460. // $(".abc").attr("disabled", "disabled");
  461. this.select_dep()
  462. this.select_odd()
  463. },
  464. watch: {
  465. add_date(news, olds) {
  466. // console.log(news)
  467. // console.log(olds)
  468. }
  469. },
  470. });
  471. </script>
  472. </body>
  473. </html>