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