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

<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" ></el-table-column>
            <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="quantity" 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="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>
</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;
                });
            }
        },
    }
</script>

<style scoped>
.textHide {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>