aio-ndxy/src/pages/task.vue

<template>
  <div class="contianer">
    <jxHeader type="3" title="配料作业"></jxHeader>
    <div class="contianer content">
      <div class="contianer content_wraper">
        <div class="contianer mgt2 grid_wraper">
          <table>
            <tr>
              <th>工单编码</th>
              <th>序号</th>
              <th>物料编码</th>
              <th>物料名称</th>
              <th>产线</th>
              <th>站点编码</th>
              <th>配料桶数</th>
              <th>剩余桶数</th>
              <th>物料重量</th>
              <th>状态</th>
              <th style="text-align: center">操作</th>
            </tr>
            <tr v-for="(e, i) in dataList" :key="i">
              <td>{{ e.mfg_order_name }}</td>
              <td>{{ e.seq_no }}</td>
              <td>{{ e.material_code }}</td>
              <td>{{ e.material_name }}</td>
              <td>{{ e.resource_name }}</td>
              <td>{{ e.point_code }}</td>
              <td>{{ e.require_num }}</td>
              <td>{{ e.remain_num }}</td>
              <td>{{ e.qty }}</td>
              <td>{{ e.status }}</td>
              <td>
                <div class="zd-row btn_wraper">
                  <button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled1}" :disabled="disabled1" @click="_sendWork(e)">下发</button>
                  <button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled2}" :disabled="disabled2" @click="openDialog(e)">补发</button>
                  <button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled3}" :disabled="disabled3" @click="_pdaPause(e)">暂停</button>
                  <button class="grid_button" :class="{'grid_button_disabled': e.checked && disabled4}" :disabled="disabled4" @click="_finishWork(e)">完成</button>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div class="zd-row filter-item">
        <div class="zd-col-6 filter-label">补发桶数</div>
        <el-input-number class="zd-col-17" v-model="inputNumber" :min="1" label="请输入数字"></el-input-number>
      </div>
      <div  class="zd-row jccenter button-wrap">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import jxHeader from '@components/header.vue'
// import {queryWorks} from '@config/mork.js'
import {queryWorks, sendWork, reSendWork, pdaPause, finishWork} from '@config/getData.js'
export default {
  name: 'task',
  components: {
    jxHeader
  },
  data () {
    return {
      timer: null,
      dataList: [],
      pkObj: '',
      disabled1: false,
      disabled2: false,
      disabled3: false,
      disabled4: false,
      dialogVisible: false,
      inputNumber: 1
    }
  },
  mounted () {
    this._queryWorks()
  },
  methods: {
    async _queryWorks () {
      let res = await queryWorks(this.$route.query.order)
      this.dataList = [...res]
      this.dataList.map(el => {
        this.$set(el, 'checked', false)
      })
    },
    async _sendWork (e) {
      this.disabled1 = true
      e.checked = true
      try {
        let res = await sendWork(e.work_code)
        this._queryWorks()
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.disabled1 = false
        e.checked = false
      } catch (e) {
        this.disabled1 = false
        e.checked = false
      }
    },
    async _reSendWork (e, num) {
      this.disabled2 = true
      e.checked = true
      try {
        let res = await reSendWork(e.work_code, num)
        this._queryWorks()
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.disabled2 = false
        e.checked = false
      } catch (e) {
        this.disabled2 = false
        e.checked = false
      }
    },
    async _pdaPause (e) {
      this.disabled3 = true
      e.checked = true
      try {
        let res = await pdaPause(e.work_code)
        this._queryWorks()
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.disabled3 = false
        e.checked = false
      } catch (e) {
        this.disabled3 = false
        e.checked = false
      }
    },
    async _finishWork (e) {
      this.disabled4 = true
      e.checked = true
      try {
        let res = await finishWork(e.work_code)
        this._queryWorks()
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.disabled4 = false
        e.checked = false
      } catch (e) {
        this.disabled4 = false
        e.checked = false
      }
    },
    openDialog (e) {
      this.dialogVisible = true
      this.inputNumber = 1
      this.pkObj = e
    },
    handleConfirm () {
      this.dialogVisible = false
      this._reSendWork(this.pkObj, this.inputNumber)
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import '~@style/mixin'
.grid_wraper
  height 100%
.btn_wraper
  width 3.5rem
</style>