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

138 lines
4.2 KiB
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;
}
.btn-buy {
width: 100%;
display: flex;
justify-content: center;
transform: translateY(-40px);
}
</style>