Byd_Dg_Web/src/views/business-data/pickDetail/pickTask.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <label class="el-form-item-label">物料编码</label>
      <el-select v-model="query.itemCode" placeholder="物料编码" filterable clearable style="width: 170px;"
                 class="filter-item">
        <el-option
          @keyup.enter.native="crud.toQuery"
          v-for="item in this.items"
          :key="item.code"
          :label="item.code"
          :value="item.code"
        >
          <span style="float: left">{{ item.code }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
        </el-option>
      </el-select>

      <label class="el-form-item-label">物料名称</label>
      <el-input v-model="query.itemName" clearable placeholder="物料名称" style="width: 170px;" class="filter-item"
                @keyup.enter.native="crud.toQuery"
      />

      <label class="el-form-item-label">任务状态</label>
      <el-select
        v-model="query.taskStatus"
        clearable
        size="small"
        placeholder="任务状态"
        class="filter-item"
        style="width: 150px"
        @change="crud.toQuery"
      >
        <el-option
          v-for="item in dict.task_status"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <label class="el-form-item-label">日期</label>
      <date-range-picker v-model="query.createTime" class="date-item" style="width: 100px"/>

      <div>

        <label class="el-form-item-label">出库单号</label>
        <el-input v-model="query.pickCode" clearable placeholder="出库单号" style="width: 170px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"
        />

        <label class="el-form-item-label">原点位</label>
        <el-input v-model="query.srcPointCode" clearable placeholder="原点位" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">目标点位</label>
        <el-input v-model="query.dstPointCode" clearable placeholder="目标点位" style="width: 170px;"
                  class="filter-item" @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud"/>
        <!--        重置-->
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
        </el-button>
      </div>
      <div class="statusButton" style="border-bottom: solid lightgray 1px;">
        <el-radio-group v-model="radio3" @change="clickChange" size="small">
          <el-radio-button label="全部"> 全部</el-radio-button>
          <el-radio-button label="待执行">待执行</el-radio-button>
          <el-radio-button label="已到站">已到站</el-radio-button>
          <el-radio-button label="已完成">已完成</el-radio-button>
        </el-radio-group>


      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :tableKey="this.$options.name">

      </crudOperation>
      <!--表单组件-->
      <!--   翻包拣货  -->
      <el-dialog title="翻包拣货" :visible.sync="fbPickingDialog" width="450px">
        <el-form ref="fbPickingForm" :model="fbPickingForm" :rules="rules" size="small" label-width="100px">
          <el-form-item label="原托盘" prop="srcStockCode">
            <el-input v-model="fbPickingForm.srcStockCode" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="物料编码" prop="itemCode">
            <el-input v-model="fbPickingForm.itemCode" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="物料名称" prop="itemName">
            <el-input v-model="fbPickingForm.itemName" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="起始点" prop="srcPointCode">
            <el-input v-model="fbPickingForm.srcPointCode" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="目标点" prop="dstPointCode">
            <el-input v-model="fbPickingForm.dstPointCode" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="待拣货数量" prop="planQty">
            <el-input v-model="fbPickingForm.planQty" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="预拣箱号" prop="srcOrderNumber">
            <el-input v-model="fbPickingForm.srcOrderNumber" readonly style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="实拣箱号" prop="dstOrderNumber">
            <el-input v-model="fbPickingForm.dstOrderNumber" style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="拣货数量" prop="moveQty">
            <el-input v-model="fbPickingForm.moveQty" style="width: 300px;"/>
          </el-form-item>
          <el-form-item label="目标货架" prop="dstStockCode">
            <el-input v-model="fbPickingForm.dstStockCode" style="width: 300px;"/>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="fbPickingDialog = false">取 消</el-button>
          <el-button type="primary" @click="toFbPicking()">确 定</el-button>
        </span>
      </el-dialog>

      <!--表格渲染-->
      <el-table ref="table" height="58vh" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="xh" type="index" :index="indexMethod" label="序号"/>
        <el-table-column prop="pickDetail.pick.code" :show-overflow-tooltip="true" label="出库单号"/>
        <el-table-column prop="srcStockCode" label="容器编码"/>
        <el-table-column prop="itemKey.orderNumber" label="箱号"/>
        <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="taskStatus"
          label="任务状态"
          width="100"
          :filters="[
          { text: '待执行', value: 'OPEN' },
          { text: '执行中', value: 'ATCALL' },
          { text: '顶升', value: 'UP_CONTAINER' },
          { text: '已到站', value: 'ARRIVED' },
          { text: '已完成', value: 'FINISH' },
          { text: '任务取消', value: 'CANCEL' }
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.taskStatus)"
              disable-transitions
            >
              {{ dict.label.task_status[scope.row.taskStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="srcPointCode" label="原点位"/>
        <el-table-column prop="dstPointCode" label="目标点位"/>
        <el-table-column prop="planQty" label="计划数量"/>
        <el-table-column prop="moveQty" label="移位数量"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" align="center" size="mini" :disabled="scope.row.taskStatus!='ARRIVED'  "
                       @click="fbPicking(scope.row)">翻包拣货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <div style="float: right;">
        <pagination/>
      </div>
    </div>
  </div>
</template>

<script>
import crudTask from '@/api/task'
import crudItem from '@/api/item'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import crudKmres from "@/api/kmres";
import curdApp, {fbPicking} from "@/api/app"

const defaultForm = {
  id: null,
  itemId: null,
  itemKeyId: null,
  billCode: null,
  taskType: null,
  asnDetailId: null,
  moveDetailId: null,
  waveDetailId: null,
  pickDetailId: null,
  srcStockId: null,
  dstStockId: null,
  srcPointId: null,
  dstPointId: null,
  srcStockCode: null,
  dstStockCode: null,
  srcPointCode: null,
  dstPointCode: null,
  invStatus: null,
  taskStatus: null,
  beSkip: null,
  beBack: null,
  planQty: null,
  moveQty: null,
  putCode: null,
  invId: null,
  deptId: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null
}
export default {
  name: 'PickTask',
  components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['task_status'],
  cruds() {
    return CRUD({
        query: {taskType: 'PICK', taskStatus: 'ARRIVED'},
        title: '出库任务',
        url: 'api/task',
        idField: 'id',
        sort: 'id,desc',
        crudMethod: {...crudTask},
        optShow: {
          add: false,
          edit: false,
          del: false,
          reset: false,
          download: true
        },
        queryOnPresenterCreated: true
      }
    )
  },
  data() {
    return {
      radio3: '已到站',
      permission: {
        add: ['admin', 'task:add'],
        edit: ['admin', 'task:edit'],
        del: ['admin', 'task:del']
      },
      rules: {
        moveQty: [
          {required: true, message: '拣货数量不能为空', trigger: 'blur'}
        ],
        dstOrderNumber: [
          {required: true, message: '实拣箱号不能为空', trigger: 'blur'}
        ],
        dstStockCode: [
          {required: true, message: '目标货架不能为空', trigger: 'blur'}
        ],
      },
      items: [],
      fbPickingForm: {
        taskId: null,
        srcStockCode: null,
        itemCode: null,
        itemName: null,
        srcPointCode: null,
        dstPointCode: null,
        planQty: null,
        srcOrderNumber: null,
        dstOrderNumber: null,
        moveQty: null,
        dstStockCode: null
      },
      fbPickingDialog: false
    }
  },
  mounted() {
    //初始化物料
    this.getItem()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    indexMethod(index) {
      return index * 1 + 1
    },
    //物料数据
    getItem() {
      crudItem.queryItemAll({enabled: true}).then(res => {
        this.items = res
      }).catch(e => {
        this.crud.notify('物料加载失败', CRUD.NOTIFICATION_TYPE.ERROR)
      })
    },
    getStatusType(status) {
      switch (this.dict.label.task_status[status]) {
        case '待执行':
          return 'info'
        case '执行中':
        case '已到站':
          return 'warning'
        case '顶升':
          return 'primary'
        case '已完成':
          return 'success'
        case '任务取消':
          return 'danger'
        default:
          return ''
      }
    },
    filterTag(value, row) {
      return row.taskStatus === value
    },
    fbPicking(data) {
      this.fbPickingForm.taskId = data.id
      this.fbPickingForm.srcStockCode = data.srcStockCode
      this.fbPickingForm.itemCode = data.itemKey.item.code
      this.fbPickingForm.itemName = data.itemKey.item.name
      this.fbPickingForm.srcPointCode = data.srcPointCode
      this.fbPickingForm.dstPointCode = data.dstPointCode
      this.fbPickingForm.planQty = data.planQty - data.moveQty
      this.fbPickingForm.moveQty = data.planQty //默认拣货数量为计划数量
      this.fbPickingForm.srcOrderNumber = data.itemKey.orderNumber
      this.fbPickingDialog = true
    },
    //翻包拣货
    toFbPicking() {
      this.$refs['fbPickingForm'].validate((valid) => {
        if (valid) {
          curdApp.fbPicking({
            taskId: this.fbPickingForm.taskId,
            srcStockCode: this.fbPickingForm.srcStockCode,
            dstOrderNumber: this.fbPickingForm.dstOrderNumber,
            moveQty: this.fbPickingForm.moveQty,
            dstStockCode: this.fbPickingForm.dstStockCode
          }).then(res => {
            if (res.status == 200) {
              this.fbPickingDialog = false
              this.crud.notify('拣货成功!', CRUD.NOTIFICATION_TYPE.SUCCESS)
              this.crud.toQuery()
              this.fbPickingForm = {}
            } else {
              this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR)
            }
          })
        } else {
          return false
        }
      })
    },
    resetQuery() {
      this.radio3 = '已到站';
      this.crud.resetQuery()
    },
    clickChange(lab) {
      if (lab === '全部') {
        this.query.taskStatus = ''
        this.crud.toQuery()
      } else if (lab === '待执行') {
        this.query.taskStatus = 'OPEN'
        this.crud.toQuery()
      } else if (lab === '已到站') {
        this.query.taskStatus = 'ARRIVED'
        this.crud.toQuery()
      } else if (lab === '已完成') {
        this.query.taskStatus = 'FINISH'
        this.crud.toQuery()
      }
    }
  }
}
</script>

<style scoped>

</style>