feat：新增卡片、状态组件
This commit is contained in:
blp
parent
cb8f393a17
commit
0cdd32319a
|
|
@ -7,6 +7,7 @@ export {}
|
|||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
ABadge: typeof import('ant-design-vue/es')['Badge']
|
||||
ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
|
||||
ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
|
|
@ -37,7 +38,10 @@ declare module '@vue/runtime-core' {
|
|||
ATabPane: typeof import('ant-design-vue/es')['TabPane']
|
||||
ATabs: typeof import('ant-design-vue/es')['Tabs']
|
||||
ATextarea: typeof import('ant-design-vue/es')['Textarea']
|
||||
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
||||
AUpload: typeof import('ant-design-vue/es')['Upload']
|
||||
BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
|
||||
CardBox: typeof import('./src/components/CardBox/index.vue')['default']
|
||||
GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
|
||||
MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<a-badge
|
||||
:status="statusNames ? statusNames[status] : 'default'"
|
||||
:text="text"
|
||||
></a-badge>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { StatusColorEnum } from '@/utils/consts.ts';
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
status: {
|
||||
type: String || Number,
|
||||
default: 'default',
|
||||
validator: (value) => {
|
||||
// 这个值必须匹配下列字符串中的一个
|
||||
return Object.keys(StatusColorEnum).includes(value);
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 自定义status值颜色
|
||||
* @example {
|
||||
* 1: 'success',
|
||||
* 0: 'error'
|
||||
* }
|
||||
*/
|
||||
statusNames: { type: Object },
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<div
|
||||
class="card-warp"
|
||||
:class="{
|
||||
hover: maskShow ? 'hover' : '',
|
||||
active: actived ? 'active' : '',
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
class="card-content"
|
||||
@mouseenter="setMaskShow(true)"
|
||||
@mouseleave="setMaskShow(false)"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<!-- 图片 -->
|
||||
<div class="card-item-avatar">
|
||||
<slot name="img"> </slot>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<!-- 内容 -->
|
||||
<slot name="content"></slot>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 勾选 -->
|
||||
<div v-if="actived" class="checked-icon">
|
||||
<div>
|
||||
<CheckOutlined />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态 -->
|
||||
<div
|
||||
v-if="showStatus"
|
||||
class="card-state"
|
||||
:class="statusNames ? statusNames[status] : ''"
|
||||
>
|
||||
<div class="card-state-content">
|
||||
<BadgeStatus
|
||||
:status="status"
|
||||
:text="statusText"
|
||||
:statusNames="statusNames"
|
||||
></BadgeStatus>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
v-if="showMask"
|
||||
class="card-mask"
|
||||
:class="maskShow ? 'show' : ''"
|
||||
>
|
||||
<slot name="mask"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<slot name="botton-tool">
|
||||
<div v-if="showTool" class="card-tools">
|
||||
<div
|
||||
v-for="item in actions"
|
||||
:key="item.key"
|
||||
class="card-button"
|
||||
:class="{
|
||||
delete: item.key === 'delete',
|
||||
}"
|
||||
>
|
||||
<a-tooltip v-if="item.disabled === true">
|
||||
<template #title>{{ item.message }}</template>
|
||||
<a-button :disabled="item.disabled">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
<span>{{ item.label }}</span>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-button v-else :disabled="item.disabled">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
<span>{{ item.label }}</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SearchOutlined, CheckOutlined } from '@ant-design/icons-vue';
|
||||
import BadgeStatus from '@/components/BadgeStatus/index.vue';
|
||||
import { StatusColorEnum } from '@/utils/consts.ts';
|
||||
|
||||
type EmitProps = {
|
||||
(e: 'update:modelvalue', data: string | number): void;
|
||||
(e: 'actived', data: boolean): void;
|
||||
};
|
||||
|
||||
const emit = defineEmits<EmitProps>();
|
||||
|
||||
const props = defineProps({
|
||||
showStatus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showTool: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showMask: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
statusText: {
|
||||
type: String,
|
||||
default: '正常',
|
||||
},
|
||||
status: {
|
||||
type: [String, Number],
|
||||
default: 'default',
|
||||
},
|
||||
statusNames: {
|
||||
type: Object,
|
||||
},
|
||||
actions: {
|
||||
type: Array as any,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const maskShow = ref(false);
|
||||
const actived = ref(false);
|
||||
|
||||
const setMaskShow = (val: boolean) => {
|
||||
maskShow.value = val;
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
actived.value = !actived.value;
|
||||
emit('actived', actived.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
.checked-icon {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
bottom: -22px;
|
||||
z-index: 2;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
background-color: #2f54eb;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
transform: rotate(45deg);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-warp {
|
||||
position: relative;
|
||||
border: 1px solid #e6e6e6;
|
||||
|
||||
&.hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 24px rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
border: 1px solid #2f54eb;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
padding: 30px 12px 16px 30px;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 30px + 10px;
|
||||
display: block;
|
||||
width: 15%;
|
||||
min-width: 64px;
|
||||
height: 2px;
|
||||
background-image: url('/images/rectangle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.card-item-avatar {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.card-state {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: -12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
padding: 2px 0;
|
||||
background-color: rgba(#5995f5, 0.15);
|
||||
transform: skewX(45deg);
|
||||
|
||||
&.success {
|
||||
background-color: @success-color-deprecated-bg;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: rgba(#ff9000, 0.1);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(#e50012, 0.1);
|
||||
}
|
||||
|
||||
.card-state-content {
|
||||
transform: skewX(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-color: rgba(#000, 0);
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.show {
|
||||
background-color: rgba(#000, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item-active {
|
||||
position: relative;
|
||||
color: #2f54eb;
|
||||
|
||||
.checked-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-warp {
|
||||
border: 1px solid #2f54eb;
|
||||
}
|
||||
}
|
||||
|
||||
.card-tools {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
|
||||
.card-button {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
> span,
|
||||
& button {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #f6f6f6;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #2f54eb;
|
||||
|
||||
&:hover {
|
||||
background-color: @primary-color-hover;
|
||||
border-color: @primary-color-hover;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @primary-color-active;
|
||||
border-color: @primary-color-active;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
flex-basis: 60px;
|
||||
flex-grow: 0;
|
||||
|
||||
button {
|
||||
background: @error-color-deprecated-bg;
|
||||
border: 1px solid @error-color-outline;
|
||||
|
||||
span {
|
||||
color: @error-color !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @error-color-hover;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @error-color-active;
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
background: @disabled-bg;
|
||||
border-color: @disabled-color;
|
||||
|
||||
span {
|
||||
color: @disabled-color !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @disabled-active-bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @disabled-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tooltip-disabled-compatible-wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,3 +17,14 @@ export const STATE_COLOR = {
|
|||
// 已停止
|
||||
'stopped': '#F2994A'
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片组件状态
|
||||
*/
|
||||
export const StatusColorEnum = {
|
||||
'success': 'success',
|
||||
'error': 'error',
|
||||
'processing': 'processing',
|
||||
'warning': 'warning',
|
||||
'default': 'default',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,78 @@
|
|||
<div class="page-container">
|
||||
父级: {{ testValue }}
|
||||
<ViewItem v-model="testValue" />
|
||||
<!-- 卡片 -->
|
||||
<br />卡片组件：
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="6">
|
||||
<CardBox
|
||||
status="disable"
|
||||
:statusNames="{ disable: StatusColorEnum.error }"
|
||||
statusText="正常"
|
||||
:showMask="false"
|
||||
:actions="actions"
|
||||
>
|
||||
<template #img>
|
||||
<img :src="getImage('/device-product.png')" />
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-heard-name">设备名称</div>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
设备类型
|
||||
</div>
|
||||
<div>直连设备</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
产品名称
|
||||
</div>
|
||||
<div>测试固定地址</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</CardBox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ViewItem from '@/components/ValueItem/index.vue';
|
||||
import CardBox from '@/components/CardBox/index.vue';
|
||||
import { StatusColorEnum } from '@/utils/consts';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
const testValue = ref('');
|
||||
// 卡片按钮
|
||||
const actions = ref([
|
||||
{
|
||||
key: 'check',
|
||||
label: '查看',
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
label: '编辑',
|
||||
disabled: true,
|
||||
message: '暂无权限，请联系管理员',
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: '删除',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.card-item-heard-name {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-item-content-text {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue