vue-insagent-pc/src/views/FinancialManagement/ExpenseManagement/ExpenseManagement.vue

<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
    >
    <!-- 表格 -->
    <el-table
      :data="accountData"
      border
      size="small"
      ref="account"
      :header-cell-style="{
        background: '#F2F7FC',
        fontWeight: '900',
        color: '#606266',
      }"
      height="600px"
      style="width: 100%; margin-top: 30px"
      @expand-change="handleRowChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            :data="scope.row.invAccountCardList"
            size="small"
            :header-cell-style="{
              background: '#ccc',
              fontWeight: '900',
              color: '#606266',
            }"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="50"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              v-for="(childItem, index) in childColums"
              :key="'child' + index"
              :prop="childItem.prop"
              align="center"
              :label="childItem.label"
              :min-width="childItem.minWidth"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="300"
            >
              <template slot-scope="scopes">
                <el-button size="mini" @click="childEdit(scopes.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="cardDelete(scopes.row)"
                  >删除</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  @click="handleTableIncome(scope.row, scopes.row)"
                  >收入</el-button
                >
                <el-button
                  size="mini"
                  type="warning"
                  @click="handleTableExpend(scopes.row)"
                  >支出</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(dataItem, dataIndex) in columns"
        :key="dataIndex"
        :label="dataItem.label"
        :prop="dataItem.prop"
        :min-width="dataItem.minWidth"
        align="center"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="240">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click.native.prevent="handleTableEdit(scope.row, scope)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click.native.prevent="handleTableDelete(scope.row)"
            >删除</el-button
          >
          <el-tooltip
            class="item"
            effect="dark"
            content="新增卡信息"
            placement="bottom-end"
          >
            <el-button
              size="mini"
              type="success"
              @click.native.prevent="handleTableAdd(scope.row)"
              >新增</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="refreshPageRequest"
      :current-page="pageRequest.pageNo"
      :page-size="pageRequest.pageSize"
      :page-sizes="[10, 20, 50, 100, 200, 300, 400, 500]"
      :total="pageRequest.totalSize"
      style="float: left; margin-left: 20px; margin-top: 20px"
    >
    </el-pagination>
    <!-- 新增修改弹框 -->
    <expense-component
      ref="expenseComponent"
      :type="type"
      :formData="type == 1 ? accountFormData : accountCardFormData"
      :formDataId="formDataId"
      :title="title"
      :dialogFormVisible="dialogFormVisible"
      :nature_businessData="nature_businessData"
      @resetForm="resetForm"
      @submitForm="submitForm"
      @setDateInterval="setDateInterval"
    ></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="payMethod">
              <el-select
                v-model="inComeFormData.payMethod"
                multiple
                placeholder=""
              >
                <el-option
                  v-for="item in payment_methodsData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-select
                v-model="inComeFormData.remark"
                allow-create
                filterable
                placeholder=""
              >
                <el-option
                  v-for="item in use_fundsData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="资金用途" prop="fundUse">
              <el-cascader
                v-model="inComeFormData.fundUse"
                :show-all-levels="false"
                :clearable="true"
                :checkStrictly="true"
                :emitPath="false"
                placeholder=""
                :options="fundFlowData"
                filterable
                :props="{
                  children: 'child',
                  label: 'category',
                  value: 'category',
                  checkStrictly: true,
                }"
              ></el-cascader>
            </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"; //新增账户信息弹框
import { toChies } from "../../../utils/moneyTransition";

