<script lang="ts" setup>
|
import type { PropType } from 'vue';
|
|
import { computed } from 'vue';
|
|
import { $t } from '#/locales';
|
|
defineOptions({ name: 'ChildTableColumn' });
|
|
const props = defineProps({
|
data: { type: Array as PropType<any[]>, default: () => [] },
|
head: { type: Array as PropType<any[]>, default: () => [] },
|
defaultNumber: { type: Number, default: 3 },
|
expand: { type: Boolean, default: false },
|
showOverflow: { type: Boolean, default: true },
|
});
|
const emit = defineEmits(['toggleExpand', 'toDetail']);
|
|
const fewData = computed(() => (props.data ? props.data.slice(0, props.defaultNumber) : []));
|
|
function toggleExpand() {
|
emit('toggleExpand');
|
}
|
function toDetail(modelId, id, propsValue) {
|
emit('toDetail', modelId, id, propsValue);
|
}
|
</script>
|
|
<template>
|
<div class="child-table-column">
|
<template v-if="!expand">
|
<tr v-for="(item, index) in fewData" class="child-table__row" :key="index">
|
<td
|
v-for="(headItem, i) in head"
|
:key="i"
|
:style="{ width: `${headItem.width || headItem.minWidth}px`, 'text-align': headItem.align }"
|
:class="{ 'td-flex-1': !headItem.width }">
|
<div class="cell" v-if="headItem.jnpfKey === 'relationForm'">
|
<p class="link-text" :title="item[headItem.__vModel__]" @click="toDetail(headItem.modelId, item[`${headItem.__vModel__}_id`], headItem.propsValue)">
|
{{ item[headItem.__vModel__] }}
|
</p>
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'inputNumber'">
|
<jnpf-input-number v-model:value="item[headItem.__vModel__]" :precision="headItem.precision" :thousands="headItem.thousands" disabled detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'calculate'">
|
<jnpf-calculate
|
v-model:value="item[headItem.__vModel__]"
|
:is-storage="headItem.isStorage"
|
:precision="headItem.precision"
|
:thousands="headItem.thousands"
|
:round-type="headItem.roundType"
|
:type="headItem.type"
|
:date-cal-config="headItem.dateCalConfig"
|
detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'sign'">
|
<jnpf-sign v-model:value="item[headItem.__vModel__]" detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'signature'">
|
<jnpf-signature v-model:value="item[headItem.__vModel__]" detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'rate'">
|
<jnpf-rate v-model:value="item[headItem.__vModel__]" :count="headItem.count" :allow-half="headItem.allowHalf" disabled />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'slider'">
|
<jnpf-slider v-model:value="item[headItem.__vModel__]" :min="headItem.min" :max="headItem.max" :step="headItem.step" disabled />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'uploadImg'">
|
<jnpf-upload-img v-model:value="item[headItem.__vModel__]" disabled detailed simple v-if="item[headItem.__vModel__]?.length" />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'uploadFile'">
|
<jnpf-upload-file v-model:value="item[headItem.__vModel__]" disabled detailed simple v-if="item[headItem.__vModel__]?.length" />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'input'">
|
<jnpf-input
|
v-model:value="item[headItem.__vModel__]"
|
:use-mask="headItem.useMask"
|
:mask-config="headItem.maskConfig"
|
:show-overflow="showOverflow"
|
detailed />
|
</div>
|
<div class="cell" :class="{ ellipsis: showOverflow }" :title="item[headItem.__vModel__]" v-else>{{ item[headItem.__vModel__] }}</div>
|
</td>
|
</tr>
|
</template>
|
<template v-if="expand">
|
<tr v-for="(item, index) in data" class="child-table__row" :key="index">
|
<td
|
v-for="(headItem, i) in head"
|
:key="i"
|
:style="{ width: `${headItem.width || headItem.minWidth}px`, 'text-align': headItem.align }"
|
:class="{ 'td-flex-1': !headItem.width }">
|
<div class="cell" v-if="headItem.jnpfKey === 'relationForm'">
|
<p class="link-text" :title="item[headItem.__vModel__]" @click="toDetail(headItem.modelId, item[`${headItem.__vModel__}_id`], headItem.propsValue)">
|
{{ item[headItem.__vModel__] }}
|
</p>
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'inputNumber'">
|
<jnpf-input-number v-model:value="item[headItem.__vModel__]" :precision="headItem.precision" :thousands="headItem.thousands" disabled detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'calculate'">
|
<jnpf-calculate
|
v-model:value="item[headItem.__vModel__]"
|
:is-storage="headItem.isStorage"
|
:precision="headItem.precision"
|
:thousands="headItem.thousands"
|
:round-type="headItem.roundType"
|
detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'sign'">
|
<jnpf-sign v-model:value="item[headItem.__vModel__]" detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'signature '">
|
<jnpf-signature v-model:value="item[headItem.__vModel__]" detailed />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'rate'">
|
<jnpf-rate v-model:value="item[headItem.__vModel__]" :count="headItem.count" :allow-half="headItem.allowHalf" disabled />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'slider'">
|
<jnpf-slider v-model:value="item[headItem.__vModel__]" :min="headItem.min" :max="headItem.max" :step="headItem.step" disabled />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'uploadImg'">
|
<jnpf-upload-img v-model:value="item[headItem.__vModel__]" disabled detailed simple v-if="item[headItem.__vModel__]?.length" />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'uploadFile'">
|
<jnpf-upload-file v-model:value="item[headItem.__vModel__]" disabled detailed simple v-if="item[headItem.__vModel__]?.length" />
|
</div>
|
<div class="cell" v-else-if="headItem.jnpfKey === 'input'">
|
<jnpf-input
|
v-model:value="item[headItem.__vModel__]"
|
:use-mask="headItem.useMask"
|
:mask-config="headItem.maskConfig"
|
:show-overflow="showOverflow"
|
detailed />
|
</div>
|
<div class="cell" :class="{ ellipsis: showOverflow }" :title="item[headItem.__vModel__]" v-else>{{ item[headItem.__vModel__] }}</div>
|
</td>
|
</tr>
|
</template>
|
<div class="expand-more-btn" v-if="data && data.length > defaultNumber">
|
<a-button v-if="expand" type="link" @click="toggleExpand">{{ $t('views.dynamicModel.hideSome') }}</a-button>
|
<a-button v-if="!expand" type="link" @click="toggleExpand">{{ $t('views.dynamicModel.showMore') }}</a-button>
|
</div>
|
</div>
|
</template>
|
