<template>
|
<view class="sales-account">
|
<PageHeader :title="pageTitle" @back="goBack" />
|
<view class="search-section">
|
<up-form :model="form" :rules="rules" ref="formRef">
|
<up-form-item label="支出日期" prop="expenseDate">
|
<uni-datetime-picker type="date" v-model="form.expenseDate" />
|
</up-form-item>
|
<up-form-item label="支出类型" prop="expenseType">
|
<up-picker :columns="[expenseTypes]" key-name="label" v-model="expenseTypeIndex" @confirm="onExpenseTypeConfirm" />
|
</up-form-item>
|
<up-form-item label="供应商名称" prop="supplierName">
|
<up-input v-model="form.supplierName" placeholder="请输入" />
|
</up-form-item>
|
<up-form-item label="支出金额" prop="expenseMoney">
|
<up-input type="number" v-model="form.expenseMoney" placeholder="请输入" />
|
</up-form-item>
|
<up-form-item label="支出描述" prop="expenseDescribed">
|
<up-input v-model="form.expenseDescribed" placeholder="请输入" />
|
</up-form-item>
|
<up-form-item label="付款方式" prop="expenseMethod">
|
<up-picker :columns="[checkoutPayment]" key-name="label" v-model="expenseMethodIndex" @confirm="onMethodConfirm" />
|
</up-form-item>
|
<up-form-item label="发票号码" prop="invoiceNumber">
|
<up-input v-model="form.invoiceNumber" placeholder="请输入" />
|
</up-form-item>
|
<up-form-item label="备注" prop="note">
|
<up-textarea v-model="form.note" placeholder="请输入" autoHeight />
|
</up-form-item>
|
</up-form>
|
<view class="actions">
|
<u-button type="primary" @click="submitForm">保存</u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import { useDict } from "@/utils/dict";
|
import { add, update, getAccountExpense } from "@/api/financialManagement/expenseManagement";
|
|
const operationType = ref("add");
|
const id = ref(undefined);
|
|
const { checkout_payment, expense_types } = useDict("checkout_payment", "expense_types");
|
const checkoutPayment = ref([]);
|
const expenseTypes = ref([]);
|
const expenseTypeIndex = ref([0]);
|
const expenseMethodIndex = ref([0]);
|
|
const formRef = ref();
|
const form = reactive({
|
expenseDate: undefined,
|
expenseType: undefined,
|
supplierName: "",
|
expenseMoney: undefined,
|
expenseDescribed: "",
|
expenseMethod: undefined,
|
invoiceNumber: "",
|
note: "",
|
});
|
|
const rules = {
|
expenseDate: [{ required: true, message: "请选择", trigger: "change" }],
|
expenseType: [{ required: true, message: "请选择", trigger: "change" }],
|
supplierName: [{ required: true, message: "请输入", trigger: "blur" }],
|
expenseMoney: [{ required: true, message: "请输入", trigger: "blur" }],
|
expenseDescribed: [{ required: true, message: "请输入", trigger: "blur" }],
|
expenseMethod: [{ required: true, message: "请选择", trigger: "change" }],
|
};
|
|
const pageTitle = computed(() => (operationType.value === "edit" ? "编辑支出" : "新增支出"));
|
|
const onExpenseTypeConfirm = (e) => {
|
const item = expenseTypes.value[e.value[0]];
|
if (item) form.expenseType = item.value;
|
};
|
const onMethodConfirm = (e) => {
|
const item = checkoutPayment.value[e.value[0]];
|
if (item) form.expenseMethod = item.value;
|
};
|
|
const syncDict = () => {
|
checkoutPayment.value = (checkout_payment?.value || []).map(i => ({ label: i.label, value: i.value }));
|
expenseTypes.value = (expense_types?.value || []).map(i => ({ label: i.label, value: i.value }));
|
};
|
|
const submitForm = () => {
|
formRef.value?.validate(async (valid) => {
|
if (!valid) return;
|
const payload = { ...form };
|
const res = operationType.value === "edit" ? await update({ id: id.value, ...payload }) : await add(payload);
|
if (res?.code === 200) {
|
uni.navigateBack();
|
}
|
});
|
};
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
onLoad(async (query) => {
|
syncDict();
|
operationType.value = query?.type || "add";
|
if (query?.id) {
|
id.value = query.id;
|
const res = await getAccountExpense(id.value);
|
const data = res?.data ?? res;
|
Object.assign(form, data || {});
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/styles/sales-common.scss";
|
.actions { margin-top: 16px; }
|
</style>
|
