小牛集卡web 客户端
chenwei
2021-06-07 bc06fc0e98ed22b45638d5c2c9635283837104fd
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: "",
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++) {
bc06fc 128               this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" ,Weight:""});
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;
bc06fc 135                  this.ruleForm.moreBox[j].Weight =
C 136                 val.TempOrderContainer[j].Weight;
7f5659 137             }
C 138           } else {
139             console.log("单个箱子");
bc06fc 140             this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "",Weight:"" }];
7f5659 141             this.ruleForm.moreBox[0].ContainerNo =
C 142               val.TempOrderContainer[0].ContainerNo;
143             this.ruleForm.moreBox[0].BoxSeal =
144               val.TempOrderContainer[0].BoxSeal;
bc06fc 145               his.ruleForm.moreBox[0].Weight =
C 146               val.TempOrderContainer[0].Weight;
7f5659 147           }
C 148           console.log(this.ruleForm);
149         } else {
bc06fc 150           if ((val.ContainerNub)*(val.Container.CnterNub) == 1) {
C 151             this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "",Weight:""  }];
7f5659 152           } else {
C 153             this.ruleForm.moreBox = [];
bc06fc 154             for (var i = 0; i < (val.ContainerNub)*(val.Container.CnterNub); i++) {
C 155               this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "",Weight:""  });
7f5659 156             }
423585 157           }
C 158         }
7f5659 159       },
C 160       deep: true,
161       immediate: true,
423585 162     },
C 163     // demo(val) {
164     //   console.log(val)
7f5659 165
423585 166     //   this.temId = val.TempOrderID;
C 167     //   if (val.TempOrderContainer.length != 0) {
168     //     this.ruleForm.BolCode = val.TempOrderContainer[0].BolCode;
169     //     this.ruleForm.TradeCode = val.TempOrderContainer[0].TradeCode;
170     //     this.ruleForm.ShipAgent = val.TempOrderContainer[0].ShipAgent;
171     //     this.ruleForm.ContainerOwner = val.TempOrderContainer[0].ContainerOwner;
172     //     if(val.TempOrderContainer.length>1){
173     //       console.log("多个箱子");
174     //       this.ruleForm.moreBox=[];
175     //       for(var i=0;i<val.TempOrderContainer.length;i++){
7f5659 176     //         this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" })
423585 177     //         //  this.ruleForm.moreBox[i].ContainerNo = val.TempOrderContainer[i].ContainerNo;
C 178     //         //  this.ruleForm.moreBox[i].BoxSeal = val.TempOrderContainer[i].BoxSeal;
179     //       }
180     //     }else{
181     //       console.log("单个箱子")
182     //         this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
183     //       //  this.ruleForm.moreBox[0].ContainerNo = val.TempOrderContainer[0].ContainerNo;
184     //       //    this.ruleForm.moreBox[0].BoxSeal = val.TempOrderContainer[0].BoxSeal;
185     //     }
186     //     console.log(this.ruleForm);
187     //   }else{
188     //     if(val.ContainerNub==1){
189     //          this.ruleForm.moreBox = [{ ContainerNo: "", BoxSeal: "" }];
190     //     }else{
191     //        this.ruleForm.moreBox = [];
192     //       for(var i=0;i<val.ContainerNub;i++){
193     //           this.ruleForm.moreBox.push({ ContainerNo: "", BoxSeal: "" });
194     //       }
195     //     }
7f5659 196
423585 197     //   }
C 198     // },
7f5659 199     count: {
C 200       handler(val) {
201         this.ruleForm.index = val;
202       },
203       deep: true,
204       immediate: true,
423585 205     },
C 206   },
207   methods: {
208     infoCancel() {
209       this.$emit("info", "");
210     },
211     infoSure() {
212       this.$emit("info", this.boxInfo);
213     },
214     submitForm(formName) {
215       this.$refs[formName].validate((valid) => {
216         if (valid) {
7f5659 217           this.$confirm("完善箱子信息后将不能修改数量", "提示", {
C 218             confirmButtonText: "确定",
219             cancelButtonText: "取消",
220             type: "warning",
221           })
222             .then(() => {
223               this.ruleForm.id = this.temId;
224               this.$emit("info", this.ruleForm);
bc06fc 225               
7f5659 226             })
C 227             .catch(() => {});
228           console.log(this.ruleForm);
423585 229         } else {
C 230           console.log("error submit!!");
231           return false;
232         }
233       });
234     },
235     resetForm(formName) {
236       this.$refs[formName].resetFields();
237     },
238   },
239 };
240 </script>
241 <style lang="less" scoped>
242 .info {
243   display: flex;
244   align-items: center;
245   margin-bottom: 10px;
246 }
247 .info span {
248   width: 75px;
249   text-align: right;
250   margin-right: 6px;
251 }
252 .info {
253   /deep/.el-input {
254     width: 300px;
255   }
256 }
257 .btns {
258   display: flex;
259   justify-content: flex-end;
260 }
261 </style>