分拣管理

src/pages/proj/SortingManage.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="inner-wrap">
+    <nav-bar title="分拣管理"></nav-bar>
+    <div class="wrap2">
+      <div class="wrap-filter-button">
+        <div class="wrap-button clearfix">
+          <button class="button--primary" :disabled="disabled3" @click="toSure1">设备暂停</button>
+          <button class="button--primary" :disabled="disabled4" @click="toSure2">设备恢复</button>
+          <button class="button--primary" :disabled="disabled5" @click="toSure3">急停</button>
+          <button class="button--primary" :disabled="disabled6" @click="toSure4">清料</button>
+          <button class="button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled1" @click="toSendMessage1">手动下发刻字信息</button>
+          <button class="button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled2" @click="toSendMessage2">手动下发贴标信息</button>
+        </div>
+      </div>
+      <section class="grid-wraper mgt15">
+        <div class="slide_new">
+          <table>
+            <thead>
+              <tr>
+                <th>选择</th>
+                <th>工单（明细）号</th>
+                <th>工单（明细）状态</th>
+                <th>物料编码</th>
+                <th>物料名称</th>
+                <th>外径</th>
+                <th>壁厚</th>
+                <th>长度</th>
+                <th>下料数量</th>
+                <th>客户编码</th>
+                <th>客户名称</th>
+                <th>当前上料数量</th>
+                <th>当前上料合格数量</th>
+                <th>当前刻字数量</th>
+                <th>当前刻字合格数量</th>
+                <th>当前套冒数量</th>
+                <th>当前套冒合格数量</th>
+                <th>当前捆扎包数</th>
+                <th>当前捆扎数</th>
+                <th>当前裹膜数量</th>
+                <th>当前裹膜合格数量</th>
+                <th>当前贴标数量</th>
+                <th>上料完成</th>
+                <th>刻字完成</th>
+                <th>套冒完成</th>
+                <th>捆扎完成</th>
+                <th>裹膜完成</th>
+                <th>贴标完成</th>
+                <th>创建者</th>
+                <th>创建时间</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(e, i) in dataList" :key="e.order_id">
+                <td @click="toCheck(e)"><div v-show="e.pid !== 0" class="iconfont select_icon" :class="e.order_id === pkId ? 'selected_icon' : 'unselect_icon'"></div></td>
+                <td>
+                  <div class="td_detail" @click="showSec(e, i)">
+                     <p>{{e.order_code}}</p>
+                    <div v-show="e.pid === 0" class="iconfont table_dropdown_icon" :class="{'rotate180': e.childShow}"></div>
+                  </div>
+                </td>
+                <td>{{['就绪', '已确认', '已下发', '执行中', '下发工单暂停 05-工单暂停', '下发强制完成', '强制完成', '自动完成', '取消'][Number(e.order_status)]}}</td>
+                <td>{{e.material_code}}</td>
+                <td>{{e.material_name}}</td>
+                <td>{{e.outer_diameter}}</td>
+                <td>{{e.wall_thickness}}</td>
+                <td>{{e.length}}</td>
+                <td>{{e.qty}}</td>
+                <td>{{e.cust_code}}</td>
+                <td>{{e.cust_name}}</td>
+                <td>{{e.present_feeding_number}}</td>
+                <td>{{e.feeding_qualified_number}}</td>
+                <td>{{e.present_lettering_number}}</td>
+                <td>{{e.qualified_lettering_number}}</td>
+                <td>{{e.present_sleeveing_number}}</td>
+                <td>{{e.qualified_sleeveing_number}}</td>
+                <td>{{e.present_strap_pack_number}}</td>
+                <td>{{e.present_strap_number}}</td>
+                <td>{{e.present_wraping_number}}</td>
+                <td>{{e.qualified_wraping_number}}</td>
+                <td>{{e.present_labeling_number}}</td>
+                <td>{{['未完成', '完成', '强制完成'][Number(e.feeding_finished)]}}</td>
+                <td>{{e.lettering_finished}}</td>
+                <td>{{e.sleeveing_finished}}</td>
+                <td>{{['未完成', '完成', '强制完成'][Number(e.strap_finished)]}}</td>
+                <td>{{['未完成', '完成', '强制完成'][Number(e.wraping_finished)]}}</td>
+                <td>{{['未完成', '完成', '强制完成'][Number(e.labeling_finished)]}}</td>
+                <td>{{e.create_by}}</td>
+                <td>{{e.create_time}}</td>
+                <td>
+                  <button v-show="e.pid === 0" class="button--primary button--cancle button_table_font" :disabled="disabled7" @click="toOrderOperation1(e)">强制完成工单</button>
+                  <button v-show="e.pid !== 0" class="button--primary button--cancle button_table_font" :disabled="disabled8" @click="toOrderOperation2(e)">手动完成</button>
+                  <button v-show="e.pid !== 0" class="button--primary button--cancle button_table_font" :disabled="disabled9" @click="toOrderOperation3(e)">强制完成明细</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@components/NavBar.vue'
+import {sortingOrder, sendMessage, deviceOperation, orderOperation} from '@config/getData2.js'
+export default {
+  name: 'SortingManage',
+  components: {
+    NavBar
+  },
+  data () {
+    return {
+      dataList: [],
+      newList: [],
+      pkId: '',
+      pkObj: {},
+      disabled1: false,
+      disabled2: false,
+      disabled3: false,
+      disabled4: false,
+      disabled5: false,
+      disabled6: false,
+      disabled7: false,
+      disabled8: false,
+      disabled9: false
+    }
+  },
+  created () {
+    this.sortingOrder()
+  },
+  methods: {
+    showSec (e, i) {
+      e.childShow = !e.childShow
+      if (e.childShow) {
+        if (e.children.length > 0) {
+          e.children.map((el, j) => {
+            let obj = Object.assign({}, e, el, {children: [], pid: j + 1})
+            this.dataList.splice(i + j + 1, 0, obj)
+          })
+        }
+      } else {
+        if (e.children.length > 0) {
+          this.dataList.splice(i + 1, e.children.length)
+        }
+      }
+    },
+    toCheck (e) {
+      this.pkId = this.pkId === e.order_id ? '' : e.order_id
+      this.pkObj = this.pkId === e.order_id ? e : {}
+    },
+    /** 查询分拣工单及明细（定时查询） */
+    async sortingOrder () {
+      let res = await sortingOrder()
+      if (res.code === '1') {
+        this.dataList = [...res.result]
+        this.dataList.map(el => {
+          this.$set(el, 'pid', 0)
+          this.$set(el, 'childShow', false)
+        })
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    /** 下发刻字、贴标 */
+    async _sendMessage (type, uuid, ouuid) {
+      try {
+        let res = await sendMessage(type, uuid, ouuid)
+        if (res.code === '1') {
+          this.toast(res.desc)
+        } else {
+          this.Dialog(res.desc)
+        }
+        this.disabled1 = false
+        this.disabled2 = false
+      } catch (err) {
+        this.Dialog(err)
+        this.disabled1 = false
+        this.disabled2 = false
+      }
+    },
+    toSendMessage1 () {
+      this.disabled1 = true
+      if (!this.pkId) {
+        this.disabled1 = false
+        return
+      }
+      this._sendMessage('1', this.pkObj.order_code, this.pkObj.order_id)
+    },
+    toSendMessage2 () {
+      this.disabled2 = true
+      if (!this.pkId) {
+        this.disabled2 = false
+        return
+      }
+      this._sendMessage('2', this.pkObj.order_code, this.pkObj.order_id)
+    },
+    /** 下发设备信号 */
+    async _deviceOperation (type) {
+      try {
+        let res = await deviceOperation(type)
+        if (res.code === '1') {
+          this.toast(res.desc)
+        } else {
+          this.Dialog(res.desc)
+        }
+        this.disabled3 = false
+        this.disabled4 = false
+        this.disabled5 = false
+        this.disabled6 = false
+      } catch (err) {
+        this.Dialog(err)
+        this.disabled3 = false
+        this.disabled4 = false
+        this.disabled5 = false
+        this.disabled6 = false
+      }
+    },
+    toSure1 () {
+      this.disabled3 = true
+      this._deviceOperation('1')
+    },
+    toSure2 () {
+      this.disabled4 = true
+      this._deviceOperation('2')
+    },
+    toSure3 () {
+      this.disabled5 = true
+      this._deviceOperation('3')
+    },
+    toSure4 () {
+      this.disabled6 = true
+      this._deviceOperation('4')
+    },
+    /** 工单操作 */
+    async _orderOperation (type, uuid, ouuid) {
+      try {
+        let res = await orderOperation(type, uuid, ouuid)
+        if (res.code === '1') {
+          this.toast(res.desc)
+        } else {
+          this.Dialog(res.desc)
+        }
+        this.disabled7 = false
+        this.disabled8 = false
+        this.disabled9 = false
+      } catch (err) {
+        this.Dialog(err)
+        this.disabled7 = false
+        this.disabled8 = false
+        this.disabled9 = false
+      }
+    },
+    toOrderOperation1 (e) {
+      this.disabled7 = true
+      this._orderOperation('2', e.order_code, e.order_id)
+    },
+    toOrderOperation2 (e) {
+      this.disabled8 = true
+      this._orderOperation('3', e.order_code, e.order_id)
+    },
+    toOrderOperation3 (e) {
+      this.disabled9 = true
+      this._orderOperation('4', e.order_code, e.order_id)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin.styl'
+.wrap-filter-button
+  padding 0.05rem 0.2rem
+  margin 0
+.wrap-button
+  margin 0.01rem auto
+.grid-wraper
+  _wh(100%, 100%)
+  overflow-y scroll
+  box-sizing border-box
+.slide_new
+  table
+    table-layout fixed
+    min-width 100%
+    border-collapse separate
+    border-spacing 0
+    border 0
+    td, th
+      box-sizing border-box
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+      white-space nowrap
+      padding 0 .15rem
+      border-bottom .05rem solid #f5f5f5
+      &:first-child
+        position sticky
+        left 0
+      &:nth-child(2)
+        position sticky
+        left .4rem
+      &:last-child
+        position sticky
+        right 0
+    thead
+      tr
+        th
+          position sticky
+          top 0
+          z-index 99
+          background #d7d7d7
+          _font(.13rem, .5rem, #696969, bold)
+          border-right .01rem dashed #fff
+          &:first-child
+            z-index 1
+            background #d7d7d7
+          &:nth-child(2)
+            z-index 2
+            background #d7d7d7
+          &:last-child
+            border-right none
+    tbody
+      tr
+        td
+          _font(.13rem, .5rem, #323232)
+          background #fff
+          border-right .01rem dashed #d7d7d7
+          &:last-child
+            border-right none
+.td_detail
+  _fj(flex-start)
+.table_dropdown_icon
+  _wh(.2rem, .2rem)
+  _font(.13rem, .2rem, #c0c4cc,,center)
+  margin-left .1rem
+  &::before
+    content: '\e62b'
+.rotate180
+  transform rotate(-180deg)
+  transition transform 0.3s
+</style>