小牛集卡web 客户端
chenwei
2021-06-04 7f5659967e4b5864d1c56a6072ebfe3abe4702dc
commit | author | age
423585 1 <template>
7f5659 2   <div >
C 3     <el-alert style="margin-bottom: 10px;" title="完善箱子信息后将不能修改数量" type="warning" :closable="false">
4     </el-alert>
5     <el-form 
423585 6       :model="ruleForm"
C 7       :rules="rules"
8       ref="ruleForm"
9       label-width="100px"
10       class="demo-ruleForm"
11     >
12       <el-form-item label="提单号" prop="BolCode">
13         <el-input v-model="ruleForm.BolCode"></el-input>
14       </el-form-item>
15       <el-form-item label="进舱编号" prop="TradeCode">
16         <el-input v-model="ruleForm.TradeCode"></el-input>
17       </el-form-item>
18       <el-form-item label="船代" prop="ShipAgent">
19         <el-select v-model="ruleForm.ShipAgent" placeholder="请选择船代">
20           <el-option label="区域一" value="shanghai"></el-option>
21           <el-option label="区域二" value="beijing"></el-option>
22         </el-select>
23       </el-form-item>
24       <el-form-item label="箱主" prop="ContainerOwner">
25         <el-select v-model="ruleForm.ContainerOwner" placeholder="请选择箱主">
26           <el-option label="区域一" value="shanghai"></el-option>
27           <el-option label="区域二" value="beijing"></el-option>
28         </el-select>
29       </el-form-item>
30       <div v-for="(item, index) in ruleForm.moreBox" :key="index">
31         <el-divider>箱子{{ index + 1 }}</el-divider>
7f5659 32         <el-form-item 
C 33          v-if="(type==1&&self)||type==2"
423585 34           label="箱号"
C 35           :prop="'moreBox.' + index + '.ContainerNo'"
36           :rules="{
37             required: true,
38             message: '请填写箱号',
39             trigger: 'blur',
40           }"
41         >
42           <el-input v-model="item.ContainerNo"></el-input>
43         </el-form-item>
7f5659 44         <el-form-item v-if="type==2"
423585 45           label="封号"
C 46           :prop="'moreBox.' + index + '.BoxSeal'"
47           :rules="{
48             required: true,
49             message: '请填写封号',
50             trigger: 'blur',
51           }"
52         >
53           <el-input v-model="item.BoxSeal"></el-input>
7f5659 54         </el-form-item>
C 55         <el-form-item
56           label="重量"
57           :prop="'moreBox.' + index + '.BoxSeal'"
58           :rules="{
59             required: true,
60             message: '请填写重量',
61             trigger: 'blur',
62           }"
63         >
64           <el-input
65             v-model="item.BoxSeal"
66             type="number"
67             placeholder="请输入数字"
68           ></el-input>
423585 69         </el-form-item>
C 70       </div>
71
72       <el-form-item>
73         <el-button @click="resetForm('ruleForm')">重置</el-button>
74         <el-button type="primary" @click="submitForm('ruleForm')"
75           >确 定</el-button
76         >
77       </el-form-item>
78     </el-form>
79   </div>
80 </template>
81 <script>
82 export default {
83   data() {
84     return {
85       ruleForm: {
86         BolCode: "",
87         TradeCode: "",
88         ShipAgent: "",
89         ContainerOwner: "",
90         moreBox: [],
91       },
92       rules: {
93         BolCode: [{ required: true, message: "请输入提单号", trigger: "blur" }],
94         TradeCode: [
95           { required: true, message: "请输入进舱编号", trigger: "blur" },
96         ],
97         ShipAgent: [
98           { required: true, message: "请选择船代", trigger: "change" },
99         ],
100         ContainerOwner: [
101           { required: true, message: "请选择箱主", trigger: "change" },
102         ],
103       },
7f5659 104       temId: "",
423585 105     };
C 106   },
7f5659 107   props: ["demo", "count","type","self"],
C 108   created() {
423585 109     this.$set(this.demo);
C 110   },
7f5659 111   mounted() {
C 112     //  this.$set(this.count);
423585 113   },
C 114   watch: {
7f5659 115     demo: {
C 116       handler(val, oldVal) {
117         this.temId = val.TempOrderID;
118         if (val.TempOrderContainer.length != 0) {
119           this.ruleForm.BolCode = val.TempOrderContainer[0].BolCode;
120           this.ruleForm.TradeCode = val.TempOrderContainer[0].TradeCode;
121           this.ruleForm.ShipAgent = val.TempOrderContainer[0].ShipAgent;
122           this.ruleForm.ContainerOwner =
123             val.TempOrderContainer[0].ContainerOwner;
124           if (val.TempOrderContainer.length > 1) {
125             console.log("多个箱子");
126             this.ruleForm.moreBox = [];
127             for (var i = 0; i < val.TempOrderContainer.length; i++) {
423585 128               this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" });
7f5659 129             }
C 130             for (var j = 0; j < this.ruleForm.moreBox.length; j++) {
131               this.ruleForm.moreBox[j].ContainerNo =
132                 val.TempOrderContainer[j].ContainerNo;
133               this.ruleForm.moreBox[j].BoxSeal =
134                 val.TempOrderContainer[j].BoxSeal;
135             }
136           } else {
137             console.log("单个箱子");
138             this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
139             this.ruleForm.moreBox[0].ContainerNo =
140               val.TempOrderContainer[0].ContainerNo;
141             this.ruleForm.moreBox[0].BoxSeal =
142               val.TempOrderContainer[0].BoxSeal;
143           }
144           console.log(this.ruleForm);
145         } else {
146           if (val.ContainerNub == 1) {
147             this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
148           } else {
149             this.ruleForm.moreBox = [];
150             for (var i = 0; i < val.ContainerNub; i++) {
151               this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" });
152             }
423585 153           }
C 154         }
7f5659 155       },
C 156       deep: true,
157       immediate: true,
423585 158     },
C 159     // demo(val) {
160     //   console.log(val)
7f5659 161
423585 162     //   this.temId = val.TempOrderID;
C 163     //   if (val.TempOrderContainer.length != 0) {
164     //     this.ruleForm.BolCode = val.TempOrderContainer[0].BolCode;
165     //     this.ruleForm.TradeCode = val.TempOrderContainer[0].TradeCode;
166     //     this.ruleForm.ShipAgent = val.TempOrderContainer[0].ShipAgent;
167     //     this.ruleForm.ContainerOwner = val.TempOrderContainer[0].ContainerOwner;
168     //     if(val.TempOrderContainer.length>1){
169     //       console.log("多个箱子");
170     //       this.ruleForm.moreBox=[];
171     //       for(var i=0;i<val.TempOrderContainer.length;i++){
7f5659 172     //         this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" })
423585 173     //         //  this.ruleForm.moreBox[i].ContainerNo = val.TempOrderContainer[i].ContainerNo;
C 174     //         //  this.ruleForm.moreBox[i].BoxSeal = val.TempOrderContainer[i].BoxSeal;
175     //       }
176     //     }else{
177     //       console.log("单个箱子")
178     //         this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
179     //       //  this.ruleForm.moreBox[0].ContainerNo = val.TempOrderContainer[0].ContainerNo;
180     //       //    this.ruleForm.moreBox[0].BoxSeal = val.TempOrderContainer[0].BoxSeal;
181     //     }
182     //     console.log(this.ruleForm);
183     //   }else{
184     //     if(val.ContainerNub==1){
185     //          this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
186     //     }else{
187     //        this.ruleForm.moreBox = [];
188     //       for(var i=0;i<val.ContainerNub;i++){
189     //           this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" });
190     //       }
191     //     }
7f5659 192
423585 193     //   }
C 194     // },
7f5659 195     count: {
C 196       handler(val) {
197         this.ruleForm.index = val;
198       },
199       deep: true,
200       immediate: true,
423585 201     },
C 202   },
203   methods: {
204     infoCancel() {
205       this.$emit("info", "");
206     },
207     infoSure() {
208       this.$emit("info", this.boxInfo);
209     },
210     submitForm(formName) {
211       this.$refs[formName].validate((valid) => {
212         if (valid) {
7f5659 213           this.$confirm("完善箱子信息后将不能修改数量", "提示", {
C 214             confirmButtonText: "确定",
215             cancelButtonText: "取消",
216             type: "warning",
217           })
218             .then(() => {
219               this.ruleForm.id = this.temId;
220               this.$emit("info", this.ruleForm);
221             })
222             .catch(() => {});
223           console.log(this.ruleForm);
423585 224         } else {
C 225           console.log("error submit!!");
226           return false;
227         }
228       });
229     },
230     resetForm(formName) {
231       this.$refs[formName].resetFields();
232     },
233   },
234 };
235 </script>
236 <style lang="less" scoped>
237 .info {
238   display: flex;
239   align-items: center;
240   margin-bottom: 10px;
241 }
242 .info span {
243   width: 75px;
244   text-align: right;
245   margin-right: 6px;
246 }
247 .info {
248   /deep/.el-input {
249     width: 300px;
250   }
251 }
252 .btns {
253   display: flex;
254   justify-content: flex-end;
255 }
256 </style>