下单详情页面

src/views/contractPlacing/index.vue

@@ -10,40 +10,104 @@
         <div class="basicData">
           <div class="mainModules">
             <span>起运港口</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px;"/>
+            <!--            <el-input style="width:80%;margin-left:20px;top: 4px;">-->
+            <el-select
+              v-model="form.fLoadportid"
+              filterable
+              remote
+              @change="estimatedTime"
+              style="width: 80%;margin-left:20px;top: 4px;"
+              class="elSelect"
+              placeholder="请输入模糊查找起运港口"
+            >
+              <el-scrollbar>
+                <el-option
+                  v-for="(dict, index) in fMblnoOptions"
+                  :key="dict.fId"
+                  :label="dict.fName"
+                  :value="dict.fId"
+                ></el-option>
+              </el-scrollbar>
+            </el-select>
+            <!--            </el-input>-->
           </div>
           <div class="mainModules">
             <span>目的港口</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fDestportid"/>-->
+            <el-select
+              v-model="form.fDestportid"
+              filterable
+              remote
+              @change="estimatedTime"
+              style="width: 80%;margin-left:20px;top: 4px;"
+              class="elSelect"
+              placeholder="请输入模糊查找目的港口"
+            >
+              <el-scrollbar>
+                <el-option
+                  v-for="(dict, index) in fMblnoOptions"
+                  :key="dict.fId"
+                  :label="dict.fName"
+                  :value="dict.fId"
+                ></el-option>
+              </el-scrollbar>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>预计装货时间</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fBsdate"/>
           </div>
           <div class="mainModules">
             <span>运输条款</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+<!--            <el-input style="width:80%;margin-left:20px;top: 4px"/>-->
+            <el-select style="width:80%;margin-left:20px;top: 4px" slot="prepend" placeholder="请选择"
+                       v-model="form.fServiceitems">
+              <el-option
+                v-for="(dict, index) in transport"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>付款方式</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-select style="width:80%;margin-left:20px;top: 4px" slot="prepend" placeholder="请选择"
+                       v-model="form.fBillingway">
+              <el-option
+                v-for="(dict, index) in paymentMethod"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
+            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fBillingway"></el-input>-->
           </div>
           <div class="mainModules">
             <span>受票方</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fInvoceobj"/>-->
+            <el-select style="width:80%;margin-left:20px;top: 4px" slot="prepend" placeholder="请选择"
+                       v-model="form.fInvoceobj">
+              <el-option
+                v-for="(dict, index) in drawee"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>箱内签收单</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fSign"/>
           </div>
           <div class="mainModules">
             <span>订舱人扣货</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="form.fDetentioncargo"/>
           </div>
           <div class="remarkBox">
             <span>备注</span>
             <div style="margin-left:20px;padding-top: 4px;">
-              <el-input style="width:80%;" v-model="form.port" placeholder="如有特殊需求，请再此说明"/>
+              <el-input style="width:80%;" placeholder="如有特殊需求，请再此说明" v-model="form.remarks"/>
               <el-button type="text" style="display: inline; color: red">附件上传<i
                 class="el-icon-upload el-icon--right"></i></el-button>
             </div>
@@ -105,15 +169,15 @@
           <div class="receiveInfo">
             <div class="infoBox">
               <span>发货人全称</span>
-              <el-input/>
+              <el-input v-model="form.fShippername"/>
             </div>
             <div class="infoBox">
               <span>发货人联系人</span>
-              <el-input/>
+              <el-input v-model="form.fShipperattn"/>
             </div>
             <div class="infoBox">
               <span>发货人电话</span>
-              <el-input/>
+              <el-input v-model="form.fShippertel"/>
             </div>
 
           </div>
@@ -127,17 +191,16 @@
           <div class="receiveInfo">
             <div class="infoBox">
               <span>收货人全称</span>
-              <el-input/>
+              <el-input v-model="form.fConsigneername"/>
             </div>
             <div class="infoBox">
               <span>收货人联系人</span>
-              <el-input/>
+              <el-input v-model="form.fConsigneeattn"/>
             </div>
             <div class="infoBox">
               <span>收货人电话</span>
-              <el-input/>
+              <el-input v-model="form.fConsigneetel"/>
             </div>
-
           </div>
         </div>
       </div>
@@ -151,39 +214,90 @@
         <div style="display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px">
           <div class="mainModules">
             <span>货物名称</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-select
