71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<div class="segment-descriptions">
|
|
<el-descriptions :column="column" :border="border">
|
|
<template #title>
|
|
<slot name="title" :model="model"></slot>
|
|
</template>
|
|
<template #extra>
|
|
<slot name="extra" :model="model"></slot>
|
|
</template>
|
|
<el-descriptions-item :label="schema.label" v-for="schema in visibleSchemas" :span="getSpan(schema)">
|
|
<slot name="default" :model="model" :schema="schema">
|
|
<cell :schema="schema" :model="model"></cell>
|
|
</slot>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<div class="segment-descriptions_footer">
|
|
<slot name="footer" :model="model"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import Cell from './parts/Cell.vue';
|
|
import { checkSchemaVisible } from './libs/form';
|
|
import { modelValueOf } from './libs/model';
|
|
|
|
const props = defineProps({
|
|
size: {
|
|
type: String,
|
|
},
|
|
schemas: {
|
|
type: Array,
|
|
},
|
|
scenario: {
|
|
type: String,
|
|
default: 'view',
|
|
},
|
|
model: {
|
|
type: Object
|
|
},
|
|
column: {
|
|
type: Number,
|
|
default: 2,
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
const getSpan = (schema) => {
|
|
if (['textarea'].indexOf(schema.format) > -1) {
|
|
return props.column;
|
|
} else {
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
const visibleSchemas = computed(() => {
|
|
let modelValue = modelValueOf(props.model);
|
|
return props.schemas.filter(v => {
|
|
if (Array.isArray(v.scenarios)) {
|
|
if (v.scenarios.indexOf(props.scenario) > -1) {
|
|
return checkSchemaVisible(v, modelValue);
|
|
}
|
|
}
|
|
return false;
|
|
})
|
|
})
|
|
</script> |