From 13f84b1a76395d7cfceb8d1d81d26b8e464df8a0 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期五, 16 一月 2026 16:51:25 +0800
Subject: [PATCH] fix: 输入很长的数字字符后，展示内容超出显示框
---
src/views/financialManagement/expenseManagement/index.vue | 198 +++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 172 insertions(+), 26 deletions(-)
diff --git a/src/views/financialManagement/expenseManagement/index.vue b/src/views/financialManagement/expenseManagement/index.vue
index 32d906b..2f84e84 100644
--- a/src/views/financialManagement/expenseManagement/index.vue
+++ b/src/views/financialManagement/expenseManagement/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-form :model="filters" :inline="true">
- <el-form-item label="褰曞叆鏃ユ湡:">
+ <el-form-item label="鏀嚭鏃ユ湡:">
<el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
</el-form-item>
@@ -55,12 +55,12 @@
@pagination="changePage"
>
<template #operation="{ row }">
- <el-button type="primary" text @click="edit(row.id)" icon="editPen">
+ <el-button type="primary" link @click="edit(row.id)">
缂栬緫
</el-button>
<el-button
type="primary"
- text
+ link
@click="openFilesFormDia(row)"
>
闄勪欢
@@ -69,18 +69,27 @@
</PIMTable>
</div>
<Modal ref="modalRef" @success="getTableData"></Modal>
- <files-dia ref="filesDia"></files-dia>
+ <FileListDialog
+ ref="fileListRef"
+ v-model="fileListDialogVisible"
+ :show-upload-button="true"
+ :show-delete-button="true"
+ :upload-method="handleUpload"
+ :delete-method="handleFileDelete"
+ />
</div>
</template>
<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
-import { listPage, delAccountExpense } from "@/api/financialManagement/expenseManagement";
+import { listPage, delAccountExpense, fileListPage, fileAdd, fileDel } from "@/api/financialManagement/expenseManagement";
import { onMounted, getCurrentInstance } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
-import FilesDia from "../revenueManagement/filesDia.vue";
+import FileListDialog from "@/components/Dialog/FileListDialog.vue";
+import request from "@/utils/request";
+import { getToken } from "@/utils/auth";
defineOptions({
name: "鏀嚭绠＄悊",
@@ -92,7 +101,10 @@
const modalRef = ref();
const { checkout_payment } = proxy.useDict("checkout_payment");
const { expense_types } = proxy.useDict("expense_types");
-const filesDia = ref()
+const fileListRef = ref(null);
+const fileListDialogVisible = ref(false);
+const currentFileRow = ref(null);
+const accountType = ref('鏀嚭');
const {
filters,
@@ -106,11 +118,11 @@
listPage,
{
expenseMethod: undefined,
+ entryDate: undefined,
},
[
{
label: "鏀嚭鏃ユ湡",
- align: "center",
prop: "expenseDate",
},
{
@@ -128,19 +140,16 @@
},
{
label: "渚涘簲鍟嗗悕绉�",
- align: "center",
prop: "supplierName",
},
{
label: "鏀嚭閲戦",
- align: "center",
prop: "expenseMoney",
},
{
label: "鏀嚭鎻忚堪",
- align: "center",
prop: "expenseDescribed",
},
@@ -148,6 +157,7 @@
label: "浠樻鏂瑰紡",
align: "center",
prop: "expenseMethod",
+ width: '120',
dataType: "tag",
formatData: (params) => {
if (checkout_payment.value.find((m) => m.value == params)) {
@@ -159,24 +169,20 @@
},
{
label: "鍙戠エ鍙风爜",
- align: "center",
prop: "invoiceNumber",
},
{
label: "澶囨敞",
- align: "center",
prop: "note",
},
{
label: "褰曞叆浜�",
- align: "center",
prop: "inputUser",
},
{
label: "褰曞叆鏃ユ湡",
- align: "center",
prop: "inputTime",
},
@@ -186,7 +192,7 @@
dataType: "slot",
slot: "operation",
align: "center",
- width: "200px",
+ width: "160px",
},
]
);
@@ -226,9 +232,11 @@
const changeDaterange = (value) => {
if (value) {
+ filters.entryDate = value;
filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
} else {
+ filters.entryDate = null;
filters.entryDateStart = undefined;
filters.entryDateEnd = undefined;
}
@@ -249,19 +257,157 @@
});
};
// 鎵撳紑闄勪欢寮规
-const openFilesFormDia = (row) => {
- nextTick(() => {
- filesDia.value?.openDialog( row,'鏀嚭')
- })
+const openFilesFormDia = async (row) => {
+ currentFileRow.value = row;
+ accountType.value = '鏀嚭';
+ try {
+ const res = await fileListPage({
+ accountId: row.id,
+ accountType: accountType.value,
+ current: 1,
+ size: 100
+ });
+ if (res.code === 200 && fileListRef.value) {
+ // 灏嗘暟鎹浆鎹负 FileListDialog 闇�瑕佺殑鏍煎紡
+ const fileList = (res.data?.records || []).map(item => ({
+ name: item.name,
+ url: item.url,
+ id: item.id,
+ ...item
+ }));
+ fileListRef.value.open(fileList);
+ fileListDialogVisible.value = true;
+ }
+ } catch (error) {
+ proxy.$modal.msgError("鑾峰彇闄勪欢鍒楄〃澶辫触");
+ }
+};
+
+// 涓婁紶闄勪欢
+const handleUpload = async () => {
+ if (!currentFileRow.value) {
+ proxy.$modal.msgWarning("璇峰厛閫夋嫨鏁版嵁");
+ return null;
+ }
+
+ return new Promise((resolve) => {
+ // 鍒涘缓涓�涓殣钘忕殑鏂囦欢杈撳叆鍏冪礌
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.style.display = 'none';
+ input.onchange = async (e) => {
+ const file = e.target.files[0];
+ if (!file) {
+ resolve(null);
+ return;
+ }
+
+ try {
+ // 浣跨敤 FormData 涓婁紶鏂囦欢
+ const formData = new FormData();
+ formData.append('file', file);
+
+ const uploadRes = await request({
+ url: '/file/upload',
+ method: 'post',
+ data: formData,
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ Authorization: `Bearer ${getToken()}`
+ }
+ });
+
+ if (uploadRes.code === 200) {
+ // 淇濆瓨闄勪欢淇℃伅
+ const fileData = {
+ accountId: currentFileRow.value.id,
+ accountType: accountType.value,
+ name: uploadRes.data.originalName || file.name,
+ url: uploadRes.data.tempPath || uploadRes.data.url
+ };
+
+ const saveRes = await fileAdd(fileData);
+ if (saveRes.code === 200) {
+ proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
+ // 閲嶆柊鍔犺浇鏂囦欢鍒楄〃
+ const listRes = await fileListPage({
+ accountId: currentFileRow.value.id,
+ accountType: accountType.value,
+ current: 1,
+ size: 100
+ });
+ if (listRes.code === 200 && fileListRef.value) {
+ const fileList = (listRes.data?.records || []).map(item => ({
+ name: item.name,
+ url: item.url,
+ id: item.id,
+ ...item
+ }));
+ fileListRef.value.setList(fileList);
+ }
+ // 杩斿洖鏂版枃浠朵俊鎭�
+ resolve({
+ name: fileData.name,
+ url: fileData.url,
+ id: saveRes.data?.id
+ });
+ } else {
+ proxy.$modal.msgError(saveRes.msg || "鏂囦欢淇濆瓨澶辫触");
+ resolve(null);
+ }
+ } else {
+ proxy.$modal.msgError(uploadRes.msg || "鏂囦欢涓婁紶澶辫触");
+ resolve(null);
+ }
+ } catch (error) {
+ proxy.$modal.msgError("鏂囦欢涓婁紶澶辫触");
+ resolve(null);
+ } finally {
+ document.body.removeChild(input);
+ }
+ };
+
+ document.body.appendChild(input);
+ input.click();
+ });
+};
+
+// 鍒犻櫎闄勪欢
+const handleFileDelete = async (row) => {
+ try {
+ const res = await fileDel([row.id]);
+ if (res.code === 200) {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ // 閲嶆柊鍔犺浇鏂囦欢鍒楄〃
+ if (currentFileRow.value && fileListRef.value) {
+ const listRes = await fileListPage({
+ accountId: currentFileRow.value.id,
+ accountType: accountType.value,
+ current: 1,
+ size: 100
+ });
+ if (listRes.code === 200) {
+ const fileList = (listRes.data?.records || []).map(item => ({
+ name: item.name,
+ url: item.url,
+ id: item.id,
+ ...item
+ }));
+ fileListRef.value.setList(fileList);
+ }
+ }
+ return true; // 杩斿洖 true 琛ㄧず鍒犻櫎鎴愬姛锛岀粍浠朵細鏇存柊鍒楄〃
+ } else {
+ proxy.$modal.msgError(res.msg || "鍒犻櫎澶辫触");
+ return false;
+ }
+ } catch (error) {
+ proxy.$modal.msgError("鍒犻櫎澶辫触");
+ return false;
+ }
};
onMounted(() => {
- filters.entryDate = [
- dayjs().format("YYYY-MM-DD"),
- dayjs().add(1, "day").format("YYYY-MM-DD"),
- ]
- filters.entryDateStart = dayjs().format("YYYY-MM-DD")
- filters.entryDateEnd = dayjs().add(1, "day").format("YYYY-MM-DD")
getTableData();
});
</script>
--
Gitblit v1.9.3