Smart_platform_ui/src/views/iosBasicData/PaymentApplication/assembly/finstlbillsitems.vue

<template>
    <div>
        <!--:row-style="{height:'20px',padding:'0px',fontSize:'12px'}"-->
        <el-table
            ref="tableRef"
            :cell-style="cellStyle"
            :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
                v-if="brfalse"
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="lineNo"
                label="行号" width="50px">
            </el-table-column>
            <el-table-column
                prop="isCleared"
                label="核销" width="50px">
                <template slot-scope="{ row }">
                    <span v-if="row.isCleared == item.dictKey" v-for="item in ifInvoiceData" :key="item.dictKey">
                        {{item.dictValue}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="dc"
                label="收/付" width="50px">
                <template slot-scope="{ row }">
                    <span>{{row.dc}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="billNo"
                label="原业务编号" width="120px">
            </el-table-column>
            <el-table-column
                prop="accBillNo"
                label="账单编号" width="140px">
            </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 }">
                    <span  class="textHide">{{row.mblno}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="currentStlExrate"
                label="汇率">
            </el-table-column>
            <el-table-column
                prop="currentStlAmountRMB"
                label="本次RMB" width="100px">
                <template slot-scope="scope">
                    <el-input style="width: 100%;" v-model="scope.row.currentStlAmountRMB"
                              :disabled="scope.row.curCode != 'CNY' || settlementdistar"
                              v-if="(brfalse && !editSave)"
                              size="mini" autocomplete="off"
                              clearable placeholder="请输入USD" >
                    </el-input>
                    <span v-else>{{scope.row.currentStlAmountRMB}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="currentStlAmountUSD"
                label="本次USD" width="100px">
                <template slot-scope="scope">
                    <el-input style="width: 100%;" v-model="scope.row.currentStlAmountUSD"
                              :disabled="scope.row.curCode != 'USD' || settlementdistar"
                              v-if="(brfalse && !editSave)"
                              size="mini" autocomplete="off"
                              clearable placeholder="请输入USD" >
                    </el-input>
                    <span v-else>{{scope.row.currentStlAmountUSD}}</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="signforDate"
                label="签收日期">
            </el-table-column>
            <el-table-column
                prop="currentInvoiceAmountRMB"
                label="发票RMB">
            </el-table-column>
            <el-table-column
                prop="currentInvoiceAmountUSD"
                label="发票USD">
            </el-table-column>
            <el-table-column
                prop="etd"
                label="ETD" width="100px">
            </el-table-column>
            <el-table-column
                prop="vesselCnName"
                label="船名" width="140px">
            </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="podCnName"
                label="目的港" width="100px">
            </el-table-column>
            <el-table-column
                prop="quantityCntrTypesDescr"
                label="箱量">
            </el-table-column>
            <!--amount 应结算金额 有税-->
            <!--amountNet 应结算金额 没有税-->
            <el-table-column
                prop="amountRMB"
                label="应结算RMB" width="90px">
            </el-table-column>
            <el-table-column
                prop="amountUSD"
                label="应结算USD" width="90px">
            </el-table-column>
            <el-table-column
                prop="stlTtlAmountRMB"
                label="已结算RMB" width="100px">
            </el-table-column>
            <el-table-column
                prop="stlTtlAmountUSD"
                label="已结算USD" width="100px">
            </el-table-column>
            <!-- stlTtlAmount 乘 taxRate + surchargeRate-->
            <el-table-column
                prop="eta"
                label="ETA">
                <template slot-scope="{ row }">
                    <span class="textHide" >{{row.eta}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="remarkss"
                label="备注" width="150px">
                <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-column
                fixed="right"
                label="操作"
                width="100" v-if="brfalse">
                <template slot-scope="scope">
                    <el-button type="text" size="small" :disabled="editSave" @click="deletefun(scope.row,scope.$index)">删除</el-button>
                </template>
            </el-table-column>


        </el-table>
    </div>
</template>

<script>
    import {getWorkDicts} from "@/api/system/dictbiz";
    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
    import {getRateList} from "@/api/iosBasicData/rateManagement";

    export default {
        components: {SearchQuery},
        props:{
            tableData:{
                type:Array,
                default:[],
            },
            brfalse:{
                type:Boolean,
                default:true,
            },
            handleSelectionData:{
                type:Array,
                default:[]
            },
            // 是否禁用
            editSave:{
                type:Boolean,
                default:false
            },
            settlementdistar:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                ifInvoiceData:[], // 是否数据
                invoicelosDara:[],// 发票
                curCodeData:[], // 币种
            }
        },
        created() {
            this.isSignforWorkDicts()
            this.invoicelosWorkDictsfun()
        },
        methods:{
            // 明细删除
            deletefun(row,index){
                this.$emit('deletefun',row.id,index)
            },
            // 币别切换
            corpChange(value,row){
                this.$set(row,'currentStlCurCode',value)
                if (value == 'CNY') {
                    this.$set(row,'currentStlAmountRMB',Number(row.amount) - Number(row.stlTtlAmount))
                }else {
                    this.$set(row,'currentStlAmountUSD',Number(row.amount) - Number(row.stlTtlAmount))
                }
            },
            // 接口请求
            // 是否接口
            isSignforWorkDicts(){
                getWorkDicts('ifInvoice').then(res=>{
                    this.ifInvoiceData = res.data.data
                })
            },
            // 发票
            invoicelosWorkDictsfun(){
                getWorkDicts('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"
            },
            // 更改表格颜色
            headerClassName(tab) {
                //颜色间隔
                let back = ""
                if (tab.columnIndex >= 0 && tab.column.level === 1) {
                    if (tab.columnIndex % 2 === 0) {
                        back = "back-one"
                    } else if (tab.columnIndex % 2 === 1) {
                        back = "back-two"
                    }
                }
                return back;
            },

            // 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 => 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:#7ebace;'
                }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;
}
</style>