front/front-vue/src/views/service/financeRecord/financeRecord.vue

<template>
  <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
    <!-- 全部table页 -->
    <el-tab-pane label="全部" name = "first">
      <el-card class="fiche">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
        <span style="margin-bottom: 10px;color: #333333;font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif;">所选条件:</span>
        <div style="float: right; margin-right: 1%">
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="float: ">重置</el-button>
          <column-setting :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" style="margin-left:5px"></column-setting>
        </div>
        <hr style="margin-top: 16px" />
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item prop="zfrTypes">
            <el-select v-model="queryParams.zfrTypes" clearable size="small">
              <el-option
                v-for="dict in typesOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrQuery">
            <el-select v-model="queryParams.zfrQuery" clearable size="small">
              <el-option
                v-for="dict in queryOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrValue" v-if="this.queryParams.zfrQuery">
            <el-input
              v-model="queryParams.zfrValue"
              clearable
              size="small"
              maxlength="25"
              style="width: 190px"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['finance:record:add']"
            >申请融资</el-button
          >
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange" stripe border>
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="融信编号" align="center" prop="zfiNumner" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumner  && (this.companyType == '00' || this.companyType == '02')"/>
        <el-table-column label="融资编号" align="center" prop="zfrNumber" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrNumber"/>
        <el-table-column label="融资方" align="center" prop="supplierScyName" width="180" :show-overflow-tooltip="true" v-if="uncheckList.supplierScyName && this.companyType == '01'"/>
        <el-table-column label="开立方" align="center" prop="coreScyName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.coreScyName"/>
        <el-table-column label="融资金额" :formatter="moneyFormat" align="center" prop="zfrAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrAmount"/>
        <el-table-column label="融资利率(%)" align="center" prop="zfrRate" width="100" :show-overflow-tooltip="true" v-if="uncheckList.zfrRate"/>
        <el-table-column label="经办人" align="center" prop="nickName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.nickName"/>
        <el-table-column label="承诺还款时间" align="center" prop="zfrExpireDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrExpireDate"/>
        <el-table-column label="融资申请日期" align="center" prop="zfrApplyDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyDate"/>
        <el-table-column label="实际放款金额" :formatter="moneyFormat" align="center" prop="zfrLoanAmount" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount"/>
        <el-table-column label="融资放款日期" align="center" prop="zfrLoanDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanDate"/>
        <el-table-column label="融资状态" :formatter="statusFormat" align="center"  prop="zfrStatus" :show-overflow-tooltip="true" v-if="uncheckList.zfrStatus"/>
        <el-table-column label="审批状态" :formatter="approveFormat" align="center"  prop="zfrApproveStt" :show-overflow-tooltip="true" v-if="uncheckList.zfrApproveStt && this.companyType == '02'"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetail(scope.row)"
              v-hasPermi="['finance:record:query']"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleLoan(scope.row)"
              v-hasPermi="['finance:record:edit']"
              v-if="scope.row.zfrStatus == '00'"
              >放款登记</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleExport(scope.row)"
              v-hasPermi="['finance:record:export']"
              >导出</el-button
            >
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleApprove(scope.row)"
              v-hasPermi="['finance:record:approve']"
              v-if="scope.row.zfrApproveStt == '03' && scope.row.zfrStatus != '01'"
              >提交审批</el-button
            > -->
            <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="seal(scope.row)"
            v-hasPermi="['finance:record:seal']"
            v-if="scope.row.zfrApproveStt == '01' && scope.row.zfrStatus == '04'"
          >盖章</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-tab-pane>

    <!-- 融资中table页 -->
    <el-tab-pane label="融资中" name = "second">
      <el-card class="fiche">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
        <span style="margin-bottom: 10px;color: #333333; font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif;">所选条件:</span>
        <div style="float: right; margin-right: 1%">
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQueryIng" >搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryIng" style="float: ">重置</el-button>
          <column-setting :checkList="checkListOne" :tableList="tableListOne" :selfDom="selfDom" :tableId="tableIdOne" style="margin-left:5px"></column-setting>
        </div>
        <hr style="margin-top: 16px" />
        <el-form
          :model="queryParamsIng"
          ref="queryFormIng"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item prop="zfrTypes">
            <el-select v-model="queryParams.zfrTypes" clearable size="small">
              <el-option
                v-for="dict in typesOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrQuery">
            <el-select v-model="queryParams.zfrQuery" clearable size="small">
              <el-option
                v-for="dict in queryOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrValue" v-if="this.queryParams.zfrQuery">
            <el-input
              v-model="queryParams.zfrValue"
              clearable
              size="small"
              maxlength="25"
              style="width: 190px"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <el-table v-loading="loadingIng" :data="recordIngList" @selection-change="handleSelectionChangeIng" stripe border>
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{(queryParamsIng.pageNum - 1) * queryParamsIng.pageSize +scope.$index + 1}}</span>
          </template>
        </el-table-column>
       <el-table-column label="融信编号" align="center" prop="zfiNumner" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumner  && (this.companyType == '00' || this.companyType == '02')"/>
        <el-table-column label="融资编号" align="center" prop="zfrNumber" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrNumber"/>
        <el-table-column label="融资方" align="center" prop="supplierScyName" width="180" :show-overflow-tooltip="true" v-if="uncheckList.supplierScyName && this.companyType == '01'"/>
        <el-table-column label="开立方" align="center" prop="coreScyName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.coreScyName"/>
        <el-table-column label="融资金额" :formatter="moneyFormat" align="center" prop="zfrAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrAmount"/>
        <el-table-column label="融资利率(%)" align="center" prop="zfrRate" width="100" :show-overflow-tooltip="true" v-if="uncheckList.zfrRate"/>
        <el-table-column label="经办人" align="center" prop="nickName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.nickName"/>
        <el-table-column label="承诺还款时间" align="center" prop="zfrExpireDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrExpireDate"/>
        <el-table-column label="融资申请日期" align="center" prop="zfrApplyDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyDate"/>
        <el-table-column label="实际放款金额" :formatter="moneyFormat" align="center" prop="zfrLoanAmount" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount"/>
        <el-table-column label="融资放款日期" align="center" prop="zfrLoanDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanDate"/>
        <el-table-column label="融资状态" :formatter="statusFormat" align="center"  prop="zfrStatus" :show-overflow-tooltip="true" v-if="uncheckList.zfrStatus"/>
        <el-table-column label="审批状态" :formatter="approveFormat" align="center"  prop="zfrApproveStt" :show-overflow-tooltip="true" v-if="uncheckList.zfrApproveStt && this.companyType == '02'"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetail(scope.row)"
              v-hasPermi="['finance:record:query']"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleLoan(scope.row)"
              v-hasPermi="['finance:record:edit']"
              >放款登记</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleExport(scope.row)"
              v-hasPermi="['finance:record:export']"
              >导出</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalIng > 0"
        :total="totalIng"
        :page.sync="queryParamsIng.pageNum"
        :limit.sync="queryParamsIng.pageSize"
        @pagination="getIngList"
      />
    </el-tab-pane>

    <!-- 已放款table页 -->
    <el-tab-pane label="已放款" name = "third">
      <el-card class="fiche">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
        <span style="margin-bottom: 10px; color: #333333; font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;">所选条件:</span>
        <div style="float: right; margin-right: 1%">
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQueryEnd" >搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryEnd" style="float: " >重置</el-button>
          <column-setting :checkList="checkListTwo" :tableList="tableListTwo" :selfDom="selfDom" :tableId="tableIdTwo" style="margin-left:5px"></column-setting>
        </div>
        <hr style="margin-top: 16px" />
        <el-form
          :model="queryParamsEnd"
          ref="queryFormEnd"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item prop="zfrTypes">
            <el-select v-model="queryParams.zfrTypes" clearable size="small">
              <el-option
                v-for="dict in typesOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrQuery">
            <el-select v-model="queryParams.zfrQuery" clearable size="small">
              <el-option
                v-for="dict in queryOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrValue" v-if="this.queryParams.zfrQuery">
            <el-input
              v-model="queryParams.zfrValue"
              clearable
              size="small"
              maxlength="25"
              style="width: 190px"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <el-table
        v-loading="loadingEnd"
        :data="recordEndList"
        @selection-change="handleSelectionChange"
        stripe
        border
      >
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (queryParamsEnd.pageNum - 1) * queryParamsEnd.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="融信编号" align="center" prop="zfiNumner" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumner  && (this.companyType == '00' || this.companyType == '02')"/>
        <el-table-column label="融资编号" align="center" prop="zfrNumber" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrNumber"/>
        <el-table-column label="融资方" align="center" prop="supplierScyName" width="180" :show-overflow-tooltip="true" v-if="uncheckList.supplierScyName && this.companyType == '01'"/>
        <el-table-column label="开立方" align="center" prop="coreScyName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.coreScyName"/>
        <el-table-column label="融资金额" :formatter="moneyFormat" align="center" prop="zfrAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrAmount"/>
        <el-table-column label="融资利率(%)" align="center" prop="zfrRate" width="100" :show-overflow-tooltip="true" v-if="uncheckList.zfrRate"/>
        <el-table-column label="经办人" align="center" prop="nickName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.nickName"/>
        <el-table-column label="承诺还款时间" align="center" prop="zfrExpireDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrExpireDate"/>
        <el-table-column label="融资申请日期" align="center" prop="zfrApplyDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyDate"/>
        <el-table-column label="实际放款金额" :formatter="moneyFormat" align="center" prop="zfrLoanAmount" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount"/>
        <el-table-column label="融资放款日期" align="center" prop="zfrLoanDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanDate"/>
        <el-table-column label="融资状态" :formatter="statusFormat" align="center"  prop="zfrStatus" :show-overflow-tooltip="true" v-if="uncheckList.zfrStatus"/>
        <el-table-column label="审批状态" :formatter="approveFormat" align="center"  prop="zfrApproveStt" :show-overflow-tooltip="true" v-if="uncheckList.zfrApproveStt && this.companyType == '02'"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetail(scope.row)"
              v-hasPermi="['finance:record:query']"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleExport(scope.row)"
              v-hasPermi="['finance:record:export']"
              >导出</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalEnd > 0"
        :total="totalEnd"
        :page.sync="queryParamsEnd.pageNum"
        :limit.sync="queryParamsEnd.pageSize"
        @pagination="getEndList"
      />
    </el-tab-pane>
    <!-- 融资失败table页 -->
    <el-tab-pane label="融资失败" name = "fourth">
      <el-card class="fiche">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
        <span style="margin-bottom: 10px; color: #333333; font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;">所选条件:</span>
        <div style="float: right; margin-right: 1%">
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQueryLose" >搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLose" style="float: " >重置</el-button>
          <column-setting :checkList="checkListThree" :tableList="tableListThree" :selfDom="selfDom" :tableId="tableIdThree" style="margin-left:5px"></column-setting>
        </div>
        <hr style="margin-top: 16px" />
        <el-form
          :model="queryParamsLose"
          ref="queryFormLose"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item prop="zfrTypes">
            <el-select v-model="queryParams.zfrTypes" clearable size="small">
              <el-option
                v-for="dict in typesOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrQuery">
            <el-select v-model="queryParams.zfrQuery" clearable size="small">
              <el-option
                v-for="dict in queryOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="zfrValue" v-if="this.queryParams.zfrQuery">
            <el-input
              v-model="queryParams.zfrValue"
              clearable
              size="small"
              maxlength="25"
              style="width: 190px"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <el-table v-loading="loadingLose" :data="recordLoseList" @selection-change="handleSelectionChange" stripe border>
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (queryParamsLose.pageNum - 1) * queryParamsLose.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="融信编号" align="center" prop="zfiNumner" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfiNumner  && (this.companyType == '00' || this.companyType == '02')"/>
        <el-table-column label="融资编号" align="center" prop="zfrNumber" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrNumber"/>
        <el-table-column label="融资方" align="center" prop="supplierScyName" width="180" :show-overflow-tooltip="true" v-if="uncheckList.supplierScyName && this.companyType == '01'"/>
        <el-table-column label="开立方" align="center" prop="coreScyName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.coreScyName"/>
        <el-table-column label="融资金额" :formatter="moneyFormat" align="center" prop="zfrAmount" :show-overflow-tooltip="true" v-if="uncheckList.zfrAmount"/>
        <el-table-column label="融资利率(%)" align="center" prop="zfrRate" width="100" :show-overflow-tooltip="true" v-if="uncheckList.zfrRate"/>
        <el-table-column label="经办人" align="center" prop="nickName" width="100" :show-overflow-tooltip="true" v-if="uncheckList.nickName"/>
        <el-table-column label="承诺还款时间" align="center" prop="zfrExpireDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrExpireDate"/>
        <el-table-column label="融资申请日期" align="center" prop="zfrApplyDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrApplyDate"/>
        <el-table-column label="实际放款金额" :formatter="moneyFormat" align="center" prop="zfrLoanAmount" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanAmount"/>
        <el-table-column label="融资放款日期" align="center" prop="zfrLoanDate" width="180" :show-overflow-tooltip="true" v-if="uncheckList.zfrLoanDate"/>
        <el-table-column label="融资状态" :formatter="statusFormat" align="center"  prop="zfrStatus" :show-overflow-tooltip="true" v-if="uncheckList.zfrStatus"/>
        <el-table-column label="审批状态" :formatter="approveFormat" align="center"  prop="zfrApproveStt" :show-overflow-tooltip="true" v-if="uncheckList.zfrApproveStt && this.companyType == '02'"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetail(scope.row)"
              v-hasPermi="['finance:record:query']"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleExport(scope.row)"
              v-hasPermi="['finance:record:export']"
              >导出</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalLose > 0"
        :total="totalLose"
        :page.sync="queryParamsLose.pageNum"
        :limit.sync="queryParamsLose.pageSize"
        @pagination="getLoseList"
      />
    </el-tab-pane>
    <!-- 添加或修改融资记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="实际放款金额" prop="zfrLoanAmount" label-width="100px" >
          <el-input v-model="form.zfrLoanAmount" placeholder="实际放款金额" style="width: 284px">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload
            ref="upload"
            class="upload-demo"
            action=""
            :class="{ showUoload: showBtnImg, uoloadSty: noneBtnImg }"
            :on-change="dealImgChange"
            accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
            :http-request="httpRequest"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            list-type="picture-card"
            :file-list="fileList"
            :auto-upload="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >点击选择</el-button
            >
            <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
          </el-upload>
        </el-form-item>
        <el-form-item label="融资id" prop="zfrId" label-width="90px" v-if="false">
          <el-input v-model="form.zfrId" style="width: 284px" />
        </el-form-item>
        <el-form-item label="融信id" prop="zfrFinanceId" label-width="90px" v-if="false">
          <el-input v-model="form.zfrFinanceId" style="width: 284px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-tabs>
