206 lines
7.4 KiB
Vue
206 lines
7.4 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 style="width: 170px;" class="filter-item">
|
||
<el-option
|
||
@keyup.enter.native="crud.toQuery"
|
||
v-for="item in this.itemListData"
|
||
: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.agvStatus"
|
||
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.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"/>
|
||
</div>
|
||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||
<crudOperation :permission="permission" :tableKey="this.$options.name">
|
||
<el-button
|
||
slot="left"
|
||
class="filter-item"
|
||
type="success"
|
||
size="mini"
|
||
:loading="crud.delAllLoading"
|
||
@click="JhQr(crud.selections)"
|
||
>
|
||
拣货确认
|
||
</el-button>
|
||
</crudOperation>
|
||
<!--表单组件-->
|
||
|
||
<!--表格渲染-->
|
||
<el-table ref="table" height="66vh" 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 :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="srcStockCode" label="容器编码" />
|
||
<el-table-column prop="taskStatus" label="任务状态">
|
||
<template slot-scope="scope">
|
||
{{ dict.label.task_status[scope.row.taskStatus] }}
|
||
</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="createBy" label="创建人" />
|
||
<el-table-column prop="createTime" label="创建时间" />
|
||
</el-table>
|
||
<!--分页组件-->
|
||
<div style="float: right;">
|
||
<pagination/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import crudTask from '@/api/task'
|
||
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 {getItemsList} from "@/api/item";
|
||
import crudPickDetail from "@/api/pickDetail";
|
||
|
||
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: 'Task',
|
||
components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation },
|
||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||
dicts: ['task_status'],
|
||
cruds() {
|
||
return CRUD({ query:{taskType:['PICK']}, title: '出库任务', url: 'api/task', idField: 'id', sort: 'id,desc', crudMethod: { ...crudTask },
|
||
optShow: {
|
||
add: false,
|
||
edit: false,
|
||
del: false,
|
||
reset: true,
|
||
download: true
|
||
},
|
||
queryOnPresenterCreated: true
|
||
}
|
||
)
|
||
},
|
||
data() {
|
||
return {
|
||
permission: {
|
||
add: ['admin', 'task:add'],
|
||
edit: ['admin', 'task:edit'],
|
||
del: ['admin', 'task:del']
|
||
},
|
||
rules: {
|
||
},
|
||
queryTypeOptions: [
|
||
{ key: 'itemCode', display_name: '物料代码' },
|
||
{ key: 'itemName', display_name: '物料名称' },
|
||
{ key: 'taskStatus', display_name: '任务状态' },
|
||
{ key: 'srcPointCode', display_name: '源点位编码' },
|
||
{ key: 'dstPointCode', display_name: '目标点位编码' }
|
||
],
|
||
itemListData: []
|
||
}
|
||
},
|
||
mounted() {
|
||
//初始化数据
|
||
this.itemDataGet();
|
||
},
|
||
methods: {
|
||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||
[CRUD.HOOK.beforeRefresh]() {
|
||
return true
|
||
},
|
||
indexMethod(index) {
|
||
return index * 1+1;
|
||
},
|
||
// 拣货确认
|
||
JhQr(datas) {
|
||
this.$confirm(`选中的${datas.length}条数据是否拣货确认?`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
|
||
const ids = [];
|
||
for (let i = 0; i < datas.length; i++) {
|
||
ids.push(datas[i].id)
|
||
}
|
||
crudTask.jhQr(ids).then(res => {
|
||
this.crud.notify('拣货成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||
this.crud.toQuery()
|
||
}).catch(() => {
|
||
|
||
})
|
||
|
||
}).catch(() => {
|
||
this.$refs.table.clearSelection()
|
||
this.crud.notify('取消成功！', CRUD.NOTIFICATION_TYPE.SUCCESS);
|
||
});
|
||
},
|
||
//物料数据
|
||
itemDataGet() {
|
||
getItemsList().then(res => {
|
||
this.itemListData = res;
|
||
}).catch(e => {
|
||
this.$message({
|
||
showClose: true,
|
||
message: '物料加载失败',
|
||
type: 'error'
|
||
});
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|