Commit a482f732 authored by dragondean@qq.com's avatar dragondean@qq.com
parents 0e04201f b0663d15
src/assets/images/shipping/bc-start.png

3.14 KB | W: | H:

src/assets/images/shipping/bc-start.png

1.88 KB | W: | H:

src/assets/images/shipping/bc-start.png
src/assets/images/shipping/bc-start.png
src/assets/images/shipping/bc-start.png
src/assets/images/shipping/bc-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/bg-start.png

2.98 KB | W: | H:

src/assets/images/shipping/bg-start.png

1.81 KB | W: | H:

src/assets/images/shipping/bg-start.png
src/assets/images/shipping/bg-start.png
src/assets/images/shipping/bg-start.png
src/assets/images/shipping/bg-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/dc-start.png

2.58 KB | W: | H:

src/assets/images/shipping/dc-start.png

1.55 KB | W: | H:

src/assets/images/shipping/dc-start.png
src/assets/images/shipping/dc-start.png
src/assets/images/shipping/dc-start.png
src/assets/images/shipping/dc-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/dg-start.png

2.86 KB | W: | H:

src/assets/images/shipping/dg-start.png

1.81 KB | W: | H:

src/assets/images/shipping/dg-start.png
src/assets/images/shipping/dg-start.png
src/assets/images/shipping/dg-start.png
src/assets/images/shipping/dg-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/pc-start.png

3.08 KB | W: | H:

src/assets/images/shipping/pc-start.png

1.92 KB | W: | H:

src/assets/images/shipping/pc-start.png
src/assets/images/shipping/pc-start.png
src/assets/images/shipping/pc-start.png
src/assets/images/shipping/pc-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/qg-start.png

2.27 KB | W: | H:

src/assets/images/shipping/qg-start.png

1.31 KB | W: | H:

src/assets/images/shipping/qg-start.png
src/assets/images/shipping/qg-start.png
src/assets/images/shipping/qg-start.png
src/assets/images/shipping/qg-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/qy-start.png

2.74 KB | W: | H:

src/assets/images/shipping/qy-start.png

1.71 KB | W: | H:

src/assets/images/shipping/qy-start.png
src/assets/images/shipping/qy-start.png
src/assets/images/shipping/qy-start.png
src/assets/images/shipping/qy-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/tc-start.png

2.81 KB | W: | H:

src/assets/images/shipping/tc-start.png

1.81 KB | W: | H:

src/assets/images/shipping/tc-start.png
src/assets/images/shipping/tc-start.png
src/assets/images/shipping/tc-start.png
src/assets/images/shipping/tc-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/xg-start.png

3.01 KB | W: | H:

src/assets/images/shipping/xg-start.png

1.86 KB | W: | H:

src/assets/images/shipping/xg-start.png
src/assets/images/shipping/xg-start.png
src/assets/images/shipping/xg-start.png
src/assets/images/shipping/xg-start.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/shipping/yz-start.png

2.94 KB | W: | H:

src/assets/images/shipping/yz-start.png

1.81 KB | W: | H:

