nrwms_web/src/views/business-data/pickDetail/pickTicketTask.vue

<template>
  <el-dialog :visible.sync="dialog" :before-close="handleClose" append-to-body title="拣货确认-拣货记录" width="88%">
    <!-- 搜索 -->
    <div class="head-container">
      <!-- 导出 -->
      <div style="display: inline-block;">
        <el-button
          :loading="downloadLoading"
          size="mini"
          class="filter-item"
          type="warning"
          icon="el-icon-download"
          @click="downloadMethod"
        >导出
        </el-button>

        <el-button
          :loading="downloadLoading"
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-lollipop"
          @click="picking()"
        >人工拣货
        </el-button>

        <el-button
          :loading="downloadLoading"
          size="mini"
          class="filter-item"
          type="primary"
          icon="el-icon-potato-strips"
          @click="pickBarBack"
        >整单退拣
        </el-button>

      </div>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" style="width: 100%;margin-top: -10px;" @selection-change="selectionChangeHandlerTwos">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" :index="indexMethod" label="序号"/>
      <el-table-column :show-overflow-tooltip="true" prop="itemCode" label="任务号">
        <template slot-scope="scope">
          <div>{{ scope.row.pickDetail.pick.relatedBill1 }}</div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="itemCode" label="物料编码">
        <template slot-scope="scope">
          <div>{{ scope.row.item.code }}</div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="itemName" label="物料名称">
        <template slot-scope="scope">
          <div>{{ scope.row.item.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="srcPoint.code" label="原点位" />
      <el-table-column prop="dstPoint.code" label="目标点位" />

      <el-table-column prop="planQty" label="分配数量"/>
      <el-table-column prop="moveQty" label="拣货数量"/>
      <el-table-column prop="createBy" label="创建人"/>
      <el-table-column prop="createTime" label="创建时间"/>
    </el-table>
    <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
      <pre>{{ errorInfo }}</pre>
    </el-dialog>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      :page-size="6"
      style="margin-top:8px;"
      layout="total, prev, pager, next"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'
import DateRangePicker from '@/components/DateRangePicker'
import {queryPickTask} from "@/api/task";
import crudPickDetail from "@/api/pickDetail";
import DonMessage from "@/utils/message";
import CRUD from '@crud/crud'

export default {
  components: {DateRangePicker},
  mixins: [crud],
  dicts: ['task_status'],
  data() {

    return {
      pickDetailId: 0,
      title: '任务日志',
      errorInfo: '', errorDialog: false,
      enabledTypeOptions: [
        {key: 'true', display_name: '成功'},
        {key: 'false', display_name: '失败'}
      ]
    }
  },
  methods: {
    queryPickTask(id) {
      queryPickTask(id).then(res => {
        this.data = res;

        this.loading = false;
        this.pickDetailId = id;
        return true;
      })
    },
    selectionChangeHandlerTwos(val) {
      crud.selections = val
      console.log(crud.selections)
    },
    indexMethod(index) {
      return index * 1 + 1;
    },
    picking() {
      this.$confirm(`确认拣货?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        for (let i = 0; i < crud.selections.length; i++) {
          ids.push(crud.selections[i].id)
        }
        console.log('ids:'+ids)
        crudPickDetail.picking(ids).then(res => {
          this.$parent.crud.notify(res.message, res.status)
          this.queryPickTask(this.pickDetailId)
        }).catch(() => {

        })

      }).catch(() => {
        this.$parent.notify('取消成功!', CRUD.NOTIFICATION_TYPE.SUCCESS);
      });
    },
    pickBarBack() {
      this.$confirm(`确认整单退拣?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        crudPickDetail.pickBarBack(this.pickDetailId).then(res => {
          this.$parent.crud.notify('退拣成功！', CRUD.NOTIFICATION_TYPE.SUCCESS);
          this.queryPickTask(this.pickDetailId)
        }).catch(() => {

        })

      }).catch(() => {
        this.$parent.crud.notify('取消成功！', CRUD.NOTIFICATION_TYPE.SUCCESS);
      });
    },
    handleClose(done) {
      done();
      this.$parent.shuaxin();//刷新父组件查询方法
    }
  }
}
</script>

<style scoped>
.java.hljs {
  color: #444;
  background: #ffffff !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>