rt-sim-training-client/src/views/components/limits/index.vue

<template>
    <div>
        <el-table :data="dataPostProcessor(courseModel.pmsList)" border :summary-method="getSummaries" show-summary
            style="width: 100%; margin-top: 20px">
            <el-table-column prop="index" label="索引" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column prop="forever" label="是否永久">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.forever?  'success': 'primary'" disable-transitions>{{$ConstSelect.translate(scope.row.forever,
                        'Whether')}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="总数量" />
            <el-table-column prop="remains" label="剩余数量" />
            <el-table-column prop="canDistribute" label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.canDistribute == true ? 'success':'primary'" disable-transitions>
                        {{computedName(scope.row.canDistribute, 'PermissionUseList')}}</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <transfer-draft ref="transfer" @QrCodeShow="QrCodeShow" @initLoadPage="initLoadPage"></transfer-draft>
        <distribute-draft ref="distribute" @QrCodeShow="QrCodeShow" @initLoadPage="initLoadPage"></distribute-draft>
        <qr-code ref="qrCode"></qr-code>
    </div>
</template>
<script>
    import TransferDraft from "./transfer";
    import DistributeDraft from "./distribute";
    import QrCode from "@/components/QrCode";

    export default {
        name: "LimitList",
        components: {
            TransferDraft,
            DistributeDraft,
            QrCode
        },
        props: {
            courseModel: {
                type: Object
            }
        },
        data() {
            return {
            };
        },
        mounted() {
        },
        methods: {
            computedName(prop, listType) {
                return this.$ConstSelect.translate(prop, listType);
            },
            initLoadPage() {
                this.$emit('initLoadPage');
            },
            dataPostProcessor(data) {
                let index = 0;
                if (data && data.length) {
                    data.map(elem => {
                        elem.index = ++index;
                    });
                }
                return data;
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                const needSumPropertys = ["remains", "total"];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = "合计";
                        return;
                    }
                    needSumPropertys.forEach(property => {
                        if (property === column.property) {
                            const values = data.map(item => Number(item[property]));
                            if (!values.every(value => isNaN(value))) {
                                let allow = 0, notAllow = 0;
                                data.forEach((item) => {
                                    if (item.canDistribute) {
                                        allow = allow + Number(item.remains)
                                    } else {
                                        notAllow = notAllow + Number(item.remains)
                                    }
                                });
                                sums[index] = `公用权限${allow}个, 专用权限${notAllow}个`;
                            }
                        }
                    });
                    if (!sums[index]) {
                        sums[index] = "-";
                    }
                });
                return sums;
            },
            transfer(courseModel) {
                if (this.$refs) {
                    this.$refs.transfer.doShow(courseModel);
                }
            },
            distribute(courseModel) {
                if (this.$refs) {
                    this.$refs.distribute.doShow(courseModel);
                }
            },
            QrCodeShow(data) {
                if (this.$refs && data) {
                    this.$refs.qrCode.doShow(data);
                }
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .menu li {
        border-right: solid white 1px;
    }

    ul {
        line-height: 22px;
        margin: 5px;
    }

    .noList {
        text-align: center;
        padding-top: 20px;
        font-size: 20px;
    }

    .btn-buy {
        width: 100%;
        display: flex;
        justify-content: center;
        transform: translateY(-40px);
    }
</style>