提交结算页面

src/App.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="app">
-    <navigation v-if="$route.meta.keepAlive" style="z-index: 10000"/>
-    <router-view style="padding-top: 62px;"/>
+  <div id="app" class="detail">
+    <navigation v-if="$route.meta.keepAlive" style="z-index: 10000" class="detail-header"/>
+    <router-view style="padding-top: 62px;" class="detail-wrapper"/>
 <!--    <el_footer v-if="$route.meta.keepAlive||$route.meta.footer"/>-->
-    <el_footer v-if="$route.meta.footer === false?$route.meta.footer:$route.meta.keepAlive"/>
+    <el_footer v-if="$route.meta.footer === false?$route.meta.footer:$route.meta.keepAlive" class="detail-close"/>
    </div>
 </template>
 
@@ -23,14 +23,6 @@ export default {
 
     };
   },
-  created(){
-    console.log("张三在此~~~");
-    // console.log(this.$route.meta.keepAlive)
-    // console.log(Cookies.get('TokenKey'));
-    // if (Cookies.get('TokenKey')){
-    //   this.$router.push({ path: this.redirect || '/' });
-    // }
-  },
   methods: {
 
   }
@@ -45,4 +37,34 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
+.detail {
+  /* 因为是遮罩效果所以要fixed */
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  /*必须 */
+  display: flex;
+  /* 必须，规定元素的排列方向 */
+  flex-direction: column;
+  /* 必须占满屏 */
+  height: 100%;
+  overflow: auto;
+}
+
+.detail-header {
+  width: 100%;
+  height: 100px;
+}
+
+.detail-wrapper {
+  width: 100%;
+  flex: 1;
+}
+
+.detail-close {
+  flex: 0;
+  margin: 0 auto;
+}
 </style>

src/request/request.js

@@ -10,7 +10,7 @@
 //配置文件
 import axios from 'axios';
 import Cookies from 'js-cookie'
-import { Notification, MessageBox, Message} from 'element-ui'
+import { MessageBox, Message } from 'element-ui'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
 
 export function request(config) {
@@ -62,12 +62,21 @@ export function request(config) {
         })
         break
       case 500:
-        Message({
-          showClose: true,
-          message: response.data.msg,
-          type: 'error',
-          offset:90
-        });
+        if (response.data.msg === "用户不存在/密码错误"){
+          Message({
+            showClose: true,
+            type: 'error',
+            message: response.data.msg,
+          });
+          return
+        }else {
+          Message({
+            showClose: true,
+            message: response.data.msg,
+            type: 'error',
+            offset:90
+          });
+        }
         break
       default:
         // console.log(response.data.code);

src/views/contractPlacing/index.vue

@@ -211,7 +211,7 @@
               </div> -->
             </div>
             <div>
-              <p>{{ estimaTe.portofdischargeidName }}</p>
+              <p>{{ estimaTe.distinationidName }}</p>
               <div>
                 <p>预计抵港</p>
                 <p>{{ estimaTe.fEta }}</p>
@@ -434,7 +434,7 @@
         <div class="titleBox">
           <span class="redBlock">&nbsp;</span>
           <span>箱信息</span>
-          <el-button type="primary" size="mini" style="float: right;margin-right: 20px" @click="newlyAdded" :disabled="noEditing">新行
+          <el-button type="primary" size="mini" style="float: right;margin-right: 20px" @click="newlyAdded" :disabled="noDditing">新行
           </el-button>
         </div>
         <div class="basicData" style="display:flex;justify-content: flex-start">
@@ -447,7 +447,7 @@
               width="155"
               label="箱号">
               <template slot-scope="scope">
-                <el-input v-model="scope.row.fCntrno" placeholder="请输入箱号" :disabled="noEditing"></el-input>
+                <el-input v-model="scope.row.fCntrno" placeholder="请输入箱号" :disabled="noDditing"></el-input>
               </template>
             </el-table-column>
             <el-table-column
@@ -456,7 +456,7 @@
               width="135"
               label="铅封号">
               <template slot-scope="scope">
-                <el-input v-model="scope.row.fSealno" placeholder="请输入铅封号" :disabled="noEditing"></el-input>
+                <el-input v-model="scope.row.fSealno" placeholder="请输入铅封号" :disabled="noDditing"></el-input>
               </template>
             </el-table-column>
             <el-table-column
@@ -465,7 +465,7 @@
               width="80"
               label="单箱(吨)">
               <template slot-scope="scope">