+              v-model="list.fGoodsid"
+              filterable
+              remote
+              @change="select"
+              style="width: 80%;margin-left:20px;top: 4px;"
+              class="elSelect"
+              placeholder="请输入模糊查找货物名称"
+            >
+              <el-scrollbar>
+                <el-option
+                  v-for="(dict, index) in goods"
+                  :key="dict.fId"
+                  :label="dict.fName"
+                  :value="dict.fId"
+                ></el-option>
+              </el-scrollbar>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>货类</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="typeGoods"/>
           </div>
           <div class="mainModules">
             <span>包装类型</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+<!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fPackageid"/>-->
+            <el-select style="width:80%;margin-left:20px;top: 4px" slot="prepend" placeholder="请选择"
+                       v-model="list.fPackageid">
+              <el-option
+                v-for="(dict, index) in packing"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>箱型</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+<!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fCntrid"/>-->
+            <el-select style="width:80%;margin-left:20px;top: 4px" slot="prepend" placeholder="请选择"
+                       v-model="list.fCntrid" @change="seleEt">
+              <el-option
+                v-for="(dict, index) in container"
+                :key="dict.fId"
+                :label="dict.fNo"
+                :value="dict.fId"
+              ></el-option>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>箱量</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fCntrcount"/>
           </div>
           <div class="mainModules">
             <span>单箱重量（吨）</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fCntrweight"/>
           </div>
           <div class="mainModules">
             <span>箱态</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fCntrstatus"/>
           </div>
           <div class="mainModules">
             <span>自备货柜</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fSoc"/>
+          </div>
+          <div class="mainModules" v-if="whether === true">
+            <span>设置温度(℃)</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fTemperature"/>
+          </div>
+          <div class="mainModules" v-if="whether === true">
+            <span>风门开度(%)</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fDraught"/>
+          </div>
+          <div class="mainModules" v-if="whether === true">
+            <span>湿度设置(%)</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fHumidity"/>
+          </div>
+          <div class="mainModules" v-if="whether === true">
+            <span>预冷要求</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fPrecooling"/>
           </div>
           <div class="mainModules">
             <span>危险化学品</span>
-            <el-input style="width:70%;margin-left:20px;top: 4px"/>
+            <el-input style="width:70%;margin-left:20px;top: 4px" v-model="list.fIfdanger"/>
             <el-button type="text" style="display: inline; color: red">
               <i class="el-icon-upload el-icon--right"></i>
             </el-button>
@@ -191,10 +305,9 @@
           <div style="width: 72%;height: 100px;text-align: left;">
             <span style="margin-left:20px;color:#A3A7AD"></span>
             <div style="margin-left:20px;padding-top: 4px;">
-              <el-input style="width:80%;" v-model="form.port" placeholder="如有特殊需求，请再此说明"/>
+              <el-input style="width:80%;" placeholder="如有特殊需求，请再此说明"/>
             </div>
           </div>
-
         </div>
       </div>
       <!--      费用信息-->
@@ -206,11 +319,20 @@
         <div class="basicData" style="display:flex;justify-content: flex-start">
           <div class="mainModules">
             <span style="">是否办理保险</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <!--            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fInsurance"/>-->
+            <el-select style="width:80%;margin-left:20px;top: 4px" slot="prepend" placeholder="请选择"
+                       v-model="list.fInsurance">
+              <el-option
+                v-for="(dict, index) in insurance"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
           </div>
           <div class="mainModules">
             <span>保险货值（万元）</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px" v-model="list.fInsuranceamt"/>
           </div>
         </div>
       </div>
@@ -262,7 +384,7 @@
           </p>
         </div>
       </div>
-      <div class="confirmOrder">
+      <div class="confirmOrder" @click="confirmOrder">
         确认下单
       </div>
     </div>
@@ -271,23 +393,162 @@
 
 <script>
 
