107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
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="layout === 'full' ? 16 : 13" style="font-size: 14px;">
|
|
<div>
|
|
<span style="font-weight: bold;">{{ orgInfo.departName }}</span>
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="layout === 'full' ? 8 : 11" style="text-align: right;">
|
|
<div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px;">
|
|
<span v-if="isDirectiveMain" style="color: green; font-size: 12px; font-weight: bold; white-space: nowrap;">
|
|
标准指令库
|
|
</span>
|
|
<div class="zxClass" style="min-width: 35px;">{{ orgInfo.orgCode }}</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
<div style="position: relative;">
|
|
<div v-show="showDetail" style="text-align:center;position: absolute;top: 0px;right:0px">
|
|
<a-button type="link" size="small" @click.stop="handleDetail">详情</a-button>
|
|
</div>
|
|
<div>
|
|
<p>加盟时间：{{ orgInfo.franchiseTime?.substring(0, 10) }}</p>
|
|
<p>机构负责人：{{ orgInfo.orgLeader }}</p>
|
|
<p>负责人电话：{{ orgInfo.orgLeaderPhone }}</p>
|
|
<p class="ellipsis-one-lines" :title="orgInfo.comRegisterAddress">机构地址：{{ orgInfo.comRegisterAddress }}</p>
|
|
</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 },
|
|
showDetail: { type: Boolean, default: false },
|
|
clickable: { type: Boolean, default: false }
|
|
})
|
|
|
|
const emit = defineEmits(['click', 'detail'])
|
|
|
|
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 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ellipsis-one-lines {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style> |