tire-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="{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
                v-if="brfalse"
                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
                prop="lineNo"
                label="行号" width="50px">
            </el-table-column>
            <el-table-column
                prop="isCleared"
                label="核销">
                <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="lineNo"
                label="源业务编号" width="120px">
                <template slot-scope="{ row }">
                    <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="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="accBillNo"
                label="账单编号" width="140px">
            </el-table-column>
            <el-table-column
                prop="corpCnName"
                label="客户简称" width="130px">
                <template slot-scope="{ row }">
                    <avue-text-ellipsis :text="row.corpCnName" :height="50" :width="130">
                        <small slot="more">...</small>
                    </avue-text-ellipsis>
                </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="dc"
                label="收/付" width="120px">
                <template slot-scope="{ row }">
                    <span>{{row.dc}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="currentStlExrate"
                label="汇率">
            </el-table-column>
            <!--<el-table-column-->
            <!--    label="本次结算币种"-->
            <!--    prop="currentStlCurCode" width="130px">-->
            <!--    <template slot-scope="{row}">-->
            <!--        <search-query :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>-->
            <!--    </template>-->
            <!--</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'"
                              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'"
                              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 label="本次结算金额(净额)">-->
            <!--    &lt;!&ndash;默认应结算 可以修改&ndash;&gt;-->
            <!--    &lt;!&ndash;currentStlAmountNet&ndash;&gt;-->
            <!--    <el-table-column-->
            <!--        prop="currentStlAmountNetRMB"-->
            <!--        label="RMB" width="100px">-->
            <!--        <template slot-scope="scope">-->
            <!--            <el-input style="width: 100%;" v-model="scope.row.currentStlAmountNetRMB" v-if="brfalse"-->
            <!--                      size="mini" autocomplete="off"-->
            <!--                      clearable placeholder="请输入USD" >-->
            <!--            </el-input>-->
            <!--            <span v-else>{{scope.row.currentStlAmountNetRMB}}</span>-->
            <!--        </template>-->
            <!--    </el-table-column>-->
            <!--    <el-table-column-->
            <!--        prop="currentStlAmountNetUSD"-->
            <!--        label="USD" width="100px">-->
            <!--        <template slot-scope="scope">-->
            <!--            <el-input style="width: 100%;" v-model="scope.row.currentStlAmountNetUSD" v-if="brfalse"-->
            <!--                      size="mini" autocomplete="off"-->
            <!--                      clearable placeholder="请输入USD" >-->
            <!--            </el-input>-->
            <!--            <span v-else>{{scope.row.currentStlAmountNetUSD}}</span>-->
            <!--        </template>-->
            <!--    </el-table-column>-->
            <!--</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">
            </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="目的港">
            </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 label="应结算金额(净额)">-->
            <!--    &lt;!&ndash;amountNet&ndash;&gt;-->
            <!--    <el-table-column-->
            <!--        prop="amountNetRMB"-->
            <!--        label="RMB">-->
            <!--    </el-table-column>-->
            <!--    <el-table-column-->
            <!--        prop="amountNetUSD"-->
            <!--        label="USD">-->
            <!--    </el-table-column>-->
            <!--</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>
            <!--<el-table-column label="已结算金额(净额)">-->
            <!--    &lt;!&ndash;自己起的 stlTtlAmountNet&ndash;&gt;-->
            <!--    <el-table-column-->
            <!--        prop="stlTtlAmountNetRMB"-->
            <!--        label="RMB">-->
            <!--    </el-table-column>-->
            <!--    <el-table-column-->
            <!--        prop="stlTtlAmountNetUSD"-->
            <!--        label="USD">-->
            <!--    </el-table-column>-->
            <!--</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">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @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
            }
        },
        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"
            },

            // 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; //也可以再加上其他类名 如果有需求的话
            },
        },
        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>