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

<template>
  <div class="table_btnbox">
    <!-- 搜索 -->
    <el-row class="top">
      <el-form v-model="queryFrom" size="small" label-width="120px" class="query-form">
        <el-form-item label="转账状态" prop="transferFlag">
          <el-select v-model="queryFrom.transferFlag" placeholder="请选择转账状态" clearable>
            <el-option label="已转账" value="0"></el-option>
            <el-option label="未转账" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人" prop="applicant">
          <el-input v-model="queryFrom.applicant" placeholder="请输入申请人" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请部门" prop="applySector">
          <el-input v-model="queryFrom.applySector" placeholder="请输入申请部门" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请日期" prop="applyTime">
          <el-date-picker v-model="queryFrom.applyTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="单位" prop="company">
          <el-input v-model="queryFrom.company" placeholder="请输入单位" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="收款单位信息" prop="collectionMessage">
          <el-input v-model="queryFrom.collectionMessage" placeholder="请输入收款单位信息" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请金额（元）" prop="applyTime">
          <el-input v-model="queryFrom.applyAmount" placeholder="请输入金额" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button label="查询" type="primary" perms="expenseManagement:expenseRequest:query" @click="queryStaffInfo" />
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 申请按钮 -->
    <kt-button class="operation" label="资金使用申请单" type="primary" :plain="true"
      perms="expenseManagement:expenseRequest:add" @click="showExpense" />
    <kt-button label="批量导出" type="danger" :disabled="!this.expentList.length"
      perms="expenseManagement:expenseRequest:excel" @click="expendDataup" />
    <!-- 表格 -->
    <kt-common-table :operationWidth="operationWidth" class="ktTable"
      permsEdit="expenseManagement:expenseRequest:update" ref="dataTable" :data="pageResult" :columns="columns"
      editButtonName="编辑" button1Name="删除" permsButton1="expenseManagement:expenseRequest:delete"
      permsButton2="expenseManagement:expenseRequest:details" button2Name="查看" button2Background="#409eff"
      :showBatchDelete="false" :showBatchPrint="true" :showOperation="true" @findPage="findPage"
      :isshowpagination="true" @handleEdit="expendEdit($event, 1)" @handleButton1="expendDelete"
      @handleButton2="expendEdit($event, 2)" @selectionChange="selectionChange" button3Name="支出"
      @handleButton3="expendExpenditure($event)"></kt-common-table>
    <!-- 申请资金弹框 -->
    <el-dialog class="dialog" :title="expendTitle" :close-on-click-modal="false" :before-close="resetForm"
      :visible.sync="expenseDialog" width="60%">
      <div class="dialog-body">
        <el-form :model="tableForm" :rules="tableFormRules" ref="tableForm" label-width="130px" size="small"
          class="tableForm" :disabled="formDisable">
          <el-row>
            <el-col :span="12">
              <el-form-item label="支出单位:" prop="company">
                <el-select v-model="tableForm.company" filterable placeholder="支出单位">
                  <el-option v-for="(item, index) in innerCollectionData" :key="item.accountId + '' + index"
                    :label="item.name" :value="item.bankCardNum">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请人" prop="applicant">
                <el-input type="text" resize="none" v-model="tableForm.applicant"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请部门" prop="applySector">
                <el-input type="text" resize="none" v-model="tableForm.applySector"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请日期" prop="applyTime">
                <el-date-picker v-model="tableForm.applyTime" align="right" type="date" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="collec">
            <el-col :span="12">
              <el-form-item label="收款单位信息" style="width: 100%" prop="collectionMessage">
                <el-select v-model="tableForm.collectionMessage" filterable placeholder="">
                  <el-option v-for="(item, index) in collectionData" :key="item.accountId + 'aa' + index"
                    :label="item.name" :value="item.bankCardNum">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资金用途" prop="fundUse">
                <el-cascader v-model="tableForm.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="24">
              <el-form-item label="资金流程" prop="payMethod" class="paymethod">
                <el-select v-model="tableForm.company" filterable placeholder="" disabled>
                  <el-option v-for="(item, index) in innerCollectionData" :key="item.accountId + '' + index"
                    :label="item.name" :value="item.bankCardNum">
                  </el-option>
                </el-select>
                <i class="el-icon-right"></i>
                <el-select v-model="tableForm.collectionMessage" filterable placeholder="" disabled>
                  <el-option v-for="(item, index) in collectionData" :key="item.accountId + 'aa' + index"
                    :label="item.name" :value="item.bankCardNum">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请金额（元）" prop="applyAmount">
                <el-input-number v-model="tableForm.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 type="text" resize="none" v-model="tableForm.bigApplyAmount" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="支付方式" prop="payMethod">
                <el-checkbox-group v-model="tableForm.payMethod">
                  <el-checkbox v-for="payItem in payment_methodsData" :key="payItem.value" :label="payItem.label"
                    :value="payItem.value" :disabled="payItem.value == 2"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input type="text" resize="none" v-model="tableForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <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 affiliationData2" :key="item.profitId + 'zc'" :label="item.profitName"
                prop="entProfit">
                <el-input-number v-model="item.profit" :min="0" placeholder="请输入利润" :max="999999999999999"
                  label=""></el-input-number>
              </el-form-item>
            </el-col>
            <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="999999999999999"
                  label=""></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small">取 消</el-button>
        <el-button v-if="!formDisable" type="primary" @click="submitForm" size="small">{{ buttonValue }}</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog
      class="dialog"
      :title="expendTitle"
      :close-on-click-modal="false"
      :before-close="resetForm"
      :visible.sync="expenseaaa"
      width="60%"
    > -->
    <!-- <ExpenseManagement></ExpenseManagement> -->
    <!-- </el-dialog> -->
    <!-- 新增账户弹框 -->
    <!-- <expense-component
      ref="expenseComponent"
      :formData="formData"
      :title="title"
      :dialogFormVisible="dialogFormVisible"
      @resetForm="closeForm"
      @submitForm="submitUserForm"
      @setDateInterval="setDateInterval"
      @outChange="outChange"
      class="expense-component"
    ></expense-component> -->
    <el-dialog title="支出" :close-on-click-modal="false" :before-close="closeExpenditure"
      :visible.sync="expenditureVisible" width="30%">
      <div>
        <el-radio-group v-model="expendRadio">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="1">部分支出</el-radio>
        </el-radio-group>
        <el-input v-show="expendRadio" v-model="payOutAmount" placeholder="请输入支出金额"
          style="width: 200px;margin-left: 20px;" size="small"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeExpenditure" size="small">取 消</el-button>
        <el-button v-if="!formDisable" type="primary" @click="submitFormExpend" size="small">确定支出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ExpenseComponent from "./ExpenseComponent.vue"; //新增账户信息弹框
