费用管理模块

config/dev.env.js

@@ -5,9 +5,9 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   ENV_CONFIG:'"dev"',
-  // BASE_URL: '"http://39.98.239.48/web-api"',//测试服务器
+  BASE_URL: '"http://39.98.239.48/web-api"',//测试服务器
   // BASE_URL:'"http://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
-  BASE_URL: '"http://192.168.0.115:8080/"' //凯森
+  // BASE_URL: '"http://192.168.0.115:8080/"' //凯森
   // BASE_URL: '"http:///192.168.0.253:8082/"',//田智
   // BASE_URL: '"http:///192.168.0.36:8080/"',//靖燕龙
 })

src/http/api.js

@@ -42,6 +42,9 @@ import * as task from './moudules/task.js'
 import * as retail from './moudules/retail.js'
 import * as cost from './moudules/cost.js'
 
+//费用管理
+import * as expense from './moudules/expense.js'
+
 // 默认全部导出
 export default {
     login,
@@ -75,4 +78,6 @@ export default {
     salary,
     letter,
     cost, //费用核对 
+     ///////////费用管理///////////////////////
+    expense,
 }

src/http/moudules/expense.js

@@ -0,0 +1,185 @@
+import axios from '../axios'
+
+/**
+ * 
+ * 账户信息
+ * 
+ */
+
+//获取账户信息列表
+export const getAccount = (data) => {
+    return axios({
+        url: '/invAccount/getAccount',
+        method: "post",
+        data
+    })
+}
+//添加账户信息
+export const insertAccount = (data) => {
+    return axios({
+        url: '/invAccount/insertAccount',
+        method: "post",
+        data
+    })
+}
+//账户信息详情
+export const getAccountById = (id) => {
+    return axios({
+        url: '/invAccount/getAccountById?accountId='+id,
+        method: "get",
+    })
+}
+//修改账户信息
+export const updateAccoount = (data) => {
+    return axios({
+        url: '/invAccount/updateAccount',
+        method: "post",
+        data
+    })
+}
+//删除账户信息
+export const deleteAccount = (id) => {
+    return axios({
+        url: '/invAccount/'+id,
+        method: "delete",
+    })
+}
+//获取全部账户信息
+export const getAccountByAccountName = () => {
+    return axios({
+        url: '/invAccount/getAccountByAccountName',
+        method: "get",
+    })
+}
+
+/**
+ * 
+ * 费用申请
+ * 
+ */
+//获取费用申请列表
+export const getAccountExcel = (data) => {
+    return axios({
+        url: '/accountExcel/getAccountExcel',
+        method: "post",
+        data
+    })
+}
+//费用申请详情
+export const getAccountExcelById = (id) => {
+    return axios({
+        url: '/accountExcel/getAccountExcelById?excelAccountOperateId='+id,
+        method: "get",
+    })
+}
+//新增费用申请数据
+export const insert = (data) => {
+    return axios({
+        url: '/accountExcel/invert',
+        method: "post",
+        data
+    })
+}
+//费用申请导出
+export const excel = (data) => {
+    return axios({
+        url: '/accountExcel/excel',
+        method: "post",
+        data
+    })
+}
+//删除费用申请数据
+export const deleteAccountExcel = (id) => {
+    return axios({
+        url: '/accountExcel/'+id,
+        method: "delete",
+    })
+}
+//修改费用申请信息
+export const update = (data) => {
+    return axios({
+        url: '/accountExcel/update',
+        method: "post",
+        data
+    })
+}
+//修改转账状态
+export const updateTransferFlag = (id) => {
+    return axios({
+        url: '/accountExcel/updateTransferFlag?excelAccountOperateId='+id,
+        method: "get",
+    })
+}
+
+/**
+ * 
+ * 费用支出明细
+ * 
+ */
+//获取费用支出明细表列表
+export const getAccountExpensesTreeList = () => {
+    return axios({
+        url: '/accountExpense/getAccountExpensesTreeList',
+        method: "get",
+    })
+}
+//新增费用支出明细
+export const insertAccountExpenses = (data) => {
+    return axios({
+        url: '/accountExpense/insertAccountExpenses',
+        method: "post",
+        data
+    })
+}
+//获取费用支出明细详情
+export const getAccountExpensesDetail = (id) => {
+    return axios({
+        url: '/accountExpense/getAccountExpensesDetail?id='+id,
+        method: "get",
+    })
+}
+//修改费用支出明细
+export const updateAccountExpenses = (data) => {
+    return axios({
+        url: '/accountExpense/updateAccountExpenses',
+        method: "post",
+        data
+    })
+}
+//删除费用支出明细
+export const deleteAccountExpenses = (id) => {
+    return axios({
+        url: '/accountExpense/deleteAccountExpenses?id='+id,
+        method: "delete",
+    })
+}
+
+
+/**
+ * 
+ * 费用记录
+ * 
+ */
+//获取账户记录列表
+export const getAccountOperate = (data) => {
+    return axios({
+        url: '/accountOperate/getAccountOperate',
+        method: "post",
+        data
+    })
+}
+//新增收入记录
+export const insertAccountOperate = (data) => {
+    return axios({
+        url: '/accountOperate/insertAccountOperate',
+        method: "post",
+        data
+    })
+}
+//获取账户记录详情
+export const getAccountOperateDetail = (id) => {
+    return axios({
+        url: '/accountOperate/getAccountOperateDetail?accountOperateId='+id,
+        method: "get"
+    })
+}

src/views/AgreementManage/CarInsurance/AgreementEntry.vue

@@ -2002,9 +2002,9 @@ export default {
     closeDialog() {
       //不管新增，还是编辑  关闭窗口后，都清空临时数据 以免编辑后新增默认带出上一次打开协议中信息
         for (let key in this.agreement) {
-          if (key != "partnerCompaniesId") {
+          // if (key != "partnerCompaniesId") {
             this.agreement[key] = ""
-          }
+          // }
         }
         if (this.roductList1.length > 0) {
           this.roductList1 = [];

src/views/Core/KtCommonTable.vue

@@ -49,29 +49,33 @@
             @click="handleEdit(scope.$index, scope.row)" />
           <kt-button v-if="deleteButtonName" icon="fa fa-trash" :label="deleteButtonName" :perms="permsDelete"
             :size="size" type="danger" @click="handleDeleteFlag(scope.$index, scope.row)" />
-          <kt-button style="
-              background: rgb(14, 194, 22);
-              border: 1px solid rgb(14, 194, 22);
-              color: #ffffff;
-            " v-if="button3Name" :label="button3Name" :perms="permsButton3" icon="fa fa-edit" :size="size"
+          <kt-button :style="{
+              background:button3Background,
+              border: '1px solid '+button3Background,
+              color:'#ffffff',
+            }
+            " v-if="button3Name" :label="button3Name" :perms="permsButton3" :icon="button3Icon" :size="size"
             @click="handleButton3(scope.$index, scope.row)" />
-          <kt-button style="
-              background: rgb(222, 80, 76);
-              border: 1px solid rgb(222, 80, 76);
-              color: #ffffff;
-            " icon="fa fa-edit" v-if="button2Name" :label="button2Name" :perms="permsButton2" :size="size"
+          <kt-button :style="{
+              background:button2Background,
+              border: '1px solid '+button2Background,
+              color:'#ffffff',
+            }
+            " :icon="button2Icon" v-if="button2Name" :label="button2Name" :perms="permsButton2" :size="size"
             @click="handleButton2(scope.$index, scope.row)" />
-          <kt-button style="
-              background: #f56c6c;
-              border: 1px solid #f56c6c;
-              color: #ffffff;
-            " icon="fa fa-trash" v-if="button1Name" :label="button1Name" :perms="permsButton1" :size="size"
+          <kt-button :style="{
+              background:button1Background,
+              border: '1px solid '+button1Background,
+              color:'#ffffff',
+            }
+            " :icon="button1Icon" v-if="button1Name" :label="button1Name" :perms="permsButton1" :size="size"
             @click="handleButton1(scope.$index, scope.row)" />
-            <kt-button style="
-              background: #1e87ed;
-              border: 1px solid #1e87ed;
-              color: #ffffff;
-            " v-if="button4Name" :label="button4Name" :perms="permsButton4" :size="size"
+            <kt-button :style="{
+              background:button4Background,
+              border: '1px solid '+button4Background,
+              color:'#ffffff',
+            }
+            " v-if="button4Name" :icon="button4Icon" :label="button4Name" :perms="permsButton4" :size="size"
             @click="handleButton4(scope.$index, scope.row)" />
         </template>
       </el-table-column>
