进销存-升级 1.修改上传组件bug 2.付款流水和回款流水添加删除功能 3.调整财务管理页面样式和运用组件

gaoluyang

13 小时以前 32a35a2ae4cd198335788866181c7aa4579cc90d

 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({