feat(财务): 新增入账管理模块
新增账单导入和账单核对功能 - 添加账单导入页面,支持微信、支付宝、银行账单文件上传 - 实现账单核对功能,包括自动核对和人工核对 - 添加多种类型订单展示组件(VIP、课程、实物商品等) - 实现订单选择和提交功能 - 添加CardList组件用于展示可选项和已选项
This commit is contained in:
84
apps/finance/src/components/SelectDropdownRender/index.vue
Normal file
84
apps/finance/src/components/SelectDropdownRender/index.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, ref, watch } from 'vue';
|
||||
|
||||
import { Button, Divider, Input, Select, Space } from 'ant-design-vue';
|
||||
|
||||
export interface RemoteOption {
|
||||
label: string;
|
||||
value: string;
|
||||
/** 是否为用户自由输入生成的兜底项 */
|
||||
__custom?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
/** 选项数据 */
|
||||
options?: any | { value: string }[];
|
||||
/** 占位符 */
|
||||
placeholder?: string;
|
||||
/** v-model */
|
||||
value?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['update:value']);
|
||||
|
||||
const VNodes = defineComponent({
|
||||
props: {
|
||||
vnodes: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return this.vnodes;
|
||||
},
|
||||
});
|
||||
|
||||
const items = ref<{ value: string }[]>(props.options || []);
|
||||
const value = ref(props.value);
|
||||
const inputRef = ref();
|
||||
const inputValue = ref('');
|
||||
|
||||
// 监听 props.value 变化,更新本地 value
|
||||
watch(
|
||||
() => props.value,
|
||||
(newValue) => {
|
||||
value.value = newValue;
|
||||
},
|
||||
);
|
||||
|
||||
// 监听本地 value 变化,触发 update:value 事件
|
||||
watch(value, (newValue) => {
|
||||
emit('update:value', newValue);
|
||||
});
|
||||
|
||||
const addItem = (e: Event) => {
|
||||
e.preventDefault();
|
||||
const newItemValue = inputValue.value;
|
||||
items.value.push({
|
||||
value: newItemValue,
|
||||
});
|
||||
// 将新添加的选项设为选中值
|
||||
value.value = newItemValue;
|
||||
inputValue.value = '';
|
||||
setTimeout(() => {
|
||||
inputRef.value?.focus();
|
||||
}, 0);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Select v-model:value="value" placeholder="请选择或新增" :options="items">
|
||||
<template #dropdownRender="{ menuNode: menu }">
|
||||
<VNodes :vnodes="menu" />
|
||||
<Divider style="margin: 4px 0" />
|
||||
<Space style="padding: 4px 8px">
|
||||
<Input ref="inputRef" v-model:value="inputValue" placeholder="在此手动输入" />
|
||||
<Button type="text" @click="addItem">
|
||||
<template #icon>
|
||||
<!-- <PlusOutlined /> -->
|
||||
</template>
|
||||
新增
|
||||
</Button>
|
||||
</Space>
|
||||
</template>
|
||||
</Select>
|
||||
</template>
|
||||
Reference in New Issue
Block a user