</template>

<script>
import {
  listRecord,
  getRecord,
  delRecord,
  addRecord,
  updateRecord,
  examineApprove,
} from "@/api/service/financeRecord/record";
import { uploadFileNew } from "@/api/common/file";
import Cookies from "js-cookie";
import { getToken } from "@/utils/auth";
import { columnQuery } from "@/api/common/columnSetting";
import ColumnSetting from "../../../components/Table/columnSetting.vue";
export default {
  name: "finaceRecord",
  components: {ColumnSetting},
  data() {
    return {
      //企业类型
      companyType: '',
      //上传使用
      dialogImageUrl: "",
      dialogVisible: false,
      //附件按钮
      showBtnImg: true,
      noneBtnImg: false,
      limitCountImg: 1,
      // 遮罩层
      loading: true,
      loadingIng: true,
      loadingEnd: true,
      loadingLose: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalIng: 0,
      totalEnd: 0,
      totalLose: 0,
      // 全部融资记录表格数据
      recordList: [],
      // 融资中融资记录表格数据
      recordIngList: [],
      // 已放款融资记录表格数据
      recordEndList: [],
      // 融资失败融资记录表格数据
      recordLoseList: [],
      //附件地址
      fileList: [],
      //融资状态数据字典
      statusOptions: [],
      //内部审批状态
      approveOptions: [],
      //筛选条件数据字典
      typesOptions: [],
      queryOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: null,
        zfrApproveStt: null,
        zfrTypes: null,
        zfrQuery: null,
        zfrValue: null,
      },
      queryParamsIng: {
        pageNum: 1,
        pageSize: 10,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: null,
        zfrApproveStt: null,
        zfrTypes: null,
        zfrQuery: null,
        zfrValue: null,
      },
      queryParamsEnd: {
        pageNum: 1,
        pageSize: 10,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: null,
        zfrApproveStt: null,
        zfrTypes: null,
        zfrQuery: null,
        zfrValue: null,
      },
      queryParamsLose: {
        pageNum: 1,
        pageSize: 10,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: null,
        zfrApproveStt: null,
        zfrTypes: null,
        zfrQuery: null,
        zfrValue: null,
      },
      // 表单参数
      form: {},
      //筛选按钮的数据列表，与table表头的数据一致 --显示隐藏列用--全部
      tableList: [
        {label: "zfiNumner",          value: "融信编号"},
        {label: "zfrNumber",          value: "融资编号"},
        {label: "supplierScyName",    value: "融资方"},
        {label: 'coreScyName',        value: '开立方'},
        {label: 'zfrAmount',          value: '融资金额'},
        {label: "zfrRate",            value: "融资利率"},
        {label: "nickName",           value: "经办人"},
        {label: "zfrExpireDate",      value: "承诺还款时间"},
        {label: "zfrApplyDate",       value: "融资申请日期"},
        {label: 'zfrLoanAmount',      value: '实际放款金额'},
        {label: "zfrLoanDate",        value: "融资放款日期"},
        {label: "zfrStatus",          value: "融资状态"},
        {label: "zfrApproveStt",      value: "审批状态"},
      ],
      checkList: [], //筛选列选中的数据列表--显示隐藏列用
      uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
      firstSet : false,
      tableId: "/sc-service/financeRecord/list/all",
      //融资中
      tableListOne: [
        {label: "zfiNumner",          value: "融信编号"},
        {label: "zfrNumber",          value: "融资编号"},
        {label: "supplierScyName",    value: "融资方"},
        {label: 'coreScyName',        value: '开立方'},
        {label: 'zfrAmount',          value: '融资金额'},
        {label: "zfrRate",            value: "融资利率"},
        {label: "nickName",           value: "经办人"},
        {label: "zfrExpireDate",      value: "承诺还款时间"},
        {label: "zfrApplyDate",       value: "融资申请日期"},
        {label: 'zfrLoanAmount',      value: '实际放款金额'},
        {label: "zfrLoanDate",        value: "融资放款日期"},
        {label: "zfrStatus",          value: "融资状态"},
        {label: "zfrApproveStt",      value: "审批状态"},
      ],
      checkListOne: [], //筛选列选中的数据列表--显示隐藏列用
      uncheckListOne: {}, //控制筛选列显示隐藏--显示隐藏列用
      firstSetOne: false,
      tableIdOne: "/sc-service/financeRecord/list/one",
      //已放款
      tableListTwo: [
        {label: "zfiNumner",          value: "融信编号"},
        {label: "zfrNumber",          value: "融资编号"},
        {label: "supplierScyName",    value: "融资方"},
        {label: 'coreScyName',        value: '开立方'},
        {label: 'zfrAmount',          value: '融资金额'},
        {label: "zfrRate",            value: "融资利率"},
        {label: "nickName",           value: "经办人"},
        {label: "zfrExpireDate",      value: "承诺还款时间"},
        {label: "zfrApplyDate",       value: "融资申请日期"},
        {label: 'zfrLoanAmount',      value: '实际放款金额'},
        {label: "zfrLoanDate",        value: "融资放款日期"},
        {label: "zfrStatus",          value: "融资状态"},
        {label: "zfrApproveStt",      value: "审批状态"},
      ],
      checkListTwo: [], //筛选列选中的数据列表--显示隐藏列用
      uncheckListTwo: {}, //控制筛选列显示隐藏--显示隐藏列用
      firstSetTwo: false,
      tableIdTwo: "/sc-service/financeRecord/list/two",
      //放款失败
      tableListThree: [
        {label: "zfiNumner",          value: "融信编号"},
        {label: "zfrNumber",          value: "融资编号"},
        {label: "supplierScyName",    value: "融资方"},
        {label: 'coreScyName',        value: '开立方'},
        {label: 'zfrAmount',          value: '融资金额'},
        {label: "zfrRate",            value: "融资利率"},
        {label: "nickName",           value: "经办人"},
        {label: "zfrExpireDate",      value: "承诺还款时间"},
        {label: "zfrApplyDate",       value: "融资申请日期"},
        {label: 'zfrLoanAmount',      value: '实际放款金额'},
        {label: "zfrLoanDate",        value: "融资放款日期"},
        {label: "zfrStatus",          value: "融资状态"},
        {label: "zfrApproveStt",      value: "审批状态"},
      ],
      checkListThree: [], //筛选列选中的数据列表--显示隐藏列用
      uncheckListThree: {}, //控制筛选列显示隐藏--显示隐藏列用
      firstSetThree: false,
      tableIdThree: "/sc-service/financeRecord/list/three",
      // 表单校验
      rules: {
        zfrloanAmount: [
          { required: true, message: "放款金额不能为空", trigger: "blur" },
        ],
      },
      selfDom : this,
      activeName : "first"
    };
  },
  created() {
    this.getList();
    this.getIngList();
    this.getEndList();
    this.getLoseList();
    this.getDicts("ser_zfr_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("zc_zfr_types").then((response) => {
      this.typesOptions = response.data;
    });
    this.getDicts("zc_zfr_query").then((response) => {
      this.queryOptions = response.data;
    });
    this.getDicts("zc_zfr_approve_stt").then((response) => {
      this.approveOptions = response.data;
    });
  },
  activated() {
    this.getList();
    this.getIngList();
    this.getEndList();
    this.getLoseList();
    this.getDicts("ser_zfr_status").then((response) => {
      this.statusOptions = response.data;
    });
  },
  mounted() {
    this.columnQuery();
  },
  methods: {
    /** 查询全部融资记录列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then((response) => {
        this.recordList = response.data.records;
        if(response.data.records[0]){
          this.companyType = response.data.records[0].companyType
        }
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询融资中融资记录列表 */
    getIngList() {
      this.loadingIng = true;
      this.queryParamsIng.zfrStatus = "00";
      listRecord(this.queryParamsIng).then((response) => {
        this.recordIngList = response.data.records;
        this.totalIng = response.data.total;
        this.loadingIng = false;
      });
    },
    /** 查询已放款融资记录列表 */
    getEndList() {
      this.loadingEnd = true;
      this.queryParamsEnd.zfrStatus = "01";
      listRecord(this.queryParamsEnd).then((response) => {
        this.recordEndList = response.data.records;
        this.totalIng = response.data.total;
        this.loadingEnd = false;
      });
    },
    /** 查询融资失败融资记录列表 */
    getLoseList() {
      this.loadingLose = true;
      this.queryParamsLose.zfrStatus = "02";
      listRecord(this.queryParamsLose).then((response) => {
        this.recordLoseList = response.data.records;
        this.totalEnd = response.data.total;
        this.loadingLose = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        zfrId: null,
        zfrFinanceId: null,
        zfrNumber: null,
        zfrAmount: null,
        zfrRate: null,
        zfrHandler: null,
        zfrRepaymentDate: null,
        zfrApplyDate: null,
        zfrLoanDate: null,
        zfrApplyAmount: null,
        zfrApplyType: null,
        zfrStatus: "00",
        zfrApproveStt: null,
        zfrProfitSpare1: null,
        zfrProfitSpare2: null,
        zfrProfitSpare3: null,
        zfrProfitSpare4: null,
        zfrProfitSpare5: null,
        zfrProfitSpare6: null,
        zfrProfitSpare7: null,
        zfrProfitSpare8: null,
        zfrProfitSpare9: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        zfrLoanFile: null,
      };
      this.resetForm("form");
      this.fileList = [];
      this.noneBtnImg = false;
    },
    /** 全部搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 全部重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 融资中搜索按钮操作 */
    handleQueryIng() {
      this.queryParamsIng.pageNum = 1;
      this.getIngList();
    },
    /**融资中重置按钮操作 */
    resetQueryIng() {
      this.resetForm("queryFormIng");
      this.handleQueryIng();
    },
    /** 已放款搜索按钮操作 */
    handleQueryEnd() {
      this.queryParamsEnd.pageNum = 1;
      this.getEndList();
    },
    /**已放款重置按钮操作 */
    resetQueryEnd() {
      this.resetForm("queryFormEnd");
      this.handleQueryEnd();
    },
    /** 融资失败搜索按钮操作 */
    handleQueryLose() {
      this.queryParamsLose.pageNum = 1;
      this.getLoseList();
    },
    /*融资失败重置按钮操作 */
    resetQueryLose() {
      this.resetForm("queryFormLose");
      this.handleQueryLose();
    },
    //全部 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.zfrId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 融资中多选框选中数据
    handleSelectionChangeIng(selection) {
      this.ids = selection.map((item) => item.zfrId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 字典翻译 */
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.zfrStatus);
    },
    approveFormat(row, column) {
      return this.selectDictLabel(this.approveOptions, row.zfrApproveStt);
    },
    /** 新增按钮操作 */
    handleAdd() {
      Cookies.set("/financeRecord/addFinanceRecord/", this.$route.fullPath);
      this.$router.push("/financeRecord/addFinanceRecord/");
      // this.reset();
      // this.open = true;
      // this.title = "添加融资记录";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const zfrId = row.zfrId || this.ids;
      getRecord(zfrId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改融资记录";
      });
    },
    handleLoan(row) {
      this.reset();
      this.form.zfrId = row.zfrId || this.ids;
      this.form.zfrAmount = row.zfrAmount;
      this.$set(this.form, "zfrLoanAmount", row.zfrAmount);
      // this.form.zfrloanAmount = row.zfrAmount;
      this.form.zfrFinanceId = row.zfrFinanceId;
      this.open = true;
      this.title = "放款登记";
    },
    handleDetail(row) {
      this.reset();
      const zfrId = row.zfrId || this.ids;
      Cookies.set(
        "/financeRecord/detailFinanceRecord/" + zfrId,
        this.$route.fullPath
      );
      this.$router.push("/financeRecord/detailFinanceRecord/" + zfrId);
    },
    //盖章
    seal(row){
        const zfrId = row.zfrId || this.ids
        Cookies.set("/financeRecord/recordSeal/"+zfrId + "/", this.$route.fullPath)
        this.$router.push({ path: "/financeRecord/recordSeal/"+zfrId + "/" });
    },
    /** 提交审批 */
    handleApprove(row) {
      this.$confirm("确认要提交审批吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return examineApprove(row);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("提交成功");
        })
        .catch(function () {});
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
          });
          this.form.zfrLoanFile = this.fileList;
          updateRecord(this.form).then((response) => {
            loading.close();
            this.msgSuccess("放款登记成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    /** 上传图片 */
    submitUpload() {
      this.$refs.upload.submit();
    },
    beforeUpload(files){
      var testmsg=files.name.substring(files.name.lastIndexOf('.')+1);                     
      const extension = testmsg === 'jpg';            
      const extension2 = testmsg === 'jpeg';
      const extension3 = testmsg === 'png';
      const extension4 = testmsg === 'JPG';            
      const extension5 = testmsg === 'JPEG';
      const extension6 = testmsg === 'PNG';
      if(!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6){
        this.$message.warning(`请选择图片格式文件`);
      }
      return extension || extension2 || extension3;
    },
    //文件移除提示
    handleRemove(file, fileList) {
      console.log(file);
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.uid == this.fileList[i].uid) {
          this.fileList.splice(i, 1);
          break;
        }
      }
      this.noneBtnImg = fileList.length >= this.limitCountImg;
      //return this.$confirm(`确定移除 ${ file.name }？`);
    },

    dealImgChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limitCountImg;
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //手动上传文件触发
    httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); //文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFileNew(fd)
        .then((response) => {
          if (response) {
            // this.form.eeiImgUrl = response.url
            this.fileList.push({
              uid: response.fileId,
              url: response.url + "/" + getToken(),
            });
            console.log(response.url);
            setTimeout(() => {
              loading.close();
            }, 2000);
          }
        })
        .catch((response) => {
          loading.close();
        });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const zfrIds = row.zfrId || this.ids;
      this.$confirm(
        '是否确认删除融资记录编号为"' + zfrIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delRecord(zfrIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /* 金额格式化 */
    moneyFormat(row, column, cellValue) {
      if(cellValue){
        cellValue += "";
        if (!cellValue.includes(".")) cellValue += ".";
        return cellValue
          .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
            return $1 + ",";
          })
          .replace(/\.$/, "");
      }
    },
    //获取当前客户是否之前设置过列展示隐藏
    columnQuery() {
      //获取页面路径
      var psfPagePath = window.location.pathname;
      //用请求后台的url作为唯一标识
      var psfTableName = this.tableId;
      var columnForm = {};
      columnForm.psfPagePath = psfPagePath;
      columnForm.psfTableName = psfTableName;
      columnQuery(columnForm).then(response => {
        if (response.data && response.data.psfShowData) {
          this.checkList = response.data.psfShowData;
        }
        this.filter();
      });
    },
    //控制隐藏显示的函数
    filter(checkList) {
      if (this.activeName == "first") {
        if (!!checkList) {
          this.checkList = checkList;
        }
        this.columnfilter(this.firstSet, this.checkList, this.tableList, this.uncheckList);
      } else if (this.activeName == "second") {
        if (!!checkList) {
          this.checkListOne = checkList;
        }
        this.columnfilter(this.firstSetOne, this.checkListOne, this.tableListOne, this.uncheckListOne);
      } else if (this.activeName == "third") {
        if (!!checkList) {
          this.checkListTwo = checkList;
        }
        this.columnfilter(this.firstSetTwo, this.checkListTwo, this.tableListTwo, this.uncheckListTwo);
      } else if (this.activeName == "fourth") {
        if (!!checkList) {
          this.checkListThree = checkList;
        }
        this.columnfilter(this.firstSetThree, this.checkListThree, this.tableListThree, this.uncheckListThree);
      }

    },

    //获取当前客户是否之前设置过列展示隐藏
    columnQueryOne() {
      //获取页面路径
      var psfPagePath = window.location.pathname;
      //用请求后台的url作为唯一标识
      var psfTableName = this.tableIdOne;
      var columnForm = {};
      columnForm.psfPagePath = psfPagePath;
      columnForm.psfTableName = psfTableName;
      columnQuery(columnForm).then(response => {
        if (response.data && response.data.psfShowData) {
          this.checkListOne = response.data.psfShowData;
        }
        this.filter();
      });
    },

    //获取当前客户是否之前设置过列展示隐藏
    columnQueryTwo() {
      //获取页面路径
      var psfPagePath = window.location.pathname;
      //用请求后台的url作为唯一标识
      var psfTableName = this.tableIdTwo;
      var columnForm = {};
      columnForm.psfPagePath = psfPagePath;
      columnForm.psfTableName = psfTableName;
      columnQuery(columnForm).then(response => {
        if (response.data && response.data.psfShowData) {
          this.checkListTwo = response.data.psfShowData;
        }
        this.filter();
      });
    },

    //获取当前客户是否之前设置过列展示隐藏
    columnQueryThree() {
      //获取页面路径
      var psfPagePath = window.location.pathname;
      //用请求后台的url作为唯一标识
      var psfTableName = this.tableIdThree;
      var columnForm = {};
      columnForm.psfPagePath = psfPagePath;
      columnForm.psfTableName = psfTableName;
      columnQuery(columnForm).then(response => {
        if (response.data && response.data.psfShowData) {
          this.checkListThree = response.data.psfShowData;
        }
        this.filter();
      });
    },
    /** 导出按钮操作 */
    handleExport(row) {
      const zfrFinanceId = row.zfrFinanceId || this.ids;
      this.download(
        "sc-service/financeRecord/export/" + zfrFinanceId,
        {},
        `融资管理附件${this.parseTime(new Date(),'{y}{m}{d}{h}{m}{s}')}.zip`
      );
    },

    columnfilter(firstSet, checkList, tableList, uncheckList){
        if (this.activeName == "first") {
          firstSet = this.firstSet;
        } else if (this.activeName == "second") {
          firstSet = this.firstSetOne;
        } else if (this.activeName == "third") {
          firstSet = this.firstSetTwo;
        } else if (this.activeName == "fourth") {
          firstSet = this.firstSetThree;
        }
        if (firstSet && checkList.length == 0) {
          this.$message.warning("配置显示列不能为空！");
          return;
        }
        if (this.activeName == "first") {
          this.firstSet = true;
        } else if (this.activeName == "second") {
          this.firstSetOne = true;
        } else if (this.activeName == "third") {
          this.firstSetTwo = true;
        } else if (this.activeName == "fourth") {
          this.firstSetThree = true;
        }
          //初始化数据
        if (checkList.length == 0) {
              for (let index in tableList) {
                  let table = tableList[index];
                  checkList.push(table.label);
              }
          }
          for (let index in tableList) {
              let table = tableList[index];
              uncheckList[table.label] = true;
          }
          
          //数据准备
          for (let item in uncheckList) {
            uncheckList[item] = false;
          }
          //数据处理
          for (let index in checkList) {
              let name = checkList[index];
              if (name in uncheckList) {
                uncheckList[name] = true;
              }
          }
          this.$forceUpdate();
    },
    handleClick (tab, event) {
      if (this.activeName == "first") {
        this.columnQuery();
      } else if (this.activeName == "second") {
        this.columnQueryOne();
      } else if (this.activeName == "third") {
        this.columnQueryTwo();
      } else if (this.activeName == "fourth") {
        this.columnQueryThree();
      }
    }
  },
};
</script>
<style>
.showUoload .el-upload--picture-card{
  width:110px;
  height:110px;
  line-height:110px;
}
.uoloadSty .el-upload--picture-card{
  display:none;
}
</style>