export default {
  name: "ExpenseManagement",
  components: { KtCommonTable, KtButton, ExpenseComponent },
  created() {
    this.business("account_quality"); //账户性质字典;
    this.business("use_funds"); //备注字典
    this.business("payment_methods"); //支付方式字典
    this.business("nature_business"); //营业性质字典
    this.getTreeList(); //获取资金用途字典
  },
  mounted() {},
  data() {
    return {
      type: 1, //1为账户信息，2为卡信息
      /**
       * 账户收入模块
       */
      incomeDialogVisible: false, //收入 弹出框状态
      collectionData: [], //收入  转账方下拉菜单数组
      fundFlowData: [], //资金用途字典数据
      use_fundsData: [], //收入  备注字典数据
      payment_methodsData: [], //收入  支付方式字典数据
      inComeFormData: {
        //收入form表单
        collectionMessage: "", //收款名字
        fundFlow: "", //资金流向
        applyAmount: "", //金额
        bigApplyAmount: "", //大写金额
        remark: "", //备注
        company: "", //转账方
        payMethod: [], //转账方
        fundUse: "", //资金用途
      },
      inComeFormRules: {
        //收入规则
        company: [
          { required: true, message: "转账方不能为空", trigger: "change" },
        ],
        remark: [{ required: true, message: "请选择备注", trigger: "change" }],
        payMethod: [
          { required: true, message: "请选择支付方式", trigger: "change" },
        ],
      },
      enterCardId: "", //收入id
      /**
       * 账户模块
       */
      title: "新增账户信息",
      accountData: [], //账户信息数据
      dialogFormVisible: false, //弹出框状态
      operationWidth: 200, //操作列宽度
      account_qualityData: [], //账户性质数据字典
      nature_businessData: [], //营业性质数据字典
      queryFrom: {
        //查询条件
        // accountQuality: "", //账户性质查询
        bankCardNum: "", //银行卡号查询
        accountName: "", //户名查询
      },
      button1Name: "支出", //按钮内容
      button3Name: "删除",
      button2Name: "收入",
      expendButton1Name: "确认已转账",
      formDataId: "", //数据Id
      pageRequest: {
        // 列表查询条件
        pageNo: 1,
        pageSize: 10,
      },
      // 数据列
      columns: [
        {
          prop: "outerFlagName",
          label: "账户类别",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "businessQualityName",
          label: "营业性质",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "accountName",
          label: "户名",
          minWidth: 240,
          sortable: false,
        },
        {
          prop: "juridicalPerson",
          label: "法人",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "owned",
          label: "所属地",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "biller",
          label: "开票员",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "invoicingAmount",
          label: "开票额度",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "invoicingAmountExcess",
          label: "剩余开票额度",
          minWidth: 90,
          sortable: false,
        },
        {
          prop: "establishTime",
          label: "成立日期",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "quarterAmountExcess",
          label: "季度开票额度",
          minWidth: 120,
          sortable: false,
        },
        {
          prop: "sumInvoicingAmount",
          label: "总开票额度",
          minWidth: 120,
          sortable: false,
        },
        {
          prop: "tentativeEstimates",
          label: "暂估",
          minWidth: 120,
          sortable: false,
        },
      ],
      //子部数据列
      childColums: [
        {
          prop: "accountQualityName",
          label: "账户性质",
          minWidth: 80,
          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,
        },
      ],
      //账户信息form
      accountFormData: {
        outerFlag: "0", //账户类别
        accountName: "", //户名
        businessQuality: "", //营业性质
        establishTime: "", //成立日期
        invoicingAmount: 0, //开票额度
        // invoicingAmountExcess:0,//剩余开票额度
        juridicalPerson: "", //法人
        owned: "", //所属地
        biller: "", //开票员
        tentativeEstimates: "", //暂估值
      },
      //账户卡信息form
      accountCardFormData: {
        accountQuality: "", //账户性质
        bankCardNum: "", //银行卡号
        bank: "", //开户行
        bankName: "", //开户行名称
        bankNum: "", //开户行号
        balance: "", //余额
        certExpirationDate: "", //证书有效期
        clearingProfit: 0, //结算卡
        dayStrokeNum: 0, //单日转账笔数限制
        dayStrokeNumExcess: 0, //单日转账笔数剩余
        exteriorProfit: 0, //外部过账金额
        fiscalProfit: 0, //	财务公司利润
        insuranceProfit: 0, //保险公司回款
        otherProfit: 0, //其他利润
        parkProfit: 0, //园区利润
        priDayLines: 0, //对私单日限额
        priDayLinesExcess: 0, //对私单日限额剩余
        priSingleLines: 0, //对私单笔限额
        priYearExcess: 0, //对私年剩余额度
        priYearLines: 0, //对私年额度
        pubDayLines: 0, //对公单日限额
        pubDayLinesExcess: 0, //对公单日限额剩余
        pubSingleLines: 0, //对公单笔限额
        pubYearExcess: 0, //对公年剩余额度
        pubYearLines: 0, //对公年额度
        spend: 0, //支出金额
        tianqinProfit: 0, //天勤利润
      },
      /**
       * 支出模块
       */
      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, //支出弹出框状态
      outCardNum: "", //点击支出按钮当条数据支出id
      companyItem: {}, //选择单位整条数据
      typeName: "card", //账户信息 跟 卡信息
    };
  },
  watch: {
    expendDialogVisible(n) {
      if (n == false) {
        this.outCardNum = "";
      }
    },
    //收入去除form表单信息
    incomeDialogVisible(n) {
      if (n == false) {
        this.enterCardId = "";
        this.$refs.inComeFormData.clearValidate();
        this.inComeFormData = {
          //收入form数据
          collectionMessage: "", //收款名字
          fundFlow: "", //资金流向
          applyAmount: "", //金额
          bigApplyAmount: "", //大写金额
          remark: "", //备注
          company: "", //转账方
          payMethod: [], //支付方式
        };
      }
    },
  },
  methods: {
    //获取资金用途树数据
    getTreeList() {
      this.$api.expense.getAccountExpensesTreeList().then((res) => {
        this.fundFlowData = res.data;
      });
    },
    //展开事件
    handleRowChange(e, row) {
      if (row.length > 0) {
        //展开
        if (
          e.invAccountCardList != null &&
          e.invAccountCardList != "" &&
          e.invAccountCardList != undefined &&
          e.invAccountCardList.length > 0
        ) {
        } else {
          this.$message.error("暂无数据");
          this.$refs.account.toggleRowExpansion(e, false);
        }
      }
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.pageRequest.pageNo = pageNum;
      this.findPage();
    },
    // 每页条数发生改变
    handleSizeChange(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    },
    //申请金额填写完成后
    chageAppl(e) {
      this.inComeFormData.bigApplyAmount = toChies(
        this.inComeFormData.applyAmount
      );
    },
    //获取所有外部账户信息
    getAllUser() {
      this.$api.expense.getAccountByAccountName().then((res) => {
        if (res.code == 200) {
          let arr = [];
          /**获取所有外部用户 */
          let outArr = res.data.filter((item) => item.outerFlag == 1);
          outArr.forEach((item) => {
            if (item.invAccountCardList != null) {
              item.invAccountCardList.forEach((it) => {
                it.name =
                  (item.outerFlag == 0 ? "内部用户" : "外部用户") +
                  "   " +
                  (it.accountQuality == 0 ? "公户" : "私户") +
                  "   " +
                  item.accountName +
                  "   " +
                  it.bankCardNum +
                  "   " +
                  it.bank;
                it.nameValue =
                  item.accountName + "   " + it.bankCardNum + "   " + it.bank;
              });
              arr.push(...item.invAccountCardList);
            }
          });
          this.collectionData = arr;
        }
      });
    },
    //选择收款单位change事件
    companyChange(val) {
      const item = this.collectionData.find((item) => item.accountId === val);
      this.companyItem = item;
    },
    //点击确认收入事件
    submitIncomeForm() {
      let obj = JSON.parse(JSON.stringify(this.inComeFormData));
      obj.enterCardId = this.enterCardId;
      obj.fundFlow = obj.company + "→" + obj.collectionMessage;
      obj.payMethod = obj.payMethod.join(",");
      obj.revenueOutlay = "0";
      obj.fundUse = obj.fundUse[obj.fundUse.length - 1]; //资金用途
      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(row, rows) {
      if (row.outerFlag == 1) {
        this.$message.error("请选择内部账户");
        return;
      }
      this.getAllUser();
      this.enterCardId = rows.bankCardNum;
      this.inComeFormData.collectionMessage =
        row.accountName + "   " + rows.bankCardNum + "   " + rows.bank;
      this.incomeDialogVisible = true;
    },
    //点击页面支出按钮
    handleTableExpend(row) {
      if (row.outerFlag == 1) {
        this.$message.error("请选择内部账户");
        return;
      }
      this.expendDialogVisible = true;
      this.outCardNum = row.bankCardNum;
      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,
        outCardNum: this.outCardNum,
      };
      this.$api.expense
        .getAccountExcel(obj)
        .then((res) => {
          res.data.records.forEach((element) => {
            element.transferFlagName =
              element.transferFlag == 0 ? "已转账" : "未转账";
          });
          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.accountCardFormData.startCertExpirationDate = e[0];
        this.accountCardFormData.endCertExpirationDate = e[1];
      } else {
        this.accountCardFormData.startCertExpirationDate = "";
        this.accountCardFormData.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) => {
          if (res.code == 200) {
            res.data.records.forEach((element) => {
              if (element != null && element != "" && element != undefined) {
                //转化营业性质
                let quality = this.nature_businessData.find(
                  (item) => item.value == element.businessQuality
                );
                if (quality != null && quality != "" && quality != undefined) {
                  element.businessQualityName = quality.label;
                } else {
                  element.businessQualityName = "";
                }
                element.outerFlagName =
                  element.outerFlag == 0 ? "内部账户" : "外部账户";
                if (element.invAccountCardList != null) {
                  element.invAccountCardList.forEach((inv) => {
                    inv.outerFlag = element.outerFlag;
                    inv.accountQualityName = this.dictFn(inv, 1); //转化账户性质
                  });
                }
              }
            });
            this.accountData = res.data.records;
            this.pageRequest.pageNo = res.data.current;
            this.pageRequest.pageSize = res.data.size;
            this.pageRequest.totalPages = res.data.pages;
            this.pageRequest.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;
        if (typeName == "account_quality" && this.accountData.length == 0) {
          this.findPage();
        }
      });
    },
    //用户性质转换
    dictFn(obj, type) {
      if (obj.accountQuality == null) {
        return;
      }
      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.type = 1;
      this.dialogFormVisible = true;
    },
    //卡删除数据事件
    cardDelete(row) {
      this.$confirm("确认删除该条数据吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense.deleteAccountCard(row.bankCardNum).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.findPage();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    //账户删除数据事件
    handleTableDelete(row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense.deleteAccount(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 = "";
      if (this.type == 1) {
        this.accountFormData = {
          outerFlag: "0", //账户类别
          accountName: "", //户名
          businessQuality: "", //营业性质
          establishTime: "", //成立日期
          invoicingAmount: 0, //开票额度
          // invoicingAmountExcess:0,//剩余开票额度
          juridicalPerson: "", //法人
          owned: "", //所属地
          tentativeEstimates: "", //暂估值
        };
      } else {
        this.accountCardFormData = {
          accountQuality: "", //账户性质
          bankCardNum: "", //银行卡号
          bank: "", //开户行
          bankName: "", //开户行名称
          bankNum: "", //开户行号
          balance: 0, //余额
          certExpirationDate: "", //证书有效期
          clearingProfit: 0, //结算卡
          dayStrokeNum: 0, //单日转账笔数限制
          dayStrokeNumExcess: 0, //单日转账笔数剩余
          exteriorProfit: 0, //外部过账金额
          fiscalProfit: 0, //	财务公司利润
          insuranceProfit: 0, //保险公司回款
          otherProfit: 0, //其他利润
          parkProfit: 0, //园区利润
          priDayLines: 0, //对私单日限额
          priDayLinesExcess: 0, //对私单日限额剩余
          priSingleLines: 0, //对私单笔限额
          priYearExcess: 0, //对私年剩余额度
          priYearLines: 0, //对私年额度
          pubDayLines: 0, //对公单日限额
          pubDayLinesExcess: 0, //对公单日限额剩余
          pubSingleLines: 0, //对公单笔限额
          pubYearExcess: 0, //对公年剩余额度
          pubYearLines: 0, //对公年额度
          spend: 0, //支出金额
          tianqinProfit: 0, //天勤利润
        };
      }
    },
    //卡信息修改事件
    childEdit(row) {
      this.type = 2; //卡信息
      this.title = "编辑账户卡信息";
      this.formDataId = row.accountId;
      this.$api.expense
        .getAccountCardList({
          accountId: row.accountId,
          bankCardNum: row.bankCardNum,
          bank: row.bank,
        })
        .then((res) => {
          if (res.code == 200) {
            if (
              res.data[0].startCertExpirationDate &&
              res.data[0].startCertExpirationDate != null &&
              res.data[0].endCertExpirationDate &&
              res.data[0].endCertExpirationDate != null
            ) {
              res.data[0].certExpirationDate = [
                res.data[0].startCertExpirationDate,
                res.data[0].endCertExpirationDate,
              ];
            }else{
              res.data[0].certExpirationDate = [];
            }
            this.accountCardFormData = res.data[0];
            this.accountCardFormData.outerFlag = row.outerFlag;
            this.dialogFormVisible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //账户卡信息增加
    handleTableAdd(row) {
      this.type = 2; //卡信息
      this.title = "新增账户卡信息";
      this.dialogFormVisible = true;
      this.accountCardFormData.accountId = row.accountId;
      this.accountCardFormData.outerFlag = row.outerFlag;
    },
    //账户信息修改
    handleTableEdit(row, scope) {
      this.type = 1; //账户类型
      this.formDataId = row.accountId;
      this.$api.expense
        .getAccount({ accountId: this.formDataId })
        .then((res) => {
          if (res.code == 200) {
            this.accountFormData = JSON.parse(
              JSON.stringify(res.data.records[0])
            );
          } else {
            this.$message.error(res.msg);
          }
        });
      this.title = "编辑账户信息";
      this.dialogFormVisible = true;
    },
    //提交
    submitForm() {
      if (this.type == 1) {
        //新增修改账户信息
        let params = JSON.parse(JSON.stringify(this.accountFormData));
        if (this.formDataId) {
          //修改
          params.accountId = this.formDataId;
          // delete params.invAccountCardList;
          this.$api.expense.updateAccoount(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.findPage();
              this.resetForm();
            } else {
              this.$message({
                message: `修改失败, ${res.msg}`,
                type: "error",
              });
            }
          });
        } else {
          //新增
          this.$api.expense.insertAccount(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.findPage();
              this.resetForm();
            } else {
              this.$message({
                message: `添加失败, ${res.msg}`,
                type: "error",
              });
            }
          });
        }
      } else {
        //新增修改卡信息
        let params = JSON.parse(JSON.stringify(this.accountCardFormData));
        delete params.certExpirationDate;
        //修改
        if (this.formDataId) {
          this.$api.expense.updateAccountCard(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.findPage();
              this.resetForm();
            } else {
              this.$message({
                message: `修改失败, ${res.msg}`,
                type: "error",
              });
            }
          });
          //新增
        } else {
          this.$api.expense.insertAccountCard(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.findPage();
              this.resetForm();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      }
    },
  },
};
</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;
}
.expendDialog >>> .cell .el-button {
  width: auto;
}
</style>