422 lines
15 KiB
Vue
422 lines
15 KiB
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="dstStockCode" 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" width="190">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" align="center" size="mini" :disabled="scope.row.taskStatus!='ARRIVED' "
|
||
@click="fbPicking(scope.row)">翻包拣货
|
||
</el-button>
|
||
|
||
<el-button type="danger"
|
||
:disabled="scope.row.taskStatus!='ARRIVED' "
|
||
align="center"
|
||
size="mini"
|
||
@click="cancelTask(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
|
||
}
|
||
})
|
||
},
|
||
cancelTask(data) {
|
||
this.$confirm('此操作将删除该任务, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
crudTask.cancelAllocate(data.pickDetail.id, data.planQty).then(res => {
|
||
if (res.status == 200) {
|
||
this.crud.notify('操作成功!', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||
this.crud.toQuery()
|
||
} else {
|
||
this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR)
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.crud.notify('取消操作', CRUD.NOTIFICATION_TYPE.INFO)
|
||
});
|
||
},
|
||
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>
|