小牛集卡web 客户端
chenwei
2021-06-08 e41faf1640e2e71febf4ba347a301e0c043b6ce9
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="重量"
bc06fc 57           :prop="'moreBox.' + index + '.Weight'"
7f5659 58           :rules="{
C 59             required: true,
60             message: '请填写重量',
61             trigger: 'blur',
62           }"
63         >
64           <el-input
bc06fc 65             v-model="item.Weight"
7f5659 66             type="number"
C 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: "",
e41faf 105       self:false
423585 106     };
C 107   },
e41faf 108   props: ["demo", "count","type"],
7f5659 109   created() {
423585 110     this.$set(this.demo);
C 111   },
7f5659 112   mounted() {
C 113     //  this.$set(this.count);
423585 114   },
C 115   watch: {
7f5659 116     demo: {
C 117       handler(val, oldVal) {
e41faf 118         console.log("箱子弹窗的值",val)
C 119         //根据是否为自备箱进行增加或删除输入项
120         this.self = val.SelfBox
7f5659 121         this.temId = val.TempOrderID;
C 122         if (val.TempOrderContainer.length != 0) {
123           this.ruleForm.BolCode = val.TempOrderContainer[0].BolCode;
124           this.ruleForm.TradeCode = val.TempOrderContainer[0].TradeCode;
125           this.ruleForm.ShipAgent = val.TempOrderContainer[0].ShipAgent;
126           this.ruleForm.ContainerOwner =
127             val.TempOrderContainer[0].ContainerOwner;
128           if (val.TempOrderContainer.length > 1) {
129             console.log("多个箱子");
130             this.ruleForm.moreBox = [];
131             for (var i = 0; i < val.TempOrderContainer.length; i++) {
bc06fc 132               this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" ,Weight:""});
7f5659 133             }
C 134             for (var j = 0; j < this.ruleForm.moreBox.length; j++) {
135               this.ruleForm.moreBox[j].ContainerNo =
136                 val.TempOrderContainer[j].ContainerNo;
137               this.ruleForm.moreBox[j].BoxSeal =
138                 val.TempOrderContainer[j].BoxSeal;
bc06fc 139                  this.ruleForm.moreBox[j].Weight =
C 140                 val.TempOrderContainer[j].Weight;
7f5659 141             }
C 142           } else {
143             console.log("单个箱子");
bc06fc 144             this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "",Weight:"" }];
7f5659 145             this.ruleForm.moreBox[0].ContainerNo =
C 146               val.TempOrderContainer[0].ContainerNo;
147             this.ruleForm.moreBox[0].BoxSeal =
148               val.TempOrderContainer[0].BoxSeal;
e41faf 149               this.ruleForm.moreBox[0].Weight =
bc06fc 150               val.TempOrderContainer[0].Weight;
7f5659 151           }
C 152           console.log(this.ruleForm);
153         } else {
bc06fc 154           if ((val.ContainerNub)*(val.Container.CnterNub) == 1) {
C 155             this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "",Weight:""  }];
7f5659 156           } else {
C 157             this.ruleForm.moreBox = [];
bc06fc 158             for (var i = 0; i < (val.ContainerNub)*(val.Container.CnterNub); i++) {
C 159               this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "",Weight:""  });
7f5659 160             }
423585 161           }
C 162         }
7f5659 163       },
C 164       deep: true,
165       immediate: true,
423585 166     },
C 167     // demo(val) {
168     //   console.log(val)
7f5659 169
423585 170     //   this.temId = val.TempOrderID;
C 171     //   if (val.TempOrderContainer.length != 0) {
172     //     this.ruleForm.BolCode = val.TempOrderContainer[0].BolCode;
173     //     this.ruleForm.TradeCode = val.TempOrderContainer[0].TradeCode;
174     //     this.ruleForm.ShipAgent = val.TempOrderContainer[0].ShipAgent;
175     //     this.ruleForm.ContainerOwner = val.TempOrderContainer[0].ContainerOwner;
176     //     if(val.TempOrderContainer.length>1){
177     //       console.log("多个箱子");
178     //       this.ruleForm.moreBox=[];
179     //       for(var i=0;i<val.TempOrderContainer.length;i++){
7f5659 180     //         this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" })
423585 181     //         //  this.ruleForm.moreBox[i].ContainerNo = val.TempOrderContainer[i].ContainerNo;
C 182     //         //  this.ruleForm.moreBox[i].BoxSeal = val.TempOrderContainer[i].BoxSeal;
183     //       }
184     //     }else{
185     //       console.log("单个箱子")
186     //         this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
187     //       //  this.ruleForm.moreBox[0].ContainerNo = val.TempOrderContainer[0].ContainerNo;
188     //       //    this.ruleForm.moreBox[0].BoxSeal = val.TempOrderContainer[0].BoxSeal;
189     //     }
190     //     console.log(this.ruleForm);
191     //   }else{
192     //     if(val.ContainerNub==1){
193     //          this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
194     //     }else{
195     //        this.ruleForm.moreBox = [];
196     //       for(var i=0;i<val.ContainerNub;i++){
197     //           this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" });
198     //       }
199     //     }
7f5659 200
423585 201     //   }
C 202     // },
7f5659 203     count: {
C 204       handler(val) {
205         this.ruleForm.index = val;
206       },
207       deep: true,
208       immediate: true,
423585 209     },
C 210   },
211   methods: {
212     infoCancel() {
213       this.$emit("info", "");
214     },
215     infoSure() {
216       this.$emit("info", this.boxInfo);
217     },
218     submitForm(formName) {
219       this.$refs[formName].validate((valid) => {
220         if (valid) {
7f5659 221           this.$confirm("完善箱子信息后将不能修改数量", "提示", {
C 222             confirmButtonText: "确定",
223             cancelButtonText: "取消",
224             type: "warning",
225           })
226             .then(() => {
227               this.ruleForm.id = this.temId;
228               this.$emit("info", this.ruleForm);
bc06fc 229               
7f5659 230             })
C 231             .catch(() => {});
232           console.log(this.ruleForm);
423585 233         } else {
C 234           console.log("error submit!!");
235           return false;
236         }
237       });
238     },
239     resetForm(formName) {
240       this.$refs[formName].resetFields();
241     },
242   },
243 };
244 </script>
245 <style lang="less" scoped>
246 .info {
247   display: flex;
248   align-items: center;
249   margin-bottom: 10px;
250 }
251 .info span {
252   width: 75px;
253   text-align: right;
254   margin-right: 6px;
255 }
256 .info {
257   /deep/.el-input {
258     width: 300px;
259   }
260 }
261 .btns {
262   display: flex;
263   justify-content: flex-end;
264 }
265 </style>