223 lines
9.4 KiB
Vue
223 lines
9.4 KiB
Vue
<template>
|
|
<el-config-provider :locale="localLanguage">
|
|
<div style="width: calc(100vw - 300px)">
|
|
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px; calc(100vw - 300px)"><!-- 搜索-->
|
|
<el-row style="width: 100%">
|
|
<el-form :model="searchParams" label-width="120" label-position="left" >
|
|
<el-form-item style="width: 600px" label="查询关键字：">
|
|
<el-input placeholder="输入 料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item style="width: 600px" label="任务状态：">
|
|
<el-select style="width: 600px" v-model="searchParams.orderStatus" multiple placeholder="请选择需要查询的任务状态">
|
|
<el-option v-for="item in orderOutEnum" :key="item.value" :label="item.label" :value="item.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
<el-row>
|
|
<el-button type="primary" @click="queryGoodsOrderOut">查询出库单</el-button>
|
|
<el-button type="success" @click="showhandOut = true">手动出库</el-button>
|
|
</el-row>
|
|
</div>
|
|
<div> <!-- 表格-->
|
|
<el-row style="width: calc(100vw - 300px)">
|
|
<h5>出库单</h5>
|
|
<el-table :data="goodsOrderOutList" border stripe max-height="calc(100vh - 450px)">
|
|
<!-- <el-table-column fixed prop="rowId" label="行号" width="130px" align="center" show-overflow-tooltip/>
|
|
<el-table-column fixed prop="recordId" label="识别号" width="130px" align="center" show-overflow-tooltip/> -->
|
|
<!-- <el-table-column fixed prop="orderId" label="订单号" width="200px" align="center" show-overflow-tooltip/> -->
|
|
<el-table-column prop="warehouseOrigin" label="源库别" width="100px" align="center" show-overflow-tooltip/>
|
|
<!-- <el-table-column prop="warehouseDestination" label="目的库别" width="120px" align="center" show-overflow-tooltip/> -->
|
|
<el-table-column prop="orderType" label="订单类型" width="100px" align="center" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsId" label="物料号" width="120px" align="center" show-overflow-tooltip/>
|
|
<el-table-column prop="date" label="需求时间" width="200px" align="center" show-overflow-tooltip :formatter="formatDateToMinute"/>
|
|
<!-- <el-table-column prop="rowNo" label="行号" width="100px" align="center" show-overflow-tooltip/> -->
|
|
<el-table-column prop="goodsId" label="物料编号" width="100px" align="center" show-overflow-tooltip/>
|
|
<el-table-column prop="goodsNum" label="物料数量" width="100px" align="center" show-overflow-tooltip/>
|
|
<el-table-column prop="unit" label="单位" width="100px" align="center" show-overflow-tooltip/>
|
|
<el-table-column prop="status" label="出库单状态" width="95px" align="center" fixed="right">
|
|
<template #default="scope">
|
|
<el-tag class="ml-2" :type=formatterOrderOutEnum(scope.row.status).type>
|
|
{{formatterOrderOutEnum(scope.row.status).label }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" :formatter="formatCellValueTime" width="200px"
|
|
align="center" show-overflow-tooltip/>
|
|
<el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip min-width="120px" />
|
|
<el-table-column fixed="right" label="操作" align="center" width="140">
|
|
<template #default="scope">
|
|
<el-button-group class="ml-4">
|
|
<el-tooltip content="执行出库" placement="top" effect="light">
|
|
<el-button type="success" size="normal" @click="executeOut(scope.row)">
|
|
<el-icon><Check /></el-icon>
|
|
</el-button>
|
|
</el-tooltip>
|
|
<el-tooltip content="删除" placement="top" effect="light">
|
|
<el-button type="danger" size="normal" @click="deleteOrder(scope.row)">
|
|
<el-icon><Delete/></el-icon>
|
|
</el-button>
|
|
</el-tooltip>
|
|
</el-button-group>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<HandOut v-model="showhandOut" @refresh="queryGoodsOrderOut"/> </el-config-provider>
|
|
</template>
|
|
|
|
<script>
|
|
import {taskStatusFormatter, dueFormatter, formatCellValueTime} from '@/utils/formatter.js'
|
|
import HandOut from '@/components/handOut.vue'
|
|
import { reactive, ref } from 'vue'
|
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
|
|
import en from 'element-plus/dist/locale/en.mjs';
|
|
import {Check, Delete} from "@element-plus/icons-vue";
|
|
import {formatterOrderOutEnum, orderOutEnum} from "@/enum/order.out.enum";
|
|
const language = ref('zh-cn');
|
|
import apiOrderOut from '@/api/order.out'
|
|
|
|
export default {
|
|
name: 'goodsOut',
|
|
components: {Check, Delete, HandOut},
|
|
data() {
|
|
return {
|
|
// 查询条件
|
|
searchParams: {
|
|
searchStr: '',
|
|
orderStatus: [0,1]
|
|
},
|
|
// 展示绑定物料的弹窗
|
|
showhandOut: false,
|
|
// 出库任务单表格
|
|
goodsOrderOutList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
// 页面加载时自动执行查询
|
|
this.queryGoodsOrderOut();
|
|
},
|
|
beforeUnmount() {
|
|
},
|
|
methods: {
|
|
// 格式化时间为 YYYY-MM-DD HH:mm
|
|
formatDateToMinute(row, column, cellValue) {
|
|
if (!cellValue) return '';
|
|
const date = new Date(cellValue);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
|
},
|
|
formatCellValueTime,
|
|
formatterOrderOutEnum,
|
|
// 查询出库单
|
|
queryGoodsOrderOut() {
|
|
this.goodsOrderOutList = [];
|
|
apiOrderOut.getOrderOutList(this.searchParams).then(res => {
|
|
const responseData = res.data;
|
|
if (responseData.code === 0) {
|
|
// 正确请求
|
|
ElMessage({
|
|
message: '查询成功',
|
|
type: 'success',
|
|
});
|
|
this.goodsOrderOutList = responseData['returnData'];
|
|
} else {
|
|
// 服务报错
|
|
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '查询失败', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定',
|
|
showClose: false
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
// 通讯报错
|
|
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定'
|
|
})
|
|
})
|
|
},
|
|
// 删除出库单
|
|
deleteOrder(row) {
|
|
ElMessageBox.confirm('是否删除该出库单？','提示')
|
|
.then(() => {
|
|
apiOrderOut.deleteOrder(row.rowId).then(res => {
|
|
const responseData = res.data;
|
|
if (responseData.code === 0) {
|
|
// 正确请求
|
|
ElMessage({
|
|
message: '删除成功',
|
|
type: 'success',
|
|
});
|
|
this.queryGoodsOrderOut();
|
|
} else {
|
|
// 服务报错
|
|
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '删除失败', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定',
|
|
showClose: false
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
// 通讯报错
|
|
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务删除失败', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定'
|
|
})
|
|
})
|
|
})
|
|
.catch(() => {
|
|
})
|
|
},
|
|
// 执行出库
|
|
executeOut(row) {
|
|
ElMessageBox.confirm(`是否执行 ${row.rowId} 的出库?`, '提示')
|
|
.then(() => {
|
|
apiOrderOut.executeOut(row.rowId).then(res => {
|
|
const responseData = res.data;
|
|
if (responseData.code === 0) {
|
|
// 正确请求
|
|
ElMessage({
|
|
message: '执行成功',
|
|
type: 'success',
|
|
});
|
|
this.queryGoodsOrderOut();
|
|
} else {
|
|
// 服务报错
|
|
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定',
|
|
showClose: false
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
// 通讯报错
|
|
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
|
|
type: 'warning',
|
|
confirmButtonText: '确定'
|
|
})
|
|
})
|
|
})
|
|
.catch(() => {
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
orderOutEnum() {
|
|
return orderOutEnum
|
|
},
|
|
localLanguage: () => (language.value === 'zh-cn' ? zhCn : en)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |