From ea6ad9ddc3d5b33897e93276282245f7023836ff Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 28 八月 2025 17:45:28 +0800
Subject: [PATCH] 大数据市场分析
---
src/views/invoiceCollaboration/components/InvoiceViewDialog.vue | 291 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 291 insertions(+), 0 deletions(-)
diff --git a/src/views/invoiceCollaboration/components/InvoiceViewDialog.vue b/src/views/invoiceCollaboration/components/InvoiceViewDialog.vue
new file mode 100644
index 0000000..72e7091
--- /dev/null
+++ b/src/views/invoiceCollaboration/components/InvoiceViewDialog.vue
@@ -0,0 +1,291 @@
+<template>
+ <el-dialog
+ :model-value="dialogViewVisible"
+ @update:model-value="$emit('update:dialogViewVisible', $event)"
+ :title="title"
+ width="1000px"
+ :close-on-click-modal="false"
+ >
+ <div class="invoice-view">
+ <!-- 鍩烘湰淇℃伅 -->
+ <el-card class="basic-info" shadow="never">
+ <template #header>
+ <div class="card-header">
+ <span>鍩烘湰淇℃伅</span>
+ </div>
+ </template>
+
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="鍙戠エ鍙风爜">{{ form.invoiceNo || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍙戠エ浠ｇ爜">{{ form.invoiceCode || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="寮�绁ㄦ棩鏈�">{{ form.invoiceDate || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="寮�绁ㄧ姸鎬�">
+ <el-tag :type="getStatusType(form.status)">
+ {{ getStatusText(form.status) }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="绋庢帶骞冲彴鐘舵��">
+ <el-tag :type="getTaxControlStatusType(form.taxControlStatus)">
+ {{ getTaxControlStatusText(form.taxControlStatus) }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="鍒涘缓鏃堕棿">{{ form.createTime || '-' }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+
+ <!-- 璐拱鏂逛俊鎭� -->
+ <el-card class="buyer-info" shadow="never">
+ <template #header>
+ <div class="card-header">
+ <span>璐拱鏂逛俊鎭�</span>
+ </div>
+ </template>
+
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="璐拱鏂瑰悕绉�">{{ form.buyerName || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="绾崇◣浜鸿瘑鍒彿">{{ form.buyerTaxNo || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍦板潃鐢佃瘽">{{ form.buyerAddress || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="寮�鎴疯鍙婅处鍙�">{{ form.buyerBankAccount || '-' }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+
+ <!-- 閿�鍞柟淇℃伅 -->
+ <el-card class="seller-info" shadow="never">
+ <template #header>
+ <div class="card-header">
+ <span>閿�鍞柟淇℃伅</span>
+ </div>
+ </template>
+
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="閿�鍞柟鍚嶇О">{{ form.sellerName || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="绾崇◣浜鸿瘑鍒彿">{{ form.sellerTaxNo || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍦板潃鐢佃瘽">{{ form.sellerAddress || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="寮�鎴疯鍙婅处鍙�">{{ form.sellerBankAccount || '-' }}</el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+
+ <!-- 鍟嗗搧鏄庣粏 -->
+ <el-card class="items-info" shadow="never">
+ <template #header>
+ <div class="card-header">
+ <span>鍟嗗搧鏄庣粏</span>
+ </div>
+ </template>
+
+ <el-table :data="form.items || []" border style="width: 100%">
+ <el-table-column label="鍟嗗搧鍚嶇О" prop="name" width="200" />
+ <el-table-column label="瑙勬牸鍨嬪彿" prop="specification" width="150" />
+ <el-table-column label="鍗曚綅" prop="unit" width="100" />
+ <el-table-column label="鏁伴噺" prop="quantity" width="100" />
+ <el-table-column label="鍗曚环" prop="unitPrice" width="120">
+ <template #default="scope">
+ {{ scope.row.unitPrice }} 鍏�
+ </template>
+ </el-table-column>
+ <el-table-column label="閲戦" prop="amount" width="120">
+ <template #default="scope">
+ {{ (scope.row.amount || 0).toFixed(2) }} 鍏�
+ </template>
+ </el-table-column>
+ <el-table-column label="绋庣巼" prop="taxRate" width="100">
+ <template #default="scope">
+ {{ (parseFloat(scope.row.taxRate || 0) * 100).toFixed(0) }}%
+ </template>
+ </el-table-column>
+ <el-table-column label="绋庨" prop="taxAmount" width="120">
+ <template #default="scope">
+ {{ (scope.row.taxAmount || 0).toFixed(2) }} 鍏�
+ </template>
+ </el-table-column>
+ <el-table-column label="浠风◣鍚堣" prop="totalAmount" width="120">
+ <template #default="scope">
+ {{ (scope.row.totalAmount || 0).toFixed(2) }} 鍏�
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 鍚堣淇℃伅 -->
+ <div class="summary-info">
+ <el-row :gutter="20">
+ <el-col :span="6">
+ <span class="summary-label">閲戦鍚堣锛�</span>
+ <span class="summary-value">{{ getTotalAmount().toFixed(2) }} 鍏�</span>
+ </el-col>
+ <el-col :span="6">
+ <span class="summary-label">绋庨鍚堣锛�</span>
+ <span class="summary-value">{{ getTotalTaxAmount().toFixed(2) }} 鍏�</span>
+ </el-col>
+ <el-col :span="6">
+ <span class="summary-label">浠风◣鍚堣锛�</span>
+ <span class="summary-value">{{ getTotalTotalAmount().toFixed(2) }} 鍏�</span>
+ </el-col>
+ </el-row>
+ </div>
+ </el-card>
+
+ <!-- 澶囨敞淇℃伅 -->
+ <el-card class="remark-info" shadow="never">
+ <template #header>
+ <div class="card-header">
+ <span>澶囨敞淇℃伅</span>
+ </div>
+ </template>
+
+ <div class="remark-content">
+ {{ form.remark || '鏃�' }}
+ </div>
+ </el-card>
+ </div>
+
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="handleClose">鍏抽棴</el-button>
+ </div>
+ </template>
+ </el-dialog>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+// Props
+const props = defineProps({
+ dialogViewVisible: {
+ type: Boolean,
+ default: false
+ },
+ form: {
+ type: Object,
+ default: () => ({})
+ },
+ title: {
+ type: String,
+ default: ""
+ }
+});
+
+// Emits
+const emit = defineEmits(['update:dialogViewVisible']);
+
+// 鑾峰彇鐘舵�佺被鍨�
+const getStatusType = (status) => {
+ const statusMap = {
+ draft: "",
+ pending: "warning",
+ issuing: "warning",
+ issued: "success",
+ failed: "danger",
+ cancelled: "info"
+ };
+ return statusMap[status] || "";
+};
+
+// 鑾峰彇鐘舵�佹枃鏈�
+const getStatusText = (status) => {
+ const statusMap = {
+ draft: "鑽夌",
+ pending: "寰呭紑绁�",
+ issuing: "寮�绁ㄤ腑",
+ issued: "宸插紑绁�",
+ failed: "寮�绁ㄥけ璐�",
+ cancelled: "宸蹭綔搴�"
+ };
+ return statusMap[status] || status;
+};
+
+// 鑾峰彇绋庢帶骞冲彴鐘舵�佺被鍨�
+const getTaxControlStatusType = (status) => {
+ const statusMap = {
+ pending: "warning",
+ syncing: "warning",
+ synced: "success",
+ failed: "danger"
+ };
+ return statusMap[status] || "";
+};
+
+// 鑾峰彇绋庢帶骞冲彴鐘舵�佹枃鏈�
+const getTaxControlStatusText = (status) => {
+ const statusMap = {
+ pending: "寰呭悓姝�",
+ syncing: "鍚屾涓�",
+ synced: "宸插悓姝�",
+ failed: "鍚屾澶辫触"
+ };
+ return statusMap[status] || status;
+};
+
+// 璁＄畻鎬婚噾棰�
+const getTotalAmount = () => {
+ return (props.form.items || []).reduce((sum, item) => sum + (item.amount || 0), 0);
+};
+
+// 璁＄畻鎬荤◣棰�
+const getTotalTaxAmount = () => {
+ return (props.form.items || []).reduce((sum, item) => sum + (item.taxAmount || 0), 0);
+};
+
+// 璁＄畻鎬讳环绋庡悎璁�
+const getTotalTotalAmount = () => {
+ return (props.form.items || []).reduce((sum, item) => sum + (item.totalAmount || 0), 0);
+};
+
+// 鍏抽棴瀵硅瘽妗�
+const handleClose = () => {
+ emit('update:dialogViewVisible', false);
+};
+</script>
+
+<style scoped>
+.invoice-view {
+ padding: 20px 0;
+}
+
+.basic-info,
+.buyer-info,
+.seller-info,
+.items-info,
+.remark-info {
+ margin-bottom: 20px;
+}
+
+.card-header {
+ font-weight: bold;
+ font-size: 16px;
+}
+
+.summary-info {
+ margin-top: 15px;
+ padding: 15px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+}
+
+.summary-label {
+ font-weight: bold;
+ margin-right: 10px;
+}
+
+.summary-value {
+ color: #409eff;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.remark-content {
+ padding: 15px;
+ background-color: #f5f7fa;
+ border-radius: 4px;
+ min-height: 60px;
+ line-height: 1.6;
+}
+
+.dialog-footer {
+ text-align: right;
+}
+
+.el-table {
+ margin-top: 10px;
+}
+</style>
--
Gitblit v1.9.3