picc / admin-no-ui · Files

j<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="还款编号">
              <a-input placeholder="输入还款编号" v-model="queryParam.repaymentNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="客户名称">
              <a-input placeholder="输入客户名称" v-model="queryParam.idCardName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="手机号码">
              <a-input-number placeholder="输入手机号码" style="width: 100%" v-model="queryParam.mobilePhone" />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="12">
              <a-form-item label="还款支付流水号">
                <a-input placeholder="输入还款支付流水号" v-model="queryParam.paymentOrderNo"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="身份证号码">
                <a-input placeholder="输入身份证号码" v-model="queryParam.idCardNo"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="还款方式">
                <a-select v-model="queryParam.paymentWay" placeholder="请选择">
                  <a-select-option v-for="(item, index) in repayWay" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="还款状态">
                <a-select v-model="queryParam.paymentState" placeholder="请选择">
                  <a-select-option v-for="(item, index) in paymentState" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-item label="还款日期" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-range-picker showTime v-model="createTime" @change="onChangecreateTime"> </a-range-picker>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchResetTime" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button icon="money-collect" @click="thatDiogin" type="primary">线下还款</a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" :scroll="{ x: 1800 }" @change="handleTableChange">
        <!-- 字符串超长截取省略号显示-->
        <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>

        <span slot="action" slot-scope="text, record">
          <a-button
            type="link"
            size="small"
            @click="handleDetailBai(record, '还款记录详情')" v-has="'personalHuanKuan:look'"
            icon="search"
            style="font-size: 12px"
            >查看</a-button
          >
          <a-divider v-if="record.manualReviewStatus == 1" type="vertical" />
          <a-button
            type="link"
            size="small"
            @click="handleEditBai(record, '复核')" v-if="record.manualReviewStatus == 1"
            :disabled="record.manualReviewStatus != 1" v-has="'personalHuanKuan:reAudit'"
            icon="interation"
            style="font-size: 12px"
            >复核</a-button
          >
          <!-- <a-divider v-if="record.status==6 || record.status==8"  type="vertical" />
          <a v-if="record.status==6 || record.status==8" @click="handleApply(record)">申请</a> -->
        </span>
        <div
          style="maxWidth:100px;whiteSpace:nowrap;textOverflow:ellipsis;overflow:hidden; wordWrap:break-word; wordBreak:break-all"
          slot="remark" slot-scope="text, record">
          <a-tooltip placement="left">
            <template slot="title">
              <span>{{ record.remark }}</span>
            </template>
            {{ record.remark }}
          </a-tooltip>
        </div>
      </a-table>
    </div>
    <!-- table区域-end -->
    <huanKuanModal ref="modalForm" @ok="modalFormOk"></huanKuanModal>
    <fuheModal ref="modalFuhe" @ok="modalFormOk" @close="reloadData"></fuheModal>
    <offlineRepayment ref="modalDiogin" @ok="modalFormOk"></offlineRepayment>
  </a-card>
