1.工序报工10%

loulijun2021

2023-09-25 08f65f89cecdcfb24a67e87e6a75e1cf3db3521a

 src/views/produce/stepReport.vue

@@ -1,11 +1,394 @@
<template />
<template>
  <div>
    <div class="body" style="padding-top: 10px;" :style="{height:mainHeight+'px'}">
      <el-tabs
        ref="elTabs"
        v-model="activeName"
        type="border-card"
        @tab-click="tabClick"
      >
        <el-tab-pane
          v-for="item in elTabsArr"
          :key="item.code"
          :label="item.name"
          :name="item.name"
        >
          <div class="bodyTopFormGroup">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              inline
              style="display: flex;"
            >
              <div class="elForm">

                <el-form-item label="工单号" style=" display: flex;">
                  <el-input
                    v-model="form.wocode"
                    :name="'produceCode'+item.code"
                    placeholder="请扫描或输入"
                    style="width: 300px"
                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"
                  />
                </el-form-item>
                <el-form-item label="产品编码" style=" display: flex;">
                  <el-input v-model="form.partcode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="产品名称" style=" display: flex;">
                  <el-input v-model="form.partname" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="规格型号" style=" display: flex;">
                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />
                </el-form-item>

              </div>
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button v-waves type="primary" icon="el-icon-search" @click="">查询</el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="">重置</el-button>
              </div>
            </el-form>
            <div
              class="bodyTopFormExpand"
              style="height:5px"
            >
              <!--          <svg-icon-->
              <!--            v-show="mouseHoverType==='mouseout'"-->
              <!--            style="cursor: pointer"-->
              <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
              <!--            @mouseenter="mouseHoverType=$event.type"-->
              <!--          />-->
              <!--          <svg-icon-->
              <!--            v-show="mouseHoverType==='mouseenter'"-->
              <!--            style="cursor: pointer"-->
              <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
              <!--            @click="isExpandForm=!isExpandForm"-->
              <!--            @mouseout="mouseHoverType=$event.type"-->
              <!--          />-->
            </div>
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef"
              :key="'tableDataRef'+item.code"
              class="tableFixed"
              :data="tableData"
              :height="tableHeight+50"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:tableHeight+'px'}"
              highlight-current-row
              :header-cell-style="headerCellStyle()"
              :cell-style="cellStyle()"
              @sort-change="sortChange"
            >
              <el-table-column
                prop="RowNum"
                width="50"
                label="序号"
                fixed
              />
              <el-table-column
                prop="status"
                show-tooltip-when-overflow
                label="状态"
                sortable="custom"
                width="80"
              >
                <template slot-scope="{row}">
                  <div v-if="row.status==='NEW'">新订单</div>
                  <div v-if="row.status==='ALLO'">已派发</div>
                  <div v-if="row.status==='START'">开工</div>
                  <div v-if="row.status==='CLOSED'">完工</div>
                  <div v-if="row.status==='NOSCHED'">待排程</div>
                  <div v-if="row.status==='SCHED'">已排程</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="wo_code"
                label="工单号"
                width="160"
                show-tooltip-when-overflow
                sortable="custom"
              />
              <el-table-column
                prop="partcode"
                label="产品编码"
                min-width="110"
                sortable="custom"
                show-tooltip-when-overflow
              />
              <el-table-column
                prop="partname"
                width="160"
                show-tooltip-when-overflow
                label="产品名称"
                sortable="custom"
              />
              <el-table-column
                prop="stepname"
                label="工序"
                show-tooltip-when-overflow
                width="120"
                sortable="custom"
              />
              <!--              <el-table-column-->
              <!--                prop="descr"-->
              <!--                label="工序描述"-->
              <!--                min-width="150"-->
              <!--                sortable="custom"-->
              <!--              >-->
              <!--                <template slot-scope="{row}">-->
              <!--                  <div v-if="row.descr">{{ row.descr }}</div>-->
              <!--                  <div v-else>/</div>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column
                prop="plan_qty"
                label="任务数量"
                width="110"
                sortable="custom"
                show-tooltip-when-overflow
              />
              <el-table-column
                label="未报工数量"
                width="120"
                show-tooltip-when-overflow
              >
                <!--                sortable="custom"-->
                <template slot-scope="{row}">
                  <div>{{ row.plan_qty - row.good_qty - row.ng_qty }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="good_qty"
                show-tooltip-when-overflow
                label="合格数量"
                sortable="custom"
                width="160"
              />
              <el-table-column
                prop="ng_qty"
                label="不良数量"
                show-tooltip-when-overflow
                width="150"
                sortable="custom"
              />
              <el-table-column
                prop="bad_qty"
                label="已报废数量"
                width="120"
                show-tooltip-when-overflow
                sortable="custom"
              />
              <el-table-column
                prop="plan_startdate"
                label="计划开工日期"
                show-tooltip-when-overflow
                width="150"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  <div v-if="row.plan_startdate">{{ row.plan_startdate.substring(0, 11) }}</div>
                  <div v-else>/</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="plan_enddate"
                label="计划完工日期"
                width="150"
                sortable="custom"
                show-tooltip-when-overflow
                fixed="right"
              >
                <template slot-scope="{row}">
                  <div v-if="row.plan_startdate">{{ row.plan_startdate.substring(0, 11) }}</div>
                  <div v-else>/</div>
                </template>
              </el-table-column>
              <!--              <el-table-column-->
              <!--                label="操作"-->
              <!--                width="150"-->
              <!--                fixed="right"-->
              <!--              >-->
              <!--                <template slot-scope="{row}">-->
              <!--                  <div class="operationClass">-->
              <!--                    <el-button v-waves type="text" @click="edit('edit',row)">编辑</el-button>-->
              <!--                    <el-button v-waves type="text" @click="del(row)">删除</el-button>-->
              <!--                  </div>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </div>
          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes"
            popper-class="select_bottom"
            @pagination="getMesOrderStepSearch"
          />
        </el-tab-pane>

      </el-tabs>

    </div>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import $ from 'jquery'
import { getCookie } from '@/utils/auth'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { MesOrderStepSearch } from '@/api/WorkOrder'

export default {
  name: 'StepReport'
  name: 'SCKBG',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        wocode: '', // 工单号
        partcode: '', // 产品编码
        partname: '', // 产品名称
        partspec: '', // 产品规格
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      activeName: '生产列表',
      elTabsArr: [
        { code: 'ZZ', name: '生产列表' },
        { code: 'OUT', name: '外协发料' },
        { code: 'IN', name: '外协收料' },
        { code: 'BAD', name: '不良待处理' }
      ]

    }
  },

  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.tabClick()
  },
  methods: {
    tabClick() {
      let belong
      switch (this.activeName) {
        case '生产列表':
          belong = 'produceCodeZZ'
          break
        case '外协发料':
          belong = 'produceCodeOUT'
          break
        case '外协收料':
          belong = 'produceCodeIN'
          break
        case '不良待处理':
          belong = 'produceCodeBAD'
          break
      }
      this.enterNative(this.form.wocode, belong)
    },
    enterNative(val, belong) {
      console.log(val, belong, 89898989)
      if (belong === 'produceCodeZZ') {
        console.log('进来了！')
        this.$nextTick(() => {
          $('input[name=\'produceCodeZZ\']')[0].focus()
        })
      }
      if (belong === 'produceCodeOUT') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeOUT\']')[0].focus()
        })
      }
      if (belong === 'produceCodeIN') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeIN\']')[0].focus()
        })
      }
      if (belong === 'produceCodeBAD') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeBAD\']')[0].focus()
        })
      }
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      // this.getMesOrderStepSearch()
      this.search()// search 方法里面应该把四种情况列出来  明天接着写
    },
    async getMesOrderStepSearch() {
      const { data: res } = await MesOrderStepSearch()
    },
    // 查询
    search() {
      this.getMesOrderStepSearch()
    },
    // 对话框关闭事件
    handleClose() {
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.tabClick()
    },
    // 对话框确认
    dialogVisibleConfirm() {
      // this.$refs.dialogForm.validate(async valid => {
      //   if (valid) {
      //
      //   }
      // })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 275
        // this.$refs.tableDataRef.doLayout()
      })
    },

    headerCellStyle() {
      return this.$headerCellStyle
    },
    cellStyle() {
      return this.$cellStyle
    }
  }
}
</script>

<style scoped>

</style>