<template>
|
<el-form class="app-form-details" ref="formRef" :model="$props.model" v-bind="$attrs">
|
<el-row>
|
<template v-for="field in $props.fields" :key="field.prop">
|
<el-col v-bind="field?.col">
|
|
<slot
|
:name="field.prop"
|
:model="$props.model"
|
:field="field"
|
v-if="field.type === 'slot'"
|
/>
|
|
<el-form-item
|
v-if="field.type === 'el-input'"
|
v-bind="field.item"
|
>
|
<template #label="scope">
|
<app-text-ellipsis :value="scope.label" class="label"/>
|
</template>
|
<app-text-ellipsis :value="formatData(field.format, $props.model[field.prop])" class="value"/>
|
</el-form-item>
|
|
</el-col>
|
</template>
|
</el-row>
|
</el-form>
|
</template>
|
|
<script setup>
|
|
import {context} from '@/hooks';
|
|
const {useForceUpdate} = context;
|
|
/**
|
* field 类型 type
|
* @type {UnwrapNestedRefs<*[]>}
|
*/
|
|
const props = defineProps({
|
fields: {
|
type: Array,
|
default: []
|
},
|
model: {
|
type: Object,
|
default: {}
|
}
|
});
|
|
const [$props, forceUpdate] = useForceUpdate(props);
|
|
const $forceUpdate = forceUpdate
|
|
const formatData = (format, data) => {
|
return format ? format(data) : (data || '')
|
}
|
|
const setModel = (model) => {
|
$props.model = model;
|
}
|
/**
|
* 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
|
*/
|
defineExpose({
|
|
$forceUpdate,
|
setModel
|
});
|
|
</script>
|
|
<style lang='scss' scoped>
|
.row-bg {
|
height: 100px;
|
}
|
|
.app-form-details {
|
background: #fff;
|
|
.label {
|
color: rgba(0, 0, 0, 0.45);
|
}
|
|
.value {
|
color: rgba(0, 0, 0, 0.88);
|
}
|
}
|
</style>
|
|
|
<style lang='scss'>
|
|
.app-form-details {
|
|
.label {
|
color: rgba(0, 0, 0, 0.45);
|
}
|
|
.value {
|
color: rgba(0, 0, 0, 0.88);
|
}
|
}
|
</style>
|