-                <el-input v-model="scope.row.fCntrweight" placeholder="请输入" :disabled="noEditing"></el-input>
+                <el-input v-model="scope.row.fCntrweight" placeholder="请输入" :disabled="noDditing" @input="cntrWeighTt(scope.row.fCntrweight,scope.row)"></el-input>
               </template>
             </el-table-column>
             <el-table-column
@@ -477,7 +477,7 @@
                 <!--                <el-input v-model="scope.row.fGoodsid" placeholder="请输入货名"></el-input>-->
                 <el-select
                   v-model="scope.row.fGoodsid"
-                  :disabled="noEditing"
+                  :disabled="noDditing"
                   filterable
                   remote
                   @change="select"
@@ -502,7 +502,7 @@
               label="包装类型">
               <template slot-scope="scope">
                 <!--                <el-input v-model="scope.row.fGoodsid" placeholder="请输入货名"></el-input>-->
-                <el-select slot="prepend" placeholder="请选" v-model="scope.row.fPackageid" :disabled="noEditing">
+                <el-select slot="prepend" placeholder="请选" v-model="scope.row.fPackageid" :disabled="noDditing">
                   <el-option
                     v-for="(dict, index) in packing"
                     :key="dict.dictValue"
@@ -519,7 +519,7 @@
               label="箱型">
               <template slot-scope="scope">
                 <!--                <el-input v-model="scope.row.fGoodsid" placeholder="请输入货名"></el-input>-->
-                <el-select slot="prepend" placeholder="请选择" v-model="scope.row.fCntrid" :disabled="noEditing">
+                <el-select slot="prepend" placeholder="请选择" v-model="scope.row.fCntrid" :disabled="noDditing">
                   <el-option
                     v-for="(dict, index) in container"
                     :key="dict.fId"
@@ -535,7 +535,7 @@
                   size="mini"
                   type="text"
                   icon="el-icon-delete"
-                  :disabled="noEditing"
+                  :disabled="noDditing"
                   @click.native.prevent="deleteRow(scope.$index, tableData)"
                 >删除
                 </el-button>
@@ -595,7 +595,7 @@
       <div class="confirmOrder" @click="confirmOrder" v-if="boxStatus">
         确认下单
       </div>
-      <div class="confirmOrder" @click="submit" v-else v-show="!noEditing">
+      <div class="confirmOrder" @click="submit" v-else v-show="!noDditing">
         提交箱信息
       </div>
     </div>
@@ -604,6 +604,7 @@
       :visible.sync="dialogVisible"
       :close-on-press-escape="false"
       :close-on-click-modal="false"
+      append-to-body
       width="80%"
       style="text-align: left"
       :before-close="handleClose">
