1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
<div class="shippingSea-dialog">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('运输方式')" prop="transportType">
<el-radio-group v-model="form.transportType">
<el-radio v-for="dict in transportTypes" :key="dict.value" :label="dict.value">{{$l(dict, 'label')}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('出货渠道')" prop="shippingChannelId">
<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('柜型')" prop="cabinetId">
<el-select v-model="form.cabinetId" :placeholder="$t('请选择柜型')">
<el-option v-for="item in cabinetList" :label="item.name" :value="item.id" :key="item.id"></el-option>
</el-select>
</el-form-item>
<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>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">{{$t('确定')}}</el-button>
<el-button @click="cancel">{{$t('取消')}}</el-button>
</div>
</div>
</template>
<script>
import { createbox, updatebox } from "@/api/ecw/box";
import { getChannelList } from '@/api/ecw/channel'
export default {
name: "editForm",
inheritAttrs: false,
props: {
transportTypes: Array,
warehouseList: Array,
cabinetList: Array,
shipmentObj: Object,
},
created() {
this.form = { ...this.shipmentObj };
this.getChannelList()
},
data() {
return {
// 表单参数
form: { transportType: '4' },
channelList: [],
// 表单校验
rules: {
shippingChannelId: [
{ required: true, message: this.$t('出货渠道不能为空'), trigger: 'blur' }
],
cabinetId: [
{ required: true, message: this.$t('柜型不能为空'), trigger: 'blur' }
],
startWarehouseId: [
{ required: true, message: this.$t('始发地不能为空'), trigger: 'blur' }
],
destWarehouseId: [
{ required: true, message: this.$t('目的地不能为空'), trigger: 'blur' }
]
}
};
},
methods: {
getChannelList() {
getChannelList().then((res) => (this.channelList = res.data))
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate((valid) => {
if (!valid) {
return
}
this.form.transportType = 4
// 修改的提交
if (this.form.id != null) {
updatebox(this.form).then((response) => {
this.$modal.msgSuccess(this.$t('修改成功'))
this.$emit("closeDialog", "edit");
})
return
}
// 添加的提交
createbox(this.form).then((response) => {
this.$modal.msgSuccess(this.$t('新增成功'))
this.$emit("closeDialog", "edit");
})
})
},
/** 取消按钮 */
cancel() {
this.$emit("closeDialog");
},
},
computed: {
exportWarehouseList() {
return this.warehouseList.filter(
(item) => item.tradeType == "2" || item.type == "3"
);
},
importWarehouseList() {
return this.warehouseList.filter(
(item) => item.tradeType == "1" || item.type == "3"
);
},
},
};
</script>
<style lang="scss">
// 海运操作统一弹窗样式
.shippingSea-dialog {
// 页面内元素弹窗form控件宽度设置
.el-form-item__content {
> div:not(.el-input-number) {
width: 100%;
}
}
.operate-button {
text-align: center;
}
.two-element-formItem {
display: flex;
> :last-child {
width: 100%;
margin-left: 10px;
}
}
.two-element {
.el-form-item__content {
display: flex;
> :last-child {
margin-left: 10px;
}
}
}
}
</style>