工单作业、报工查询、工单查询

src/pages/modules/workorder/index.vue

@@ -0,0 +1,181 @@
+<template>
+<div class="content">
+    <div class="header">
+        <div class="header-user-content">
+            <div class="header-user-txt">
+                <span class="span1">登录人员：</span>
+                <span class="span2">{{userName}}</span>
+            </div>
+            <div class="drop-button-wraper" @click="toSelect"><span class="icon_dropdown"></span></div>
+            <div v-show="show" class="dropdown-wrap">
+                <ul class="dropdown-list drift">
+                    <li class="dropdown-item" @click="exit">退出</li>
+                </ul>
+            </div>
+        </div>
+        <div class="header-time-wrap">
+            <div class="header-time">
+                <div class="xj_time">{{time}}</div>
+                <div class="date_week">
+                    <div class="xj_date">{{date}}</div>
+                    <div class="xj_week">{{week}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="body-container">
+        <div class="tabs_wrap">
+            <ul class="tabs">
+                <li v-for="i in menus" :key="i.index">
+                    <router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
+                </li>
+            </ul>
+        </div>
+        <div class="main-container">
+            <router-view></router-view>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
+      timer: null,
+      time: '',
+      date: '',
+      week: '',
+      show: false,
+      menus: [
+        {
+          label: '工单作业',
+          router: '/workorderassignment'
+        },
+        {
+          label: '报工查询',
+          router: '/workreportquery'
+        },
+        {
+          label: '工单查询',
+          router: '/workorderquery'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    },
+    toSelect () {
+      this.show = !this.show
+    },
+    exit () {
+      this.$store.dispatch('delUserInfo')
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin.styl'
+.content
+    _wh(100%, 100vh)
+    background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)
+.header
+    height 45px
+    _fj()
+    padding 0 15px
+.header-user-content
+    position relative
+    height 45px
+    _fj(flex-start)
+.header-user-txt
+    height 100%
+    line-height 45px
+    .span1
+        _font(14px, 1, #fff,,)
+    .span2
+        _font(16px, 1, #fff,,)
+.drop-button-wraper
+    height 100%
+    line-height 45px
+    font-size 14px
+    color #fff
+    margin-left 15px
+    vertical-align middle
+.dropdown-wrap
+    position absolute
+    top 45px
+    right 0
+    transform-origin center top
+    transition transform .3s ease-in-out
+    border 1px solid #e4e7ed
+    border-radius 4px
+    background-color #fff
+    box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
+    margin 5px 0
+.dropdown-list
+    padding 0
+.dropdown-item
+    _font(14px, 34px, #606266,,)
+    padding 0 20px
+.header-time-wrap
+    height 45px
+.header-time
+    height 45px
+    _fj(center,flex-end,column)
+.xj_time
+    _font(14px, 18px, #fff,,right)
+.date_week
+    _fj()
+.xj_date
+    _font(12px, 18px, #fff,,)
+.xj_week
+    _font(12px, 18px, #fff,,)
+.body-container
+    _wh(calc(100% - 30px), calc(100% - 65px))
+    margin 0 auto 20px
+    padding 5px
+    border 1px solid #484cce
+.tabs_wrap
+    height 34px
+    margin-bottom 10px
+.tabs
+  height 34px
+  li
+    float left
+    line-height 32px
+    text-align center
+    padding-right 10px
+    a
+      display inline-block
+      color #fff
+      width 100%
+      padding 0 10px
+      font-size 14px
+      border-bottom 1px solid #2aa6f9
+    .router-link-active
+        background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
+        border-top-left-radius 12px
+        border-top-right-radius 12px
+.main-container
+    _wh(100%, calc(100% - 44px))
+</style>

src/pages/modules/workorder/work-order-assignment.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="order-wraper">
+        <div class="wrap-filter-buttons">
+            <div class="wrap-filters">
+                <div class="filter_item">
+                    <div class="filter_label">设备</div>
+                    <div class="filter-input-wrap">
+                        <el-select v-model="value" placeholder="请选择">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </div>
+            </div>
+            <div class="wrap-buttons">
+                <button class="button button--primary" @click="getDatas">查询</button>
+                <button class="button button--primary" :disabled="disabled1" @click="_openStart">开工</button>
+                <button class="button button--primary" :disabled="disabled2" @click="_saveReport">报工</button>
+                <button class="button button--primary" :disabled="disabled3" @click="_tofinish">强制完成</button>
+            </div>
+        </div>
+        <div class="grid_wraper">
+            <table class="filter-table">
+                <tr>
+                    <th width="4%"></th>
+                    <th width="8%">工单日期</th>
+                    <th width="8%">工单号</th>
+                    <th width="10%">状态</th>
+                    <th width="8%">设备</th>
+                    <th width="10%">物料规格</th>
+                    <th width="10%">工序</th>
+                    <th width="10%">计划生产</th>
+                    <th width="9%">待生产</th>
+                    <th width="9%">已生产</th>
+                    <th width="13%">开工时间</th>
+                </tr>
+                <tr v-for="e in dataList" :key="e.workorder_id">
+                    <td>
+                        <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                    </td>
+                    <td>{{e.workorder_code}}</td>
+                    <td>{{e.shift_type_scode_name}}</td>
+                    <td>{{e.material_name}}</td>
+                    <td>{{e.workprocedure_name}}</td>
+                    <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                    <td>{{e.plan_qty}}</td>
+                    <td>{{e.real_qty}}</td>
+                    <td>
+                    </td>
+                    <td>{{e.realproducestart_date}}</td>
+                    <td>{{e.realproduceend_date}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: '选项1',
+        label: '超级管理员'
+      }, {
+        value: '选项2',
+        label: '系统管理员'
+      }, {
+        value: '选项3',
+        label: '普通用户'
+      }, {
+        value: '选项4',
+        label: '开发人员'
+      }],
+      value: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  methods: {
+    getDatas () {
+
+    },
+    _openStart () {
+
+    },
+    _saveReport () {
+
+    },
+    _tofinish () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.filter_label
+    width 32px
+.filter-input-wrap
+    width calc(100% - 32px)
+</style>

src/pages/modules/workorder/work-order-query.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="order-wraper">
+      <div class="wrap-filter-buttons">
+          <div class="wrap-filters">
+              <div class="filter_item">
+                  <div class="filter_label">工单日期</div>
+                  <div class="filter-input-wrap">
+                      <el-date-picker
+                          v-model="value1"
+                          type="daterange"
+                          range-separator="-"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+                      </el-date-picker>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z2">设备</div>
+                  <div class="filter-input-wrap filter-input-wrap_z2">
+                    <el-select v-model="value" placeholder="请选择">
+                      <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z3">关键字</div>
+                  <div class="filter-input-wrap filter-input-wrap_z3">
+                  <input type="text" class="filter-input" v-model="keyValue" placeholder="请输入工单号、物料编码">
+                  <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
+                  </div>
+              </div>
+          </div>
+          <div class="wrap-buttons">
+              <button class="button button--primary" @click="getDatas">查询</button>
+          </div>
+      </div>
+      <div class="grid_wraper">
+          <table class="filter-table">
+              <tr>
+                  <th width="4%"></th>
+                  <th width="8%">工单日期</th>
+                  <th width="8%">工单号</th>
+                  <th width="8%">设备</th>
+                  <th width="8%">状态</th>
+                  <th width="8%">物料名称</th>
+                  <th width="8%">工序</th>
+                  <th width="8%">工单数量</th>
+                  <th width="8%">实际数量</th>
+                  <th width="8%">报废数量</th>
+                  <th width="7%">报修数量</th>
+                  <th width="8%">开始时间</th>
+                  <th width="8%">开始时间</th>
+              </tr>
+              <tr v-for="e in dataList" :key="e.workorder_id">
+                  <td>
+                      <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                  </td>
+                  <td>{{e.workorder_code}}</td>
+                  <td>{{e.shift_type_scode_name}}</td>
+                  <td>{{e.material_name}}</td>
+                  <td>{{e.workprocedure_name}}</td>
+                  <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                  <td>{{e.plan_qty}}</td>
+                  <td>{{e.real_qty}}</td>
+                  <td>
+                  </td>
+                  <td>{{e.realproducestart_date}}</td>
+                  <td>{{e.realproduceend_date}}</td>
+                  <td></td>
+                  <td></td>
+              </tr>
+          </table>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value1: [new Date(), new Date()],
+      options: [],
+      value: '',
+      keyValue: '',
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  computed: {
+    closeIcon1 () {
+      return this.keyValue !== ''
+    }
+  },
+  methods: {
+    clearData (e) {
+      switch (e) {
+        case 1:
+          this.keyValue = ''
+          break
+      }
+    },
+    getDatas () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.wrap-filters
+  width calc(100% - 60px)
+.wrap-buttons
+  width 60px
+.filter_label_z2
+  width 32px
+.filter-input-wrap_z2
+  width calc(100% - 32px)
+.filter_label_z3
+  width 43px
+.filter-input-wrap_z3
+  width calc(100% - 43px)
+.filter_item
+  &:nth-child(1)
+      width 55%
+  &:nth-child(2)
+      width calc(45% - 10px)
+</style>

src/pages/modules/workorder/work-report-query.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="order-wraper">
+      <div class="wrap-filter-buttons">
+          <div class="wrap-filters">
+              <div class="filter_item">
+                  <div class="filter_label">工单日期</div>
+                  <div class="filter-input-wrap">
+                      <el-date-picker
+                          v-model="value1"
+                          type="daterange"
+                          range-separator="-"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+                      </el-date-picker>
+                  </div>
+              </div>
+              <div class="filter_item">
+                  <div class="filter_label filter_label_z2">设备</div>
+                  <div class="filter-input-wrap filter-input-wrap_z2">
+                    <el-select v-model="value" placeholder="请选择">
+                      <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </div>
+              </div>
+          </div>
+          <div class="wrap-buttons">
+              <button class="button button--primary" @click="getDatas">查询</button>
+              <button class="button button--primary" :disabled="disabled1">修改</button>
+              <button class="button button--primary" :disabled="disabled2">删除</button>
+          </div>
+      </div>
+      <div class="grid_wraper">
+          <table class="filter-table">
+              <tr>
+                  <th width="4%"></th>
+                  <th width="7%">工单号</th>
+                  <th width="6%">设备</th>
+                  <th width="8%">顺序号</th>
+                  <th width="8%">班次</th>
+                  <th width="8%">物料名称</th>
+                  <th width="8%">开始时间</th>
+                  <th width="8%">结束时间</th>
+                  <th width="7%">电气数量</th>
+                  <th width="10%">上报合格数</th>
+                  <th width="7%">上报报废数</th>
+                  <th width="6%">上报报修数</th>
+                  <th width="6%">操作工</th>
+                  <th width="5%">状态</th>
+              </tr>
+              <tr v-for="e in dataList" :key="e.workorder_id">
+                  <td>
+                      <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
+                  </td>
+                  <td>{{e.workorder_code}}</td>
+                  <td>{{e.shift_type_scode_name}}</td>
+                  <td>{{e.material_name}}</td>
+                  <td>{{e.workprocedure_name}}</td>
+                  <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
+                  <td>{{e.plan_qty}}</td>
+                  <td>{{e.real_qty}}</td>
+                  <td>
+                  </td>
+                  <td>{{e.realproducestart_date}}</td>
+                  <td>{{e.realproduceend_date}}</td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+              </tr>
+          </table>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [],
+      value: '',
+      value1: [new Date(), new Date()],
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
+      pkId: '',
+      pkObj: {}
+    }
+  },
+  methods: {
+    getDatas () {
+
+    },
+    toRadio (e) {
+      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
+      this.pkObj = this.pkId === e.workorder_id ? e : {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.wrap-filters
+  width calc(100% - 270px)
+.wrap-buttons
+  width 270px
+.filter_label_z2
+  width 32px
+.filter-input-wrap_z2
+  width calc(100% - 32px)
+.filter_item
+  &:nth-child(1)
+      width 55%
+  &:nth-child(2)
+      width calc(45% - 10px)
+</style>