应款款/付款单

src/api/ecw/financial.js

+import request from '@/utils/request'
+
+// 创建收款单
+export function createReceipt(data) {
+  return request({
+    url: '/ecw/receipt/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取应收款列表
+export function getReceivableList(query) {
+  return request({
+    url: '/ecw/receivable/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 根据获取应收款列表
+// export function getReceivableListByIds(query) {
+//   return request({
+//     url: '/ecw/receivable/list',
+//     method: 'get',
+//     params: query
+//   })
+// }
+
+// 更新应付款
+export function updatePayable(data) {
+  return request({
+    url: '/ecw/payable/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除应付款
+export function deletePayable(id) {
+  return request({
+    url: '/ecw/payable/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+
+
+// 获取应付款列表
+export function getPayableList(query) {
+  return request({
+    url: '/ecw/payable/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取应付款详情
+export function getPayableInfoByIds(query) {
+  return request({
+    url: '/ecw/payable/get',
+    method: 'get',
+    params: query
+  })
+}
+
+// 创建付款单
+export function createPayment(data) {
+  return request({
+    url: '/ecw/payment/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取付款单列表
+export function getPaymentList(query) {
+  return request({
+    url: '/ecw/payment/page',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file

src/views/ecw/financial/creatCollection.vue

@@ -3,34 +3,94 @@
     <el-card>
       <div v-if="id" slot="header" class="card-title">新增收款单</div>
       <div v-else slot="header" class="card-title">新增收款单</div>
-        <el-form ref="form" :model="form" label-width="120px" label-position="left">
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="120px"
+        label-position="left"
+      >
         <el-descriptions :column="3" border>
-              <el-descriptions-item label="客户" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="customerId" required error="客户不能为空">
-                    <customer-selector v-model="form.customerId" @change="consignor = $event" />
+          <el-descriptions-item label="客户">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="customerId"
+              required
+              error="客户不能为空"
+            >
+              <customer-selector
+                v-model="form.customerId"
+                @change="consignor = $event"
+              />
             </el-form-item>
           </el-descriptions-item>
-              <el-descriptions-item label="部门" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="departmentId" required error="部门不能为空">
-                    <el-select v-model="form.departmentId" style="width: 300px;" placeholder="请选择部门">
-                      <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"/>
+          <el-descriptions-item label="部门">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="departmentId"
+              required
+              error="部门不能为空"
+            >
+              <el-select
+                v-model="form.departmentId"
+                style="width: 300px"
+                placeholder="请选择部门"
+              >
+                <el-option
+                  v-for="item in deptData"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
-              <el-descriptions-item label="业务员" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="consignorId" required error="客户不能为空">
+          <el-descriptions-item label="业务员">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="salesmanId"
+              required
+              error="客户不能为空"
+            >
               <el-select v-model="form.salesmanId" placeholder="请选择业务员">
-                      <el-option v-for="item in creatorData" :key="item.id" :label="item.nickname" :value="item.id"/>
+                <el-option
+                  v-for="item in creatorData"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
-              <el-descriptions-item label="手续费(RMB)" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="feeRate" required error="手续费不能为空">
-                   <el-input v-model="form.feeRate" placeholder="请输入手续费"></el-input>
+          <el-descriptions-item label="手续费(RMB)">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="feeRate"
+              required
+              error="手续费不能为空"
+            >
+              <el-input
+                v-model="form.feeRate"
+                placeholder="请输入手续费"
+              ></el-input>
             </el-form-item>
           </el-descriptions-item>
-              <el-descriptions-item label="备注" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="remark" required error="备注不能为空">
+          <el-descriptions-item label="备注">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="remark"
+              required
+              error="备注不能为空"
+            >
               <el-input v-model="form.remark" placeholder="备注"></el-input>
             </el-form-item>
           </el-descriptions-item>
@@ -40,55 +100,135 @@
     <el-card class="card">
       <div slot="header" class="card-title">订单信息</div>
       <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" style="padding: 10px;margin-bottom: 10px;"
-                    >添加未收客户款项</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          style="padding: 10px; margin-bottom: 10px"
+          >添加未收客户款项</el-button
+        >
       </el-col>
       <el-table v-loading="loadings" :data="list" border>
         <el-table-column label="订单号" align="center" prop="orderNo" />
 
         <el-table-column label="运输方式" align="center" prop="transportId">
           <template slot-scope="scope">
-                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
+            <dict-tag
+              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
+              :value="scope.row.transportId"
+            ></dict-tag>
           </template>
         </el-table-column>
         <el-table-column label="出货渠道" align="center" prop="channelName" />
         <el-table-column label="始发地" align="center" prop="toDepartureId" />
         <el-table-column label="目的地" align="center" prop="toDepartureId" />
-            <el-table-column label="品名" align="center" prop="toDepartureId" />
-            <el-table-column label="箱数" align="center" prop="sumNum" />
-            <el-table-column label="体积/重量" align="center" prop="sumVolume">
+        <el-table-column label="品名" align="center" prop="title">
           <template slot-scope="scope">
-                  {{scope.row.sumVolume+'/'+scope.row.sumWeight}}
+            {{ scope.row.titleZh + "(" + scope.row.titleEn + ")" }}
           </template>
-
         </el-table-column>
-            <el-table-column label="收入类型" align="center" prop="sumWeight" />
-            <el-table-column label="收款类型" align="center" prop="payType" />
-            <el-table-column label="应收金额" align="center" prop="sumWeight" />
+        <el-table-column label="箱数" align="center" prop="num" />
+        <el-table-column label="体积/重量" align="center" prop="weight" />
+        <!-- <el-table-column label="体积/重量" align="center" prop="sumVolume">
+          <template slot-scope="scope">
+            {{ scope.row.sumVolume + "/" + scope.row.sumWeight }}
+          </template>
+        </el-table-column> -->
+        <el-table-column label="收款类型" align="center" prop="paymentType">
+          <template slot-scope="scope">
+            <dict-selector
+              :type="DICT_TYPE.PAYMENT_TYPE"
+              v-model="scope.row.paymentType"
+            ></dict-selector>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="收入类型" align="center" prop="sumWeight" /> -->
+        <el-table-column label="收入类型" align="center" prop="feeType">
+          <template slot-scope="scope">
+            <dict-tag
+              :type="DICT_TYPE.FEE_TYPE"
+              :value="scope.row.feeType"
+            ></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="单价美元" align="center" prop="unitPrice" />
+        <el-table-column label="外币兑1人民币汇率" align="center" prop="huilv">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.huilv"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="总金额$" align="center" prop="totalAmount" />
+        <el-table-column label="总金额￥" align="center" prop="totalAmount" />
+        <el-table-column label="已收金额" align="center" prop="totalAmount" />
+        <el-table-column label="本次实收金额" align="center" width="140" prop="totalAmount">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.totalAmount">
+              <template slot="append">美元</template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="本次实收金额" align="center" prop="totalAmount" /> -->
+        <!-- <el-table-column label="应收金额" align="center" prop="sumWeight" />
         <el-table-column label="收款类型" align="center" prop="payType" />
         <el-table-column label="总金额美元" align="center" prop="sumWeight" />
         <el-table-column label="总金额RMB" align="center" prop="payType" />
-            <el-table-column label="实收金额" align="center" prop="actualAmount" />
+        <el-table-column label="实收金额" align="center" prop="actualAmount" /> -->
       </el-table>
 
-          <el-form ref="forms" :model="form" label-width="120px" label-position="left">
+      <el-form
+        ref="forms"
+        :model="form"
+        label-width="120px"
+        label-position="left"
+      >
         <el-descriptions :column="2" border class="card">
-                <el-descriptions-item label="收款账户" style="width: 50%;">
-                  <el-form-item label="" label-width="0" style="margin-bottom: 0;" prop="consignorId" required error="请选择收款账户">
-                      <el-select v-model="form.platformAccountId" placeholder="请选择收款账户">
-                        <el-option v-for="item in bankData" :key="item.id" :label="item.baAccountName+'('+item.baAccountNum+')'" :value="item.id"/>
+          <el-descriptions-item label="收款账户" style="width: 50%">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="platformAccountId"
+              required
+              error="请选择收款账户"
+            >
+              <el-select
+                v-model="form.platformAccountId"
+                placeholder="请选择收款账户"
+              >
+                <el-option
+                  v-for="item in bankData"
+                  :key="item.id"
+                  :label="item.baAccountName + '(' + item.baAccountNum + ')'"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
-                <el-descriptions-item label="是否需要开票" style="width: 50%;">
-                  <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="consignorId" required error="请选择是否需要开票">
-                        <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="form.transportId" />
+          <el-descriptions-item label="是否需要开票" style="width: 50%">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="transportId"
+              required
+              error="请选择是否需要开票"
+            >
+              <dict-selector
+                :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
+                v-model="form.transportId"
+              />
             </el-form-item>
           </el-descriptions-item>
-
         </el-descriptions>
         <div class="card">
-                <el-form-item label="收款附件" label-width="120px" style="margin-bottom: 0;width: 33%;display: inline-block" prop="consignorId">
+          <el-form-item
+            label="收款附件"
+            label-width="120px"
+            style="margin-bottom: 0; width: 33%; display: inline-block"
+            prop="wenjian"
+          >
             <el-upload
               class="upload-demo"
               :action="uploadFileUrl"
@@ -102,11 +242,46 @@
               <el-button size="small" type="primary">上传附件</el-button>
             </el-upload>
           </el-form-item>
-                <el-form-item label="水单号:" label-width="120px" style="margin-bottom: 0;width: 31%;margin-left: 2%;display: inline-block" prop="waterBillNo" required error="水单号不能为空">
-                   <el-input v-model="form.waterBillNo" maxlength="200" placeholder="请输入水单号"></el-input>
+          <el-form-item
+            label="水单号:"
+            label-width="120px"
+            style="
+              margin-bottom: 0;
+              width: 31%;
+              margin-left: 2%;
+              display: inline-block;
+            "
+            prop="waterBillNo"
+            required
+            error="水单号不能为空"
+          >
+            <el-input
+              v-model="form.waterBillNo"
+              maxlength="200"
+              placeholder="请输入水单号"
+            ></el-input>
           </el-form-item>
-                <el-form-item label="实收日期:" label-width="120px" style="margin-bottom: 0;width: 31%;margin-left: 2%;display: inline-block" prop="payedAt" required error="实收日期不能为空">
-                    <el-date-picker clearable v-model="form.payedAt" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择实收日期" />
+          <el-form-item
+            label="实收日期:"
+            label-width="120px"
+            style="
+              margin-bottom: 0;
+              width: 31%;
+              margin-left: 2%;
+              display: inline-block;
+            "
+            prop="payedAt"
+            required
+            error="实收日期不能为空"
+          >
+            <el-date-picker
+              clearable
+              v-model="form.payedAt"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              format="yyyy-MM-dd HH:mm:ss"
+              type="datetime"
+              placeholder="选择实收日期"
+            />
           </el-form-item>
         </div>
       </el-form>
@@ -115,86 +290,160 @@
       <el-button type="primary" @click="submitForm">保 存</el-button>
       <el-button type="primary" @click="submitForm">新 增</el-button>
     </div>
-     <el-dialog  :visible.sync="open" title="添加未收客户款项" width="80%" append-to-body>
+    <el-dialog
+      :visible.sync="open"
+      title="添加未收客户款项"
+      width="80%"
+      append-to-body
+    >
       <div>
         <!-- <div slot="header" class="card-title">添加未收客户款项</div> -->
         <!-- 搜索工作栏 -->
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="80px">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          label-width="80px"
+        >
           <el-row>
             <el-form-item label="始发城市">
-                    <el-select v-model="queryParams.departureId" placeholder="请选择始发地">
-                        <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+              <el-select
+                v-model="queryParams.departureId"
+                placeholder="请选择始发地"
+              >
+                <el-option
+                  v-for="item in expoerCityList"
+                  :label="item.titleZh"
+                  :value="item.id"
+                  :key="item.id"
+                ></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="目的城市">
-                    <el-select v-model="queryParams.objectiveId" placeholder="请选择始发地">
-                    <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+              <el-select
+                v-model="queryParams.objectiveId"
+                placeholder="请选择始发地"
+              >
+                <el-option
+                  v-for="item in importCityList"
+                  :label="item.titleZh"
+                  :value="item.id"
+                  :key="item.id"
+                ></el-option>
               </el-select>
             </el-form-item>
-                <el-form-item label="运输方式" >
-                  <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number" />
+            <el-form-item label="运输方式">
+              <dict-selector
+                :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
+                v-model="queryParams.transportId"
+                formatter="number"
+              />
             </el-form-item>
-                <el-form-item label="出货渠道" >
-                    <el-select v-model="queryParams.channelId" placeholder="请选择出货渠道">
-                    <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId" :key="item.channelId"></el-option>
+            <el-form-item label="出货渠道">
+              <el-select
+                v-model="queryParams.channelId"
+                placeholder="请选择出货渠道"
+              >
+                <el-option
+                  v-for="item in channelList"
+                  :label="item.nameZh"
+                  :value="item.channelId"
+                  :key="item.channelId"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-row>
           <el-row>
             <el-form-item label="报关方式">
-                    <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="queryParams.customsType" />
+              <dict-selector
+                :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
+                v-model="queryParams.customsType"
+              />
             </el-form-item>
             <el-form-item label="控货">
-                      <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.control" />
+              <dict-selector
+                :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
+                v-model="queryParams.control"
+              />
             </el-form-item>
-                <el-form-item label="客户名称" >
-                     <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
+            <el-form-item label="客户名称">
+              <customer-selector
+                v-model="queryParams.consignorId"
+                @change="consignor = $event"
+              />
             </el-form-item>
           </el-row>
           <el-form-item label="订单编号" prop="orderNo">
-                   <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
+            <el-input
+              v-model="queryParams.orderNo"
+              placeholder="请输入订单编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
 
           <el-form-item label="自编号" prop="orderNo">
-                   <el-input v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
+            <el-input
+              v-model="queryParams.orderNo"
+              placeholder="请输入自编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
 
           <el-form-item>
-                   <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+              >查询</el-button
+            >
           </el-form-item>
         </el-form>
-             </el-col>
-             <el-table v-loading="loadings" :data="orderData" border  @selection-change="handleSelectionChange">
-                   <el-table-column type="selection" width="55">
-                   </el-table-column>
-                   <el-table-column label="自编号" align="center" prop="orderNo" />
+        <el-table
+          v-loading="loading1"
+          :data="orderData"
+          border
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
           <el-table-column label="订单号" align="center" prop="orderNo" />
-                 <el-table-column label="运输方式" align="center" prop="transportId">
+          <el-table-column label="唛头" align="center" prop="marks" />
+          <el-table-column label="品名" align="center" prop="title">
             <template slot-scope="scope">
-                      <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
+              {{ scope.row.titleZh + "(" + scope.row.titleEn + ")" }}
             </template>
           </el-table-column>
-                 <el-table-column label="出货渠道" align="center" prop="channelName" />
-                 <el-table-column label="始发地" align="center" prop="toDepartureId" />
-                 <el-table-column label="目的地" align="center" prop="toDepartureId" />
-                 <el-table-column label="商品信息" align="center" prop="toDepartureId" />
-                 <el-table-column label="箱数" align="center" prop="sumNum" />
-                 <el-table-column label="体积/重量" align="center" prop="weight">
+          <el-table-column label="箱数" align="center" prop="num" />
+          <el-table-column label="体积/重量" align="center" prop="weight" />
+          <el-table-column label="发货人" align="center" prop="consignorName" />
+          <el-table-column label="收货人" align="center" prop="consigneeName" />
+          <el-table-column label="订单状态" align="center" prop="status">
             <template slot-scope="scope">
-                       {{scope.row.volume/scope.row.weight}}
+              <dict-tag
+                :type="DICT_TYPE.ORDER_STATUS"
+                :value="scope.row.status"
+              />
             </template>
           </el-table-column>
-                 <el-table-column label="费用类型" align="center" prop="feeType">
+          <el-table-column label="收入类型" align="center" prop="feeType">
             <template slot-scope="scope">
-                      <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
+              <dict-tag
+                :type="DICT_TYPE.FEE_TYPE"
+                :value="scope.row.feeType"
+              ></dict-tag>
             </template>
           </el-table-column>
-                 <el-table-column label="单价" align="center" prop="unitPrice" />
-                 <el-table-column label="总金额美元" align="center" prop="totalAmount" />
+          <el-table-column label="单价美元" align="center" prop="unitPrice" />
         </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.page"
+          :limit.sync="queryParams.rows"
+          @pagination="getList"
+        />
         <!-- </el-card> -->
         <div slot="footer" class="dialog-footer">
-           <el-button type="primary" @click="submitForm">确认添加</el-button>
+          <el-button type="primary" @click="saveSelectList">确认添加</el-button>
           <el-button @click="hiddenDialog">取 消</el-button>
         </div>
       </div>
@@ -203,106 +452,128 @@
 </template>
 
 <script>
-  import { userList } from "@/api/system/user"
-  import {DICT_TYPE} from  '@/utils/dict'
-  import { getToken } from "@/utils/auth";
-  import CustomerSelector from '@/components/CustomerSelector'
-  import { getBankAccountPage } from "@/api/ecw/bankAccount";
-  import { listSimpleDepts } from "@/api/system/dept"
-  import {getChannelList} from '@/api/ecw/channel'
-  import {getTradeCityList} from '@/api/ecw/region'
-  export default {
+import { userList } from "@/api/system/user";
+import { DICT_TYPE } from "@/utils/dict";
+import { getToken } from "@/utils/auth";
+import CustomerSelector from "@/components/CustomerSelector";
+import { getBankAccountPage } from "@/api/ecw/bankAccount";
+import { listSimpleDepts } from "@/api/system/dept";
+import { getChannelList } from "@/api/ecw/channel";
+import { getTradeCityList } from "@/api/ecw/region";
+import { createReceipt } from "@/api/ecw/financial";
+import { getReceivableList } from "@/api/ecw/financial";
+
+export default {
   name: "CreatCollection",
   components: {
-     CustomerSelector
+    CustomerSelector,
   },
   data() {
     return {
       loadings: false,
+      loading1: false,
       uploadFileUrl: process.env.VUE_APP_BASE_API + "/app-api/file/upload", // 上传的图片服务器地址
-        form:{},
-        creatorData:[],
-        list:[],
-        fileList:[],
-        orderData:[],
+      form: {},
+      creatorData: [],
+      list: [],
+      fileList: [],
+      orderData: [],
       headers: {
         Authorization: "Bearer " + getToken(),
       },
-        loading:'',
-        open:false,
-        bankData:[],
-        params:{
-           page:1,
-           rows:20,
+      loading: "",
+      open: false,
+      bankData: [],
+      params: {
+        page: 1,
+        rows: 20,
       },
-        deptData:[],
-        deptArr:[],
+      deptData: [],
+      deptArr: [],
       oadings: false,
       channelList: [],
-        queryParams:{
-          page:1,
-          rows:20,
+      queryParams: {
+        page: 1,
+        rows: 20,
       },
-        multipleSelection:[],
-        tradeCityList:[],
-        id:0
-      }
+      multipleSelection: [],
+      tradeCityList: [],
+      id: 0
+    };
   },
 
   created() {
-      let that = this
-      if(that.$route.query.id){
-        this.id = this.$route.query.id
+    let that = this;
+    if (that.$route.query.id) {
+      this.id = this.$route.query.id;
     }
+    this.getList();
     // if(that.$route.query.consignorId){
     //   this.queryParams.consignorId = this.$route.query.consignorId
     // }
     // if(that.$route.query.writeOffName){
     //   this.form.writeOffName = this.$route.query.writeOffName
     // }
-      userList('salesman').then(res =>that.creatorData = res.data)
-      getChannelList().then(res => that.channelList = res.data)
-      getTradeCityList().then(res => that.tradeCityList = res.data)
-      getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
-      listSimpleDepts().then(res =>{
-        res.data.forEach((item)=>{
-          if(item.parentId==0){
-
-            that.deptArr.push(item)
-
-          }else{
-            that.deptData.push(item)
+    userList("salesman").then((res) => (that.creatorData = res.data));
+    getChannelList().then((res) => (that.channelList = res.data));
+    getTradeCityList().then((res) => (that.tradeCityList = res.data));
+    getBankAccountPage(that.params).then(
+      (res) => (that.bankData = res.data.list)
+    );
+    listSimpleDepts().then((res) => {
+      res.data.forEach((item) => {
+        if (item.parentId == 0) {
+          that.deptArr.push(item);
+        } else {
+          that.deptData.push(item);
         }
-        })
+      });
 
-        that.deptData.forEach((value)=>{
-           var dept = that.deptArr.filter(itt=>itt.id==value.parentId)
-           if(dept.length>0){
-             value.name =dept[0].name+' | '+ value.name
+      that.deptData.forEach((value) => {
+        var dept = that.deptArr.filter((itt) => itt.id == value.parentId);
+        if (dept.length > 0) {
+          value.name = dept[0].name + " | " + value.name;
         }
-
-        })
+      });
+    });
+    this.id && getReceivableList({ ...that.params, id: this.id }).then(res => {
+      console.log(res, '==================')
     })
   },
-    computed:{
-      expoerCityList(){
-          return this.tradeCityList.filter(item => item.type == 2)
+  computed: {
+    expoerCityList() {
+      return this.tradeCityList.filter((item) => item.type == 2);
     },
-      importCityList(){
-          return this.tradeCityList.filter(item => item.type == 1)
+    importCityList() {
+      return this.tradeCityList.filter((item) => item.type == 1);
     },
   },
   methods: {
+    getReceivableListByIds() {
+      
+    },
+    getList() {
+      this.loading1 = true;
+      // 处理查询参数
+      let params = { ...this.queryParams };
+      this.addBeginAndEndTime(params, this.dateType, "createTime");
+      // 执行查询
+      getReceivableList(params).then((response) => {
+        this.orderData = response.data.list;
+        this.total = response.data.total;
+        this.loading1 = false;
+      });
+    },
     beforeRemove(file, fileList) {
       return this.$confirm(`确定移除？`);
     },
-      handleUploadSuccess(res,file,fileList) {
-        var arr = []
-        fileList.forEach((item)=>{
-          arr.push(item.response.data)
-        })
-        this.fileList= arr
-        console.log(this.fileList)
+    handleUploadSuccess(res, file, fileList) {
+      var arr = [];
+      fileList.forEach((item) => {
+        arr.push(item.response.data);
+      });
+      this.fileList = arr;
+      console.log(this.fileList);
       this.loading.close();
     },
     handleBeforeUpload() {
@@ -323,32 +594,38 @@
     handleAdd() {
       this.open = true;
     },
-      hiddenDialog(){
-        this.open = false
+    hiddenDialog() {
+      this.open = false;
     },
-      submitForm(){
-
+    submitForm() {
+      const params = this.form;
+      console.log(params);
+      // createReceipt()
     },
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
+    saveSelectList() {
+      this.list = this.multipleSelection
+      this.open = false;
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.page = 1;
     },
   },
-  }
+};
 </script>
 
 <style>
-  .card{
+.card {
   margin-top: 20px;
-  }
-  .dialog-footer{
+}
+.dialog-footer {
   padding: 40px;
-  }
-  .card-title{
+}
+.card-title {
   font-size: 18px;
   font-weight: bold;
-  }
+}
 </style>

src/views/ecw/financial/creatPayment.vue

@@ -2,49 +2,151 @@
   <div class="app-container">
     <el-card>
       <div slot="header" class="card-title">请款单</div>
-        <el-form ref="form" :model="form" label-width="120px" label-position="left">
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="120px"
+        label-position="left"
+      >
         <el-descriptions :column="3" class="card" border>
-              <el-descriptions-item label="供应商" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="supplierId" required error="供应商不能为空">
-                    <customer-selector v-model="form.supplierId" @change="consignor = $event" />
+          <el-descriptions-item label="供应商">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="supplierId"
+              :rules="{ required: true, trigger: ['blur', 'change'] }"
+              error="供应商不能为空"
+            >
+              <!-- <customer-selector v-model="form.supplierId" @change="consignor = $event" /> -->
+              <el-select
+                v-model="form.supplierId"
+                placeholder="请选择供应商"
+                @change="selectChange"
+              >
+                <el-option
+                  v-for="supplier in allSupplier"
+                  :key="supplier.id"
+                  :label="supplier.companyZh"
+                  :value="supplier.id"
+                ></el-option>
+              </el-select>
             </el-form-item>
           </el-descriptions-item>
-              <el-descriptions-item label="部门" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="departmentId" required error="部门不能为空">
-                    <el-select v-model="form.departmentId" style="width: 300px;" placeholder="请选择部门">
-                      <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"/>
+          <el-descriptions-item label="部门">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="departmentId"
+              required
+              error="部门不能为空"
+            >
+              <el-select
+                v-model="form.departmentId"
+                style="width: 300px"
+                placeholder="请选择部门"
+              >
+                <el-option
+                  v-for="item in deptData"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
-              <el-descriptions-item label="业务员" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="salesmanId" required error="客户不能为空">
+          <el-descriptions-item label="业务员">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="salesmanName"
+              required
+              error="业务员不能为空"
+            >
               <el-select v-model="form.salesmanName" placeholder="请选择业务员">
-                      <el-option v-for="item in creatorData" :key="item.id" :label="item.nickname" :value="item.nickname"/>
+                <el-option
+                  v-for="item in creatorData"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.nickname"
+                />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
-                <el-descriptions-item label="申请日期" >
-                  <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="consignorId" required error="申请日期不能为空">
-                      <el-date-picker clearable v-model="form.applicationAt" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择申请日期" />
+          <el-descriptions-item label="申请日期">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="applicationAt"
+              required
+              error="申请日期不能为空"
+            >
+              <el-date-picker
+                clearable
+                v-model="form.applicationAt"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                type="date"
+                placeholder="选择申请日期"
+              />
             </el-form-item>
           </el-descriptions-item>
-                  <el-descriptions-item label="供应商银行账号" style="width: 50%;">
-                    <el-form-item label="" label-width="0" style="margin-bottom: 0;" prop="consignorId" required error="请选择收款账户">
-                        <el-select v-model="form.supplierId" placeholder="请选择收款账户">
-                          <el-option v-for="item in bankData" :key="item.id" :label="item.baAccountName+'('+item.baAccountNum+')'" :value="item.id"/>
+          <el-descriptions-item label="供应商银行账号" style="width: 50%">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="supplierBankAccount"
+              required
+              error="请选择收款账户"
+            >
+              <el-select v-model="form.supplierBankAccount" placeholder="请选择收款账户">
+                <el-option
+                  v-for="item in bankData"
+                  :key="item.id"
+                  :label="item.baAccountName + '(' + item.baAccountNum + ')'"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
         </el-descriptions>
         <el-descriptions :column="3" class="card" border>
-              <el-descriptions-item label="最后付款日期" >
-                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="latestPayAt" required error="最后付款日期不能为空">
-                    <el-date-picker clearable v-model="form.latestPayAt" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择最后付款日期" />
+          <el-descriptions-item label="最后付款日期">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="latestPayAt"
+              required
+              error="最后付款日期不能为空"
+            >
+              <el-date-picker
+                clearable
+                v-model="form.latestPayAt"
+                value-format="yyyy-MM-dd"
+                format="yyyy-MM-dd"
+                type="date"
+                placeholder="选择最后付款日期"
+              />
             </el-form-item>
           </el-descriptions-item>
-                <el-descriptions-item label="结算方式" >
-                  <el-form-item label="" label-width="0" style="margin-bottom: 0"  required error="选择结算方式">
-                       <dict-selector :type="DICT_TYPE.CUSTOMER_BALANCE" v-model="form.settlementType" />
+          <el-descriptions-item label="结算方式">
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              required
+              error="选择结算方式"
+              prop="settlementType"
+            >
+              <dict-selector
+                :type="DICT_TYPE.CUSTOMER_BALANCE"
+                v-model="form.settlementType"
+              />
             </el-form-item>
           </el-descriptions-item>
         </el-descriptions>
@@ -53,37 +155,76 @@
     <el-card class="card">
       <div slot="header" class="card-title">费用信息</div>
       <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" style="padding: 10px;margin-bottom: 10px;"
-                     >添加供应商未付款项</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          style="padding: 10px; margin-bottom: 10px"
+          >添加供应商未付款项</el-button
+        >
       </el-col>
-        <el-table v-loading="loadings" :data="list" border>
-            <el-table-column label="订单编号" align="center" prop="orderNo" />
-
-            <el-table-column label="费用类型" align="center" prop="transportId">
+      <el-table v-loading="loadings" :data="list" border :show-summary="!!list.length" :summary-method="getSummaries">
+        <el-table-column label="自编号" align="center" prop="payableNo" />
+        <el-table-column label="费用类型" align="center" prop="feeType">
           <template slot-scope="scope">
-                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
+            <dict-tag
+              :type="DICT_TYPE.FEE_TYPE"
+              :value="scope.row.feeType"
+            ></dict-tag>
           </template>
         </el-table-column>
-            <el-table-column label="发票号码" align="center" prop="channelName" />
-            <el-table-column label="应付金额" align="center" prop="toDepartureId" />
-            <el-table-column label="币种" align="center" prop="toDepartureId" />
-            <el-table-column label="汇率" align="center" prop="toDepartureId" />
-            <el-table-column label="税率" align="center" prop="sumNum" />
-            <el-table-column label="价格合计(RMB)" align="center" prop="payType" />
+        <el-table-column label="发票号码" align="center" prop="invoiceNumber" />
+        <el-table-column label="应付金额" align="center" prop="totalAmount" />
+        <el-table-column label="币种" align="center" prop="currencyId">
+          <template slot-scope="scope">
+            <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" />
+          </template>
+        </el-table-column>
+        <el-table-column label="汇率" align="center" prop="exchangeRate" />
+        <el-table-column label="税率" align="center" prop="taxRate" />
+        <el-table-column label="价税合计(RMB)" align="center" prop="total" />
       </el-table>
 
-          <el-form ref="forms" :model="form" label-width="120px" label-position="left"  style="width: 50%;">
+      <el-form
+        ref="forms"
+        :model="form"
+        label-width="120px"
+        label-position="left"
+        style="width: 50%"
+      >
         <el-descriptions :column="1" class="card" border>
           <el-descriptions-item label="账单号">
-                  <el-form-item label="" label-width="0" style="margin-bottom: 0;" required error="账单号不能为空">
-                        <el-input v-model="form.accountNumber"  placeholder="请输入账单号"></el-input>
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              required
+              error="账单号不能为空"
+              prop="accountNumber"
+            >
+              <el-input
+                v-model="form.accountNumber"
+                placeholder="请输入账单号"
+              ></el-input>
             </el-form-item>
           </el-descriptions-item>
           <el-descriptions-item label="发票">
-                  <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="invoiceStatus" required error="请选择是否开票">
-                        <el-select v-model="form.invoiceStatus" placeholder="请选择是否开票">
-                           <el-option label="未开票" value="0"/>
-                           <el-option label="已开票" value="1"/>
+            <el-form-item
+              label=""
+              label-width="0"
+              style="margin-bottom: 0"
+              prop="invoiceStatus"
+              required
+              error="请选择是否开票"
+            >
+              <el-select
+                v-model="form.invoiceStatus"
+                placeholder="请选择是否开票"
+              >
+                <el-option label="未开票" value="0" />
+                <el-option label="已开票" value="1" />
               </el-select>
             </el-form-item>
           </el-descriptions-item>
@@ -94,77 +235,156 @@
       <el-button type="primary" @click="submitForm">保 存</el-button>
       <el-button type="primary" @click="submitForm">新 增</el-button>
     </div>
-    <el-dialog  :visible.sync="open" title="添加未收客户款项" width="80%" append-to-body>
+    <el-dialog
+      :visible.sync="open"
+      title="添加未收客户款项"
+      width="80%"
+      append-to-body
+      @open="openDialog"
+    >
       <div>
         <!-- <div slot="header" class="card-title">添加未收客户款项</div> -->
         <!-- 搜索工作栏 -->
-           <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="80px">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          label-width="80px"
+        >
           <el-row>
             <el-form-item label="供应商">
-                   <customer-selector v-model="form.supplierId" @change="consignor = $event" />
+              <customer-selector
+                v-model="queryParams.supplierId"
+                @change="consignor = $event"
+              />
             </el-form-item>
             <el-form-item label="始发城市">
-                   <el-select v-model="queryParams.departureId" placeholder="请选择始发地">
-                       <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+              <el-select
+                v-model="queryParams.departureId"
+                placeholder="请选择始发地"
+              >
+                <el-option
+                  v-for="item in expoerCityList"
+                  :label="item.titleZh"
+                  :value="item.id"
+                  :key="item.id"
+                ></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="目的城市">
-                   <el-select v-model="queryParams.objectiveId" placeholder="请选择始发地">
-                   <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+              <el-select
+                v-model="queryParams.objectiveId"
+                placeholder="请选择始发地"
+              >
+                <el-option
+                  v-for="item in importCityList"
+                  :label="item.titleZh"
+                  :value="item.id"
+                  :key="item.id"
+                ></el-option>
               </el-select>
             </el-form-item>
-               <el-form-item label="运输方式" >
-                 <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number" />
+            <el-form-item label="运输方式">
+              <dict-selector
+                :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
+                v-model="queryParams.transportId"
+                formatter="number"
+              />
             </el-form-item>
-               <el-form-item label="出货渠道" >
-                   <el-select v-model="queryParams.channelId" placeholder="请选择出货渠道">
-                   <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId" :key="item.channelId"></el-option>
+            <el-form-item label="出货渠道">
+              <el-select
+                v-model="queryParams.channelId"
+                placeholder="请选择出货渠道"
+              >
+                <el-option
+                  v-for="item in channelList"
+                  :label="item.nameZh"
+                  :value="item.channelId"
+                  :key="item.channelId"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-row>
           <el-row>
             <el-form-item label="报关方式">
-                   <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="queryParams.customsType" />
+              <dict-selector
+                :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
+                v-model="queryParams.customsType"
+              />
             </el-form-item>
             <el-form-item label="控货">
-                     <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.control" />
+              <dict-selector
+                :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
+                v-model="queryParams.control"
+              />
             </el-form-item>
-               <el-form-item label="客户名称" >
-                    <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
+            <el-form-item label="客户名称">
+              <customer-selector
+                v-model="queryParams.consignorId"
+                @change="consignor = $event"
+              />
             </el-form-item>
           </el-row>
           <el-form-item label="订单编号" prop="orderNo">
-                  <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable/>
+            <el-input
+              v-model="queryParams.orderNo"
+              placeholder="请输入订单编号"
+              clearable
+            />
           </el-form-item>
 
           <el-form-item label="自编号" prop="orderNo">
-                  <el-input v-model="queryParams.orderNo" placeholder="请输入自编号" clearable/>
+            <el-input
+              v-model="queryParams.orderNo"
+              placeholder="请输入自编号"
+              clearable
+            />
           </el-form-item>
 
           <el-form-item>
-                  <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+              >查询</el-button
+            >
           </el-form-item>
         </el-form>
-            </el-col>
-            <el-table v-loading="loadings" :data="orderData" border  @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="55">
+        <el-table
+          ref="multipleTable"
+          v-loading="loading"
+          :data="orderData"
+          border
+          @selection-change="handleSelectionChange"
+          row-key="id"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column label="自编号" align="center" prop="payableNo" />
+          <el-table-column label="货柜号" align="center" prop="containerNo" />
+          <el-table-column label="供应商" align="center" prop="supplierName" />
+          <el-table-column label="费用类型" align="center" prop="feeType">
+            <template slot-scope="scope">
+              <dict-tag
+                :type="DICT_TYPE.FEE_TYPE"
+                :value="scope.row.feeType"
+              ></dict-tag>
+            </template>
           </el-table-column>
-                <el-table-column label="自编号" align="center" prop="orderNo" />
-                <el-table-column label="柜号" align="center" prop="orderNo" />
-                <el-table-column label="运输方式" align="center" prop="transportId">
+          <el-table-column label="金额" align="center" prop="totalAmount">
             <template slot-scope="scope">
-                     <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
+              <span>{{ scope.row.totalAmount }}</span>
+              <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" />
             </template>
           </el-table-column>
-                <el-table-column label="出货渠道" align="center" prop="channelName" />
-                <el-table-column label="始发地" align="center" prop="toDepartureId" />
-                <el-table-column label="目的地" align="center" prop="toDepartureId" />
-                <el-table-column label="金额" align="center" prop="totalAmount" />
-                <el-table-column label="备注" align="center" prop="toDepartureId" />
         </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.page"
+          :limit.sync="queryParams.rows"
+          @pagination="getList"
+        />
         <!-- </el-card> -->
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确认添加</el-button>
+          <el-button type="primary" @click="saveSelectList">确认添加</el-button>
           <el-button @click="hiddenDialog">取 消</el-button>
         </div>
       </div>
@@ -173,108 +393,265 @@
 </template>
 
 <script>
-  import { userList } from "@/api/system/user"
-  import {DICT_TYPE} from  '@/utils/dict'
-  import { getToken } from "@/utils/auth"
-  import {getChannelList} from '@/api/ecw/channel'
-  import CustomerSelector from '@/components/CustomerSelector'
-  import { getBankAccountPage } from "@/api/ecw/bankAccount"
-  import { listSimpleDepts } from "@/api/system/dept"
-    import {getTradeCityList} from '@/api/ecw/region'
-  export default {
+import { userList } from "@/api/system/user";
+import { DICT_TYPE } from "@/utils/dict";
+import { getToken } from "@/utils/auth";
+import { getChannelList } from "@/api/ecw/channel";
+import CustomerSelector from "@/components/CustomerSelector";
+import { getBankAccountPage } from "@/api/ecw/bankAccount";
+import { listSimpleDepts } from "@/api/system/dept";
+import { getTradeCityList } from "@/api/ecw/region";
+import { getSupplierPage } from "@/api/ecw/supplier";
+import { getPayableList, getPayableInfoByIds, createPayment } from "@/api/ecw/financial"
+export default {
   name: "CreatPayment",
   components: {
     CustomerSelector
   },
   data() {
     return {
-        orderData:[],
+      id: 0,
+      orderData: [],
+      total: 0,
       loadings: false,
-        open:false,
-        form:{},
-        creatorData:[],
-        list:[],
-        channelList:[],
-        loading:'',
-        bankData:[],
-        params:{
-           page:1,
-           rows:20,
+      open: false,
+      form: {},
+      creatorData: [],
+      list: [],
+      channelList: [],
+      loading: "",
+      bankData: [],
+      params: {
+        page: 1,
+        rows: 20,
       },
-        deptData:[],
-        deptArr:[],
-        queryParams:{
-          page:1,
-          rows:20,
+      deptData: [],
+      deptArr: [],
+      queryParams: {
+        page: 1,
+        rows: 20,
       },
-        multipleSelection:[],
-        tradeCityList:[]
-      }
+      multipleSelection: [],
+      tradeCityList: [],
+      allSupplier: []
+    };
   },
   created() {
-      let that = this
-      userList('salesman').then(res =>that.creatorData = res.data)
-      getChannelList().then(res => that.channelList = res.data)
-      getTradeCityList().then(res => that.tradeCityList = res.data)
-      getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
-      listSimpleDepts().then(res =>{
-        res.data.forEach((item)=>{
-          if(item.parentId==0){
-
-            that.deptArr.push(item)
-
-          }else{
-            that.deptData.push(item)
-          }
+    let that = this;
+    if (that.$route.query.id && that.$route.query.id !== '0') {
+      this.id = this.$route.query.id;
+      getPayableInfoByIds({ id: this.id }).then(res => {
+        this.list = [{...res.data}]
+        this.$set(this.form, 'supplierId', res.data.supplierId)
       })
-
-        that.deptData.forEach((value)=>{
-           var dept = that.deptArr.filter(itt=>itt.id==value.parentId)
-           if(dept.length>0){
-             value.name =dept[0].name+' | '+ value.name
     }
+    userList("salesman").then((res) => (that.creatorData = res.data));
+    getChannelList().then((res) => (that.channelList = res.data));
+    getTradeCityList().then((res) => (that.tradeCityList = res.data));
+    getBankAccountPage(that.params).then(
+      (res) => (that.bankData = res.data.list)
+    );
+    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allSupplier = data.list;
+      this.selectChange(this.form.supplierId)
+    });
+    listSimpleDepts().then((res) => {
+      res.data.forEach((item) => {
+        if (item.parentId == 0) {
+          that.deptArr.push(item);
+        } else {
+          that.deptData.push(item);
+        }
+      });
 
-        })
-      })
+      that.deptData.forEach((value) => {
+        var dept = that.deptArr.filter((itt) => itt.id == value.parentId);
+        if (dept.length > 0) {
+          value.name = dept[0].name + " | " + value.name;
+        }
+      });
+    });
   },
-    computed:{
-      expoerCityList(){
-          return this.tradeCityList.filter(item => item.type == 2)
+  computed: {
+    expoerCityList() {
+      return this.tradeCityList.filter((item) => item.type == 2);
     },
-      importCityList(){
-          return this.tradeCityList.filter(item => item.type == 1)
+    importCityList() {
+      return this.tradeCityList.filter((item) => item.type == 1);
     },
   },
   methods: {
+    getList() {
+      this.loading = true;
+      // 处理查询参数
+      let params = { ...this.queryParams };
+      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
+      // 执行查询
+      getPayableList(params).then((response) => {
+        this.orderData = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+        this.$nextTick(() => {
+          this.list.forEach(itm => {
+            const t = this.orderData.find(v => v.id == itm.id)
+            t && this.$refs.multipleTable.toggleRowSelection(t, true)
+          })
+        })
+      });
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = new Array(columns.length).map(v => '');
+      const index = sums.length - 1
+      sums[index - 1] = '价税合计大写'
+      const t = data.map(v => v.total).reduce((prev, curr) => {
+        return prev + curr;
+      }, 0)
+      sums[index] = this.convertCurrency(t)
+      return sums;
+    },
     /** 新增按钮操作 */
     handleAdd() {
-        this.open = true
+      this.open = true;
     },
-      submitForm(){
-
+    submitForm() {
+      this.$refs.form.validate ((valid)=>{
+        if (valid) {
+          this.$refs.forms.validate((val) => {
+            if (val) {
+              const params = {...this.form}
+              if (this.list && this.list.length > 0) {
+                params.payableReqVOList = [...this.list]
+              }
+              createPayment(params).then(res => {
+                this.$modal.msgSuccess("新增成功");
+              })
+            }
+          })
+        }
+      })
     },
-      handleQuery(){
-
+    selectChange(val) {
+      const t = this.allSupplier.find(v => v.id == val)
+      t && (this.form.supplierName = t.companyZh)
     },
+    handleQuery() {},
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
-      hiddenDialog(){
-        this.open = false
+    hiddenDialog() {
+      this.open = false;
+    },
+    saveSelectList() {
+      this.list = this.multipleSelection
+      this.open = false;
+    },
+    convertCurrency(money) {
+      //汉字的数字
+      var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
+      //基本单位
+      var cnIntRadice = new Array('', '拾', '佰', '仟');
+      //对应整数部分扩展单位
+      var cnIntUnits = new Array('', '万', '亿', '兆');
+      //对应小数部分单位
+      var cnDecUnits = new Array('角', '分', '毫', '厘');
+      //整数金额时后面跟的字符
+      var cnInteger = '整';
+      //整型完以后的单位
+      var cnIntLast = '元';
+      //最大处理的数字
+      var maxNum = 999999999999999.9999;
+      //金额整数部分
+      var integerNum;
+      //金额小数部分
+      var decimalNum;
+      //输出的中文金额字符串
+      var chineseStr = '';
+      //分离金额后用的数组，预定义
+      var parts;
+      // 传入的参数为空情况 
+      if(money === '') {
+        return '';
+      }
+      money = parseFloat(money)
+      if(money >= maxNum){
+        return ''
+      }
+      // 传入的参数为0情况 
+      if (money === 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr
+      }
+      // 转为字符串
+      money = money.toString();
+      // indexOf 检测某字符在字符串中首次出现的位置 返回索引值（从0 开始） -1 代表无
+      if (money.indexOf('.') == -1) {
+        integerNum = money;
+        decimalNum = ''
+      }else{
+        parts = money.split('.');
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0,4);
+      }
+      //转换整数部分
+      if(parseInt(integerNum,10) > 0){
+        let zeroCount  = 0;
+        let IntLen = integerNum.length
+        for(let i = 0; i < IntLen; i++){
+          let n = integerNum.substr(i,1);
+          let p = IntLen - i - 1;
+          let q = p / 4;
+          let m = p % 4;
+          if( n == '0'){
+            zeroCount ++ ;
+          }else{
+            if(zeroCount > 0){
+                chineseStr += cnNums[0]
             }
+            zeroCount = 0;
+            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+          }
+          if(m == 0 && zeroCount < 4){
+            chineseStr += cnIntUnits[q]; 
+          }
+        }
+        // 最后+ 元
+        chineseStr += cnIntLast;
+      }
+      // 转换小数部分
+      if(decimalNum != ''){
+        let decLen = decimalNum.length;
+        for(let i = 0; i <decLen; i++){
+          let n = decimalNum.substr(i,1);
+          if(n != '0'){
+            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
+          }
+        }
+      }
+      if(chineseStr == ''){
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+      }else if(decimalNum == ''){
+        chineseStr += cnInteger;
+      }
+      return chineseStr
     },
+    openDialog() {
+      this.getList()
     }
+  },
+};
 </script>
 
 <style>
-  .card{
+.card {
   margin-top: 20px;
-  }
-  .dialog-footer{
+}
+.dialog-footer {
   padding: 40px;
-  }
-  .card-title{
+}
+.card-title {
   font-size: 18px;
   font-weight: bold;
-  }
+}
 </style>

src/views/ecw/financial/payable.vue

@@ -3,37 +3,76 @@
     <div slot="header" class="card-title">应付款</div>
     <!-- 搜索工作栏 -->
     <el-card v-show="showSearch">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="100px" class="card">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="100px"
+        class="card"
+      >
         <el-row>
-              <el-form-item label="柜号:" >
-                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入柜号" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="柜号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.orderNo"
+              placeholder="请输入柜号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-              <el-form-item label="自编号:" >
-                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="自编号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.orderNo"
+              placeholder="请输入自编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-<!--              <el-form-item label="订单号:" >
+          <!--              <el-form-item label="订单号:" >
                   <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
               </el-form-item> -->
           <el-form-item label="始发城市:">
-                  <el-select v-model="queryParams.departureId" placeholder="请选择始发城市">
-                      <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+            <el-select
+              v-model="queryParams.departureId"
+              placeholder="请选择始发城市"
+            >
+              <el-option
+                v-for="item in expoerCityList"
+                :label="item.titleZh"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="目的城市:">
-                  <el-select v-model="queryParams.objectiveId" placeholder="请选择目的城市">
-                   <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+            <el-select
+              v-model="queryParams.objectiveId"
+              placeholder="请选择目的城市"
+            >
+              <el-option
+                v-for="item in importCityList"
+                :label="item.titleZh"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
-               <el-form-item label="运输方式:" >
-                   <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number" />
+          <el-form-item label="运输方式:">
+            <dict-selector
+              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
+              v-model="queryParams.transportId"
+              formatter="number"
+            />
           </el-form-item>
         </el-row>
 
-<!--              <el-form-item label="付款单号:" >
+        <!--              <el-form-item label="付款单号:" >
                   <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入付款单号" clearable @keyup.enter.native="handleQuery"/>
               </el-form-item> -->
 
-<!--              <el-form-item label="状态:">
+        <!--              <el-form-item label="状态:">
                   <dict-selector :type="DICT_TYPE.ECW_RECEIPT_STATE" v-model="queryParams.control" />
               </el-form-item>
                <el-form-item label="业务员:">
@@ -42,7 +81,7 @@
                   </el-select>
                </el-form-item> -->
 
-<!--          <el-row>
+        <!--          <el-row>
               <el-form-item label="收款时间:" >
                   <el-date-picker
                     v-model="dateType"
@@ -54,127 +93,191 @@
               </el-form-item>
           </el-row> -->
         <el-row>
-<!--              <el-form-item label="商品名称:" >
+          <!--              <el-form-item label="商品名称:" >
                 <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
               </el-form-item> -->
-              <el-form-item label="供应商名称:" >
-                   <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入供应商名称" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="供应商名称:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.orderNo"
+              placeholder="请输入供应商名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-             <el-form-item label="费用类型:" >
-                <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
+          <el-form-item label="费用类型:">
+            <dict-selector
+              :type="DICT_TYPE.FEE_TYPE"
+              v-model="queryParams.feeType"
+            ></dict-selector>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="handleQuery">查找</el-button>
-                <el-button style="margin-left:10px" type="success"   @click="handleAdd(0)">新增请款单</el-button>
+            <el-button
+              style="margin-left: 10px"
+              type="success"
+              @click="handleAdd(0)"
+              >新增请款单</el-button
+            >
           </el-form-item>
         </el-row>
       </el-form>
     </el-card>
     <el-table v-loading="loadings" :data="list" border class="card">
-            <el-table-column label="自编号" align="center" prop="orderNo" />
-            <el-table-column label="货柜号" align="center" prop="orderNo" />
-            <el-table-column label="供应商" align="center" prop="orderNo" />
+      <el-table-column label="自编号" align="center" prop="payableNo" />
+      <el-table-column label="货柜号" align="center" prop="containerNo" />
+      <el-table-column label="供应商" align="center" prop="supplierName" />
       <el-table-column label="费用类型" align="center" prop="feeType">
         <template slot-scope="scope">
-                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
+          <dict-tag
+            :type="DICT_TYPE.FEE_TYPE"
+            :value="scope.row.feeType"
+          ></dict-tag>
         </template>
       </el-table-column>
-            <el-table-column label="金额" align="center" prop="totalAmount" />
-<!--            <el-table-column label="创建时间" align="center" prop="channelName" />
+      <el-table-column label="金额" align="center" prop="totalAmount">
+        <template slot-scope="scope">
+          <span>{{ scope.row.totalAmount }}</span>
+          <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" />
+        </template>
+      </el-table-column>
+      <!--            <el-table-column label="创建时间" align="center" prop="channelName" />
             <el-table-column label="创建人" align="center" prop="toDepartureId" /> -->
-           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
-                <el-button size="mini"  type="success" @click="open=true">编辑</el-button>
-                <el-button size="mini"  @click="handleAdd(scope.row.consignorId)">请款</el-button>
-                <el-button size="mini" type="danger">删除</el-button>
+          <el-button size="mini" type="text" @click="editClick(scope.row)"
+            >编辑</el-button
+          >
+          <el-button size="mini" type="text"  @click="handleAdd(scope.row.id)"
+            >请款</el-button
+          >
+          <el-button size="mini" type="text" @click="deleteClick(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
-          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
-                         @pagination="getList"/>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
     <!-- 对话框(添加 / 修改) -->
-        <el-dialog title="费用登记" :visible.sync="open" width="500px" append-to-body>
-          <el-form ref="form" :model="form" label-width="80px">
-            <el-form-item label="操作步骤" prop="receiptNo">
-              <el-input v-model="form.receiptNo" placeholder="请输入收款单号（例：SKD001）" />
+    <el-dialog
+      title="费用登记"
+      :visible.sync="open"
+      width="500px"
+      append-to-body
+    >
+      <el-form ref="costForm" :model="costObj" label-width="80px">
+
+        <el-form-item label="操作步骤">
+          <el-select v-model="costObj.stepsId" placeholder="请选择操作步骤">
+            <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PROCESS)" :key="type.value" :label="type.label" :value="type.value"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="费用类型">
+          <el-select v-model="costObj.feeType" placeholder="请选择费用类型">
+            <el-option v-for="type in this.getDictDatas(DICT_TYPE.FEE_TYPE)" :key="type.value" :label="type.label" :value="type.value"></el-option>
+          </el-select>
         </el-form-item>
-            <el-form-item label="费用类型" prop="departmentId">
-              <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
+
+        <el-form-item label="供应商">
+          <el-select v-model="costObj.supplierId" placeholder="请选择供应商">
+            <el-option v-for="supplier in allSupplier" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
+          </el-select>
         </el-form-item>
-            <el-form-item label="供应商" prop="departmentName">
-              <el-input v-model="form.departmentName" placeholder="请输入供应商" />
+
+        <el-row class="two-element">
+          <el-form-item label="金额">
+            <el-input-number v-model="costObj.totalAmount" controls-position="right" :min="1"></el-input-number>
           </el-form-item>
-            <el-form-item label="金额" prop="salesmanId" style="flex">
-                <el-input-number v-model="form.num" controls-position="right" :min="1"></el-input-number>
-                <dict-selector style="width: 120px;" :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" v-model="queryParams.feeType"></dict-selector>
+          <el-form-item label="" label-width="0px">
+            <el-select v-model="costObj.currencyId" placeholder="请选择单位">
+              <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PRICE_UNIT)" :key="type.value" :label="type.label" :value="type.value"></el-option>
+            </el-select>
           </el-form-item>
-            <el-form-item label="备注" prop="departmentName">
-              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
+        </el-row>
+
+        <el-form-item label="备注">
+          <el-input v-model="costObj.remark" type="textarea" rows="2" placeholder="请输入备注"></el-input>
         </el-form-item>
+
       </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitForm">提交</el-button>
-            <el-button plain @click="cancel">关闭</el-button>
+      <div slot="footer" class="operate-button">
+        <el-button type="primary" @click="submitEditForm">确定</el-button>
+        <el-button @click="cancelEditForm">取消</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
- import { userList } from "@/api/system/user"
-   import {DICT_TYPE} from  '@/utils/dict'
-   import {getTradeCityList} from '@/api/ecw/region'
+import { userList } from "@/api/system/user";
+import { DICT_TYPE } from "@/utils/dict";
+import { getTradeCityList } from "@/api/ecw/region";
+import { getPayableList, deletePayable, updatePayable } from "@/api/ecw/financial"
+import { getSupplierPage } from "@/api/ecw/supplier";
 
-   export default {
+export default {
   name: "Payable",
-   components: {
-
-   },
+  components: {},
   data() {
     return {
-         open:false,
-         showSearch:true,
+      open: false,
+      showSearch: true,
       loadings: false,
-         tradeCityList:[],
-         form:{},
-          creatorData:[],
-          list:[],
-          total:0,
-          dateType:[],
-          loading:'',
-          params:{
-            page:1,
-            rows:20,
+      tradeCityList: [],
+      costObj: {},
+      creatorData: [],
+      list: [],
+      total: 0,
+      dateType: [],
+      loading: "",
+      params: {
+        page: 1,
+        rows: 20,
       },
-          queryParams:{
-            page:1,
-            rows:20,
+      queryParams: {
+        page: 1,
+        rows: 20,
       },
-       }
+      allSupplier: [],
+    };
   },
-     computed:{
-       expoerCityList(){
-           return this.tradeCityList.filter(item => item.type == 2)
+  computed: {
+    expoerCityList() {
+      return this.tradeCityList.filter((item) => item.type == 2);
     },
-       importCityList(){
-           return this.tradeCityList.filter(item => item.type == 1)
+    importCityList() {
+      return this.tradeCityList.filter((item) => item.type == 1);
     },
   },
   created() {
-       let that = this
-       userList('salesman').then(res =>that.creatorData = res.data)
-       getTradeCityList().then(res => that.tradeCityList = res.data)
+    let that = this;
+    userList("salesman").then((res) => (that.creatorData = res.data));
+    getTradeCityList().then((res) => (that.tradeCityList = res.data));
+    this.getList()
+    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allSupplier = data.list;
+    });
   },
   methods: {
     /** 查询列表 */
     getList() {
       this.loading = true;
       // 处理查询参数
-         let params = {...this.queryParams};
-         this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+      let params = { ...this.queryParams };
+      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
       // 执行查询
-         getReceiptPage(params).then(response => {
+      getPayableList(params).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
@@ -187,28 +290,81 @@
     },
     /** 新增按钮操作 */
     handleAdd(id) {
-         return this.$router.push('creatPayment?consignorId='+id)
+      return this.$router.push("creatPayment?id=" + id);
     },
-       submitForm(){
+    submitEditForm() {
+      const params = {
+        invoiceNumber: this.costObj.invoiceNumber,
+        id: this.costObj.id,
+        stepsId: this.costObj.stepsId,
+        feeType: this.costObj.feeType,
+        supplierId: this.costObj.supplierId,
+        totalAmount: this.costObj.totalAmount,
+        currencyId: this.costObj.currencyId,
+        remark: this.costObj.remark
+      }
+      updatePayable(params).then(res => {
+        this.$modal.msgSuccess("修改成功");
+        this.getList();
         this.open = false;
+      })
     },
     /** 取消按钮 */
-       cancel() {
+    cancelEditForm() {
       this.open = false;
     },
+    editClick(row) {
+      row.stepsId = String(row.stepsId)
+      row.feeType = String(row.feeType)
+      row.currencyId = String(row.currencyId)
+      this.costObj = { ...row }
+      this.open = true;
     },
-   }
- </script>
+    deleteClick(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除该应付款?').then(function() {
+        return deletePayable(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+      // deletePayable({ id: row.id }).then(res => {
+      //   this.getList()
+      //   this.$modal.msgSuccess("删除成功");
+      // })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .small-padding ::v-deep .el-button {
 
- <style>
-   .card{
+  }
+  // 页面内元素弹窗form控件宽度设置
+  ::v-deep .el-form-item__content {
+    > div:not(.el-input-number) {
+      width: 100%;
+    }
+  }
+  .operate-button {
+    text-align: center;
+  }
+  .two-element {
+    display: flex;
+    > :last-child {
+      width: 100%;
+      margin-left: 10px;
+    }
+  }
+  .card {
     margin-top: 20px;
   }
-   .dialog-footer{
+  .dialog-footer {
     padding: 40px;
   }
-   .card-title{
+  .card-title {
     font-size: 18px;
     font-weight: bold;
   }
- </style>
+</style>

src/views/ecw/financial/paymentVoucher.vue

+<template>
+  <div class="app-container">
+    <div slot="header" class="card-title">付款单</div>
+    <!-- 搜索工作栏 -->
+    <el-card v-show="showSearch" class="card">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="100px"
+        class="card"
+      >
+        <el-row :span="24">
+          <el-form-item label="柜号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.receiptNo"
+              placeholder="请输入收款单号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="自编号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.receiptNo"
+              placeholder="请输入收款单号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="付款单号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.receiptNo"
+              placeholder="请输入收款单号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="供应商:">
+            <el-select
+              v-model="queryParams.supplierId"
+              placeholder="请选择供应商"
+            >
+              <el-option
+                v-for="supplier in allSupplier"
+                :key="supplier.id"
+                :label="supplier.companyZh"
+                :value="supplier.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态:">
+            <dict-selector :type="DICT_TYPE.ECW_RECEIPT_STATE" v-model="queryParams.state" />
+          </el-form-item>
+        </el-row>
+        <el-row :span="24">
+          <el-form-item label="业务员:">
+            <el-select v-model="form.salesmanId" placeholder="请选择业务员">
+              <el-option
+                v-for="item in creatorData"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间:">
+            <el-date-picker
+              v-model="queryParams.beginCreateTime"
+              type="datetimerange"
+              range-separator="到"
+              start-placeholder="请选择日期"
+              end-placeholder="请选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="发票状态:">
+            <el-select
+              v-model="queryParams.invoiceStatus"
+              placeholder="请选择是否开票"
+            >
+              <el-option label="未开票" value="0" />
+              <el-option label="已开票" value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">查找</el-button>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </el-card>
+    <el-table v-loading="loadings" :data="list" border class="card">
+      <el-table-column label="序号" align="center" prop="id" type="index">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="付款单号" align="center" prop="paymentNo" />
+      <el-table-column label="供应商" align="center" prop="supplierName" />
+      <el-table-column label="创建时间" align="center" prop="createTime">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后付款时间" align="center" prop="latestPayAt">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.latestPayAt) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="发票" align="center" prop="invoiceStatus">
+        <template slot-scope="scope">
+          <span>{{ scope.row.invoiceStatus === 0 ? '未开票' : '已开票' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <span>{{ stateMap(scope.row.state) }}</span>
+          <!-- <dict-tag
+            :type="DICT_TYPE.ECW_RECEIPT_STATE"
+            :value="scope.row.state"  
+          /> -->
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" @click="handleAdd(scope.row.id)" type="text">编辑</el-button>
+          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" type="text">审核</el-button>
+
+          <el-button v-if="scope.row.state == 2" size="mini" type="text">反审核</el-button>
+          <el-button v-if="scope.row.state == 2" size="mini" type="text">核销</el-button>
+
+          <el-button v-if="scope.row.state = 4" size="mini" type="text">反核销</el-button>
+          <!-- <el-button v-if="scope.row.state == 3" size="mini" type="text">开票</el-button> -->
+          
+          <el-button size="mini" type="text" @click="toprint(scope.row.id)">打印</el-button>
+          <el-button v-if="scope.row.state == 1 || scope.row.state == 3" size="mini" type="text">删除</el-button>
+          <!-- <el-button size="mini" type="text" @click="open = true">导出订单</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog
+      title="费用登记"
+      :visible.sync="open"
+      width="500px"
+      style="margin-top: 20vh !important"
+      append-to-body
+    >
+      <div
+        slot="header"
+        class="card-title"
+        style="border-bottom: 2px solid #f8f8f8"
+      >
+        <span>导出账单</span>
+        <i class="el-icon-close" @click="cancel"></i>
+      </div>
+      <div class="dialog-footer">
+        <el-button type="primary" style="width: 130px" @click="submitForm"
+          >国内账单</el-button
+        >
+        <el-button
+          plain
+          type="primary"
+          style="width: 130px; margin: 0"
+          @click="submitForm"
+          >Debite note</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { userList } from "@/api/system/user";
+import { DICT_TYPE } from "@/utils/dict";
+import CustomerSelector from "@/components/CustomerSelector";
+import { getSupplierPage } from "@/api/ecw/supplier";
+import { getPaymentList } from "@/api/ecw/financial"
+
+export default {
+  name: "paymentVoucher",
+  components: {
+    CustomerSelector,
+  },
+  data() {
+    return {
+      open: false,  
+      showSearch: true,
+      loadings: false,
+      form: {},
+      creatorData: [],
+      allSupplier: [],
+      list: [],
+      total: 0,
+      dateType: [],
+      loading: "",
+      // params: {
+      //   page: 1,
+      //   rows: 20,
+      // },
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 20,
+        dateType: null,
+        date: null,
+        originId: null,
+        destinationId: null,
+        transportId: null,
+        isCargoControl: null,
+        orderExceptionStatus: null,
+        orderExceptionType: null,
+        orderNo: null,
+        consignorId: null,
+        marks: null,
+        prodId: null,
+        productRecord: null,
+        followUpSalesmanId: null,
+      },
+    };
+  },
+  created() {
+    let that = this;
+    userList("salesman").then((res) => (that.creatorData = res.data));
+    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allSupplier = data.list;
+    });
+    this.getList()
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 处理查询参数
+      let params = { ...this.queryParams };
+      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
+      // 执行查询
+      getPaymentList(params).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1;
+      this.getList();
+    },
+    stateMap(state) {
+      switch (state) {
+        case 1:
+          return '待审核'
+        case 2:
+          return '已审核待核销'
+        case 3:
+          return '已核销'
+        case 4:
+          return '审批驳回'  
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd(id) {
+      return this.$router.push("creatCollection?id=" + id);
+    },
+    toprint(id) {
+      return this.$router.push("printVoucher?id=" + id);
+    },
+    submitForm() {
+      this.open = false;
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
+
+ <style>
+.card {
+  margin-top: 20px;
+}
+.dialog-footer {
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 160px;
+}
+.card-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>

src/views/ecw/financial/receivable.vue

@@ -2,170 +2,283 @@
   <div class="app-container">
     <div slot="header" class="card-title">待收款</div>
     <!-- 操作工具栏 -->
-      <el-row :gutter="10" class="mb8" style="margin-right: 60px;">
-          <el-button style="float: right;margin-left:10px" type="primary"  size="mini" @click="handleAdd(0)">新增收款单</el-button>
-          <el-button v-if="showSearch" style="float: right;" type="primary"  size="mini" icon="el-icon-s-unfold" @click="showSearch=!showSearch"></el-button>
-          <el-button v-else style="float: right;" type="primary"  size="mini" icon="el-icon-s-fold" @click="showSearch=!showSearch"></el-button>
+    <el-row :gutter="10" class="mb8" style="margin-right: 60px">
+      <el-button
+        style="float: right; margin-left: 10px"
+        type="primary"
+        size="mini"
+        @click="handleAdd(0)"
+        >新增收款单</el-button
+      >
+      <el-button
+        v-if="showSearch"
+        style="float: right"
+        type="primary"
+        size="mini"
+        icon="el-icon-s-unfold"
+        @click="showSearch = !showSearch"
+      ></el-button>
+      <el-button
+        v-else
+        style="float: right"
+        type="primary"
+        size="mini"
+        icon="el-icon-s-fold"
+        @click="showSearch = !showSearch"
+      ></el-button>
     </el-row>
     <!-- 搜索工作栏 -->
     <el-card v-show="showSearch">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="80px" class="card">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="80px"
+        class="card"
+      >
         <el-row>
           <el-form-item label="始发城市:">
-                 <el-select v-model="queryParams.departureId" placeholder="请选择始发城市">
-                     <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+            <el-select
+              v-model="queryParams.departureId"
+              placeholder="请选择始发城市"
+            >
+              <el-option
+                v-for="item in expoerCityList"
+                :label="item.titleZh"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="目的城市:">
-                 <el-select v-model="queryParams.objectiveId" placeholder="请选择目的城市">
-                  <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
+            <el-select
+              v-model="queryParams.objectiveId"
+              placeholder="请选择目的城市"
+            >
+              <el-option
+                v-for="item in importCityList"
+                :label="item.titleZh"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
-              <el-form-item label="运输方式:" >
-                  <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number" />
+          <el-form-item label="运输方式:">
+            <dict-selector
+              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
+              v-model="queryParams.transportId"
+              formatter="number"
+            />
           </el-form-item>
           <el-form-item label="控货:">
-                  <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.control" />
+            <dict-selector
+              :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
+              v-model="queryParams.isCargoControl"
+            />
           </el-form-item>
         </el-row>
         <el-row>
           <el-form-item label="订单状态:">
-                <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.control" />
+            <dict-selector
+              :type="DICT_TYPE.ORDER_STATUS"
+              v-model="queryParams.status"
+            />
           </el-form-item>
           <el-form-item label="报关方式:">
-                  <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="queryParams.customsType" />
+            <dict-selector
+              :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
+              v-model="queryParams.customsType"
+            />
           </el-form-item>
-              <el-form-item label="订单号:" >
-                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="订单号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.orderNo"
+              placeholder="请输入订单编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-              <el-form-item label="品名:" >
-                   <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入品名" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="品名:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.title"
+              placeholder="请输入品名"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
         </el-row>
         <el-row>
-              <el-form-item label="提单号:" >
-                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入提单号" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="提单号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.tidanNo"
+              placeholder="请输入提单号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-              <el-form-item label="唛头:" >
-                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入唛头" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="唛头:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.marks"
+              placeholder="请输入唛头"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-              <el-form-item label="费用类型:" >
-                  <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
+          <el-form-item label="费用类型:">
+            <dict-selector
+              :type="DICT_TYPE.FEE_TYPE"
+              v-model="queryParams.feeType"
+            ></dict-selector>
           </el-form-item>
-              <el-form-item label="发货人:" prop="consignorId">
-                  <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
+          <el-form-item label="发货人:">
+            <customer-selector
+              v-model="queryParams.consignorNameOrPhone"
+              @change="consignor = $event"
+            />
           </el-form-item>
-<!--              <el-form-item label="发货人:" >
+          <!--              <el-form-item label="发货人:" >
                   <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入发货人" clearable @keyup.enter.native="handleQuery"/>
               </el-form-item> -->
         </el-row>
         <el-row>
-              <el-form-item label="收货人:" >
-                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入收货人" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="收货人:">
+            <!-- <el-input style="max-width: 188px;" v-model="queryParams.consigneeNameOrPhone" placeholder="请输入收货人" clearable @keyup.enter.native="handleQuery"/> -->
+            <customer-selector
+              v-model="queryParams.consigneeNameOrPhone"
+              @change="consignor = $event"
+            />
           </el-form-item>
-             <el-form-item label="自编号:" >
-                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
+          <el-form-item label="自编号:">
+            <el-input
+              style="max-width: 188px"
+              v-model="queryParams.selfNo"
+              placeholder="请输入自编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
-              <el-form-item>
-                    <dict-selector :type="DICT_TYPE.BEGINTIME_TYPE_ENDTIME" v-model="queryParams.date"></dict-selector>
+          <el-form-item label="创建时间:">
+            <!-- <dict-selector :type="DICT_TYPE.BEGINTIME_TYPE_ENDTIME" v-model="queryParams.date"></dict-selector> -->
             <el-date-picker
               v-model="dateType"
               type="datetimerange"
               range-separator="-"
+              value-format="yyyy-MM-dd"
               start-placeholder="请选择日期"
-                      end-placeholder="请选择日期">
+              end-placeholder="请选择日期"
+            >
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-                <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              @click="handleQuery"
+            ></el-button>
           </el-form-item>
         </el-row>
       </el-form>
     </el-card>
     <el-table v-loading="loadings" :data="list" border class="card">
       <el-table-column label="订单号" align="center" prop="orderNo" />
-            <el-table-column label="唛头" align="center" prop="orderNo" />
-            <el-table-column label="品名" align="center" prop="orderNo" />
-            <el-table-column label="箱数" align="center" prop="sumNum" />
-            <el-table-column label="体积/重量" align="center" prop="weight" />
-            <el-table-column label="发货人" align="center" prop="orderNo" />
-            <el-table-column label="收货人" align="center" prop="orderNo" />
-            <el-table-column label="运输方式" align="center" prop="transportId">
+      <el-table-column label="唛头" align="center" prop="marks" />
+      <el-table-column label="品名" align="center" prop="title">
         <template slot-scope="scope">
-                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
+          {{ scope.row.titleZh + "(" + scope.row.titleEn + ")" }}
         </template>
       </el-table-column>
-            <el-table-column label="出货渠道" align="center" prop="channelName" />
-            <el-table-column label="始发地" align="center" prop="toDepartureId" />
-            <el-table-column label="目的地" align="center" prop="toDepartureId" />
-            <el-table-column label="商品信息" align="center" prop="toDepartureId" />
-             <el-table-column label="订单状态" align="center" prop="orderStatus">
+      <el-table-column label="箱数" align="center" prop="num" />
+      <el-table-column label="体积/重量" align="center" prop="weight" />
+      <el-table-column label="发货人" align="center" prop="consignorName" />
+      <el-table-column label="收货人" align="center" prop="consigneeName" />
+      <el-table-column label="订单状态" align="center" prop="status">
         <template slot-scope="scope">
-                  <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.orderStatus" />
+          <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="收入类型" align="center" prop="feeType">
         <template slot-scope="scope">
-                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
+          <dict-tag
+            :type="DICT_TYPE.FEE_TYPE"
+            :value="scope.row.feeType"
+          ></dict-tag>
         </template>
       </el-table-column>
+      <el-table-column label="单价美元" align="center" prop="unitPrice" />
       <el-table-column label="总金额美元" align="center" prop="totalAmount" />
-                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
-                      <el-button size="mini" type="text" @click="handleAdd(scope.row.consignorId)"
-                              >收款</el-button>
+          <el-button size="mini" type="text" @click="handleAdd(scope.row)"
+            >收款</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
-          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
-                         @pagination="getList"/>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
-  import { userList } from "@/api/system/user"
-  import {DICT_TYPE} from  '@/utils/dict'
-  import CustomerSelector from '@/components/CustomerSelector'
-  import {getTradeCityList} from '@/api/ecw/region'
+import { userList } from "@/api/system/user";
+import { DICT_TYPE } from "@/utils/dict";
+import CustomerSelector from "@/components/CustomerSelector";
+import { getTradeCityList } from "@/api/ecw/region";
+import { getReceivableList } from "@/api/ecw/financial";
 
-  export default {
+export default {
   name: "Receivable",
   components: {
-      CustomerSelector
+    CustomerSelector,
   },
   data() {
     return {
-         showSearch:true,
+      showSearch: true,
       loadings: false,
-         form:{},
-          creatorData:[],
-          list:[],
-          total:0,
-          dateType:[],
-          loading:'',
-          params:{
-            page:1,
-            rows:20,
+      form: {},
+      creatorData: [],
+      list: [],
+      total: 0,
+      dateType: [],
+      loading: "",
+      params: {
+        page: 1,
+        rows: 20,
       },
-          queryParams:{
-            page:1,
-            rows:20,
+      queryParams: {
+        page: 1,
+        rows: 20,
       },
-          tradeCityList:[],
-       }
+      tradeCityList: [],
+    };
   },
   created() {
-       let that = this
-       userList('salesman').then(res =>that.creatorData = res.data)
-       getTradeCityList().then(res => that.tradeCityList = res.data)
+    let that = this;
+    userList("salesman").then((res) => (that.creatorData = res.data));
+    getTradeCityList().then((res) => (that.tradeCityList = res.data));
+    this.getList();
   },
-     computed:{
-       expoerCityList(){
-           return this.tradeCityList.filter(item => item.type == 2)
+  computed: {
+    expoerCityList() {
+      return this.tradeCityList.filter((item) => item.type == 2);
     },
-       importCityList(){
-           return this.tradeCityList.filter(item => item.type == 1)
+    importCityList() {
+      return this.tradeCityList.filter((item) => item.type == 1);
     },
   },
   methods: {
@@ -173,10 +286,10 @@
     getList() {
       this.loading = true;
       // 处理查询参数
-         let params = {...this.queryParams};
-         this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
+      let params = { ...this.queryParams };
+      this.addBeginAndEndTime(params, this.dateType, "createTime");
       // 执行查询
-         getReceiptPage(params).then(response => {
+      getReceivableList(params).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
@@ -184,29 +297,28 @@
     },
     /** 搜索按钮操作 */
     handleQuery() {
-         this.queryParams.pageNo = 1;
+      this.queryParams.page = 1;
       this.getList();
     },
     /** 新增按钮操作 */
-       handleAdd(id) {
-         return this.$router.push('creatCollection?consignorId='+id)
+    handleAdd(row) {
+      // return this.$router.push("creatCollection?id=" + row.id, { params });
+      return this.$router.push({ path: "creatCollection?id=" + row.id, query: { data: JSON.stringify(row) } })
     },
-       submitForm(){
-
-       }
+    submitForm() {},
   },
-   }
- </script>
+};
+</script>
 
  <style>
-   .card{
+.card {
   margin-top: 20px;
-   }
-   .dialog-footer{
+}
+.dialog-footer {
   padding: 40px;
-   }
-   .card-title{
+}
+.card-title {
   font-size: 18px;
   font-weight: bold;
-   }
- </style>
+}
+</style>