From 5948283b8924d800d3e5390c5bbb35749de7ed2a Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 13 五月 2026 16:32:45 +0800
Subject: [PATCH] 进销存pro 1.总帐科目树形表格样式修改
---
src/views/financialManagement/generalLedger/index.vue | 98 ++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 85 insertions(+), 13 deletions(-)
diff --git a/src/views/financialManagement/generalLedger/index.vue b/src/views/financialManagement/generalLedger/index.vue
index 2d370f4..556567b 100644
--- a/src/views/financialManagement/generalLedger/index.vue
+++ b/src/views/financialManagement/generalLedger/index.vue
@@ -48,16 +48,58 @@
icon="Download">瀵煎嚭</el-button>
</div>
</div>
- <PIMTable rowKey="id"
- :column="columns"
- :tableData="dataList"
- :page="{
- current: pagination.currentPage,
- size: pagination.pageSize,
- total: pagination.total,
- }"
- @pagination="changePage">
- </PIMTable>
+ <el-table ref="tableRef"
+ v-loading="loading"
+ :data="dataList"
+ row-key="id"
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+ height="calc(100vh - 280px)"
+ border
+ stripe
+ highlight-current-row
+ class="subject-table">
+ <el-table-column label="绉戠洰缂栫爜" prop="subjectCode" width="140">
+ <template #default="scope">
+ <span class="subject-code">{{ scope.row.subjectCode }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="绉戠洰鍚嶇О" prop="subjectName" min-width="180">
+ <template #default="scope">
+ <span class="subject-name" :class="{ 'is-parent': scope.row.children?.length > 0 }">
+ {{ scope.row.subjectName }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column label="绉戠洰绫诲瀷" prop="subjectType" width="100" align="center">
+ <template #default="scope">
+ <el-tag size="small" :type="getSubjectTypeType(scope.row.subjectType)">
+ {{ scope.row.subjectType }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="浣欓鏂瑰悜" prop="balanceDirection" width="100" align="center">
+ <template #default="scope">
+ <el-tag size="small" :type="scope.row.balanceDirection === '鍊熸柟' ? 'primary' : 'danger'">
+ {{ scope.row.balanceDirection }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鐘舵��" prop="status" width="80" align="center">
+ <template #default="scope">
+ <el-tag size="small" :type="scope.row.status === 0 || scope.row.status === '0' ? 'success' : 'info'">
+ {{ scope.row.status === 0 || scope.row.status === '0' ? '鍚敤' : '绂佺敤' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="澶囨敞" prop="remark" show-overflow-tooltip min-width="150" />
+ <el-table-column label="鎿嶄綔" align="center" fixed="right" width="240">
+ <template #default="scope">
+ <el-button link type="primary" icon="Plus" @click="addChild(scope.row)">鏂板</el-button>
+ <el-button link type="primary" icon="Edit" @click="edit(scope.row)">缂栬緫</el-button>
+ <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
<FormDialog :title="dialogTitle"
v-model="dialogVisible"
@@ -131,7 +173,7 @@
</template>
<script setup>
- import { ref, reactive, onMounted, getCurrentInstance } from "vue";
+ import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import {
@@ -237,7 +279,9 @@
const dialogTitle = ref("");
const parentSubjectLabel = ref("椤剁骇绉戠洰");
const formRef = ref(null);
+ const tableRef = ref(null);
const isEdit = ref(false);
+ const loading = ref(false);
const form = reactive({
id: undefined,
@@ -270,14 +314,17 @@
};
const getTableData = () => {
+ loading.value = true;
const query = {
current: pagination.currentPage,
size: pagination.pageSize,
...filters,
};
listAccountSubject(query).then(response => {
- dataList.value = response.data.records;
- pagination.total = response.data.total;
+ dataList.value = response.data.records || [];
+ loading.value = false;
+ }).catch(() => {
+ loading.value = false;
});
};
@@ -423,4 +470,29 @@
justify-content: space-between;
margin-bottom: 15px;
}
+
+ .subject-table {
+ border-radius: 8px;
+ overflow: hidden;
+
+ :deep(.el-table__row) {
+ transition: background-color 0.3s;
+ }
+
+ :deep(.el-table__row:hover) {
+ background-color: #f5f7fa;
+ }
+
+ .subject-code {
+ color: #606266;
+ }
+
+ .subject-name {
+ font-weight: 500;
+
+ &.is-parent {
+ color: #409eff;
+ }
+ }
+ }
</style>
--
Gitblit v1.9.3