@@ -665,6 +666,7 @@ export default {
       boxType:'',
       cntrcount:0,
       noEditing:false,
+      noDditing:false,
       rules: {
         fLoadportid: [{ required: true, message: " ", trigger: "blur" }],
         fDestportid: [{ required: true, message: " ", trigger: "blur" }],
@@ -742,15 +744,31 @@ export default {
       this.boxStatus = false;
     }else if (this.$route.query.res){
       let data = JSON.parse(this.$route.query.res)
-      this.form.fLoadportid = data.fPortofloadid
-      this.form.fDestportid = data.fDistinationid
       this.$set(this.form, "fBsdate", data.fEtd);
+      this.$set(this.form, "fLoadportid", data.fPortofloadid);
+      this.$set(this.form, "fDestportid", data.fDistinationid);
       this.estimatedTime()
     }
   },
   methods: {
+    cntrWeighTt(res,row){
+      console.log(res);
+      if (res <= 40 && res >= 0){
+        return
+      }else if( res == '' || res == null){
+        return;
+      } else {
+        row.fCntrweight = ''
+        this.$message({
+          showClose: true,
+          message: '单箱重量应在0-40吨之间',
+          type: 'error',
+          offset:90
+        });
+      }
+    },
     cntrWeight(res){
-      if (res < 40 && res > 0){
+      if (res <= 40 && res >= 0){
         return
       }else if( res == '' || res == null){
         return;
@@ -795,10 +813,10 @@ export default {
       this.tableData.push({
         fCntrno: '',
         fSealno: '',
-        fCntrweight: '',
-        fGoodsid: '',
-        fPackageid:'',
-        fCntrid:''
+        fCntrweight: this.list.fCntrweight,
+        fGoodsid: this.list.fGoodsid,
+        fPackageid:this.list.fPackageid,
+        fCntrid:this.list.fCntrid
       });
     },
     deleteRow(index, rows) {
@@ -815,7 +833,11 @@ export default {
         .then(res => {
           console.log(res.data.rows[0]);
           this.form = res.data.rows[0];
-          if (this.form.fBillstatus >= 11){
+        // || this.form.fBillstatus >= 3
+          if (this.form.fBillstatus >= 9){
+            this.noDditing = true
+          }
+          if (this.form.fBillstatus >= 3){
             this.noEditing = true
           }
           this.form.fPaymode = this.form.fPaymode +''
@@ -854,6 +876,22 @@ export default {
       }
     },
     submit() {
+      console.log(this.tableData);
+      for (let item in this.tableData){
+        if (!this.tableData[item].fCntrno){
+          this.$confirm('箱号未填写是否继续提交？').then(_ => {
+            this.submission()
+            }).catch(_ => {});
+        }else if (!this.tableData[item].fSealno){
+          this.$confirm('铅封号未填写是否继续提交？').then(_ => {
+            this.submission()
+          }).catch(_ => {});
+        }else {
+          this.submission()
+        }
+      }
+    },
+    submission(){
       let formData = new window.FormData();
       formData.append('tWarehousebills', JSON.stringify({ fId:this.form.fId }));
       formData.append('tWarehousebillsCntritems', JSON.stringify(this.tableData));
@@ -862,20 +900,20 @@ export default {
         method: 'post',
         data: formData
       }).then(res => {
-          // console.log(res);
-          if (res.data.code === 500){
-            // console.log(res.data.msg);
-            // this.$message.error(res.data.msg);
-          }else {
-            this.goods = res.data.data;
-            this.$router.push({
-              path: '/',
-            });
-          }
-        }).catch(err => {
-          // console.log(err);
+        // console.log(res);
+        if (res.data.code === 500){
+          // console.log(res.data.msg);
+          // this.$message.error(res.data.msg);
+        }else {
+          this.goods = res.data.data;
+          this.$router.push({
+            path: '/',
+          });
+        }
+      }).catch(err => {
+        // console.log(err);
         this.$message.error(err);
-        });
+      });
     },
     queryGoods() {
       request({
@@ -987,6 +1025,13 @@ export default {
               break;
             case 'f_serviceitems':
               this.transport = res.data.data;
+              if (this.$route.query.where == '4'){
+                for (let item in this.transport){
+                  if (this.transport[item].dictLabel == 'CY-CY'){
+                    this.$set(this.form, 'fServiceitems', this.transport[item].dictValue)
+                  }
+                }
+              }
               break;
             case 'f_packageid':
               this.packing = res.data.data;

src/views/inquiryAndOrder/index.vue

@@ -273,7 +273,7 @@
           <div style="float: left;padding: 5px;color:#ffffff;">
             <span>{{ item.portofloadidName }}</span>
             →
-            <span>{{ item.portofdischargeidName }}</span>
+            <span>{{ item.distinationidName }}</span>
           </div>
           <div style="border: 1px solid #EBEEF5">
             <el-table
@@ -415,7 +415,7 @@ export default {
         });
     },
     placeAnOrder(res){
-      this.$router.push({ path: '/eontractPlaCing',query: { res:JSON.stringify(res) }})
+      this.$router.push({ path: '/eontractPlaCing',query: { res:JSON.stringify(res),where:this.activeIndex2}})
     },
     handleQuery() {
       // this.fMblnoOptions

src/views/management/myorder.vue

@@ -177,7 +177,7 @@
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :page-sizes="[10, 20, 50, 100]"
-          :page-size="10"
+          :page-size="filterAll.pageSize"
           background
           layout="sizes, prev, pager, next"
           :total="total">

src/views/navigation/navigation.vue

@@ -42,9 +42,9 @@
       </el-submenu>
       <el-submenu index="7">
         <template slot="title">用户中心</template>
-        <el-menu-item index="7-1">个人信息</el-menu-item>
-        <el-menu-item index="7-2">消息中心</el-menu-item>
-        <el-menu-item index="7-3">开票信息</el-menu-item>
+<!--        <el-menu-item index="7-1">个人信息</el-menu-item>-->
+<!--        <el-menu-item index="7-2">消息中心</el-menu-item>-->
+<!--        <el-menu-item index="7-3">开票信息</el-menu-item>-->
 <!--        <el-menu-item index="7-4">积分会员</el-menu-item>-->
 <!--        <el-menu-item index="7-5">账户余额</el-menu-item>-->
 <!--        <el-menu-item index="7-6">优惠券</el-menu-item>-->
@@ -76,7 +76,7 @@ export default {
   watch: {
     $route(e) {
       this.activeIndex = e.path;  // e里面的是当前路由的信息
-      console.log(e.path);
+      // console.log(e.path);
     },
   },
   created() {
@@ -94,7 +94,7 @@ export default {
     },
     handleSelect(key, keyPath) {
       this.$router.push(key);
-      console.log(keyPath);
+      // console.log(keyPath);
     },
     immediately(){
       this.$router.push('/login')

src/views/settlementCenter/confirmTheBill.vue

@@ -7,10 +7,10 @@
           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="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>
@@ -28,140 +28,307 @@
       <div style="background-color: #FFFFFF;border: 1px solid #eeeeee;">
         <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>
+            <el-input placeholder="对账编号" v-model="form.fBillno" style="width: 100%;"></el-input>
+            <el-input placeholder="核销状态" disabled></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>
+            <el-input placeholder="受票人" v-model="form.fCorpid" style="width: 100%;"></el-input>
+            <el-input placeholder="货权方" v-model="form.fCtrlcorpid"></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 style="display:flex;justify-content: space-between;width: 100%;padding-left: 5px;">
+              <el-input placeholder="申请方" v-model="form.createId" style="width: 70%;margin-right: 15px"></el-input>
+<!--              <el-input placeholder="对账状1态" v-model="form.fBillstatus" style="width: 70%;margin-left: 15px;margin-right: 10px"></el-input>-->
+              <el-select slot="prepend" placeholder="对账状态" v-model="form.fBillstatus" style="width: 70%;margin-left: 15px;margin-right: 10px;margin-top: 10px">
+                <el-option label="暂存" value="2"></el-option>
+                <el-option label="审批驳回" value="3"></el-option>
+                <el-option label="提交审核" value="4"></el-option>
+                <el-option label="审核中" value="5"></el-option>
+                <el-option label="审批通过" value="6"></el-option>
+              </el-select>
             </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>
+            <div style="display:flex;justify-content: space-between;padding-left: 5px;padding-right: 5px">
               <el-date-picker
-                style="width: 45%;"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="创建结束时间">
+                v-model="form.timeInterval"
+                type="daterange"
+                range-separator="至"
+                style="width: 100%;margin-top: 10px;margin-bottom: 10px"
+                start-placeholder="开始日期"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :default-time="['00:00:00', '23:59:59']"
+                end-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>
+              <el-button type="primary" @click="queryList">查询</el-button>
             </div>
-            <br>
             <div>
               <el-button type="success" size="mini">对账单下载</el-button>
-              <el-button type="success" size="mini">对账确认</el-button>
+              <el-button type="success" size="mini" @click="confirmTheBill" :disabled="list.length > 0?false:true">对账确认</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: 98%;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee;font-size: 12px;">
           <el-table
             :data="tableData"
+            size="mini"
+            @selection-change="selection"
+            append-to-body
             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"
+              prop="fBillno"
+              align="center"
+              :show-overflow-tooltip="true"
+              min-width="150"
               label="对账编号">
+              <template slot-scope="scope">
+                <span style="color: #1f68d6" @click="detailsOfDocuments(scope.row)">{{scope.row.fBillno}}</span>
+              </template>
             </el-table-column>
             <el-table-column
-              prop="date"
+              :show-overflow-tooltip="true"
+              prop="fCtrlcorpid"
+              align="center"
+              min-width="240"
               label="收费单位">
             </el-table-column>
             <el-table-column
-              prop="date"
+              :show-overflow-tooltip="true"
+              prop="fAmtdr"
+              width="100"
+              align="center"
+              label="对账金额(元)">
+            </el-table-column>
+            <el-table-column
+              :show-overflow-tooltip="true"
+              prop="fCorpidName"
               label="受票人">
             </el-table-column>
             <el-table-column
-              prop="date"
+              :show-overflow-tooltip="true"
+              align="center"
+              prop="fBillstatus"
               label="对账状态">
             </el-table-column>
             <el-table-column
-              prop="date"
+              :show-overflow-tooltip="true"
+              prop="createName"
               label="申请方">
             </el-table-column>
             <el-table-column
+              :show-overflow-tooltip="true"
               prop="date"
+              width="110"
               label="是否免开发票">
             </el-table-column>
             <el-table-column
-              prop="date"
-              label="对账金额(元)">
+              :show-overflow-tooltip="true"
+              prop="createTime"
+              align="center"
+              min-width="100"
+              label="申请时间">
+              <template slot-scope="scope">
+                {{scope.row.createTime == ''||scope.row.createTime == null || scope.row.createTime == undefined?'': scope.row.createTime.slice(0, 10)}}
+              </template>
             </el-table-column>
             <el-table-column
+              :show-overflow-tooltip="true"
               prop="date"
               label="确认人">
             </el-table-column>
             <el-table-column
-              prop="date"
+              :show-overflow-tooltip="true"
+              prop="fAccbilldate"
+              align="center"
+              min-width="100"
               label="确认时间">
+              <template slot-scope="scope">
+                {{scope.row.fAccbilldate == ''||scope.row.fAccbilldate == null || scope.row.fAccbilldate == undefined?'': scope.row.fAccbilldate.slice(0, 10)}}
+              </template>
             </el-table-column>
             <el-table-column
+              :show-overflow-tooltip="true"
               prop="date"
               label="备注">
             </el-table-column>
+            <el-table-column
+              label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                >撤销
+                </el-button>
+              </template>
+            </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"
+              :page-size="form.pageSize"
               background
               layout="sizes, prev, pager, next"
-              :total="23">
+              :total="total">
             </el-pagination>
           </div>
         </div>
       </div>
     </div>
+    <el-dialog
+      title="账单明细"
+      :visible.sync="dialogVisible"
+      width="80%"
+      style="text-align: left"
+      append-to-body
+      :before-close="handleClose">
+      <el-table
+        :data="detailedData"
+        @selection-change="selection"
+        style="width: 100%">
+        <el-table-column type="selection" :show-overflow-tooltip="true" width="55" align="center"/>
+        <el-table-column type="index" :show-overflow-tooltip="true" label="行号" align="center"/>
+        <el-table-column prop="fBillno" :show-overflow-tooltip="true" label="运单号"/>
+        <el-table-column prop="vesselName" :show-overflow-tooltip="true" label="船名"/>
+        <el-table-column prop="voyageName" :show-overflow-tooltip="true" label="航次"/>
+        <el-table-column prop="invoice" :show-overflow-tooltip="true" label="收费单位"/>
+        <el-table-column prop="drawee" :show-overflow-tooltip="true" label="受票单位"/>
+        <el-table-column prop="corpName" :show-overflow-tooltip="true" label="货权方"/>
+        <el-table-column prop="fPaymode" :show-overflow-tooltip="true" label="付款方式"/>
+        <el-table-column prop="payment" :show-overflow-tooltip="true" label="费用名称"/>
+        <el-table-column prop="fAmtdr" :show-overflow-tooltip="true" label="原始金额"/>
+        <el-table-column prop="fAmt" :show-overflow-tooltip="true" label="本次金额"/>
+        <el-table-column prop="fLoadportidName" :show-overflow-tooltip="true" label="始发港"/>
+        <el-table-column prop="fDestportidName" :show-overflow-tooltip="true" label="目的港"/>
+        <el-table-column prop="fServiceitems" :show-overflow-tooltip="true" label="运输条款"/>
+        <el-table-column prop="goodName" :show-overflow-tooltip="true" label="货名"/>
+        <el-table-column prop="transit" :show-overflow-tooltip="true" label="箱型"/>
+        <el-table-column prop="fCntrcount" :show-overflow-tooltip="true" label="箱量"/>
+        <el-table-column prop="fShippername" :show-overflow-tooltip="true" label="发货人"/>
+        <el-table-column prop="fConsigneername" :show-overflow-tooltip="true" label="收货人"/>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { request } from '../../request/request';
+
 export default {
   name: 'confirmTheBill',
   data() {
     return {
       activeIndex: '/confirmTheBill',
-      tableData:[]
+      tableData:[],
+      detailedData:[],
+      dialogVisible:false,
+      total:0,
+      form:{
+        pageSize:10,
+        pageNum:1
+      },
+      list:[]
     };
   },
+  created() {
+    this.queryList()
+  },
   methods: {
+    detailsOfDocuments(row){
+      // console.log(row);
+      this.dialogVisible = true
+      request({
+        url: '/financial/webVersionAccount/webVersionDetail',
+        method: 'post',
+        data:{
+          accountBillno: row.fBillno
+        }
+      }).then(res => {
+        if (res.data.code == 200){
+          // console.log(res.data.rows);
+          this.detailedData = res.data.rows
+          // this.$message({
+          //   showClose: true,
+          //   message: '操作成功',
+          //   type: 'success',
+          //   offset:90
+          // });
+        }
+      })
+    },
+    handleClose(done) {
+      this.dialogVisible = false
+    },
+    selection(selection){
+      this.list = []
+      for (let item in selection){
+        this.list.push(selection[item].fId)
+      }
+    },
+    handleDelete(row){
+      console.log(row);
+    },
+    confirmTheBill(){
+      request({
+        url: '/financial/webVersionAccount/'+ JSON.stringify(this.list).replace(/\"/g, "").replace(/[\[\]]/g,''),
+        method: 'get',
+      }).then(res => {
+        if (res.data.code == 200){
+          this.$message({
+            showClose: true,
+            message: '操作成功',
+            type: 'success',
+            offset:90
+          });
+        }
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    queryList(){
+      let data = JSON.parse(JSON.stringify(this.form))
+      if (data.timeInterval){
+        data.timeInterval = data.timeInterval.join(',')
+      }
+      request({
+        url: '/financial/webVersionAccount/webVersionChargeList',
+        method: 'get',
+        params:data
+      }).then(res => {
+        // console.log(res.data)
+        this.tableData = res.data.rows
+        this.total = res.data.total
+      }).catch(err => {
+        console.log(err);
+      })
+    },
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+      // console.log(`每页 ${val} 条`);
+      this.form.pageSize = val
+      this.queryList()
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+      // console.log(`当前页: ${val}`);
+      this.form.pageNum = val
+      this.queryList()
     },
     handleSelect(key, keyPath) {
       this.$router.push(key);
-      console.log(this.activeIndex);
-      console.log(key, keyPath);
+      // console.log(this.activeIndex);
+      // console.log(key, keyPath);
     },
   }
 };
@@ -203,6 +370,6 @@ export default {
   float: right;
   display: flex;
   justify-content: center;
-  margin-top: 40px;
+  margin-top: 20px;
 }
 </style>

src/views/settlementCenter/settlementCenter.vue

@@ -7,10 +7,10 @@
           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="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>
@@ -28,95 +28,187 @@
       <div style="background-color: #FFFFFF;border: 1px solid #eeeeee;">
         <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>
+            <el-input placeholder="订舱单" v-model="form.fBillno" style="width: 100%;"></el-input>
+<!--            <el-input placeholder="船名" v-model="form.fVslid"></el-input>-->
+            <el-select
+              filterable
+              v-model="form.fVslid"
+              remote
+              clearable
+              style="margin-top: 10px"
+              placeholder="请输入船名"
+              :remote-method="searchShipName"
+            >
+              <el-option
+                v-for="(dict, index) in shipName"
+                :key="index.fId"
+                :label="dict.fName"
+                :value="dict.fId"
+              ></el-option>
+            </el-select>
+<!--            <el-input placeholder="结算单位"></el-input>-->
+            <el-select
+              filterable
+              v-model="form.fCorpid"
+              remote
+              clearable
+              style="margin-top: 20px;"
+              placeholder="请输入结算单位"
+              :remote-method="corpsRemoteMethod"
+            >
+              <el-option
+                v-for="(dict, index) in fEblnoOptions"
+                :key="index.fId"
+                :label="dict.fName"
+                :value="dict.fId"
+              ></el-option>
+            </el-select>
           </div>
           <div style="width: 20%;">
-            <el-input placeholder="收货人" style="width: 100%;"></el-input>
-            <el-input placeholder="航次"></el-input>
-            <el-input placeholder="条数"></el-input>
+            <el-input placeholder="收货人" v-model="form.fConsigneername" style="width: 100%;"></el-input>
+            <el-select
+              filterable
+              v-model="form.fVoyid"
+              remote
+              clearable
+              style="margin-top: 10px;margin-bottom: 10px"
+              placeholder="请输入航次"
+              :remote-method="voyageNumber"
+            >
+              <el-option
+                v-for="(dict, index) in geNumber"
+                :key="index.fId"
+                :label="dict.fNo"
+                :value="dict.fId"
+              ></el-option>
+            </el-select>
+<!--            <el-input placeholder="付款方式" v-model="form.fPaymodeid"></el-input>-->
+            <el-select
+              v-model="form.fPaymodeid"
+              placeholder="请选择付款方式"
+              clearable
+              style="margin-top: 10px"
+            >
+              <el-option
+                v-for="(dict, index) in methodOptions"
+                :key="index.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
           </div>
           <div style="width: 50%;">
             <div style="display:flex;justify-content: space-between;width: 100%;">
-              <el-input placeholder="始发港" style="width: 45%;"></el-input>
+<!--              <el-input placeholder="始发港" v-model="form.fLoadportid" style="width: 45%;"></el-input>-->
+              <el-select
+                v-model="form.fLoadportid"
+                filterable
+                remote
+                style="width: 45%;margin-top: 10px;margin-right: 2px;padding-left: 5px;margin-bottom: 10px"
+                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>
               <span style="margin-top: 20px">至</span>
-              <el-input placeholder="目的港" style="width: 45%;"></el-input>
+<!--              <el-input placeholder="目的港" v-model="form.fDestportid" style="width: 45%;"></el-input>-->
+              <el-select
+                v-model="form.fDestportid"
+                filterable
+                remote
+                style="width: 45%;margin-top: 10px;padding-right: 5px;margin-bottom: 10px"
+                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 style="display:flex;justify-content: space-between;">
+            <div style="display:flex;justify-content: space-between;padding-left: 5px;padding-right: 5px">
               <el-date-picker
-                style="width: 45%;"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="创建开始时间">
+                v-model="form.sailTime"
+                type="daterange"
+                range-separator="至"
+                style="width: 100%;margin-top: 10px;margin-bottom: 10px"
+                start-placeholder="开始日期"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :default-time="['00:00:00', '23:59:59']"
+                end-placeholder="结束日期">
               </el-date-picker>
-              <span style="margin-top: 20px">至</span>
+            </div>
+            <div style="display:flex;justify-content: space-between;">
               <el-date-picker
-                style="width: 45%;"
+                v-model="form.fDocmentdate"
                 type="date"
+                style="width: 45%;"
                 value-format="yyyy-MM-dd"
-                placeholder="创建结束时间">
+                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>
+              <el-input placeholder="提单号" v-model="form.fMblno" style="width: 45%;"></el-input>
             </div>
           </div>
         </div>
         <div class="query">
           <div>
             <div>
-              <el-button type="primary">查询</el-button>
+              <el-button type="primary" @click="queryList">查询</el-button>
             </div>
             <div>
               <el-button type="success" size="mini">对账单下载</el-button>
-              <el-button type="success" size="mini">对账申请</el-button>
+              <el-button type="success" size="mini" :disabled="disabled" @click="submit">对账生成</el-button>
             </div>
-            <div>合计金额：￥87127319</div>
+            <div>合计金额：￥{{ list.fAmtdr? list.fAmtdr:'0'}}</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: 98%;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee">
           <el-table
             :data="tableData"
+            @selection-change="selection"
             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 type="selection" :show-overflow-tooltip="true" width="55" align="center"/>
+            <el-table-column type="index" :show-overflow-tooltip="true" label="行号" align="center"/>
+            <el-table-column prop="fBillno" :show-overflow-tooltip="true" label="运单号" width="160" align="center"/>
+            <el-table-column prop="vesselName" :show-overflow-tooltip="true" label="船名" width="100" align="center"/>
+            <el-table-column prop="voyageName" :show-overflow-tooltip="true" label="航次" width="100" align="center"/>
+            <el-table-column prop="payment" :show-overflow-tooltip="true" label="费用名称" width="100" align="center"/>
+            <el-table-column prop="fAmtdr" :show-overflow-tooltip="true" label="原始金额" width="100" align="center"/>
+            <el-table-column prop="fAmt" :show-overflow-tooltip="true" label="本次金额" width="100" align="center"/>
+            <el-table-column prop="invoice" :show-overflow-tooltip="true" label="收费单位" width="100" align="center"/>
+            <el-table-column prop="drawee" :show-overflow-tooltip="true" label="受票单位" width="100" align="center"/>
+            <el-table-column prop="corpName" :show-overflow-tooltip="true" label="货权方" width="100" align="center"/>
+            <el-table-column prop="fPaymode" :show-overflow-tooltip="true" label="付款方式" width="100" align="center"/>
+            <el-table-column prop="fLoadportidName" :show-overflow-tooltip="true" label="始发港" width="100" align="center"/>
+            <el-table-column prop="fDestportidName" :show-overflow-tooltip="true" label="目的港" width="100" align="center"/>
+            <el-table-column prop="fServiceitems" :show-overflow-tooltip="true" label="运输条款" width="100" align="center"/>
+            <el-table-column prop="goodName" :show-overflow-tooltip="true" label="货名" width="100" align="center"/>
+            <el-table-column prop="transit" :show-overflow-tooltip="true" label="箱型" width="100" align="center"/>
+            <el-table-column prop="fCntrcount" :show-overflow-tooltip="true" label="箱量" width="100" align="center"/>
+            <el-table-column prop="fShippername" :show-overflow-tooltip="true" label="发货人" width="100" align="center"/>
+            <el-table-column prop="fConsigneername" :show-overflow-tooltip="true" label="收货人" width="100" align="center"/>
           </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"
+              :page-size="form.pageSize"
               background
               layout="sizes, prev, pager, next"
-              :total="23">
+              :total="total">
             </el-pagination>
           </div>
         </div>
@@ -126,25 +218,169 @@
 </template>
 
 <script>
+import {request} from '../../request/request'
 export default {
   name: 'settlementCenter',
   data() {
     return {
       activeIndex: '/settlementCenter',
-      tableData:[]
+      tableData:[],
+      total:0,
+      disabled:true,
+      fMblnoOptions:[],
+      tFeeDo:[],
+      form:{
+        pageNum:1,
+        pageSize:10
+      },
+      fEblnoOptions:[],
+      geNumber:[],
+      methodOptions:[],
+      shipName:[],
+      list:{}
     };
   },
+  created() {
+    this.handleQuery()
+    this.queryList()
+    request({
+      url: '/system/dict/data/type/data_settlement_type',
+      method: 'get',
+    }).then(response =>{
+      this.methodOptions = response.data.data
+    })
+  },
   methods: {
+    voyageNumber(name){
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { fName: name };
+      request({
+        url: '/shipping/voyage/selectTVoyagefNumber',
+        method: 'get',
+        params: queryParams
+      }).then(response =>{
+        this.geNumber = response.data.rows;
+      })
+    },
+    searchShipName(name){
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { fName: name };
+      request({
+        url: '/shipping/vessel/selectTVesselfNumber',
+        method: 'get',
+        params: queryParams
+      }).then(response =>{
+        this.shipName = response.data.rows;
+      })
+    },
+    corpsRemoteMethod(name) {
+      if (name == null || name === "") {
+        return false;
+      }
+      let queryParams = { fName: name };
+      request({
+        url: '/khwarehouse/warehousebills/getClientName',
+        method: 'post',
+        data: queryParams
+      }).then(response =>{
+        this.fEblnoOptions = response.data.data;
+        // console.log(this.fEblnoOptions);
+      })
+    },
+    handleQuery() {
+      // this.fMblnoOptions
+      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);
+        })
+    },
+    queryList(){
+      let data = JSON.parse(JSON.stringify(this.form))
+      if (data.sailTime){
+        data.sailTime = data.sailTime.join(',')
+      }
+      request({
+        url: '/financial/webVersionAccount/webVersionList',
+        method: 'get',
+        params: data
+      }).then(res => {
+        // console.log(res.data)
+        this.total = res.data.total
+        this.tableData = res.data.rows
+      })
+    },
+    submit(){
+      // console.log(this.list);
+      let formData = new window.FormData();
+      formData.append('tFee', JSON.stringify(this.list));
+      formData.append('tFeeDo', JSON.stringify(this.tFeeDo));
+      formData.append('billsType', 'KHDZ');
+      request({
+        url: '/financial/webVersionAccount/webVersionAdd',
+        method: 'post',
+        data:formData
+      }).then(res => {
+        if (res.data.code == 200){
+          this.queryList()
+          this.$message({
+            showClose: true,
+            message: '操作成功',
+            type: 'success',
+            offset:90
+          });
+        }
+      }).catch(err => {
+        console.log(err);
+      })
+    },
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+      // console.log(`每页 ${val} 条`);
+      this.form.pageSize = val
+      this.queryList()
+    },
+    selection(selection){
+      this.list = {}
+      if (selection.length > 0){
+        this.tFeeDo = selection
+        this.disabled = false
+        this.list.fAmtdr = this.list.fAmtcr = 0
+        for (let item in selection){
+          this.list.fAmtdr += Number(selection[item].fAmt)
+          this.list.fAmtcr += Number(selection[item].fAmtdr)
+        }
+        this.list.fCtrlcorpid = selection[0].corpName
+        if (selection.length >= 2){
+          this.list.tMblno = selection[0].fMblno + '•••'
+        }else {
+          this.list.tMblno = selection[0].fMblno
+        }
+        this.list.fSystemType = '3'
+        this.list.fCorpid = selection[0].fCorpid
+      }else {
+        this.disabled = true
+        this.list = {}
+      }
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+      // console.log(`当前页: ${val}`);
+      this.form.pageNum = val
+      this.queryList()
     },
     handleSelect(key, keyPath) {
       this.$router.push(key);
-      console.log(this.activeIndex);
-      console.log(key, keyPath);
+      // console.log(this.activeIndex);
+      // console.log(key, keyPath);
     },
   }
 };