hldy_vue/src/components/OrgCard/OrgCardCom.vue

<template>
  <a-card :class="{
    'selected-card': isSelected,
    'directive-selected-card': isDirectiveSelected,
    'org-card': true
  }" style="width: 100%; border-radius: 8px;" :style="{ cursor: clickable ? 'pointer' : 'default' }"
    :bodyStyle="{ padding: '24px 24px 0 24px' }" @click="handleClick">
    <template #title>
      <a-row style="font-weight: normal; ">
        <a-col :span="16">
          <div>
            <span class="ellipsis-one-lines1" :title="orgInfo.departName" style="font-size: 17px; font-weight: bold;">{{
              orgInfo.departName
            }}</span>
          </div>
        </a-col>
        <a-col :span="8" style="text-align: right;">
          <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px;">
            <!-- <span v-if="isDirectiveMain && showMainTile"
              style="color: #909399; font-size: 12px; font-weight: bold; white-space: nowrap;">
              标准指令库
            </span>
            <span v-if="isElderTagMain && showMainTile"
              style="color: #909399; font-size: 12px; font-weight: bold; white-space: nowrap;">
              标准标签库
            </span> -->
            <div style="min-width: 35px;margin-top:3px;">机构编码:{{ orgInfo.orgCode }}
            </div>
          </div>
        </a-col>
      </a-row>
    </template>


    <div style="position: relative;">
      <div>
        <div><span style="color: #909399;">机构负责人：</span>{{ orgInfo.orgLeader }}</div>
        <div><span style="color: #909399;">负责人电话：</span>{{ orgInfo.orgLeaderPhone }}</div>
      </div>
      <div class="org-address">
        <span class="ellipsis-one-lines2" :title="orgInfo.comRegisterAddress">{{ orgInfo.comRegisterAddress }}</span>
      </div>
      <!-- <div
        style="font-size: 12px; display: flex; justify-content: space-between; align-items: center; margin-top: 12px;"> -->
        <a-row style=" margin-top: 12px;font-size: 12px;">
          <a-col :span="12">
            <span style="color: #909399;">加盟时间：{{ orgInfo.franchiseTime?.substring(0, 10) }}</span>
          </a-col>
          <a-col :span="12" style="text-align: right;">
            <a-button style="font-size: 12px;" v-show="showDetail" type="link" size="small"
              @click.stop="handleDetail">查看详情</a-button>
            <a-button style="font-size: 12px;" v-show="showHldy" type="link" size="small"
              @click.stop="handleHldy">护理单元</a-button>
            <a-button style="font-size: 12px;" v-show="showInfo" type="link" size="small"
              @click.stop="handleInfo">查看详情</a-button>
          </a-col>
        </a-row>
        
      <!-- </div> -->
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  orgInfo: { type: Object, required: true },
  layout: { type: String, default: 'full' },
  isSelected: { type: Boolean, default: false },
  isDirectiveSelected: { type: Boolean, default: false },
  isDirectiveMain: { type: Boolean, default: false },//标准指令库
  isElderTagMain: { type: Boolean, default: false },//标准标签库
  showDetail: { type: Boolean, default: false },
  showInfo: { type: Boolean, default: false },
  showHldy: { type: Boolean, default: false },
  clickable: { type: Boolean, default: false },
  showMainTile: { type: Boolean, default: true },//是否展示标准指令库/标签库
})

const emit = defineEmits(['click', 'detail', 'info','hldy'])

const existTagFunc = () => {
  return props.isDirectiveMain || props.isElderTagMain
}

const handleClick = () => {
  emit('click', props.orgInfo)
}

const handleDetail = () => {
  emit('detail', props.orgInfo)
}

const handleInfo = () => {
  emit('info', props.orgInfo)
}
const handleHldy = () => {
  emit('hldy', props.orgInfo)
}
</script>

<style lang="less" scoped>
.zxClass {
  font-size: 12px;
  background: linear-gradient(to right, #1ea0fa, #017de9);
  border-radius: 8px;
  height: 25px;
  color: white;
  line-height: 25px;
  padding: 0 10px;
}

.zxbkClass {
  background-color: #F5F7FF;
}

.selected-card {
  border: 2px solid #1890ff;
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
}

.directive-selected-card {
  border: 2px solid #1890FF;
  box-shadow: 0 0 8px rgba(37, 149, 255, 0.3);
}


.org-card {
  margin-bottom: 16px;
  border-radius: 8px;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;

  &:hover {
    // transform: translateY(-4px);
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15);
    // background: radial-gradient(circle at center, #c7e6ff 0%, #d4eeff 70%, #e4f0ff 100%);
  }

  :deep(.ant-card-head) {
    border-bottom: 1px solid #f0f0f0;
    padding: 0 16px;
    min-height: 48px;

    .ant-card-head-title {
      padding: 12px 0;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}


:deep .ant-divider {
  margin: 0 0 8px 0;
}

.org-address {
  width: 100%;
  height: 65px;
  background-color: #f8fbff;
  background-image: url('./orgaddressbk.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 13px;
  padding-right: 100px;
  color: #696c7f;
  display: flex;
  align-items: center;
  margin-top: 10px;
  border-radius: 10px;
  font-size: 12.5px;
}

.ellipsis-one-lines1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-one-lines2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.8;
}
</style>