|
@@ -0,0 +1,289 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="card">
|
|
|
|
|
+ <div class="card-head">
|
|
|
|
|
+ <div class="card-head_label"> {{ title }}</div>
|
|
|
|
|
+ <div class="flex card-head_value">
|
|
|
|
|
+ <slot name="headRight" />
|
|
|
|
|
+ <i :class="['iconfont', icon]" v-if="icon" @click="handleIcon" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <Row class="card-body" v-if="data.length">
|
|
|
|
|
+ <Row
|
|
|
|
|
+ v-for="item in data"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ :class="['w-full', data.length > 1 ? 'card-body-list' : '']"
|
|
|
|
|
+ >
|
|
|
|
|
+ <Col class="card-body_left" :span="item.right.show ? 20 : 24">
|
|
|
|
|
+ <Row class="w-full">
|
|
|
|
|
+ <Col
|
|
|
|
|
+ :span="cItem?.span || wrapSpan"
|
|
|
|
|
+ class="card-body-item"
|
|
|
|
|
+ v-for="cItem in item.data"
|
|
|
|
|
+ :key="cItem.label"
|
|
|
|
|
+ :style="{ display: cItem.hidden ? 'none' : 'block' }"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="card-body-item_label" v-if="cItem.label">{{ cItem.label }}</div>
|
|
|
|
|
+ <div class="card-body-item_value">
|
|
|
|
|
+ <div v-if="cItem.value">{{ cItem.value }}</div>
|
|
|
|
|
+ <div v-if="cItem.tags" class="flex ml-3">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="t in cItem.tags"
|
|
|
|
|
+ :key="t.id"
|
|
|
|
|
+ :class="['card-body-item_tag', t.type ? 'card-body-item_tag--' + t.type : '']"
|
|
|
|
|
+ :style="{
|
|
|
|
|
+ color: t.fontColor,
|
|
|
|
|
+ backgroundColor: t.bgColor,
|
|
|
|
|
+ }"
|
|
|
|
|
+ :title="t.label"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ t.label }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <slot name="tags" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </Col>
|
|
|
|
|
+ </Row>
|
|
|
|
|
+ </Col>
|
|
|
|
|
+ <Col class="card-body_right" v-if="item.right.show" span="4">
|
|
|
|
|
+ <div>{{ item.right.date ? item.right.date + '/' : '' }} {{ item.right.doctor }}</div>
|
|
|
|
|
+ <div class="flex">
|
|
|
|
|
+ <div v-if="item.right.edit" class="card-body_right-btn" @click="handleEdit(item)">
|
|
|
|
|
+ <i class="iconfont icon-xt-details_edit_default" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-if="item.right.delete" class="card-body_right-btn" @click="handleDel(item)">
|
|
|
|
|
+ <!-- 删除 -->
|
|
|
|
|
+ <i class="iconfont icon-xt-details_delete_default" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </Col>
|
|
|
|
|
+ </Row>
|
|
|
|
|
+ </Row>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+ import { Row, Col } from 'ant-design-vue';
|
|
|
|
|
+ interface Props {
|
|
|
|
|
+ id?: string;
|
|
|
|
|
+ // 标题
|
|
|
|
|
+ title: string;
|
|
|
|
|
+ // icon
|
|
|
|
|
+ icon?: string | unknown;
|
|
|
|
|
+ iconType?: string;
|
|
|
|
|
+ // 每行宽度
|
|
|
|
|
+ wrapSpan?: number;
|
|
|
|
|
+ type?: string;
|
|
|
|
|
+ // 数据集
|
|
|
|
|
+ data: Array<{
|
|
|
|
|
+ id?: string;
|
|
|
|
|
+ right?: {
|
|
|
|
|
+ show: boolean;
|
|
|
|
|
+ date?: string;
|
|
|
|
|
+ doctor?: string;
|
|
|
|
|
+ edit?: boolean;
|
|
|
|
|
+ delete?: boolean;
|
|
|
|
|
+ span?: number;
|
|
|
|
|
+ };
|
|
|
|
|
+ data: Array<{
|
|
|
|
|
+ filed?: string;
|
|
|
|
|
+ label: string;
|
|
|
|
|
+ value?: string;
|
|
|
|
|
+ span?: number | unknown;
|
|
|
|
|
+ dict?: boolean | unknown;
|
|
|
|
|
+ dictName?: string | unknown;
|
|
|
|
|
+ dictField?: string | unknown;
|
|
|
|
|
+ hidden?: boolean | unknown;
|
|
|
|
|
+ tags?:
|
|
|
|
|
+ | Array<{
|
|
|
|
|
+ id: string;
|
|
|
|
|
+ label: string;
|
|
|
|
|
+ type: string | 'warning' | 'error' | 'success' | 'primary' | 'muted';
|
|
|
|
|
+ fontColor: string;
|
|
|
|
|
+ bgColor: string;
|
|
|
|
|
+ }>
|
|
|
|
|
+ | unknown;
|
|
|
|
|
+ }>;
|
|
|
|
|
+ }>;
|
|
|
|
|
+ }
|
|
|
|
|
+ const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
+ title: '标题',
|
|
|
|
|
+ wrapSpan: 6,
|
|
|
|
|
+ type: '',
|
|
|
|
|
+ data: () => [],
|
|
|
|
|
+ });
|
|
|
|
|
+ const emit = defineEmits(['edit', 'delete', 'icon']);
|
|
|
|
|
+
|
|
|
|
|
+ function handleEdit(item) {
|
|
|
|
|
+ const info = { id: props.id, type: props.type, action: 'edit', data: item };
|
|
|
|
|
+ emit('edit', info);
|
|
|
|
|
+ }
|
|
|
|
|
+ function handleDel(item) {
|
|
|
|
|
+ const info = { id: props.id, type: props.type, action: 'delete', data: item };
|
|
|
|
|
+ emit('delete', info);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function handleIcon() {
|
|
|
|
|
+ const info = { id: props.id, type: props.type, action: props.iconType || 'icon' };
|
|
|
|
|
+ emit('icon', info);
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
|
+ .card {
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ border: 1px solid #efefef;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ &-head {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ height: 56px;
|
|
|
|
|
+ background: #f6f8fa;
|
|
|
|
|
+ box-shadow: 0 1px 0 0 #efefef;
|
|
|
|
|
+ border-radius: 3px 3px 0 0;
|
|
|
|
|
+ padding: 0 20px;
|
|
|
|
|
+
|
|
|
|
|
+ &_label {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #000a18;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &_value {
|
|
|
|
|
+ & .iconfont {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-right: 16px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ width: 32px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 32px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #0075ff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-body {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 20px 20px 0;
|
|
|
|
|
+
|
|
|
|
|
+ &_right {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #818694;
|
|
|
|
|
+
|
|
|
|
|
+ &-btn {
|
|
|
|
|
+ // margin-right: 16px;
|
|
|
|
|
+ color: #3d4155;
|
|
|
|
|
+ background: #f4f6f9;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ width: 32px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 32px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ margin-left: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: #0075ff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-list {
|
|
|
|
|
+ border-bottom: 1px solid rgb(238 240 241 / 100%);
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ border-bottom: 0;
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
+
|
|
|
|
|
+ &_label {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #818694;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &_value {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #000a18;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &_tag {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ padding: 1px 10px;
|
|
|
|
|
+ margin: 0 4px;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ max-width: 200px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+
|
|
|
|
|
+ &:first-child {
|
|
|
|
|
+ margin-left: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &--warning {
|
|
|
|
|
+ background: #fff6e7;
|
|
|
|
|
+ color: #f90;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &--error {
|
|
|
|
|
+ background: #ffeee3;
|
|
|
|
|
+ color: #ff5d39;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &--success {
|
|
|
|
|
+ color: #19be6b;
|
|
|
|
|
+ background: #ecf8f2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &--primary {
|
|
|
|
|
+ color: #0075ff;
|
|
|
|
|
+ background: #e5f1ff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &--muted {
|
|
|
|
|
+ color: #828890;
|
|
|
|
|
+ background: #e1e3e7;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|