<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="$t('运输方式')" prop="transportType">
<!-- <el-select v-model="queryParams.transportType" :placeholder="$t('请选择运输方式')" clearable size="small">
<el-option v-for="dict in transportTypes" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> -->
<dict-selector :type="DICT_TYPE.TRANSPORT_TYPE" v-model="queryParams.transportType" clearable/>
</el-form-item>
<el-form-item :label="$t('始发仓')" prop="startWarehouseId">
<el-select v-model="queryParams.startWarehouseId" :placeholder="$t('请选择始发地')" clearable>
<el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('目的仓')" prop="destWarehouseId">
<el-select v-model="queryParams.destWarehouseId" :placeholder="$t('请选择目的地')" clearable>
<el-option v-for="item in importWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">{{$t('重置')}}</el-button>
</el-form-item>
</el-form>
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['ecw:future-box:create']">{{$t('新建计划')}}</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
v-hasPermi="['ecw:future-box:export']">{{$t('导出')}}</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column :label="$t('序号')" align="center" prop="id" />
<el-table-column :label="$t('始发地')" align="center" prop="startWarehouse">
<template slot-scope="{row}">
{{getExportWarehouseName(row.startWarehouseId)}}
</template>
</el-table-column>
<el-table-column :label="$t('目的地')" align="center" prop="destWarehouse" >
<template slot-scope="{row}">
{{getImportWarehouseName(row.destWarehouseId)}}
</template>
</el-table-column>
<el-table-column :label="$t('运输方式')" align="center" prop="transportType">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportType" />
</template>
</el-table-column>
<el-table-column :label="$t('出货渠道')" align="center" prop="shippingChannelId">
<template slot-scope="{row}">
{{getShipChannelName(row.shippingChannelId)}}
</template>
</el-table-column>
<el-table-column :label="$t('待入仓订单方数')" align="center" prop="readyWarehousingNumber">
<template slot-scope="{row}">
{{row.readyWarehousingNumber || 0}}
</template>
</el-table-column>
<el-table-column :label="$t('已入仓订单方数')" align="center" prop="warehousedNumber">
<template slot-scope="{row}">
{{row.warehousedNumber || 0}}
</template>
</el-table-column>
<el-table-column :label="$t('异常订单方数')" align="center" prop="exceptionNumber">
<template slot-scope="{row}">
{{row.exceptionNumber || 0}}
</template>
</el-table-column>
<el-table-column :label="$t('待排单订单方数')" align="center" prop="warehousingNumber">
<template slot-scope="{row}">
{{row.warehousingNumber || 0}}
</template>
</el-table-column>
<el-table-column :label="$t('自单代报订单方数')" align="center" prop="orderReportNumber" >
<template slot-scope="{row}">
{{row.orderReportNumber || 0}}
</template>
</el-table-column>
<el-table-column :label="$t('装柜或出仓方数')" align="center" prop="loadingNumber" >
<template slot-scope="{row}">
{{row.loadingNumber || 0}}
</template>
</el-table-column>
<el-table-column label="装柜或出仓重量" prop="loadingWeight">
</el-table-column>
<el-table-column :label="$t('创建时间')" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('未来天数')" align="center" prop="futureNumber" />
<el-table-column :label="$t('计划货柜')" align="center" prop="gpNumber">
<template slot-scope="{row}">
<div>{{row.gpNumber}}个40GP</div>
<div>{{row.hqNumber}}个40HQ</div>
</template>
</el-table-column>
<el-table-column :label="$t('未来计划')" align="center" prop="futurePlanNumber" />
<el-table-column :label="$t('未来实际')" align="center" prop="actualNumber" />
<el-table-column :label="$t('创建人')" align="center" prop="createName" />
<el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['ecw:future-box:update']">{{$t('编辑')}}</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['ecw:future-box:delete']">{{$t('删除')}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"/>
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item :label="$t('始发地')" prop="startWarehouseId">
<el-select v-model="form.startWarehouseId" :placeholder="$t('请选择始发地')">
<el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('目的地')" prop="destWarehouseId">
<el-select v-model="form.destWarehouseId" :placeholder="$t('请选择目的地')">
<el-option v-for="item in importWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('运输方式')" prop="transportType">
<dict-selector :type="DICT_TYPE.TRANSPORT_TYPE" v-model="form.transportType" form-type="radio" />
</el-form-item>
<el-form-item :label="$t('出货渠道')" prop="shippingChannelId" v-if="form.transportType == 3 || form.transportType == 4">
<el-select v-model="form.shippingChannelId" :placeholder="$t('请选择出货渠道')">
<el-option v-for="item in channelList" :label="$l(item, 'name')" :value="item.channelId" :key="item.channelId"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('待入仓订单方数')">
{{form.readyWarehousingNumber}} m³
</el-form-item>
<el-form-item :label="$t('已入仓订单方数')">
{{form.warehousedNumber}} m³
</el-form-item>
<el-form-item :label="$t('异常订单方数')">
{{form.exceptionNumber}} m³
</el-form-item>
<el-form-item :label="$t('待排单订单方数')">
{{form.warehousingNumber}} m³
</el-form-item>
<el-form-item :label="$t('自单代报订单方数')">
{{form.orderReportNumber}} m³
</el-form-item>
<el-form-item :label="$t('装柜或出仓方数')">
{{form.loadingNumber}} m³
</el-form-item>
<el-form-item :label="$t('装柜或出仓重量')">
{{form.loadingWeight}} kG
</el-form-item>
<el-form-item label="">
<div>
{{$t('未来')}} <el-input v-model="form.futureNumber" class="w-100"></el-input> {{$t('天')}}
</div>
<div v-if="form.transportType !== '3'" class="mt-10">
<el-input v-model="form.gpNumber" class="w-100" /> × 40GP
<el-input v-model="form.hqNumber" class="w-100 ml-10" /> × 40HQ
</div>
<div class="mt-10">
{{$t('未来{futureNumber}天计划{unit}',{futureNumber: form.futureNumber,unit:form.transportType === '1' ? '立方' : '重量'})}}：
<el-input v-model="form.futurePlanNumber" class="w-100"></el-input> {{form.transportType === '1' ? 'm3' : 'kg'}}
</div>
<div class="mt-10">
{{$t('未来{futureNumber}天实际{unit}',{futureNumber: form.futureNumber,unit:form.transportType === '1' ? '立方' : '重量'})}}：
<el-input v-model="form.actualNumber" class="w-100"></el-input> {{form.transportType === '1' ? 'm3' : 'kg'}}
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">{{$t('确定')}}</el-button>
<el-button @click="cancel">{{$t('取消')}}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
createFutureBox,
updateFutureBox,
deleteFutureBox,
getFutureBox,
getFutureBoxPage,
exportFutureBoxExcel,
getBoxedVolume,
getToBeWareHousedVolume,
getWareHousedVolume,
getExceptionVolume,
getOrderReportVolume,
getWarehousingVolume,
getBoxedWeight
} from "@/api/ecw/futureBox";
import {getCabinetPage} from "@/api/ecw/cabinet";
import { getChannelList } from '@/api/ecw/channel';
import { getWarehouseList } from "@/api/ecw/warehouse"
import {getTradeCityList} from '@/api/ecw/region'
import Decimal from 'decimal.js'
export default {
name: "indexFutureBox",
components: {
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 预定舱计划列表
list: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
dateRangeCreateTime: [],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
startWarehouseId: null,
destWarehouseId: null,
transportType: null,
readyWarehousingNumber: null,
warehousedNumber: null,
warehousingNumber: null,
exceptionNumber: null,
loadingNumber: null,
orderReportNumber: null,
futureNumber: null,
gpNumber: null,
hqNumber: null,
futurePlanNumber: null,
actualNumber: null,
shippingChannelId: null,
status: null,
},
// 表单参数
form: {
},
// 表单校验
rules: {
},
warehouseList: [],
channelList: [],
/* tradeCityList: [] */
};
},
computed: {
channels(){
return this.$store.getters.channels
},
exportWarehouseList() {
return this.warehouseList.filter(
(item) => item.tradeType == "2" || item.type == "3"
);
},
importWarehouseList() {
return this.warehouseList.filter(
(item) => item.tradeType == "1" || item.type == "3"
);
},
getCabinetName() {
return (cabinetId) => {
for (let index in this.cabinetList) {
let cabinetItem = this.cabinetList[index];
if (cabinetItem.id == cabinetId) {
return cabinetItem.name;
}
}
};
},
getShipChannelName() {
return shippingChannelId => {
for (let index in this.channelList) {
let channelItem = this.channelList[index];
if (channelItem.channelId == shippingChannelId) {
return this.$l(channelItem, 'name');
}
}
return '/'
}
},
getExportWarehouseName(){
return id => {
let warehouse = this.exportWarehouseList.find(item => item.id == id)
return this.$l(warehouse, 'title')
}
},
getImportWarehouseName(){
return id => {
let warehouse = this.importWarehouseList.find(item => item.id == id)
return this.$l(warehouse, 'title')
}
}
/* importCityList(){
return this.tradeCityList.filter(item => item.type == 1 || item.tye == 3)
},
exportCityList(){
return this.tradeCityList.filter(item => item.type == 2 || item.type == 3)
} */
},
created() {
/* getTradeCityList().then(res => {
this.tradeCityList = res.data
}) */
// 查询渠道
getChannelList().then((res) => (
this.channelList = res.data));
/* this.transportTypes = this.getDictDatas(
this.DICT_TYPE.ECW_TRANSPORT_TYPE
).filter((item) => item.value == "1" || item.value == "2"); */
getWarehouseList().then((res) => (this.warehouseList = res.data));
getCabinetPage(null).then((response) => {
this.cabinetList = response.data.list;
});
this.getList();
},
watch:{
'form.transportType'(){
this.getVolume()
},
'form.startWarehouseId'(){
this.getVolume()
},
'form.destWarehouseId'(){
this.getVolume()
},
'form.shippingChannelId'(){
this.getVolume()
},
//'form.warehousedNumber'(){
//在仓 = 已入仓-已封柜
//this.$set(this.form, 'warehousingNumber', Decimal(this.form.warehousedNumber).minus(this.form.loadingNumber))
//},
/* 2023-05-06 微信群@郑屹反馈确认，由接口计算，前端无需处理
'form.loadingNumber'(){
//在仓 = 已入仓-已封柜
this.$set(this.form, 'warehousingNumber', Decimal(this.form.warehousedNumber).minus(this.form.loadingNumber))
}*/
},
methods: {
getVolume(){
if(!this.form.transportType || !this.form.startWarehouseId || !this.form.destWarehouseId){
return this.setDefaultVolume()
}
// 空运需要选择渠道
if((this.form.transportType == 3 || this.form.transportType == 4) && !this.form.shippingChannelId){
return this.setDefaultVolume()
}
let data = {
transportId: this.form.transportType,
departureId: this.form.startWarehouseId,
objectiveId: this.form.destWarehouseId
}
// 空运才需要渠道
if(data.transportId == 4 || data.transportId == 3){
data.channelId = this.form.shippingChannelId
}
// 获得已封柜方数
getBoxedVolume(data).then(res => {
this.$set(this.form, 'loadingNumber', res.data || 0)
})
// 获得待入仓方数
getToBeWareHousedVolume(data).then(res => {
this.$set(this.form, 'readyWarehousingNumber', res.data || 0)
})
// 获得已入仓方数
getWareHousedVolume(data).then(res => {
this.$set(this.form, 'warehousedNumber', res.data || 0)
})
// 获得异常订单方数
getExceptionVolume(data).then(res => {
this.$set(this.form, 'exceptionNumber', res.data || 0)
})
// 获得自单代报订单方数
getOrderReportVolume(data).then(res => {
this.$set(this.form, 'orderReportNumber', res.data || 0)
})
// 获得待排单订单方数
getWarehousingVolume(data).then(res => {
this.$set(this.form, 'warehousingNumber', res.data || 0)
})
// 获取装柜出货重量
getBoxedWeight(data).then(res =>{
this.$set(this.form,'loadingWeight', res.data || 0)
})
},
setDefaultVolume(){
this.$set(this.form, 'loadingNumber', 0)
this.$set(this.form, 'readyWarehousingNumber', 0)
this.$set(this.form, 'warehousedNumber', 0)
this.$set(this.form, 'warehousingNumber', 0)
this.$set(this.form, 'exceptionNumber',0)
this.$set(this.form,'orderReportNumber',0)
},
/** 查询列表 */
getList() {
this.loading = true;
// 处理查询参数
let params = {...this.queryParams};
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
// 执行查询
getFutureBoxPage(params).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
});
},
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
},
/** 表单重置 */
reset() {
this.form = {
id: undefined,
startWarehouseId: undefined,
destWarehouseId: undefined,
transportType: undefined,
readyWarehousingNumber: undefined,
warehousedNumber: undefined,
warehousingNumber: undefined,
exceptionNumber: undefined,
loadingNumber: undefined,
orderReportNumber: undefined,
futureNumber: undefined,
gpNumber: undefined,
hqNumber: undefined,
futurePlanNumber: undefined,
actualNumber: undefined,
shippingChannelId: undefined,
status: undefined,
loadingWeight:undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRangeCreateTime = [];
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = this.$t("添加预定舱计划");
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id;
getFutureBox(id).then(response => {
this.form = response.data;
this.open = true;
this.title = this.$t("修改预定舱计划");
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (!valid) {
return;
}
// 修改的提交
if (this.form.id != null) {
updateFutureBox(this.form).then(response => {
this.$modal.msgSuccess(this.$t("修改成功"));
this.open = false;
this.getList();
});
return;
}
// 添加的提交
createFutureBox(this.form).then(response => {
this.$modal.msgSuccess(this.$t("新增成功"));
this.open = false;
this.getList();
});
});
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id;
this.$modal.confirm(this.$t('是否确认删除预定舱计划编号为{id}的数据项?', {id})).then(function() {
return deleteFutureBox(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess(this.$t("删除成功"));
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = {...this.queryParams};
params.pageNo = undefined;
params.pageSize = undefined;
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
// 执行导出
this.$modal.confirm(this.$t('是否确认导出所有预定舱计划数据项?')).then(() => {
this.exportLoading = true;
return exportFutureBoxExcel(params);
}).then(response => {
this.$download.excel(response, '${table.classComment}.xls');
this.exportLoading = false;
}).catch(() => {});
}
}
};
</script>