对账分页

src/views/iosBasicData/SeafreightExportF/bills/assembly/DistributionBox/PackingBusiness.vue

@@ -116,11 +116,11 @@
                             @click="containerscommodityRemovefun(scope.row.id, scope.index)">删除
                         </el-button>
                     </template>
-                    <template slot-scope="{type,disabled}" slot="hscodeForm">
+                    <!-- <template slot-scope="{type,disabled}" slot="hscodeForm">
                         <dic-select style="width: 100%;" v-model="Detailform.hscode" placeholder="HS CODE" key="id"
                             label="hsCode" url="/blade-los/bcommodity/list" :filterable="true" :remote="true"
                             res="records" dataName="hsCode" @selectChange="dicChange('hscode', $event)"></dic-select>
-                    </template>
+                    </template> -->
                     <tempalte slot-scope="{type,disabled}" slot="packingLevelForm">
                         <dic-select v-model="Detailform.packingLevel" placeholder="包装等级" key="dictKey" label="dictValue"
                             url="/blade-system/dict-biz/dictionary?code=hazard_Level" :filterable="true"></dic-select>
@@ -163,7 +163,7 @@
                             label="dictValue" url="/blade-system/dict-biz/dictionary?code=dgCtrlTemperatureUnit_Unit"
                             :filterable="true"></dic-select>
                     </tempalte>
-                    <tempalte slot-scope="{type,disabled}" slot="hscode">
+                    <tempalte slot-scope="{type,disabled}" slot="hscodeForm">
                       <search-query
                         :datalist="commodityData"
                         :selectValue="Detailform.hscode"

src/views/iosBasicData/finstlbills/assembly/finstlbillsitems.vue

@@ -1,626 +1,698 @@
 <template>
-    <div>
-        <!--:row-style="{height:'20px',padding:'0px',fontSize:'12px'}"-->
-        <avue-crud :option="option" :data="tableData" id="out-table" ref="crud"
-            @selection-change="handleSelectionChange" :header-cell-style="tableHeaderCellStyle"
-            :row-class-name="rowClassName" :cell-style="cellStyle"
-            @resetColumn="resetColumn('crud', 'option', 'optionBack', 455)"
-            @saveColumn="saveColumn('crud', 'option', 'optionBack', 455)">
-            <template slot="menuLeft">
-                <slot name="menuLeft"></slot>
-            </template>
-            <tempalte slot="currentStlAmountRMB" slot-scope="{ row }">
-                <el-input-number v-if="brfalse" v-model="row.currentStlAmountRMB" @change="armbChange(row)"
-                    :controls="false" placeholder="请输入 本次对账CNY" size="mini" style="width: 100%;"
-                    :disabled="row.currentStlCurCode != 'CNY'"></el-input-number>
-                <span v-else>{{ row.currentStlAmountRMB }}</span>
-            </tempalte>
-            <tempalte slot="currentStlAmountUSD" slot-scope="{ row }">
-                <el-input-number v-if="brfalse" v-model="row.currentStlAmountUSD" @change="ausdChange(row)"
-                    :controls="false" placeholder="请输入 本次对账USD" size="mini" style="width: 100%;"
-                    :disabled="row.currentStlCurCode != 'USD'"></el-input-number>
-                <span v-else>{{ row.currentStlAmountUSD }}</span>
-            </tempalte>
-            <template slot="stlAmountDr" slot-scope="{ row }">
-                <span v-if="row.dc == 'D'">{{ row.stlAmountDr }}</span>
-                <span v-if="row.dc == 'C'">{{ row.stlAmountCr }}</span>
-            </template>
-            <template slot="stlAmountDrUSD" slot-scope="{ row }">
-                <span v-if="row.dc == 'D'">{{ row.stlAmountDrUSD }}</span>
-                <span v-if="row.dc == 'C'">{{ row.stlAmountCrUSD }}</span>
-            </template>
-            <template slot="remarkss" slot-scope="{ row }">
-                <el-input style="width: 100%;" v-model="row.remarkss" v-if="brfalse" size="mini" autocomplete="off"
-                    clearable placeholder="请输入 备注">
-                </el-input>
-                <span v-else>{{ row.remarkss }}</span>
-            </template>
-        </avue-crud>
-    </div>
+  <div>
+    <avue-crud
+      :option="option"
+      :data="pageData2"
+      id="out-table"
+      ref="crud"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="tableHeaderCellStyle"
+      :row-class-name="rowClassName"
+      :cell-style="cellStyle"
+      :page.sync="page2"
+      @size-change="sizeChange2"
+      @current-change="currentChange2"
+      @resetColumn="resetColumn('crud', 'option', 'optionBack', 455)"
+      @saveColumn="saveColumn('crud', 'option', 'optionBack', 455)"
+    >
+      <template slot="menuLeft">
+        <slot name="menuLeft"></slot>
+      </template>
+      <tempalte slot="currentStlAmountRMB" slot-scope="{ row }">
+        <el-input-number
+          v-if="brfalse"
+          v-model="row.currentStlAmountRMB"
+          @change="armbChange(row)"
+          :controls="false"
+          placeholder="请输入 本次对账CNY"
+          size="mini"
+          style="width: 100%;"
+          :disabled="row.currentStlCurCode != 'CNY'"
+        ></el-input-number>
+        <span v-else>{{ row.currentStlAmountRMB }}</span>
+      </tempalte>
+      <tempalte slot="currentStlAmountUSD" slot-scope="{ row }">
+        <el-input-number
+          v-if="brfalse"
+          v-model="row.currentStlAmountUSD"
+          @change="ausdChange(row)"
+          :controls="false"
+          placeholder="请输入 本次对账USD"
+          size="mini"
+          style="width: 100%;"
+          :disabled="row.currentStlCurCode != 'USD'"
+        ></el-input-number>
+        <span v-else>{{ row.currentStlAmountUSD }}</span>
+      </tempalte>
+      <template slot="stlAmountDr" slot-scope="{ row }">
+        <span v-if="row.dc == 'D'">{{ row.stlAmountDr }}</span>
+        <span v-if="row.dc == 'C'">{{ row.stlAmountCr }}</span>
+      </template>
+      <template slot="stlAmountDrUSD" slot-scope="{ row }">
+        <span v-if="row.dc == 'D'">{{ row.stlAmountDrUSD }}</span>
+        <span v-if="row.dc == 'C'">{{ row.stlAmountCrUSD }}</span>
+      </template>
+      <template slot="remarkss" slot-scope="{ row }">
+        <el-input style="width: 100%;" v-model="row.remarkss" v-if="brfalse" size="mini" autocomplete="off" clearable placeholder="请输入 备注">
+        </el-input>
+        <span v-else>{{ row.remarkss }}</span>
+      </template>
+    </avue-crud>
+  </div>
 </template>
 
 <script>
 import { getWorkDicts } from "@/api/system/dictbiz";
 import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
-import costDetails from "../assembly/costDetails.vue"
+import costDetails from "../assembly/costDetails.vue";
 import { getRateList } from "@/api/iosBasicData/rateManagement";
 import { feecenterSelectByAccNoList } from "@/api/iosBasicData/finstlbills";
 
 export default {
-    components: { SearchQuery, costDetails },
-    props: {
-        tableData: {
-            type: Array,
-            default: [],
-        },
-        brfalse: {
-            type: Boolean,
-            default: true,
-        },
-        handleSelectionData: {
-            type: Array,
-            default: [],
-        },
-        form: {
-            type: Object,
-            default: {},
-        },
-        editSave: {
-            type: Boolean,
-            default: false
+  components: { SearchQuery, costDetails },
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    },
+    brfalse: {
+      type: Boolean,
+      default: true
+    },
+    handleSelectionData: {
+      type: Array,
+      default: []
+    },
+    form: {
+      type: Object,
+      default: {}
+    },
+    editSave: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      ifInvoiceData: [], // 是否数据
+      invoicelosDara: [], // 发票
+      curCodeData: [], // 币种
+      option: {},
+      optionBack: {
+        height: "auto",
+        calcHeight: 30,
+        menuWidth: 60,
+        tip: false,
+        menu: false,
+        border: true,
+        addBtn: false,
+        viewBtn: false,
+        editBtn: false,
+        delBtn: false,
+        refreshBtn: false,
+        index: true,
+        selection: true,
+        align: "center",
+        column: [
+          {
+            label: "原业务编号",
+            prop: "billNo",
+            width: 120,
+            overHidden: true
+          },
+          {
+            label: "发票号",
+            prop: "invoiceNo",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "结算单位",
+            prop: "corpCnName",
+            width: 120,
+            overHidden: true
+          },
+          {
+            label: "MB/L NO",
+            prop: "mblno",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "本次对账CNY",
+            prop: "currentStlAmountRMB",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "本次对账USD",
+            prop: "currentStlAmountUSD",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "币种",
+            prop: "currentStlCurCode",
+            width: 60,
+            overHidden: true
+          },
+          {
+            label: "汇率",
+            prop: "currentStlExrate",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "对账",
+            prop: "isChecked",
+            width: 60,
+            overHidden: true,
+            type: "select",
+            dicData: [
+              {
+                label: "否",
+                value: 0
+              },
+              {
+                label: "是",
+                value: 1
+              }
+            ]
+          },
+          {
+            label: "签收",
+            prop: "isSignfor",
+            width: 60,
+            overHidden: true,
+            type: "select",
+            dicData: [
+              {
+                label: "否",
+                value: 0
+              },
+              {
+                label: "是",
+                value: 1
+              }
+            ]
+          },
+          {
+            label: "发票状态",
+            prop: "isInvoice",
+            width: 80,
+            type: "select",
+            dicData: [
+              {
+                label: "待开发票",
+                value: 1
+              },
+              {
+                label: "确认开票",
+                value: 2
+              },
+              {
+                label: "不开发票",
+                value: 3
+              }
+            ],
+            overHidden: true
+          },
+          {
+            label: "ETD",
+            prop: "etd",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "账单编号",
+            prop: "accBillNo",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "签收人",
+            prop: "signforName",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "签收日期",
+            prop: "signforDate",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "操作人",
+            prop: "operatorName",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "BOOKINGNO",
+            prop: "bookingNo",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "HB/L NO",
+            prop: "hblno",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "船名",
+            prop: "vesselCnName",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "航次",
+            prop: "voyageNo",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "发票CNY",
+            prop: "currentInvoiceAmountRMB",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "发票USD",
+            prop: "currentInvoiceAmountUSD",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "箱量",
+            prop: "quantityCntrTypesDescr",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "收付",
+            prop: "dc",
+            width: 60,
+            type: "select",
+            dicData: [
+              {
+                label: "收",
+                value: "D"
+              },
+              {
+                label: "付",
+                value: "C"
+              }
+            ],
+            overHidden: true
+          },
+          {
+            label: "应对账CNY",
+            prop: "unsettledAmountRMB",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "应对账USD",
+            prop: "unsettledAmountUSD",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "已对账CNY",
+            prop: "reconciliationAmount",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "已对账USD",
+            prop: "reconciliationAmountUsd",
+            width: 100,
+            overHidden: true
+          },
+          {
+            label: "已结算CNY",
+            prop: "stlAmountDr",
+            width: 90,
+            overHidden: true
+          },
+          {
+            label: "已结算USD",
+            prop: "stlAmountDrUSD",
+            width: 90,
+            overHidden: true
+          },
+          // {
+          //     label: "费用名称",
+          //     prop: "feeCnName",
+          //     width: 80,
+          //     overHidden: true
+          // },
+          {
+            label: "业务员",
+            prop: "srcCnName",
+            width: 80,
+            overHidden: true
+          },
+          {
+            label: "备注",
+            prop: "remarkss",
+            width: 120,
+            overHidden: true
+          }
+        ]
+      },
+      page2: {
+        currentPage: 1,
+        total: 0,
+        pageSize: 20,
+        pageSizes: [20, 50, 100, 200, 500]
+      },
+      pageData2: []
+    };
+  },
+  async created() {
+    this.option = await this.getColumnData(this.getColumnName(455), this.optionBack);
+    this.isSignforWorkDicts();
+    this.invoicelosWorkDictsfun();
+  },
+  methods: {
+    sizeChange2(val) {
+      this.page2.currentPage = 1;
+      this.page2.pageSize = val;
+      this.getList2();
+    },
+    currentChange2(val) {
+      this.page2.currentPage = val;
+      this.getList2();
+    },
+    getList2() {
+      this.page2.total = this.tableData.length;
+      const start = (this.page2.currentPage - 1) * this.page2.pageSize;
+      const end = start + this.page2.pageSize;
+      this.pageData2 = this.tableData.slice(start, end);
+    },
+    armbChange(row) {
+      if (Number(row.amount - row.reconciliationAmount) > 0) {
+        if (Number(row.currentStlAmountRMB) < 0) {
+          row.currentStlAmountRMB = 0;
+          return this.$message.error("本次对账金额不能输入负数");
+        }
+        if (Number(row.currentStlAmountRMB) > Number(row.amount - row.reconciliationAmount)) {
+          row.currentStlAmountRMB = 0;
+          return this.$message.error("本次对账金额不能超过未对账金额");
+        }
+      }
+      if (Number(row.amount - row.reconciliationAmount) < 0) {
+        if (row.currentStlAmountRMB >= 0) {
+          row.currentStlAmountRMB = Number(row.amount - row.reconciliationAmount);
+          return this.$message.error("本次对账金额不能输入非负数");
+        }
+        if (Number(row.currentStlAmountRMB) < Number(row.amount - row.reconciliationAmount)) {
+          row.currentStlAmountRMB = Number(row.amount - row.reconciliationAmount);
+          return this.$message.error("本次对账金额不能超过未对账金额");
         }
+      }
     },
-    data() {
-        return {
-            ifInvoiceData: [], // 是否数据
-            invoicelosDara: [],// 发票
-            curCodeData: [], // 币种
-            option: {},
-            optionBack: {
-                height: 'auto',
-                calcHeight: 30,
-                menuWidth: 60,
-                tip: false,
-                menu: false,
-                border: true,
-                addBtn: false,
-                viewBtn: false,
-                editBtn: false,
-                delBtn: false,
-                refreshBtn: false,
-                index: true,
-                selection: true,
-                align: 'center',
-                column: [
-                    {
-                        label: "原业务编号",
-                        prop: "billNo",
-                        width: 120,
-                        overHidden: true
-                    },
-                    {
-                        label: "发票号",
-                        prop: "invoiceNo",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "结算单位",
-                        prop: "corpCnName",
-                        width: 120,
-                        overHidden: true
-                    },
-                    {
-                        label: "MB/L NO",
-                        prop: "mblno",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "本次对账CNY",
-                        prop: "currentStlAmountRMB",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "本次对账USD",
-                        prop: "currentStlAmountUSD",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "币种",
-                        prop: "currentStlCurCode",
-                        width: 60,
-                        overHidden: true
-                    },
-                    {
-                        label: "汇率",
-                        prop: "currentStlExrate",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "对账",
-                        prop: "isChecked",
-                        width: 60,
-                        overHidden: true,
-                        type: 'select',
-                        dicData: [{
-                            label: '否',
-                            value: 0
-                        }, {
-                            label: '是',
-                            value: 1
-                        }],
-                    },
-                    {
-                        label: "签收",
-                        prop: "isSignfor",
-                        width: 60,
-                        overHidden: true,
-                        type: 'select',
-                        dicData: [{
-                            label: '否',
-                            value: 0
-                        }, {
-                            label: '是',
-                            value: 1
-                        }],
-                    },
-                    {
-                        label: "发票状态",
-                        prop: "isInvoice",
-                        width: 80,
-                        type: 'select',
-                        dicData: [{
-                            label: '待开发票',
-                            value: 1
-                        }, {
-                            label: '确认开票',
-                            value: 2
-                        }, {
-                            label: '不开发票',
-                            value: 3
-                        }],
-                        overHidden: true,
-                    }, {
-                        label: "ETD",
-                        prop: "etd",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "账单编号",
-                        prop: "accBillNo",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "签收人",
-                        prop: "signforName",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "签收日期",
-                        prop: "signforDate",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "操作人",
-                        prop: "operatorName",
-                        width: 80,
-                        overHidden: true
-                    }, {
-                        label: "BOOKINGNO",
-                        prop: "bookingNo",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "HB/L NO",
-                        prop: "hblno",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "船名",
-                        prop: "vesselCnName",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "航次",
-                        prop: "voyageNo",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "发票CNY",
-                        prop: "currentInvoiceAmountRMB",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "发票USD",
-                        prop: "currentInvoiceAmountUSD",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "箱量",
-                        prop: "quantityCntrTypesDescr",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "收付",
-                        prop: "dc",
-                        width: 60,
-                        type: 'select',
-                        dicData: [{
-                            label: '收',
-                            value: 'D'
-                        }, {
-                            label: '付',
-                            value: 'C'
-                        }],
-                        overHidden: true,
-                    },
-                    {
-                        label: "应对账CNY",
-                        prop: "unsettledAmountRMB",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "应对账USD",
-                        prop: "unsettledAmountUSD",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "已对账CNY",
-                        prop: "reconciliationAmount",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "已对账USD",
-                        prop: "reconciliationAmountUsd",
-                        width: 100,
-                        overHidden: true
-                    },
-                    {
-                        label: "已结算CNY",
-                        prop: "stlAmountDr",
-                        width: 90,
-                        overHidden: true
-                    },
-                    {
-                        label: "已结算USD",
-                        prop: "stlAmountDrUSD",
-                        width: 90,
-                        overHidden: true
-                    },
-                    // {
-                    //     label: "费用名称",
-                    //     prop: "feeCnName",
-                    //     width: 80,
-                    //     overHidden: true
-                    // },
-                    {
-                        label: "业务员",
-                        prop: "srcCnName",
-                        width: 80,
-                        overHidden: true
-                    },
-                    {
-                        label: "备注",
-                        prop: "remarkss",
-                        width: 120,
-                        overHidden: true
-                    }
-                ]
-            },
+    ausdChange(row) {
+      if (Number(row.amount - row.reconciliationAmount) > 0) {
+        if (Number(row.currentStlAmountUSD) < 0) {
+          row.currentStlAmountUSD = 0;
+          return this.$message.error("本次对账金额不能输入负数");
+        }
+        if (Number(row.currentStlAmountUSD) > Number(row.amount - row.reconciliationAmount)) {
+          row.currentStlAmountUSD = 0;
+          return this.$message.error("本次对账金额不能超过未对账金额");
+        }
+      }
+      if (Number(row.amount - row.reconciliationAmount) < 0) {
+        if (row.currentStlAmountUSD >= 0) {
+          row.currentStlAmountUSD = Number(row.amount - row.reconciliationAmount);
+          return this.$message.error("本次对账金额不能输入非负数");
         }
+        if (Number(row.currentStlAmountUSD) < Number(row.amount - row.reconciliationAmount)) {
+          row.currentStlAmountUSD = Number(row.amount - row.reconciliationAmount);
+          return this.$message.error("本次对账金额不能超过未对账金额");
+        }
+      }
     },
-    async created() {
-        this.option = await this.getColumnData(this.getColumnName(455), this.optionBack);
-        this.isSignforWorkDicts()
-        this.invoicelosWorkDictsfun()
+    // 币别选择监听
+    corpChange(value, row) {
+      for (let item of this.curCodeData) {
+        if (item.code == value) {
+          this.$set(row, "currentStlCurCode", value);
+          if (value == "CNY") {
+            delete row.currentStlAmountUSD;
+            this.$set(row, "currentStlAmountRMB", row.unsettledAmount);
+          } else {
+            delete row.currentStlAmountRMB;
+            this.$set(row, "currentStlAmountUSD", row.unsettledAmount);
+          }
+        }
+      }
+    },
+    // 展开行或者关闭
+    expandChange(row, expandedRows) {
+      let accBillId = "";
+      if (this.form.id) {
+        accBillId = row.accBillId;
+      } else {
+        accBillId = row.id;
+      }
+      feecenterSelectByAccNoList({ accBillId }).then(res => {
+        row.costDate = res.data.data.map(item => {
+          if (item.curCode == "CNY") {
+            this.$set(item, "rmbAmount", item.amount);
+            this.$set(item, "usdAmount", "");
+            this.$set(item, "rmbAmountNet", item.amountNet);
+            this.$set(item, "usdAmountNet", "");
+          } else {
+            this.$set(item, "usdAmount", item.amount);
+            this.$set(item, "rmbAmount", "");
+            this.$set(item, "usdAmountNet", item.amountNet);
+            this.$set(item, "rmbAmountNet", "");
+          }
+          return item;
+        });
+      });
+    },
+    // 接口请求
+    // 是否接口
+    isSignforWorkDicts() {
+      getWorkDicts("ifInvoice").then(res => {
+        this.ifInvoiceData = res.data.data;
+      });
+    },
+    // 发票
+    invoicelosWorkDictsfun() {
+      getWorkDicts("reconciliation_invoice_los").then(res => {
+        this.invoicelosDara = res.data.data;
+      });
+    },
+    // 获取币别数据
+    getRateListfun(cnName) {
+      getRateList({ current: 1, size: 10, cnName }).then(res => {
+        this.curCodeData = res.data.data.records;
+      });
     },
-    methods: {
-        armbChange(row) {
-            if (Number(row.amount - row.reconciliationAmount) > 0) {
-                if (Number(row.currentStlAmountRMB) < 0) {
-                    row.currentStlAmountRMB = 0
-                    return this.$message.error("本次对账金额不能输入负数");
-                }
-                if (Number(row.currentStlAmountRMB) > Number(row.amount - row.reconciliationAmount)) {
-                    row.currentStlAmountRMB = 0
-                    return this.$message.error("本次对账金额不能超过未对账金额");
-                }
-            }
-            if (Number(row.amount - row.reconciliationAmount) < 0) {
-                if (row.currentStlAmountRMB >= 0) {
-                    row.currentStlAmountRMB = Number(row.amount - row.reconciliationAmount)
-                    return this.$message.error("本次对账金额不能输入非负数");
-                }
-                if (Number(row.currentStlAmountRMB) < Number(row.amount - row.reconciliationAmount)) {
-                    row.currentStlAmountRMB = Number(row.amount - row.reconciliationAmount)
-                    return this.$message.error("本次对账金额不能超过未对账金额");
-                }
-            }
-
-        },
-        ausdChange(row) {
-            if (Number(row.amount - row.reconciliationAmount) > 0) {
-                if (Number(row.currentStlAmountUSD) < 0) {
-                    row.currentStlAmountUSD = 0
-                    return this.$message.error("本次对账金额不能输入负数");
-                }
-                if (Number(row.currentStlAmountUSD) > Number(row.amount - row.reconciliationAmount)) {
-                    row.currentStlAmountUSD = 0
-                    return this.$message.error("本次对账金额不能超过未对账金额");
-                }
-            }
-            if (Number(row.amount - row.reconciliationAmount) < 0) {
-                if (row.currentStlAmountUSD >= 0) {
-                    row.currentStlAmountUSD = Number(row.amount - row.reconciliationAmount)
-                    return this.$message.error("本次对账金额不能输入非负数");
-                }
-                if (Number(row.currentStlAmountUSD) < Number(row.amount - row.reconciliationAmount)) {
-                    row.currentStlAmountUSD = Number(row.amount - row.reconciliationAmount)
-                    return this.$message.error("本次对账金额不能超过未对账金额");
-                }
-            }
-
-        },
-        // 币别选择监听
-        corpChange(value, row) {
-            for (let item of this.curCodeData) {
-                if (item.code == value) {
-                    this.$set(row, 'currentStlCurCode', value)
-                    if (value == 'CNY') {
-                        delete row.currentStlAmountUSD
-                        this.$set(row, 'currentStlAmountRMB', row.unsettledAmount)
-                    } else {
-                        delete row.currentStlAmountRMB
-                        this.$set(row, 'currentStlAmountUSD', row.unsettledAmount)
-                    }
-                }
-            }
-        },
-        // 展开行或者关闭
-        expandChange(row, expandedRows) {
-            let accBillId = ''
-            if (this.form.id) {
-                accBillId = row.accBillId
-            } else {
-                accBillId = row.id
-            }
-            feecenterSelectByAccNoList({ accBillId }).then(res => {
-                row.costDate = res.data.data.map(item => {
-                    if (item.curCode == 'CNY') {
-                        this.$set(item, 'rmbAmount', item.amount)
-                        this.$set(item, 'usdAmount', '')
-                        this.$set(item, 'rmbAmountNet', item.amountNet)
-                        this.$set(item, 'usdAmountNet', '')
-                    } else {
-                        this.$set(item, 'usdAmount', item.amount)
-                        this.$set(item, 'rmbAmount', '')
-                        this.$set(item, 'usdAmountNet', item.amountNet)
-                        this.$set(item, 'rmbAmountNet', '')
-                    }
-                    return item
-                })
-            })
-        },
-        // 接口请求
-        // 是否接口
-        isSignforWorkDicts() {
-            getWorkDicts('ifInvoice').then(res => {
-                this.ifInvoiceData = res.data.data
-            })
-        },
-        // 发票
-        invoicelosWorkDictsfun() {
-            getWorkDicts('reconciliation_invoice_los').then(res => {
-                this.invoicelosDara = res.data.data
-            })
-        },
-        // 获取币别数据
-        getRateListfun(cnName) {
-            getRateList({ current: 1, size: 10, cnName }).then(res => {
-                this.curCodeData = res.data.data.records
-            })
-        },
 
-        // 表头样式
-        tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
-            return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
-        },
+    // 表头样式
+    tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
+      return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff";
+    },
 
-        // Element UI 表格点击选中行/取消选中 快捷多选 以及快捷连续多选，高亮选中行 ——-------------------------------------——
-        // 多选选择的数据
-        handleSelectionChange(arr) {
-            // // 全选
-            // if (arr.length == this.tableData.length) {
-            //     for (let item of arr) {
-            //         this.$set(item,'tableSelect',1)
-            //     }
-            // }
-            // // 清除全选
-            // if (arr.length == 0) {
-            //     for (let item of this.tableData) {
-            //         this.$set(item,'tableSelect',0)
-            //     }
-            // }
-            this.$emit('handleSelectionChange', arr)
-        },
-        // // 多选
-        // toggleSelection(rows){
-        //     if (rows) {
-        //         rows.forEach(row => {
-        //             this.$refs.tableRef.toggleRowSelection(row);
-        //         });
-        //     } else {
-        //         this.$refs.tableRef.clearSelection();
-        //     }
-        // },
-        // 监听点击表格事件
-        rowClick(row, column, event) {
-            let refsElTable = this.$refs.tableRef; // 获取表格对象
-            if (this.CtrlDown) {
-                refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
-                return;
-            }
-            if (this.shiftOrAltDown && this.handleSelectionData.length > 0) {
-                // 通过rowIndex判断已选择的行中最上面和最下面的是哪行，再对比按住shift/alt点击的当前行得到新的最上面和最下面的行，把这两行中间的行进行循环选中。
-                let topAndBottom = this.getTopAndBottom(row, this.bottomSelectionRow, this.topSelectionRow);
-                refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
-                for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) { //选中两行之间的所有行
-                    refsElTable.toggleRowSelection(this.tableData[index], true);
-                }
-            } else {
-                let findRow = this.handleSelectionData.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
-                //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
-                if (findRow && this.handleSelectionData.length === 1) {
-                    refsElTable.toggleRowSelection(row, false);
-                    return;
-                }
-                // refsElTable.clearSelection(); // 清空之前选择的数据(如果放开，选择之前会变成单选)
-                refsElTable.toggleRowSelection(row); // 调用选中行方法
-            }
-        },
-        // 行的 style 的回调方法
-        rowStyle({ row, rowIndex }) {
-            // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
-            // object: 要添加或者修改属性的目标对象；prop: 要定义或修改属性的名称；descript: 是一个对象，里面是我们上述的对象属性的特性；
-            Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
-                value: rowIndex, // 设置age的值，不设置的话默认为undefined
-                writable: true, // 表示属性的值true可以修改,false不可以被修改
-                enumerable: false, // 设置为false表示不能通过 for-in 循环返回
-                // configurable: false, // configurable 设置为 false，意味着这个属性不能从对象上删除
-            })
-        },
-        keyDown(event) {
-            let key = event.keyCode;
-            if (key == 17) this.CtrlDown = true;
-            if (key == 16 || key == 18) this.shiftOrAltDown = true;
-        },
-        keyUp(event) {
-            let key = event.keyCode;
-            if (key == 17) this.CtrlDown = false;
-            if (key == 16 || key == 18) this.shiftOrAltDown = false;
-        },
-        // 文章说明 https://www.jianshu.com/p/48f2c522d2a2
-        getTopAndBottom(row, bottom, top) {
-            let n = row.rowIndex,
-                mx = bottom.rowIndex,
-                mi = top.rowIndex;
-            if (n > mx) {
-                return {
-                    top: mi,
-                    bottom: n
-                };
-            } else if (n < mx && n > mi) {
-                return {
-                    top: mi,
-                    bottom: n
-                };
-            } else if (n < mi) {
-                return {
-                    top: n,
-                    bottom: mx
-                };
-            } else if (n == mi || n == mx) {
-                return {
-                    top: mi,
-                    bottom: mx
-                };
-            }
-        },
-        // 给选中行加上current-row这个class类，所以要使用row-class-name这个属性（其实给每一行添加rowIndex也可以用这个属性），
-        // 判断方式也是通过判断rowIndex对比
-        rowClassName({ row, rowIndex }) {
-            let rowName = "",
-                findRow = this.handleSelectionData.find(c => {
-                    return c.rowIndex === row.rowIndex
-                });
-            if (findRow) {
-                rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
-            }
-            return rowName; //也可以再加上其他类名 如果有需求的话
-        },
-        // 收付展示不一样的颜色
-        cellStyle({ row, rowIndex, columnIndex }) {
-            let rowStyle = ''
-            if (row.dc == 'D') {
-                rowStyle = 'color:#8cb24b;'
-            } else if (row.dc == 'C') {
-                rowStyle = 'color:#F56C6C;'
-            }
-            return rowStyle + 'padding:0px;fontSize:12px'
-        },
-        //自定义列保存
-        async saveColumn(ref, option, optionBack, code) {
-            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
-            if (inSave) {
-                this.$message.success("保存成功");
-                //关闭窗口
-                this.$refs[ref].$refs.dialogColumn.columnBox = false;
-            }
-        },
-        //自定义列重置
-        async resetColumn(ref, option, optionBack, code) {
-            this[option] = this[optionBack];
-            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
-            if (inSave) {
-                this.$message.success("重置成功");
-                this.$refs[ref].$refs.dialogColumn.columnBox = false;
-            }
-        },
+    // Element UI 表格点击选中行/取消选中 快捷多选 以及快捷连续多选，高亮选中行 ——-------------------------------------——
+    // 多选选择的数据
+    handleSelectionChange(arr) {
+      // // 全选
+      // if (arr.length == this.tableData.length) {
+      //     for (let item of arr) {
+      //         this.$set(item,'tableSelect',1)
+      //     }
+      // }
+      // // 清除全选
+      // if (arr.length == 0) {
+      //     for (let item of this.tableData) {
+      //         this.$set(item,'tableSelect',0)
+      //     }
+      // }
+      this.$emit("handleSelectionChange", arr);
     },
-    mounted() {
-        // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
-        addEventListener("keydown", this.keyDown, false);
-        addEventListener("keyup", this.keyUp, false);
+    // // 多选
+    // toggleSelection(rows){
+    //     if (rows) {
+    //         rows.forEach(row => {
+    //             this.$refs.tableRef.toggleRowSelection(row);
+    //         });
+    //     } else {
+    //         this.$refs.tableRef.clearSelection();
+    //     }
+    // },
+    // 监听点击表格事件
+    rowClick(row, column, event) {
+      let refsElTable = this.$refs.tableRef; // 获取表格对象
+      if (this.CtrlDown) {
+        refsElTable.toggleRowSelection(row); // ctrl多选 如果点击两次同样会取消选中
+        return;
+      }
+      if (this.shiftOrAltDown && this.handleSelectionData.length > 0) {
+        // 通过rowIndex判断已选择的行中最上面和最下面的是哪行，再对比按住shift/alt点击的当前行得到新的最上面和最下面的行，把这两行中间的行进行循环选中。
+        let topAndBottom = this.getTopAndBottom(row, this.bottomSelectionRow, this.topSelectionRow);
+        refsElTable.clearSelection(); //先清空 不然会导致在这两行中间之外的行状态不变
+        for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) {
+          //选中两行之间的所有行
+          refsElTable.toggleRowSelection(this.tableData[index], true);
+        }
+      } else {
+        let findRow = this.handleSelectionData.find(c => c.rowIndex == row.rowIndex); //找出当前选中行
+        //如果只有一行且点击的也是这一行则取消选择 否则清空再选中当前点击行
+        if (findRow && this.handleSelectionData.length === 1) {
+          refsElTable.toggleRowSelection(row, false);
+          return;
+        }
+        // refsElTable.clearSelection(); // 清空之前选择的数据(如果放开，选择之前会变成单选)
+        refsElTable.toggleRowSelection(row); // 调用选中行方法
+      }
     },
-    beforeDestroy() { //解绑
-        removeEventListener("keydown", this.keyDown);
-        removeEventListener("keyup", this.keyUp);
+    // 行的 style 的回调方法
+    rowStyle({ row, rowIndex }) {
+      // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
+      // object: 要添加或者修改属性的目标对象；prop: 要定义或修改属性的名称；descript: 是一个对象，里面是我们上述的对象属性的特性；
+      Object.defineProperty(row, "rowIndex", {
+        //给每一行添加不可枚举属性rowIndex来标识当前行
+        value: rowIndex, // 设置age的值，不设置的话默认为undefined
+        writable: true, // 表示属性的值true可以修改,false不可以被修改
+        enumerable: false // 设置为false表示不能通过 for-in 循环返回
+        // configurable: false, // configurable 设置为 false，意味着这个属性不能从对象上删除
+      });
     },
-    computed: { //实时得到最上行和最下行
-        bottomSelectionRow() {
-            if (this.handleSelectionData.length == 0) return null;
-            return this.handleSelectionData.reduce((start, end) => {
-                return start.rowIndex > end.rowIndex ? start : end;
-            });
-        },
-        topSelectionRow() {
-            if (this.handleSelectionData.length == 0) return null;
-            return this.handleSelectionData.reduce((start, end) => {
-                return start.rowIndex < end.rowIndex ? start : end;
-            });
-        }
+    keyDown(event) {
+      let key = event.keyCode;
+      if (key == 17) this.CtrlDown = true;
+      if (key == 16 || key == 18) this.shiftOrAltDown = true;
     },
-
-}
+    keyUp(event) {
+      let key = event.keyCode;
+      if (key == 17) this.CtrlDown = false;
+      if (key == 16 || key == 18) this.shiftOrAltDown = false;
+    },
+    // 文章说明 https://www.jianshu.com/p/48f2c522d2a2
+    getTopAndBottom(row, bottom, top) {
+      let n = row.rowIndex,
+        mx = bottom.rowIndex,
+        mi = top.rowIndex;
+      if (n > mx) {
+        return {
+          top: mi,
+          bottom: n
+        };
+      } else if (n < mx && n > mi) {
+        return {
+          top: mi,
+          bottom: n
+        };
+      } else if (n < mi) {
+        return {
+          top: n,
+          bottom: mx
+        };
+      } else if (n == mi || n == mx) {
+        return {
+          top: mi,
+          bottom: mx
+        };
+      }
+    },
+    // 给选中行加上current-row这个class类，所以要使用row-class-name这个属性（其实给每一行添加rowIndex也可以用这个属性），
+    // 判断方式也是通过判断rowIndex对比
+    rowClassName({ row, rowIndex }) {
+      let rowName = "",
+        findRow = this.handleSelectionData.find(c => {
+          return c.rowIndex === row.rowIndex;
+        });
+      if (findRow) {
+        rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
+      }
+      return rowName; //也可以再加上其他类名 如果有需求的话
+    },
+    // 收付展示不一样的颜色
+    cellStyle({ row, rowIndex, columnIndex }) {
+      let rowStyle = "";
+      if (row.dc == "D") {
+        rowStyle = "color:#8cb24b;";
+      } else if (row.dc == "C") {
+        rowStyle = "color:#F56C6C;";
+      }
+      return rowStyle + "padding:0px;fontSize:12px";
+    },
+    //自定义列保存
+    async saveColumn(ref, option, optionBack, code) {
+      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
+      if (inSave) {
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs[ref].$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //自定义列重置
+    async resetColumn(ref, option, optionBack, code) {
+      this[option] = this[optionBack];
+      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
+      if (inSave) {
+        this.$message.success("重置成功");
+        this.$refs[ref].$refs.dialogColumn.columnBox = false;
+      }
+    }
+  },
+  mounted() {
+    // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
+    addEventListener("keydown", this.keyDown, false);
+    addEventListener("keyup", this.keyUp, false);
+  },
+  beforeDestroy() {
+    //解绑
+    removeEventListener("keydown", this.keyDown);
+    removeEventListener("keyup", this.keyUp);
+  },
+  watch: {
+    tableData: {
+      // 执行方法
+      handler(oldValue, newValue) {
+        this.page2.currentPage = 1;
+        this.pageData2 = [];
+        this.getList2();
+      },
+      deep: true, // 深度监听
+      immediate: true // 第一次改变就执行
+    }
+  },
+  computed: {
+    //实时得到最上行和最下行
+    bottomSelectionRow() {
+      if (this.handleSelectionData.length == 0) return null;
+      return this.handleSelectionData.reduce((start, end) => {
+        return start.rowIndex > end.rowIndex ? start : end;
+      });
+    },
+    topSelectionRow() {
+      if (this.handleSelectionData.length == 0) return null;
+      return this.handleSelectionData.reduce((start, end) => {
+        return start.rowIndex < end.rowIndex ? start : end;
+      });
+    }
+  }
+};
 </script>
 
 <style scoped>
 .textHide {
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 ::v-deep .current-row {
-    background: #ecf3ff;
+  background: #ecf3ff;
 }
 </style>