123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496 |
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="/static/css/layer.css">
- <link rel="stylesheet" type="text/css" href="/static/css/css.css">
- <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-select.min.css">
- <link rel="stylesheet" type="text/css" href="/static/css/macf.css">
- <script src="/static/js/jquery.min.js"></script>
- <script src="/static/js/bootstrap.min.js"></script>
- <script src="/static/js/vue-2.4.0.js"></script>
- <script src="/static/js/axios.min.js"></script>
- <script src="/static/js/bootstrap-select_new.js"></script>
- <script src="/static/js/layer.js"></script>
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <!-- navbar-default这个类是设置导航栏 -->
- <div class="navbar navbar-default">
- <div class="container">
- <!-- navbar-header用于设置内容横向显示 -->
- <div class="navbar-header">
- <a href="/index" class="navbar-brand"></a>
- </div>
- <!-- navbar-nav用来设置横向显示 -->
- <!-- navbar-right用来设置右浮动 -->
- <!-- hidden-xs用于当屏幕很小的情况下隐藏div里面的内容 -->
- <div class="hidden-xs">
- <ul class="nav navbar-nav">
- <li class="dropdown">
- <!--订单一览表-->
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- 订单一览表
- <b class="caret"></b>
- </a>
- <ul class="nav dropdown-menu">
- <li><a href="/index">订单一览表</a></li>
- <li><a href="#">已结案订单</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <!--月度产能评估表-->
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- 月度产能评估表
- <b class="caret"></b>
- </a>
- <ul class="nav dropdown-menu">
- <li><a href="#">汇总分析</a></li>
- <li><a href="#">订单完成情况</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <!--月度主排程计划-->
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- 月度主排程计划
- <b class="caret"></b>
- </a>
- <ul class="nav dropdown-menu">
- <li><a href="/dep_sp">计划主交期</a></li>
- <li><a href="#">计划部门交期</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <!--搜索-->
- <div class="filter">
- <div class="container ">
- <label>
- <div class="navbar-nav">时间:</div>
- <div class="navbar-nav"><input type='date' class="input form-control" v-model="data_time" /></div>
- </label>
- <label>
- <div class="navbar-nav">部门:</div>
- <!-- <input type='text' class="input" v-model="DEPT" /> -->
- <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
- v-model="DEP_DEP" id="field1"></select>
- </div>
- </label>
- <label>
- <div class="navbar-nav">单号:</div>
- <div class="navbar-nav"><select class="selectpicker form-control" data-live-search="true"
- v-model="mo_no" id="field2"></select></div>
- </label>
- <label class="save def" id="def" @click="seek()">
- <div class="btn btn-primary navbar-nav">确定查询</div>
- </label>
- </div>
- </div>
- <!-- 内容 -->
- <!-- container这个类是设置居中对齐 -->
- <div class="container">
- <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="zengjia()">新增</button>
- <div class="modal fade" id="myModal">
- <div class="modal-dialog">
- <div class="modal-content" style="width: 300px;">
- <!-- 这里是标题 -->
- <div class="modal-header">
- <div class="modal-title">新增月度排产</div>
- </div>
- <!-- 这里是内容 -->
- <div class="modal-body">
- <table>
- <tr>
- <td>灌装生产线:
- <select class="selectpicker form-control" data-live-search="true"
- v-model="DEP_DEP" id="field">
- </select>
- </td>
- </tr>
- </table>
- </div>
- <!-- 这里是确定否 -->
- <div class="modal-footer">
- <button class="btn btn-primary" data-dismiss="modal" @click="add_dep_data()">确定</button>
- <button class="btn btn-primary" data-dismiss="modal">取消</button>
- </div>
- </div>
- </div>
- </div>
- <button class="btn btn-primary abc" @click="add_no()" disabled="disabled">保存</button>
- <button class="btn btn-primary update" @click="add_no()" disabled="disabled">修改</button>
- <button class="btn btn-primary del" @click="add_no()" disabled="disabled">删除</button>
- <!-- row这个类是用于设置取消内边距 -->
- <table class="table table-bordered table-hover table-striped">
- <tbody>
- <!-- <tr v-for="(item,i) in list" :key="item.OS_NO" style="background-color: yellowgreen;"> -->
- <tr>
- <td class="macf_01">序号</td>
- <td class="macf_02">产线</td>
- <td class="macf_03">产线名称</td>
- <td class="macf_04">未完工数量</td>
- <td class="macf_05">标准/满线日产能</td>
- <td class="macf_07">订单可维持天数</td>
- <td class="macf_06">标准直接人员配置</td>
- <td class="macf_08">现有产能</td>
- <td class="macf_09">现有生产线/人员</td>
- <td class="macf_10">现有配置可生产天数</td>
- <td class="macf_11">现有辅助工人</td>
- <td class="macf_18">现有直接工人</td>
- <td class="macf_12">现有出勤人员合计</td>
- <td class="macf_13">直接工人274小时/25天</td>
- <td class="macf_14">按274小时/25天</td>
- <td class="macf_15">计划新增人员配置</td>
- <td class="macf_16">需求工时</td>
- <td class="macf_17">按25个工作日计算人员需求</td>
- <td class="macf_19">人员缺口</td>
- <td class="macf_20">编制</td>
- <td class="macf_21">备注</td>
- <td class="macf_22">操作</td>
- </tr>
- <tr v-for="(item,i) in data_list" :key="item.DEP_DEP" class="itm_tr">
- <td class="macf_01" v-text="i+1"></td> <!--这里是序号-->
- <td class="macf_02" v-text="item.dep"></td> <!--产线-->
- <td class="macf_03" v-text="item.dep_name"></td> <!--产线名称-->
- <td class="macf_04" ><input class="macf_04" type="number" v-model="item.un_qty" disabled="disabled"></td> <!--未完工数量-->
- <td class="macf_05"><input class="macf_05" type="number" v-model="item.s_capacity"></td> <!--标准/满线日产能-->
- <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> <!--订单可维持天数-->
- <td class="macf_06"><input class="macf_06" type="number" v-model="item.s_d_staffing"></td> <!--标准直接人员配置-->
- <td class="macf_08"><input class="macf_08" type="number" v-model="item.e_capacity"></td> <!--现有产能-->
- <td class="macf_09"><input class="macf_09" type="number" v-model="item.epl_personnel"></td> <!--现有生产线/人员-->
- <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> <!--现有配置可生产天数-->
- <td class="macf_11"><input class="macf_11" type="number" v-model="item.e_a_workers"></td> <!--现有辅助工人-->
- <td class="macf_18"><input class="macf_18" type="number" v-model="item.e_d_workers"></td> <!--现有直接工人-->
- <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> <!--现有出勤人员合计-->
- <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天-->
- <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天-->
- <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> <!--计划新增人员配置-->
- <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> <!--需求工时-->
- <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个工作日计算人员需求-->
- <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> <!--人员缺口-->
- <td class="macf_20"><input class="macf_20" type="text" v-model="item.a_strength"></td> <!--编制-->
- <td class="macf_21"><textarea class="macf_21" rows="1" cols="10" v-model="item.rem">我是一个文本框。</textarea></td> <!--备注-->
- <td class="macf_22">操作</td> <!--操作-->
- </tr>
- </tbody>
- </table>
- </div>
- <div class="footer">
- 分页
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- data_time: '',
- DEPT: '',
- ODD: '',
- activeIndex: 0,
- list: [],
- DEP_DEP: '',
- DEP_QTY: 0,
- DEP_CN: 0,
- DEP_RY: '',
- DEP_WCTS: '',
- DEP_BZ: '',
- DEP_SJGS: '',
- DEP_RS: '',
- DEP_ZJRG: '',
- DEP_RYQK: '',
- qty: 0,
- add_date: [],
- data_list:[],
- test: [{ "DEP": "1", "DEP_NAME": "2" }, { "DEP": "1", "DEP_NAME": "2" }],
- monthly_odd_new: '保存显示',
- list_no: [],
- list_dep:[],
- mo_no:'', //重构开始
- dep:'', //车间部门
- dep_name:'', //车间部门名称
- no:'', // 单号
- dd:'', //单据日期
- un_qty:0, //未完工数量
- s_capacity:0, //标准/满线日产能
- s_d_staffing:0, //标准直接人员配置
- tolf_days:0, //订单直接人员配置
- e_capacity:0, //现有产能
- epl_personnel:0, //现有生产线/人员
- p_d_f_e_configurations:1, //现有配置可生产天数
- a_strength:'', //编制
- e_a_workers:0, //现在有辅助工人
- work_sum:0, //现有出勤人员合计
- zj_274_24:0, //直接工人按按274小时/25天配置人员
- a_274_24:0, //按274小时/25天配置人员
- new_personnel:0, //计划新增人员配置
- rem:'', //备注
- need_hours:0, //需求工时
- a_25:0, //按25个工作日计算人员需求
- e_d_workers:0, //现有直接工人
- p_gap:0, //人员缺口
- },
- methods: {
- // 更具部门查询后台数据
- add_dep_data() {
- // 获取搜索框的值
- var serch_var = $("#field").selectpicker('val')
- // alert('qq')
- if (serch_var == '' | typeof serch_var === 'undefined') {
- alert("请选择部门")
- return
- }
- this.DEP_DEP = serch_var
- if (this.DEP_DEP == '') {
- alert("部门没选择上")
- return
- }
- // 判断部门
- // var add_dep_date = {
- // DEP_DEP: this.DEP_DEP, DEP_QTY: this.DEP_QTY, DEP_CN: this.DEP_CN, DEP_RY: this.DEP_RY,
- // 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,
- // monthly_odd_new: this.monthly_odd_new
- // }
- // console.log(this.DEP_DEP)
- // console.log(1111)
- // console.log(this.DEP_DEP)
- // this.add_date.push(add_dep_date)
- // this.DEP_DEP = this.DEP_RY = this.DEP_WCTS = this.DEP_BZ = this.DEP_SJGS = this.DEP_RS = this.DEP_ZJRG = this.DEP_RYQK = ''
- // this.DEP_CN = this.DEP_QTY = 0
- axios.get('/depmacf/', {
- params: {
- dep: this.DEP_DEP
- }
- })
- .then(res => {
- // alert(res.data)
- var itm = res.data.data
- this.data_list.push(itm)
- // this.data_list = res.data.data
- console.log(this.data_list)
- })
- .catch(err => {
- console.log('error:' + err)
- })
- // $("#field").selectpicker('val')
- },
- // 保存单据
- add_no() {
- //获取单号
- if (this.monthly_odd_new == '保存显示') {
- {
- axios.get('/odd/', {
- // params: {
- // st_time: '',
- // sh_time: '',
- // cus_no: '',
- // cls_id: '',
- // pmc_ok: '',
- // }
- })
- .then(res => {
- // alert(res.data)
- var data1 = res.data.data
- this.monthly_odd_new = data1
- // this.add_date.monthly_odd_new = this.monthly_odd_new
- this.add_date.forEach((val, index) => {
- val["monthly_odd_new"] = this.monthly_odd_new;// 修改 把IsLimit修改成1
- // val["LimitAccount"] = 188.0;//增加
- // delete val["CustName"];// 删除
- })
- })
- .catch(err => {
- console.log('error:' + err)
- })
- }
- }
- var aa = [
- [
- {
- "aa":"aa",
- "bb":"bb"
- }
- ]
- ]
- console.log(this.add_date)
- //设置保存按钮为禁止
- $(".abc").attr("disabled", "disabled");
- //移除修改按钮禁止效果disabled
- $('.update').removeAttr('disabled')
- //移除删除按钮禁止效果disabled
- $('.del').removeAttr('disabled')
- this.monthly_odd_new = '保存显示'
- //
- },
- // 获取每一行的计算栏位qty
- qty_sum(i) {
- this.add_date[i]["qty"] = Number(this.add_date[i]["DEP_QTY"]) + Number(this.add_date[i]["DEP_CN"])
- console.log(this.add_date[i]["qty"])
- },
- // 删除ni zhaod每一行
- del(i) {
- // this.add_date.$remove(i);
- this.add_date.splice(i, 1);
- console.log(this.add_date)
- },
- zengjia() {
- // 点击新增的时候渲染下来列表
- // 1、获取下拉列表的元素直接赋值tempIdStr
- // 2、如果tempIdStr值为空的话则走if流程
- $('#field').selectpicker('refresh');
- var tempIdStr = $("#field").html();
- $("#field").html(tempIdStr)
- if (tempIdStr == '') {
- var tempIdStr = '<option value="">选择1111</option>';
- // var tempIdStr = '<option value="' + this.list[0]['DEP'] + '" v-bind:value="DEP_DEP">' + this.list[0]['DEP'] + '---' + this.list[0]['DEP'] + '</option>';
- $("#field").append(tempIdStr);
- $.each(this.list_dep, function (i, item) {
- var tempId = '<option value="' + item.DEP + '" v-bind:value="DEP_DEP">' + item.DEP + '---' + item.DEP_NAME + '</option>';
- $("#field").append(tempId);
- // alert(tempId)
- });
- // 更新 。 这一步很重要
- $('#field').selectpicker('refresh');
- }
- // 移除保存按钮禁止disabled效果
- $('.abc').removeAttr('disabled')
- //设置修改按钮为禁止效果
- $(".update").attr("disabled", "disabled");
- //设置删除按钮为禁止效果
- $(".del").attr("disabled", "disabled");
- },
- // 查询单据
- seek() {
- console.log('查询单据')
- //设置保存按钮为禁止效果
- $(".abc").attr("disabled", "disabled");
- //移除修改按钮禁止效果disabled
- $('.update').removeAttr('disabled')
- //移除删除按钮禁止效果disabled
- $('.del').removeAttr('disabled')
- //设置删除行按钮为禁止效果
- $(".row_del").attr("disabled", "disabled");
- // 获取搜索框的部门
- var serch_var1 = $("#field1").selectpicker('val')
- // 获取搜索框的单号
- var serch_var2 = $("#field2").selectpicker('val')
- if (serch_var1 == '' & serch_var2 == '') {
- alert('请选择赛选条件')
- }
- console.log(serch_var1)
- console.log(serch_var2)
- },
- // 查询部门
- select_dep() {
- axios.get('/dept/', {
- // params: {
- // st_time: '',
- // sh_time: '',
- // cus_no: '',
- // cls_id: '',
- // pmc_ok: '',
- // }
- })
- .then(res => {
- // alert(res.data)
- var data1 = res.data.data
- this.list_dep = data1
- // console.log(this.list)
- // 设置下拉搜索
- var tempIdStr = '<option value="">选择部门</option>';
- // var tempIdStr = '<option value="' + this.list[0]['DEP'] + '" v-bind:value="DEP_DEP">' + this.list[0]['DEP'] + '---' + this.list[0]['DEP'] + '</option>';
- $("#field1").append(tempIdStr);
- $.each(this.list_dep, function (i, item) {
- var tempId = '<option value="' + item.DEP + '" v-bind:value="DEP_DEP">' + item.DEP + '---' + item.DEP_NAME + '</option>';
- $("#field1").append(tempId);
- // alert(tempId)
- });
- // 更新 。 这一步很重要
- $('#field1').selectpicker('refresh');
- })
- .catch(err => {
- console.log('error:' + err)
- })
- },
- // 查询单号
- select_odd() {
- axios.get('/oddno/', {
- // params: {
- // st_time: '',
- // sh_time: '',
- // cus_no: '',
- // cls_id: '',
- // pmc_ok: '',
- // }
- })
- .then(res => {
- // alert(res.data)
- var data1 = res.data.data
- this.list_no = data1
- // 设置下拉搜索
- var tempIdStr = '<option value="">选择单号</option>';
- $("#field2").append(tempIdStr);
- $.each(this.list_no, function (i, item) {
- var tempId = '<option value="' + item.MO_NO + '" v-bind:value="mo_no">' + item.MO_NO + '---' + item.MO_NO + '</option>';
- $("#field2").append(tempId);
- });
- // 更新 。 这一步很重要
- $('#field2').selectpicker('refresh');
- })
- .catch(err => {
- console.log('error:' + err)
- })
- }
- },
- filters:{
- rounding (value){
- if (typeof value=="number"){
- return value.toFixed(2)
- }
- else{
- return "No Number!!!"
- }
- }
- },
- created() {
- // $(".abc").attr("disabled", "disabled");
- this.select_dep()
- this.select_odd()
- },
- watch: {
- add_date(news, olds) {
- // console.log(news)
- // console.log(olds)
- }
- },
- });
- </script>
- </body>
- </html>
|