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
    >
    <!-- 表格 -->
    <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>