src/assets/images/shipping/yz-start.png
src/assets/images/shipping/yz-start.png
src/assets/images/shipping/yz-start.png
src/assets/images/shipping/yz-start.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -284,24 +284,24 @@ export const constantRoutes = [ ...@@ -284,24 +284,24 @@ export const constantRoutes = [
] ]
}, },
{ {
path: '/box', path: '/boxSea',
component: Layout, component: Layout,
hidden: true, hidden: true,
redirect: 'noredirect', redirect: 'noredirect',
children: [ children: [
{ /* {
path: 'query/:boxId(\\d+)', path: 'query/:boxId(\\d+)',
component: (resolve) => import('@/views/ecw/box/query'), component: (resolve) => import('@/views/ecw/box/query'),
props: true, props: true,
name: 'boxQuery', name: 'boxQuery',
meta: {title: '出货详情', icon: '', activeMenu: '/shipment/box'} meta: {title: '出货详情', icon: '', activeMenu: '/shipment/box'}
}, }, */
{ {
path: 'shippingSea/:boxId(\\d+)', path: 'shippingSea/:boxId(\\d+)',
component: (resolve) => import('@/views/ecw/box/shipping/shippingSea'), component: (resolve) => import('@/views/ecw/box/shipping/shippingSea'),
props: true, props: true,
name: 'shippingSea', name: 'shippingSea',
meta: {title: '海运出货操作', icon: '', activeMenu: '/shipment/box'} meta: {title: '海运出货操作', icon: '', activeMenu: '/shipment/boxSea'}
} }
] ]
}, },
......
This diff is collapsed.
This diff is collapsed.
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="自编号" prop="orderNo"> <el-form-item label="自编号" prop="selfNo">
<el-input v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/> <el-input v-model="queryParams.selfNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
</el-form-item> </el-form-item>
<el-form-item label="柜号" prop="cubNo"> <el-form-item label="柜号" prop="cubNo">
<el-input v-model="queryParams.cubNo" placeholder="请输入柜号" clearable @keyup.enter.native="handleQuery"/> <el-input v-model="queryParams.cubNo" placeholder="请输入柜号" clearable @keyup.enter.native="handleQuery"/>
...@@ -17,13 +17,13 @@ ...@@ -17,13 +17,13 @@
<el-form-item label="始发地" prop="startWarehouseId"> <el-form-item label="始发地" prop="startWarehouseId">
<el-select v-model="queryParams.startWarehouseId" placeholder="请选择始发地"> <el-select v-model="queryParams.startWarehouseId" placeholder="请选择始发地">
<el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option> <el-option v-for="item in exportWarehouseList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="目的地" prop="destWarehouseId"> <el-form-item label="目的地" prop="destWarehouseId">
<el-select v-model="queryParams.destWarehouseId" placeholder="请选择目的地"> <el-select v-model="queryParams.destWarehouseId" placeholder="请选择目的地">
<el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option> <el-option v-for="item in importWarehouseList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -45,14 +45,6 @@ ...@@ -45,14 +45,6 @@
:key="dict.value" :label="dict.label" :value="dict.value"/> :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="运输方式" prop="transportType">
<el-select v-model="queryParams.transportType" placeholder="请选择运输方式" clearable size="small">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
...@@ -79,7 +71,7 @@ ...@@ -79,7 +71,7 @@
<!-- 列表 --> <!-- 列表 -->
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column label="自编号" align="center" prop="orderNo"/> <el-table-column label="自编号" align="center" prop="selfNo"/>
<el-table-column label="柜号" align="center" prop="cubNo"/> <el-table-column label="柜号" align="center" prop="cubNo"/>
<el-table-column label="柜型" align="center" prop="cabinetId"> <el-table-column label="柜型" align="center" prop="cabinetId">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -126,8 +118,6 @@ ...@@ -126,8 +118,6 @@
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit">编辑</el-dropdown-item> <el-dropdown-item command="edit">编辑</el-dropdown-item>
<el-dropdown-item command="sea">操作-海运</el-dropdown-item>
<el-dropdown-item command="air">操作-空运</el-dropdown-item>
<el-dropdown-item command="seaAir">操作-海空联运</el-dropdown-item> <el-dropdown-item command="seaAir">操作-海空联运</el-dropdown-item>
<el-dropdown-item command="error">异常登记</el-dropdown-item> <el-dropdown-item command="error">异常登记</el-dropdown-item>
<el-dropdown-item command="cost">费用登记</el-dropdown-item> <el-dropdown-item command="cost">费用登记</el-dropdown-item>
...@@ -145,19 +135,13 @@ ...@@ -145,19 +135,13 @@
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="运输方式" prop="transportType"> <el-form-item label="出货渠道" prop="shippingChannelId">
<el-radio-group v-model="form.transportType" @change="changeTransportType">
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)" :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="出货渠道" prop="shippingChannelId" v-if="form.transportType === 3 || form.transportType === 4">
<el-select v-model="form.shippingChannelId" placeholder="请选择出货渠道"> <el-select v-model="form.shippingChannelId" placeholder="请选择出货渠道">
<el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId" :key="item.channelId"></el-option> <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId" :key="item.channelId"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="柜型" prop="cabinetId" v-if="form.transportType !== 3"> <el-form-item label="柜型" prop="cabinetId">
<el-select v-model="form.cabinetId" placeholder="请选择柜型"> <el-select v-model="form.cabinetId" placeholder="请选择柜型">
<el-option v-for="item in cabinetList" :label="item.name" :value="item.id" :key="item.id"></el-option> <el-option v-for="item in cabinetList" :label="item.name" :value="item.id" :key="item.id"></el-option>
</el-select> </el-select>
...@@ -165,13 +149,13 @@ ...@@ -165,13 +149,13 @@
<el-form-item label="始发地" prop="startWarehouseId"> <el-form-item label="始发地" prop="startWarehouseId">
<el-select v-model="form.startWarehouseId" placeholder="请选择始发地"> <el-select v-model="form.startWarehouseId" placeholder="请选择始发地">
<el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option> <el-option v-for="item in exportWarehouseList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="目的地" prop="destWarehouseId"> <el-form-item label="目的地" prop="destWarehouseId">
<el-select v-model="form.destWarehouseId" placeholder="请选择目的地"> <el-select v-model="form.destWarehouseId" placeholder="请选择目的地">
<el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option> <el-option v-for="item in importWarehouseList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -186,9 +170,9 @@ ...@@ -186,9 +170,9 @@
<script> <script>
import {createbox, updatebox, deletebox, getbox, getboxPage, exportboxExcel} from "@/api/ecw/box"; import {createbox, updatebox, deletebox, getbox, getboxPage, exportboxExcel} from "@/api/ecw/box";
import {getTradeCityList} from '@/api/ecw/region';
import {getCabinetPage} from "@/api/ecw/cabinet"; import {getCabinetPage} from "@/api/ecw/cabinet";
import { getChannelList } from '@/api/ecw/channel'; import { getChannelList } from '@/api/ecw/channel';
import { getWarehouseList } from "@/api/ecw/warehouse"
export default { export default {
name: "box", name: "box",
...@@ -196,7 +180,7 @@ ...@@ -196,7 +180,7 @@
data() { data() {
return { return {
dateTypes:[ dateTypes:[
{value:'1', label:'预装时间/分拣时间'}, {value:'1', label:'预装时间'},
{value:'2', label:'装柜时间'}, {value:'2', label:'装柜时间'},
{value:'3', label:'起运时间'}, {value:'3', label:'起运时间'},
{value:'4', label:'到港时间'}, {value:'4', label:'到港时间'},
...@@ -225,7 +209,7 @@ ...@@ -225,7 +209,7 @@
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
id: null, id: null,
orderNo: null, selfNo: null,
cubNo: null, cubNo: null,
cabinetId: null, cabinetId: null,
boxStatus: null, boxStatus: null,
...@@ -233,14 +217,15 @@ ...@@ -233,14 +217,15 @@
destWarehouseId: null, destWarehouseId: null,
transportType: null, transportType: null,
}, },
tradeCityList: [],
cabinetList:[], cabinetList:[],
channelList:[], channelList:[],
warehouseList: [],
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
transportType: [{ required: true, message: "运输方式不能为空", trigger: "blur" }], shippingChannelId: [{ required: true, message: "出货渠道不能为空", trigger: "blur" }],
cabinetId: [{ required: true, message: "柜型不能为空", trigger: "blur" }],
startWarehouseId: [{ required: true, message: "始发地不能为空", trigger: "blur" }], startWarehouseId: [{ required: true, message: "始发地不能为空", trigger: "blur" }],
destWarehouseId: [{ required: true, message: "目的地不能为空", trigger: "blur" }], destWarehouseId: [{ required: true, message: "目的地不能为空", trigger: "blur" }],
...@@ -248,11 +233,11 @@ ...@@ -248,11 +233,11 @@
}; };
}, },
computed: { computed: {
expoerCityList() { exportWarehouseList() {
return this.tradeCityList.filter(item => item.type == 2 || item.type == 3) return this.warehouseList.filter(item => item.tradeType == '2' || item.type == '3')
}, },
importCityList() { importWarehouseList() {
return this.tradeCityList.filter(item => item.type == 1 || item.type == 3) return this.warehouseList.filter(item => item.tradeType == '1' || item.type == '3')
}, },
getCabinetName() { getCabinetName() {
...@@ -281,7 +266,7 @@ ...@@ -281,7 +266,7 @@
}, },
created() { created() {
getTradeCityList().then(res => this.tradeCityList = res.data); getWarehouseList().then(res => this.warehouseList = res.data);
getCabinetPage(null).then(response => { getCabinetPage(null).then(response => {
this.cabinetList = response.data.list; this.cabinetList = response.data.list;
}); });
...@@ -293,19 +278,13 @@ ...@@ -293,19 +278,13 @@
getChannelList().then(res => this.channelList = res.data) getChannelList().then(res => this.channelList = res.data)
}, },
changeTransportType(value) {
if(value === 3) {
this.form.cabinetId = null;
} else if(value == 1 || value == 2) {
this.form.shippingChannelId = null;
}
},
/** 查询列表 */ /** 查询列表 */
getList() { getList() {
this.loading = true; this.loading = true;
// 处理查询参数 // 处理查询参数
let params = {...this.queryParams}; let params = {...this.queryParams};
params.transportType = 4;
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime'); this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
// 执行查询 // 执行查询
getboxPage(params).then(response => { getboxPage(params).then(response => {
...@@ -364,19 +343,7 @@ ...@@ -364,19 +343,7 @@
return; return;
} }
if(this.form.transportType != 3) { this.form.transportType = 4;
if(!this.form.cabinetId) {
this.$message.error('柜型不能为空');
return;
}
}
if(this.form.transportType == 3 || this.form.transportType == 4) {
if(!this.form.shippingChannelId) {
this.$message.error('出货渠道不能为空');
return;
}
}
// 修改的提交 // 修改的提交
if (this.form.id != null) { if (this.form.id != null) {
...@@ -425,11 +392,18 @@ ...@@ -425,11 +392,18 @@
}, },
/** 查看按钮操作 */ /** 查看按钮操作 */
handleCommand(row, command) { handleCommand(row, command) {
console.log(row, command)
switch (command) { switch (command) {
case 'sea': case 'sea':
this.$router.push('/box/shippingSea/' + row.id) this.$router.push('/box/shippingSea/' + row.id)
break; break;
case 'edit':
this.handleUpdate(row);
break;
case 'delete':
this.handleDelete(row);
break;
} }
}, },
} }
......
<template>
<el-form ref="bookingForm" :rules="rules" :model="booking" label-width="120px" class="booking-form">
<el-form-item label="SO NO">
<el-input v-model="booking.soNo"></el-input>
</el-form-item>
<el-form-item label="船公司类型">
<el-select v-model="booking.type" placeholder="请选择船公司类型">
<el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="驳船港">
<el-select v-model="booking.bargePort" placeholder="请选择驳船港">
<el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="大船港">
<el-select v-model="booking.bigShipPort" placeholder="请选择大船港">
<el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的港">
<el-select v-model="booking.destination" placeholder="请选择目的港">
<el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="订舱公司">
<el-select v-model="booking.bookingCompany" placeholder="请选择订舱公司">
<el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="预计驳船时间" prop="time">
<el-date-picker type="date" placeholder="请选择日期" v-model="booking.bargeTime"></el-date-picker>
</el-form-item>
<el-form-item label="预计开船时间" prop="time">
<el-date-picker type="date" placeholder="请选择日期" v-model="booking.departureTime"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "booking",
data() {
return {
types: ["PIL", "MSK", "CMA", "COSCO", "ZIM", "ONE", "OOCL", "MSC", "HPL"],
booking: {},
rules: {
time: [{ required: true, message: "请选择时间", trigger: "change" }],
},
};
},
methods: {
onSubmit() {
this.$refs["bookingForm"].validate((valid) => {
if (valid) {
alert("submit!");
}
});
},
cancel() {
this.$emit("closeDialog");
},
},
};
</script>
<style lang="scss">
.booking-form {
.el-form-item__content {
> div {
width: 100%;
}
}
}
</style>
<template> <template>
<el-scrollbar :vertical="true"> <div>
<section class="shipping-chart"> <el-scrollbar :vertical="true" style="width: 100%;" viewClass="shipping-chart">
<div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes"> <div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes">
<div> <div>
<div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div"> <div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div">
<img :src="node.imgSrc" alt=""> <template v-if="!node.unNode">
<p>{{node.title}}</p> <img :src="node.imgSrc" alt="">
<p>{{node.title}}</p>
</template>
<template v-else-if="node.unNode">
<el-button type="primary">AGENT</el-button>
</template>
</div> </div>
</div> </div>
<div class="chart-arrow" v-if="index !== (chartData['sea'].length-1)"> <div class="chart-arrow" v-if="index !== (chartData['sea'].length-1)">
<p>箭头</p> <img src="@/assets/images/shipping/jt-start.png" alt="">
</div> </div>
</div> </div>
</section> </el-scrollbar>
</el-scrollbar> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" destroy-on-close>
<booking @closeDialog="closeDialog" v-if="type === 'booking'" />
<trailer @closeDialog="closeDialog" v-if="type === 'trailer'" />
</el-dialog>
</div>
</template> </template>
<script> <script>
import booking from "./booking";
import trailer from "./trailer";
export default { export default {
name: "flowChart", name: "flowChart",
components: { booking, trailer },
props: { props: {
shippingType: String, shippingType: String,
}, },
data() { data() {
return { return {
dialogVisible: false,
title: "",
type: "",
chartData: { chartData: {
sea: [ sea: [
[ [
...@@ -44,6 +61,10 @@ export default { ...@@ -44,6 +61,10 @@ export default {
imgSrc: require("@/assets/images/shipping/tc-start.png"), imgSrc: require("@/assets/images/shipping/tc-start.png"),
type: "trailer", type: "trailer",
}, },
{
unNode: true,
agent: true,
},
], ],
[ [
{ {
...@@ -116,7 +137,6 @@ export default { ...@@ -116,7 +137,6 @@ export default {
title: "结算", title: "结算",
imgSrc: require("@/assets/images/shipping/js-start.png"), imgSrc: require("@/assets/images/shipping/js-start.png"),
type: "settlement", type: "settlement",
isEnd: true,
}, },
], ],
], ],
...@@ -124,30 +144,46 @@ export default { ...@@ -124,30 +144,46 @@ export default {
}; };
}, },
methods: { methods: {
closeDialog() {
this.dialogVisible = false;
},
nodeClick(node) { nodeClick(node) {
console.log(node); console.log(node);
switch (node.type) {
case "booking":
case "trailer":
this.dialogVisible = true;
this.title = node.title;
this.type = node.type;
break;
}
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.shipping-chart { .shipping-chart {
width: max-content;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 10px;
.chart-nodes { .chart-nodes {
p {
margin: 0;
text-align: center;
}
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.node-div { .node-div {
margin-top: 10px;
cursor: pointer; cursor: pointer;
p {
margin-top: -10px;
margin-bottom: 0px;
text-align: center;
}
} }
} }
.chart-arrow { .chart-arrow {
// margin: -15px 10px 0px 10px;
margin: 0 10px; margin: 0 10px;
} }
} }
......
...@@ -39,6 +39,6 @@ export default { ...@@ -39,6 +39,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.shipping-flow { .shipping-flow {
margin-top: 15px; margin-top: 5px;
} }
</style> </style>
<template>
<el-form ref="trailerForm" :rules="rules" :model="trailer" label-width="120px" class="trailer-form">
<el-form-item label="状态">
<el-select v-model="trailer.status" placeholder="请选择状态">
<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="拖车公司">
<el-select v-model="trailer.trailerCompany" placeholder="请选择拖车公司">
<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="拖车时间" prop="time">
<el-date-picker type="date" placeholder="请选择日期" v-model="trailer.trailerTime"></el-date-picker>
</el-form-item>
<el-form-item label="车牌">
<el-input v-model="trailer.licensePlate"></el-input>
</el-form-item>
<el-form-item label="司机">
<el-input v-model="trailer.driver"></el-input>
</el-form-item>
<el-form-item label="司机联系方式">
<el-input v-model="trailer.telephone"></el-input>
</el-form-item>
<el-form-item label="货柜号">
<el-input v-model="trailer.containerNumber"></el-input>
</el-form-item>
<el-form-item label="封条">
<el-input v-model="trailer.seal"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "trailer",
data() {
return {
status: [
{
value: "1",
label: "已派车,待提柜",
},
{
value: "2",
label: "已提柜,待还柜",
},
{
value: "3",
label: "已还柜",
},
],
trailer: {},
rules: {
time: [{ required: true, message: "请选择时间", trigger: "change" }],
},
};
},
methods: {
onSubmit() {
this.$refs["trailerForm"].validate((valid) => {
if (valid) {
alert("submit!");
}
});
},
cancel() {
this.$emit("closeDialog");
},
},
};
</script>
<style lang="scss">
.trailer-form {
.el-form-item__content {
> div {
width: 100%;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment