tire-platform-ui/src/views/iosBasicData/finstlbills/assembly/finstlbillsitems.vue

<template>
    <div>
        <!--:row-style="{height:'20px',padding:'0px',fontSize:'12px'}"-->
        <el-table ref="tableRef" :header-cell-style="tableHeaderCellStyle" :data="tableData" border style="width: 100%"
            @selection-change="handleSelectionChange" @row-click="rowClick" :row-style="rowStyle"
            :row-class-name="rowClassName" :cell-style="cellStyle" @expand-change="expandChange">
            <el-table-column v-if="brfalse" fixed="left" type="selection" width="55">
                <!--<template slot-scope="scope">-->
                <!--    <el-checkbox v-model="scope.row.tableSelect"-->
                <!--                 :true-label="1" :false-label="0"-->
                <!--                 @change="toggleSelection([scope.row])">-->
                <!--    </el-checkbox>-->
                <!--</template>-->
            </el-table-column>
            <el-table-column type="expand" v-if="brfalse">
                <template slot-scope="{row}">
                    <costDetails :costDate="row.costDate || []"></costDetails>
                </template>
            </el-table-column>
            <el-table-column prop="lineNo" label="行号" width="50px">
            </el-table-column>
            <el-table-column prop="dc" label="收付" width="50px">
                <template slot-scope="{row}">
                    <span v-if="row.dc == 'D'">收</span>
                    <span v-if="row.dc == 'C'">付</span>
                </template>
            </el-table-column>
            <el-table-column prop="isInvoice" label="开票状态" width="80px">
                <template slot-scope="{ row }">
                    <span v-if="row.isInvoice == 0">开票</span>
                    <span v-if="row.isInvoice == 3">禁止开票</span>
                </template>
            </el-table-column>
            <el-table-column prop="billNo" label="原业务编号" width="120px">
                <template slot-scope="{ row }">
                    <span class="textHide">{{ row.billNo }}</span>
                    <!--<span class="textHide" v-if="row.businessBillDivideNo">{{row.businessBillDivideNo}}</span>-->
                    <!--<span class="textHide" v-else>{{row.businessBillNo}}</span>-->
                </template>
            </el-table-column>
            <el-table-column prop="invoiceNo" label="发票号">
            </el-table-column>
            <el-table-column prop="feeCnName" label="费用名称">
            </el-table-column>
            <el-table-column prop="corpCnName" label="结算单位" width="130px">
                <template slot-scope="{ row }">
                    <span class="textHide">{{ row.corpCnName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="mblno" label="MB/L NO" width="120px">
                <template slot-scope="{ row }">
                    <avue-text-ellipsis :text="row.mblno" :height="50" :width="120">
                        <small slot="more">...</small>
                    </avue-text-ellipsis>
                </template>
            </el-table-column>
            <el-table-column prop="currentStlAmountRMB" label="本次对账CNY" width="100">
                <template slot-scope="scope">
                    <el-input style="width: 100%;" v-model="scope.row.currentStlAmountRMB" v-if="brfalse" size="mini"
                        autocomplete="off" :disabled="scope.row.currentStlCurCode != 'CNY'" clearable
                        placeholder="请输入USD" @change="armbChange(scope.row)">
                    </el-input>
                    <span v-else>{{ scope.row.currentStlAmountRMB }}</span>
                    <!--<span>{{scope.row.currentStlAmountRMB}}</span>-->
                </template>
            </el-table-column>
            <el-table-column prop="currentStlAmountUSD" label="本次对账USD" width="100">
                <template slot-scope="scope">
                    <el-input style="width: 100%;" v-model="scope.row.currentStlAmountUSD" v-if="brfalse" size="mini"
                        autocomplete="off" :disabled="scope.row.currentStlCurCode != 'USD'" clearable
                        placeholder="请输入USD" @change="ausdChange(scope.row)">
                    </el-input>
                    <span v-else>{{ scope.row.currentStlAmountUSD }}</span>
                    <!--<span>{{scope.row.currentStlAmountUSD}}</span>-->
                </template>
            </el-table-column>
            <el-table-column label="币种" prop="currentStlCurCode" width="100">
                <template slot-scope="{row}">
                    <!--<search-query v-if="!editSave"-->
                    <!--              :datalist="curCodeData"-->
                    <!--              :selectValue="row.currentStlCurCode"-->
                    <!--              :filterable="true"-->
                    <!--              :clearable="true"-->
                    <!--              :remote="true"-->
                    <!--              :buttonIf="false"-->
                    <!--              :forParameter="{key:'id',label:'code',value:'code'}"-->
                    <!--              @remoteMethod="getRateListfun"-->
                    <!--              @corpChange="corpChange($event,row)"-->
                    <!--              @corpFocus="getRateListfun">-->
                    <!--</search-query>-->
                    <!--<span v-else>{{row.currentStlCurCode}}</span>-->
                    <span>{{ row.currentStlCurCode }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="currentStlExrate" label="汇率">
            </el-table-column>

            <el-table-column prop="stlAmountDr" label="已结算CNY" width="100px">
                <template slot-scope="{ row }">
                    <span v-if="row.dc == 'D'">{{ row.stlAmountDr }}</span>
                    <span v-if="row.dc == 'C'">{{ row.stlAmountCr }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="stlAmountDrUSD" label="已结算USD" width="100px">
                <template slot-scope="{ row }">
                    <span v-if="row.dc == 'D'">{{ row.stlAmountDrUSD }}</span>
                    <span v-if="row.dc == 'C'">{{ row.stlAmountCrUSD }}</span>
                </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--    prop="tableSelect"-->
            <!--    label="选择" width="50px" v-if="brfalse">-->
            <!--    <template slot-scope="scope">-->
            <!--        <el-checkbox v-model="scope.row.tableSelect"-->
            <!--                     :true-label="1" :false-label="0"-->
            <!--                     @change="toggleSelection([scope.row])">-->
            <!--        </el-checkbox>-->
            <!--    </template>-->
            <!--</el-table-column>-->
            <el-table-column prop="isChecked" label="对账">
                <template slot-scope="{row}">
                    <span v-if="row.isChecked == item.dictKey" v-for="item in ifInvoiceData" :key="item.dictKey">
                        {{ item.dictValue }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="isSignfor" label="签收">
                <template slot-scope="{ row }">
                    <span v-if="row.isSignfor == item.dictKey" v-for="item in ifInvoiceData" :key="item.dictKey">
                        {{ item.dictValue }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="isInvoice" label="发票状态">
                <template slot-scope="{row}">
                    <span v-if="row.isInvoice == item.dictKey" v-for="item in invoicelosDara" :key="item.id">
                        {{ item.dictValue }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="etd" label="ETD" width="120px">
                <template slot-scope="{ row }">
                    <span class="textHide">{{ row.etd }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="accBillNo" label="账单编号" width="120px">
                <template slot-scope="{row}">
                    <span class="textHide">{{ row.accBillNo }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="signforName" label="签收人">
            </el-table-column>
            <el-table-column prop="signforDate" label="签收日期" width="160px">
            </el-table-column>
            <!-- <el-table-column prop="billDate" label="销账日期" width="150px">
                <template slot-scope="{ row }">
                    <span>{{ row.etd }}</span>
                </template>
            </el-table-column> -->

            <!--<el-table-column-->
            <!--    prop="accBillNo"-->
            <!--    label="操作(无参数)" width="120px">-->
            <!--</el-table-column>-->
            <el-table-column prop="bookingNo" label="BOOKINGNO" width="150px">
                <template slot-scope="{ row }">
                    <span>{{ row.bookingNo }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="hblno" label="HB/L NO" width="150px">
                <template slot-scope="{ row }">
                    <span class="textHide">{{ row.hblno }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="vesselCnName" label="船名">
                <template slot-scope="{row}">
                    <span class="textHide">{{ row.vesselCnName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="voyageNo" label="航次" width="100px">
                <template slot-scope="{ row }">
                    <span class="textHide">{{ row.voyageNo }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="currentInvoiceAmountRMB" label="发票CNY">
            </el-table-column>
            <el-table-column prop="currentInvoiceAmountUSD" label="发票USD">
            </el-table-column>
            <!-- <el-table-column prop="quantityCntrTypesDescr" label="箱型">
            </el-table-column> -->
            <el-table-column prop="quantityCntrTypesDescr" label="箱量">
            </el-table-column>
            <el-table-column prop="billNo" label="编号" width="100px">
                <template slot-scope="{ row }">
                    <span class="textHide">{{ row.billNo }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="unsettledAmountRMB" label="应对账CNY" width="100px">
            </el-table-column>
            <el-table-column prop="unsettledAmountUSD" label="应对账USD" width="100px">
            </el-table-column>
            <el-table-column prop="reconciliationAmount" label="已对账CNY" width="100px">
            </el-table-column>
            <el-table-column prop="reconciliationAmountUsd" label="已对账USD" width="100px">
            </el-table-column>
            <!--<el-table-column-->
            <!--    prop="voyageNo"-->
            <!--    label="结算单号(暂无字段)">-->
            <!--    <template slot-scope="{ row }">-->
            <!--        <span class="textHide" >{{row.voyageNo}}</span>-->
            <!--    </template>-->
            <!--</el-table-column>-->
            <!--paymode-->
            <!--<el-table-column-->
            <!--    prop="paymodeH"-->
            <!--    label="H付费方式">-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--    prop="paymodeM"-->
            <!--    label="M付费方式">-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--    prop="eta"-->
            <!--    label="三检单号(暂无字段)">-->
            <!--    <template slot-scope="{ row }">-->
            <!--        <span class="textHide" >{{row.voyageNo}}</span>-->
            <!--    </template>-->
            <!--</el-table-column>-->
            <el-table-column prop="remarkss" label="备注" width="100px">
                <template slot-scope="scope">
                    <el-input style="width: 100%;" v-model="scope.row.remarkss" v-if="brfalse" size="mini"
                        autocomplete="off" clearable placeholder="请输入备注">
                    </el-input>
                    <span v-else>{{ scope.row.remarkss }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getWorkDicts } from "@/api/system/dictbiz";
import SearchQuery from "@/components/iosbasic-data/searchquery.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
        }
    },
    data() {
        return {
            ifInvoiceData: [], // 是否数据
            invoicelosDara: [],// 发票
            curCodeData: [], // 币种
        }
    },
    created() {
        this.isSignforWorkDicts()
        this.invoicelosWorkDictsfun()
    },
    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"
        },

        // 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;'
            } else { }
            return rowStyle + 'padding:0px;fontSize:12px'
        },
    },
    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;
}

::v-deep .current-row {
    background: #ecf3ff;
}
</style>