Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-ma...

huminmin

5 小时以前 cdf8190c92a536dabdbd3dfd6758cf67320ff6df

 src/views/financialManagement/revenueManagement/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="30%"
    @confirm="sendForm"
    @close="close"
    @cancel="close"
  >
    <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
      <el-form-item label="收入日期" prop="incomeDate">
        <el-date-picker
          style="width: 100%"
          v-model="form.incomeDate"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item label="收入类型" prop="incomeType">
        <el-select
          v-model="form.incomeType"
          placeholder="请选择"
          clearable
        >
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in income_types" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="form.customerName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="收入金额" prop="incomeMoney">
        <el-input-number :step="0.01" :min="0" style="width: 100%"
          v-model="form.incomeMoney"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="收入描述" prop="incomeDescribed">
        <el-input v-model="form.incomeDescribed" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="收款方式" prop="incomeMethod">
        <el-select
          v-model="form.incomeMethod"
          placeholder="请选择"
          clearable
        >
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in payment_methods" :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/revenueManagement";
import Form from "./Form.vue";
import { add, update, getAccountIncome } from "@/api/financialManagement/revenueManagement";
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 { income_types } = proxy.useDict("income_types");
const { payment_methods } = proxy.useDict("payment_methods");

const formRules = {
  customerName: [{ required: true, trigger: "blur", message: "请输入" }],
  incomeMoney: [{ required: true, trigger: "blur", message: "请输入" }],
  incomeDescribed: [{ required: true, trigger: "blur", message: "请输入" }],
  incomeDate: [{ required: true, trigger: "change", message: "请选择" }],
  incomeType: [{ required: true, trigger: "change", message: "请选择" }],
  incomeMethod: [{ required: true, trigger: "change", message: "请选择" }],
}

const { form, resetForm } = useFormData({
  incomeDate: undefined, // 收入日期
  incomeType: undefined, // 收入类型
  customerName: undefined, // 客户名称
  incomeMoney: undefined, // 收入金额
  incomeDescribed: undefined, // 收入描述
  incomeMethod: undefined, // 收款方式
  invoiceNumber: undefined, // 发票号码
  note: undefined, // 备注
});

const sendForm = () => {
   proxy.$refs.formRef.$refs.formRef.validate(async valid => {
  if (submitting.value) return;
  formRef.value?.validate(async (valid) => {
      if (valid) {
      submitting.value = true;
      try {
         const {code} = id.value
            ? await update({id: id.value, ...formRef.value.form})
            : await add(formRef.value.form);
          ? await update({ id: id.value, ...form })
          : await add(form);
         if (code == 200) {
            emits("success");
            ElMessage({message: "操作成功", type: "success"});
            close();
         } else {
            loading.value = false;
        }
      } 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 getAccountIncome(rowId);
    if (code == 200) {
      form.incomeDate = data.incomeDate;
      form.incomeType = data.incomeType;
      form.customerName = data.customerName;
      form.incomeMoney = data.incomeMoney;
      form.incomeDescribed = data.incomeDescribed;
      form.incomeMethod = data.incomeMethod;
      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({