hldy_vue/src/components/OrgCard/OrgCardCom.vue

<template>
  <a-card :class="{
    'selected-card': isSelected,
    'directive-selected-card': isDirectiveSelected,
    'org-card': clickable
  }" style="width: 100%; border-radius: 8px;" :style="{ cursor: clickable ? 'pointer' : 'default' }"
    :bodyStyle="{ padding: '24px' }" @click="handleClick">
    <div>
      <a-row style="font-weight: normal; margin-bottom: 12px;">
        <a-col :span="existTagFunc() ? 16 : 21">
          <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="existTagFunc() ? 8 : 3" style="text-align: right;">
          <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px;">
            <span v-if="isDirectiveMain"
              style="color: #909399; font-size: 12px; font-weight: bold; white-space: nowrap;">
              标准指令库
            </span>
            <span v-if="isElderTagMain"
              style="color: #909399; font-size: 12px; font-weight: bold; white-space: nowrap;">
              标准标签库
            </span>
            <div class="zxClass" :class="{ 'zxbkClass': existTagFunc() }" style="min-width: 35px;">{{ orgInfo.orgCode
            }}
            </div>
          </div>
        </a-col>
      </a-row>
      <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;">
          <span style="color: #909399;">加盟时间：{{ orgInfo.franchiseTime?.substring(0, 10) }}</span>
          <a-button style="font-size: 12px;" v-show="showDetail" type="link" size="small"
            @click.stop="handleDetail">了解更多</a-button>
        </div>
      </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 },
  clickable: { type: Boolean, default: false }
})

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

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

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

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

<style lang="less" scoped>
.zxClass {
  font-size: 12px;
  background-color: white;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  height: 25px;
  color: #7c7c7c;
  line-height: 25px;
  padding: 0 8px;
  flex-shrink: 0;
}

.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 {
  &:hover {
    border-color: #55a9f8;
    box-shadow: 0 2px 8px rgba(37, 149, 255, 0.3);
  }
}

: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>