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('global.startTime')}`" />
      <el-table-column prop="endTime" :label="`${$t('global.endTime')}`" />
      <el-table-column prop="forever" :label="`${$t('global.isForever')}`">
        <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="$t('global.total')" />
      <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':'primary'" disable-transitions>
            {{ computedName(scope.row.canDistribute, 'PermissionUseList') }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <transfer-draft ref="transfer" @QrCodeShow="QrCodeShow" @initLoadPage="initLoadPage" />
    <distribute-draft ref="distribute" @QrCodeShow="QrCodeShow" @initLoadPage="initLoadPage" />
    <qr-code ref="qrCode" />
  </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,
			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;
		},
		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>