</template>
<script>
import huanKuanModal from './modules/huanKuanModal'
import fuheModal from './modules/fuheModal'
import offlineRepayment from './modules/offlineRepayment'
import { JeecgListMixin } from '@/mixins/CoreListMixin'
import { personalDetail, personalOfflinePreview, personalRecipientAccount } from '@/api/ziguanApi'
import { repayWay } from '@/data/params'
export default {
  name: 'personalInformationList',
  mixins: [JeecgListMixin],
  components: {
    huanKuanModal,
    fuheModal,
    offlineRepayment
  },
  data() {
    return {
      importExcelUrl: `${window._CONFIG['domianURL']}/test/jeecgDemo/importExcel`,
      description: '这是用户管理页面',
      queryParam: {},
      repayWay: repayWay,
      paymentState: [
        { label: '初始化 ', value: '0' },
        { label: '还款成功 ', value: '10' },
        { label: '还款失败 ', value: '2' },
        { label: '回购还款 ', value: '11' },
        { label: '还款中', value: '3' },
      ],
      programOffices: JSON.parse(sessionStorage.getItem('PROGRAMOFFICES')),
      visible: false,
      diogin: false,
      dateFormat: 'YYYY-MM-DD 00:00:00',
      value: [],
      applyNo: '',
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          width: 55,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '还款编号',
          align: 'center',
          dataIndex: 'repaymentNo',
          width: 300,
        },
        {
          title: '还款日期',
          align: 'center',
          dataIndex: 'repaymentDate',
          width: 180,
        },
        {
          title: '还款支付流水号',
          align: 'center',
          dataIndex: 'paymentOrderNo',
          width: 320,
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'idCardName',
          width: 120,
        },
        {
          title: '客户身份证号',
          align: 'center',
          dataIndex: 'idCardNoView',
          width: 180,
          // customRender: (t,r,index)=> {
          //   for(var i=0; i<this.applyWayStatus.length; i++){
          //     if(t === Number(this.applyWayStatus[i].name)){
          //       return this.applyWayStatus[i].title
          //     }
          //   }
          // }
        },
        {
          title: '客户手机号',
          align: 'center',
          dataIndex: 'mobilePhoneView',
          width: 180,
        },
        {
          title: '还款金额(元)',
          align: 'center',
          dataIndex: 'money',
          width: 180,
          customRender: (t, r, index) => {
            return this.$numMoney(t)
          }
        },
        {
          title: '还款方式',
          align: 'center',
          dataIndex: 'paymentWay',
          width: 120,
          customRender: (t, r, index) => {
            for (var i = 0; i < this.repayWay.length; i++) {
              if (t == this.repayWay[i].value) {
                return this.repayWay[i].label
              }
            }
          },
        },
        {
          title: '还款状态',
          align: 'center',
          dataIndex: 'paymentState',
          width: 120,
          customRender: (t, r, index) => {
            for (var i = 0; i < this.paymentState.length; i++) {
              if (t == this.paymentState[i].value) {
                return this.paymentState[i].label
              }
            }
          },
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          width: '100px',
          scopedSlots: { customRender: 'remark' },
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'applyPayDate',
          width: 180,
        },
        {
          title: '更新时间',
          align: 'center',
          dataIndex: 'updateTime',
          width: 180,
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 150,
          fixed: 'right',
        },
      ],
      url: {
        list: '/funding/admin/repayment/personal/getPage',
      },
      createTime: undefined,
    }
  },
  computed: {},
  created() { },
  methods: {
    getAvatarView: function (avatar) {
      return this.url.imgerver + '/' + avatar
    },
    handleChangePassword(username) {
      this.$refs.modalForm.show(username)
    },
    // 时间处理
    onChangecreateTime(val, str) {
      this.queryParam.repaymentDateStart = str[0] || ''
      this.queryParam.repaymentDateEnd = str[1] || ''
    },
    //复核
    handleEditBai: function (record, title) {
      let _p = { repaymentNo: record.repaymentNo }
      // let _p = {"repaymentNo":"HYD_ONLINE_20200312203950H9R03X"};
      //账户
      let p = {
        customerType: 1,
        repaymentNo: record.repaymentNo,
      }
      personalOfflinePreview(_p).then((res) => {
        if (res.status.statusCode == 0) {
          const datas = res.result
          personalRecipientAccount(p).then((data) => {
            if (data.code == 200) {
              this.$refs.modalFuhe.edit(datas, data.data, 1)
            }
          })
        }
        if (res.status.statusCode === -1) {
          this.$message.warning(res.message || '暂无数据或信息错误')
        }
      })
      this.$refs.modalFuhe.title = title
      this.$refs.modalFuhe.disableSubmit = false
      this.$refs.modalFuhe.onlyread = true
    },
    //查看
    handleDetailBai: function (record, title) {
      let _p = { id: record.id }
      personalDetail(_p).then((res) => {
        if (res.status.statusCode == 0) {
          console.log(res.result)
          // this.$refs.modalForm.edit(res.result,record.applyNo)
          this.$refs.modalForm.edit(res.result, record.id)
        }
        if (res.status.statusCode === -1) {
          this.$message.warning(res.status.statusReason)
        }
      })
      this.$refs.modalForm.title = title
      this.$refs.modalForm.disableSubmit = true
      this.$refs.modalForm.onlyread = true
    },
    handleApply(record) {
      this.applyNo = record.applyNo
      this.visible = true
    },
    thatDiogin() {
      this.$refs.modalDiogin.listType = 1
      this.$refs.modalDiogin.add()
    },
    handleOk(e) {
      console.log(e)
      let _p = { applyNo: this.applyNo }
      console.log(_p)
      // ApprovalApplyByApplyNo(_p).then(res=>{
      //   console.log(res)
      //   if(res.status.statusCode==0){
      //     this.$message.success(res.status.statusReason)
      //   }else{
      //     this.$message.warning(res.status.statusReason)
      //   }
      // });
      this.visible = false
    },
    // 重置
    searchResetTime() {
      this.createTime = undefined
      this.queryParam = {}
      this.loadData(1)
    },
    reloadData() {
      this.loadData()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>