<template>
|
<view class="sales-account">
|
<PageHeader title="支出管理" @back="goBack" />
|
<view class="search-section">
|
<view class="search-bar">
|
<view class="search-input">
|
<uni-datetime-picker type="daterange" v-model="filters.entryDate" @change="onDateChange" />
|
</view>
|
<view class="search-input">
|
<up-input readonly placeholder="付款方式" v-model="expenseMethodLabel" @click="methodPickerShow = true" />
|
</view>
|
<view class="filter-button" @click="getList">
|
<up-icon name="search" size="24" color="#999" />
|
</view>
|
</view>
|
<view class="actions">
|
<u-button type="primary" size="small" @click="goAdd">新增</u-button>
|
</view>
|
</view>
|
<view class="ledger-list" v-if="list.length>0">
|
<view class="ledger-item" v-for="item in list" :key="item.id">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon"><up-icon name="file-text" color="#fff" size="16" /></view>
|
<text class="item-id">{{ item.supplierName || '--' }}</text>
|
</view>
|
<view class="item-tag">
|
<u-tag>{{ methodText(item.expenseMethod) }}</u-tag>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
<view class="item-details">
|
<view class="detail-row"><text class="detail-label">支出日期</text><text class="detail-value">{{ item.expenseDate || '--' }}</text></view>
|
<view class="detail-row"><text class="detail-label">支出类型</text><text class="detail-value">{{ expenseTypeText(item.expenseType) || '--' }}</text></view>
|
<view class="detail-row"><text class="detail-label">支出金额(元)</text><text class="detail-value highlight">{{ fmtAmount(item.expenseMoney) }}</text></view>
|
<view class="detail-row"><text class="detail-label">发票号码</text><text class="detail-value">{{ item.invoiceNumber || '--' }}</text></view>
|
<view class="detail-row"><text class="detail-label">备注</text><text class="detail-value">{{ item.note || '--' }}</text></view>
|
</view>
|
<view class="card-actions">
|
<u-button size="small" @click="goEdit(item)" :disabled="!!item.businessId">编辑</u-button>
|
<u-button size="small" type="error" @click="confirmDelete(item)" :disabled="!!item.businessId">删除</u-button>
|
</view>
|
</view>
|
</view>
|
<view class="no-data" v-else><text>暂无数据</text></view>
|
|
<up-action-sheet :show="methodPickerShow" :actions="checkoutPayment" title="付款方式" @select="onSelectMethod" @close="methodPickerShow=false" />
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import { listPage, delAccountExpense } from "@/api/financialManagement/expenseManagement";
|
import { useDict } from "@/utils/dict";
|
|
const list = ref([]);
|
const filters = reactive({ entryDate: null, expenseMethod: undefined, entryDateStart: undefined, entryDateEnd: undefined });
|
const { checkout_payment, expense_types } = useDict("checkout_payment", "expense_types");
|
const checkoutPayment = ref([]);
|
const expenseTypes = ref([]);
|
const methodPickerShow = ref(false);
|
const expenseMethodLabel = ref("");
|
|
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 getList = () => {
|
listPage({ expenseMethod: filters.expenseMethod, entryDateStart: filters.entryDateStart, entryDateEnd: filters.entryDateEnd, current: 1, size: 100 })
|
.then(res => {
|
const records = res?.data?.records ?? res?.records ?? [];
|
list.value = records;
|
});
|
};
|
|
const onDateChange = (val) => {
|
if (val && val.length === 2) {
|
filters.entryDateStart = val[0];
|
filters.entryDateEnd = val[1];
|
} else {
|
filters.entryDateStart = undefined;
|
filters.entryDateEnd = undefined;
|
}
|
};
|
|
const onSelectMethod = (e) => {
|
filters.expenseMethod = e.value;
|
expenseMethodLabel.value = e.label;
|
methodPickerShow.value = false;
|
};
|
|
const methodText = (v) => {
|
const m = checkoutPayment.value.find(i=>String(i.value)===String(v));
|
return m?.label || "--";
|
};
|
const expenseTypeText = (v) => {
|
const m = expenseTypes.value.find(i=>String(i.value)===String(v));
|
return m?.label || null;
|
};
|
const fmtAmount = (v) => {
|
const n = parseFloat(v || 0);
|
return n.toFixed(2);
|
};
|
|
const goAdd = () => {
|
uni.navigateTo({ url: "/pages/financialManagement/expenseManagement/edit?type=add" });
|
};
|
const goEdit = (row) => {
|
uni.navigateTo({ url: `/pages/financialManagement/expenseManagement/edit?type=edit&id=${row.id}` });
|
};
|
const confirmDelete = (row) => {
|
uni.showModal({
|
title: "提示",
|
content: "确认删除该记录？",
|
success: async (r) => {
|
if (r.confirm) {
|
const ids = Array.isArray(row) ? row.map(i=>i.id) : [row.id];
|
const res = await delAccountExpense(ids);
|
if (res?.code === 200) getList();
|
}
|
},
|
});
|
};
|
|
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 goBack = () => {
|
uni.navigateBack();
|
};
|
|
syncDict();
|
onShow(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/styles/sales-common.scss";
|
.actions { margin-top: 8px; }
|
</style>
|
