<template>
|
<div class="app-container">
|
<el-form :model="filters" :inline="true">
|
<el-form-item label="发票代码:">
|
<el-input v-model="filters.invoiceCode" placeholder="请输入发票代码" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="发票号码:">
|
<el-input v-model="filters.invoiceNo" placeholder="请输入发票号码" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="供应商:">
|
<el-select v-model="filters.supplierId" placeholder="请选择供应商" clearable style="width: 200px;">
|
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="认证状态:">
|
<el-select v-model="filters.certifyStatus" placeholder="请选择认证状态" clearable style="width: 150px;">
|
<el-option label="未认证" value="uncertified" />
|
<el-option label="已认证" value="certified" />
|
<el-option label="认证失败" value="failed" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getTableData">搜索</el-button>
|
<el-button @click="resetFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<div>
|
<el-button type="success" @click="handleBatchCertify" icon="Check" :disabled="selectedRows.length === 0">批量认证</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="add" icon="Plus">录入发票</el-button>
|
<el-button @click="handleOut" icon="Download">导出</el-button>
|
</div>
|
</div>
|
<PIMTable
|
rowKey="id"
|
isSelection
|
:column="columns"
|
:tableData="dataList"
|
:page="{
|
current: pagination.currentPage,
|
size: pagination.pageSize,
|
total: pagination.total,
|
}"
|
@selection-change="handleSelectionChange"
|
@pagination="changePage"
|
>
|
<template #amount="{ row }">
|
<span class="text-primary">¥{{ formatMoney(row.amount) }}</span>
|
</template>
|
<template #taxAmount="{ row }">
|
<span class="text-danger">¥{{ formatMoney(row.taxAmount) }}</span>
|
</template>
|
<template #totalAmount="{ row }">
|
<span class="text-success">¥{{ formatMoney(row.totalAmount) }}</span>
|
</template>
|
<template #certifyStatus="{ row }">
|
<el-tag :type="getCertifyStatusType(row.certifyStatus)">{{ getCertifyStatusLabel(row.certifyStatus) }}</el-tag>
|
</template>
|
<template #operation="{ row }">
|
<el-button type="primary" link @click="view(row)">查看</el-button>
|
<el-button type="primary" link @click="edit(row)">编辑</el-button>
|
<el-button type="success" link @click="handleCertify(row)" v-if="row.certifyStatus === 'uncertified'">认证</el-button>
|
</template>
|
</PIMTable>
|
</div>
|
|
<FormDialog :title="dialogTitle" v-model="dialogVisible" width="800px" @confirm="submitForm" @cancel="dialogVisible = false">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="发票代码" prop="invoiceCode">
|
<el-input v-model="form.invoiceCode" placeholder="请输入发票代码" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发票号码" prop="invoiceNo">
|
<el-input v-model="form.invoiceNo" placeholder="请输入发票号码" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="供应商" prop="supplierId">
|
<el-select v-model="form.supplierId" placeholder="请选择供应商" style="width: 100%;">
|
<el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开票日期" prop="invoiceDate">
|
<el-date-picker v-model="form.invoiceDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="金额(不含税)" prop="amount">
|
<el-input-number v-model="form.amount" :min="0" :precision="2" style="width: 100%;" @change="calculateTax" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="税率" prop="taxRate">
|
<el-select v-model="form.taxRate" placeholder="请选择税率" style="width: 100%;" @change="calculateTax">
|
<el-option
|
v-for="dict in tax_rate"
|
:key="dict.value"
|
:label="dict.label"
|
:value="Number(dict.value)"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="税额">
|
<el-input v-model="form.taxAmount" disabled />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="认证状态" prop="certifyStatus">
|
<el-select v-model="form.certifyStatus" placeholder="请选择认证状态" style="width: 100%;" disabled>
|
<el-option label="未认证" value="uncertified" />
|
<el-option label="已认证" value="certified" />
|
<el-option label="认证失败" value="failed" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="认证日期" prop="certifyDate">
|
<el-date-picker v-model="form.certifyDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" disabled />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="发票内容" prop="content">
|
<el-input v-model="form.content" type="textarea" :rows="3" placeholder="请输入发票内容" />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
</template>
|
</FormDialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
|
defineOptions({
|
name: "进项发票",
|
});
|
|
const { proxy } = getCurrentInstance();
|
const { tax_rate } = proxy.useDict("tax_rate");
|
|
const filters = reactive({
|
invoiceCode: "",
|
invoiceNo: "",
|
supplierId: "",
|
certifyStatus: "",
|
});
|
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
const columns = [
|
{ label: "发票代码", prop: "invoiceCode", width: "130" },
|
{ label: "发票号码", prop: "invoiceNo", width: "120" },
|
{ label: "供应商", prop: "supplierName", width: "180" },
|
{ label: "开票日期", prop: "invoiceDate", width: "120" },
|
{ label: "金额", prop: "amount", slot: "amount" },
|
{ label: "税额", prop: "taxAmount", slot: "taxAmount" },
|
{ label: "价税合计", prop: "totalAmount", slot: "totalAmount" },
|
{ label: "认证状态", prop: "certifyStatus", slot: "certifyStatus" },
|
{ label: "操作", prop: "operation", slot: "operation", width: "180", fixed: "right" },
|
];
|
|
const dataList = ref([]);
|
const selectedRows = ref([]);
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("");
|
const formRef = ref(null);
|
const isEdit = ref(false);
|
const currentId = ref(null);
|
|
const supplierList = [
|
{ id: 1, name: "北京原材料供应商" },
|
{ id: 2, name: "上海电子元器件公司" },
|
{ id: 3, name: "广州包装材料厂" },
|
{ id: 4, name: "深圳五金配件公司" },
|
];
|
|
const form = reactive({
|
invoiceCode: "",
|
invoiceNo: "",
|
supplierId: "",
|
invoiceDate: "",
|
amount: 0,
|
taxRate: 13,
|
taxAmount: 0,
|
totalAmount: 0,
|
certifyStatus: "uncertified",
|
certifyDate: "",
|
content: "",
|
remark: "",
|
});
|
|
const rules = {
|
invoiceCode: [{ required: true, message: "请输入发票代码", trigger: "blur" }],
|
invoiceNo: [{ required: true, message: "请输入发票号码", trigger: "blur" }],
|
supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }],
|
invoiceDate: [{ required: true, message: "请选择开票日期", trigger: "change" }],
|
amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
|
taxRate: [{ required: true, message: "请选择税率", trigger: "change" }],
|
};
|
|
const mockData = [
|
{ id: 1, invoiceCode: "0440021001", invoiceNo: "12345678", supplierId: 1, supplierName: "北京原材料供应商", invoiceDate: "2024-01-08", amount: 8000, taxRate: 13, taxAmount: 1040, totalAmount: 9040, certifyStatus: "certified", certifyDate: "2024-01-15", content: "原材料采购", remark: "" },
|
{ id: 2, invoiceCode: "0440021002", invoiceNo: "87654321", supplierId: 2, supplierName: "上海电子元器件公司", invoiceDate: "2024-01-10", amount: 12000, taxRate: 13, taxAmount: 1560, totalAmount: 13560, certifyStatus: "uncertified", certifyDate: "", content: "电子元器件", remark: "" },
|
{ id: 3, invoiceCode: "0440021003", invoiceNo: "11112222", supplierId: 3, supplierName: "广州包装材料厂", invoiceDate: "2024-01-12", amount: 3500, taxRate: 13, taxAmount: 455, totalAmount: 3955, certifyStatus: "certified", certifyDate: "2024-01-18", content: "包装材料", remark: "" },
|
];
|
|
const formatMoney = (value) => {
|
if (value === undefined || value === null) return "0.00";
|
return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
};
|
|
const calculateTax = () => {
|
form.taxAmount = Number((form.amount * form.taxRate / 100).toFixed(2));
|
form.totalAmount = Number((form.amount + form.taxAmount).toFixed(2));
|
};
|
|
const getCertifyStatusLabel = (status) => {
|
const map = { uncertified: "未认证", certified: "已认证", failed: "认证失败" };
|
return map[status] || status;
|
};
|
|
const getCertifyStatusType = (status) => {
|
const map = { uncertified: "info", certified: "success", failed: "danger" };
|
return map[status] || "";
|
};
|
|
const getTableData = () => {
|
let result = [...mockData];
|
if (filters.invoiceCode) {
|
result = result.filter(item => item.invoiceCode.includes(filters.invoiceCode));
|
}
|
if (filters.invoiceNo) {
|
result = result.filter(item => item.invoiceNo.includes(filters.invoiceNo));
|
}
|
if (filters.supplierId) {
|
result = result.filter(item => item.supplierId === filters.supplierId);
|
}
|
if (filters.certifyStatus) {
|
result = result.filter(item => item.certifyStatus === filters.certifyStatus);
|
}
|
pagination.total = result.length;
|
dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
|
};
|
|
const resetFilters = () => {
|
filters.invoiceCode = "";
|
filters.invoiceNo = "";
|
filters.supplierId = "";
|
filters.certifyStatus = "";
|
pagination.currentPage = 1;
|
getTableData();
|
};
|
|
const changePage = ({ current, size }) => {
|
pagination.currentPage = current;
|
pagination.pageSize = size;
|
getTableData();
|
};
|
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
const add = () => {
|
isEdit.value = false;
|
dialogTitle.value = "录入发票";
|
Object.assign(form, {
|
invoiceCode: "",
|
invoiceNo: "",
|
supplierId: "",
|
invoiceDate: new Date().toISOString().split('T')[0],
|
amount: 0,
|
taxRate: 13,
|
taxAmount: 0,
|
totalAmount: 0,
|
certifyStatus: "uncertified",
|
certifyDate: "",
|
content: "",
|
remark: "",
|
});
|
dialogVisible.value = true;
|
};
|
|
const edit = (row) => {
|
isEdit.value = true;
|
currentId.value = row.id;
|
dialogTitle.value = "编辑发票";
|
Object.assign(form, row);
|
dialogVisible.value = true;
|
};
|
|
const view = (row) => {
|
ElMessage.info(`查看发票: ${row.invoiceCode}-${row.invoiceNo}`);
|
};
|
|
const handleCertify = (row) => {
|
ElMessageBox.confirm("确认认证该发票吗？", "提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "info",
|
}).then(() => {
|
const index = mockData.findIndex(item => item.id === row.id);
|
if (index !== -1) {
|
mockData[index].certifyStatus = "certified";
|
mockData[index].certifyDate = new Date().toISOString().split('T')[0];
|
}
|
ElMessage.success("认证成功");
|
getTableData();
|
});
|
};
|
|
const handleBatchCertify = () => {
|
ElMessageBox.confirm(`确认批量认证选中的 ${selectedRows.value.length} 张发票吗？`, "提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "info",
|
}).then(() => {
|
selectedRows.value.forEach(row => {
|
const index = mockData.findIndex(item => item.id === row.id);
|
if (index !== -1 && mockData[index].certifyStatus === "uncertified") {
|
mockData[index].certifyStatus = "certified";
|
mockData[index].certifyDate = new Date().toISOString().split('T')[0];
|
}
|
});
|
ElMessage.success("批量认证成功");
|
getTableData();
|
});
|
};
|
|
const handleOut = () => {
|
ElMessage.success("导出成功");
|
};
|
|
const submitForm = () => {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
const supplier = supplierList.find(item => item.id === form.supplierId);
|
if (isEdit.value) {
|
const index = mockData.findIndex(item => item.id === currentId.value);
|
if (index !== -1) {
|
mockData[index] = { ...mockData[index], ...form, supplierName: supplier?.name };
|
}
|
ElMessage.success("编辑成功");
|
} else {
|
const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
|
mockData.push({ id: newId, ...form, supplierName: supplier?.name });
|
ElMessage.success("录入成功");
|
}
|
dialogVisible.value = false;
|
getTableData();
|
}
|
});
|
};
|
|
onMounted(() => {
|
getTableData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
|
.text-primary {
|
color: #409eff;
|
font-weight: bold;
|
}
|
|
.text-danger {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
.text-success {
|
color: #67c23a;
|
font-weight: bold;
|
}
|
</style>
|
