hldy_vue/src/components/OrgCard/OrgCardEmployees.vue

<template>
  <a-card :class="{
    'selected-card': orgInfo.izOnline== 1,
    '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="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>
    </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;">
        <span style="color: #909399;">入职时间：{{ orgInfo.entryTime?.substring(0, 10) }}</span>
      </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: 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 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>