94 lines
3.1 KiB
Vue
94 lines
3.1 KiB
Vue
<template>
|
||
<div class="medical-card">
|
||
<div v-if="$slots.title"><slot name="title"></slot></div>
|
||
<div v-if="!$slots.title && title" class="title">{{ title }}</div>
|
||
<div v-for="(item, index) in cardList" :key="index">
|
||
<template v-if="item.hasOwnProperty('slot')">
|
||
<slot :name="item.slot" v-bind="item.value"></slot>
|
||
</template>
|
||
<template v-else>
|
||
<div v-if="item.component == 'Input'" class="input-box">
|
||
<div class="input-label">{{ item.label }}：</div>
|
||
<div class="input-value">{{ useShowValue(item.value) }}</div>
|
||
</div>
|
||
<div v-if="item.component == 'Textarea' || item.component == 'InputTextArea'" class="textarea-box">
|
||
<div class="textarea-label">{{ item.label }}：</div>
|
||
<div class="textarea-value">{{ useShowValue(item.value) }}</div>
|
||
</div>
|
||
<div v-if="item.component == 'Image'" class="input-box">
|
||
<div class="input-label">{{ item.label }}：</div>
|
||
<div>
|
||
<Image
|
||
:width="100"
|
||
:height="100"
|
||
style="margin: 0"
|
||
:src="getFileAccessHttpUrl(item.value)"
|
||
:fallback="getFamaleDefaultImage()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { Image } from 'ant-design-vue';
|
||
import { useShowValue } from '/@/views/emergency/personnelManagement/components/hooks';
|
||
import { getFamaleDefaultImage, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||
|
||
const props = defineProps({
|
||
list: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: () => {
|
||
return '';
|
||
},
|
||
},
|
||
});
|
||
const cardList = computed(() => props.list);
|
||
</script>
|
||
<style scoped lang="less">
|
||
.medical-card {
|
||
border: 1px solid #f0f0f0;
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
position: relative;
|
||
.title {
|
||
font-weight: bold;
|
||
line-height: 30px;
|
||
}
|
||
.input-box {
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
|
||
.input-label {
|
||
width: 100px;
|
||
text-align: right;
|
||
}
|
||
.input-value {
|
||
width: calc(100% - 100px);
|
||
}
|
||
}
|
||
.textarea-box {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
overflow: hidden;
|
||
flex-wrap: wrap;
|
||
.textarea-label {
|
||
width: 100px;
|
||
text-align: right;
|
||
}
|
||
.textarea-value {
|
||
width: calc(100% - 100px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|