review code.
This commit is contained in:
lijiahang
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<!-- 头部部分-固定 -->
|
||||
<div class="card-list-header" :style="{width: headerWidth}">
|
||||
<div class="card-list-header-wrapper">
|
||||
<!-- 信息部分 -->
|
||||
<div class="card-list-info">
|
||||
<!-- 路由面包屑 -->
|
||||
<breadcrumb />
|
||||
<!-- 分页部分 -->
|
||||
<div class="pagination-wrapper">
|
||||
<a-pagination v-if="pagination"
|
||||
size="mini"
|
||||
v-model:current="(pagination as PaginationProps).current"
|
||||
v-model:page-size="(pagination as PaginationProps).pageSize"
|
||||
v-bind="pagination"
|
||||
:auto-adjust="false"
|
||||
@change="page => emits('pageChange', page, (pagination as PaginationProps).pageSize)"
|
||||
@page-size-change="limit => emits('pageChange', 1, limit)" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作部分 -->
|
||||
<div class="card-list-handler">
|
||||
<!-- 左侧固定 -->
|
||||
<div class="card-list-handler-left">
|
||||
<a-space>
|
||||
<!-- 创建 -->
|
||||
<div v-permission="addPermission"
|
||||
v-if="!handleVisible.disableAdd"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="创建"
|
||||
@click="emits('add')">
|
||||
<icon-plus />
|
||||
</div>
|
||||
<!-- 左侧侧操作槽位 -->
|
||||
<slot name="leftHandle" />
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 右侧固定 -->
|
||||
<div class="card-list-handler-right">
|
||||
<a-space>
|
||||
<!-- 右侧操作槽位 -->
|
||||
<slot name="rightHandle" />
|
||||
<!-- 搜索框 -->
|
||||
<div v-if="!handleVisible.disableSearchInput"
|
||||
class="header-input-wrapper"
|
||||
:style="{width: searchInputWidth}">
|
||||
<a-input v-model="searchValueRef"
|
||||
:placeholder="searchInputPlaceholder"
|
||||
size="small"
|
||||
allow-clear
|
||||
@input="e => emits('update:searchValue', e)"
|
||||
@change="e => emits('update:searchValue', e)"
|
||||
@keyup.enter="emits('search')" />
|
||||
</div>
|
||||
<!-- 过滤条件 -->
|
||||
<a-popover position="br" trigger="click" content-class="card-filter-wrapper">
|
||||
<div v-if="!handleVisible.disableFilter"
|
||||
ref="filterRef"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="选择过滤条件">
|
||||
<a-badge :count="filterCount" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
|
||||
<icon-filter />
|
||||
</a-badge>
|
||||
</div>
|
||||
<template #content>
|
||||
<!-- 过滤表单 -->
|
||||
<slot name="filterContent" />
|
||||
<!-- 操作按钮 -->
|
||||
<div class="filter-bottom-container">
|
||||
<a-space>
|
||||
<a-button size="mini" @click="filterReset">重置</a-button>
|
||||
<a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
</a-popover>
|
||||
<!-- 搜索 -->
|
||||
<div v-if="!handleVisible.disableSearch"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="搜索"
|
||||
@click="emits('search')">
|
||||
<icon-search />
|
||||
</div>
|
||||
<!-- 重置 -->
|
||||
<div v-if="!handleVisible.disableReset"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="重置"
|
||||
@click="emits('reset')">
|
||||
<icon-refresh />
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'card-header'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PaginationProps } from '@arco-design/web-vue';
|
||||
import type { CardProps } from '../types/props';
|
||||
import { useAppStore } from '@/store';
|
||||
import { ref, computed } from 'vue';
|
||||
import { triggerMouseEvent } from '@/utils';
|
||||
|
||||
const props = defineProps<CardProps>();
|
||||
|
||||
const appStore = useAppStore();
|
||||
const headerWidth = computed(() => {
|
||||
const menuWidth = appStore.menu && !appStore.topMenu && !appStore.hideMenu
|
||||
? appStore.menuCollapse ? 48 : appStore.menuWidth
|
||||
: 0;
|
||||
return `calc(100% - ${menuWidth}px)`;
|
||||
});
|
||||
|
||||
const filterRef = ref();
|
||||
|
||||
const searchValueRef = computed<string>({
|
||||
get() {
|
||||
return props.searchValue as string;
|
||||
},
|
||||
set(e) {
|
||||
if (e) {
|
||||
emits('update:searchValue', e);
|
||||
} else {
|
||||
emits('update:searchValue', null);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['add', 'update:searchValue', 'search',
|
||||
'reset', 'pageChange', 'click', 'dblclick']);
|
||||
|
||||
// 重置过滤
|
||||
const filterReset = () => {
|
||||
emits('reset');
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const filterSearch = () => {
|
||||
emits('search');
|
||||
triggerMouseEvent(filterRef);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@header-info-height: 48px;
|
||||
@header-handler-height: 48px;
|
||||
@top-height: 16 + @header-info-height + @header-handler-height + 12px;
|
||||
|
||||
.card-list-header {
|
||||
margin: -16px -16px 0 -16px;
|
||||
padding: 16px 16px 12px 16px;
|
||||
position: fixed;
|
||||
// FIXME 颜色不对 文件拆了
|
||||
background: var(--color-fill-2);
|
||||
z-index: 999;
|
||||
height: @top-height;
|
||||
transition: none;
|
||||
|
||||
&-wrapper {
|
||||
background: var(--color-bg-4);
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
|
||||
.card-list-info {
|
||||
height: @header-info-height;
|
||||
border-bottom: 1px solid var(--color-border-2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
display: block;
|
||||
margin-top: @top-height - 16px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.disabled-col {
|
||||
cursor: not-allowed;
|
||||
|
||||
.card-list-item-disabled {
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
background: var(--color-bg-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-list-handler {
|
||||
height: @header-handler-height;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<a-card class="card-list-item create-card"
|
||||
:style="{ height: cardHeight }"
|
||||
:body-style="{ height: '100%' }"
|
||||
:bordered="false"
|
||||
:hoverable="true">
|
||||
<div class="create-card-body">
|
||||
<icon-plus class="create-card-body-icon" />
|
||||
<span class="create-card-body-text">{{ createCardDescription }}</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'create-card'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { CardProps } from '../types/props';
|
||||
|
||||
const props = defineProps<CardProps>();
|
||||
console.log(props);
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.create-card {
|
||||
|
||||
&-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&-icon {
|
||||
font-size: 18px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
54
orion-ops-ui/src/components/view/card-list/types/props.ts
Normal file
54
orion-ops-ui/src/components/view/card-list/types/props.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import type { CSSProperties } from 'vue';
|
||||
import type { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
|
||||
import type { CardFieldConfig, CardPosition, CardRecord, ColResponsiveValue, HandleVisible } from '@/types/card';
|
||||
|
||||
// 卡片属性
|
||||
export interface CardProps {
|
||||
key?: string;
|
||||
pagination?: PaginationProps | boolean;
|
||||
loading?: boolean;
|
||||
fieldConfig?: CardFieldConfig;
|
||||
cardHeight: string;
|
||||
cardClass?: string;
|
||||
cardBodyStyle?: CSSProperties;
|
||||
contextMenu?: boolean;
|
||||
filterCount?: number;
|
||||
searchInputPlaceholder?: string;
|
||||
searchInputWidth?: string;
|
||||
searchValue?: string;
|
||||
createCardDescription?: string;
|
||||
createCardPosition?: CardPosition | boolean;
|
||||
addPermission?: Array<string>;
|
||||
cardLayoutGutter?: Number | ResponsiveValue | Array<Number> | Array<ResponsiveValue>;
|
||||
cardLayoutCols?: ColResponsiveValue;
|
||||
handleVisible?: HandleVisible;
|
||||
list?: Array<CardRecord>;
|
||||
}
|
||||
|
||||
// 定义默认 props
|
||||
export const cardDefaultProps = () => {
|
||||
return {
|
||||
key: 'id',
|
||||
pagination: false,
|
||||
loading: false,
|
||||
cardHeight: '100%',
|
||||
contextMenu: true,
|
||||
filterCount: 0,
|
||||
searchInputWidth: '200px',
|
||||
searchValue: '',
|
||||
createCardDescription: '点击此处进行创建',
|
||||
createCardPosition: false,
|
||||
addPermission: () => [],
|
||||
cardLayoutGutter: () => [16, 16],
|
||||
cardLayoutCols: () => {
|
||||
return {
|
||||
span: 6
|
||||
};
|
||||
},
|
||||
handleVisible: () => {
|
||||
return {};
|
||||
},
|
||||
list: () => []
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user