From 32a35a2ae4cd198335788866181c7aa4579cc90d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 16 一月 2026 14:53:41 +0800
Subject: [PATCH] 进销存-升级 1.修改上传组件bug 2.付款流水和回款流水添加删除功能 3.调整财务管理页面样式和运用组件
---
src/views/financialManagement/expenseManagement/Modal.vue | 192 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 150 insertions(+), 42 deletions(-)
diff --git a/src/views/financialManagement/expenseManagement/Modal.vue b/src/views/financialManagement/expenseManagement/Modal.vue
index 8e5b171..4d743c1 100644
--- a/src/views/financialManagement/expenseManagement/Modal.vue
+++ b/src/views/financialManagement/expenseManagement/Modal.vue
@@ -1,20 +1,75 @@
<template>
- <el-dialog :title="modalOptions.title" v-model="visible" @close="close" width="30%">
- <Form ref="formRef"></Form>
- <template #footer>
- <el-button type="primary" @click="sendForm" :loading="loading">
- {{ modalOptions.confirmText }}
- </el-button>
- <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
- </template>
- </el-dialog>
+ <FormDialog
+ v-model="dialogVisible"
+ :title="dialogTitle"
+ :operationType="operationType"
+ width="50%"
+ @confirm="sendForm"
+ @close="close"
+ @cancel="close"
+ >
+ <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
+ <el-form-item label="鏀嚭鏃ユ湡" prop="expenseDate">
+ <el-date-picker
+ style="width: 100%"
+ v-model="form.expenseDate"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ type="date"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ clearable
+ />
+ </el-form-item>
+ <el-form-item label="鏀嚭绫诲瀷" prop="expenseType">
+ <el-select
+ v-model="form.expenseType"
+ placeholder="璇烽�夋嫨"
+ clearable
+ >
+ <el-option :label="item.label" :value="item.value" v-for="(item,index) in expense_types" :key="index" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName">
+ <el-input v-model="form.supplierName" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="鏀嚭閲戦" prop="expenseMoney">
+ <el-input-number :step="0.01" :min="0" style="width: 100%"
+ v-model="form.expenseMoney"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ <el-form-item label="鏀嚭鎻忚堪" prop="expenseDescribed">
+ <el-input v-model="form.expenseDescribed" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="浠樻鏂瑰紡" prop="expenseMethod">
+ <el-select
+ v-model="form.expenseMethod"
+ placeholder="璇烽�夋嫨"
+ clearable
+ >
+ <el-option :label="item.label" :value="item.value" v-for="(item,index) in checkout_payment" :key="index" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍙戠エ鍙风爜" prop="invoiceNumber">
+ <el-input v-model="form.invoiceNumber" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+ <el-form-item label="澶囨敞" prop="note">
+ <el-input
+ v-model="form.note"
+ placeholder="澶囨敞"
+ />
+ </el-form-item>
+ </el-form>
+ </FormDialog>
</template>
<script setup>
-import { useModal } from "@/hooks/useModal";
-import { add, update } from "@/api/financialManagement/expenseManagement";
-import Form from "./Form.vue";
+import { add, update, getAccountExpense } from "@/api/financialManagement/expenseManagement";
import { ElMessage } from "element-plus";
+import useFormData from "@/hooks/useFormData";
+import FormDialog from "@/components/Dialog/FormDialog.vue";
+import { ref } from "vue";
+
const { proxy } = getCurrentInstance()
defineOptions({
@@ -23,43 +78,96 @@
const emits = defineEmits(["success"]);
-const formRef = ref();
-const {
- id,
- visible,
- loading,
- openModal,
- modalOptions,
- handleConfirm,
- closeModal,
-} = useModal({ title: "鏀嚭" });
+const formRef = ref(null);
+const dialogVisible = ref(false);
+const operationType = ref("add"); // add | edit
+const id = ref(undefined);
+const submitting = ref(false);
+
+const dialogTitle = (type) => {
+ if (type === "edit") return "缂栬緫鏀嚭";
+ return "鏂板鏀嚭";
+};
+
+const { expense_types } = proxy.useDict("expense_types");
+const { checkout_payment } = proxy.useDict("checkout_payment");
+
+const formRules = {
+ supplierName: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+ expenseMoney: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+ expenseDescribed: [{ required: true, trigger: "blur", message: "璇疯緭鍏�" }],
+ expenseDate: [{ required: true, trigger: "change", message: "璇烽�夋嫨" }],
+ expenseType: [{ required: true, trigger: "change", message: "璇烽�夋嫨" }],
+ expenseMethod: [{ required: true, trigger: "change", message: "璇烽�夋嫨" }],
+}
+
+const { form, resetForm } = useFormData({
+ expenseDate: undefined, // 鏀嚭鏃ユ湡
+ expenseType: undefined, // 鏀嚭绫诲瀷
+ supplierName: undefined, // 渚涘簲鍟嗗悕绉�
+ expenseMoney: undefined, // 鏀嚭閲戦
+ expenseDescribed: undefined, // 鏀嚭鎻忚堪
+ expenseMethod: undefined, // 浠樻鏂瑰紡
+ invoiceNumber: undefined, // 鍙戠エ鍙风爜
+ note: undefined, // 澶囨敞
+});
const sendForm = () => {
- proxy.$refs.formRef.$refs.formRef.validate(async valid => {
- if (valid) {
- const {code} = id.value
- ? await update({id: id.value, ...formRef.value.form})
- : await add(formRef.value.form);
- if (code == 200) {
- emits("success");
- ElMessage({message: "鎿嶄綔鎴愬姛", type: "success"});
- close();
- } else {
- loading.value = false;
- }
- }
- })
+ if (submitting.value) return;
+ formRef.value?.validate(async (valid) => {
+ if (valid) {
+ submitting.value = true;
+ try {
+ const { code } = id.value
+ ? await update({ id: id.value, ...form })
+ : await add(form);
+ if (code == 200) {
+ emits("success");
+ ElMessage({ message: "鎿嶄綔鎴愬姛", type: "success" });
+ close();
+ }
+ } finally {
+ submitting.value = false;
+ }
+ }
+ })
};
const close = () => {
- formRef.value.resetFormAndValidate();
- closeModal();
+ resetForm();
+ formRef.value?.clearValidate();
+ id.value = undefined;
+ dialogVisible.value = false;
};
-const loadForm = async (id) => {
- openModal(id);
- await nextTick();
- formRef.value.loadForm(id);
+const loadForm = async (rowId) => {
+ operationType.value = "edit";
+ id.value = rowId;
+ dialogVisible.value = true;
+ if (rowId) {
+ const { code, data } = await getAccountExpense(rowId);
+ if (code == 200) {
+ form.expenseDate = data.expenseDate;
+ form.expenseType = data.expenseType;
+ form.supplierName = data.supplierName;
+ form.expenseMoney = data.expenseMoney;
+ form.expenseDescribed = data.expenseDescribed;
+ form.expenseMethod = data.expenseMethod;
+ form.invoiceNumber = data.invoiceNumber;
+ form.note = data.note;
+ }
+ } else {
+ resetForm();
+ formRef.value?.clearValidate();
+ }
+};
+
+const openModal = () => {
+ operationType.value = "add";
+ id.value = undefined;
+ resetForm();
+ formRef.value?.clearValidate();
+ dialogVisible.value = true;
};
defineExpose({
--
Gitblit v1.9.3