feat(财务): 新增入账管理模块
新增账单导入和账单核对功能 - 添加账单导入页面，支持微信、支付宝、银行账单文件上传 - 实现账单核对功能，包括自动核对和人工核对 - 添加多种类型订单展示组件（VIP、课程、实物商品等） - 实现订单选择和提交功能 - 添加CardList组件用于展示可选项和已选项
This commit is contained in:
393
apps/finance/src/components/card-list/card-list.vue
Normal file
393
apps/finance/src/components/card-list/card-list.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CardListProps, ExtendedCardListApi } from './types';
|
||||
|
||||
import { computed, h, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
import { usePriorityValues } from '@vben/hooks';
|
||||
import { cn } from '@vben/utils';
|
||||
|
||||
import { VbenLoading } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { Card, DatePicker, Empty, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import SelectDropdownRender from '#/components/SelectDropdownRender/index.vue';
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
|
||||
// 创建一个全局缓存对象
|
||||
const selectOptionsCache: Record<string, any[]> = {};
|
||||
|
||||
interface Props extends CardListProps {
|
||||
api: ExtendedCardListApi;
|
||||
}
|
||||
|
||||
const listData = computed(() => {
|
||||
return gridOptions.value?.data || [];
|
||||
});
|
||||
|
||||
const state = props.api?.useStore?.();
|
||||
|
||||
const { class: className, gridClass, gridOptions, gridEvents } = usePriorityValues(props, state);
|
||||
|
||||
// 计算标题字段
|
||||
const titleFieldName = computed(() => {
|
||||
const titleField = gridOptions.value?.titleField;
|
||||
if (titleField) return titleField;
|
||||
const columns = gridOptions.value?.columns || [];
|
||||
if (columns.length > 0) return columns[0]?.field || '';
|
||||
return '';
|
||||
});
|
||||
|
||||
// 卡片网格样式
|
||||
const gridStyle = computed(() => {
|
||||
const gridHeight = gridOptions.value?.gridHeight || 'auto';
|
||||
const gridColumns = gridOptions.value?.gridColumns || 3;
|
||||
const cardGap = gridOptions.value?.cardGap || '10px';
|
||||
|
||||
return {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
|
||||
gap: cardGap,
|
||||
height: gridHeight,
|
||||
overflow: 'auto',
|
||||
padding: '5px',
|
||||
};
|
||||
});
|
||||
|
||||
// 卡片样式
|
||||
const cardStyle = (item: any) => {
|
||||
const cardHeight = gridOptions.value?.cardHeight;
|
||||
const cardWidth = gridOptions.value?.cardWidth || '100%';
|
||||
|
||||
const style: any = {
|
||||
width: cardWidth,
|
||||
minWidth: 0, // 添加最小宽度为0，防止内容撑开
|
||||
overflow: 'hidden', // 添加溢出隐藏
|
||||
borderColor: item.error ? 'red' : 'inherit',
|
||||
};
|
||||
|
||||
if (cardHeight && cardHeight !== 'auto') {
|
||||
style.height = cardHeight;
|
||||
}
|
||||
|
||||
return style;
|
||||
};
|
||||
|
||||
// const errorCardStyle = (item: any) => {
|
||||
// const errorData = gridOptions.value?.errorData || [];
|
||||
// return errorData.some((errorItem) => errorItem.id === item.id)
|
||||
// ? {
|
||||
// ...cardStyle.value,
|
||||
// borderColor: 'red',
|
||||
// }
|
||||
// : false;
|
||||
// };
|
||||
|
||||
// 格式化字段值
|
||||
const formatFieldValue = (column: any, row: any) => {
|
||||
if (!column?.field) return '';
|
||||
const value = row[column.field];
|
||||
if (column?.formatter) {
|
||||
return column.formatter(value, row);
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
// 渲染编辑组件
|
||||
const renderEditComponent = (column: any, row: any) => {
|
||||
const fieldName = column.field;
|
||||
const value = row[fieldName];
|
||||
const editRender = column.editRender;
|
||||
const editProps = editRender?.props || {};
|
||||
|
||||
// 创建更新函数，避免直接修改只读对象
|
||||
const updateValue = (val: any) => {
|
||||
// 获取当前数据数组
|
||||
const currentData = gridOptions.value?.data || [];
|
||||
// 找到要修改的项的索引
|
||||
const index = currentData.findIndex((item: any) => item.id === row.id);
|
||||
if (index !== -1) {
|
||||
// 创建新的数据数组，避免直接修改原数组
|
||||
const newData = [...currentData];
|
||||
// 创建新的对象，避免直接修改原对象
|
||||
newData[index] = { ...newData[index], [fieldName]: val };
|
||||
// 更新数据
|
||||
props.api.setData(newData);
|
||||
}
|
||||
};
|
||||
|
||||
switch (editRender.name) {
|
||||
case 'date-picker':
|
||||
case 'DatePicker': {
|
||||
return h(DatePicker, {
|
||||
value,
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
...editProps,
|
||||
'onUpdate:value': updateValue,
|
||||
});
|
||||
}
|
||||
case 'Input':
|
||||
case 'input': {
|
||||
return h(Input, {
|
||||
value,
|
||||
...editProps,
|
||||
'onUpdate:value': updateValue,
|
||||
});
|
||||
}
|
||||
case 'input-number':
|
||||
case 'InputNumber': {
|
||||
return h(Input, {
|
||||
value,
|
||||
type: 'number',
|
||||
...editProps,
|
||||
'onUpdate:value': updateValue,
|
||||
});
|
||||
}
|
||||
case 'Select':
|
||||
case 'select': {
|
||||
return h(Select, {
|
||||
value,
|
||||
...editProps,
|
||||
'onUpdate:value': updateValue,
|
||||
});
|
||||
}
|
||||
case 'SelectDropdownRender':
|
||||
case 'selectDropdownRender': {
|
||||
// 创建一个响应式的选项数组
|
||||
const options = ref<any[]>([]);
|
||||
|
||||
// 创建一个唯一的缓存键，基于 row 的关键属性
|
||||
const cacheKey = `${row.paymentId}_${row.come}_${row.orderType}_${row.courseId}`;
|
||||
|
||||
// 检查缓存中是否已有数据
|
||||
if (selectOptionsCache[cacheKey]) {
|
||||
options.value = selectOptionsCache[cacheKey];
|
||||
} else if (editProps?.fetchOptions) {
|
||||
// 如果缓存中没有，则获取数据并存储到缓存
|
||||
editProps.fetchOptions(row).then((res: any) => {
|
||||
options.value = res;
|
||||
// 存储到缓存
|
||||
selectOptionsCache[cacheKey] = res;
|
||||
});
|
||||
}
|
||||
|
||||
return h(SelectDropdownRender, {
|
||||
value,
|
||||
...editProps,
|
||||
options,
|
||||
'onUpdate:value': updateValue,
|
||||
});
|
||||
}
|
||||
default: {
|
||||
return formatFieldValue(column, row);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 处理卡片点击
|
||||
const handleCardClick = (row: any) => {
|
||||
gridEvents.value?.cardClick?.(row);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
async function init() {
|
||||
await nextTick();
|
||||
if (props.api?.mount) {
|
||||
props.api.mount();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (props.api?.unmount) {
|
||||
props.api.unmount();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('h-full overflow-auto rounded-md', className)">
|
||||
<div :class="cn('rounded-md bg-card', gridClass)">
|
||||
<!-- 加载状态 -->
|
||||
<VbenLoading v-if="gridOptions?.loading" :spinning="true" />
|
||||
|
||||
<!-- 卡片列表 -->
|
||||
<div v-else-if="listData.length > 0" :style="gridStyle">
|
||||
<Card
|
||||
v-for="(item, index) in listData"
|
||||
:key="item[titleFieldName]"
|
||||
:class="gridOptions?.cardClass"
|
||||
:style="cardStyle(item)"
|
||||
@click="handleCardClick(item)"
|
||||
>
|
||||
<!-- 自定义标题 -->
|
||||
<template #title v-if="gridOptions?.showTitle">
|
||||
<div class="custom-card-title" :title="item[titleFieldName]">
|
||||
{{ item[titleFieldName] }}
|
||||
</div>
|
||||
</template>
|
||||
<!-- 卡片右上角额外内容 -->
|
||||
<template #extra v-if="$slots['card-extra']">
|
||||
<slot name="card-extra" :row="item" :index="index"></slot>
|
||||
</template>
|
||||
|
||||
<div class="card-content">
|
||||
<div
|
||||
v-for="column in gridOptions?.columns"
|
||||
:key="column?.field || ''"
|
||||
class="card-field"
|
||||
v-show="
|
||||
!column?.show ||
|
||||
(typeof column.show === 'function' ? column.show(item) : column.show)
|
||||
"
|
||||
>
|
||||
<!-- 自定义插槽 -->
|
||||
<div v-if="column?.slots?.default" class="field-item">
|
||||
<span class="field-title">{{ column?.title }}:</span>
|
||||
<span class="field-value field-edit">
|
||||
<slot
|
||||
:name="column.slots.default"
|
||||
:row="item"
|
||||
:field="column?.field || ''"
|
||||
:value="item[column?.field || '']"
|
||||
:index="index"
|
||||
></slot>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 编辑渲染组件 -->
|
||||
<div v-else-if="column?.editRender" class="field-item">
|
||||
<span class="field-title">{{ column?.title }}:</span>
|
||||
<span class="field-value field-edit">
|
||||
<component :is="renderEditComponent(column, item)" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- 默认显示 -->
|
||||
<div v-else class="field-item">
|
||||
<span class="field-title">{{ column?.title }}:</span>
|
||||
<span class="field-value">{{ formatFieldValue(column, item) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片底部操作区域 -->
|
||||
<template #actions v-if="$slots['card-actions']">
|
||||
<slot name="card-actions" :row="item"></slot>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-10">
|
||||
<Empty :description="gridOptions?.emptyText || '暂无数据'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-content {
|
||||
.card-field {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.field-title {
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.field-value {
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
&.field-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // 确保卡片不超出容器宽度
|
||||
min-width: 0; // 防止内容撑开
|
||||
|
||||
.ant-card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 12px !important;
|
||||
min-width: 0; // 防止内容撑开
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-width: 0; // 防止内容撑开
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
min-height: auto;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
min-width: 0; // 防止内容撑开
|
||||
height: auto; // 允许头部高度自适应
|
||||
display: flex; // 使用flex布局
|
||||
|
||||
.ant-card-head-wrapper {
|
||||
align-items: flex-start; // 顶部对齐
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-card-head-title {
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
height: auto; // 允许标题高度自适应
|
||||
white-space: normal; // 允许换行
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ant-card-extra {
|
||||
padding: 8px 0; // 给extra区域添加与标题相同的内边距
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-card-title {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
white-space: normal; // 允许换行
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user