费用明细新加分单号

成本模板导入 用系统参数区分新旧接口
代理设置加缓存
代理箱 新增明细默认类型 代理箱
所属单位 修改成下拉
结算中心 画财务信息模块
转单新加laoding

src/api/iosBasicData/bills.js

@@ -380,6 +380,14 @@ export const costImportBatch = (data) => {
     params: data
   })
 }
+// 海运费成本导入
+export const agencyCostImportBatch = (data) => {
+  return request({
+    url: '/api/blade-los/agencyfeesetting/costImportBatch',
+    method: 'get',
+    params: data
+  })
+}
 export const increaseReinsurancePolicyTeu = (ids,id,data) => {
   return request({
     url: '/api/blade-los/bills/increaseReinsurancePolicyTeu',

src/components/extractionCost/main.vue

@@ -1,259 +1,281 @@
 <template>
-    <!-- 中文下拉 -->
-    <div>
-        <el-dialog append-to-body title="提取成本" :visible.sync="dialogVisible" width="60%">
-            <span>
-                <el-row>
-                    <el-col :span="14">
-                        <avue-crud :data="dataList" :option="option" @current-row-change="handleRowClick"></avue-crud>
-                    </el-col>
-                    <el-col :span="9" :offset="1">
-                        <avue-crud :data="detailsList" :option="templateOption">
-                            <template slot="feeName" slot-scope="{ row }">
-                                <span>
-                                    海运费
-                                </span>
-                            </template>
-                        </avue-crud>
-                    </el-col>
-                </el-row>
-            </span>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
-                <el-button type="primary" @click="submit" size="mini">导 入</el-button>
-            </span>
-        </el-dialog>
-    </div>
+  <!-- 中文下拉 -->
+  <div>
+    <el-dialog append-to-body title="提取成本" :visible.sync="dialogVisible" width="60%">
+      <span>
+        <el-row>
+          <el-col :span="14">
+            <avue-crud :data="dataList" :option="option" @current-row-change="handleRowClick"></avue-crud>
+          </el-col>
+          <el-col :span="9" :offset="1">
+            <avue-crud :data="detailsList" :option="templateOption">
+              <template slot="feeName" slot-scope="{ row }">
+                <span>
+                  海运费
+                </span>
+              </template>
+            </avue-crud>
+          </el-col>
+        </el-row>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+        <el-button type="primary" @click="submit" size="mini">导 入</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { extractCost, costImportBatch } from "@/api/iosBasicData/bills";
+import { extractCost, costImportBatch, agencyCostImportBatch } from "@/api/iosBasicData/bills";
+import { isProcurement } from "@/api/basicData/configuration";
 export default {
-    data() {
-        return {
-            billsIds: null,
-            selectedRowIndex: null,
-            dialogVisible: false,
-            treeOption: {
-                nodeKey: "id",
-                addBtn: false,
-                menu: false,
-                size: "small",
-                props: {
-                    labelText: "标题",
-                    label: "cnName",
-                    value: "value",
-                    children: "children"
-                }
-            },
-            templateId: null,
-            treeData: [],
-            dataList: [],
-            detailsList: [],
-            templateOption: {
-                height: 500,
-                menu: false,
-                addBtn: false,
-                editBtn: false,
-                delBtn: false,
-                viewBtn: false,
-                header: false,
-                // index: true,
-                tip: false,
-                // selection: true,
-                column: [
-                    {
-                        label: '箱型',
-                        prop: 'boxType',
-                        overHidden: true,
-                    },
-                    {
-                        label: '币别',
-                        prop: 'curCode',
-                        overHidden: true,
-                    },
-                    {
-                        label: '费用名称',
-                        prop: 'feeName',
-                        overHidden: true,
-                    },
-                    {
-                        label: '销售价',
-                        prop: 'salesPrice',
-                        overHidden: true,
-                    },
-                    {
-                        label: '成本价',
-                        prop: 'costPrice',
-                        overHidden: true,
-                    },
-                    {
-                        label: '金额',
-                        prop: 'oceanFreight',
-                        overHidden: true,
-                    }
-                ]
-            },
-            option: {
-                height: 500,
-                menu: false,
-                addBtn: false,
-                editBtn: false,
-                delBtn: false,
-                viewBtn: false,
-                header: false,
-                index: true,
-                tip: false,
-                // selection: true,
-                align:'center',
-                highlightCurrentRow: true,
-                column: [
-                    {
-                        label: '系统号',
-                        prop: 'businessNo',
-                        width:140,
-                        overHidden: true,
-                    },
-                         {
-                        label: '承运人',
-                        prop: 'shippingCompanyCname',
-                        width:140,
-                        overHidden: true,
-                    },
-                    {
-                        label: '运输条款',
-                        prop: 'transportationTerms',
-                        overHidden: true,
-                    },
-                    {
-                        label: '舱位类型',
-                        prop: 'cabinType',
-                        overHidden: true,
-                    },
-                    {
-                        label: '航班类型',
-                        prop: 'flightType',
-                        overHidden: true,
-                    },
-                    {
-                        label: '转船类型',
-                        prop: 'changeShipType',
-                        overHidden: true,
-                    },
-                    {
-                        label: '有效期起',
-                        prop: 'effectiveStartDate',
-                        overHidden: true,
-                        type: "date",
-                        format: "yyyy-MM-dd",
-                        valueFormat: "yyyy-MM-dd",
-                    },
-                    {
-                        label: '有效期止',
-                        prop: 'effectiveEndDate',
-                        overHidden: true,
-                        type: "date",
-                        format: "yyyy-MM-dd",
-                        valueFormat: "yyyy-MM-dd",
-                    }
-
-                ]
-            },
+  data() {
+    return {
+      billsIds: null,
+      selectedRowIndex: null,
+      dialogVisible: false,
+      treeOption: {
+        nodeKey: "id",
+        addBtn: false,
+        menu: false,
+        size: "small",
+        props: {
+          labelText: "标题",
+          label: "cnName",
+          value: "value",
+          children: "children"
         }
+      },
+      templateId: null,
+      treeData: [],
+      dataList: [],
+      detailsList: [],
+      templateOption: {
+        height: 500,
+        menu: false,
+        addBtn: false,
+        editBtn: false,
+        delBtn: false,
+        viewBtn: false,
+        header: false,
+        // index: true,
+        tip: false,
+        // selection: true,
+        column: [
+          {
+            label: "箱型",
+            prop: "boxType",
+            overHidden: true
+          },
+          {
+            label: "币别",
+            prop: "curCode",
+            overHidden: true
+          },
+          {
+            label: "费用名称",
+            prop: "feeName",
+            overHidden: true
+          },
+          {
+            label: "销售价",
+            prop: "salesPrice",
+            overHidden: true
+          },
+          {
+            label: "成本价",
+            prop: "costPrice",
+            overHidden: true
+          },
+          {
+            label: "金额",
+            prop: "oceanFreight",
+            overHidden: true
+          }
+        ]
+      },
+      option: {
+        height: 500,
+        menu: false,
+        addBtn: false,
+        editBtn: false,
+        delBtn: false,
+        viewBtn: false,
+        header: false,
+        index: true,
+        tip: false,
+        // selection: true,
+        align: "center",
+        highlightCurrentRow: true,
+        column: [
+          {
+            label: "系统号",
+            prop: "businessNo",
+            width: 140,
+            overHidden: true
+          },
+          {
+            label: "承运人",
+            prop: "shippingCompanyCname",
+            width: 140,
+            overHidden: true
+          },
+          {
+            label: "运输条款",
+            prop: "transportationTerms",
+            overHidden: true
+          },
+          {
+            label: "舱位类型",
+            prop: "cabinType",
+            overHidden: true
+          },
+          {
+            label: "航班类型",
+            prop: "flightType",
+            overHidden: true
+          },
+          {
+            label: "转船类型",
+            prop: "changeShipType",
+            overHidden: true
+          },
+          {
+            label: "有效期起",
+            prop: "effectiveStartDate",
+            overHidden: true,
+            type: "date",
+            format: "yyyy-MM-dd",
+            valueFormat: "yyyy-MM-dd"
+          },
+          {
+            label: "有效期止",
+            prop: "effectiveEndDate",
+            overHidden: true,
+            type: "date",
+            format: "yyyy-MM-dd",
+            valueFormat: "yyyy-MM-dd"
+          }
+        ]
+      },
+      agencyfeesettingCostImportBatch: 0
+    };
+  },
+  created() {
+    isProcurement({ param: "agencyfeesetting.costImportBatch" }).then(res => {
+      if (res.data.data) {
+        this.agencyfeesettingCostImportBatch = res.data.data;
+      }
+    });
+  },
+  methods: {
+    submit() {
+      if (!this.dataList.length) {
+        return this.$message.error("暂无模板数据，请先维护");
+      }
+      if (!this.templateId) {
+        return this.$message.error("请选择左侧数据");
+      }
+      let obj = {
+        billsIds: this.billsIds,
+        costId: this.templateId
+      };
+      const loading = this.$loading({
+        lock: true,
+        text: "加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(255,255,255,0.7)"
+      });
+      if (this.agencyfeesettingCostImportBatch == 1) {
+        agencyCostImportBatch(obj)
+          .then(res => {
+            this.$message.success("操作成功!");
+            this.dialogVisible = false;
+            this.$emit("getData");
+          })
+          .finally(() => {
+            loading.close();
+          });
+      } else {
+        costImportBatch(obj)
+          .then(res => {
+            this.$message.success("操作成功!");
+            this.dialogVisible = false;
+            this.$emit("getData");
+          })
+          .finally(() => {
+            loading.close();
+          });
+      }
     },
-    created() {
+    inTemplate(obj, billsIds) {
+      // let obj = {}
+      // if (Array.isArray(val)) {
+      //     let podId = []
+      //     let destinationId = []
+      //     let airlineId = []
+      //     let shipNameId = []
+      //     let shippingCompanyId = []
+      //     let voyag = []
+      //     for (let item of val) {
+      //         podId.push(item.podId)
+      //         destinationId.push(item.destinationId)
+      //         airlineId.push(item.lineId)
+      //         shipNameId.push(item.vesselId)
+      //         shippingCompanyId.push(item.carrierId)
+      //         voyag.push(item.voyageNo)
+      //     }
+      //     obj = {
+      //         podId: podId.join(","),
+      //         destinationId: destinationId.join(","),
+      //         airlineId: airlineId.join(","),
+      //         shipNameId: shipNameId.join(","),
+      //         shippingCompanyId: shippingCompanyId.join(","),
+      //         voyag: voyag.join(","),
+      //     }
+      // } else {
+      //     obj = {
+      //         podId: val.podId,
+      //         destinationId: val.destinationId,
+      //         airlineId: val.lineId,
+      //         shipNameId: val.vesselId,
+      //         shippingCompanyId: val.carrierId,
+      //         voyag: val.voyageNo,
+      //     }
+      // }
+      this.billsIds = billsIds;
+      this.templateId = null;
+      this.dataList = [];
+      this.detailsList = [];
+      this.dialogVisible = true;
+      const loading = this.$loading({
+        lock: true,
+        text: "加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(255,255,255,0.7)"
+      });
+      extractCost(obj)
+        .then(res => {
+          this.dataList = res.data.data;
+          // this.detailsList = res.data.data.costItemList
+        })
+        .finally(() => {
+          loading.close();
+        });
     },
-    methods: {
-        submit() {
-            if (!this.dataList.length) {
-                return this.$message.error("暂无模板数据，请先维护");
-            }
-               if (!this.templateId) {
-                return this.$message.error("请选择左侧数据");
-            }
-            let obj = {
-                billsIds: this.billsIds,
-                costId: this.templateId
-            }
-            const loading = this.$loading({
-                lock: true,
-                text: '加载中',
-                spinner: 'el-icon-loading',
-                background: 'rgba(255,255,255,0.7)'
-            });
-            costImportBatch(obj).then(res => {
-                this.$message.success("操作成功!");
-                this.dialogVisible = false
-                this.$emit('getData')
-            }).finally(() => {
-                loading.close();
-            })
-        },
-        inTemplate(obj, billsIds) {
-            // let obj = {}
-            // if (Array.isArray(val)) {
-            //     let podId = []
-            //     let destinationId = []
-            //     let airlineId = []
-            //     let shipNameId = []
-            //     let shippingCompanyId = []
-            //     let voyag = []
-            //     for (let item of val) {
-            //         podId.push(item.podId)
-            //         destinationId.push(item.destinationId)
-            //         airlineId.push(item.lineId)
-            //         shipNameId.push(item.vesselId)
-            //         shippingCompanyId.push(item.carrierId)
-            //         voyag.push(item.voyageNo)
-            //     }
-            //     obj = {
-            //         podId: podId.join(","),
-            //         destinationId: destinationId.join(","),
-            //         airlineId: airlineId.join(","),
-            //         shipNameId: shipNameId.join(","),
-            //         shippingCompanyId: shippingCompanyId.join(","),
-            //         voyag: voyag.join(","),
-            //     }
-            // } else {
-            //     obj = {
-            //         podId: val.podId,
-            //         destinationId: val.destinationId,
-            //         airlineId: val.lineId,
-            //         shipNameId: val.vesselId,
-            //         shippingCompanyId: val.carrierId,
-            //         voyag: val.voyageNo,
-            //     }
-            // }
-            this.billsIds = billsIds
-            this.templateId = null
-            this.dataList = []
-            this.detailsList = []
-            this.dialogVisible = true
-            const loading = this.$loading({
-                lock: true,
-                text: '加载中',
-                spinner: 'el-icon-loading',
-                background: 'rgba(255,255,255,0.7)'
-            });
-            extractCost(obj).then(res => {
-                this.dataList = res.data.data
-                // this.detailsList = res.data.data.costItemList
-            }).finally(() => {
-                loading.close();
-            })
-        },
-        // 左侧选择
-        handleRowClick(row, index) {
-            this.templateId = row.id
-            this.detailsList = row.costItemList
-        },
+    // 左侧选择
+    handleRowClick(row, index) {
+      this.templateId = row.id;
+      this.detailsList = row.costItemList;
     }
-}
+  }
+};
 </script>
 
 <style lang="scss" scoped>
 .highlight-row {
-    background-color: #35721499 !important;
-    /* 自定义的背景色 */
+  background-color: #35721499 !important;
+  /* 自定义的背景色 */
 }
 </style>

src/router/views/index.js

@@ -4510,5 +4510,19 @@ export default [{
     },
     component: () => import( /* webpackChunkName: "views" */ '@/views/iosBasicData/financialManagement/reimbursement/index')
   }]
+},
+{
+  path: '/iosBasicData/agencyFeeSetting/index',
+  component: Layout,
+  hidden: true,
+  children: [{
+    path: '/iosBasicData/agencyFeeSetting/index',
+    name: '代理费设置',
+    meta: {
+      i18n: '/iosBasicData/agencyFeeSetting/index',
+      keepAlive: true,
+    },
+    component: () => import( /* webpackChunkName: "views" */ '@/views/iosBasicData/agencyFeeSetting/index')
+  }]
 }
 ]

src/views/boxManagement/agentBox/detailsPage.vue

@@ -1788,7 +1788,7 @@ export default {
       this.form.tradingBoxItemsList.push({
         pid: this.form.id,
         boxBelongsTo: 'SOC',
-        boxCategory: '自有箱',
+        boxCategory: '代理箱',
         boxStatus: '好',
         boxCondition: this.form.boxCondition,
         stationId: this.form.stationId,

src/views/iosBasicData/OceanFreightImport/bills/assembly/feecenter.vue

@@ -1658,6 +1658,12 @@ export default {
             overHidden: true
           },
           {
+            label: "分单号",
+            prop: "hblno",
+            width: "100",
+            overHidden: true
+          },
+          {
             label: "备注",
             prop: "remarks",
             width: "100",
@@ -1878,6 +1884,12 @@ export default {
             overHidden: true
           },
           {
+            label: "分单号",
+            prop: "hblno",
+            width: "100",
+            overHidden: true
+          },
+          {
             label: "备注",
             prop: "remarks",
             width: "100",

src/views/iosBasicData/SeafreightExportF/bills/assembly/feecenter.vue

@@ -1688,8 +1688,8 @@ export default {
             overHidden: true
           },
           {
-            label: "价格编号",
-            prop: "srcCostNo",
+            label: "分单号",
+            prop: "hblno",
             width: "100",
             overHidden: true
           },
@@ -1935,6 +1935,12 @@ export default {
             overHidden: true
           },
           {
+            label: "分单号",
+            prop: "hblno",
+            width: "100",
+            overHidden: true
+          },
+          {
             label: "备注",
             prop: "remarks",
             width: "100",

src/views/iosBasicData/SeafreightExportF/bills/billsDetails.vue

@@ -80,9 +80,10 @@
           size="small"
           type="info"
           @click.stop="allClick('转单')"
+          :loading="pageLoading"
           >{{ $t("btn118n.transferApply") }}
         </el-button>
-        <el-button v-if="form.id && form.transferOrderStatus == '已转单'" size="small" type="danger" @click.stop="allClick('撤销转单')"
+        <el-button v-if="form.id && form.transferOrderStatus == '已转单'" size="small" type="danger" @click.stop="allClick('撤销转单')" :loading="pageLoading"
           >{{ $t("btn118n.untransferApply") }}
         </el-button>
         <el-button size="small" type="warning" :disabled="!form.id || showLock" v-if="form.billType == 'MM'" @click.stop="allClick('同步主单到分单')"
@@ -1424,6 +1425,7 @@ export default {
           cancelButtonText: "取消",
           type: "warning"
         }).then(() => {
+          this.pageLoading = true;
           revokeTransferOrder(this.form).then(res => {
             this.$message({
               type: "success",
@@ -1431,7 +1433,9 @@ export default {
             });
             this.logisticsDialog = false;
             this.billsDetailfun(this.form.id);
-          });
+          }).catch(()=>{
+            this.pageLoading = false;
+          })
         });
       }
       if (name == "同步主单到分单") {
@@ -1542,14 +1546,19 @@ export default {
             ...this.form,
             ...this.transferForm
           };
-          transferOrder(obj).then(res => {
-            this.$message({
-              type: "success",
-              message: "操作成功!"
+          this.pageLoading = true;
+          transferOrder(obj)
+            .then(res => {
+              this.$message({
+                type: "success",
+                message: "操作成功!"
+              });
+              this.transferDialog = false;
+              this.billsDetailfun(this.form.id);
+            })
+            .catch(err => {
+              this.pageLoading = false;
             });
-            this.transferDialog = false;
-            this.billsDetailfun(this.form.id);
-          });
         } else {
           return false;
         }

src/views/iosBasicData/agencyFeeSetting/detailsPage.vue

@@ -115,6 +115,7 @@ export default {
             label: "有效日期",
             prop: "validityPeriodDate",
             type: "daterange",
+            unlinkPanels: true,
             defaultTime: ["00:00:00", "00:00:00"],
             format: "yyyy-MM-dd",
             valueFormat: "yyyy-MM-dd HH:mm:ss",
@@ -133,6 +134,7 @@ export default {
         menuBtn: false,
         span: 6,
         disabled: false,
+        labelWidth: 100,
         group: [
           {
             label: "DF自营",
@@ -140,21 +142,21 @@ export default {
             arrow: false,
             column: [
               {
-                label: "自有箱费率",
+                label: "自有箱费率%",
                 prop: "basicDfSelfOperatedOwn",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "代理箱费率",
+                label: "代理箱费率%",
                 prop: "basicDfSelfOperatedAgent",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "空箱调用费率",
+                label: "空箱调用费率%",
                 prop: "basicDfSelfOperatedInvoke",
                 type: "number",
                 controls: false,
@@ -168,14 +170,14 @@ export default {
             arrow: false,
             column: [
               {
-                label: "自有箱费率",
+                label: "自有箱费率%",
                 prop: "basicDfJointVentureOwn",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "代理箱费率",
+                label: "代理箱费率%",
                 prop: "basicDfJointVentureAgent",
                 type: "number",
                 controls: false,
@@ -196,14 +198,14 @@ export default {
             arrow: false,
             column: [
               {
-                label: "自有箱费率",
+                label: "自有箱费率%",
                 prop: "basicOpenCsaOwn",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "代理箱费率",
+                label: "代理箱费率%",
                 prop: "basicOpenCsaAgent",
                 type: "number",
                 controls: false,
@@ -224,6 +226,7 @@ export default {
         menuBtn: false,
         span: 6,
         disabled: false,
+        labelWidth: 100,
         group: [
           {
             label: "DF自营",
@@ -231,21 +234,21 @@ export default {
             arrow: false,
             column: [
               {
-                label: "自有箱费率",
+                label: "自有箱费率%",
                 prop: "notBasicDfSelfOperatedOwn",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "代理箱费率",
+                label: "代理箱费率%",
                 prop: "notBasicDfSelfOperatedAgent",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "空箱调用费率",
+                label: "空箱调用费率%",
                 prop: "notBasicDfSelfOperatedInvoke",
                 type: "number",
                 controls: false,
@@ -259,14 +262,14 @@ export default {
             arrow: false,
             column: [
               {
-                label: "自有箱费率",
+                label: "自有箱费率%",
                 prop: "notBasicDfJointVentureOwn",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "代理箱费率",
+                label: "代理箱费率%",
                 prop: "notBasicDfJointVentureAgent",
                 type: "number",
                 controls: false,
@@ -287,14 +290,14 @@ export default {
             arrow: false,
             column: [
               {
-                label: "自有箱费率",
+                label: "自有箱费率%",
                 prop: "notBasicOpenCsaOwn",
                 type: "number",
                 controls: false,
                 precision: 2
               },
               {
-                label: "代理箱费率",
+                label: "代理箱费率%",
                 prop: "notBasicOpenCsaAgent",
                 type: "number",
                 controls: false,

src/views/iosBasicData/financialManagement/computationCenter/detailsPage.vue

@@ -492,33 +492,28 @@ export default {
         labelWidth: 100,
         column: [
           {
-            label: "所属公司 ",
+            label: "所属公司",
             prop: "branchName",
             disabled: false
           },
           {
-            label: "结算单位",
-            prop: "corpCnName",
-            disabled: false
-          },
-          {
             label: "信用代码",
-            prop: "corpCnName2",
+            prop: "uscc",
             disabled: false
           },
           {
             label: "账户名称",
-            prop: "corpCnName3",
+            prop: "accountName",
             disabled: false
           },
           {
             label: "开户银行",
-            prop: "corpCnName4",
+            prop: "accountBank",
             disabled: false
           },
           {
             label: "银行账号",
-            prop: "corpCnName5",
+            prop: "accountNo",
             disabled: false
           },
           {

src/views/iosBasicData/seamends/assembly/billgenerated.vue

@@ -1,206 +1,210 @@
 <template>
-    <div>
-        <el-table
-            ref="tableRef"
-            :cell-style="{padding:'0px',fontSize:'12px'}"
-            :header-cell-style="tableHeaderCellStyle"
-            :data="tableData"
-            border
-            style="width: 100%"
-            @selection-change="handleSelectionChange"
-            @row-click="rowClick"
-            :row-style="rowStyle"
-            :row-class-name="rowClassName" >
-            <el-table-column type="selection" width="55" />
-            <el-table-column prop="sort" label="行号" width="50px" >
-                <template slot-scope="scope">
-                    <span>{{Number(scope.$index) + 1}}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="所属公司" prop="branchName" width="120px" />
-            <el-table-column label="账单" prop="accStatus" width="60px" >
-                <template slot-scope="{ row }">
-                    <span>{{row.accStatus?'是':'否'}}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="往来单位" prop="corpCnName" width="160px" >
-                <template slot-scope="{ row }">
-                    <el-tooltip class="item" effect="dark" :content="row.corpCnName" placement="top">
-                        <span class="textHide">{{row.corpCnName}}</span>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-            <el-table-column label="费用简称" prop="feeCnName" width="120px" />
-            <el-table-column label="预付/到付" prop="paymode" width="120px" />
-            <el-table-column label="计量单位" prop="unitNo" width="120px" />
-            <el-table-column label="币种" prop="curCode" width="120px" />
-            <el-table-column label="汇率" prop="exrate" width="100px" />
-            <el-table-column label="单价" prop="price" width="120px" />
-            <el-table-column label="税率" prop="taxRate" width="120px" />
-            <el-table-column label="数量" prop="quantity" width="120px" />
-            <el-table-column label="税额" prop="amountTax" width="120px" />
-            <el-table-column label="本币" prop="rmbAmount" width="100px" />
-            <el-table-column label="外币" prop="usdAmount" width="100px" />
-            <!-- <el-table-column label="CNY(净额)" prop="rmbAmountNet" width="100px" />
+  <div>
+    <el-table
+      ref="tableRef"
+      :cell-style="{ padding: '0px', fontSize: '12px' }"
+      :header-cell-style="tableHeaderCellStyle"
+      :data="tableData"
+      border
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+      @row-click="rowClick"
+      :row-style="rowStyle"
+      :row-class-name="rowClassName"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="sort" label="行号" width="50px">
+        <template slot-scope="scope">
+          <span>{{ Number(scope.$index) + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="所属公司" prop="branchName" width="120px" />
+      <el-table-column label="账单" prop="accStatus" width="60px">
+        <template slot-scope="{ row }">
+          <span>{{ row.accStatus ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="往来单位" prop="corpCnName" width="160px">
+        <template slot-scope="{ row }">
+          <el-tooltip class="item" effect="dark" :content="row.corpCnName" placement="top">
+            <span class="textHide">{{ row.corpCnName }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="费用简称" prop="feeCnName" width="120px" />
+      <el-table-column label="预付/到付" prop="paymode" width="120px" />
+      <el-table-column label="计量单位" prop="unitNo" width="120px" />
+      <el-table-column label="币种" prop="curCode" width="120px" />
+      <el-table-column label="汇率" prop="exrate" width="100px" />
+      <el-table-column label="单价" prop="price" width="120px" />
+      <el-table-column label="税率" prop="taxRate" width="120px" />
+      <el-table-column label="数量" prop="quantity" width="120px" />
+      <el-table-column label="税额" prop="amountTax" width="120px" />
+      <el-table-column label="本币" prop="rmbAmount" width="100px" />
+      <el-table-column label="外币" prop="usdAmount" width="100px" />
+      <!-- <el-table-column label="CNY(净额)" prop="rmbAmountNet" width="100px" />
             <el-table-column label="USD(净额)" prop="rmbAmountNet" width="100px" />
             <el-table-column label="核算要素" prop="elementsCnName" width="120px" /> -->
-            <el-table-column label="付费申请金额" prop="appliedAmount" width="120px" />
-            <el-table-column label="发票申请金额" prop="appliedInvoiceAmount" width="120px" />
-            <el-table-column label="已开票金额" prop="uninvoicedAmount" width="120px" />
-            <el-table-column label="发票号" prop="invoiceNo" width="100px" />
-            <el-table-column label="已结算金额" prop="stlTtlAmount" width="120px" />
-            <el-table-column label="备注" prop="remarks" width="100px" />
-            <el-table-column label="单价是否含税" prop="isTax" width="120px" >
-                <template slot-scope="{row}">
-                    <span>{{row.isTax?'是':'否'}}</span>
-                </template>
-            </el-table-column>
-        </el-table>
-    </div>
+      <el-table-column label="付费申请金额" prop="appliedAmount" width="120px" />
+      <el-table-column label="发票申请金额" prop="appliedInvoiceAmount" width="120px" />
+      <el-table-column label="已开票金额" prop="uninvoicedAmount" width="120px" />
+      <el-table-column label="发票号" prop="invoiceNo" width="100px" />
+      <el-table-column label="已结算金额" prop="stlTtlAmount" width="120px" />
+      <el-table-column label="分单号" prop="hblno" width="120px" />
+      <el-table-column label="备注" prop="remarks" width="100px" />
+      <el-table-column label="单价是否含税" prop="isTax" width="120px">
+        <template slot-scope="{ row }">
+          <span>{{ row.isTax ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
-    export default {
-        props:{
-            tableData:{
-                type:Array,
-                default:[]
-            },
-            handleSelectionData:{
-                type:Array,
-                default: []
-            }
-        },
-        data(){
-            return {
-
-            }
-        },
-        methods:{
-            // 表头样式
-            tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
-                return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
-            },
-            // 列表多选
-            // 多选选择的数据
-            handleSelectionChange(arr){
-                this.$emit('handleSelectionChange',arr)
-            },
-            // 监听点击表格事件
-            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 => c.rowIndex === row.rowIndex);
-                if (findRow) {
-                    rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
-                }
-                return rowName; //也可以再加上其他类名 如果有需求的话
-            },
-        },
-        mounted() {
-            // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
-            addEventListener("keydown", this.keyDown, false);
-            addEventListener("keyup", this.keyUp, false);
-        },
-        beforeDestroy() { //解绑
-            removeEventListener("keydown", this.keyDown);
-            removeEventListener("keyup", this.keyUp);
-        },
-        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;
-                });
-            }
-        },
+export default {
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    },
+    handleSelectionData: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // 表头样式
+    tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
+      return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff";
+    },
+    // 列表多选
+    // 多选选择的数据
+    handleSelectionChange(arr) {
+      this.$emit("handleSelectionChange", arr);
+    },
+    // 监听点击表格事件
+    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 => c.rowIndex === row.rowIndex);
+      if (findRow) {
+        rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
+      }
+      return rowName; //也可以再加上其他类名 如果有需求的话
+    }
+  },
+  mounted() {
+    // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
+    addEventListener("keydown", this.keyDown, false);
+    addEventListener("keyup", this.keyUp, false);
+  },
+  beforeDestroy() {
+    //解绑
+    removeEventListener("keydown", this.keyDown);
+    removeEventListener("keyup", this.keyUp);
+  },
+  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;
 }
 </style>

src/views/iosBasicData/siamends/assembly/billgenerated.vue

@@ -1,199 +1,210 @@
 <template>
-    <div>
-        <el-table ref="tableRef" :cell-style="{ padding: '0px', fontSize: '12px' }"
-            :header-cell-style="tableHeaderCellStyle" :data="tableData" border style="width: 100%"
-            @selection-change="handleSelectionChange" @row-click="rowClick" :row-style="rowStyle"
-            :row-class-name="rowClassName">
-            <el-table-column type="selection" width="55" />
-            <el-table-column prop="sort" label="行号" width="50px">
-                <template slot-scope="scope">
-                    <span>{{ Number(scope.$index) + 1 }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="所属公司" prop="branchName" width="120px" />
-            <el-table-column label="账单" prop="accStatus" width="60px">
-                <template slot-scope="{ row }">
-                    <span>{{ row.accStatus ? '是' : '否' }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="往来单位" prop="corpCnName" width="160px">
-                <template slot-scope="{ row }">
-                    <el-tooltip class="item" effect="dark" :content="row.corpCnName" placement="top">
-                        <span class="textHide">{{ row.corpCnName }}</span>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-            <el-table-column label="费用简称" prop="feeCnName" width="120px" />
-            <el-table-column label="预付/到付" prop="paymode" width="120px" />
-            <el-table-column label="计量单位" prop="unitNo" width="120px" />
-            <el-table-column label="币种" prop="curCode" width="120px" />
-            <el-table-column label="汇率" prop="exrate" width="100px" />
-            <el-table-column label="单价" prop="price" width="120px" />
-            <el-table-column label="税率" prop="taxRate" width="120px" />
-            <el-table-column label="数量" prop="quantity" width="120px" />
-            <el-table-column label="税额" prop="amountTax" width="120px" />
-            <el-table-column label="CNY(含税)" prop="rmbAmount" width="100px" />
-            <el-table-column label="USD(含税)" prop="usdAmount" width="100px" />
-            <el-table-column label="CNY(净额)" prop="rmbAmountNet" width="100px" />
-            <el-table-column label="USD(净额)" prop="rmbAmountNet" width="100px" />
-            <el-table-column label="核算要素" prop="elementsCnName" width="120px" />
-            <el-table-column label="付费申请金额" prop="appliedAmount" width="120px" />
-            <el-table-column label="发票申请金额" prop="appliedInvoiceAmount" width="120px" />
-            <el-table-column label="已开票金额" prop="uninvoicedAmount" width="120px" />
-            <el-table-column label="发票号" prop="invoiceNo" width="100px" />
-            <el-table-column label="已结算金额" prop="stlTtlAmount" width="120px" />
-            <el-table-column label="备注" prop="remarks" width="100px" />
-            <el-table-column label="单价是否含税" prop="isTax" width="120px">
-                <template slot-scope="{row}">
-                    <span>{{ row.isTax ? '是' : '否' }}</span>
-                </template>
-            </el-table-column>
-        </el-table>
-    </div>
+  <div>
+    <el-table
+      ref="tableRef"
+      :cell-style="{ padding: '0px', fontSize: '12px' }"
+      :header-cell-style="tableHeaderCellStyle"
+      :data="tableData"
+      border
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+      @row-click="rowClick"
+      :row-style="rowStyle"
+      :row-class-name="rowClassName"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="sort" label="行号" width="50px">
+        <template slot-scope="scope">
+          <span>{{ Number(scope.$index) + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="所属公司" prop="branchName" width="120px" />
+      <el-table-column label="账单" prop="accStatus" width="60px">
+        <template slot-scope="{ row }">
+          <span>{{ row.accStatus ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="往来单位" prop="corpCnName" width="160px">
+        <template slot-scope="{ row }">
+          <el-tooltip class="item" effect="dark" :content="row.corpCnName" placement="top">
+            <span class="textHide">{{ row.corpCnName }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="费用简称" prop="feeCnName" width="120px" />
+      <el-table-column label="预付/到付" prop="paymode" width="120px" />
+      <el-table-column label="计量单位" prop="unitNo" width="120px" />
+      <el-table-column label="币种" prop="curCode" width="120px" />
+      <el-table-column label="汇率" prop="exrate" width="100px" />
+      <el-table-column label="单价" prop="price" width="120px" />
+      <el-table-column label="税率" prop="taxRate" width="120px" />
+      <el-table-column label="数量" prop="quantity" width="120px" />
+      <el-table-column label="税额" prop="amountTax" width="120px" />
+      <el-table-column label="CNY(含税)" prop="rmbAmount" width="100px" />
+      <el-table-column label="USD(含税)" prop="usdAmount" width="100px" />
+      <el-table-column label="CNY(净额)" prop="rmbAmountNet" width="100px" />
+      <el-table-column label="USD(净额)" prop="rmbAmountNet" width="100px" />
+      <el-table-column label="核算要素" prop="elementsCnName" width="120px" />
+      <el-table-column label="付费申请金额" prop="appliedAmount" width="120px" />
+      <el-table-column label="发票申请金额" prop="appliedInvoiceAmount" width="120px" />
+      <el-table-column label="已开票金额" prop="uninvoicedAmount" width="120px" />
+      <el-table-column label="发票号" prop="invoiceNo" width="100px" />
+      <el-table-column label="已结算金额" prop="stlTtlAmount" width="120px" />
+      <el-table-column label="分单号" prop="hblno" width="120px" />
+      <el-table-column label="备注" prop="remarks" width="100px" />
+      <el-table-column label="单价是否含税" prop="isTax" width="120px">
+        <template slot-scope="{ row }">
+          <span>{{ row.isTax ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        tableData: {
-            type: Array,
-            default: []
-        },
-        handleSelectionData: {
-            type: Array,
-            default: []
-        }
+  props: {
+    tableData: {
+      type: Array,
+      default: []
     },
-    data() {
-        return {
-
+    handleSelectionData: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // 表头样式
+    tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
+      return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff";
+    },
+    // 列表多选
+    // 多选选择的数据
+    handleSelectionChange(arr) {
+      this.$emit("handleSelectionChange", arr);
+    },
+    // 监听点击表格事件
+    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); // 调用选中行方法
+      }
     },
-    methods: {
-        // 表头样式
-        tableHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
-            return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff"
-        },
-        // 列表多选
-        // 多选选择的数据
-        handleSelectionChange(arr) {
-            this.$emit('handleSelectionChange', arr)
-        },
-        // 监听点击表格事件
-        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 => c.rowIndex === row.rowIndex);
-            if (findRow) {
-                rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
-            }
-            return rowName; //也可以再加上其他类名 如果有需求的话
-        },
+    // 行的 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，意味着这个属性不能从对象上删除
+      });
     },
-    mounted() {
-        // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
-        addEventListener("keydown", this.keyDown, false);
-        addEventListener("keyup", this.keyUp, false);
+    keyDown(event) {
+      let key = event.keyCode;
+      if (key == 17) this.CtrlDown = true;
+      if (key == 16 || key == 18) this.shiftOrAltDown = true;
     },
-    beforeDestroy() { //解绑
-        removeEventListener("keydown", this.keyDown);
-        removeEventListener("keyup", this.keyUp);
+    keyUp(event) {
+      let key = event.keyCode;
+      if (key == 17) this.CtrlDown = false;
+      if (key == 16 || key == 18) this.shiftOrAltDown = 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;
-            });
-        }
+    // 文章说明 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 => c.rowIndex === row.rowIndex);
+      if (findRow) {
+        rowName = "current-row "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
+      }
+      return rowName; //也可以再加上其他类名 如果有需求的话
+    }
+  },
+  mounted() {
+    // 按住ctrl实现多选 设置监听keydown事件,以及keyup事件，
+    addEventListener("keydown", this.keyDown, false);
+    addEventListener("keyup", this.keyUp, false);
+  },
+  beforeDestroy() {
+    //解绑
+    removeEventListener("keydown", this.keyDown);
+    removeEventListener("keyup", this.keyUp);
+  },
+  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;
 }
 </style>