提交发票静态页面

src/router/index.js

@@ -55,6 +55,30 @@ export default new Router({
         keepAlive: true,
         footer:false
       }
+    },{
+      path: '/settlementCenter',
+      name: 'settlementCenter',
+      component: () => import('../views/settlementCenter/settlementCenter'),
+      meta: {
+        keepAlive: true,
+        footer:true
+      }
+    },{
+      path: '/confirmTheBill',
+      name: 'confirmTheBill',
+      component: () => import('../views/settlementCenter/confirmTheBill'),
+      meta: {
+        keepAlive: true,
+        footer:true
+      }
+    },{
+      path: '/applyForInvoice',
+      name: 'applyForInvoice',
+      component: () => import('../views/settlementCenter/applyForInvoice'),
+      meta: {
+        keepAlive: true,
+        footer:true
+      }
     }
   ],
 });

src/views/contractPlacing/index.vue

@@ -319,7 +319,7 @@
           </div>
           <div class="mainModules">
             <el-form-item label="箱量" prop="fCntrcount">
-              <el-input style="width:80%;" v-model.number="list.fCntrcount" :maxlength="3" oninput='this.value=this.value.replace(/[^\d.]/g,"")'/>
+              <el-input style="width:80%;" v-model.number="list.fCntrcount" placeholder="请输入箱量" :maxlength="3" @input="calculation" oninput='this.value=this.value.replace(/[^\d.]/g,"")'/>
             </el-form-item>
           </div>
           <div class="mainModules">
@@ -551,11 +551,12 @@
         <div class="mainBox">
           <p>
             <span>箱型</span>
-            <span>￥0</span>
+            <span v-if="boxType">{{boxType}}</span>
+            <span v-else>---</span>
           </p>
           <p>
             <span>箱量</span>
-            <span>￥0</span>
+            <span>￥{{cntrcount}}</span>
           </p>
         </div>
         <div class="mainBox" style="border-bottom: 1px solid #E8E8E8">
@@ -583,7 +584,7 @@
         <div class="mainBox" style="border-bottom: none">
           <p>
             <span>保险费</span>
-            <span>￥{{ list.fInsuranceamt }}</span>
+            <span>￥{{ form.fInsuranceamt }}</span>
           </p>
         </div>
       </div>
