financial-web/src/views/financial-user/bill-user/bill-dialog.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/financial-user/bill-user/utils/columns';
import { FormProps } from '@/views/financial-user/bill-user/utils/types';
import { $t } from '@/plugins/i18n';
import { incomeOrExpend } from '@/enums/baseConstant';
import { useBillUserStore } from '@/store/financialUser/billUser';
import { onSearch } from '@/views/financial-user/bill-user/utils/hooks';
import { useCategoryUserStore } from '@/store/financialUser/categoryUser';

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({
		// 类型：1 - 收入，-1 - 支出
		type: undefined,
		// 金额
		amount: undefined,
		// 描述
		description: undefined,
		// 交易日期
		transactionDate: undefined,
		// 类别id
		categoryId: undefined,
	}),
});

const formRef = ref<FormInstance>();
const form = ref(props.formInline);
const billStore = useBillUserStore();
const categoryUserStore = useCategoryUserStore();

/** 提交表单 */
const onSubmit = () => {
	formRef.value.validate(async (valid: any) => {
		if (!valid) return;

		const result = await billStore.addBill(form.value);
		if (!result) return;

		// 添加成功
		form.value.amount = undefined;
		await onSearch();
	});
};

onMounted(() => {
	categoryUserStore.getCategoryUserAllList();
});
defineExpose({ formRef });
</script>

<template>
	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
		<!-- 类型：1 - 收入，-1 - 支出 -->
		<el-form-item :label="$t('type')" prop="type">
			<el-select v-model="form.type" :placeholder="$t('select') + $t('type')" clearable filterable>
				<el-option v-for="(item, index) in incomeOrExpend" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
			</el-select>
		</el-form-item>

		<!-- 交易日期 -->
		<el-form-item :label="$t('transactionDate')" prop="transactionDate">
			<el-date-picker
				v-model="form.transactionDate"
				:placeholder="$t('input') + $t('transactionDate')"
				format="YYYY/MM/DD HH:mm:ss"
				type="datetime"
				value-format="YYYY-MM-DD HH:mm:ss"
			/>
		</el-form-item>

		<!-- 类别id -->
		<el-form-item :label="$t('category')" prop="categoryId">
			<el-select v-model="form.categoryId" :placeholder="$t('select') + $t('category')" clearable filterable>
				<el-option v-for="item in categoryUserStore.allCategoryList" :key="item.id" :label="item.categoryName" :navigationBar="false" :value="item.id" />
			</el-select>
		</el-form-item>

		<!-- 描述 -->
		<el-form-item :label="$t('description')" prop="description">
			<el-input
				v-model="form.description"
				:autosize="{ minRows: 2, maxRows: 4 }"
				:placeholder="$t('input') + $t('description')"
				autocomplete="off"
				maxlength="256"
				show-word-limit
				type="textarea"
				@keydown.enter="onSubmit"
			/>
		</el-form-item>

		<!-- 金额 -->
		<el-form-item :label="$t('amount')" prop="amount">
			<el-input v-model="form.amount" :min="0" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" @keydown.enter="onSubmit" />
		</el-form-item>
	</el-form>
</template>