DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf: 优化部分展示

Browse Source
This commit is contained in:
砂糖
2025-08-13 18:01:19 +08:00
parent 9a660b910b
commit 7518c68068
4 changed files with 49 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
klp-ui/src/views/finance/jounery/index.vue
View File

@@ -2,60 +2,29 @@
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="日期" prop="journalDate">
<el-date-picker clearable
v-model="queryParams.journalDate"
type="date"
value-format="yyyy-MM-dd"
<el-date-picker clearable v-model="queryParams.journalDate" type="date" value-format="yyyy-MM-dd"
placeholder="请选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="摘要" prop="summary">
<el-input
v-model="queryParams.summary"
placeholder="请输入摘要"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.summary" placeholder="请输入摘要" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="收支类型" prop="transType">
<el-input
v-model="queryParams.transType"
placeholder="请输入收支类型"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.transType" placeholder="请输入收支类型" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="对方户名" prop="counterpart">
<el-input
v-model="queryParams.counterpart"
placeholder="请输入对方户名"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.counterpart" placeholder="请输入对方户名" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="收入金额" prop="incomeAmount">
<el-input
v-model="queryParams.incomeAmount"
placeholder="请输入收入金额"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.incomeAmount" placeholder="请输入收入金额" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="支出金额" prop="expenseAmount">
<el-input
v-model="queryParams.expenseAmount"
placeholder="请输入支出金额"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.expenseAmount" placeholder="请输入支出金额" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="余额" prop="balanceAmount">
<el-input
v-model="queryParams.balanceAmount"
placeholder="请输入余额"
clearable
@keyup.enter.native="handleQuery"
/>
<el-input v-model="queryParams.balanceAmount" placeholder="请输入余额" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -65,42 +34,18 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
@click="handleUpdate">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
@click="handleDelete">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button>
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@@ -116,44 +61,40 @@
<el-table-column label="摘要" align="center" prop="summary" />
<el-table-column label="收支类型" align="center" prop="transType" />
<el-table-column label="对方户名" align="center" prop="counterpart" />
<el-table-column label="收入金额" align="center" prop="incomeAmount" />
<el-table-column label="支出金额" align="center" prop="expenseAmount" />
<el-table-column label="收入金额" align="center" prop="incomeAmount">
<!-- 如果不是0用绿字展示，否则用正常颜色 -->
<template slot-scope="scope">
<span :style="Number(scope.row.incomeAmount) !== 0 ? { color: '#28a745' } : {}">
{{ scope.row.incomeAmount }}
</span>
</template>
</el-table-column>
<el-table-column label="支出金额" align="center" prop="expenseAmount">
<!-- 如果不是0用红字展示，否则用正常颜色 -->
<template slot-scope="scope">
<span :style="Number(scope.row.expenseAmount) !== 0 ? { color: '#dc3545' } : {}">
{{ scope.row.expenseAmount }}
</span>
</template>
</el-table-column>
<el-table-column label="余额" align="center" prop="balanceAmount" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改资金日记账对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="日期" prop="journalDate">
<el-date-picker clearable
v-model="form.journalDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
<el-date-picker clearable v-model="form.journalDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择日期">
</el-date-picker>
</el-form-item>
@@ -281,7 +222,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.journalId)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */