aio-hl-new/src/pages/modules/workorder/work-order-assignment.vue

<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" filterable clearable placeholder="请选择">
                          <el-option
                              v-for="item in options"
                              :key="item.device_code"
                              :label="item.device_name"
                              :value="item.device_code">
                          </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="wrap-buttons">
                <button class="button button--primary" @click="getDatas">查询</button>
                <button class="button button--primary" :class="{'button--defalut': pkId === '' || pkObj.workorder_status === '3'}" :disabled="disabled1" @click="_openStart">开工</button>
                <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled2" @click="showDialog('1')">报工</button>
                <button class="button button--primary" :class="{'button--defalut': pkId === '' || pkObj.workorder_status === '2'}" :disabled="disabled3" @click="showDialog('2')">强制完成</button>
            </div>
        </div>
        <div class="grid_wraper">
            <table class="filter-table">
                <tr>
                    <!-- <th width="4%"></th> -->
                    <th width="13%">工单日期</th>
                    <th width="10%">工单号</th>
                    <th width="7%">状态</th>
                    <th width="10%">设备</th>
                    <!-- <th width="8%">物料名称</th> -->
                    <th width="9%">物料规格</th>
                    <!-- <th width="10%">工序</th> -->
                    <th width="8%">计划生产</th>
                    <th width="10%">电气数量</th>
                    <th width="10%">待生产</th>
                    <th width="10%">已生产</th>
                    <th width="13%">开工时间</th>
                </tr>
                <tr v-for="e in dataList" :key="e.workorder_id" :class="{'selected_icon': pkId === e.workorder_id}" @click="toRadio(e)">
                    <!-- <td>
                        <button class="iconfont select_icon" :class="{'selected_icon': pkId === e.workorder_id}" @click="toRadio(e)"></button>
                    </td> -->
                    <td>{{e.create_time}}</td>
                    <td>{{e.workorder_code}}</td>
                    <td>{{e.workorder_status_name}}</td>
                    <td>{{e.device_code}}</td>
                    <!-- <td>{{e.material_name}}</td> -->
                    <td>{{e.material_spec}}</td>
                    <!-- <td>{{e.workprocedure_name}}</td> -->
                    <td>{{e.plan_qty}}</td>
                    <td>{{ e.dq_real_qty }}</td>
                    <td>{{ e.report_qty }}</td>
                    <td>{{ e.real_qty }}</td>
                    <td>{{ e.realproducestart_date }}</td>
                </tr>
            </table>
        </div>
        <jxDialog
          ref="child"
          :title="title"
          :type="type"
          @toSure="toSureDialog"
          >
          <div v-if="type === '1'" class="form_wraper">
            <div class="form">
              <div class="form_item">
                <div class="form_item__label">合格数量</div>
                <div class="form_item__content">
                  <input type="number" class="form_item__input" v-model="reportQty">
                </div>
              </div>
              <!-- <div class="form_item">
                <div class="form_item__label">报废数量</div>
                <div class="form_item__content">
                  <input type="number" class="form_item__input" v-model="nokQty">
                </div>
              </div> -->
            </div>
            <!-- <div class="form">
              <div class="form_item">
                <div class="form_item__label">报修数量</div>
                <div class="form_item__content">
                  <input type="number" class="form_item__input" v-model="repareQty">
                </div>
              </div>
            </div> -->
          </div>
          <div v-if="type === '2'" class="form_wraper">当前操作将强制完成工单,结束生产，确定继续操作吗？</div>
        </jxDialog>
    </div>
</template>

<script>
import { deviceList, getOrderList2, openStart, tofinish, saveReport, orderStatus } from '../../../config/getData2.js'
import jxDialog from '@components/dialog.vue'
import {accSubtract} from '@config/utils.js'
export default {
  components: {
    jxDialog
  },
  data () {
    return {
      options: [],
      value: '',
      disabled1: false,
      disabled2: false,
      disabled3: false,
      dataList: [],
      pkId: '',
      pkObj: {},
      title: '',
      type: '',
      reportQty: '',
      // nokQty: '',
      // repareQty: '',
      status: []
    }
  },
  watch: {
    type (val) {
      switch (val) {
        case '1':
          this.title = '请输入数量'
          break
        case '2':
          this.title = '提示'
          break
      }
    }
  },
  created () {
    this._deviceList()
    this._orderStatus()
  },
  methods: {
    async _deviceList () {
      let res = await deviceList()
      if (res.code === 200) {
        this.options = [...res.content]
      }
    },
    async _orderStatus () {
      let res = await orderStatus()
      this.status = [...res]
      this.getDatas()
    },
    async getDatas () {
      let res = await getOrderList2(this.value)
      if (res.code === 200) {
        res.content.map(el => {
          let qty = '0'
          if (Number(accSubtract(el.plan_qty, el.real_qty)) > 0) {
            qty = accSubtract(el.plan_qty, el.real_qty)
          }
          this.$set(el, 'report_qty', qty)
          this.status.map(e => {
            if (e.value === Number(el.workorder_status)) {
              this.$set(el, 'workorder_status_name', e.label)
            }
          })
        })
        this.dataList = [...res.content]
      }
    },
    // 开工
    async _openStart () {
      this.disabled1 = true
      if (!this.pkId) {
        this.toast('请选择一行')
        this.disabled1 = false
        return
      }
      if (this.pkObj.workorder_status === '3') {
        this.disabled1 = false
        return
      }
      try {
        let res = await openStart(this.pkId, this.value)
        this.toast(res.msg)
        this.disabled1 = false
        this.pkId = ''
        this.pkObj = {}
        this.getDatas()
      } catch (e) {
        this.disabled1 = false
      }
    },
    // 报工
    async _saveReport () {
      this.$refs.child.disabled = true
      this.disabled2 = true
      if (!this.pkId) {
        this.toast('请选择一行')
        this.disabled2 = false
        return
      }
      try {
        let res = await saveReport(this.pkId, this.reportQty)
        this.toast(res.msg)
        this.disabled2 = false
        this.pkId = ''
        this.pkObj = {}
        this.$refs.child.active = false
        this.$refs.child.disabled = false
        this.getDatas()
      } catch (e) {
        this.disabled2 = false
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    showDialog (type) {
      this.type = type
      if (!this.pkId) {
        this.toast('请选择一行')
        return
      }
      switch (type) {
        case '1':
          this.reportQty = ''
          // this.nokQty = ''
          // this.repareQty = ''
          this.$refs.child.active = true
          break
        case '2':
          if (this.pkObj.workorder_status === '2') {
            return
          }
          this.$refs.child.active = true
          break
      }
    },
    // 完工
    async _tofinish () {
      this.$refs.child.disabled = true
      this.disabled3 = true
      try {
        let res = await tofinish(this.pkObj)
        this.toast(res.msg)
        this.disabled3 = false
        this.pkId = ''
        this.pkObj = {}
        this.$refs.child.active = false
        this.$refs.child.disabled = false
        this.getDatas()
      } catch (e) {
        this.disabled3 = false
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    toSureDialog (type) {
      switch (type) {
        case '1':
          this._saveReport()
          break
        case '2':
          this._tofinish()
          break
      }
    },
    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>