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="`${$t('global.index')}`" />
      <el-table-column prop="startTime" :label="`${$t('permission.startTime')}`" />
      <el-table-column prop="endTime" :label="`${$t('permission.endTime')}`">
        <template slot-scope="scope">
          <span>{{ scope.row.endTime? scope.row.endTime: $t('global.perpetual') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="amount" :label="$t('global.permissionAllNum')" />
      <el-table-column prop="remains" :label="$t('global.remains')" />
      <el-table-column prop="canDistribute" :label="$t('global.status')" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.canDistribute == true ? 'success':'danger'" disable-transitions>
            {{ computedName(scope.row.canDistribute, 'PermissionUseList') }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <distribute-draft ref="distribute" @QrCodeShow="QrCodeShow" @initLoadPage="initLoadPage" />
    <qr-code ref="qrCode" />
  </div>
</template>
<script>
import DistributeDraft from './distribute';
import QrCode from '@/components/QrCode';

export default {
    name: 'LimitList',
    components: {
        DistributeDraft,
        QrCode
    },
    props: {
        courseModel: {
            type: Object,
            required: true
        }
    },
    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] = this.$t('global.total');
                    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; let notAllow = 0;
                            data.forEach((item) => {
                                if (item.canDistribute) {
                                    allow = allow + Number(item.remains);
                                } else {
                                    notAllow = notAllow + Number(item.remains);
                                }
                            });
                            sums[index] = this.$t('global.hasPermissionTip').replace('{0}', allow).replace('{1}', notAllow);
                        }
                    }
                });
                if (!sums[index]) {
                    sums[index] = '-';
                }
            });
            return sums;
        },
        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;
    }
</style>