+import { request } from '../../request/request';
+
 export default {
   name: 'contractPlacing',
   data() {
     return {
-      form: {
-        port: null,
-      },
+      fMblnoOptions: [],
+      paymentMethod: [],
+      goods: [],
+      transport:[],
+      insurance: [],
+      drawee: [],
+      packing:[],
+      container:[],
+      form: {},
+      list: {},
+      typeGoods:'',
+      whether:false
     };
   },
   created() {
-
+    this.dictionary('f_paymode');
+    this.dictionary('f_invoceobj');
+    this.dictionary('f_insurance');
+    this.dictionary('f_serviceitems');
+    this.dictionary('f_packageid');
+    this.handleQuery();
+    this.queryGoods();
+    this.queryContainer()
   },
-  methods: {}
+  methods: {
+    queryGoods() {
+      request({
+        url: '/khwarehouse/warehousebills/getGoodName',
+        method: 'post',
+      }).then(res => {
+        console.log(res);
+        this.goods = res.data.data
+      }).catch(err => {
+          console.log(err);
+      });
+    },
+    queryContainer(){
+      request({
+        url: '/shipping/cntr/selectRcntrName',
+        method: 'get',
+      }).then(res => {
+        console.log(res);
+        this.container = res.data.rows;
+      }).catch(err => {
+          console.log(err);
+      });
+    },
+    handleQuery() {
+      request({
+        url: '/shipping/address/selectPortName',
+        method: 'get',
+        params: {
+          fName: this.form.fLoadportid
+        }
+      }).then(res => {
+          console.log(res);
+          this.fMblnoOptions = res.data.rows;
+          console.log(this.fMblnoOptions);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    estimatedTime(){
+      console.log(this.form.fLoadportid , this.form.fDestportid);
+      if (this.form.fLoadportid && this.form.fDestportid){
+        request({
+          url: 'shipping/voyage/selectMessage',
+          method: 'post',
+          data: {
+            fLoadportid: this.form.fLoadportid,
+            fDestportid: this.form.fDestportid
+          }
+        }).then(res => {
+          console.log(res);
+        }).catch(err => {
+          console.log(err);
+        })
+      }
+    },
+    dictionary(dictType) {
+      request({
+        url: '/system/dict/data/type/' + dictType,
+        method: 'get',
+      }).then(res => {
+          console.log(res);
+          switch (dictType) {
+            case 'f_paymode':
+              this.paymentMethod = res.data.data;
+              break;
+            case 'f_invoceobj':
+              this.drawee = res.data.data;
+              break;
+            case 'f_insurance':
+              this.insurance = res.data.data;
+              break;
+            case 'f_serviceitems':
+              this.transport = res.data.data
+              break;
+            case 'f_packageid':
+              this.packing = res.data.data
+              console.log(res);
+              break
+            default:
+              break;
+          }
+        }).catch(err => {
+          console.log(err);
+        });
+    },
+    confirmOrder() {
+      let formData = new window.FormData();
+      formData.append('tWarehousebills', JSON.stringify(this.form));
+      formData.append('tWarehousebillsCntr', JSON.stringify([this.list]));
+      request({
+        url: '/khwarehouse/warehousebills/submitPlantMessage',
+        method: 'post',
+        data: formData
+      })
+        .then(res => {
+          console.log(res);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    select(id){
+      for (let item in this.goods){
+        if (this.goods[item].fId === id){
+          this.typeGoods = this.goods[item].typeName
+        }
+      }
+    },
+    seleEt(id){
+      console.log(id);
+      console.log(this.container);
+      for (let item in this.container){
+        if(this.container[item].fId === id){
+          this.whether = true;
+          return
+        }else {
+          this.whether = false;
+          return
+        }
+      }
+    }
+  }
 };
 
 </script>
-
 <style scoped lang="scss">
 .el-input {
   /deep/ .el-input__inner {
@@ -296,6 +557,13 @@ export default {
     border-radius: 0;
   }
 }
+
+.mainModules > > > .el-input__inner {
+  border: none;
+  border-bottom: 1px solid #ccc;
+  border-radius: 0;
+}
+
 .moduleStyle {
   background: #FFFFFF;
   box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.33);
@@ -499,7 +767,7 @@ export default {
   font-size: 20px;
 }
 
-.confirmOrder:hover{
+.confirmOrder:hover {
   cursor: pointer;
 }
 </style>

src/views/inquiryAndOrder/index.vue

@@ -330,22 +330,6 @@ export default {
       //   default:
       //     break
       // }
-
-      request({
-        url: '/shipping/voyage/freightList',
-        method: 'get',
-        params: this.portToPort
-      }).then(res => {
-        // console.log(res);
-        this.detailedList = []
-        this.list = res.data.rows
-        res.data.rows.map(((item, index)=> {
-          this.detailedList.push(Object.assign({},item,{introduction:false}))
-        }))
-        // console.log(this.detailedList);
-      }).catch(err => {
-        console.log(err);
-      })
     },
     handleQuery(){
       // this.fMblnoOptions