Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | 7x 7x 7x | <template>
<div :class="$style.root" direction="vertical" gap="small" :size="size">
<u-form-table :class="$style.table" :size="size" v-bind="$attrs">
<thead><tr>
<th ref="th" v-for="(columnVM, columnIndex) in columnVMs"
:vusion-scope-id="columnVM.$vnode.context.$options._scopeId"
:vusion-node-path="columnVM.$attrs['vusion-node-path']"
:width="columnVM.width">
<f-slot name="title" :vm="columnVM" :props="{ columnVM, columnIndex }">
<span>{{ columnVM.title }}</span>
</f-slot>
</th>
<th :class="$style['last-column']" :dynamic="dynamic" :custom="!!$scopedSlots['last-column']" :style="lastColumnStyle"></th>
</tr></thead>
<tbody>
<u-form-table-view-row :class="$style.row" v-for="(item, rowIndex) in currentData" :key="getKey(item, rowIndex)" :muted="muted">
<template v-if="$env.VUE_APP_DESIGNER">
<td :class="$style.cell"
v-for="(columnVM, columnIndex) in columnVMs"
:is-sub="columnVM.$attrs['is-sub']"
:vusion-scope-id="columnVM.$vnode.context.$options._scopeId"
:vusion-node-path="columnVM.$attrs['vusion-node-path']"
:vusion-node-tag="columnVM.$attrs['vusion-node-tag']"
:ellipsis="columnVM.ellipsis"
v-ellipsis-title>
<div vusion-slot-name="cell" :plus-empty="columnVM.$attrs['plus-empty']">
<u-validator display="block" :label="columnVM.title" :action="columnVM.action"
:rules="columnVM.rules" :muted="columnVM.muted"
:ignore-validation="columnVM.ignoreValidation"
:validating-options="Object.assign({ data: currentData, item, rowIndex }, columnVM.validatingOptions)"
:validating-value="columnVM.validatingValue"
:validating-process="columnVM.validatingProcess">
<span v-if="columnVM.type === 'index'">{{ columnVM.startIndex + rowIndex }}</span>
<f-slot name="cell" :vm="columnVM" :props="{ item, value: $at(item, columnVM.field), columnVM, rowIndex, columnIndex }">
<span>{{ columnVM.currentFormatter.format($at(item, columnVM.field)) }}</span>
</f-slot>
</u-validator>
</div>
</td>
</template>
<template v-else>
<td :class="$style.cell" v-for="(columnVM, columnIndex) in columnVMs" :ellipsis="columnVM.ellipsis" v-ellipsis-title>
<u-validator display="block" :label="columnVM.title" :action="columnVM.action"
:rules="columnVM.rules" :muted="columnVM.muted"
:ignore-validation="columnVM.ignoreValidation"
:validating-options="Object.assign({ data: currentData, item, rowIndex }, columnVM.validatingOptions)"
:validating-value="columnVM.validatingValue"
:validating-process="columnVM.validatingProcess">
<span v-if="columnVM.type === 'index'">{{ columnVM.startIndex + rowIndex }}</span>
<f-slot name="cell" :vm="columnVM" :props="{ item, value: $at(item, columnVM.field), columnVM, rowIndex, columnIndex }">
<span>{{ columnVM.currentFormatter.format($at(item, columnVM.field)) }}</span>
</f-slot>
</u-validator>
</td>
</template>
<template slot="last-column" v-if="dynamic">
<slot name="last-column" :item="item" :row-index="rowIndex">
<u-form-table-remove-button @click="remove(rowIndex)" :disabled="currentData.length <= minCount || item.disabled"></u-form-table-remove-button>
</slot>
</template>
</u-form-table-view-row>
</tbody>
</u-form-table>
<u-form-table-add-button :class="$style['add-button']" v-if="showAddButton && dynamic" @click="add()" :disabled="currentData.length >= maxCount">{{ $tt('add') }}</u-form-table-add-button>
<slot></slot>
</div>
</template>
<script>
import i18n from './i18n';
import MDynamic from '../m-dynamic.vue';
import UValidator from '../u-validator.vue';
import i18nMixin from '../../mixins/i18n';
export default {
name: 'u-form-table-view',
// i18n,
mixins: [MDynamic, UValidator, i18nMixin('u-form-table-view')],
props: {
border: { type: Boolean, default: false },
dynamic: { type: Boolean, default: false },
validateOnAdd: { type: Boolean, default: true },
size: String,
showAddButton: { type: Boolean, default: true },
muted: String,
lastColumnStyle: Object,
},
data() {
return { columnVMs: [] };
},
watch: {
columnVMs(columnVMs) {
this.$nextTick(() => {
this.$refs.th
&& this.$refs.th.forEach((thEl, index) => {
thEl.__vue__ = columnVMs[index];
});
});
},
},
created() {
if (this.validateOnAdd)
this.$on('add', () => this.validate());
},
};
</script>
<style module>
.root {
width: 580px;
}
.root[size="full"] {
width: 100%;
}
.root[size="mini"] {
width: auto;
}
.last-column {
width: 0;
}
.last-column[dynamic] {
width: 40px;
}
.last-column[custom] {
width: auto;
}
.add-button {
margin-top: var(--space-small);
}
.root[size="mini"] .add-button {
height: var(--button-height-mini);
line-height: calc(var(--button-height-mini) - var(--button-border-width) * 2 - var(--button-padding-y) * 2);
padding: 0 var(--button-padding-x-mini);
font-size: var(--button-font-size-mini);
}
</style>
|