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

<template>
  <!--布局容器-->
  <div class="container" style="width: 99%; margin-top: 0px">
    <!-- 顶部查询 -->
    <el-row class="top">
      <el-form v-model="pageRequest" size="small" class="form" label-width="100px">
        <el-form-item label="发票类型"  prop="invoiceType">
          <el-select
            v-model="pageRequest.invoiceType"
            placeholder="请选择发票类型"
            clearable
          >
            <el-option
              v-for="item in invoice_typeData"
              :key="item.value + 'km'"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开票员" prop="biller">
          <el-input
            v-model="pageRequest.biller"
            placeholder="请输入开票员"
            class=""
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="开票方" prop="invoiceBy">
          <el-input
            v-model="pageRequest.invoiceBy"
            placeholder="请输入开票方"
            class=""
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="对方单位名称" prop="otherUnit">
          <el-input
            v-model="pageRequest.otherUnit"
            placeholder="请输入对方单位名称"
            class=""
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="开票日期" prop="invoiceTime">
          <el-date-picker
            v-model="pageRequest.invoiceTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="进账日期" prop="applyTime">
          <el-date-picker
            v-model="pageRequest.applyTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          ><el-button
            type="primary"
            style="margin-left: 20px"
            size="small"
            @click="queryStaffInfo"
            >查询</el-button
          >
        </el-form-item>
        <el-button
          class="operation"
          type="primary"
          plain
          size="medium"
          @click="addPayment"
          >开票新增</el-button
        >
        <el-button
          class="operation"
          type="primary"
          plain
          size="medium"
          @click="expentData"
          >导出</el-button
        >
      </el-form>
      <!-- 合计 -->
      <div style="margin-top: 20px">
        <el-descriptions title="" size="mini" border>
          <el-descriptions-item label="开票金额总和">{{
            allNumObj.invoiceMoneySum
          }}</el-descriptions-item>
          <el-descriptions-item label="进账金额总和">{{
            allNumObj.payoutMoneySum
          }}</el-descriptions-item>
          <el-descriptions-item label="未进账金额总和">{{
            allNumObj.notPayoutMoneySum
          }}</el-descriptions-item>
          <el-descriptions-item label="开票数总和">{{
            allNumObj.invoiceNumSum
          }}</el-descriptions-item>
          <el-descriptions-item label="税额总和">{{
            allNumObj.taxSum
          }}</el-descriptions-item>
          <el-descriptions-item label="不含税金额总和">{{
            allNumObj.noHasTaxSum
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-row>

    <!-- 表格 -->
    <kt-common-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      :operationWidth="operationWidth"
      class="ktTable"
      permsEdit="sys:agent:view"
      ref="dataTable"
      :data="pageResult"
      :columns="columns"
      :showBatchDelete="false"
      :showOperation="true"
      editButtonName="进账"
      button3Name="撤销"
      button2Name="编辑"
      button4Name="记录"
      button3Icon="fa fa-trash"
      button4Icon="el-icon-s-order"
      button4Background="#67C23A"
      button3Background="#f56c6c"
      button2Background="#E6A23C"
      @handleButton4="handleTableDetail"
      @handleButton3="handleTableDelete"
      @handleButton2="handleDetail($event, 1)"
      @handleEdit="handleDetail($event, 2)"
      @findPage="findPage"
      :isshowpagination="true"
    ></kt-common-table>
    <!-- 新增编辑弹框 -->
    <el-dialog
      class="dialog detailtTable"
      :title="title"
      :close-on-click-modal="false"
      :before-close="resetForm"
      :visible.sync="detailDialog"
      width="60%"
    >
      <div class="dialog-body">
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="130px"
          size="small"
          :class="formDataId ? 'data_form' : 'frame data_form'"
        >
          <div v-if="!formDataId || (typeStatus == 1 && formDataId)">
            <el-row>
              <el-col :span="12">
                <el-form-item label="开票方" prop="invoiceBy">
                  <el-select
                    v-model="formData.invoiceBy"
                    filterable
                    placeholder=""
                    clearable
                    value-key="bankCardNum"
                    @change="companyChange"
                  >
                    <el-option
                      v-for="(item, index) in collectionData"
                      :key="index + 'kpf'"
                      :label="item.name"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收入卡号" prop="revBankCardNum">
                  <el-input
                    disabled
                    v-model="formData.revBankCardNum"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开票员" prop="biller">
                  <el-input
                    disabled
                    v-model="formData.biller"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开票金额" prop="invoiceMoney">
                  <el-input-number
                    v-model="formData.invoiceMoney"
                    :min="-99999999999999999"
                    :max="99999999999999999"
                    label=""
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发票数" prop="invoiceNum">
                  <el-input-number
                    v-model="formData.invoiceNum"
                    :min="0"
                    :max="99999999999999999"
                    label=""
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col class="invoic" :span="12">
                <el-form-item label="开票科目" prop="invoiceSubjectsValue">
                  <el-input
                    v-model="formData.invoiceSubjects1"
                    autocomplete="off"
                  ></el-input>
                  <span>*</span>
                  <el-input
                    v-model="formData.invoiceSubjects2"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发票类型" prop="invoiceType">
                  <el-select
                    v-model="formData.invoiceType"
                    placeholder="请选择发票类型"
                    clearable
                  >
                    <el-option
                      v-for="item in invoice_typeData"
                      :key="item.value + 'km'"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开票日期" prop="invoiceTime">
                  <el-date-picker
                    v-model="formData.invoiceTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对方单位" prop="otherUnit">
                  <el-select
                    v-model="formData.otherUnit"
                    filterable
                    placeholder=""
                    clearable
                    value-key="bankCardNum"
                    @change="outherChange"
                  >
                    <el-option
                      v-for="(item, index) in allCollectionData"
                      :key="index + 'kpf'"
                      :label="item.name"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支出卡号" prop="outBankCardNum">
                  <el-input
                    disabled
                    v-model="formData.outBankCardNum"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="税率(%)" prop="rate">
                  <el-input-number
                    v-model="formData.rate"
                    :min="0"
                    :max="60"
                    label=""
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-if="typeStatus == 2 && formDataId">
            <el-row>
              <el-col :span="12">
                <el-form-item label="进账金额" prop="payoutMoney">
                  <el-input-number
                    v-model="formData.payoutMoney"
                    :min="1"
                    :max="99999999999999999"
                    label=""
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="进账日期" prop="payoutTime">
                  <el-date-picker
                    v-model="formData.payoutTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="支付方式" prop="payMethod">
                  <el-select
                    v-model="formData.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="fundUse">
                  <el-cascader
                    v-model="formData.fundUse"
                    :show-all-levels="true"
                    :clearable="true"
                    :checkStrictly="true"
                    :emitPath="false"
                    placeholder=""
                    :options="fundFlowData"
                    filterable
                    :props="{
                      children: 'child',
                      label: 'category',
                      value: 'category',
                      checkStrictly: false,
                    }"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="text-align: center"
                ><h3 style="margin-left: 120px">收入方资金归属</h3>
              </el-col>
              <el-col :span="12" style="text-align: center"
                ><h3 style="margin-left: 120px">支出方资金归属</h3>
              </el-col>
            </el-row>
            <el-row class="profit_box">
              <el-col :span="12">
                <el-form-item
                  v-for="item in affiliationData"
                  :key="item.profitId + 'sr'"
                  :label="item.profitName"
                  prop="entProfit"
                >
                  <el-input-number
                    v-model="item.profit"
                    :min="0"
                    placeholder="请输入利润"
                    :max="9999999999999"
                    label=""
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  v-for="item in affiliationData2"
                  :key="item.profitId + 'zc'"
                  :label="item.profitName"
                  prop="entProfit"
                >
                  <el-input-number
                    v-model="item.profit"
                    :min="0"
                    placeholder="请输入利润"
                    :max="9999999999999"
                    label=""
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small">取 消</el-button>
        <el-button @click="submitInfo" type="primary" size="small">{{
          modelText
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 记录弹框 -->
    <el-dialog
      class="dialog expendDialog"
      title="进账记录"
      :close-on-click-modal="false"
      :before-close="expendResetForm"
      :visible.sync="expendDialogVisible"
      width="70%"
    >
      <!-- 记录表格 -->
      <kt-common-table
        :operationWidth="130"
        class="ktTable expendTable"
        ref="expendTable"
        :data="expendPageResult"
        :columns="expendColumns"
        :showBatchDelete="false"
        :showOperation="true"
        button3Name="撤销"
        button3Icon="fa fa-trash"
        button3Background="#f56c6c"
        @handleButton3="handleTableRepeal"
        @findPage="getRecordData"
        :isshowpagination="true"
      ></kt-common-table>
    </el-dialog>
  </div>
</template>
        <script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
import { toChies } from "../../../utils/moneyTransition"; //金额小写转大写

export default {
  name: "InvoiceInformation",
  components: { KtCommonTable, KtButton },
  created() {
    // this.business("subjects"); //开票科目
    this.business("invoice_type"); //开票类型
    this.business("payment_methods"); //支付方式字典
    this.getTreeList(); //资金用途字典数据
    this.getAffiliationData(); //获取归属数据
  },
  mounted() {
    this.getAllUser();
  },
  data() {
    let invoiceSubjectsRules = (rule, value, callback) => {
      if (!this.formData.invoiceSubjects1 || !this.formData.invoiceSubjects2) {
        callback(new Error("开票科目不能为空！"));
      } else {
        callback();
      }
    };
    return {
      affiliationData: [], //归属字典数据
      affiliationData2: [], //归属字典数据
      allNumObj: {}, //合计对象
      subjectsData: [], //开票科目数据
      invoice_typeData: [], //发票类型数据
      fundFlowData: [], //资金用途字典数据
      payment_methodsData: [], //支付方式数据
      title: "开票新增",
      loading: true,
      detailDialog: false,
      operationWidth: 180, //操作列宽度
      queryFrom: {
        //查询条件
      },
      pageResult: {
        content: [],
      }, //表格参数
      pageRequest: {
        // 列表查询条件
        pageNo: 1,
        pageSize: 20,
        invoiceTime: "", //开票日期
        applyTime: "", //进账日期
        invoiceBy: "", //开票方
        biller: "", //开票员
        invoiceType: "", //开票类型
      },
      columns: [
        { prop: "invoiceId", label: "发票号码", type: "text", minWidth: 160 },
        { prop: "invoiceNum", label: "发票数", type: "text", minWidth: 60 },
        { prop: "invoiceBy", label: "开票方", type: "text", minWidth: 360 },
        {
          prop: "otherUnit",
          label: "对方单位名称",
          type: "text",
          minWidth: 360,
        },
        {
          prop: "invoiceTypeName",
          label: "发票类型",
          type: "text",
          minWidth: 80,
        },
        {
          prop: "invoiceMoney",
          label: "开票金额",
          type: "text",
          minWidth: 100,
        },
        { prop: "invoiceTime", label: "开票日期", type: "text", minWidth: 100 },
        { prop: "biller", label: "开票员", type: "text", minWidth: 70 },
        {
          prop: "invoiceSubjects",
          label: "开票科目",
          type: "text",
          minWidth: 120,
        },
        {
          prop: "payoutMoney",
          label: "进账金额",
          type: "text",
          minWidth: 100,
        },
        {
          prop: "notPayoutMoney",
          label: "未进账金额",
          type: "text",
          minWidth: 100,
        },
        {
          prop: "rate",
          label: "税率(%)",
          type: "text",
          minWidth: 70,
        },
        {
          prop: "tax",
          label: "税额",
          type: "text",
          minWidth: 100,
        },
        {
          prop: "noHasTax",
          label: "不含税金额",
          type: "text",
          minWidth: 100,
        },
        {
          prop: "clearFlagName",
          label: "转账状态",
          type: "text",
          minWidth: 100,
        },
      ],
      detailData: [],
      detailParams: {
        pageNo: 1,
        pageSize: 20,
        teamOrUserFlag: "2",
      },
      modelText: "提 交",
      formData: {
        revBankCardNum: "", //收入卡号
        outBankCardNum: "", //支出卡号
        biller: "", //开票员
        invoiceBy: "", //开票方
        invoiceMoney: "", //开票金额
        invoiceNum: 1, //发票数
        invoiceSubjects: "", //开票科目
        invoiceSubjects1: "", //开票科目
        invoiceSubjects2: "", //开票科目
        invoiceTime: "", //开票日期
        invoiceType: "", //发票类型
        otherUnit: "", //对方单位
        payoutMoney: 0, //进账金额
        rate: 0, //税率
        payoutTime: "", //进账日期
        payMethod: [], //支付方式
        fundUse: "", //资金用途
      },
      rules: {
        //内部表单规则
        invoiceBy: [
          { required: true, message: "请选择开票方", trigger: "change" },
        ],
        invoiceMoney: [
          { required: true, message: "开票金额不能为空", trigger: "change" },
        ],
        invoiceNum: [
          { required: true, message: "发票数不能为空", trigger: "blur" },
        ],
        invoiceSubjects1: [
          { required: true, message: "开票科目不能为空", trigger: "change" },
        ],
        invoiceSubjectsValue: [
          { validator: invoiceSubjectsRules, trigger: "blur" },
        ],
        invoiceType: [
          { required: true, message: "请选择发票类型", trigger: "blur" },
        ],
        otherUnit: [
          { required: true, message: "对方单位不能为空", trigger: "blur" },
        ],
        payoutMoney: [
          { required: true, message: "进账金额不能为空", trigger: "blur" },
        ],
        rate: [{ required: true, message: "税率不能为空", trigger: "blur" }],
        payoutTime: [
          {
            required: true,
            message: "请选择进账日期",
            trigger: "change",
          },
        ],
        payMethod: [
          { required: true, message: "请选择支付方式", trigger: "change" },
        ],
        fundUse: [
          { required: true, message: "请选择资金用途", trigger: "change" },
        ],
        invoiceTime: [
          {
            required: true,
            message: "请选择开票日期",
            trigger: "change",
          },
        ],
      },
      collectionData: [], //所有内部账户信息列表
      allCollectionData: [], //所有账户信息列表
      formDataId: "", //编辑数据id
      profitObj: {},
      typeStatus: "", //1是编辑 2是进账
      /**
       * 记录模块
       */
      expendColumns: [
        //记录表格数据列
        {
          prop: "revenueOutlayName",
          label: "转账类型",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "company",
          label: "支出单位",
          minWidth: 350,
          sortable: false,
        },
        {
          prop: "payMethod",
          label: "支付方式",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "createTime",
          label: "支付时间",
          minWidth: 100,
          sortable: false,
        },
        { prop: "applyAmount", label: "金额", minWidth: 100, sortable: false },
        {
          prop: "fundUse",
          label: "资金用途",
          minWidth: 150,
          sortable: false,
        },
        {
          prop: "fundFen",
          label: "资金用途分项",
          minWidth: 150,
          sortable: false,
        },
      ],
      expendDialogVisible: false, //记录弹框显示状态
      expendPageResult: {
        //记录表格参数
        pageNo: 1,
        pageSize: 20,
      },
      invoiceId: "", //记录id
      num: 1,
    };
  },
  watch: {
    expendDialogVisible(n) {
      if (!n) {
        this.invoiceId = "";
      }
    },
    detailDialog(n) {
      if (!n) {
        this.formData = {
          revBankCardNum: "", //收入卡号
          outBankCardNum: "", //支出卡号
          biller: "", //开票员
          invoiceBy: "", //开票方
          invoiceMoney: 0, //开票金额
          invoiceNum: 1, //发票数
          invoiceSubjects: "", //开票科目
          invoiceTime: "", //开票日期
          invoiceType: "", //发票类型
          otherUnit: "", //对方单位
          payoutMoney: 0, //进账金额
          rate: 0, //税率
          payoutTime: "", //进账日期
          payMethod: [], //支付方式
        };
        //支出收入资金归属值清空
        this.affiliationData.forEach((item) => {
          item.profit = 0;
        });
        this.affiliationData2.forEach((item) => {
          item.profit = 0;
        });
        //支出收入资金归属值清空
        this.formDataId = "";
        this.$nextTick(() => {
          this.$refs.formData.clearValidate();
        });
      }
    },
  },
  methods: {
    /**
     * 撤销转账记录
     */
     handleTableRepeal(index) {
      let row = index.row;
      console.log(row);
      this.$confirm("确认撤销该  “"+row.revenueOutlayName+"”  记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense
            .accountOperateDelete(row.accountOperateId)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("撤销成功");
                this.getRecordData();
              } else {
                this.$message.error(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    //记录弹框取消重置
    expendResetForm() {
      this.expendDialogVisible = false;
    },
    //获取记录列表
    getRecordData(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,
        invoiceId: this.invoiceId,
      };
      this.$api.expense
        .getAccountOperate(obj)
        .then((res) => {
          res.data.records.forEach((item) => {
            if (
              item.revenueOutlay != null &&
              item.revenueOutlay != undefined &&
              item.revenueOutlay != ""
            ) {
              item.revenueOutlayName =
                item.revenueOutlay == 0 ? "收入" : "支出";
            }
          });
          this.expendPageResult = {
            content: res.data.records,
            pageNo: res.data.current,
            pageSize: res.data.size,
            totalPages: res.data.pages,
            totalSize: res.data.total,
          };
        })
        .then(data != null ? data.callback : "");
    },
    //点击记录方法
    handleTableDetail(e) {
      let row = e.row;
      this.expendDialogVisible = true;
      this.invoiceId = row.invoiceId;
      if (this.num > 1) {
        //第一次渲染页面表格组件会自动调用列表方法，所以给个值判断是否是第一次渲染页面只让执行一次
        this.getRecordData();
      }
      this.num++;
    },
    //转换
    businessZh(data, label, value) {
      let obj = data.find((item) => item[value] == label);
      if (obj) {
        return obj;
      } else {
        return {};
      }
    },
    //获取归属数据
    getAffiliationData() {
      this.$api.expense.getList().then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            item.profit = 0;
          });
          this.affiliationData = JSON.parse(JSON.stringify(res.data));
          this.affiliationData2 = JSON.parse(JSON.stringify(res.data));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //导出开票记录
    expentData() {
      let params = {
        ...JSON.parse(JSON.stringify(this.pageRequest)),
      };
      if (params.invoiceTime != null && params.invoiceTime.length > 0) {
        params.invoiceTimeStart = params.invoiceTime[0];
        params.invoiceTimeEnd = params.invoiceTime[1];
      }
      if (params.applyTime != null && params.applyTime.length > 0) {
        params.applyTimeStart = params.applyTime[0];
        params.applyTimeEnd = params.applyTime[1];
      }
      delete params.applyTime;
      delete params.invoiceTime;
      delete params.pageNo;
      delete params.pageSize;
      this.$api.expense.invAccountExcel(params).then((res) => {
        if (res.code == 200) {
          if (res.data == null) {
            this.$message.error("暂无导出数据，请重试！");
            return;
          }
          let url = process.env.BASE_URL + "/upload/" + res.data; // 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);
        }
      });
    },
    //获取资金用途树数据
    getTreeList() {
      this.$api.expense.getAccountExpensesTreeList().then((res) => {
        if (res.code == 200) {
          this.fundFlowData = res.data;
          this.fundFlowSet();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //资金用途数据转换     如果最后一项child数组长度为0把值变为null
    fundFlowSet(data) {
      data = data || this.fundFlowData;
      for (var i = 0; i < data.length; i++) {
        if (data[i].child.length) {
          this.fundFlowSet(data[i].child);
        } else {
          data[i].child = null;
        }
      }
    },
    //撤销开票数据
    handleTableDelete(index) {
      let row = index.row;
      this.$confirm("确认撤销该记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense
            .deleteInvAccountIncoice(row.invoiceId)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("撤销成功");
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    //选择开票方change事件
    companyChange(item) {
      this.formData.revBankCardNum = item.bankCardNum;
      this.formData.biller = item.biller;
      this.formData.accountId = item.accountId;
    },
    //选择开票方change事件
    outherChange(item) {
      this.formData.outBankCardNum = item.bankCardNum;
    },
    //获取所有内部账户信息
    getAllUser() {
      this.$api.expense.getAccountByAccountName().then((res) => {
        if (res.code == 200) {
          let arr = [];
          res.data.forEach((item, index) => {
            if (item.invAccountCardList != null) {
              item.invAccountCardList.forEach((it) => {
                it = { ...it, ...item };
                it.name =
                  (it.outerFlag == 0 ? "内部用户" : "外部用户") +
                  "   " +
                  (it.accountQuality == 0 ? "公户" : "私户") +
                  "   " +
                  it.accountName +
                  "   " +
                  it.bankCardNum +
                  "   " +
                  it.bank;
                it.nameValue = it.name;
                // it.nameValue =
                //   it.accountName + "   " + it.bankCardNum + "   " + it.bank;
                arr.push(it);
              });
            }
          });
          let outArr = arr.filter((item) => item.outerFlag == 0);
          this.allCollectionData = arr;
          this.collectionData = outArr;
        }
      });
    },
    //数据字典
    business(typeName) {
      this.$api.dict.findByLableName(typeName).then((res) => {
        this[typeName + "Data"] = res.data;
        if (
          (typeName == "account_quality" || typeName == "invoice_type") &&
          this.pageResult.content.length == 0
        ) {
          this.findPage();
        }
      });
    },
    //新增开票
    addPayment() {
      this.title = "开票新增";
      this.detailDialog = true;
    },
    //新增编辑开票信息
    submitInfo() {
      let params = JSON.parse(JSON.stringify(this.formData));
      this.$refs.formData.validate((valid) => {
        if (valid) {
          //进账
          if (this.formDataId && this.typeStatus == 2) {
            //转化资金归属
            params.entProfit = {};
            params.outProfit = {};
            this.affiliationData.forEach((item) => {
              params.entProfit[item.profitEng] =
                item.profit == null ? 0 : item.profit;
            });
            this.affiliationData2.forEach((item) => {
              params.outProfit[item.profitEng] =
                item.profit == 0 || item.profit == null ? 0 : item.profit * -1;
            });
            // this.affiliationData.forEach((item) => {
            //   params.entProfit[item.profitEng] = item.profit;
            // });
            // this.affiliationData2.forEach((item) => {
            //   params.outProfit[item.profitEng] = item.profit * -1;
            // });
            //转化资金归属
            let obj = {
              invoiceId: this.formDataId, //id
              payoutMoney: this.formData.payoutMoney, //进账金额
              fundFlow:
                params.otherUnit.nameValue +
                "→" +
                this.formData.invoiceBy.nameValue, //资金流向
              payMethod: params.payMethod.join(","), //支付方式
              fundUse: this.formData.fundUse[this.formData.fundUse.length - 2], //资金用途
              fundFen: this.formData.fundUse[this.formData.fundUse.length - 1], //资金用途分项
              payoutTime: params.payoutTime, //进账日期
              entProfit: params.entProfit, //收入方资金归属
              outProfit: params.outProfit, //支出方资金归属
            };
            this.$api.expense.putInvAccountIncoice(obj).then((res) => {
              if (res.code == 200) {
                this.detailDialog = false;
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
            //编辑
          } else if (this.formDataId && this.typeStatus == 1) {
            params.invoiceBy = this.formData.invoiceBy.nameValue; //开票方
            // params.bigApplyAmount = toChies(params.invoiceMoney); //大写金额
            params.invoiceSubjects =
              params.invoiceSubjects1 + "*" + params.invoiceSubjects2; //开票科目
            params.otherUnit = params.otherUnit.nameValue; //对方单位名称
            params.company = params.otherUnit; //单位
            delete params.payMethod;
            delete params.payoutTime;
            this.$api.expense.updateIncoice(params).then((res) => {
              if (res.code == 200) {
                this.detailDialog = false;
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
            //新增
          } else {
            params.invoiceBy = this.formData.invoiceBy.nameValue; //开票方
            // params.bigApplyAmount = toChies(params.invoiceMoney); //大写金额
            params.invoiceSubjects =
              params.invoiceSubjects1 + "*" + params.invoiceSubjects2; //开票科目
            params.otherUnit = params.otherUnit.nameValue; //对方单位名称
            params.company = params.otherUnit; //单位
            delete params.payMethod;
            delete params.payoutTime;
            this.$api.expense.addInvAccountIncoice(params).then((res) => {
              if (res.code == 200) {
                this.detailDialog = false;
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    //选择时间区间
    dateChange(e) {
      if (e == null) {
        this.pageRequest.createTimeStart = "";
        this.pageRequest.createTimeEnd = "";
      } else {
        this.pageRequest.createTimeStart = e[0];
        this.pageRequest.createTimeEnd = e[1];
      }
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.detailParams.pageNo = pageNum;
      this.getDetailData();
    },
    // 每页条数发生改变
    handleSizeChange(pageSize) {
      this.detailParams.pageSize = pageSize;
      this.getDetailData();
    },
    //取消隐藏弹框
    resetForm() {
      this.detailDialog = false;
      this.detailParams.pageNo = 1;
      this.detailParams.pageSize = 20;
    },
    //编辑按钮
    handleDetail(index, type) {
      this.typeStatus = type;
      let row = index.row;
      if (row.invoiceMoney < 0) {
        this.$message.error("对冲票据，无法进账");
        return;
      }
      this.formDataId = row.invoiceId;
      this.title = type == 1 ? "开票编辑" : "开票进账";
      this.getDetailData(row.invoiceId);
      this.detailDialog = true;
    },
    // 详情接口
    getDetailData(id) {
      this.$api.expense.detailInvAccountIncoice(id).then((res) => {
        if (res.code == 200) {
          let obj = this.collectionData.find(
            (item) => item.bankCardNum == res.data.revBankCardNum
          );
          let obj2 = this.collectionData.find(
            (item) => item.bankCardNum == res.data.outBankCardNum
          );
          if (obj) {
            res.data.invoiceBy = obj;
          }
          if (obj2) {
            res.data.otherUnit = obj2;
          }
          if (this.typeStatus == 1) {
            res.data.invoiceSubjects1 = res.data.invoiceSubjects.split("*")[0];
            res.data.invoiceSubjects2 = res.data.invoiceSubjects.split("*")[1];
          }
          this.formData = JSON.parse(JSON.stringify(res.data));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获取页面数据
    findPage(data) {
      this.loading = true;
      if (data && data.pageRequest) {
        this.pageRequest.pageNo = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      let params = JSON.parse(JSON.stringify(this.pageRequest));
      if (params.invoiceTime != null && params.invoiceTime.length > 0) {
        params.invoiceTimeStart = params.invoiceTime[0];
        params.invoiceTimeEnd = params.invoiceTime[1];
      }
      if (params.applyTime != null && params.applyTime.length > 0) {
        params.applyTimeStart = params.applyTime[0];
        params.applyTimeEnd = params.applyTime[1];
      }
      delete params.invoiceTime;
      delete params.applyTime;
      this.$api.expense
        .getInvAccountIncoice(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.records.forEach((item) => {
              item.clearFlagName = item.clearFlag == 0 ? "未清" : "已清";
              item.invoiceTypeName = this.businessZh(
                this.invoice_typeData,
                item.invoiceType,
                "value"
              )
                ? this.businessZh(
                    this.invoice_typeData,
                    item.invoiceType,
                    "value"
                  ).label
                : "";
            });

            this.pageResult = {
              content: res.data.records,
              pageNum: res.data.current,
              pageSize: res.data.size,
              totalPages: res.data.pages,
              totalSize: res.data.total,
            };
            this.allNumObj = {
              invoiceMoneySum: res.data.invoiceMoneySum,
              invoiceNumSum: res.data.invoiceNumSum,
              noHasTaxSum: res.data.noHasTaxSum,
              notPayoutMoneySum: res.data.notPayoutMoneySum,
              payoutMoneySum: res.data.payoutMoneySum,
              taxSum: res.data.taxSum,
            };
            this.loading = false;
          } else {
            this.$message.error(res.msg);
          }
        })
        .then(data != null ? data.callback : "");
    },
    // 查询
    queryStaffInfo() {
      this.pageRequest.pageNo = 1;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
  },
};
</script>
        
  <style scoped>
.operation {
  margin-left: 14px !important;
  margin-top: 15px !important ;
}
.form {
  display: flex;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
  height: 100px;
}
.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;
}
.data_form >>> .el-select--small,
.data_form >>> .el-cascader--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);
}
.dialog__body {
  height: 450px;
}
.addremove-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  margin-top: 10px;
}
.addremove-box > i {
  cursor: pointer;
}
.data_form >>> .el-date-editor {
  width: 100%;
}
.detailtTable >>> .bottomFixed {
  position: relative !important;
}
.detailtTable >>> .el-table__body-wrapper {
  overflow-y: auto;
  height: 500px;
}
.detailtTable >>> .el-dialog {
  margin-top: 10vh !important;
}
.data_form >>> .el-input-number--small {
  width: 100%;
}
.invoic >>> .el-input {
  width: 45%;
}
.profit_box .el-form-item {
  margin-bottom: 15px !important;
}
.expendDialog >>> .el-dialog__body {
  overflow-y: auto;
  height: 500px;
}
.expendDialog >>> .cell .el-button {
  width: auto;
}
.expendTable >>> .bottomFixed {
  position: static;
  margin-top: 20px;
}
.expendTable >>> .el-table {
  height: 400px !important;
}
.ktTable >>> .el-button span {
  margin-left: 0 !important;
}
</style>