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

<template>
  <div>
    <!-- 搜索 -->
    <el-row class="top">
      <el-form
        v-model="queryFrom"
        size="small"
        label-width="95px"
        class="query-form"
      >
        <el-form-item label="转账状态" label-width="95px" prop="transferFlag">
          <el-select
            v-model="queryFrom.transferFlag"
            placeholder="请选择转账状态"
            clearable
          >
            <el-option label="已转账" value="0"></el-option>
            <el-option label="未转账" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户性质" label-width="95px" prop="accountQuality">
          <el-select
            v-model="queryFrom.accountQuality"
            placeholder="请选择账户性质"
            clearable
          >
            <el-option
              v-for="item in account_qualityData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人" label-width="95px" prop="applicant">
          <el-input
            v-model="queryFrom.applicant"
            placeholder="请输入申请人"
            class="widths"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="申请部门" label-width="95px" prop="applySector">
          <el-input
            v-model="queryFrom.applySector"
            placeholder="请输入申请部门"
            class="widths"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="申请日期" label-width="95px" prop="applyTime">
          <el-date-picker
            v-model="queryFrom.applyTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
          <!-- <el-input
            v-model="queryFrom.applyTime"
            placeholder="请输入申请部门"
            class="widths"
            clearable
          ></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="queryStaffInfo"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 申请按钮 -->
    <el-button
      class="operation"
      type="primary"
      plain
      size="medium"
      @click="showExpense"
      >资金使用申请单</el-button
    >
    <!-- 表格 -->
    <kt-common-table
      :operationWidth="operationWidth"
      class="ktTable"
      permsEdit="sys:agent:view"
      ref="dataTable"
      :data="pageResult"
      :columns="columns"
      editButtonName="编辑"
      button1Name="删除"
      :showBatchDelete="false"
      :showOperation="true"
      @findPage="findPage"
      :isshowpagination="true"
      @handleEdit="expendEdit"
      @handleButton1="expendDelete"
    ></kt-common-table>
    <!-- 申请资金弹框 -->
    <el-dialog
      class="dialog"
      :title="expendTitle"
      :close-on-click-modal="false"
      :before-close="resetForm"
      :visible.sync="expenseDialog"
      width="60%"
    >
      <div class="dialog-body">
        <el-form
          :model="tableForm"
          ref="tableForm"
          label-width="0px"
          class="demo-tableForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="单位:"
                label-width="50px"
                prop="accountQuality"
              >
                <el-select
                  v-model="tableForm.company"
                  filterable
                  placeholder="单位"
                >
                  <el-option
                    v-for="item in collectionData"
                    :key="item.accountId"
                    :label="item.name"
                    :value="item.accountId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="display: flex; justify-content: end" :span="12">
              <el-button type="primary" @click="addUserFn" size="small"
                >新增账户信息</el-button
              >
            </el-col>
          </el-row>
          <table
            class="expense-table"
            width="100%"
            height="500"
            border="1"
            bordercolor="#71787f"
            align="center"
            cellspacing=""
            cellpadding="10"
            style="border-collapse: collapse"
          >
            <tr>
              <td class="td-title" colspan="1">申请人</td>
              <td class="td-content" colspan="1">
                <el-input
                  type="text"
                  resize="none"
                  v-model="tableForm.applicant"
                ></el-input>
              </td>
              <td class="td-title" colspan="1">申请部门</td>
              <td class="td-content" colspan="1">
                <el-input
                  type="text"
                  resize="none"
                  v-model="tableForm.applySector"
                ></el-input>
              </td>
              <td class="td-title" colspan="1">申请日期</td>
              <td class="td-content" colspan="1">
                <el-date-picker
                  v-model="tableForm.applyTime"
                  align="right"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td class="td-title" colspan="1">收款单位信息</td>
              <td class="td-content" colspan="5">
                <el-select
                  v-model="tableForm.collectionMessage"
                  filterable
                  placeholder=""
                >
                  <el-option
                    v-for="item in collectionData"
                    :key="item.accountId"
                    :label="item.name"
                    :value="item.accountId"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="td-title" colspan="1">资金流程</td>
              <td class="td-content" colspan="5">
                <div style="display: flex; align-items: center">
                  <el-select
                    v-model="tableForm.company"
                    filterable
                    disabled
                    placeholder=""
                  >
                    <el-option
                      v-for="item in collectionData"
                      :key="item.accountId"
                      :label="item.name"
                      :value="item.accountId"
                    >
                    </el-option>
                  </el-select>
                  <i class="el-icon-right"></i>
                  <el-select
                    v-model="tableForm.collectionMessage"
                    filterable
                    disabled
                    placeholder=""
                  >
                    <el-option
                      v-for="item in collectionData"
                      :key="item.accountId"
                      :label="item.name"
                      :value="item.accountId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </td>
            </tr>
            <tr>
              <td class="td-title" colspan="1">资金用途</td>
              <td class="td-content" colspan="3">
                <el-cascader
                  v-model="tableForm.fundUse"
                  :show-all-levels="false"
                  :clearable="true"
                  :checkStrictly="true"
                  :emitPath="false"
                  placeholder=""
                  :options="fundFlowData"
                  filterable
                  :props="{
                    children: 'child',
                    label: 'category',
                    value: 'category',
                  }"
                ></el-cascader>
              </td>
              <td class="td-title" colspan="1">备注</td>
              <td class="td-content" colspan="1">
                <el-select v-model="tableForm.remark" placeholder="">
                  <el-option
                    v-for="item in use_fundsData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="td-title" colspan="1">申请金额（元）</td>
              <td class="td-content" colspan="2">
                <el-input-number
                  v-model="tableForm.applyAmount"
                  :min="0"
                  :precision="2"
                  @blur="chageAppl"
                  :max="99999999999999999"
                  label=""
                ></el-input-number>
              </td>
              <td class="td-title" colspan="1">大写金额</td>
              <td class="td-content idea-box" colspan="2">
                <el-input
                  type="text"
                  resize="none"
                  v-model="tableForm.bigApplyAmount"
                  disabled
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="td-title" colspan="1">支付方式</td>
              <td class="td-content" colspan="5">
                <el-checkbox-group v-model="tableForm.payMethod">
                  <el-checkbox
                    v-for="payItem in payment_methodsData"
                    :key="payItem.value"
                    :label="payItem.label"
                    :value="payItem.value"
                    :disabled="payItem.value == 2"
                  ></el-checkbox>
                </el-checkbox-group>
              </td>
            </tr>
            <tr>
              <td class="td-title" rowspan="2" colspan="1">审核意见</td>
              <td class="td-title" colspan="2">公司领导</td>
              <td class="td-title" colspan="1">财务部</td>
              <td class="td-title" colspan="2">部门领导</td>
            </tr>
            <tr class="idea-box">
              <td class="td-content" colspan="2">
                <el-input
                  type="text"
                  resize="none"
                  v-model="tableForm.desc"
                  disabled
                ></el-input>
              </td>
              <td class="td-content" colspan="1">
                <el-input
                  type="text"
                  resize="none"
                  v-model="tableForm.desc"
                  disabled
                ></el-input>
              </td>
              <td class="td-content" colspan="2">
                <el-input
                  type="text"
                  resize="none"
                  v-model="tableForm.desc"
                  disabled
                ></el-input>
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small">取 消</el-button>
        <el-button
          v-if="expendDataId"
          @click="expendDataup"
          type="primary"
          size="small"
          >导 出</el-button
        >
        <el-button type="primary" @click="submitForm" size="small">{{
          buttonValue
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 新增账户弹框 -->
    <expense-component
      ref="expenseComponent"
      :formData="formData"
      :title="title"
      :dialogFormVisible="dialogFormVisible"
      @resetForm="closeForm"
      @submitForm="submitUserForm"
      @setDateInterval="setDateInterval"
      @outChange="outChange"
      class="expense-component"
    ></expense-component>
  </div>
</template>
<script>
import ExpenseComponent from "./ExpenseComponent.vue"; //新增账户信息弹框
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import {toChies} from '../../../utils/moneyTransition';
export default {
  name: "ExpenseApplyFor",
  components: { KtCommonTable, ExpenseComponent },
  data() {
    return {
      expendTitle: "新增资金使用申请单", //弹框标题
      operationWidth: 200, //操作单元格宽度
      queryFrom: {}, //查询form表单
      pageRequest: {
        // 列表查询条件
        pageNo: 1,
        pageSize: 10,
      },
      dialogFormVisible: false, //账户信息弹出框状态
      title: "新增账户信息", //账户信息弹框标题
      expenseDialog: false, //申请单显示状态
      pageResult: {
        pageNo: 1,
        pageSize: 10,
        content: [],
      }, //表格参数
      columns: [
        // 申请列表表格头部
        {
          prop: "transferFlagName",
          label: "转账状态",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "applicant",
          label: "申请人",
          minWidth: 80,
          sortable: false,
        },
        {
          prop: "applySector",
          label: "申请部门",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "applyTime",
          label: "申请日期",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "applyAmount",
          label: "申请金额（元）",
          minWidth: 120,
          sortable: false,
        },
        {
          prop: "bigApplyAmount",
          label: "大写金额",
          minWidth: 150,
          sortable: false,
        },
        {
          prop: "company",
          label: "单位",
          minWidth: 260,
          sortable: false,
        },

        {
          prop: "collectionMessage",
          label: "收款单位信息",
          minWidth: 260,
          sortable: false,
        },
        {
          prop: "fundFlow",
          label: "资金流程",
          minWidth: 460,
          sortable: false,
        },
        {
          prop: "fundUse",
          label: "资金用途",
          minWidth: 100,
          sortable: false,
        },
        {
          prop: "remark",
          label: "备注",
          minWidth: 100,
          sortable: false,
        },

        {
          prop: "payMethod",
          label: "支付方式",
          minWidth: 160,
          sortable: false,
        },
      ],
      formData: {
        outerFlag: "0", //账户类别
        accountName: "", //户名
        accountQuality: "", //账户性质
        bankCardNum: "", //银行卡号
        bank: "", //开户行
        bankName: "", //开户行名称
        bankNum: "", //开户行号
        certExpirationDate: "", //证书有效期
        clearingProfit: "", //结算卡
        dayStrokeNum: "", //单日转账笔数限制
        exteriorProfit: "", //外部过账金额
        fiscalProfit: "", //财税公司利润
        insuranceProfit: "", //保险公司回款
        otherProfit: "", //其他利润
        parkProfit: "", //园区利润
        priDayLines: "", //对私单日限额
        priSingleLines: "", //对私单笔限额
        priYearExcess: "", //对私年剩余额度
        priYearLines: "", //对私年额度
        pubDayLines: "", //对公单日限额
        pubSingleLines: "", //对公单笔限额
        pubYearExcess: "", //对公年剩余额度
        pubYearLines: "", //对公年额度
        tianqinProfit: "", //天勤利润
      },
      pickerOptions: {
        //日期快捷键
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //新增申请表单form表单
      tableForm: {
        company: "", //单位
        applicant: "", //申请人
        applySector: "", //申请部门
        applyTime: "", //申请日期
        collectionMessage: "", //收款单位信息
        fundFlow: "", //资金流程
        fundUse: "", //资金用途
        remark: "", //备注
        applyAmount: "", //申请金额
        bigApplyAmount: "", //大写金额
        payMethod: [], //支付方式
        remark: "", //备注
      },
      payment_methodsData: [], //支付方式字典数据
      use_fundsData: [], //备注字典数据
      collectionData: [], //收款单位信息数据
      account_qualityData: [], //账户性质字典
      fundFlowData: [], //资金用途字典数据
      tableRules: {
        //资金申请单规则
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      companyItem: {}, //选择单位整条数据
      collectionMessageItem: {}, //选择收款单位整条数据
      expendDataId: "", //修改时该条数据id
      buttonValue: "导 出", //弹框提交按钮内容
    };
  },
  watch: {
    expenseDialog(n) {
      if (!n) {
        this.tableForm = {
          company: "", //单位
          applicant: "", //申请人
          applySector: "", //申请部门
          applyTime: "", //申请日期
          collectionMessage: "", //收款单位信息
          fundFlow: "", //资金流程
          fundUse: "", //资金用途
          remark: "", //备注
          applyAmount: "", //申请金额
          bigApplyAmount: "", //大写金额
          payMethod: [], //支付方式
          remark: "", //备注
        };
        this.tableForm.payMethod = [
          this.payment_methodsData.find((item) => item.value == 2).label,
        ];
        this.expendDataId = "";
      }
    },
  },
  created() {
    this.business("use_funds"); //备注字典
    this.business("payment_methods"); //支付方式字典
    this.business("account_quality"); //账户性质字典
    this.getTreeList(); //获取资金用途树字典
    this.getAllUser(); //获取所有银行账户信息
  },
  mounted() {},
  methods: {
    //导出
    expendDataup(idList) {
      if (this.expendDataId) {
        let url = process.env.BASE_URL + "/upload/" + this.tableForm.uplodePath; // 3.创建一个临时的url指向blob对象
        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
        let a = document.createElement("a");
        a.href = url;
        a.download = "资金使用申请单.xlsx";
        a.click();
        // 5.释放这个临时的对象url
        window.URL.revokeObjectURL(url);
        this.resetForm();
        this.findPage();
      } else {
        this.$api.expense.excel(idList).then((response) => {
          if (response.code == 200) {
            response.data.forEach((data) => {
              this.resetForm();
              this.findPage();
              let url = process.env.BASE_URL + "/upload/" + data.uplodePath; // 3.创建一个临时的url指向blob对象
              // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
              let a = document.createElement("a");
              a.href = url;
              a.download = "资金使用申请单.xlsx";
              a.click();
              // 5.释放这个临时的对象url
              window.URL.revokeObjectURL(url);
            });
          } else {
            this.$message.error(response.msg);
          }
        });
      }
    },
    //点击编辑按钮
    expendEdit(index) {
      let row = index.row;
      if (row.transferFlag == 0) {
        this.$message.error("已转账数据不能操作");
        return;
      }
      this.expendDataId = row.excelAccountOperateId;
      this.$api.expense
        .getAccountExcelById(row.excelAccountOperateId)
        .then((res) => {
          if (res.code == 200) {
            this.tableForm = JSON.parse(JSON.stringify(res.data));
            this.tableForm.payMethod = this.tableForm.payMethod.split(",");
            this.tableForm.collectionMessage = res.data.enterAccountId;
            this.tableForm.company = res.data.outAccountId;
            let obj = this.fundFlowData.find((item) =>
              item.child.find(
                (chidlItem) => chidlItem.category == this.tableForm.fundUse
              )
            );
            this.tableForm.fundUse = [
              obj.category,
              obj.child.find((item) => item.category == this.tableForm.fundUse)
                .category,
            ];
          } else {
            this.$message.error(res.msg);
          }
        });
      this.expendTitle = "编辑资金使用申请单";
      this.buttonValue = "确认提交";
      this.expenseDialog = true;
    },
    //删除数据事件
    expendDelete(index) {
      let row = index.row;
      if (row.transferFlag == 0) {
        this.$message.error("已转账数据不能操作");
        return;
      }
      this.$confirm("确认删除该条数据吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$api.expense
            .deleteAccountExcel(index.row.excelAccountOperateId)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.findPage();
              } else {
                this.$message.error(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    //获取资金用途树数据
    getTreeList() {
      this.$api.expense.getAccountExpensesTreeList().then((res) => {
        let arr = res.data;
        res.data.forEach((item) => {
          item.child.forEach((childItem) => {
            delete childItem.child;
          });
        });
        this.fundFlowData = res.data;
      });
    },
    //搜索列表功能
    queryStaffInfo() {
      this.findPage();
    },
    //查询列表
    findPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNo = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      let obj = { ...this.queryFrom, ...this.pageRequest };
      this.$api.expense
        .getAccountExcel(obj)
        .then((res) => {
          res.data.records.forEach((element) => {
            element.transferFlagName =
              element.transferFlag == 0 ? "已转账" : "未转账";
            this.use_fundsData.forEach((item) => {
              if (element.remark == item.value) {
                element.remarkName = item.label;
              }
            });
          });
          this.pageResult = {
            content: res.data.records,
            pageNum: res.data.current,
            pageSize: res.data.size,
            totalPages: res.data.pages,
            totalSize: res.data.total,
          };
        })
        .then(data != null ? data.callback : "");
    },
    //选择证书有效日期区间
    setDateInterval(e) {
      if (e != null && e != "") {
        this.formData.startCertExpirationDate = e[0];
        this.formData.endCertExpirationDate = e[1];
      } else {
        this.formData.startCertExpirationDate = "";
        this.formData.endCertExpirationDate = "";
      }
    },
    //新增用户信息提交
    submitUserForm() {
      let params = JSON.parse(JSON.stringify(this.formData));
      delete params.certExpirationDate;
      //新增
      this.$api.expense.insertAccount(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          this.$message({
            message: `添加失败, ${res.msg}`,
            type: "error",
          });
        }
        this.getAllUser();
        this.closeForm();
      });
    },
    //弹框重新赋值
    outChange(e) {
      if (e == 1) {
        this.formData = {
          outerFlag: e, //账户类别
          accountName: this.formData.accountName, //户名
          accountQuality: this.formData.accountQuality, //账户性质
          bankCardNum: this.formData.bankCardNum, //银行卡号
          bank: this.formData.bank, //开户行
        };
      } else {
        this.formData = {
          outerFlag: e, //账户类别
          accountName: this.formData.accountName, //户名
          accountQuality: this.formData.accountQuality, //账户性质
          bankCardNum: this.formData.bankCardNum, //银行卡号
          bank: this.formData.bank, //开户行
          bankName: "", //开户行名称
          bankNum: "", //开户行号
          certExpirationDate: "", //证书有效期
          clearingProfit: "", //结算卡
          dayStrokeNum: "", //单日转账笔数限制
          exteriorProfit: "", //外部过账金额
          fiscalProfit: "", //财税公司利润
          insuranceProfit: "", //保险公司回款
          otherProfit: "", //其他利润
          parkProfit: "", //园区利润
          priDayLines: "", //对私单日限额
          priSingleLines: "", //对私单笔限额
          priYearExcess: "", //对私年剩余额度
          priYearLines: "", //对私年额度
          pubDayLines: "", //对公单日限额
          pubSingleLines: "", //对公单笔限额
          pubYearExcess: "", //对公年剩余额度
          pubYearLines: "", //对公年额度
          tianqinProfit: "", //天勤利润
        };
      }
    },
    //弹框取消重置
    closeForm() {
      this.dialogFormVisible = false;
      this.formData = {
        outerFlag: "0", //账户类别
        accountName: "", //户名
        accountQuality: "", //账户性质
        bankCardNum: "", //银行卡号
        bank: "", //开户行
        bankName: "", //开户行名称
        bankNum: "", //开户行号
        certExpirationDate: "", //证书有效期
        clearingProfit: "", //结算卡
        dayStrokeNum: "", //单日转账笔数限制
        exteriorProfit: "", //外部过账金额
        fiscalProfit: "", //财税公司利润
        insuranceProfit: "", //保险公司回款
        otherProfit: "", //其他利润
        parkProfit: "", //园区利润
        priDayLines: "", //对私单日限额
        priSingleLines: "", //对私单笔限额
        priYearExcess: "", //对私年剩余额度
        priYearLines: "", //对私年额度
        pubDayLines: "", //对公单日限额
        pubSingleLines: "", //对公单笔限额
        pubYearExcess: "", //对公年剩余额度
        pubYearLines: "", //对公年额度
        tianqinProfit: "", //天勤利润
      };
    },
    //新增账户信息
    addUserFn() {
      this.dialogFormVisible = true;
    },
    //选择收款单位信息事件
    collectionChange(e) {
      if (e.length > 0) {
        let obj = this.collectionData
          .find((item) => item.accountId == e[0])
          .children.find((item) => item.accountId == e[1]);
      }
    },
    //获取所有账户信息
    getAllUser() {
      this.$api.expense.getAccountByAccountName().then((res) => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            item.name =
              (item.outerFlag == 0 ? "内部用户" : "外部用户") +
              "   " +
              (item.accountQuality == 0 ? "公户" : "私户") +
              "   " +
              item.accountName +
              "   " +
              item.bankCardNum +
              "   " +
              item.bank;
            item.nameValue =
              item.accountName + "   " + item.bankCardNum + "   " + item.bank;
          });
          this.collectionData = res.data;
        }
      });
    },
    //申请金额填写完成后
    chageAppl(e) {
      this.tableForm.bigApplyAmount = toChies(this.tableForm.applyAmount);
    },
    //数据字典
    business(typeName) {
      this.$api.dict.findByLableName(typeName).then((res) => {
        this[typeName + "Data"] = res.data;
        if (typeName == "payment_methods") {
          this.tableForm.payMethod = [
            this[typeName + "Data"].find((item) => item.value == 2).label,
          ];
        }
      });
    },
    //费用申请弹框
    showExpense() {
      this.expendTitle = "新增资金使用申请单";
      this.buttonValue = "导 出";
      this.expenseDialog = true;
    },
    //取消隐藏弹框
    resetForm() {
      this.expenseDialog = false;
    },
    //导出事件
    submitForm() {
      let params = JSON.parse(JSON.stringify(this.tableForm));
      //校验
      if (!params.company) {
        this.$message.error("请选择单位");
        return;
      } else if (!params.applicant) {
        this.$message.error("申请人不能为空");
        return;
      } else if (!params.applySector) {
        this.$message.error("申请部门不能为空");
        return;
      } else if (!params.applyTime) {
        this.$message.error("请填写申请日期");
        return;
      } else if (!params.collectionMessage) {
        this.$message.error("请选择收款单位信息");
        return;
      } else if (!params.fundUse) {
        this.$message.error("请选择资金用途");
        return;
      } else if (params.applyAmount == 0) {
        this.$message.error("请填写金额");
        return;
      }
      params.payMethod = this.toPayment(params.payMethod); //支付方式转换
      let companyItem = this.collectionData.find(
        (item) => item.accountId === params.company
      );
      let collectionMessageItem = this.collectionData.find(
        (item) => item.accountId === params.collectionMessage
      );
      params.company = companyItem.nameValue; //单位
      params.outAccountId = companyItem.accountId; //支出账户id
      params.outFlag = collectionMessageItem.outerFlag; //支出账户性质
      params.collectionMessage = collectionMessageItem.nameValue; //收入账户信息
      params.enterAccountId = collectionMessageItem.accountId; //收入账户id
      params.fundUse = params.fundUse[params.fundUse.length - 1]; //资金用途
      params.fundFlow = params.company + "→" + params.collectionMessage; //资金流程
      if (this.expendDataId) {
        //修改
        params.expendDataId = this.expendDataId;
        this.$api.expense.update(params).then((res) => {
          if (res.code == 200) {
            this.resetForm();
            this.findPage();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        //新增+导出
        this.$api.expense.insert(params).then((res) => {
          if (res.code == 200) {
            this.expendDataup([res.data]);
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //支付方式转换
    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;
}
.td-title,
.demo-tableForm >>> .el-form-item__label {
  color: #323335;
  font-weight: bold;
  text-align: center;
}
.td-content,
.demo-tableForm >>> .el-input.is-disabled .el-input__inner {
  color: #474545;
}
.expense-table >>> .el-textarea__inner,
.expense-table >>> .el-input__inner {
  border: none;
  padding: 0;
  text-align: center;
}
.expense-table >>> .el-form-item {
  margin: 0;
  padding: 0;
}
.expense-table >>> .el-checkbox-group,
.expense-table >>> .el-date-editor,
.expense-table >>> .el-select,
.expense-table >>> .el-input-number,
.expense-table >>> .el-cascader,
.demo-tableForm >>> .el-select {
  width: 100%;
  text-align: center;
}
.demo-tableForm >>> .el-input__inner {
  border: none;
}
.demo-tableForm >>> .el-input__prefix,
.demo-tableForm >>> .el-select__caret {
  display: none;
}
.idea-box >>> .el-input.is-disabled .el-input__inner,
.expense-table >>> .el-input.is-disabled .el-input__inner {
  background-color: #fff;
}
.demo-tableForm >>> .el-input-number__decrease,
.demo-tableForm >>> .el-input-number__increase {
  display: none;
}
.demo-tableForm >>> .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #409eff;
}
.demo-tableForm
  >>> .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.demo-tableForm
  >>> .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  border-color: #fff;
}
.demo-tableForm >>> .el-input__suffix {
  display: none;
}
.el-icon-right {
  font-size: 20px;
}
.operation {
  margin-bottom: 15px;
}
</style>