@@ -657,6 +658,8 @@ export default {
   name: 'contractPlacing',
   data() {
     return {
+      boxType:'',
+      cntrcount:0,
       rules: {
         fLoadportid: [{ required: true, message: " ", trigger: "blur" }],
         fDestportid: [{ required: true, message: " ", trigger: "blur" }],
@@ -736,17 +739,16 @@ export default {
       let data = JSON.parse(this.$route.query.res)
       this.form.fLoadportid = data.fPortofloadid
       this.form.fDestportid = data.fDistinationid
-      this.form.fBsdate = data.fEtd
+      this.$set(this.form, "fBsdate", data.fEtd);
       this.estimatedTime()
     }
   },
   methods: {
     cntrWeight(res){
       if (res < 40 && res > 0){
-        console.log("1111");
         return
       }else if( res == '' || res == null){
-        console.log("222")
+        return;
       } else {
         this.$message({
           showClose: true,
@@ -878,13 +880,38 @@ export default {
           console.log(err);
         });
     },
+    calculation(){
+      for (let item in this.container){
+        if (this.container[item].fId == this.list.fCntrid){
+          request({
+            url: '/shipping/items/containerPrice/',
+            method: 'post',
+            data:{
+              cntridName:this.container[item].fNo,
+              fPortofloadid:this.form.fLoadportid,
+              fDistinationid:this.form.fDestportid,
+              fEtd:this.form.fBsdate
+            }
+          }).then(res => {
+            console.log(res);
+            let number = Number(res.data.data[0]) * Number(this.list.fCntrcount)
+            if (number){
+              this.cntrcount = number
+            }else {
+              this.cntrcount = 0
+            }
+          }).catch(err => {
+            console.log(err);
+          });
+        }
+      }
+    },
     queryContainer() {
       request({
         url: '/shipping/cntr/selectRcntrName',
         method: 'get',
-      })
-        .then(res => {
-          console.log(res);
+      }).then(res => {
+          // console.log(res);
           this.container = res.data.rows;
         })
         .catch(err => {
@@ -900,16 +927,16 @@ export default {
         }
       })
         .then(res => {
-          console.log(res);
+          // console.log(res);
           this.fMblnoOptions = res.data.rows;
-          console.log(this.fMblnoOptions);
+          // console.log(this.fMblnoOptions);
         })
         .catch(err => {
           console.log(err);
         });
     },
     estimatedTime() {
-      console.log(this.form.fLoadportid, this.form.fDestportid);
+      // console.log(this.form.fLoadportid, this.form.fDestportid);
       if (this.form.fLoadportid && this.form.fDestportid) {
         request({
           url: 'shipping/voyage/selectMessage',
@@ -918,21 +945,17 @@ export default {
             fPortofloadid: this.form.fLoadportid,
             fDistinationid: this.form.fDestportid
           }
-        })
-          .then(res => {
-            console.log(res);
+        }).then(res => {
             let data = res.data.rows;
-            console.log(data.length);
             if (data.length !== 0) {
               this.estimated = data;
               this.estimaTe = data[0];
               this.form.fVoyid = this.estimaTe.fId;
               this.form.fVslid = this.estimaTe.fPid;
             }
-          })
-          .catch(err => {
+        }).catch(err => {
             console.log(err);
-          });
+        });
       }
     },
     dictionary(dictType) {
@@ -1027,9 +1050,12 @@ export default {
     },
     seleEt(id) {
       console.log(id);
+      // boxType
       console.log(this.container);
       for (let item in this.container) {
         if (this.container[item].fId === id) {
+          this.boxType = this.container[item].fNo
+          this.calculation()
           if (this.container[item].fType === 2){
             this.whether = true;
             return

src/views/inquiryAndOrder/index.vue

@@ -207,24 +207,24 @@
                 <img style="width: 50%;" src="../../assets/ship.png" alt="">
               </div>
               <div style="width: 100%;height: 30px;line-height: 30px;border-top: 1px solid #f33434">
-                驳
+                <span v-show="item.portoftransshipmentName">驳</span>
               </div>
             </div>
-            <div
+            <div v-show="item.portoftransshipmentName"
               style="background-color: #f10724;width: 80px;margin-top: 15px;margin-right: 5px;margin-left: 5px;height: 30px;line-height: 30px;border-radius: 20px;color: #ffffff;float: left">
               {{ item.portoftransshipmentName }}
             </div>
-            <div style="width: 40px;height: 60px;float: left">
+            <div style="width: 40px;height: 60px;float: left" v-show="item.portoftransshipmentName">
               <div style="width: 100%;height: 30px;">
                 <img style="width: 50%;" src="../../assets/ship.png" alt="">
               </div>
               <div style="width: 100%;height: 30px;line-height: 30px;border-top: 1px solid #f33434">
-                驳
+                <span v-show="item.portoftransshipmentName">驳</span>
               </div>
             </div>
             <div
               style="background-color: #f10724;width: 80px;margin-top: 15px;margin-right: 5px;margin-left: 5px;height: 30px;line-height: 30px;border-radius: 20px;color: #ffffff;float: left">
-              {{ item.portofdischargeidName }}
+              {{ item.distinationidName }}
             </div>
           </div>
           <div

src/views/management/myorder.vue

@@ -47,23 +47,24 @@
         text-color="#fff"
         active-text-color="#ffd04b">
         <el-menu-item index="1">全部</el-menu-item>
-        <el-menu-item index="2">订单待付</el-menu-item>
-        <el-menu-item index="3">已配船</el-menu-item>
-        <el-menu-item index="4">待受理</el-menu-item>
-        <el-menu-item index="5">已撤销</el-menu-item>
-        <el-menu-item index="6">已驳回</el-menu-item>
-        <el-menu-item index="7">运单变更</el-menu-item>
+        <el-menu-item index="2">待审核</el-menu-item>
+        <el-menu-item index="3">订舱审核通过</el-menu-item>
+        <el-menu-item index="4">代配船</el-menu-item>
+        <el-menu-item index="5">配船审核通过</el-menu-item>
+        <el-menu-item index="6">已撤销</el-menu-item>
+        <el-menu-item index="7">已驳回</el-menu-item>
+        <el-menu-item index="8">运单变更</el-menu-item>
       </el-menu>
       <div style="width: 100%;display:flex;justify-content: space-around;">
         <div style="width: 20%;">
           <el-input placeholder="订舱单" v-model="filterAll.fBillno"></el-input>
           <el-input placeholder="船名" v-model="filterAll.vslidName"></el-input>
-          <el-input placeholder="箱号" v-model="filterAll.boxNumber"></el-input>
+          <el-input placeholder="箱号" v-show="display" v-model="filterAll.boxNumber"></el-input>
         </div>
         <div style="width: 20%;">
           <el-input placeholder="收货人" v-model="filterAll.fConsigneername"></el-input>
           <el-input placeholder="航次" v-model="filterAll.voyidName"></el-input>
-          <el-input placeholder="条数" v-model="filterAll.pageSize"></el-input>
+          <el-input placeholder="条数" v-show="display" v-model="filterAll.pageSize"></el-input>
         </div>
         <div style="width: 50%;">
           <div style="display:flex;justify-content: space-between">
@@ -90,7 +91,7 @@
               placeholder="创建结束时间">
             </el-date-picker>
           </div>
-          <div style="display:flex;justify-content: space-between;">
+          <div style="display:flex;justify-content: space-between;" v-show="display">
             <el-input placeholder="单据有效期结束" style="width: 45%;"></el-input>
             <span style="margin-top: 20px">&nbsp;&nbsp;&nbsp;</span>
             <el-input placeholder="货名" style="width: 45%;"></el-input>
@@ -102,8 +103,8 @@
           <!--          <el-checkbox v-model="checked">全选</el-checkbox>-->
         </div>
         <div style="margin-right: 20px">
-          <el-button type="success" plain>装箱单下载</el-button>
-          <el-dropdown>
+          <el-button type="success" plain v-show="display">装箱单下载</el-button>
+          <el-dropdown v-show="display">
             <el-button type="success" plain>
               委托书下载
             </el-button>
@@ -112,7 +113,7 @@
               <el-dropdown-item>批量PDF</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
-          <el-dropdown>
+          <el-dropdown v-show="display">
             <el-button type="success" plain>
               运单下载
             </el-button>
@@ -121,7 +122,7 @@
               <el-dropdown-item>批量PDF</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
-          <el-dropdown>
+          <el-dropdown v-show="display">
             <el-button type="success" plain>
               放箱单下载
             </el-button>
@@ -130,7 +131,7 @@
               <el-dropdown-item>虎门提重</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
-          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="getList" :disabled="disabled">查询</el-button>
         </div>
       </div>
       <div
@@ -171,12 +172,13 @@
           </div>
         </div>
       </div>
-      <div style="float: right;height: 40px;padding-top: 30px;margin-right: 20px">
+      <div style="float: right;height: 40px;padding-top: 30px;margin-right: 20px" v-if="paging">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :page-sizes="[10, 20, 50, 100]"
           :page-size="10"
+          background
           layout="sizes, prev, pager, next"
           :total="total">
         </el-pagination>
@@ -199,13 +201,16 @@ export default {
         pageNum:1,
         pageSize:10
       },
+      disabled:false,
+      display:true,
+      paging:false,
       dataList: []
     };
   },
   created() {
     let myDate = new Date();
-    this.filterAll.startTime = myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate()
-    console.log(this.filterAll.startTime);
+    this.$set(this.filterAll, "startTime", myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate());
+    // console.log(this.filterAll.startTime);
     this.getList()
   },
   methods: {
@@ -222,13 +227,16 @@ export default {
     getList() {
       request({
         url: '/khwarehouse/warehousebills/webVersionOrderMessage',
-        method: 'post',
-        data: this.filterAll
+        method: 'get',
+        params: this.filterAll
       })
         .then(res => {
           console.log(res);
           this.dataList = res.data.rows;
           this.total = res.data.total
+          if (res.data.code === 200){
+            this.paging = true
+          }
         })
         .catch(err => {
           console.log(err);
@@ -243,6 +251,88 @@ export default {
       });
     },
     handleSelect(key, keyPath) {
+      let myDate = new Date();
+      switch (key){
+        case '1':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+          }
+          this.disabled = false
+          this.display = true
+          break
+        case '2':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+            fBillstatus:4
+          }
+          this.disabled = false
+          this.display = false
+          break
+        case '3':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+            fBillstatus:6
+          }
+          this.disabled = false
+          this.display = false
+          break
+        case '4':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+            fBillstatus:9
+          }
+          this.disabled = false
+          this.display = false
+          break
+        case '5':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+            fBillstatus:11
+          }
+          this.disabled = false
+          this.display = false
+          break
+        case '6':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+          }
+          this.disabled = true
+          this.display = false
+          break
+        case '7':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+          }
+          this.disabled = true
+          this.display = false
+          break
+        case '8':
+          this.filterAll = {
+            pageNum:1,
+            pageSize:10,
+            startTime:myDate.getFullYear() + '-' + myDate.getMonth() + '-' +myDate.getDate(),
+            fBillstatus:12
+          }
+          this.disabled = false
+          this.display = false
+          break
+        default:
+          break
+      }
       console.log(key, keyPath);
     },
     handleOpen(key, keyPath) {

src/views/navigation/navigation.vue

@@ -24,9 +24,9 @@
       <el-submenu index="4">
         <template slot="title">我要结算</template>
         <el-menu-item index="4-1">结算说明</el-menu-item>
-        <el-menu-item index="4-2">生成账单</el-menu-item>
-        <el-menu-item index="4-3">确认账单</el-menu-item>
-        <el-menu-item index="4-4">申请发票</el-menu-item>
+        <el-menu-item index="/settlementCenter">生成账单</el-menu-item>
+        <el-menu-item index="/confirmTheBill">确认账单</el-menu-item>
+        <el-menu-item index="/applyForInvoice">申请发票</el-menu-item>
       </el-submenu>
       <el-submenu index="5">
         <template slot="title">货物跟踪</template>

src/views/settlementCenter/applyForInvoice.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div class="head">
+      <div>
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-vertical-demo"
+          @select="handleSelect"
+          background-color="#FFFFFF">
+          <el-menu-item index="1">
+            <i class="el-icon-menu"></i>
+            <span slot="title">结算说明</span>
+          </el-menu-item>
+          <el-menu-item index="/settlementCenter">
+            <i class="el-icon-menu"></i>
+            <span slot="title">生成账单</span>
+          </el-menu-item>
+          <el-menu-item index="/confirmTheBill">
+            <i class="el-icon-menu"></i>
+            <span slot="title">确认账单</span>
+          </el-menu-item>
+          <el-menu-item index="/applyForInvoice">
+            <i class="el-icon-menu"></i>
+            <span slot="title">申请发票</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+      <div style="background-color: #FFFFFF;hborder: 1px solid #ccc;">
+        <div style="width:100%;display:flex;justify-content: space-around;float: left">
+          <div style="width: 20%;">
+            <el-input placeholder="抬头" style="width: 100%;"></el-input>
+            <el-input placeholder="申请号"></el-input>
+          </div>
+          <div style="width: 20%;">
+            <el-input placeholder="发票号" style="width: 100%;"></el-input>
+            <el-input placeholder="状态"></el-input>
+          </div>
+          <div style="width: 50%;">
+            <div style="display:flex;justify-content: space-between;width: 100%;">
+              <el-date-picker
+                style="width: 45%;"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="创建开始时间">
+              </el-date-picker>
+              <span style="margin-top: 20px">至</span>
+              <el-date-picker
+                style="width: 45%;"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="创建结束时间">
+              </el-date-picker>
+            </div>
+            <div style="display:flex;justify-content: left;margin-top: 10px;margin-left: 8px">
+              <el-button type="primary">查询</el-button>
+              <el-button type="success">申请发票</el-button>
+              <el-button type="info">导出发票明细</el-button>
+            </div>
+          </div>
+        </div>
+        <div style="width: 98%;height: 200px;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee">
+          <div style="width: 100%;height: 160px;background-color: #25c4cd;margin-top: 10px">
+            <div style="background-color: #F56C6C;width: 100%;display:flex;">
+              <div>申请时间:1823712931</div>
+              <div>申请号:17892731</div>
+            </div>
+            <div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'applyForInvoice',
+  data() {
+    return {
+      activeIndex: '/applyForInvoice',
+      tableData:[]
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleSelect(key, keyPath) {
+      this.$router.push(key);
+      console.log(this.activeIndex);
+      console.log(key, keyPath);
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.head {
+  width: 80%;
+  border: 1px solid #eeeeee;
+  margin: 10px auto;
+  display: flex;
+  div:nth-child(1) {
+    width: 20%;
+  }
+}
+
+.head > div:nth-child(2) {
+  width: 80%;
+}
+
+.el-input {
+  margin: 10px auto;
+}
+.query div:nth-child(1){
+  width: 200px;
+}
+.query div:nth-child(1) div:nth-child(1){
+  margin-bottom: 10px;
+}
+.query div:nth-child(1) div:nth-child(2){
+  margin-bottom: 10px;
+}
+.query div:nth-child(1) div:nth-child(3){
+  font-weight:bold;
+  color: red;
+}
+.query {
+  width: 25%;
+  float: right;
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+</style>

src/views/settlementCenter/confirmTheBill.vue

@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <div class="head">
+      <div>
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-vertical-demo"
+          @select="handleSelect"
+          background-color="#FFFFFF">
+          <el-menu-item index="1">
+            <i class="el-icon-menu"></i>
+            <span slot="title">结算说明</span>
+          </el-menu-item>
+          <el-menu-item index="/settlementCenter">
+            <i class="el-icon-menu"></i>
+            <span slot="title">生成账单</span>
+          </el-menu-item>
+          <el-menu-item index="/confirmTheBill">
+            <i class="el-icon-menu"></i>
+            <span slot="title">确认账单</span>
+          </el-menu-item>
+          <el-menu-item index="/applyForInvoice">
+            <i class="el-icon-menu"></i>
+            <span slot="title">申请发票</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+      <div style="background-color: #FFFFFF;hborder: 1px solid #ccc;">
+        <div style="width:75%;display:flex;justify-content: space-around;float: left">
+          <div style="width: 20%;">
+            <el-input placeholder="订舱单" style="width: 100%;"></el-input>
+            <el-input placeholder="船名"></el-input>
+            <el-input placeholder="箱号"></el-input>
+          </div>
+          <div style="width: 20%;">
+            <el-input placeholder="收货人" style="width: 100%;"></el-input>
+            <el-input placeholder="航次"></el-input>
+            <el-input placeholder="条数"></el-input>
+          </div>
+          <div style="width: 50%;">
+            <div style="display:flex;justify-content: space-between;width: 100%;">
+              <el-input placeholder="始发港" style="width: 45%;"></el-input>
+              <span style="margin-top: 20px">至</span>
+              <el-input placeholder="目的港" style="width: 45%;"></el-input>
+            </div>
+            <div style="display:flex;justify-content: space-between;">
+              <el-date-picker
+                style="width: 45%;"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="创建开始时间">
+              </el-date-picker>
+              <span style="margin-top: 20px">至</span>
+              <el-date-picker
+                style="width: 45%;"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="创建结束时间">
+              </el-date-picker>
+            </div>
+            <div style="display:flex;justify-content: space-between;">
+              <el-input placeholder="单据有效期结束" style="width: 45%;"></el-input>
+              <span style="margin-top: 20px">&nbsp;&nbsp;&nbsp;</span>
+              <el-input placeholder="提单号" style="width: 45%;"></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="query">
+          <div>
+            <div>
+              <el-button type="primary">查询</el-button>
+              <el-button type="danger">删除</el-button>
+            </div>
+            <br>
+            <div>
+              <el-button type="success" size="mini">对账单下载</el-button>
+              <el-button type="success" size="mini">对账确认</el-button>
+            </div>
+          </div>
+        </div>
+        <div style="width: 98%;height: 200px;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee">
+          <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column type="index" label="行号" align="center"/>
+            <el-table-column
+              prop="date"
+              label="对账编号">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="收费单位">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="受票人">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="对账状态">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="申请方">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="是否免开发票">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="对账金额(元)">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="确认人">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="确认时间">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="备注">
+            </el-table-column>
+          </el-table>
+          <div style="float: right;margin-top: 30px">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :page-sizes="[10, 20, 30, 50]"
+              :page-size="10"
+              background
+              layout="sizes, prev, pager, next"
+              :total="23">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'confirmTheBill',
+  data() {
+    return {
+      activeIndex: '/confirmTheBill',
+      tableData:[]
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleSelect(key, keyPath) {
+      this.$router.push(key);
+      console.log(this.activeIndex);
+      console.log(key, keyPath);
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.head {
+  width: 80%;
+  border: 1px solid #eeeeee;
+  margin: 10px auto;
+  display: flex;
+  div:nth-child(1) {
+    width: 20%;
+  }
+}
+
+.head > div:nth-child(2) {
+  width: 80%;
+}
+
+.el-input {
+  margin: 10px auto;
+}
+.query div:nth-child(1){
+  width: 200px;
+}
+.query div:nth-child(1) div:nth-child(1){
+  margin-bottom: 10px;
+}
+.query div:nth-child(1) div:nth-child(2){
+  margin-bottom: 10px;
+}
+.query div:nth-child(1) div:nth-child(3){
+  font-weight:bold;
+  color: red;
+}
+.query {
+  width: 25%;
+  float: right;
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+</style>

src/views/settlementCenter/settlementCenter.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <div class="head">
+      <div>
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-vertical-demo"
+          @select="handleSelect"
+          background-color="#FFFFFF">
+          <el-menu-item index="1">
+            <i class="el-icon-menu"></i>
+            <span slot="title">结算说明</span>
+          </el-menu-item>
+          <el-menu-item index="/settlementCenter">
+            <i class="el-icon-menu"></i>
+            <span slot="title">生成账单</span>
+          </el-menu-item>
+          <el-menu-item index="/confirmTheBill">
+            <i class="el-icon-menu"></i>
+            <span slot="title">确认账单</span>
+          </el-menu-item>
+          <el-menu-item index="/applyForInvoice">
+            <i class="el-icon-menu"></i>
+            <span slot="title">申请发票</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+      <div style="background-color: #FFFFFF;hborder: 1px solid #ccc;">
+        <div style="width:75%;display:flex;justify-content: space-around;float: left">
+          <div style="width: 20%;">
+            <el-input placeholder="订舱单" style="width: 100%;"></el-input>
+            <el-input placeholder="船名"></el-input>
+            <el-input placeholder="箱号"></el-input>
+          </div>
+          <div style="width: 20%;">
+            <el-input placeholder="收货人" style="width: 100%;"></el-input>
+            <el-input placeholder="航次"></el-input>
+            <el-input placeholder="条数"></el-input>
+          </div>
+          <div style="width: 50%;">
+            <div style="display:flex;justify-content: space-between;width: 100%;">
+              <el-input placeholder="始发港" style="width: 45%;"></el-input>
+              <span style="margin-top: 20px">至</span>
+              <el-input placeholder="目的港" style="width: 45%;"></el-input>
+            </div>
+            <div style="display:flex;justify-content: space-between;">
+              <el-date-picker
+                style="width: 45%;"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="创建开始时间">
+              </el-date-picker>
+              <span style="margin-top: 20px">至</span>
+              <el-date-picker
+                style="width: 45%;"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="创建结束时间">
+              </el-date-picker>
+            </div>
+            <div style="display:flex;justify-content: space-between;">
+              <el-input placeholder="单据有效期结束" style="width: 45%;"></el-input>
+              <span style="margin-top: 20px">&nbsp;&nbsp;&nbsp;</span>
+              <el-input placeholder="提单号" style="width: 45%;"></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="query">
+          <div>
+            <div>
+              <el-button type="primary">查询</el-button>
+            </div>
+            <div>
+              <el-button type="success" size="mini">对账单下载</el-button>
+              <el-button type="success" size="mini">对账申请</el-button>
+            </div>
+            <div>合计金额：￥87127319</div>
+          </div>
+        </div>
+        <div style="width: 98%;height: 200px;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee">
+          <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column type="index" label="行号" align="center"/>
+            <el-table-column
+              prop="date"
+              label="运单号">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="收费单位">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="售票单位">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="付款方式">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="费目名称">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="应收(元)">
+            </el-table-column>
+          </el-table>
+          <div style="float: right;margin-top: 30px">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :page-sizes="[10, 20, 30, 50]"
+              :page-size="10"
+              background
+              layout="sizes, prev, pager, next"
+              :total="23">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'settlementCenter',
+  data() {
+    return {
+      activeIndex: '/settlementCenter',
+      tableData:[]
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleSelect(key, keyPath) {
+      this.$router.push(key);
+      console.log(this.activeIndex);
+      console.log(key, keyPath);
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.head {
+  width: 80%;
+  border: 1px solid #eeeeee;
+  margin: 10px auto;
+  display: flex;
+  div:nth-child(1) {
+    width: 20%;
+  }
+}
+
+.head > div:nth-child(2) {
+  width: 80%;
+}
+
+.el-input {
+  margin: 10px auto;
+}
+.query div:nth-child(1){
+  width: 200px;
+}
+.query div:nth-child(1) div:nth-child(1){
+  margin-bottom: 10px;
+}
+.query div:nth-child(1) div:nth-child(2){
+  margin-bottom: 10px;
+}
+.query div:nth-child(1) div:nth-child(3){
+  font-weight:bold;
+  color: red;
+}
+.query {
+  width: 25%;
+  float: right;
+  display: flex;
+  justify-content: center;
+  margin-top: 35px;
+}
+</style>