// import ExpenseManagement from "./ExpenseManagement.vue"; //新增账户信息
import KtButton from "@/views/Core/KtButton"; // 按钮权限组件

import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import { toChies, convertPositive } from "../../../utils/moneyTransition";
export default {
  name: "ExpenseApplyFor",
  components: { KtCommonTable, ExpenseComponent, KtButton },
  data() {
    //开票金额自定义校验
    let applyAmountRules = (rule, value, callback) => {
      if (value == 0) {
        callback(new Error("申请金额不能小于0"));
      } else {
        callback();
      }
    };
    return {
      expenditureRow: {},
      payOutAmount: 0,    // 已转金额
      expendRadio: 0,
      expenditureVisible: false,
      formDisable: false, //资金申请form表单是否可选状态
      expentList: [], //批量导出数据
      expenseaaa: true,
      expendTitle: "新增资金使用申请单", //弹框标题
      operationWidth: 300, //操作单元格宽度
      queryFrom: {}, //查询form表单
      pageRequest: {
        // 列表查询条件
        pageNo: 1,
        pageSize: 10,
      },
      dialogFormVisible: false, //账户信息弹出框状态
      title: "新增账户信息", //账户信息弹框标题
      expenseDialog: false, //申请单显示状态
      pageResult: {
        //表格参数
        pageNo: 1,
        pageSize: 10,
        content: [],
      },
      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: "", //天勤利润
      },
      columns: [
        // 申请列表表格头部
        {
          prop: "transferFlagName",
          label: "转账状态",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "applicant",
          label: "申请人",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "applySector",
          label: "申请部门",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "applyTime",
          label: "申请日期",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "applyAmount",
          label: "申请金额（元）",
          minWidth: 120,
          sortable: false,
        },
        {
          prop: "bigApplyAmount",
          label: "大写金额",
          minWidth: 150,
          sortable: false,
        },
        {
          prop: "payoutAmount",
          label: "已转金额（元）",
          minWidth: 120,
          sortable: false,
        },
        {
          prop: "company",
          label: "单位",
          minWidth: 260,
          sortable: false,
        },

        {
          prop: "collectionMessage",
          label: "收款单位信息",
          minWidth: 260,
          sortable: false,
        },
        {
          prop: "fundFlow",
          label: "资金流程",
          minWidth: 460,
          sortable: false,
        },
        {
          prop: "fundUse",
          label: "资金用途",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "remark",
          label: "备注",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "payMethod",
          label: "支付方式",
          minWidth: 160,
          sortable: false,
        },
      ],
      pickerOptions: {
        //日期快捷键
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      payment_methodsData: [], //支付方式字典数据
      affiliationData: [], //归属字典数据
      affiliationData2: [], //归属字典数据
      collectionData: [], //收款单位信息数据
      innerCollectionData: [], //内部账户单位信息数据
      account_qualityData: [], //账户性质字典
      fundFlowData: [], //资金用途字典数据
      tableFormRules: {
        //资金申请单规则
        company: [
          {
            required: true,
            message: "请至少选择一个支出单位",
            trigger: "change",
          },
        ],
        applicant: [
          { required: true, message: "申请人不能为空", trigger: "blur" },
        ],
        applySector: [
          { required: true, message: "申请部门不能为空", trigger: "blur" },
        ],
        applyTime: [
          {
            type: "string",
            required: true,
            message: "请选择申请日期",
            trigger: "change",
          },
        ],
        applyAmount: [{ validator: applyAmountRules, trigger: "blur" }],
        remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        collectionMessage: [
          { required: true, message: "请选择收款单位信息", trigger: "change" },
        ],
        fundUse: [
          { required: true, message: "请选择资金用途", trigger: "change" },
        ],
      },
      companyItem: {}, //选择单位整条数据
      collectionMessageItem: {}, //选择收款单位整条数据
      expendDataId: "", //修改时该条数据id
      buttonValue: "导 出", //弹框提交按钮内容
      //新增申请表单form表单
      tableForm: {
        company: "", //单位
        applicant: "", //申请人
        applySector: "", //申请部门
        applyTime: "", //申请日期
        collectionMessage: "", //收款单位信息
        fundFlow: "", //资金流程
        fundUse: "", //资金用途
        remark: "", //备注
        applyAmount: "", //申请金额
        bigApplyAmount: "", //大写金额
        payMethod: [], //支付方式
      },
    };
  },
  watch: {
    expenseDialog(n) {
      if (!n) {
        this.formDisable = false;
        this.$refs.tableForm.resetFields();
        // this.tableForm.payMethod = [
        //   this.payment_methodsData.find((item) => item.value == 2).label,
        // ];
        //清除支出收入方资金归属值
        this.affiliationData.forEach((item) => {
          item.profit = 0;
        });
        this.affiliationData2.forEach((item) => {
          item.profit = 0;
        });
        //清除支出收入方资金归属值
        this.expendDataId = "";
      }
    },
  },
  created() {
    this.business("use_funds"); //备注字典
    this.business("payment_methods"); //支付方式字典
    this.business("account_quality"); //账户性质字典
    this.getTreeList(); //获取资金用途树字典
    this.getAllUser(); //获取所有银行账户信息
    this.getAffiliationData(); //获取归属数据
  },
  mounted() { },
  methods: {
    // 确定支出
    submitFormExpend() {
      const num = this.expenditureRow.applyAmount - this.expenditureRow.payoutAmount
      if (num == 0) {
        this.$message.error('支出金额不足')
        return
      }
      if (this.payOutAmount > num) {
        this.$message.error('支出金额不足')
        return
      }
      if (!this.expendRadio) {
        this.payOutAmount = num
      }
      this.$api.expense.updateExpenditure({
        excelAccountOperateId: this.expenditureRow.excelAccountOperateId,
        payOutAmount: this.payOutAmount
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('支出成功')
          this.queryStaffInfo()
          this.closeExpenditure()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    closeExpenditure() {
      this.expenditureRow = {}
      this.payOutAmount = 0
      this.expendRadio = 0
      this.expenditureVisible = false
    },
    // 支出
    expendExpenditure(e) {
      this.expenditureRow = e.row
      this.expenditureVisible = true
    },
    //表格多选事件
    selectionChange(e) {
      this.expentList = e.map((item) => item.excelAccountOperateId);
    },
    //获取归属数据
    getAffiliationData() {
      this.$api.expense.getList().then((res) => {
        if (res.code == 200) {
          res.data.map((item) => {
            item.profit = 0;
            return item;
          });
          this.affiliationData = JSON.parse(JSON.stringify(res.data));
          this.affiliationData2 = JSON.parse(JSON.stringify(res.data));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //导出公共方法
    expendDataup(e, idList) {
      idList = idList || this.expentList;
      if (idList.length > 5) {
        this.$message.warning('最多可导出5条数据')
        return
      }
      this.$api.expense.excel(idList).then((response) => {
        if (response.code == 200) {
          if (response.data == null) {
            this.$message.error("暂无导出数据，请重试！");
            return;
          }
          let url = process.env.BASE_URL + "/upload/" + response.data; // 3.创建一个临时的url指向blob对象
          // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
          let a = document.createElement("a");
          a.href = url;
          a.click();
          // 5.释放这个临时的对象url
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a); //移除a标签
          this.resetForm();
          this.findPage();
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    //点击编辑按钮
    expendEdit(index, type) {
      let row = index.row;
      if (type == 1) {
        if (row.transferFlag == 0) {
          this.$message.error("已转账数据不能操作");
          return;
        }
      } else {
        this.formDisable = true;
      }

      this.expendDataId = row.excelAccountOperateId;
      this.$api.expense
        .getAccountExcelById(row.excelAccountOperateId)
        .then((res) => {
          if (res.code == 200) {
            this.tableForm = JSON.parse(JSON.stringify(res.data));
            this.tableForm.payMethod = this.tableForm.payMethod.split(",");
            this.tableForm.collectionMessage = res.data.enterCardNum;
            this.tableForm.company = res.data.outCardNum;
            this.tableForm.fundUse = [
              this.tableForm.fundUse,
              this.tableForm.fundFen,
            ];
            //转换资金归属
            for (let key in res.data.outProfit) {
              this.affiliationData2.forEach((item) => {
                if (item.profitEng == key) {
                  item.profit = convertPositive(res.data.outProfit[key] * -1);
                }
              });
            }
            for (let key in res.data.entProfit) {
              this.affiliationData.forEach((item) => {
                if (item.profitEng == key) {
                  item.profit = convertPositive(res.data.entProfit[key]);
                }
              });
            }
            //转换资金归属
          } else {
            this.$message.error(res.msg);
          }
        });
      this.expendTitle = "编辑资金使用申请单";
      this.buttonValue = "确认提交";
      this.expenseDialog = true;
    },
    //删除数据事件
    expendDelete(index) {
      let row = index.row;
      if (row.transferFlag == 0) {
        this.$message.error("已转账数据不能操作");
        return;
      }
      this.$confirm("确认删除该条数据吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense
            .deleteAccountExcel(index.row.excelAccountOperateId)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
        })
        .catch(() => { });
    },
    //获取资金用途树数据
    getTreeList() {
      this.$api.expense.getAccountExpensesTreeList().then((res) => {
        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;
        }
      }
    },
    //搜索列表功能
    queryStaffInfo() {
      this.pageRequest.pageNo = 1;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
    //查询列表
    findPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNo = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      let obj = JSON.parse(
        JSON.stringify({ ...this.queryFrom, ...this.pageRequest })
      );
      if (obj.applyTime != null && obj.applyTime.length > 0) {
        obj.applyTimeStart = obj.applyTime[0];
        obj.applyTimeEnd = obj.applyTime[1];
      }
      delete obj.applyTime;
      this.$api.expense
        .getAccountExcel(obj)
        .then((res) => {
          if (res.code == 200) {
            res.data.records.forEach((element) => {
              element.transferFlagName =
                element.transferFlag == 0 ? "已转账" : "未转账";
            });
            this.pageResult = {
              content: res.data.records,
              pageNum: res.data.current,
              pageSize: res.data.size,
              totalPages: res.data.pages,
              totalSize: res.data.total,
            };
          }
          else {
            this.$message.error(res.msg)
          }

        })
        .then(data != null ? data.callback : "");
    },
    //选择证书有效日期区间
    // setDateInterval(e) {
    //   if (e != null && e != "") {
    //     this.formData.startCertExpirationDate = e[0];
    //     this.formData.endCertExpirationDate = e[1];
    //   } else {
    //     this.formData.startCertExpirationDate = "";
    //     this.formData.endCertExpirationDate = "";
    //   }
    // },
    //新增用户信息提交
    // submitUserForm() {
    //   let params = JSON.parse(JSON.stringify(this.formData));
    //   delete params.certExpirationDate;
    //   //新增
    //   this.$api.expense.insertAccount(params).then((res) => {
    //     if (res.code == 200) {
    //       this.$message({
    //         message: "添加成功",
    //         type: "success",
    //       });
    //     } else {
    //       this.$message({
    //         message: `添加失败, ${res.msg}`,
    //         type: "error",
    //       });
    //     }
    //     this.getAllUser();
    //     this.closeForm();
    //   });
    // },
    //弹框重新赋值
    // outChange(e) {
    //   if (e == 1) {
    //     this.formData = {
    //       outerFlag: e, //账户类别
    //       accountName: this.formData.accountName, //户名
    //       accountQuality: this.formData.accountQuality, //账户性质
    //       bankCardNum: this.formData.bankCardNum, //银行卡号
    //       bank: this.formData.bank, //开户行
    //     };
    //   } else {
    //     this.formData = {
    //       outerFlag: e, //账户类别
    //       accountName: this.formData.accountName, //户名
    //       accountQuality: this.formData.accountQuality, //账户性质
    //       bankCardNum: this.formData.bankCardNum, //银行卡号
    //       bank: this.formData.bank, //开户行
    //       bankName: "", //开户行名称
    //       bankNum: "", //开户行号
    //       certExpirationDate: "", //证书有效期
    //       clearingProfit: "", //结算卡
    //       dayStrokeNum: "", //单日转账笔数限制
    //       exteriorProfit: "", //外部过账金额
    //       fiscalProfit: "", //财税公司利润
    //       insuranceProfit: "", //保险公司回款
    //       otherProfit: "", //其他利润
    //       parkProfit: "", //园区利润
    //       priDayLines: "", //对私单日限额
    //       priSingleLines: "", //对私单笔限额
    //       priYearExcess: "", //对私年剩余额度
    //       priYearLines: "", //对私年额度
    //       pubDayLines: "", //对公单日限额
    //       pubSingleLines: "", //对公单笔限额
    //       pubYearExcess: "", //对公年剩余额度
    //       pubYearLines: "", //对公年额度
    //       tianqinProfit: "", //天勤利润
    //     };
    //   }
    // },
    //弹框取消重置
    // closeForm() {
    //   this.dialogFormVisible = false;
    //   this.formData = {
    //     outerFlag: "0", //账户类别
    //     accountName: "", //户名
    //     accountQuality: "", //账户性质
    //     bankCardNum: "", //银行卡号
    //     bank: "", //开户行
    //     bankName: "", //开户行名称
    //     bankNum: "", //开户行号
    //     certExpirationDate: "", //证书有效期
    //     clearingProfit: "", //结算卡
    //     dayStrokeNum: "", //单日转账笔数限制
    //     exteriorProfit: "", //外部过账金额
    //     fiscalProfit: "", //财税公司利润
    //     insuranceProfit: "", //保险公司回款
    //     otherProfit: "", //其他利润
    //     parkProfit: "", //园区利润
    //     priDayLines: "", //对私单日限额
    //     priSingleLines: "", //对私单笔限额
    //     priYearExcess: "", //对私年剩余额度
    //     priYearLines: "", //对私年额度
    //     pubDayLines: "", //对公单日限额
    //     pubSingleLines: "", //对公单笔限额
    //     pubYearExcess: "", //对公年剩余额度
    //     pubYearLines: "", //对公年额度
    //     tianqinProfit: "", //天勤利润
    //   };
    // },
    //新增账户信息
    // addUserFn() {
    //   this.dialogFormVisible = true;
    // },
    //获取所有账户信息
    getAllUser() {
      this.$api.expense.getAccountByAccountName().then((res) => {
        if (res.code == 200) {
          let arr = [];
          let newarr = [];
          res.data.forEach((item, index) => {
            if (item.invAccountCardList != null) {
              item.invAccountCardList.forEach((it) => {
                it.name =
                  (item.outerFlag == 0 ? "内部用户" : "外部用户") +
                  "   " +
                  (it.accountQuality == 0 ? "公户" : "私户") +
                  "   " +
                  item.accountName +
                  "   " +
                  it.bankCardNum +
                  "   " +
                  it.bank;
                it.nameValue = it.name;
                // it.nameValue =
                //   item.accountName + "   " + it.bankCardNum + "   " + it.bank;
              });
              arr.push(...item.invAccountCardList);
              //获取全部内部用户
              if (item.outerFlag == 0) {
                newarr.push(...item.invAccountCardList);
              }
            }
          });
          this.innerCollectionData = newarr;
          this.collectionData = arr;
        }
      });
    },
    //申请金额填写完成后
    chageAppl(e) {
      this.tableForm.bigApplyAmount = toChies(this.tableForm.applyAmount);
    },
    //数据字典
    business(typeName) {
      this.$api.dict.findByLableName(typeName).then((res) => {
        this[typeName + "Data"] = res.data;
        if (typeName == "payment_methods") {
          this.tableForm.payMethod = [
            this[typeName + "Data"].find((item) => item.value == 2).label,
          ];
        }
      });
    },
    //费用申请弹框
    showExpense() {
      this.expendTitle = "新增资金使用申请单";
      this.buttonValue = "提 交";
      this.expenseDialog = true;
    },
    //取消隐藏弹框
    resetForm() {
      this.expenseDialog = false;
    },
    //提交事件
    submitForm() {
      let params = JSON.parse(JSON.stringify(this.tableForm));
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          params.payMethod = this.toPayment(params.payMethod); //支付方式转换
          let companyItem = this.collectionData.find((item) => {
            return item.bankCardNum === params.company;
          });
          let collectionMessageItem = this.collectionData.find(
            (item) => item.bankCardNum === params.collectionMessage
          );
          params.company = companyItem.nameValue; //单位
          params.outCardNum = companyItem.bankCardNum; //支出账户id
          params.outFlag = collectionMessageItem.outerFlag; //支出账户性质
          params.collectionMessage = collectionMessageItem.nameValue; //收入账户信息
          params.enterCardNum = collectionMessageItem.bankCardNum; //收入账户id
          params.fundUse =
            this.tableForm.fundUse[this.tableForm.fundUse.length - 2]; //资金用途
          params.fundFen =
            this.tableForm.fundUse[this.tableForm.fundUse.length - 1]; //资金用途分项
          params.fundFlow = params.company + "→" + params.collectionMessage; //资金流程
          //转化资金归属
          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==0?item.profit:item.profit*-1;
          // });
          //转化资金归属
          if (this.expendDataId) {
            //修改
            params.expendDataId = this.expendDataId;
            this.$api.expense.update(params).then((res) => {
              if (res.code == 200) {
                this.resetForm();
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            //新增+导出
            this.$api.expense.insert(params).then((res) => {
              if (res.code == 200) {
                this.resetForm();
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
      //校验
      // if (!params.company) {
      //   this.$message.error("请选择单位");
      //   return;
      // } else if (!params.applicant) {
      //   this.$message.error("申请人不能为空");
      //   return;
      // } else if (!params.applySector) {
      //   this.$message.error("申请部门不能为空");
      //   return;
      // } else if (!params.applyTime) {
      //   this.$message.error("请填写申请日期");
      //   return;
      // } else if (!params.collectionMessage) {
      //   this.$message.error("请选择收款单位信息");
      //   return;
      // } else if (!params.fundUse) {
      //   this.$message.error("请选择资金用途");
      //   return;
      // } else if (params.applyAmount == 0) {
      //   this.$message.error("请填写金额");
      //   return;
      // }
    },
    //支付方式转换
    toPayment(list) {
      let newList = [];
      list.forEach((item) => {
        let newItem = this.payment_methodsData.find(
          (payItem) => payItem.label == item
        );
        if (newItem) {
          newList.push(newItem.value);
        }
      });
      newList.sort();
      newList = newList.join(",");
      return newList;
    },
  },
};
</script>
<style scoped>
.query-form {
  display: flex;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.td-title,
.demo-tableForm>>>.el-form-item__label {
  color: #323335;
  font-weight: bold;
  text-align: center;
}

.td-content,
.demo-tableForm>>>.el-input.is-disabled .el-input__inner {
  color: #474545;
}

.expense-table>>>.el-textarea__inner,
.expense-table>>>.el-input__inner {
  border: none;
  padding: 0;
  text-align: center;
}

.expense-table>>>.el-form-item {
  margin: 0;
  padding: 0;
}

.tableForm>>>.el-checkbox-group,
.tableForm>>>.el-date-editor,
.tableForm>>>.el-select,
.tableForm>>>.el-input-number,
.tableForm>>>.el-cascader,
.tableForm>>>.el-select {
  width: 100%;
}

.demo-tableForm>>>.el-input__inner {
  border: none;
}

.demo-tableForm>>>.el-input__prefix,
.demo-tableForm>>>.el-select__caret {
  display: none;
}

.idea-box>>>.el-input.is-disabled .el-input__inner,
.expense-table>>>.el-input.is-disabled .el-input__inner {
  background-color: #fff;
}

.demo-tableForm>>>.el-input-number__decrease,
.demo-tableForm>>>.el-input-number__increase {
  display: none;
}

.demo-tableForm>>>.el-checkbox__input.is-disabled+span.el-checkbox__label {
  color: #409eff;
}

.demo-tableForm>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

.demo-tableForm>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}

.demo-tableForm>>>.el-input__suffix {
  display: none;
}

.el-icon-right {
  font-size: 20px;
}

.operation {
  margin-bottom: 15px;
}

.paymethod>>>.el-form-item__content {
  display: flex;
  align-items: center;
}

.el-icon-right {
  margin: 0 10px;
}

.table_btnbox {
  position: relative;
}

.dialog-body {
  overflow-y: auto;
  height: 500px;
}
</style>