@@ -142,12 +146,35 @@ export default {
     },
     button1Background: {
       type: String,
+      default: "#f56c6c",
     },
     button2Background: {
       type: String,
+      default: "rgb(222, 80, 76)",
     },
     button3Background: {
       type: String,
+      default: "rgb(14, 194, 22)",
+    },
+    button4Background: {
+      type: String,
+      default: "#1e87ed",
+    },
+    button1Icon: {
+      type: String,
+      default: "fa fa-trash",
+    },
+    button2Icon: {
+      type: String,
+      default: "fa fa-edit",
+    },
+    button3Icon: {
+      type: String,
+      default: "fa fa-edit",
+    },
+    button4Icon: {
+      type: String,
+      default: "fa fa-trash",
     },
     editButtonName: {
       type: String,

src/views/FinancialManagement/CarInsurance/Verifytasks/Verifyintasks.vue

@@ -593,7 +593,6 @@ export default {
       this.loading = true;
       // this.pageRequest.auditStatus="0"
       this.$api.task.queryPageOrder(this.pageRequest).then((res) => {
-        console.log(res)
         if (res.code == "200") {
           this.loading = false;
           this.pageResult = res.data.content;

src/views/FinancialManagement/ExpenseManagement/ExpenseApplyFor.vue

@@ -0,0 +1,1146 @@
+<template>
+  <div>
+    <!-- 搜索 -->
+    <el-row class="top">
+      <el-form
+        v-model="queryFrom"
+        size="small"
+        label-width="95px"
+        class="query-form"
+      >
+        <el-form-item label="转账状态" label-width="95px" prop="transferFlag">
+          <el-select
+            v-model="queryFrom.transferFlag"
+            placeholder="请选择转账状态"
+            clearable
+          >
+            <el-option label="已转账" value="0"></el-option>
+            <el-option label="未转账" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="账户性质" label-width="95px" prop="accountQuality">
+          <el-select
+            v-model="queryFrom.accountQuality"
+            placeholder="请选择账户性质"
+            clearable
+          >
+            <el-option
+              v-for="item in account_qualityData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请人" label-width="95px" prop="applicant">
+          <el-input
+            v-model="queryFrom.applicant"
+            placeholder="请输入申请人"
+            class="widths"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="申请部门" label-width="95px" prop="applySector">
+          <el-input
+            v-model="queryFrom.applySector"
+            placeholder="请输入申请部门"
+            class="widths"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="申请日期" label-width="95px" prop="applyTime">
+          <el-date-picker
+            v-model="queryFrom.applyTime"
+            type="date"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+          <!-- <el-input
+            v-model="queryFrom.applyTime"
+            placeholder="请输入申请部门"
+            class="widths"
+            clearable
+          ></el-input> -->
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="queryStaffInfo"
+            >查询</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <!-- 申请按钮 -->
+    <el-button
+      class="operation"
+      type="primary"
+      plain
+      size="medium"
+      @click="showExpense"
+      >资金使用申请单</el-button
+    >
+    <!-- 表格 -->
+    <kt-common-table
+      :operationWidth="operationWidth"
+      class="ktTable"
+      permsEdit="sys:agent:view"
+      ref="dataTable"
+      :data="pageResult"
+      :columns="columns"
+      editButtonName="编辑"
+      button1Name="删除"
+      :showBatchDelete="false"
+      :showOperation="true"
+      @findPage="findPage"
+      :isshowpagination="true"
+      @handleEdit="expendEdit"
+      @handleButton1="expendDelete"
+    ></kt-common-table>
+    <!-- 申请资金弹框 -->
+    <el-dialog
+      class="dialog"
+      :title="expendTitle"
+      :close-on-click-modal="false"
+      :before-close="resetForm"
+      :visible.sync="expenseDialog"
+      width="60%"
+    >
+      <div class="dialog-body">
+        <el-form
+          :model="tableForm"
+          ref="tableForm"
+          label-width="0px"
+          class="demo-tableForm"
+        >
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="单位:"
+                label-width="50px"
+                prop="accountQuality"
+              >
+                <el-select
+                  v-model="tableForm.company"
+                  filterable
+                  placeholder="单位"
+                >
+                  <el-option
+                    v-for="item in collectionData"
+                    :key="item.accountId"
+                    :label="item.name"
+                    :value="item.accountId"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col style="display: flex; justify-content: end" :span="12">
+              <el-button type="primary" @click="addUserFn" size="small"
+                >新增账户信息</el-button
+              >
+            </el-col>
+          </el-row>
+          <table
+            class="expense-table"
+            width="100%"
+            height="500"
+            border="1"
+            bordercolor="#71787f"
+            align="center"
+            cellspacing=""
+            cellpadding="10"
+            style="border-collapse: collapse"
+          >
+            <tr>
+              <td class="td-title" colspan="1">申请人</td>
+              <td class="td-content" colspan="1">
+                <el-input
+                  type="text"
+                  resize="none"
+                  v-model="tableForm.applicant"
+                ></el-input>
+              </td>
+              <td class="td-title" colspan="1">申请部门</td>
+              <td class="td-content" colspan="1">
+                <el-input
+                  type="text"
+                  resize="none"
+                  v-model="tableForm.applySector"
+                ></el-input>
+              </td>
+              <td class="td-title" colspan="1">申请日期</td>
+              <td class="td-content" colspan="1">
+                <el-date-picker
+                  v-model="tableForm.applyTime"
+                  align="right"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  :picker-options="pickerOptions"
+                >
+                </el-date-picker>
+              </td>
+            </tr>
+            <tr>
+              <td class="td-title" colspan="1">收款单位信息</td>
+              <td class="td-content" colspan="5">
+                <el-select
+                  v-model="tableForm.collectionMessage"
+                  filterable
+                  placeholder=""
+                >
+                  <el-option
+                    v-for="item in collectionData"
+                    :key="item.accountId"
+                    :label="item.name"
+                    :value="item.accountId"
+                  >
+                  </el-option>
+                </el-select>
+              </td>
+            </tr>
+            <tr>
+              <td class="td-title" colspan="1">资金流程</td>
+              <td class="td-content" colspan="5">
+                <div style="display: flex; align-items: center">
+                  <el-select
+                    v-model="tableForm.company"
+                    filterable
+                    disabled
+                    placeholder=""
+                  >
+                    <el-option
+                      v-for="item in collectionData"
+                      :key="item.accountId"
+                      :label="item.name"
+                      :value="item.accountId"
+                    >
+                    </el-option>
+                  </el-select>
+                  <i class="el-icon-right"></i>
+                  <el-select
+                    v-model="tableForm.collectionMessage"
+                    filterable
+                    disabled
+                    placeholder=""
+                  >
+                    <el-option
+                      v-for="item in collectionData"
+                      :key="item.accountId"
+                      :label="item.name"
+                      :value="item.accountId"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="td-title" colspan="1">资金用途</td>
+              <td class="td-content" colspan="3">
+                <el-cascader
+                  v-model="tableForm.fundUse"
+                  :show-all-levels="false"
+                  :clearable="true"
+                  :checkStrictly="true"
+                  :emitPath="false"
+                  placeholder=""
+                  :options="fundFlowData"
+                  filterable
+                  :props="{
+                    children: 'child',
+                    label: 'category',
+                    value: 'category',
+                  }"
+                ></el-cascader>
+              </td>
+              <td class="td-title" colspan="1">备注</td>
+              <td class="td-content" colspan="1">
+                <el-select v-model="tableForm.remark" placeholder="">
+                  <el-option
+                    v-for="item in use_fundsData"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </td>
+            </tr>
+            <tr>
+              <td class="td-title" colspan="1">申请金额（元）</td>
+              <td class="td-content" colspan="2">
+                <el-input-number
+                  v-model="tableForm.applyAmount"
+                  :min="0"
+                  :precision="2"
+                  @blur="chageAppl"
+                  :max="99999999999999999"
+                  label=""
+                ></el-input-number>
+              </td>
+              <td class="td-title" colspan="1">大写金额</td>
+              <td class="td-content idea-box" colspan="2">
+                <el-input
+                  type="text"
+                  resize="none"
+                  v-model="tableForm.bigApplyAmount"
+                  disabled
+                ></el-input>
+              </td>
+            </tr>
+            <tr>
+              <td class="td-title" colspan="1">支付方式</td>
+              <td class="td-content" colspan="5">
+                <el-checkbox-group v-model="tableForm.payMethod">
+                  <el-checkbox
+                    v-for="payItem in payment_methodsData"
+                    :key="payItem.value"
+                    :label="payItem.label"
+                    :value="payItem.value"
+                    :disabled="payItem.value == 2"
+                  ></el-checkbox>
+                </el-checkbox-group>
+              </td>
+            </tr>
+            <tr>
+              <td class="td-title" rowspan="2" colspan="1">审核意见</td>
+              <td class="td-title" colspan="2">公司领导</td>
+              <td class="td-title" colspan="1">财务部</td>
+              <td class="td-title" colspan="2">部门领导</td>
+            </tr>
+            <tr class="idea-box">
+              <td class="td-content" colspan="2">
+                <el-input
+                  type="text"
+                  resize="none"
+                  v-model="tableForm.desc"
+                  disabled
+                ></el-input>
+              </td>
+              <td class="td-content" colspan="1">
+                <el-input
+                  type="text"
+                  resize="none"
+                  v-model="tableForm.desc"
+                  disabled
+                ></el-input>
+              </td>
+              <td class="td-content" colspan="2">
+                <el-input
+                  type="text"
+                  resize="none"
+                  v-model="tableForm.desc"
+                  disabled
+                ></el-input>
+              </td>
+            </tr>
+          </table>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm" size="small">取 消</el-button>
+        <el-button type="primary" @click="submitForm" size="small">{{
+          buttonValue
+        }}</el-button>
+      </div>
+    </el-dialog>
+    <!-- 新增账户弹框 -->
+    <expense-component
+      ref="expenseComponent"
+      :formData="formData"
+      :title="title"
+      :dialogFormVisible="dialogFormVisible"
+      @resetForm="closeForm"
+      @submitForm="submitUserForm"
+      @setDateInterval="setDateInterval"
+      @outChange="outChange"
+      class="expense-component"
+    ></expense-component>
+  </div>
+</template>
+<script>
+import ExpenseComponent from "./ExpenseComponent.vue"; //新增账户信息弹框
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+export default {
+  name: "ExpenseApplyFor",
+  components: { KtCommonTable, ExpenseComponent },
+  data() {
+    return {
+      expendTitle: "新增资金使用申请单", //弹框标题
+      operationWidth: 200, //操作单元格宽度
+      queryFrom: {}, //查询form表单
+      pageRequest: {
+        // 列表查询条件
+        pageNo: 1,
+        pageSize: 10,
+      },
+      dialogFormVisible: false, //账户信息弹出框状态
+      title: "新增账户信息", //账户信息弹框标题
+      expenseDialog: false, //申请单显示状态
+      pageResult: {
+        pageNo: 1,
+        pageSize: 10,
+        content: [],
+      }, //表格参数
+      columns: [
+        // 申请列表表格头部
+        {
+          prop: "transferFlagName",
+          label: "转账状态",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "applicant",
+          label: "申请人",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "applySector",
+          label: "申请部门",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "applyTime",
+          label: "申请日期",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "applyAmount",
+          label: "申请金额（元）",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "bigApplyAmount",
+          label: "大写金额",
+          minWidth: 150,
+          sortable: false,
+        },
+        {
+          prop: "company",
+          label: "单位",
+          minWidth: 260,
+          sortable: false,
+        },
+
+        {
+          prop: "collectionMessage",
+          label: "收款单位信息",
+          minWidth: 260,
+          sortable: false,
+        },
+        {
+          prop: "fundFlow",
+          label: "资金流程",
+          minWidth: 460,
+          sortable: false,
+        },
+        {
+          prop: "fundUse",
+          label: "资金用途",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "remark",
+          label: "备注",
+          minWidth: 100,
+          sortable: false,
+        },
+
+        {
+          prop: "payMethod",
+          label: "支付方式",
+          minWidth: 160,
+          sortable: false,
+        },
+      ],
+      formData: {
+        outerFlag: "0", //账户类别
+        accountName: "", //户名
+        accountQuality: "", //账户性质
+        bankCardNum: "", //银行卡号
+        bank: "", //开户行
+        bankName: "", //开户行名称
+        bankNum: "", //开户行号
+        certExpirationDate: "", //证书有效期
+        clearingProfit: "", //结算卡
+        dayStrokeNum: "", //单日转账笔数限制
+        exteriorProfit: "", //外部过账金额
+        fiscalProfit: "", //财税公司利润
+        insuranceProfit: "", //保险公司回款
+        otherProfit: "", //其他利润
+        parkProfit: "", //园区利润
+        priDayLines: "", //对私单日限额
+        priSingleLines: "", //对私单笔限额
+        priYearExcess: "", //对私年剩余额度
+        priYearLines: "", //对私年额度
+        pubDayLines: "", //对公单日限额
+        pubSingleLines: "", //对公单笔限额
+        pubYearExcess: "", //对公年剩余额度
+        pubYearLines: "", //对公年额度
+        tianqinProfit: "", //天勤利润
+      },
+      pickerOptions: {
+        //日期快捷键
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              picker.$emit("pick", new Date());
+            },
+          },
+          {
+            text: "昨天",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit("pick", date);
+            },
+          },
+          {
+            text: "一周前",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", date);
+            },
+          },
+        ],
+      },
+      //新增申请表单form表单
+      tableForm: {
+        company: "", //单位
+        applicant: "", //申请人
+        applySector: "", //申请部门
+        applyTime: "", //申请日期
+        collectionMessage: "", //收款单位信息
+        fundFlow: "", //资金流程
+        fundUse: "", //资金用途
+        remark: "", //备注
+        applyAmount: "", //申请金额
+        bigApplyAmount: "", //大写金额
+        payMethod: [], //支付方式
+        remark: "", //备注
+      },
+      payment_methodsData: [], //支付方式字典数据
+      use_fundsData: [], //备注字典数据
+      collectionData: [], //收款单位信息数据
+      account_qualityData: [], //账户性质字典
+      fundFlowData: [], //资金用途字典数据
+      tableRules: {
+        //资金申请单规则
+        name: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+      companyItem: {}, //选择单位整条数据
+      collectionMessageItem: {}, //选择收款单位整条数据
+      expendDataId: "", //修改时该条数据id
+      buttonValue: "导 出", //弹框提交按钮内容
+    };
+  },
+  watch: {
+    expenseDialog(n) {
+      if (!n) {
+        this.tableForm = {
+          company: "", //单位
+          applicant: "", //申请人
+          applySector: "", //申请部门
+          applyTime: "", //申请日期
+          collectionMessage: "", //收款单位信息
+          fundFlow: "", //资金流程
+          fundUse: "", //资金用途
+          remark: "", //备注
+          applyAmount: "", //申请金额
+          bigApplyAmount: "", //大写金额
+          payMethod: [], //支付方式
+          remark: "", //备注
+        };
+        this.tableForm.payMethod = [
+          this.payment_methodsData.find((item) => item.value == 2).label,
+        ];
+        this.expendDataId = "";
+      }
+    },
+  },
+  created() {
+    this.business("use_funds"); //备注字典
+    this.business("payment_methods"); //支付方式字典
+    this.business("account_quality"); //账户性质字典
+    this.getTreeList(); //获取资金用途树字典
+    this.getAllUser(); //获取所有银行账户信息
+  },
+  mounted() {},
+  methods: {
+    //点击编辑按钮
+    expendEdit(index) {
+      let row = index.row;
+      if (row.transferFlag == 0) {
+        this.$message.error("已转账数据不能操作");
+        return;
+      }
+      this.expendDataId = row.excelAccountOperateId;
+      this.$api.expense
+        .getAccountExcelById(row.excelAccountOperateId)
+        .then((res) => {
+          if (res.code == 200) {
+            this.tableForm = JSON.parse(JSON.stringify(res.data));
+            this.tableForm.payMethod = this.tableForm.payMethod.split(",");
+            this.tableForm.collectionMessage = res.data.enterAccountId;
+            this.tableForm.company = res.data.outAccountId;
+            let obj = this.fundFlowData.find(item=>item.child.find(chidlItem=>chidlItem.category == this.tableForm.fundUse));
+            this.tableForm.fundUse = [obj.category,obj.child.find(item=>item.category==this.tableForm.fundUse).category]
+            let arr = [];
+            this.tableForm.payMethod.forEach((items) => {
+              arr.push(
+                this.payment_methodsData.find((item) => item.value == items)
+                  .label
+              );
+            });
+            this.tableForm.payMethod = arr;
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      this.expendTitle = "编辑资金使用申请单";
+      this.buttonValue = "确认提交";
+      this.expenseDialog = true;
+    },
+    //删除数据事件
+    expendDelete(index) {
+      let row = index.row;
+      if (row.transferFlag == 0) {
+        this.$message.error("已转账数据不能操作");
+        return;
+      }
+      this.$confirm("确认删除该条数据吗?", "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.expense
+            .deleteAccountExcel(index.row.excelAccountOperateId)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message.success("删除成功");
+                this.findPage();
+              } else {
+                this.$message.error(res.msg);
+              }
+            });
+        })
+        .catch(() => {});
+    },
+    //获取资金用途树数据
+    getTreeList() {
+      this.$api.expense.getAccountExpensesTreeList().then((res) => {
+        let arr = res.data;
+        res.data.forEach((item) => {
+          item.child.forEach((childItem) => {
+            delete childItem.child;
+          });
+        });
+        this.fundFlowData = res.data;
+      });
+    },
+    //搜索列表功能
+    queryStaffInfo() {
+      this.findPage();
+    },
+    //查询列表
+    findPage(data) {
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNo = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      let obj = { ...this.queryFrom, ...this.pageRequest };
+      this.$api.expense
+        .getAccountExcel(obj)
+        .then((res) => {
+          res.data.records.forEach((element) => {
+            element.transferFlagName =
+              element.transferFlag == 0 ? "已转账" : "未转账";
+            this.use_fundsData.forEach((item) => {
+              if (element.remark == item.value) {
+                element.remarkName = item.label;
+              }
+            });
+          });
+          this.pageResult = {
+            content: res.data.records,
+            pageNum: res.data.current,
+            pageSize: res.data.size,
+            totalPages: res.data.pages,
+            totalSize: res.data.total,
+          };
+        })
+        .then(data != null ? data.callback : "");
+    },
+    //选择证书有效日期区间
+    setDateInterval(e) {
+      if (e != null && e != "") {
+        this.formData.startCertExpirationDate = e[0];
+        this.formData.endCertExpirationDate = e[1];
+      } else {
+        this.formData.startCertExpirationDate = "";
+        this.formData.endCertExpirationDate = "";
+      }
+    },
+    //新增用户信息提交
+    submitUserForm() {
+      let params = JSON.parse(JSON.stringify(this.formData));
+      delete params.certExpirationDate;
+      //新增
+      this.$api.expense.insertAccount(params).then((res) => {
+        if (res.code == 200) {
+          this.$message({
+            message: "添加成功",
+            type: "success",
+          });
+        } else {
+          this.$message({
+            message: `添加失败, ${res.msg}`,
+            type: "error",
+          });
+        }
+        this.getAllUser();
+        this.closeForm();
+      });
+    },
+    //弹框重新赋值
+    outChange(e) {
+      if (e == 1) {
+        this.formData = {
+          outerFlag: e, //账户类别
+          accountName: this.formData.accountName, //户名
+          accountQuality: this.formData.accountQuality, //账户性质
+          bankCardNum: this.formData.bankCardNum, //银行卡号
+          bank: this.formData.bank, //开户行
+        };
+      } else {
+        this.formData = {
+          outerFlag: e, //账户类别
+          accountName: this.formData.accountName, //户名
+          accountQuality: this.formData.accountQuality, //账户性质
+          bankCardNum: this.formData.bankCardNum, //银行卡号
+          bank: this.formData.bank, //开户行
+          bankName: "", //开户行名称
+          bankNum: "", //开户行号
+          certExpirationDate: "", //证书有效期
+          clearingProfit: "", //结算卡
+          dayStrokeNum: "", //单日转账笔数限制
+          exteriorProfit: "", //外部过账金额
+          fiscalProfit: "", //财税公司利润
+          insuranceProfit: "", //保险公司回款
+          otherProfit: "", //其他利润
+          parkProfit: "", //园区利润
+          priDayLines: "", //对私单日限额
+          priSingleLines: "", //对私单笔限额
+          priYearExcess: "", //对私年剩余额度
+          priYearLines: "", //对私年额度
+          pubDayLines: "", //对公单日限额
+          pubSingleLines: "", //对公单笔限额
+          pubYearExcess: "", //对公年剩余额度
+          pubYearLines: "", //对公年额度
+          tianqinProfit: "", //天勤利润
+        };
+      }
+    },
+    //弹框取消重置
+    closeForm() {
+      this.dialogFormVisible = false;
+      this.formData = {
+        outerFlag: "0", //账户类别
+        accountName: "", //户名
+        accountQuality: "", //账户性质
+        bankCardNum: "", //银行卡号
+        bank: "", //开户行
+        bankName: "", //开户行名称
+        bankNum: "", //开户行号
+        certExpirationDate: "", //证书有效期
+        clearingProfit: "", //结算卡
+        dayStrokeNum: "", //单日转账笔数限制
+        exteriorProfit: "", //外部过账金额
+        fiscalProfit: "", //财税公司利润
+        insuranceProfit: "", //保险公司回款
+        otherProfit: "", //其他利润
+        parkProfit: "", //园区利润
+        priDayLines: "", //对私单日限额
+        priSingleLines: "", //对私单笔限额
+        priYearExcess: "", //对私年剩余额度
+        priYearLines: "", //对私年额度
+        pubDayLines: "", //对公单日限额
+        pubSingleLines: "", //对公单笔限额
+        pubYearExcess: "", //对公年剩余额度
+        pubYearLines: "", //对公年额度
+        tianqinProfit: "", //天勤利润
+      };
+    },
+    //新增账户信息
+    addUserFn() {
+      this.dialogFormVisible = true;
+    },
+    //选择收款单位信息事件
+    collectionChange(e) {
+      if (e.length > 0) {
+        let obj = this.collectionData
+          .find((item) => item.accountId == e[0])
+          .children.find((item) => item.accountId == e[1]);
+      }
+    },
+    //获取所有账户信息
+    getAllUser() {
+      this.$api.expense.getAccountByAccountName().then((res) => {
+        if (res.code == 200) {
+          res.data.forEach((item, index) => {
+            item.name =
+              (item.outerFlag == 0 ? "内部用户" : "外部用户") +
+              "   " +
+              (item.accountQuality == 0 ? "公户" : "私户") +
+              "   " +
+              item.accountName +
+              "   " +
+              item.bankCardNum +
+              "   " +
+              item.bank;
+            item.nameValue =
+              item.accountName + "   " + item.bankCardNum + "   " + item.bank;
+          });
+          this.collectionData = res.data;
+        }
+      });
+    },
+    //申请金额填写完成后
+    chageAppl(e) {
+      this.tableForm.bigApplyAmount = this.toChies(this.tableForm.applyAmount);
+    },
+    //数据字典
+    business(typeName) {
+      this.$api.dict.findByLableName(typeName).then((res) => {
+        this[typeName + "Data"] = res.data;
+        if (typeName == "payment_methods") {
+          this.tableForm.payMethod = [
+            this[typeName + "Data"].find((item) => item.value == 2).label,
+          ];
+        }
+      });
+    },
+    //费用申请弹框
+    showExpense() {
+      this.expendTitle = "新增资金使用申请单";
+      this.buttonValue = "导 出";
+      this.expenseDialog = true;
+    },
+    //取消隐藏弹框
+    resetForm() {
+      this.expenseDialog = false;
+    },
+    //导出事件
+    submitForm() {
+      let params = JSON.parse(JSON.stringify(this.tableForm));
+      //校验
+      if (!params.company) {
+        this.$message.error("请选择单位");
+        return;
+      } else if (!params.applicant) {
+        this.$message.error("申请人不能为空");
+        return;
+      } else if (!params.applySector) {
+        this.$message.error("申请部门不能为空");
+        return;
+      } else if (!params.applyTime) {
+        this.$message.error("请填写申请日期");
+        return;
+      } else if (!params.collectionMessage) {
+        this.$message.error("请选择收款单位信息");
+        return;
+      } else if (!params.fundUse) {
+        this.$message.error("请选择资金用途");
+        return;
+      } else if (params.applyAmount == 0) {
+        this.$message.error("请填写金额");
+        return;
+      }
+      params.payMethod = this.toPayment(params.payMethod); //支付方式转换
+      let companyItem = this.collectionData.find(
+        (item) => item.accountId === params.company
+      );
+      let collectionMessageItem = this.collectionData.find(
+        (item) => item.accountId === params.collectionMessage
+      );
+      params.company = companyItem.nameValue; //单位
+      params.outAccountId = companyItem.accountId; //支出账户id
+      params.outFlag = collectionMessageItem.outerFlag; //支出账户性质
+      params.collectionMessage = collectionMessageItem.nameValue; //收入账户信息
+      params.enterAccountId = collectionMessageItem.accountId; //收入账户id
+      params.fundUse = params.fundUse[params.fundUse.length - 1]; //资金用途
+      params.fundFlow = params.company + "→" + params.collectionMessage; //资金流程
+      if (this.expendDataId) {
+        //修改
+        params.expendDataId = this.expendDataId;
+        this.$api.expense.update(params).then((res) => {
+          if (res.code == 200) {
+            this.resetForm();
+            this.findPage();
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      } else {
+        //新增+导出
+        this.$api.expense.insert(params).then((res) => {
+          if (res.code == 200) {
+            this.$api.expense.excel([res.data]).then((response) => {
+              if (response.code == 200) {
+                response.data.forEach((data) => {
+                  this.resetForm();
+                  this.findPage();
+                  let url = process.env.BASE_URL + "/upload/" + data.uplodePath; // 3.创建一个临时的url指向blob对象
+                  // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
+                  let a = document.createElement("a");
+                  a.href = url;
+                  a.download = "资金使用申请单.xlsx";
+                  a.click();
+                  // 5.释放这个临时的对象url
+                  window.URL.revokeObjectURL(url);
+                });
+              } else {
+                this.$message.error(res.msg);
+              }
+            });
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      }
+    },
+    //支付方式转换
+    toPayment(list) {
+      let newList = [];
+      list.forEach((item) => {
+        newList.push(
+          this.payment_methodsData.find((payItem) => payItem.label == item)
+            .value
+        );
+      });
+      newList.sort();
+      newList = newList.join(",");
+      return newList;
+    },
+    //小写转大写金额
+    toChies(amount) {
+      // 汉字的数字
+      const cnNums = [
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖",
+      ];
+      // 基本单位
+      const cnIntRadice = ["", "拾", "佰", "仟"];
+      // 对应整数部分扩展单位
+      const cnIntUnits = ["", "万", "亿", "兆"];
+      // 对应小数部分单位
+      const cnDecUnits = ["角", "分"];
+      // 整数金额时后面跟的字符
+      const cnInteger = "整";
+      // 整型完以后的单位
+      const cnIntLast = "元";
+      // 最大处理的数字
+      const maxNum = 9999999999999999.99;
+      // 金额整数部分
+      let integerNum;
+      // 金额小数部分
+      let decimalNum;
+      // 输出的中文金额字符串
+      let chineseStr = "";
+      // 分离金额后用的数组，预定义
+      let parts;
+      if (amount === "") {
+        return "";
+      }
+      amount = parseFloat(amount);
+      if (amount >= maxNum) {
+        // 超出最大处理数字
+        return "";
+      }
+      if (amount === 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+      }
+      // 转换为字符串
+      amount = amount.toString();
+      if (amount.indexOf(".") === -1) {
+        integerNum = amount;
+
+        decimalNum = "";
+      } else {
+        parts = amount.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+      }
+      // 获取整型部分转换
+      if (parseInt(integerNum, 10) > 0) {
+        let zeroCount = 0;
+        const IntLen = integerNum.length;
+        for (let i = 0; i < IntLen; i++) {
+          const n = integerNum.substr(i, 1);
+          const p = IntLen - i - 1;
+          const q = p / 4;
+          const m = p % 4;
+          if (n === "0") {
+            zeroCount++;
+          } else {
+            if (zeroCount > 0) {
+              chineseStr += cnNums[0];
+            }
+            // 归零
+            zeroCount = 0;
+            //alert(cnNums[parseInt(n)])
+            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+          }
+          if (m === 0 && zeroCount < 4) {
+            chineseStr += cnIntUnits[q];
+          }
+        }
+        chineseStr += cnIntLast;
+      }
+      // 小数部分
+      if (decimalNum !== "") {
+        const decLen = decimalNum.length;
+        for (let i = 0; i < decLen; i++) {
+          const n = decimalNum.substr(i, 1);
+          if (n !== "0") {
+            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+          }
+        }
+      }
+      if (chineseStr === "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+      } else if (decimalNum === "") {
+        chineseStr += cnInteger;
+      }
+      return chineseStr;
+    },
+  },
+};
+</script>
+<style scoped>
+.query-form {
+  display: flex;
+  align-items: center;
+  margin-top: 14px;
+}
+.td-title,
+.demo-tableForm >>> .el-form-item__label {
+  color: #323335;
+  font-weight: bold;
+  text-align: center;
+}
+.td-content,
+.demo-tableForm >>> .el-input.is-disabled .el-input__inner {
+  color: #474545;
+}
+.expense-table >>> .el-textarea__inner,
+.expense-table >>> .el-input__inner {
+  border: none;
+  padding: 0;
+  text-align: center;
+}
+.expense-table >>> .el-form-item {
+  margin: 0;
+  padding: 0;
+}
+.expense-table >>> .el-checkbox-group,
+.expense-table >>> .el-date-editor,
+.expense-table >>> .el-select,
+.expense-table >>> .el-input-number,
+.expense-table >>> .el-cascader,
+.demo-tableForm >>> .el-select {
+  width: 100%;
+  text-align: center;
+}
+.demo-tableForm >>> .el-input__inner {
+  border: none;
+}
+.demo-tableForm >>> .el-input__prefix,
+.demo-tableForm >>> .el-select__caret {
+  display: none;
+}
+.idea-box >>> .el-input.is-disabled .el-input__inner,
+.expense-table >>> .el-input.is-disabled .el-input__inner {
+  background-color: #fff;
+}
+.demo-tableForm >>> .el-input-number__decrease,
+.demo-tableForm >>> .el-input-number__increase {
+  display: none;
+}
+.demo-tableForm >>> .el-checkbox__input.is-disabled + span.el-checkbox__label {
+  color: #409eff;
+}
+.demo-tableForm
+  >>> .el-checkbox__input.is-disabled.is-checked
+  .el-checkbox__inner {
+  background-color: #409eff;
+  border-color: #409eff;
+  color: #fff;
+}
+.demo-tableForm
+  >>> .el-checkbox__input.is-disabled.is-checked
+  .el-checkbox__inner::after {
+  border-color: #fff;
+}
+.demo-tableForm >>> .el-input__suffix {
+  display: none;
+}
+.el-icon-right {
+  font-size: 20px;
+}
+.operation {
+  margin-bottom: 15px;
+}
+</style>

src/views/FinancialManagement/ExpenseManagement/ExpenseComponent.vue

@@ -0,0 +1,486 @@
+<template>
+  <div>
+    <!-- 新增弹出框 -->
+    <el-dialog
+      class="dialog"
+      :title="title"
+      :close-on-click-modal="false"
+      :before-close="resetForm"
+      :visible.sync="dialogFormVisible"
+      width="60%"
+    >
+      <el-form
+        :model="formData"
+        :rules="formData.outerFlag == 0 ? interiorRules : externalRules"
+        ref="formData"
+        label-width="130px"
+        size="small"
+        class="frame"
+      >
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="账户类别" prop="outerFlag">
+              <el-select
+                v-model="formData.outerFlag"
+                placeholder="请选择账户类别"
+                @change="outChange"
+              >
+                <el-option label="内部账户" value="0"></el-option>
+                <el-option label="外部账户" value="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="户名" prop="accountName">
+              <el-input
+                v-model="formData.accountName"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="账户性质" prop="accountQuality">
+              <el-select
+                v-model="formData.accountQuality"
+                placeholder="请选择账户性质"
+              >
+                <el-option
+                  v-for="item in dictionariesData"
+                  :key="item.value+'bb'"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="银行卡号" prop="bankCardNum">
+              <el-input
+                v-model="formData.bankCardNum"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="开户行" prop="bank">
+              <el-input v-model="formData.bank" autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col v-show="formData.outerFlag == 0" :span="12">
+            <el-form-item label="开户行名称" prop="bankName">
+              <el-input
+                v-model="formData.bankName"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="开户行号" prop="bankNum">
+              <el-input
+                v-model="formData.bankNum"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证书有效期" prop="certExpirationDate">
+              <el-date-picker
+                v-model="formData.certExpirationDate"
+                size="small"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+                @change="setDateInterval($event)"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="结算卡" prop="clearingProfit">
+              <el-input-number
+                v-model="formData.clearingProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="单日转账笔数限制" prop="dayStrokeNum">
+              <el-input-number
+                v-model="formData.dayStrokeNum"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="外部过账金额" prop="exteriorProfit">
+              <el-input-number
+                v-model="formData.exteriorProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="财税公司利润" prop="fiscalProfit">
+              <el-input-number
+                v-model="formData.fiscalProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="保险公司回款" prop="insuranceProfit">
+              <el-input-number
+                v-model="formData.insuranceProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="其他利润" prop="otherProfit">
+              <el-input-number
+                v-model="formData.otherProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="园区利润" prop="parkProfit">
+              <el-input-number
+                v-model="formData.parkProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="对私单日限额" prop="priDayLines">
+              <el-input-number
+                v-model="formData.priDayLines"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="对私单笔限额" prop="priSingleLines">
+              <el-input-number
+                v-model="formData.priSingleLines"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="对私年额度" prop="priYearLines">
+              <el-input-number
+                v-model="formData.priYearLines"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="对公单日限额" prop="pubDayLines">
+              <el-input-number
+                v-model="formData.pubDayLines"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="对公单笔限额" prop="pubSingleLines">
+              <el-input-number
+                v-model="formData.pubSingleLines"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0">
+          <el-col :span="12">
+            <el-form-item label="对公年额度" prop="pubYearLines">
+              <el-input-number
+                v-model="formData.pubYearLines"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="天勤利润" prop="tianqinProfit">
+              <el-input-number
+                v-model="formData.tianqinProfit"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row  v-show="formData.outerFlag == 0&&formDataId">
+          <el-col :span="12">
+            <el-form-item label="单日转账笔数剩余" prop="dayStrokeNumExcess">
+              <el-input-number
+                v-model="formData.dayStrokeNumExcess"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="对私单日限额剩余" prop="priDayLinesExcess">
+              <el-input-number
+                v-model="formData.priDayLinesExcess"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row  v-show="formData.outerFlag == 0&&formDataId">
+          <el-col :span="12">
+            <el-form-item label="对私年剩余额度" prop="priYearExcess">
+              <el-input-number
+                v-model="formData.priYearExcess"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="对公单日限额剩余" prop="pubDayLinesExcess">
+              <el-input-number
+                v-model="formData.pubDayLinesExcess"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-show="formData.outerFlag == 0&&formDataId">
+          <el-col :span="12">
+            <el-form-item label="对公年剩余额度" prop="pubYearExcess">
+              <el-input-number
+                v-model="formData.pubYearExcess"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="支出金额" prop="spend">
+              <el-input-number
+                v-model="formData.spend"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm()" size="small">取 消</el-button>
+        <el-button type="primary" @click="submitForm('formData')" size="small"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "ExpenseComponent",
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "新增",
+    },
+    formDataId: {
+      type: String,
+      default: "",
+    },
+    formData: {
+      type: Object,
+      default: {
+        outerFlag: "0", //账户类别
+        accountName: "", //户名
+        accountQuality: "", //账户性质
+        bankCardNum: "", //银行卡号
+        bank: "", //开户行
+        bankName: "", //开户行名称
+        bankNum: "", //开户行号
+        certExpirationDate: "", //证书有效期
+        clearingProfit: "", //结算卡
+        dayStrokeNum: "", //单日转账笔数限制
+        exteriorProfit: "", //外部过账金额
+        fiscalProfit: "", //财税公司利润
+        insuranceProfit: "", //保险公司回款
+        otherProfit: "", //其他利润
+        parkProfit: "", //园区利润
+        priDayLines: "", //对私单日限额
+        priSingleLines: "", //对私单笔限额
+        priYearExcess: "", //对私年剩余额度
+        priYearLines: "", //对私年额度
+        pubDayLines: "", //对公单日限额
+        pubSingleLines: "", //对公单笔限额
+        pubYearExcess: "", //对公年剩余额度
+        pubYearLines: "", //对公年额度
+        tianqinProfit: "", //天勤利润
+        dayStrokeNumExcess:"",//单日转账笔数剩余
+        priDayLinesExcess:"",//对私单日限额剩余
+        pubDayLinesExcess:"",//对公单日限额剩余
+        spend:"",//	支出金额
+      },
+    },
+  },
+  data() {
+    return {
+      dictionariesData: [], //账户性质数据字典
+      externalRules: {
+        //外部表单规则
+        outerFlag: [
+          { required: true, message: "请选择账户类别", trigger: "change" },
+        ],
+        accountName: [
+          { required: true, message: "户名不能为空", trigger: "blur" },
+        ],
+        accountQuality: [
+          { required: true, message: "请选择账户性质", trigger: "change" },
+        ],
+      },
+      interiorRules: {
+        //内部表单规则
+        outerFlag: [
+          { required: true, message: "请选择账户类别", trigger: "change" },
+        ],
+        accountName: [
+          { required: true, message: "户名不能为空", trigger: "blur" },
+        ],
+        accountQuality: [
+          { required: true, message: "请选择账户性质", trigger: "change" },
+        ],
+        bankCardNum: [
+          { required: true, message: "银行卡号不能为空", trigger: "blur" },
+        ],
+        bank: [{ required: true, message: "开户行不能为空", trigger: "blur" }],
+        bankName: [
+          { required: true, message: "开户行名称不能为空", trigger: "blur" },
+        ],
+        bankNum: [
+          { required: true, message: "开户行号不能为空", trigger: "blur" },
+        ],
+        // clearingProfit: [
+        //   { required: true, message: "结算卡不能为空", trigger: "blur" },
+        // ],
+        certExpirationDate: [
+          {
+            required: true,
+            message: "请选择证书有效期",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    dialogFormVisible(status){
+        !status?this.$nextTick(()=>{ this.$refs.formData.clearValidate()}):''
+    }
+  },
+  created() {
+    this.business();
+  },
+  mounted() {
+  },
+  methods: {
+    outChange(e){
+      this.$nextTick(()=>{ this.$refs.formData.clearValidate()})
+      this.$emit('outChange',e)
+    },
+    setDateInterval(e){
+      this.$emit('setDateInterval',e)
+    },
+    //数据字典
+    business() {
+      let typeName = "account_quality";
+      this.$api.dict.findByLableName(typeName).then((res) => {
+        this.dictionariesData = res.data;
+      });
+    },
+    //提交
+    submitForm(formData) {
+      this.$refs[formData].validate((valid) => {
+        if (valid) {
+          this.$emit('submitForm')
+        } else {
+          return false;
+        }
+      });
+    },
+    //弹框取消重置
+    resetForm() {
+      this.$emit('resetForm')
+    }
+  },
+};
+</script>
+<style scoped>
+/deep/ .el-dialog__body {
+  overflow-y: scroll;
+  max-height: 500px;
+}
+.el-input-number {
+  width: 100%;
+}
+</style>

src/views/FinancialManagement/ExpenseManagement/ExpenseManagement.vue

@@ -0,0 +1,1124 @@
+<template>
+  <!--布局容器-->
+  <div class="container" style="width: 99%; margin-top: 0px">
+    <!-- 顶部查询 -->
+    <el-row class="top">
+      <el-form v-model="queryFrom" size="small" label-width="95px" class="form">
+        <el-form-item label="账户类别" label-width="95px" prop="outerFlag">
+          <el-select
+            v-model="queryFrom.outerFlag"
+            placeholder="请选择账户类别"
+            clearable
+          >
+            <el-option label="内部账户" value="0"></el-option>
+            <el-option label="外部账户" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="账户性质" label-width="95px" prop="accountQuality">
+          <el-select
+            v-model="queryFrom.accountQuality"
+            placeholder="请选择账户性质"
+            clearable
+          >
+            <el-option
+              v-for="item in account_qualityData"
+              :key="item.value + 'aa'"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="户名" label-width="95px" prop="invCompanyName">
+          <el-input
+            v-model="queryFrom.accountName"
+            placeholder="请输入户名"
+            class="widths"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="银行卡号" label-width="95px" prop="invCompanyName">
+          <el-input
+            v-model="queryFrom.bankCardNum"
+            placeholder="请输入银行卡号"
+            class="widths"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="queryStaffInfo"
+            >查询</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <!-- 新增 -->
+    <el-button
+      class="operation"
+      type="primary"
+      plain
+      size="medium"
+      @click="addAmount"
+      >新增账户</el-button
+    >
+    <!-- 表格 -->
+    <kt-common-table
+      :operationWidth="operationWidth"
+      class="ktTable"
+      permsEdit="sys:agent:view"
+      ref="dataTable"
+      :data="pageResult"
+      :columns="columns"
+      :showBatchDelete="false"
+      :showOperation="true"
+      editButtonName="修改"
+      :button3Name="button3Name"
+      :button2Name="button2Name"
+      :button1Name="button1Name"
+      button2Background="#92D050"
+      button3Background="#f56c6c"
+      button1Icon="el-icon-s-finance"
+      button2Icon="el-icon-s-ticket"
+      button3Icon="fa fa-trash"
+      @handleButton3="handleTableDelete"
+      @handleButton2="handleTableIncome"
+      @handleButton1="handleTableExpend"
+      @findPage="findPage"
+      @handleEdit="handleTableEdit"
+      :isshowpagination="true"
+    ></kt-common-table>
+    <!-- 新增修改弹框 -->
+    <expense-component
+      ref="expenseComponent"
+      :formData="formData"
+      :formDataId="formDataId"
+      :title="title"
+      :dialogFormVisible="dialogFormVisible"
+      @resetForm="resetForm"
+      @submitForm="submitForm"
+      @setDateInterval="setDateInterval"
+      @outChange="outChange"
+    ></expense-component>
+    <!-- 支出弹框 -->
+    <el-dialog
+      class="dialog expendDialog"
+      title="支出信息"
+      :close-on-click-modal="false"
+      :before-close="expendResetForm"
+      :visible.sync="expendDialogVisible"
+      width="60%"
+    >
+      <!-- 支出表格 -->
+      <kt-common-table
+        :operationWidth="130"
+        class="ktTable expendTable"
+        ref="expendTable"
+        :data="expendPageResult"
+        :columns="expendColumns"
+        :showBatchDelete="false"
+        :showOperation="true"
+        :button1Name="expendButton1Name"
+        button2Background="#92D050"
+        button3Background="#f56c6c"
+        button1Icon="el-icon-s-finance"
+        @handleButton1="handleTableConfirm"
+        @findPage="getExpendData"
+        :isshowpagination="true"
+      ></kt-common-table>
+    </el-dialog>
+    <!-- 收入弹框 -->
+    <el-dialog
+      class="dialog expendDialog"
+      title="收入信息"
+      :close-on-click-modal="false"
+      :before-close="incomeResetForm"
+      :visible.sync="incomeDialogVisible"
+      width="60%"
+    >
+      <el-form
+        :model="inComeFormData"
+        :rules="inComeFormRules"
+        ref="inComeFormData"
+        label-width="130px"
+        size="small"
+        class="inComeForm"
+      >
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="转账方" prop="company">
+              <el-select
+                v-model="inComeFormData.company"
+                filterable
+                placeholder=""
+                @change="companyChange"
+              >
+                <el-option
+                  v-for="item in collectionData"
+                  :key="item.accountId"
+                  :label="item.name"
+                  :value="item.nameValue"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="收款方" prop="collectionMessage">
+              <el-input
+                disabled
+                v-model="inComeFormData.collectionMessage"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="金额" prop="outerFlag">
+              <el-input-number
+                v-model="inComeFormData.applyAmount"
+                :min="0"
+                :precision="2"
+                @blur="chageAppl"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="大写金额" prop="bigApplyAmount">
+              <el-input
+                v-model="inComeFormData.bigApplyAmount"
+                disabled
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="collec">
+          <el-col :span="24">
+            <el-form-item label="资金流向" style="width: 100%">
+              <el-input
+                v-model="inComeFormData.company"
+                disabled
+                autocomplete="off"
+              ></el-input>
+              <i class="el-icon-right"></i>
+              <el-input
+                disabled
+                v-model="inComeFormData.collectionMessage"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12"> </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-select v-model="inComeFormData.remark" placeholder="">
+                <el-option
+                  v-for="item in use_fundsData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="incomeResetForm()" size="small">取 消</el-button>
+        <el-button type="primary" @click="submitIncomeForm()" size="small"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  <script>
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+import ExpenseComponent from "./ExpenseComponent.vue"; //新增账户信息弹框
+
+export default {
+  name: "ExpenseManagement",
+  components: { KtCommonTable, KtButton, ExpenseComponent },
+  created() {
+    this.business("account_quality"); //账户性质字典;
+    this.business("use_funds"); //备注字典
+  },
+  mounted() {},
+  data() {
+    return {
+      /**
+       * 账户收入模块
+       */
+      incomeDialogVisible: false, //收入弹出框状态
+      collectionData: [], //收入form表单  转账方下拉菜单数组
+      use_fundsData: [], //收入form表单  备注字典数据
+      inComeFormData: {
+        //收入form表单
+        collectionMessage: "", //收款名字
+        fundFlow: "", //资金流向
+        applyAmount: "", //金额
+        bigApplyAmount: "", //大写金额
+        remark: "", //备注
+        company: "", //转账方
+      },
+      inComeFormRules: {
+        //收入form表单规则
+        company: [
+          { required: true, message: "转账方不能为空", trigger: "change" },
+        ],
+        remark: [{ required: true, message: "请选择备注", trigger: "change" }],
+      },
+      enterAccountId: "", //点击收入按钮当条数据收入id
+      /**
+       * 账户模块
+       */
+      title: "新增账户信息", 
+      dialogFormVisible: false, //弹出框状态
+      operationWidth: 200, //操作列宽度
+      account_qualityData: [], //账户性质数据字典
+      queryFrom: {//查询条件
+        accountQuality: "", //账户性质查询
+        bankCardNum: "", //银行卡号查询
+        accountName: "", //户名查询
+      },
+      button1Name: "支出", //按钮内容
+      button3Name: "删除",
+      button2Name: "收入",
+      expendButton1Name: "确认已转账",
+      pageResult: {}, //表格内容分页参数
+      formDataId: "", //数据Id
+      pageRequest: {
+        // 列表查询条件
+        pageNo: 1,
+        pageSize: 10,
+      },
+      // 数据列
+      columns: [
+        {
+          prop: "outerFlagName",
+          label: "账户类别",
+          minWidth: 70,
+          sortable: false,
+        },
+        {
+          prop: "accountQualityName",
+          label: "账户性质",
+          minWidth: 70,
+          sortable: false,
+        },
+        {
+          prop: "accountName",
+          label: "户名",
+          minWidth: 160,
+          sortable: false,
+        },
+        {
+          prop: "bankCardNum",
+          label: "银行卡号",
+          minWidth: 170,
+          sortable: false,
+        },
+        { prop: "bank", label: "开户行", minWidth: 100, sortable: false },
+        {
+          prop: "bankName",
+          label: "开户行名称",
+          minWidth: 190,
+          sortable: false,
+        },
+        { prop: "bankNum", label: "开户行号", minWidth: 150, sortable: false },
+        {
+          prop: "balance",
+          label: "余额",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "startCertExpirationDate",
+          label: "证书有效开始日期",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "endCertExpirationDate",
+          label: "证书有效结束日期",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "clearingProfit",
+          label: "结算卡",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "dayStrokeNum",
+          label: "单日转账笔数限制",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "exteriorProfit",
+          label: "外部过账金额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "fiscalProfit",
+          label: "财税公司利润",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "insuranceProfit",
+          label: "保险公司回款",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "otherProfit",
+          label: "其他利润",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "parkProfit",
+          label: "园区利润",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priDayLines",
+          label: "对私单日限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priSingleLines",
+          label: "对私单笔限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priYearExcess",
+          label: "对私年剩余额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priYearLines",
+          label: "对私年额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubDayLines",
+          label: "对公单日限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubSingleLines",
+          label: "对公单笔限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubYearExcess",
+          label: "对公年剩余额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubYearLines",
+          label: "对公年额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "tianqinProfit",
+          label: "天勤利润",
+          minWidth: 120,
+          sortable: false,
+        },
+      ],
+      formData: {//账户form表单
+        outerFlag: "0", //账户类别
+        accountName: "", //户名
+        accountQuality: "", //账户性质
+        bankCardNum: "", //银行卡号
+        bank: "", //开户行
+        bankName: "", //开户行名称
+        bankNum: "", //开户行号
+        certExpirationDate: "", //证书有效期
+        clearingProfit: "", //结算卡
+        dayStrokeNum: "", //单日转账笔数限制
+        exteriorProfit: "", //外部过账金额
+        fiscalProfit: "", //财税公司利润
+        insuranceProfit: "", //保险公司回款
+        otherProfit: "", //其他利润
+        parkProfit: "", //园区利润
+        priDayLines: "", //对私单日限额
+        priSingleLines: "", //对私单笔限额
+        priYearExcess: "", //对私年剩余额度
+        priYearLines: "", //对私年额度
+        pubDayLines: "", //对公单日限额
+        pubSingleLines: "", //对公单笔限额
+        pubYearExcess: "", //对公年剩余额度
+        pubYearLines: "", //对公年额度
+        tianqinProfit: "", //天勤利润
+      },
+      /**
+       * 支出模块
+       */
+      expendColumns: [// 支出数据列
+        {
+          prop: "company",
+          label: "转账方",
+          minWidth: 160,
+          sortable: false,
+        },
+        {
+          prop: "collectionMessage",
+          label: "收账方",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "applyAmount",
+          label: "金额",
+          minWidth: 150,
+          sortable: false,
+        },
+        {
+          prop: "applyTime",
+          label: "转账日期",
+          minWidth: 150,
+          sortable: false,
+        },
+        {
+          prop: "transferFlagName",
+          label: "转账状态",
+          minWidth: 150,
+          sortable: false,
+        },
+      ],
+      expendPageResult: {
+        //支出表格参数
+        pageNo: 1,
+        pageSize: 10,
+      },
+      expendDialogVisible: false, //支出弹出框状态
+      expendOutAccountId: "", //点击支出按钮当条数据支出id
+      companyItem: {}, //选择单位整条数据
+    };
+  },
+  watch: {
+    expendDialogVisible(n) {
+      if (n == false) {
+        this.expendOutAccountId = "";
+      }
+    },
+    //收入去除form表单信息
+    incomeDialogVisible(n) {
+      if (n == false) {
+        this.enterAccountId = "";
+        this.$refs.inComeFormData.clearValidate();
+        this.inComeFormData = {
+          //收入form数据
+          collectionMessage: "", //收款名字
+          fundFlow: "", //资金流向
+          applyAmount: "", //金额
+          bigApplyAmount: "", //大写金额
+          remark: "", //备注
+          company: "", //转账方
+        };
+      }
+    },
+  },
+  methods: {
+    //申请金额填写完成后
+    chageAppl(e) {
+      this.inComeFormData.bigApplyAmount = this.toChies(
+        this.inComeFormData.applyAmount
+      );
+    },
+    //获取所有外部账户信息
+    getAllUser() {
+      this.$api.expense.getAccountByAccountName().then((res) => {
+        if (res.code == 200) {
+          let outArr = res.data.filter((item) => item.outerFlag == 1);
+          outArr.forEach((item, index) => {
+            item.name =
+              (item.accountQuality == 0 ? "公户" : "私户") +
+              "   " +
+              item.accountName +
+              "   " +
+              item.bankCardNum +
+              "   " +
+              item.bank;
+            item.nameValue =
+              item.accountName + "   " + item.bankCardNum + "   " + item.bank;
+          });
+          this.collectionData = outArr;
+        }
+      });
+    },
+    //选择收款单位change事件
+    companyChange(val) {
+      const item = this.collectionData.find((item) => item.accountId === val);
+      this.companyItem = item;
+    },
+    //选择账户类别
+    outChange(e) {
+      if (e == 1) {
+        this.formData = {
+          outerFlag: e, //账户类别
+          accountName: this.formData.accountName, //户名
+          accountQuality: this.formData.accountQuality, //账户性质
+          bankCardNum: this.formData.bankCardNum, //银行卡号
+          bank: this.formData.bank, //开户行
+        };
+      } else {
+        this.formData = {
+          outerFlag: e, //账户类别
+          accountName: this.formData.accountName, //户名
+          accountQuality: this.formData.accountQuality, //账户性质
+          bankCardNum: this.formData.bankCardNum, //银行卡号
+          bank: this.formData.bank, //开户行
+          bankName: "", //开户行名称
+          bankNum: "", //开户行号
+          certExpirationDate: "", //证书有效期
+          clearingProfit: "", //结算卡
+          dayStrokeNum: "", //单日转账笔数限制
+          exteriorProfit: "", //外部过账金额
+          fiscalProfit: "", //财税公司利润
+          insuranceProfit: "", //保险公司回款
+          otherProfit: "", //其他利润
+          parkProfit: "", //园区利润
+          priDayLines: "", //对私单日限额
+          priSingleLines: "", //对私单笔限额
+          priYearExcess: "", //对私年剩余额度
+          priYearLines: "", //对私年额度
+          pubDayLines: "", //对公单日限额
+          pubSingleLines: "", //对公单笔限额
+          pubYearExcess: "", //对公年剩余额度
+          pubYearLines: "", //对公年额度
+          tianqinProfit: "", //天勤利润
+        };
+      }
+    },
+    //点击确认收入事件
+    submitIncomeForm() {
+      let obj = JSON.parse(JSON.stringify(this.inComeFormData));
+      obj.enterAccountId = this.enterAccountId;
+      obj.fundFlow = obj.company + "→" + obj.collectionMessage;
+      this.$refs.inComeFormData.validate((valid) => {
+        if (valid) {
+          this.$api.expense.insertAccountOperate(obj).then((res) => {
+            this.incomeDialogVisible = false;
+            if (res.code == 200) {
+              this.$message.success("添加成功！");
+            } else {
+              this.$message.success(res.msg);
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    //点击页面收入按钮
+    handleTableIncome(e) {
+      if (e.row.outerFlag == 1) {
+        this.$message.error("请选择内部账户");
+        return;
+      }
+      this.getAllUser();
+      this.enterAccountId = e.row.accountId;
+      this.inComeFormData.collectionMessage =
+        e.row.accountName + "   " + e.row.bankCardNum + "   " + e.row.bank;
+      this.incomeDialogVisible = true;
+    },
+    //点击页面支出按钮
+    handleTableExpend(e) {
+      if (e.row.outerFlag == 1) {
+        this.$message.error("请选择内部账户");
+        return;
+      }
+      this.expendDialogVisible = true;
+      this.expendOutAccountId = e.row.accountId;
+      this.getExpendData();
+    },
+    //获取支出信息列表
+    getExpendData(data) {
+      if (data && data.pageRequest) {
+        this.expendPageResult.pageNo = data.pageRequest.pageNum;
+        this.expendPageResult.pageSize = data.pageRequest.pageSize;
+      }
+      let obj = {
+        pageNo: this.expendPageResult.pageNo,
+        pageSize: this.expendPageResult.pageSize,
+        transferFlag: 1,
+        outAccountId: this.expendOutAccountId,
+      };
+      this.$api.expense
+        .getAccountExcel(obj)
+        .then((res) => {
+          res.data.records.forEach((element) => {
+            element.transferFlagName =
+              element.transferFlag == 0 ? "已转账" : "未转账";
+            this.use_fundsData.forEach((item) => {
+              if (element.remark == item.value) {
+                element.remarkName = item.label;
+              }
+            });
+          });
+          this.expendPageResult = {
+            content: res.data.records,
+            pageNum: res.data.current,
+            pageSize: res.data.size,
+            totalPages: res.data.pages,
+            totalSize: res.data.total,
+          };
+        })
+        .then(data != null ? data.callback : "");
+    },
+    //弹框确认支出按钮事件
+    handleTableConfirm(index) {
+      this.$confirm("确认把该条数据设为已转账状态吗?", "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.expense
+            .updateTransferFlag(index.row.excelAccountOperateId)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message.success("确认转账成功");
+                this.getExpendData();
+              } else {
+                this.$message.error(res.msg);
+              }
+            });
+        })
+        .catch(() => {});
+    },
+    //选择证书有效日期区间
+    setDateInterval(e) {
+      if (e != null && e != "") {
+        this.formData.startCertExpirationDate = e[0];
+        this.formData.endCertExpirationDate = e[1];
+      } else {
+        this.formData.startCertExpirationDate = "";
+        this.formData.endCertExpirationDate = "";
+      }
+    },
+    //获取支出页面列表数据
+    expendFindPage(data) {},
+    //获取页面列表数据
+    findPage(data) {
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNo = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      let obj = { ...this.queryFrom, ...this.pageRequest };
+      this.$api.expense
+        .getAccount(obj)
+        .then((res) => {
+          res.data.records.forEach((element) => {
+            element.outerFlagName =
+              element.outerFlag == 0 ? "内部账户" : "外部账户";
+            element.accountQualityName = this.dictFn(element, 1); //转化账户性质跟账户性别
+          });
+          this.pageResult = {
+            content: res.data.records,
+            pageNum: res.data.current,
+            pageSize: res.data.size,
+            totalPages: res.data.pages,
+            totalSize: res.data.total,
+          };
+        })
+        .then(data != null ? data.callback : "");
+    },
+    //数据字典
+    business(typeName) {
+      this.$api.dict.findByLableName(typeName).then((res) => {
+        // this.account_qualityData = res.data;
+        this[typeName + "Data"] = res.data;
+      });
+    },
+    //用户性质转换
+    dictFn(obj, type) {
+      if (type == 1) {
+        return this.account_qualityData.find(
+          (item) => item.value == obj.accountQuality
+        ).label;
+      } else {
+        return this.account_qualityData.find(
+          (item) => item.label == obj.accountQuality
+        ).value;
+      }
+    },
+    // 查询
+    queryStaffInfo() {
+      this.findPage();
+    },
+    //新增事件
+    addAmount() {
+      this.title = "新增账户信息";
+      this.dialogFormVisible = true;
+    },
+    //删除数据事件
+    handleTableDelete(index) {
+      this.$confirm("确认删除该记录吗?", "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.expense.deleteAccount(index.row.accountId).then((res) => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.findPage();
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    //收入弹框取消重置
+    incomeResetForm() {
+      this.incomeDialogVisible = false;
+    },
+    //支出弹框取消重置
+    expendResetForm() {
+      this.expendDialogVisible = false;
+    },
+    //弹框取消重置
+    resetForm() {
+      this.dialogFormVisible = false;
+      this.formDataId = "";
+      this.formData = {
+        outerFlag: "0", //账户类别
+        accountName: "", //户名
+        accountQuality: "", //账户性质
+        bankCardNum: "", //银行卡号
+        bank: "", //开户行
+        bankName: "", //开户行名称
+        bankNum: "", //开户行号
+        certExpirationDate: "", //证书有效期
+        clearingProfit: "", //结算卡
+        dayStrokeNum: "", //单日转账笔数限制
+        exteriorProfit: "", //外部过账金额
+        fiscalProfit: "", //财税公司利润
+        insuranceProfit: "", //保险公司回款
+        otherProfit: "", //其他利润
+        parkProfit: "", //园区利润
+        priDayLines: "", //对私单日限额
+        priSingleLines: "", //对私单笔限额
+        priYearExcess: "", //对私年剩余额度
+        priYearLines: "", //对私年额度
+        pubDayLines: "", //对公单日限额
+        pubSingleLines: "", //对公单笔限额
+        pubYearExcess: "", //对公年剩余额度
+        pubYearLines: "", //对公年额度
+        tianqinProfit: "", //天勤利润
+      };
+    },
+    //修改
+    handleTableEdit(index) {
+      let row = index.row;
+      this.formDataId = row.accountId;
+      this.$api.expense.getAccountById(this.formDataId).then((res) => {
+        if (res.code == 200) {
+          this.formData = JSON.parse(JSON.stringify(res.data));
+          if (
+            res.data.startCertExpirationDate &&
+            res.data.endCertExpirationDate
+          ) {
+            this.formData.certExpirationDate = [
+              res.data.startCertExpirationDate,
+              res.data.endCertExpirationDate,
+            ];
+          }
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+
+      this.title = "编辑账户信息";
+      this.dialogFormVisible = true;
+    },
+    //提交
+    submitForm() {
+      let params = JSON.parse(JSON.stringify(this.formData));
+      delete params.certExpirationDate;
+      if (this.formDataId) {
+        //修改
+        params.accountId = this.formDataId;
+        this.$api.expense.updateAccoount(params).then((res) => {
+          if (res.code == 200) {
+            this.$message({
+              message: "修改成功",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              message: `修改失败, ${res.msg}`,
+              type: "error",
+            });
+          }
+          this.findPage();
+          this.resetForm();
+        });
+      } else {
+        //新增
+        this.$api.expense.insertAccount(params).then((res) => {
+          if (res.code == 200) {
+            this.$message({
+              message: "添加成功",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              message: `添加失败, ${res.msg}`,
+              type: "error",
+            });
+          }
+          this.findPage();
+          this.resetForm();
+        });
+      }
+    },
+    //小写转大写金额
+    toChies(amount) {
+      // 汉字的数字
+      const cnNums = [
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖",
+      ];
+      // 基本单位
+      const cnIntRadice = ["", "拾", "佰", "仟"];
+      // 对应整数部分扩展单位
+      const cnIntUnits = ["", "万", "亿", "兆"];
+      // 对应小数部分单位
+      const cnDecUnits = ["角", "分"];
+      // 整数金额时后面跟的字符
+      const cnInteger = "整";
+      // 整型完以后的单位
+      const cnIntLast = "元";
+      // 最大处理的数字
+      const maxNum = 9999999999999999.99;
+      // 金额整数部分
+      let integerNum;
+      // 金额小数部分
+      let decimalNum;
+      // 输出的中文金额字符串
+      let chineseStr = "";
+      // 分离金额后用的数组，预定义
+      let parts;
+      if (amount === "") {
+        return "";
+      }
+      amount = parseFloat(amount);
+      if (amount >= maxNum) {
+        // 超出最大处理数字
+        return "";
+      }
+      if (amount === 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+      }
+      // 转换为字符串
+      amount = amount.toString();
+      if (amount.indexOf(".") === -1) {
+        integerNum = amount;
+
+        decimalNum = "";
+      } else {
+        parts = amount.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+      }
+      // 获取整型部分转换
+      if (parseInt(integerNum, 10) > 0) {
+        let zeroCount = 0;
+        const IntLen = integerNum.length;
+        for (let i = 0; i < IntLen; i++) {
+          const n = integerNum.substr(i, 1);
+          const p = IntLen - i - 1;
+          const q = p / 4;
+          const m = p % 4;
+          if (n === "0") {
+            zeroCount++;
+          } else {
+            if (zeroCount > 0) {
+              chineseStr += cnNums[0];
+            }
+            // 归零
+            zeroCount = 0;
+            //alert(cnNums[parseInt(n)])
+            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+          }
+          if (m === 0 && zeroCount < 4) {
+            chineseStr += cnIntUnits[q];
+          }
+        }
+        chineseStr += cnIntLast;
+      }
+      // 小数部分
+      if (decimalNum !== "") {
+        const decLen = decimalNum.length;
+        for (let i = 0; i < decLen; i++) {
+          const n = decimalNum.substr(i, 1);
+          if (n !== "0") {
+            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+          }
+        }
+      }
+      if (chineseStr === "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+      } else if (decimalNum === "") {
+        chineseStr += cnInteger;
+      }
+      return chineseStr;
+    },
+  },
+};
+</script>
+  
+  <style scoped>
+.operation {
+  margin-left: 14px !important;
+  margin-top: 15px !important ;
+}
+.form {
+  display: flex;
+  margin-top: 14px;
+  align-items: center;
+  margin-left: -12px;
+  margin-bottom: 20px;
+}
+.el-pagination {
+  font-weight: normal;
+}
+.el-card__body {
+  padding: 12px !important;
+}
+.footer .footerdiv {
+  display: flex;
+  align-items: center;
+}
+.container .el-form-item {
+  margin-bottom: -14px !important;
+}
+.form .el-form-item__label {
+  font-size: 15px !important;
+  font-weight: 600 !important;
+}
+
+.ktTable {
+  margin-top: 20px;
+}
+.el-row {
+  margin-top: 18px;
+}
+.top {
+  margin-top: 0px;
+}
+
+.el-date-editor--daterange.el-input__inner {
+  width: 300px;
+}
+/deep/ .el-select--small {
+  width: 100%;
+}
+.frame {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+/deep/ .el-dialog__body {
+  overflow-y: scroll;
+  max-height: 500px;
+}
+.addremove-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 25px;
+  margin-top: 10px;
+  /* position: absolute;
+    bottom:0;
+    left: 0; */
+}
+.addremove-box > i {
+  cursor: pointer;
+}
+.frame >>> .el-date-editor {
+  width: 100%;
+}
+.frame .el-input-number--small {
+  width: 200px;
+}
+.ktTable >>> .el-button span {
+  margin-left: 0;
+}
+.expendTable >>> .bottomFixed {
+  position: static;
+  margin-top: 20px;
+}
+.expendTable >>> .el-table {
+  height: 400px !important;
+}
+
+.expendDialog >>> .el-dialog__body {
+  overflow-y: hidden !important;
+  max-height: 500px;
+}
+.collec >>> .el-form-item__content {
+  display: flex;
+  align-items: center;
+}
+.inComeForm >>> .el-input-number__decrease,
+.inComeForm >>> .el-input-number__increase {
+  display: none;
+}
+.inComeForm >>> .el-input-number {
+  width: 100%;
+}
+.inComeForm >>> .el-input.is-disabled .el-input__inner {
+  background-color: #fff;
+  color: #606266;
+}
+.el-icon-right {
+  margin: 0 10px;
+  font-size: 20px;
+}
+.ktTable >>> .cell .el-button{
+  width: 80px;
+}
+</style>
+  

src/views/FinancialManagement/ExpenseManagement/ExpenseMessage.vue

@@ -0,0 +1,363 @@
+<template>
+  <!--布局容器-->
+  <div class="container" style="width: 99%; margin-top: 0px">
+    <!-- 新增 -->
+    <el-button
+      class="operation"
+      type="primary"
+      plain
+      size="medium"
+      @click="addAmount"
+      >新增科目</el-button
+    >
+
+    <!-- 表格 -->
+    <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px; margin-top: 30px"
+      row-key="expensesId"
+      border
+      default-expand-all
+      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
+    >
+      <!-- <el-table-column type="index" align="center" label="序号" width="50"> </el-table-column> -->
+      <el-table-column prop="category" align="center" label="类目">
+      </el-table-column>
+      <el-table-column prop="remark" align="center" label="备注">
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleTableEdit(scope.$index, scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button
+          >
+          <el-button
+            size="mini"
+            type="success"
+            @click="addHandeFn(scope.$index, scope.row)"
+            >新增子类</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <kt-common-table
+      :operationWidth="operationWidth"
+      class="ktTable"
+      permsEdit="sys:agent:view"
+      ref="dataTable"
+      :data="pageResult"
+      :columns="columns"
+      :showBatchDelete="false"
+      :showOperation="true"
+      editButtonName="编辑"
+      :button3Name="button3Name"
+      :button2Name="button2Name"
+      :button3Background="button3Background"
+      :button2Background="button2Background"
+      @handleButton3="handleTableDelete"
+      @handleButton2="addHandeFn"
+      @findPage="findPage"
+      @handleEdit="handleTableEdit"
+      :isshowpagination="true"
+    ></kt-common-table> -->
+
+    <!-- 新增弹出框 -->
+    <el-dialog
+      class="dialog"
+      :title="title"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+      :visible.sync="dialogFormVisible"
+      width="50%"
+    >
+      <el-form
+        :model="formData"
+        :rules="rules"
+        ref="formData"
+        label-width="120px"
+        size="small"
+        class="frame"
+      >
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+              label="明细"
+              :label-width="formLabelWidth"
+              prop="category"
+            >
+              <el-input
+                v-model="formData.category"
+                autocomplete="off"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="备注"
+              :label-width="formLabelWidth"
+              prop="remark"
+            >
+              <el-input v-model="formData.remark" autocomplete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('formData')" size="small">取 消</el-button>
+        <el-button type="primary" @click="submitForm('formData')" size="small"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  <script>
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+import CommonUtil from "@/utils/comutil.js";
+
+export default {
+  name: "ExpenseMessage",
+  components: { KtCommonTable, KtButton },
+  created() {
+    // this.business();
+  },
+  mounted() {
+    this.findPage();
+  },
+  data() {
+    return {
+      title: "新增明细",
+      tableData: [], //表格数据
+      button3Name: "删除",
+      button3Background: "rgb(222, 80, 76)",
+      button2Background: "rgb(14, 194, 22)",
+      button2Name: "新建子类",
+      dialogFormVisible: false, //弹出框状态
+      formLabelWidth: "120px",
+      formData: {
+        category: "", //明细
+        remark: "", //备注
+      },
+      rules: {
+        category: [
+          { required: true, message: "明细不能为空", trigger: "blur" },
+        ],
+      },
+      formDataId: "", //编辑id
+      parentId: "", //新建子类父id
+    };
+  },
+  watch: {
+    dialogFormVisible(n){
+      if(!n){
+        this.handleClose();
+      }
+    }
+  },
+  methods: {
+    //删除
+    handleDelete(index, row) {
+      let id = row.expensesId;
+      this.$confirm("确认删除该记录吗?", "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.expense.deleteAccountExpenses(id).then((res) => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.findPage();
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    //新建子类
+    addHandeFn(index, row) {
+      this.parentId = row.expensesId;
+      this.dialogFormVisible = true;
+    },
+    //获取列表数据
+    findPage(data) {
+      this.$api.expense
+        .getAccountExpensesTreeList()
+        .then((res) => {
+          this.tableData = res.data;
+        })
+        .then(data != null ? data.callback : "");
+    },
+    //新增事件
+    addAmount() {
+      this.title = "新增明细";
+      this.dialogFormVisible = true;
+    },
+    //弹框取消
+    handleClose() {
+      this.formDataId=""; //编辑id
+      this.parentId=""; //新建子类父id
+      this.dialogFormVisible = false;
+      this.$refs.formData.resetFields();
+    },
+    handleTableDelete(index) {},
+    //新增取消重置
+    resetForm(formData) {
+      this.dialogFormVisible = false;
+      this.$refs[formData].resetFields();
+    },
+    //修改
+    handleTableEdit(index, row) {
+      this.title = "编辑明细";
+      this.formDataId = row.expensesId;
+      this.$api.expense
+        .getAccountExpensesDetail(this.formDataId)
+        .then((res) => {
+          if (res.code == 200) {
+            this.formData = JSON.parse(JSON.stringify(res.data));
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      this.dialogFormVisible = true;
+    },
+    //提交
+    submitForm(formData) {
+      let params = JSON.parse(JSON.stringify(this.formData));
+      if (this.parentId) {
+        params.parentId = this.parentId;
+      }
+      this.$refs[formData].validate((valid) => {
+        if (valid) {
+          if (this.formDataId) {//修改
+            this.$api.expense.updateAccountExpenses(params).then(res=>{
+              if (res.code == 200) {
+                this.$message({
+                  message: "添加成功",
+                  type: "success",
+                });
+              } else {
+                this.$message({
+                  message: `添加失败, ${res.msg}`,
+                  type: "error",
+                });
+              }
+              this.dialogFormVisible = false;
+              this.findPage();
+            })
+          }else{//新增
+            this.$api.expense.insertAccountExpenses(params).then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  message: "添加成功",
+                  type: "success",
+                });
+              } else {
+                this.$message({
+                  message: `添加失败, ${res.msg}`,
+                  type: "error",
+                });
+              }
+              this.dialogFormVisible = false;
+              this.findPage();
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+  
+  <style scoped>
+.operation {
+  margin-left: 14px !important;
+  margin-top: 15px !important ;
+}
+.form {
+  display: flex;
+  margin-top: 14px;
+  align-items: center;
+  margin-left: -12px;
+  margin-bottom: 20px;
+}
+.el-pagination {
+  font-weight: normal;
+}
+.el-card__body {
+  padding: 12px !important;
+}
+.footer .footerdiv {
+  display: flex;
+  align-items: center;
+}
+.container .el-form-item {
+  margin-bottom: -14px !important;
+}
+.form .el-form-item__label {
+  font-size: 15px !important;
+  font-weight: 600 !important;
+}
+
+.ktTable {
+  margin-top: 20px;
+}
+.el-row {
+  margin-top: 18px;
+}
+.top {
+  margin-top: 0px;
+}
+
+.el-date-editor--daterange.el-input__inner {
+  width: 300px;
+}
+/deep/ .el-select--small {
+  width: 100%;
+}
+.frame {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+/deep/ .el-dialog__body {
+  overflow-y: scroll;
+  max-height: 500px;
+}
+.addremove-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 25px;
+  margin-top: 10px;
+  /* position: absolute;
+    bottom:0;
+    left: 0; */
+}
+.addremove-box > i {
+  cursor: pointer;
+}
+.frame >>> .el-date-editor {
+  width: 100%;
+}
+</style>
+  

src/views/FinancialManagement/ExpenseManagement/TransferRecord.vue

@@ -0,0 +1,215 @@
+<template>
+  <!--布局容器-->
+  <div class="container" style="width: 99%; margin-top: 0px">
+    <!-- 顶部查询 -->
+    <el-row class="top">
+      <el-form v-model="pageRequest" size="small" label-width="95px" class="form">
+        <el-form-item label="转账类型" label-width="95px" prop="revenueOutlay">
+          <el-select
+            v-model="pageRequest.revenueOutlay"
+            placeholder="请选择转账类型"
+            clearable
+          >
+            <el-option label="收入" value="0"></el-option>
+            <el-option label="支出" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="queryStaffInfo"
+            >查询</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <!-- 表格 -->
+    <kt-common-table
+      :operationWidth="operationWidth"
+      class="ktTable"
+      permsEdit="sys:agent:view"
+      ref="dataTable"
+      :data="pageResult"
+      :columns="columns"
+      :showBatchDelete="false"
+      :showOperation="false"
+      @findPage="findPage"
+      :isshowpagination="true"
+    ></kt-common-table>
+  </div>
+</template>
+    <script>
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+import CommonUtil from "@/utils/comutil.js";
+
+export default {
+  name: "InvoiceInformation",
+  components: { KtCommonTable, KtButton },
+  created() {
+    this.business();
+  },
+  mounted() {},
+  data() {
+    return {
+      queryFrom: {
+        //查询条件
+        revenueOutlay:""
+      },
+      pageResult: {}, //表格参数
+      pageRequest: {
+        // 列表查询条件
+        pageNo: 1,
+        pageSize: 10,
+      },
+      columns: [
+        // 数据列
+        {
+          prop: "revenueOutlayName",
+          label: "转账类型",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "company",
+          label: "支出单位",
+          minWidth: 150,
+          sortable: false,
+        },
+        { prop: "fundFlow", label: "资金流向", minWidth: 260, sortable: false },
+        {
+          prop: "payMethod",
+          label: "支付方式",
+          minWidth: 150,
+          sortable: false,
+        },
+        { prop: "applyAmount", label: "金额", minWidth: 150, sortable: false },
+        {
+          prop: "bigApplyAmount",
+          label: "大写金额",
+          minWidth: 150,
+          sortable: false,
+        },
+      ],
+      dictionariesData: [], //账户性质数据字典
+    };
+  },
+  methods: {
+    //获取页面数据
+    findPage(data) {
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNo = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      this.$api.expense
+        .getAccountOperate(this.pageRequest)
+        .then((res) => {
+          res.data.records.forEach((item) => {
+            item.revenueOutlayName = item.revenueOutlay == 0 ? "收入" : "支出";
+          });
+          this.pageResult = {
+            content: res.data.records,
+            pageNum: res.data.current,
+            pageSize: res.data.size,
+            totalPages: res.data.pages,
+            totalSize: res.data.total,
+          };
+        })
+        .then(data != null ? data.callback : "");
+    },
+    //数据字典
+    business() {
+      let typeName = "account_quality";
+      this.$api.dict.findByLableName(typeName).then((res) => {
+        this.dictionariesData = res.data;
+      });
+    },
+    // 查询
+    queryStaffInfo() {
+      this.findPage();
+    },
+  },
+};
+</script>
+    
+    <style scoped>
+.operation {
+  margin-left: 14px !important;
+  margin-top: 15px !important ;
+}
+.form {
+  display: flex;
+  margin-top: 14px;
+  align-items: center;
+  margin-left: -12px;
+  margin-bottom: 20px;
+}
+.el-pagination {
+  font-weight: normal;
+}
+.el-card__body {
+  padding: 12px !important;
+}
+.footer .footerdiv {
+  display: flex;
+  align-items: center;
+}
+.container .el-form-item {
+  margin-bottom: -14px !important;
+}
+.form .el-form-item__label {
+  font-size: 15px !important;
+  font-weight: 600 !important;
+}
+
+.ktTable {
+  margin-top: 20px;
+}
+.el-row {
+  margin-top: 18px;
+}
+.top {
+  margin-top: 0px;
+}
+
+.el-date-editor--daterange.el-input__inner {
+  width: 300px;
+}
+/deep/ .el-select--small {
+  width: 100%;
+}
+.frame {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+/deep/ .el-dialog__body {
+  overflow-y: scroll;
+  max-height: 500px;
+}
+.addremove-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 25px;
+  margin-top: 10px;
+  /* position: absolute;
+      bottom:0;
+      left: 0; */
+}
+.addremove-box > i {
+  cursor: pointer;
+}
+.frame >>> .el-date-editor {
+  width: 100%;
+}
+</style>
+