1759 lines
58 KiB
Vue
1759 lines
58 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
|
||
|
||
<el-row :gutter="20">
|
||
<!--部门数据-->
|
||
<el-col :span="4" :xs="24">
|
||
<div class="custom-tree-container">
|
||
<el-input
|
||
v-model="receiveAccountName"
|
||
placeholder="请输入收款账户名"
|
||
clearable
|
||
size="small"
|
||
prefix-icon="el-icon-search"
|
||
style="margin-bottom: 20px"
|
||
/>
|
||
</div>
|
||
<div class="head-container">
|
||
<el-tree
|
||
:data="receiveAccountList"
|
||
:props="defaultProps"
|
||
:expand-on-click-node="false"
|
||
:filter-node-method="filterNode"
|
||
ref="tree"
|
||
node-key="id"
|
||
default-expand-all
|
||
highlight-current
|
||
@node-click="handleNodeClick"
|
||
>
|
||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||
<span class="node-label" v-if="!data.isAdd">{{ node.label }}</span>
|
||
<el-input
|
||
v-model="newChildNode"
|
||
v-if="data.isAdd"
|
||
ref="addRef"
|
||
class="add-new-child-node">
|
||
</el-input>
|
||
<span>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
@click="() => append(data)"
|
||
v-if="data.parentId!==-1">
|
||
新增
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
@click="handleAddNodeEnter(data)"
|
||
v-if="data.parentId===-1&& data.isAdd">
|
||
确定
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
@click="() => remove(node, data)" v-if="data.parentId===-1">
|
||
删除
|
||
</el-button>
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="20" :xs="24">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="入账管理" name="first">
|
||
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
||
label-width="68px">
|
||
<el-form-item label="入账名称" prop="financeTitle">
|
||
<el-input
|
||
v-model="queryParams.financeTitle"
|
||
placeholder="请输入名称"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="付款方" prop="financeParties">
|
||
<el-input
|
||
v-model="queryParams.financeParties"
|
||
placeholder="请输入付款方"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="日期范围">
|
||
<el-date-picker
|
||
v-model="searchTime"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:default-time="['00:00:00', '23:59:59']">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('1')">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery('1')">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
|
||
<el-table v-loading="loading" :data="financeListEnter">
|
||
<!-- <el-table-column label="入账标识" align="left" width="190" prop="financeId" v-if="true"/>-->
|
||
<!-- <el-table-column label="项目标识" align="left" prop="projectId" />-->
|
||
<el-table-column label="入账名称" align="left" prop="financeTitle"/>
|
||
<el-table-column label="付款方" align="center" prop="financeParties"/>
|
||
<el-table-column label="总金额" align="center" prop="priceSum"/>
|
||
<el-table-column label="支付类型" align="center" prop="payType">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.sys_pay_type" :value="scope.row.payType"/>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="进出账类型" align="center" prop="financeType" />-->
|
||
<el-table-column label="交易日期" align="center" prop="financeTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.financeTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建者" align="center" prop="createBy"/>
|
||
<el-table-column label="开票状态" align="center" prop="makeTime" width="80">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.makeTime == null || (scope.row.makePrice == null || scope.row.makePrice == '')"
|
||
style="color: #cccccc">未开票</span>
|
||
<span v-else style="color: #1ab394">已开票</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<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-view"
|
||
@click="handleLook(scope.row)"
|
||
v-hasPermi="['oa:finance:query']"
|
||
>查看
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
v-hasPermi="['oa:finance:edit']"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
v-hasPermi="['oa:finance:remove']"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="totalEnter > 0"
|
||
:total="totalEnter"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getListFinance('0')"
|
||
/>
|
||
|
||
<el-row :gutter="10" class="mb8" style="margin-top: 30px">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAddEnter"
|
||
v-hasPermi="['oa:finance:add']"
|
||
>入账
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-tab-pane>
|
||
<el-tab-pane label="出账管理" name="second">
|
||
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
|
||
label-width="68px">
|
||
<el-form-item label="出账名称" prop="financeTitle">
|
||
<el-input
|
||
v-model="queryParams.financeTitle"
|
||
placeholder="请输入出账名称"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="经手人" prop="financeParties">
|
||
<el-input
|
||
v-model="queryParams.financeParties"
|
||
placeholder="请输入经手人"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="日期范围">
|
||
<el-date-picker
|
||
v-model="searchTime"
|
||
type="daterange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:default-time="['00:00:00', '23:59:59']">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('0')">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery('0')">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table v-loading="loading" :data="financeListOut">
|
||
<!-- <el-table-column label="入账标识" align="left" width="190" prop="financeId" v-if="true"/>-->
|
||
<!-- <el-table-column label="项目标识" align="left" prop="projectId" />-->
|
||
<el-table-column label="出账名称" align="left" prop="financeTitle"/>
|
||
<el-table-column label="经手人" align="center" prop="financeParties"/>
|
||
<el-table-column label="总金额" align="center" prop="priceSum"/>
|
||
<el-table-column label="支付类型" align="center" prop="payType">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.sys_pay_type" :value="scope.row.payType"/>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="进出账类型" align="center" prop="financeType" />-->
|
||
<el-table-column label="交易日期" align="center" prop="financeTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.financeTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建者" align="center" prop="createBy"/>
|
||
<el-table-column label="开票状态" align="center" prop="makeTime" width="80">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.makeTime == null || (scope.row.makePrice == null || scope.row.makePrice == '')"
|
||
style="color: #cccccc">未开票</span>
|
||
<span v-else style="color: #1ab394">已开票</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<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-view"
|
||
@click="handleLook(scope.row)"
|
||
v-hasPermi="['oa:finance:query']"
|
||
>查看
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
v-hasPermi="['oa:finance:edit']"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
v-hasPermi="['oa:finance:remove']"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="totalOut > 0"
|
||
:total="totalOut"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getListFinance('0')"
|
||
/>
|
||
|
||
<el-row :gutter="10" class="mb8" style="margin-top: 30px">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAddOut"
|
||
v-hasPermi="['oa:finance:add']"
|
||
>出账
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="财务核算（日期）" name="third">
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<div class="tip-top">
|
||
<div style="display: flex;justify-content: space-between">
|
||
<div style="display: flex;justify-content: center;align-items: center;white-space: nowrap">
|
||
<span> 日期检索：</span>
|
||
<el-date-picker
|
||
v-model="value1"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
@blur="getTimeBlur">
|
||
</el-date-picker>
|
||
</div>
|
||
<span class="sp1">收入：</span>
|
||
<span class="sp2 cl2">¥ {{ checkByTime.income }} 元</span>
|
||
<span class="sp1">支出：</span>
|
||
<span class="sp2 cl1"> ¥ {{ checkByTime.out }} 元</span>
|
||
<span class="sp1">核算：</span>
|
||
<span class="sp2 cl3">¥{{ checkByTime.check }}元</span>
|
||
</div>
|
||
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<div class="tip">
|
||
本月核算情况
|
||
</div>
|
||
<div class="demo-shadow">
|
||
<el-row :gutter="5">
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月收入</h4>
|
||
<p class="cl2">¥ {{ monthCheck.income }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月支出</h4>
|
||
<p class="cl1">¥ {{ monthCheck.out }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月核算</h4>
|
||
<p class="cl3">¥ {{ monthCheck.check }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
|
||
|
||
</el-row>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="tip">
|
||
本年核算情况
|
||
</div>
|
||
<div class="demo-shadow">
|
||
<el-row :gutter="5">
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月收入</h4>
|
||
<p class="cl2">¥ {{ yearCheck.income }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月支出</h4>
|
||
<p class="cl1">¥ {{ yearCheck.out }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月核算</h4>
|
||
<p class="cl3">¥ {{ yearCheck.check }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="24">
|
||
<div class="date-col">
|
||
<el-table
|
||
:data="currentList"
|
||
style="width: 100%"
|
||
:header-cell-style="{background:'#50bfff',color:'#ffffff',fontSize:'18px', borderTopRightRadius: '5px', borderTopLeftRadius: '5px'}"
|
||
:row-class-name="tableRowClassName">
|
||
<el-table-column
|
||
prop="onMonth"
|
||
label="月份(近6个月)"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="financeCome"
|
||
label="收入">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="financeOut"
|
||
label="支出"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="count"
|
||
label="核算">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
|
||
</el-tab-pane>
|
||
<el-tab-pane label="财务核算（付款类型）" name="fourth">
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<div class="tip-top">
|
||
<div style="display: flex;justify-content: space-between">
|
||
<div style="display: flex;justify-content: center;align-items: center;white-space: nowrap">
|
||
<span> 支付类型：</span>
|
||
<el-select v-model="payType" placeholder="请选择付款类型" @change="getFinanceDateByPayType">
|
||
<el-option
|
||
v-for="dict in dict.type.sys_pay_type"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="parseInt(dict.value)"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<span class="sp1">收入：</span>
|
||
<span class="sp2 cl2">¥ {{ checkByTime.income }} 元</span>
|
||
<span class="sp1">支出：</span>
|
||
<span class="sp2 cl1"> ¥ {{ checkByTime.out }} 元</span>
|
||
<span class="sp1">核算：</span>
|
||
<span class="sp2 cl3">¥{{ checkByTime.check }}元</span>
|
||
</div>
|
||
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<div class="tip">
|
||
本月核算情况
|
||
</div>
|
||
<div class="demo-shadow">
|
||
<el-row :gutter="5">
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月收入</h4>
|
||
<p class="cl2">¥ {{ monthCheck.income }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月支出</h4>
|
||
<p class="cl1">¥ {{ monthCheck.out }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月核算</h4>
|
||
<p class="cl3">¥ {{ monthCheck.check }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
|
||
|
||
</el-row>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="tip">
|
||
本年核算情况
|
||
</div>
|
||
<div class="demo-shadow">
|
||
<el-row :gutter="5">
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月收入</h4>
|
||
<p class="cl2">¥ {{ yearCheck.income }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月支出</h4>
|
||
<p class="cl1">¥ {{ yearCheck.out }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="shadow-col">
|
||
<h4>本月核算</h4>
|
||
<p class="cl3">¥ {{ yearCheck.check }} 元</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="24">
|
||
<div class="date-col">
|
||
<el-table
|
||
:data="currentList"
|
||
style="width: 100%"
|
||
:header-cell-style="{background:'#50bfff',color:'#ffffff',fontSize:'18px', borderTopRightRadius: '5px', borderTopLeftRadius: '5px'}"
|
||
:row-class-name="tableRowClassName">
|
||
<el-table-column
|
||
prop="onMonth"
|
||
label="月份(近6个月)"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="financeCome"
|
||
label="收入">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="financeOut"
|
||
label="支出"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="count"
|
||
label="核算">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
|
||
</el-tab-pane>
|
||
<!-- <el-tab-pane label="财务核算（综合）" name="fifth">-->
|
||
<!-- <div class="funding-page">-->
|
||
<!-- <header class="page-header">-->
|
||
<!-- <h1>资金出入账核算</h1>-->
|
||
<!-- </header>-->
|
||
|
||
<!-- <main class="content">-->
|
||
<!-- <el-row :gutter="20">-->
|
||
<!-- <el-col :span="8">-->
|
||
<!-- <el-card class="info-card">-->
|
||
<!-- <el-select v-model="selectedAccount" placeholder="选择账户">-->
|
||
<!-- <el-option v-for="item in accounts" :key="item.id" :label="item.name" :value="item.id" />-->
|
||
<!-- </el-select>-->
|
||
<!-- </el-card>-->
|
||
<!-- </el-col>-->
|
||
|
||
<!-- <el-col :span="8">-->
|
||
<!-- <el-card class="info-card">-->
|
||
<!-- <el-date-picker v-model="selectedDateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />-->
|
||
<!-- </el-card>-->
|
||
<!-- </el-col>-->
|
||
|
||
<!-- <el-col :span="8">-->
|
||
<!-- <el-card class="info-card">-->
|
||
<!-- <el-select v-model="selectedPaymentType" placeholder="选择付款类型">-->
|
||
<!-- <el-option v-for="item in paymentTypes" :key="item.value" :label="item.label" :value="item.value" />-->
|
||
<!-- </el-select>-->
|
||
<!-- </el-card>-->
|
||
<!-- </el-col>-->
|
||
<!-- </el-row>-->
|
||
|
||
<!-- <div class="calculate-btn">-->
|
||
<!-- <el-button type="primary" @click="calculateFunds">核算资金</el-button>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- <div v-if="calculationResult" class="result">-->
|
||
<!-- <el-card class="result-card">-->
|
||
<!-- <p>收入: {{ calculationResult.income }}</p>-->
|
||
<!-- <p>支出: {{ calculationResult.expense }}</p>-->
|
||
<!-- <p>净收入: {{ calculationResult.netIncome }}</p>-->
|
||
<!-- </el-card>-->
|
||
<!-- </div>-->
|
||
<!-- </main>-->
|
||
<!-- </div>-->
|
||
|
||
<!-- </el-tab-pane>-->
|
||
</el-tabs>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!--查看账目-->
|
||
<el-dialog :title="title" :visible.sync="openLook" width="60%" append-to-body>
|
||
<el-descriptions :column="4" border>
|
||
<el-descriptions-item :label="type == 1 ? '入账名称' : '出账名称'" :span="2" :labelStyle="lableBg">
|
||
{{ form.financeTitle }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="交易时间" :span="2" :labelStyle="lableBg">
|
||
{{ parseTime(form.financeTime, '{y}-{m}-{d}') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :label="type == 1 ? '付款方' : '经手人'" :span="2" :labelStyle="lableBg">
|
||
{{ form.financeParties }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="支付类型" :span="2" :labelStyle="lableBg">
|
||
<dict-tag :options="dict.type.sys_pay_type" :value="form.payType"/>
|
||
</el-descriptions-item>
|
||
|
||
<el-descriptions-item label="创建者" :span="2" :labelStyle="lableBg">
|
||
{{ form.createBy }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="备注" :span="2" :labelStyle="lableBg">
|
||
{{ form.remark }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="开票状态2" :span="4" :labelStyle="lableBg">
|
||
<span v-if="form.makeTime == null || form.makePrice == null" style="color: #cccccc">未开票</span>
|
||
<span v-else style="color: #1ab394">
|
||
已开票, 开票金额：¥ {{ form.makePrice }},
|
||
开票比例：{{ form.makeRatio == null ? '未填' : form.makeRatio }},
|
||
开票时间：{{ form.makeTime }},
|
||
开票情况说明：{{ form.makeExplain == null ? '未填' : form.makeExplain }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="附件" :span="4" :labelStyle="lableBg">
|
||
<!--附件-->
|
||
<template v-if="form.accessory">
|
||
<el-tooltip class="item" effect="dark" content="点击下载" placement="bottom">
|
||
<el-link type="primary" @click="downloadFile(form.accessory)">
|
||
{{ form.accessory.match('[^/]+(?!.*/)')[0] }}
|
||
</el-link>
|
||
</el-tooltip>
|
||
</template>
|
||
<template v-else>
|
||
<span style="color: #999999">暂无附件</span>
|
||
</template>
|
||
<!--附件-->
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-table :data="detailList" style="margin-top: 30px;">
|
||
<el-table-column label="名称" prop="detailTitle">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.detailTitle }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="金额" prop="price">
|
||
<template slot-scope="scope">
|
||
<div>¥{{ scope.row.price }}元</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="大写金额" prop="bigPrice">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.bigPrice }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
<h2 class="cl3">{{ type == 1 ? '入账合计' : '出账合计' }}：¥{{ priceSum }}元</h2>
|
||
</el-dialog>
|
||
|
||
|
||
<!-- 添加或修改进出账管理对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item :label="type == 1 ? '入账名称' : '出账名称'" prop="financeTitle">
|
||
<el-input v-model="form.financeTitle" placeholder="请输入账务名称"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="账户" prop="receiveAccountId">
|
||
<el-select v-model="form.receiveAccountId" placeholder="请选择账户">
|
||
<el-option
|
||
v-for="item in receiveAccounts"
|
||
:key="item.receiveAccountId"
|
||
:label="item.receiveAccountName"
|
||
:value="item.receiveAccountId">
|
||
<span v-if="item.receiveAccountId===-1">无分类</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="交易时间" prop="financeTime">
|
||
<el-date-picker clearable
|
||
v-model="form.financeTime"
|
||
type="date"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择交易时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="type == 1 ? 16 : 8">
|
||
<el-form-item :label="type == 1 ? '付款方' : '经手人'" prop="financeParties">
|
||
<el-input v-model="form.financeParties" placeholder="请输入经手人/付款方"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col v-if="type==0" :span="8">
|
||
<el-form-item label="出账类型" prop="outType">
|
||
<el-select v-model="form.outType" placeholder="请选择出账类型（默认其他）">
|
||
<el-option
|
||
v-for="dict in dict.type.oa_out_finance"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="支付类型" prop="payType">
|
||
<el-select v-model="form.payType" placeholder="请选择支付类型">
|
||
<el-option
|
||
v-for="dict in dict.type.sys_pay_type"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="开票比例" prop="makeRatio">
|
||
<el-input v-model="form.makeRatio" placeholder="请输入开票比例"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="开票金额" prop="makePrice">
|
||
<el-input v-model="form.makePrice" placeholder="请输入开票金额"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="开票时间" prop="makeTime">
|
||
<el-input v-model="form.makeTime" placeholder="请输入开票时间"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="开票情况说明" prop="makeExplain">
|
||
<el-input v-model="form.makeExplain" placeholder="请输入开票情况说明"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="附件" prop="accessory">
|
||
<file-upload v-model="form.accessory"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
<el-divider content-position="center">明细</el-divider>
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button type="primary" icon="el-icon-plus" size="mini" plain @click="handleAddDetailList">添加明细
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button type="danger" icon="el-icon-delete" size="mini" plain @click="handleDeleteDetailList">删除
|
||
</el-button>
|
||
</el-col>
|
||
<!--<el-col :span="1.5">总金额(¥)：<span style="color: #ff9900; font-size: 150%">{{priceSum}}</span>元</el-col>-->
|
||
</el-row>
|
||
|
||
<el-table :data="detailList" :row-class-name="rowDetailListIndex"
|
||
@selection-change="handleDetailListSelectionChange" ref="detailList">
|
||
<el-table-column type="selection" width="50" align="center"/>
|
||
<el-table-column label="序号" align="center" prop="index" width="50"/>
|
||
<el-table-column label="名称" prop="detailTitle">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.detailTitle" placeholder="请输入名称"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="金额" prop="price">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.price" placeholder="请输入金额"
|
||
@input="updateBigPrice(scope.$index, scope.row)"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="大写金额(零壹贰叁肆伍陆柒捌玖万仟佰拾亿元角分)" prop="bigPrice">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.bigPrice" placeholder="请输入大写金额"/>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listFinance,
|
||
getFinance,
|
||
delFinance,
|
||
addFinance,
|
||
updateFinance,
|
||
findFinance,
|
||
findFinanceList
|
||
} from "@/api/oa/finance";
|
||
import Vue from "vue";
|
||
import {
|
||
addOaReceiveAccount, AllListOaReceiveAccount,
|
||
delOaReceiveAccount,
|
||
listOaReceiveAccount,
|
||
updateOaReceiveAccount
|
||
} from "../../../api/oa/oaReceiveAccount";
|
||
import {numberToCNY} from "../../../utils/currencyFormatter";
|
||
|
||
export default {
|
||
name: "Finance",
|
||
dicts: ['sys_pay_type', 'oa_out_finance'],
|
||
data() {
|
||
return {
|
||
accounts: [{ id: 1, name: '账户A' }, { id: 2, name: '账户B' }],
|
||
paymentTypes: [{ label: '现金', value: 'cash' }, { label: '信用卡', value: 'credit' }],
|
||
selectedAccount: null,
|
||
selectedDateRange: null,
|
||
selectedPaymentType: null,
|
||
calculationResult: null,
|
||
// 支付类型
|
||
payType: 0,
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "label"
|
||
},
|
||
// 总条数
|
||
totalEnter: 0,
|
||
totalOut: 0,
|
||
// 进出账管理表格数据
|
||
financeListEnter: [],
|
||
financeListOut: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
openLook: false,
|
||
//详情lable背景
|
||
lableBg: "background: #f0f9eb; width:150px; text-align: center;",
|
||
//弹出层出入账类型
|
||
type: '',
|
||
nowTab: "0",
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
projectId: undefined,
|
||
financeTitle: undefined,
|
||
financeType: undefined,
|
||
receiveAccountId:-1,
|
||
},
|
||
receiveAccountList: [],
|
||
// 表单参数
|
||
form: {},
|
||
detailList: [],
|
||
// 子表选中数据
|
||
checkedDetailList: [],
|
||
//搜索日期范围
|
||
searchTime: '',
|
||
//明细总价
|
||
priceSum: 0,
|
||
//全新节点
|
||
newChildNode: "",
|
||
receiveAccountName: "",
|
||
//选项卡标签
|
||
activeName: 'first',
|
||
|
||
like: true,
|
||
value1: [],
|
||
value2: 1314,
|
||
titleLink: "增长人数",
|
||
checkByTime: {},
|
||
monthCheck: {},
|
||
receiveAccounts: [],
|
||
// monthOutByTime: 0,
|
||
// monthComeByTime: 0,
|
||
yearCheck: {},
|
||
// yearComeByTime: 0,
|
||
|
||
currentList: [{
|
||
date: '2016-05-02',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1518 弄'
|
||
}, {
|
||
date: '2016-05-04',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1517 弄'
|
||
}, {
|
||
date: '2016-05-01',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1519 弄'
|
||
}, {
|
||
date: '2016-05-03',
|
||
name: '王小虎',
|
||
address: '上海市普陀区金沙江路 1516 弄'
|
||
}],
|
||
|
||
// 表单校验
|
||
rules: {
|
||
financeTitle: [
|
||
{required: true, message: "账务名称不能为空", trigger: "blur"}
|
||
],
|
||
financeParties: [
|
||
{required: true, message: "经手人/付款方不能为空", trigger: "blur"}
|
||
],
|
||
payType: [
|
||
{required: true, message: "支付类型不能为空", trigger: "change"}
|
||
],
|
||
financeType: [
|
||
{required: true, message: "进出账类型不能为空", trigger: "blur"}
|
||
],
|
||
financeTime: [
|
||
{required: true, message: "交易时间不能为空", trigger: "blur"}
|
||
],
|
||
receiveAccountId: [
|
||
{required: true, message: "账户不能为空", trigger: "blur"}
|
||
],
|
||
}
|
||
};
|
||
},
|
||
|
||
created() {
|
||
/*this.getListOut();*/
|
||
// this.getListEnter();
|
||
this.getReceiveAccountList();
|
||
this.getListFinance('1');
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
|
||
calculateFunds() {
|
||
// 模拟核算资金逻辑
|
||
this.calculationResult = {
|
||
income: '10,000.00',
|
||
expense: '4,500.00',
|
||
netIncome: '5,500.00',
|
||
};
|
||
},
|
||
// 获取核算信息通过支付类型
|
||
getFinanceDateByPayType() {
|
||
this.getPayTypeBlur()
|
||
this.currentBlur()
|
||
this.currentBlurList()
|
||
},
|
||
|
||
updateBigPrice(index, row) {
|
||
|
||
if (row.price !== '') {
|
||
row.bigPrice = numberToCNY(parseFloat(row.price) || 0);
|
||
} else {
|
||
row.bigPrice = ''; // 如果价格为空，则大写金额也清空
|
||
}
|
||
},
|
||
|
||
append(data) {
|
||
let newChild = {
|
||
id: this.receiveAccountList[this.receiveAccountList.length - 1].id++,
|
||
label: '输入名称',
|
||
children: [],
|
||
receiveAccountName: "",
|
||
isAdd: true
|
||
};
|
||
if (!data.children) {
|
||
this.$set(data, 'children', []);
|
||
}
|
||
newChild.receiveAccountName = newChild.label;
|
||
newChild.parentId = -1;
|
||
addOaReceiveAccount(newChild).then(res => {
|
||
newChild.receiveAccountId = res.data.receiveAccountId
|
||
})
|
||
data.children.push(newChild);
|
||
},
|
||
|
||
remove(node, data) {
|
||
const parent = node.parent;
|
||
const children = parent.data.children || parent.data;
|
||
const index = children.findIndex(d => d.receiveAccountId === data.receiveAccountId);
|
||
children.splice(index, 1);
|
||
delOaReceiveAccount(data.receiveAccountId)
|
||
},
|
||
|
||
// 获取收款账户列表
|
||
getReceiveAccountList() {
|
||
listOaReceiveAccount().then(response => {
|
||
this.receiveAccountList = response.data;
|
||
})
|
||
AllListOaReceiveAccount().then(response => {
|
||
this.receiveAccounts = response.data;
|
||
})
|
||
},
|
||
|
||
handleNodeClick(data) {
|
||
this.queryParams.receiveAccountId = data.receiveAccountId;
|
||
if (this.nowTab === "2" ||this.nowTab === "3" ) {
|
||
return;
|
||
}
|
||
let type = this.nowTab === "1" ? '0' : '1'
|
||
this.handleQuery(type);
|
||
},
|
||
|
||
// 筛选节点
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.label.indexOf(value) !== -1;
|
||
},
|
||
|
||
|
||
getListFinance(type) {
|
||
this.loading = true;
|
||
/*let data = {
|
||
financeType: type,
|
||
projectId: 0, //项目id为0，排除项目
|
||
}*/
|
||
this.queryParams = {
|
||
financeType: type,
|
||
projectId: 0, //项目id为0，排除项目
|
||
financeTitle: this.queryParams.financeTitle,
|
||
financeParties: this.queryParams.financeParties,
|
||
receiveAccountId: this.queryParams.receiveAccountId,
|
||
pageNum: this.queryParams.pageNum,
|
||
pageSize: this.queryParams.pageSize,
|
||
}
|
||
//使用实体里的参数属性,日期转为字符串格式
|
||
this.queryParams.params = {};
|
||
if (null != this.searchTime && '' != this.searchTime) {
|
||
this.queryParams.params["beginCreateTime"] = this.getRealDate(this.searchTime[0]);
|
||
this.queryParams.params["endCreateTime"] = this.getRealDate(this.searchTime[1]);
|
||
}
|
||
|
||
|
||
listFinance(this.queryParams).then(response => {
|
||
//出账列表
|
||
if (type == '0') {
|
||
this.financeListPro(response.rows).then(res => {
|
||
this.financeListOut = res;
|
||
})
|
||
this.totalOut = response.total;
|
||
}
|
||
//入账列表
|
||
if (type == '1') {
|
||
this.financeListPro(response.rows).then(res => {
|
||
this.financeListEnter = res;
|
||
})
|
||
this.totalEnter = response.total;
|
||
}
|
||
|
||
this.loading = false;
|
||
});
|
||
|
||
|
||
},
|
||
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
//tabs选项卡
|
||
handleClick(tab, event) {
|
||
this.nowTab = tab.index
|
||
this.payType = 0
|
||
if (tab.index == '0') {
|
||
this.getListFinance('1');
|
||
}
|
||
if (tab.index == '1') {
|
||
this.getListFinance('0');
|
||
}
|
||
if (tab.index == '2') {
|
||
this.currentBlur()
|
||
this.currentBlurList()
|
||
}
|
||
if (tab.index == '3') {
|
||
this.currentBlur()
|
||
this.currentBlurList()
|
||
}
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
financeId: undefined,
|
||
projectId: undefined,
|
||
financeTitle: undefined,
|
||
financeParties: undefined,
|
||
payType: undefined,
|
||
financeType: undefined,
|
||
financeTime: undefined,
|
||
makeRatio: undefined,
|
||
makeTime: undefined,
|
||
makePrice: undefined,
|
||
makeExplain: undefined,
|
||
accessory: undefined,
|
||
remark: undefined,
|
||
createBy: undefined,
|
||
createTime: undefined,
|
||
updateBy: undefined,
|
||
updateTime: undefined
|
||
};
|
||
this.detailList = []
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery(type) {
|
||
this.queryParams.pageNum = 1;
|
||
this.getListFinance(type);
|
||
// this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery(type) {
|
||
this.resetForm("queryForm");
|
||
this.queryParams.financeTitle = undefined;
|
||
this.queryParams.financeParties = undefined;
|
||
this.searchTime = '';
|
||
this.handleQuery(type);
|
||
},
|
||
// 多选框选中数据
|
||
/*handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.financeId)
|
||
this.single = selection.length!==1
|
||
this.multiple = !selection.length
|
||
},*/
|
||
/** 新增入账按钮操作 */
|
||
handleAddEnter() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.type = 1;
|
||
this.form.financeType = '1'
|
||
this.title = "新增入账信息";
|
||
this.handleAddDetailList();
|
||
},
|
||
|
||
/** 新增节点操作 */
|
||
handleAddNodeEnter(data) {
|
||
this.receiveAccountList = []
|
||
data.receiveAccountName = this.newChildNode
|
||
updateOaReceiveAccount(data).then(res => {
|
||
console.log(res)
|
||
this.getReceiveAccountList()
|
||
})
|
||
data.isAdd = false
|
||
|
||
|
||
},
|
||
/** 新增出账按钮操作 */
|
||
handleAddOut() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.type = 0;
|
||
this.form.financeType = '0'
|
||
this.title = "新增出账信息";
|
||
this.handleAddDetailList();
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.type = row.financeType
|
||
this.loading = true;
|
||
this.reset();
|
||
const financeId = row.financeId || this.ids
|
||
getFinance(financeId).then(response => {
|
||
this.loading = false;
|
||
|
||
this.form = response.data;
|
||
this.detailList = response.data.detailList;
|
||
this.detailPriceSum(response.data.detailList);
|
||
this.open = true;
|
||
this.title = "修改进出账管理";
|
||
});
|
||
},
|
||
handleLook(row) {
|
||
this.type = row.financeType
|
||
this.loading = true;
|
||
this.title = "查看账目";
|
||
this.reset();
|
||
const financeId = row.financeId || this.ids
|
||
getFinance(financeId).then(response => {
|
||
this.loading = false;
|
||
this.form = response.data;
|
||
this.detailList = response.data.detailList;
|
||
this.detailPriceSum(response.data.detailList);
|
||
this.openLook = true;
|
||
|
||
});
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
//删除project关联表属性
|
||
delete this.form.project;
|
||
if (valid) {
|
||
let arr = this.detailList;
|
||
let boolValue = []
|
||
arr.forEach((vo, i) => {
|
||
let ii = i + 1
|
||
let price = this.isDecimal(vo.price, 2)
|
||
if (vo.detailTitle == null || vo.detailTitle == undefined || vo.detailTitle == "") {
|
||
this.$modal.msgWarning("第" + ii + "条明细名称不能为空！");
|
||
} else if (vo.price == null || vo.price == undefined || vo.price == "") {
|
||
this.$modal.msgWarning("第" + ii + "条明细金额不能为空,且必须是两位小数点数字！");
|
||
} else if (vo.bigPrice == null || vo.bigPrice == undefined || vo.bigPrice == "") {
|
||
this.$modal.msgWarning("第" + ii + "条明细大写金额不能为空！");
|
||
} else {
|
||
boolValue.push(1)
|
||
}
|
||
})
|
||
if (arr.length == boolValue.length) {
|
||
this.form.detailList = arr;
|
||
if (this.form.financeId != null) {
|
||
updateFinance(this.form).then(response => {
|
||
this.$modal.msgSuccess(response.msg);
|
||
this.open = false;
|
||
this.getListFinance(this.form.financeType);
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
} else {
|
||
addFinance(this.form).then(response => {
|
||
this.$modal.msgSuccess(response.msg);
|
||
this.open = false;
|
||
//定位到入账列表
|
||
this.getListFinance('0');
|
||
this.getListFinance('1');
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
isDecimal(n, len) {
|
||
return new RegExp("^\\d+(\\.\\d{1," + len + "})?$").test(n);
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
// const financeIds = row.financeId || this.ids;
|
||
const financeId = row.financeId;
|
||
this.$modal.confirm('是否确认删除编号为"' + financeId + '"的数据项？').then(() => {
|
||
this.loading = true;
|
||
return delFinance(financeId);
|
||
}).then(() => {
|
||
if (row.financeType == '1') {
|
||
// this.getListEnter()
|
||
this.getListFinance('1');
|
||
|
||
}
|
||
if (row.financeType == '0') {
|
||
// this.getListOut()
|
||
this.getListFinance('0');
|
||
}
|
||
// this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
financeListPro(obj) {
|
||
return new Promise((resolve, reject) => {
|
||
let financeArr = []
|
||
obj.forEach((vo, index) => {
|
||
let obj = vo.detailList;
|
||
let sum = []
|
||
if (obj.length > 0) {
|
||
obj.forEach((vo, key) => {
|
||
sum.push(parseFloat(vo.price))
|
||
})
|
||
}
|
||
let priceSum = sum.reduce((accumulator, currentValue) => accumulator + currentValue);
|
||
financeArr.push({
|
||
index: vo.index,
|
||
financeId: vo.financeId,
|
||
financeTitle: vo.financeTitle,
|
||
financeParties: vo.financeParties,
|
||
financeType: vo.financeType,
|
||
payType: vo.payType,
|
||
financeTime: vo.financeTime,
|
||
createBy: vo.createBy,
|
||
makeTime: vo.makeTime,
|
||
makePrice: vo.makePrice,
|
||
createTime: vo.createTime,
|
||
detailList: vo.detailList,
|
||
priceSum: (vo.financeType == '0' ? ' - ' : ' + ') + '¥' + parseFloat(priceSum.toFixed(10)) + '元'
|
||
})
|
||
})
|
||
resolve(financeArr);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 求和
|
||
* obj是列表数据
|
||
* */
|
||
detailPriceSum(obj) {
|
||
if (obj.length > 0) {
|
||
let sum = []
|
||
obj.forEach((vo, key) => {
|
||
sum.push(parseFloat(vo.price))
|
||
})
|
||
this.priceSum = sum.reduce((accumulator, currentValue) => accumulator + currentValue);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 核算table列表
|
||
* @param row
|
||
* @param rowIndex
|
||
* @returns {string}
|
||
*/
|
||
tableRowClassName({row, rowIndex}) {
|
||
if (rowIndex === 1) {
|
||
return 'warning-row';
|
||
} else if (rowIndex === 3) {
|
||
return 'success-row';
|
||
}
|
||
return 'brand-row';
|
||
},
|
||
|
||
/**日期转字符串**/
|
||
getRealDate(startDate) {
|
||
// 时间转换
|
||
var datejson = new Date(startDate).toJSON();
|
||
var date = new Date(+new Date(datejson)
|
||
+ 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
|
||
return date;
|
||
},
|
||
|
||
/**
|
||
* 按时间检索核算情况
|
||
* @param e
|
||
*/
|
||
getTimeBlur(e) {
|
||
let beginTime = e.displayValue[0] + ' 00:00:00'
|
||
let endTime = e.displayValue[1] + ' 23:59:59'
|
||
let dataCome = {
|
||
beginTime: beginTime,
|
||
endTime: endTime,
|
||
payType: this.payType,
|
||
receiveAccountId:this.queryParams.receiveAccountId,
|
||
}
|
||
findFinance(dataCome).then(res => {
|
||
this.checkByTime = res.data;
|
||
|
||
})
|
||
},
|
||
|
||
getPayTypeBlur() {
|
||
let now = new Date()
|
||
var nowMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间（时间为0:0:0）
|
||
var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
|
||
//本月收入参数
|
||
let dataCome = {
|
||
beginTime: Vue.prototype.parseTime(nowMonth, '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
endTime: Vue.prototype.parseTime(monthEnd, '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
payType: this.payType,
|
||
receiveAccountId:this.queryParams.receiveAccountId,
|
||
}
|
||
findFinance(dataCome).then(res => {
|
||
this.checkByTime = res.data;
|
||
})
|
||
},
|
||
/**
|
||
* 本年本月核算情况
|
||
*/
|
||
currentBlur() {
|
||
let now = new Date()
|
||
//本月开始和结束时间
|
||
var nowMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间（时间为0:0:0）
|
||
var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59); // 获取本月最后一天的日期时间（时间为23:59:59）
|
||
//本月收入参数
|
||
let dataCome = {
|
||
beginTime: Vue.prototype.parseTime(nowMonth, '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
endTime: Vue.prototype.parseTime(monthEnd, '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
payType: this.payType,
|
||
}
|
||
//本月核算
|
||
findFinance(dataCome).then(res => {
|
||
// this.monthComeByTime = res.data.rwo;
|
||
this.monthCheck = res.data;
|
||
})
|
||
|
||
|
||
//本年开始和结束时间
|
||
const startDate = new Date(now.getFullYear(), 0);
|
||
startDate.setHours(0, 0, 0, 0);
|
||
// 设定结束时间为当年12月31日23:59:59
|
||
const endDate = new Date(now.getFullYear() + 1, 0); // 注意这里的参数索引从0开始表示1月
|
||
endDate.setSeconds(-1);
|
||
|
||
//本年参数
|
||
let yearDataCome = {
|
||
beginTime: Vue.prototype.parseTime(startDate, '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
endTime: Vue.prototype.parseTime(endDate, '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
payType: this.payType,
|
||
}
|
||
//本年核算
|
||
findFinance(yearDataCome).then(res => {
|
||
this.yearCheck = res.data;
|
||
})
|
||
},
|
||
/**
|
||
* 最近六个月核算情况，如果显示更多月份，请修改控制器：int[] integers = {0,1, 2, 3, 4, 5};
|
||
*/
|
||
currentBlurList() {
|
||
findFinanceList().then(res => {
|
||
this.currentList = res.data;
|
||
})
|
||
},
|
||
|
||
|
||
/** 出入账明细序号 */
|
||
rowDetailListIndex({row, rowIndex}) {
|
||
row.index = rowIndex + 1;
|
||
},
|
||
/** 出入账明细添加按钮操作 */
|
||
handleAddDetailList() {
|
||
let obj = {};
|
||
obj.detailTitle = "";
|
||
obj.price = "";
|
||
obj.remark = "";
|
||
this.detailList.push(obj);
|
||
},
|
||
/** 出入账明细删除按钮操作 */
|
||
handleDeleteDetailList() {
|
||
if (this.checkedDetailList.length == 0) {
|
||
this.$modal.msgError("请先选择要删除的出入账明细数据");
|
||
} else {
|
||
const detailList = this.detailList;
|
||
const checkedDetailList = this.checkedDetailList;
|
||
this.detailList = detailList.filter(function (item) {
|
||
return checkedDetailList.indexOf(item.index) == -1
|
||
});
|
||
}
|
||
},
|
||
/** 复选框选中数据 */
|
||
handleDetailListSelectionChange(selection) {
|
||
this.checkedDetailList = selection.map(item => item.index)
|
||
},
|
||
|
||
/**人民币大小写转换**/
|
||
smalltoBIG(num) { //转成人民币大写金额形式
|
||
let str1 = '零壹贰叁肆伍陆柒捌玖'; //0-9所对应的汉字
|
||
let str2 = '万仟佰拾亿仟佰拾万仟佰拾元角分'; //数字位所对应的汉字
|
||
let str3; //从原num值中取出的值
|
||
let str4; //数字的字符串形式
|
||
let str5 = ''; //人民币大写金额形式
|
||
let i; //循环变量
|
||
let j; //num的值乘以100的字符串长度
|
||
let ch1; //数字的汉语读法
|
||
let ch2; //数字位的汉字读法
|
||
let nzero = 0; //用来计算连续的零值是几个
|
||
num = Math.abs(num).toFixed(2); //将num取绝对值并四舍五入取2位小数
|
||
str4 = (num * 100).toFixed(0).toString(); //将num乘100并转换成字符串形式
|
||
j = str4.length; //找出最高位
|
||
if (j > 15) {
|
||
return '溢出';
|
||
}
|
||
str2 = str2.substr(15 - j); //取出对应位数的str2的值。如：200.55,j为5所以str2=佰拾元角分
|
||
//循环取出每一位需要转换的值
|
||
for (i = 0; i < j; i++) {
|
||
str3 = str4.substr(i, 1); //取出需转换的某一位的值
|
||
if (i != (j - 3) && i != (j - 7) && i != (j - 11) && i != (j - 15)) { //当所取位数不为元、万、亿、万亿上的数字时
|
||
if (str3 == '0') {
|
||
ch1 = '';
|
||
ch2 = '';
|
||
nzero = nzero + 1;
|
||
} else {
|
||
if (str3 != '0' && nzero != 0) {
|
||
ch1 = '零' + str1.substr(str3 * 1, 1);
|
||
ch2 = str2.substr(i, 1);
|
||
nzero = 0;
|
||
} else {
|
||
ch1 = str1.substr(str3 * 1, 1);
|
||
ch2 = str2.substr(i, 1);
|
||
nzero = 0;
|
||
}
|
||
}
|
||
} else { //该位是万亿，亿，万，元位等关键位
|
||
if (str3 != '0' && nzero != 0) {
|
||
ch1 = "零" + str1.substr(str3 * 1, 1);
|
||
ch2 = str2.substr(i, 1);
|
||
nzero = 0;
|
||
} else {
|
||
if (str3 != '0' && nzero == 0) {
|
||
ch1 = str1.substr(str3 * 1, 1);
|
||
ch2 = str2.substr(i, 1);
|
||
nzero = 0;
|
||
} else {
|
||
if (str3 == '0' && nzero >= 3) {
|
||
ch1 = '';
|
||
ch2 = '';
|
||
nzero = nzero + 1;
|
||
} else {
|
||
if (j >= 11) {
|
||
ch1 = '';
|
||
nzero = nzero + 1;
|
||
} else {
|
||
ch1 = '';
|
||
ch2 = str2.substr(i, 1);
|
||
nzero = nzero + 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (i == (j - 11) || i == (j - 3)) { //如果该位是亿位或元位，则必须写上
|
||
ch2 = str2.substr(i, 1);
|
||
}
|
||
str5 = str5 + ch1 + ch2;
|
||
if (i == j - 1 && str3 == '0') { //最后一位（分）为0时，加上“整”
|
||
str5 = str5 + '整';
|
||
}
|
||
}
|
||
if (num == 0) {
|
||
str5 = '零元整';
|
||
}
|
||
return str5;
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('oa/finance/export', {
|
||
...this.queryParams
|
||
}, `finance_${new Date().getTime()}.xlsx`)
|
||
},
|
||
/** 下载文件 */
|
||
downloadFile(filePath) {
|
||
this.$download.resource(filePath)
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.hidden-input {
|
||
display: none; /* 或 visibility: hidden; */
|
||
}
|
||
|
||
.demo-shadow {
|
||
height: 140px;
|
||
width: 100%;
|
||
padding-top: 10px;
|
||
text-align: center;
|
||
|
||
line-height: 28px;
|
||
background-color: #ecf8ff;
|
||
/*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)*/
|
||
}
|
||
|
||
.demo-shadow h4 {
|
||
color: #999999;
|
||
}
|
||
|
||
.demo-shadow p {
|
||
font-size: 28px
|
||
}
|
||
|
||
.cl1 {
|
||
color: #ff9900
|
||
}
|
||
|
||
.cl2 {
|
||
color: #67C23A
|
||
}
|
||
|
||
.cl3 {
|
||
color: #409EFF
|
||
}
|
||
|
||
.tip {
|
||
padding: 0 10px;
|
||
background-color: #ecf8ff;
|
||
border-radius: 4px;
|
||
border-left: 5px solid #50bfff;
|
||
border-right: 5px solid #50bfff;
|
||
text-align: center;
|
||
margin-bottom: 5px;
|
||
margin-top: 18px;
|
||
font-size: 20px;
|
||
height: 50px;
|
||
line-height: 46px;
|
||
}
|
||
|
||
.tip-top {
|
||
padding: 0 10px;
|
||
background-color: #ecf8ff;
|
||
border-radius: 4px;
|
||
border-top: 5px solid #50bfff;
|
||
text-align: center;
|
||
margin-bottom: 5px;
|
||
font-size: 18px;
|
||
height: 88px;
|
||
line-height: 72px;
|
||
}
|
||
|
||
.tip-top .sp1 {
|
||
white-space: nowrap;
|
||
font-size: 18px;
|
||
overflow: hidden;
|
||
color: #999999;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tip-top .sp2 {
|
||
|
||
font-size: 16px;
|
||
|
||
|
||
}
|
||
|
||
.date-col {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.el-table .warning-row {
|
||
background: oldlace;
|
||
}
|
||
|
||
.el-table .success-row {
|
||
background: #f0f9eb;
|
||
}
|
||
|
||
.el-table .brand-row {
|
||
background: #ecf8ff;
|
||
}
|
||
|
||
.custom-tree-node {
|
||
|
||
flex: 1;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.node-label {
|
||
width: 130px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.funding-page {
|
||
background: #ffffff;
|
||
color: #333333;
|
||
font-family: 'Roboto', '微软雅黑', sans-serif;
|
||
padding: 20px 40px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-size: 24px;
|
||
color: #1e3a8a; /* 深蓝色标题 */
|
||
text-align: left;
|
||
border-bottom: 2px solid #e4e8f7;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-section {
|
||
background: #f9fbff; /* 浅灰蓝背景 */
|
||
border: 1px solid #e4e8f7; /* 边框 */
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-item label {
|
||
font-size: 14px;
|
||
color: #555555;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.calculate-btn {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.result-section {
|
||
background: #ffffff;
|
||
border: 1px solid #e4e8f7;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.result-section h2 {
|
||
font-size: 18px;
|
||
color: #1e3a8a;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.result-summary {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
text-align: center;
|
||
}
|
||
|
||
.result-item {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
}
|
||
|
||
.result-item label {
|
||
font-weight: bold;
|
||
color: #555555;
|
||
}
|
||
|
||
.result-item span {
|
||
color: #1e3a8a;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|