aio-hl-new/src/pages/modules/workorder/work-report-query.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-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.device_code"
                          :label="item.device_name"
                          :value="item.device_code">
                      </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 filter-input_1" v-model="workorder">
                  <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>
              <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled1" @click="showDialog">修改</button>
              <button class="button button--primary" :class="{'button--defalut': pkId === ''}" :disabled="disabled2" @click="_deleteReport">删除</button>
          </div>
      </div>
      <div class="grid_wraper">
          <table class="filter-table">
              <tr>
                  <th width="4%"></th>
                  <th width="6%">工单号</th>
                  <th width="6%">设备</th>
                  <th width="6%">顺序号</th>
                  <th width="4%">班次</th>
                  <th width="8%">物料名称</th>
                  <th width="8%">开始时间</th>
                  <th width="8%">结束时间</th>
                  <th width="7%">电气数量</th>
                  <th width="10%">上报合格数</th>
                  <th width="10%">上报报废数</th>
                  <th width="10%">上报报修数</th>
                  <th width="6%">操作工</th>
                  <th width="5%">状态</th>
              </tr>
              <tr v-for="e in dataList" :key="e.macoperate_id">
                  <td>
                      <button class="iconfont select_icon" :class="{'selected_icon': pkId === e.macoperate_id}" @click="toRadio(e)"></button>
                  </td>
                  <td>{{e.workorder_code}}</td>
                  <td>{{e.device_code}}</td>
                  <td>{{e.seq_number}}</td>
                  <td>{{e.shift_type_scode}}</td>
                  <td>{{e.material_name}}</td>
                  <td>{{e.operatetime_start}}</td>
                  <td>{{e.operatetime_end}}</td>
                  <td>{{ e.dq_report_qty }}</td>
                  <td>{{e.report_qty}}</td>
                  <td>{{e.nok_qty}}</td>
                  <td>{{ e.repare_qty }}</td>
                  <td>{{ e.produce_person_name }}</td>
                  <td>{{ ['生成','报工','审核'][Number(e.report_status) - 1] }}</td>
              </tr>
          </table>
      </div>
      <jxDialog
        ref="child"
        title="请输入数量"
        @toSure="toSureDialog"
        >
        <div 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>
      </jxDialog>
  </div>
</template>

<script>
import { deviceList, reportQuery, updateReport, deleteReport } from '../../../config/getData2.js'
import jxDialog from '@components/dialog.vue'
import {dateFtt} from '@config/utils.js'
export default {
  components: {
    jxDialog
  },
  data () {
    return {
      options: [],
      value: '',
      value1: [new Date(), new Date()],
      workorder: '',
      disabled1: false,
      disabled2: false,
      dataList: [{macoperate_id: '1'}],
      pkId: '',
      pkObj: {},
      reportQty: '',
      nokQty: '',
      repareQty: ''
    }
  },
  computed: {
    closeIcon1 () {
      return this.keyValue !== ''
    }
  },
  watch: {
    workorder () {
      this.debouncedgetDatas()
    }
  },
  created () {
    this._deviceList()
    this.debouncedgetDatas = this.debounce(this.getDatas, 500)
  },
  methods: {
    debounce (fn, delay = 500) {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    },
    clearData (e) {
      switch (e) {
        case 1:
          this.workorder = ''
          break
      }
    },
    async _deviceList () {
      let res = await deviceList()
      if (res.code === 200) {
        this.options = [...res.content]
      }
    },
    async getDatas () {
      let res = await reportQuery(this.value1 !== null ? dateFtt(this.value1[0]) : '', this.value1 !== null ? dateFtt(this.value1[1]) : '', this.value, this.workorder)
      this.dataList = [...res.content]
    },
    toRadio (e) {
      this.pkId = this.pkId === e.macoperate_id ? '' : e.macoperate_id
      this.pkObj = this.pkId === e.macoperate_id ? e : {}
    },
    showDialog () {
      if (!this.pkId) {
        this.toast('请选择一行')
        return
      }
      this.reportQty = this.pkObj.report_qty
      this.nokQty = this.pkObj.nok_qty
      this.repareQty = this.pkObj.repare_qty
      this.$refs.child.active = true
    },
    toSureDialog () {
      this._updateReport()
    },
    async _updateReport () {
      try {
        let res = await updateReport(this.pkId, this.reportQty, this.nokQty, this.repareQty)
        this.toast(res.message)
        this.disabled1 = false
        this.$refs.child.active = false
        this.$refs.child.disabled = false
        this.getDatas()
      } catch (e) {
        this.disabled1 = false
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    async _deleteReport () {
      this.disabled2 = true
      if (!this.pkId) {
        this.toast('请选择一行')
        this.disabled2 = false
        return
      }
      try {
        let res = await deleteReport(this.pkId)
        this.toast(res.message)
        this.disabled2 = false
        this.getDatas()
      } catch (e) {
        this.disabled2 = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrap-filters
  width calc(100% - 178px)
.wrap-buttons
  width 178px
.filter_label_z2
  width 32px
.filter-input-wrap_z2
  width calc(100% - 32px)
.filter_item
  &:nth-child(1)
      width 43%
  &:nth-child(2)
      width calc(30% - 10px)
  &:nth-child(3)
      width calc(27% - 10px)
.close_icon
  width 20px
  height 20px
  font-size 15px
  line-height 20px
  top 5px
  right 10px
.filter_label_z3
  width 43px
.filter-input-wrap_z3
  width calc(100% - 43px)
</style>