picc / admin-no-ui · Files

<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="8">
            <a-form-item label="时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-date-picker
                style="width: 100%"
                :disabledDate="disabledStartDate"
                :format="dateFormat"
                v-model="applyDateStart"
                @change="onChangeApplyDateStart"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="至" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-date-picker
                style="width: 100%"
                :disabledDate="disabledEndDate"
                :format="dateFormat"
                v-model="applyDateEnd"
                @change="onChangeApplyDateEnd"
              />
            </a-form-item>
          </a-col>
          <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 type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 2000 }"
        @change="handleTableChange"
      >
        <span slot="actionOpen" slot-scope="text, record">
          <a-switch size="small" :checked="true" />
        </span>
        <span slot="actionAccount" slot-scope="text, record">
          <a @click="detailAccount(record, 'accountNo')">{{ record.creditNo }}</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <contract-modal ref="modalForm" @ok="modalFormOk"></contract-modal>
    <!-- 额度详情模板 -->
    <div>
      <a-modal
        title="额度详情"
        :maskClosable="false"
        :width="1200"
        :centered="true"
        :visible="detailFlag"
        :confirmLoading="confirmLoading"
        cancelText="关闭"
        @ok="queren"
        @cancel="cancle"
        style="top: 20px"
        class="scoped-person"
      >
        <deteailModal
          :detailData="detailData"
          @getDeteail="getDeteail"
          @cancel="cancle"
          @showxiangqing="showxiangqing"
          :dataSource="dataSources"
          :customerType="queryParam.customerType"
        ></deteailModal>
      </a-modal>
    </div>
    <!-- 业务产品额度列表 -->
    <div>
      <a-modal
        title="业务产品额度列表"
        :maskClosable="false"
        :width="1200"
        :centered="true"
        :visible="accountNoFlag"
        :confirmLoading="confirmLoading"
        cancelText="关闭"
        @ok="queren"
        @cancel="cancle"
        style="top: 20px"
        class="scoped-person"
      >
        <deteailModal
          :detailData="detailData"
          @getDeteail="getDeteail"
          @cancel="cancle"
          @showxiangqing="showxiangqing"
          :dataSource="dataSources"
          :customerType="queryParam.customerType"
        ></deteailModal>
      </a-modal>
    </div>
    <!-- 设置框 -->
    <div>
      <setModal ref="setmodalForm" @queren="queren"></setModal>
    </div>
  </a-card>
</template>
<script>
import ContractModal from './addAccount'
import deteailModal from './deteailAccount'
import setModal from './setStatus'
import { putAction } from '@/api/manage'
import { frozenBatch } from '@/api/api'
import { queryCreditAmountEnterprisePage, creditAmountModify, creditAmountDetail } from '@/api/configApi'
import { formatAmount, formatAmountFen, reverseAmountFen, reverseAmount } from '@/utils/format'
import { JeecgListMixin } from '@/mixins/CoreListMixin'
export default {
  name: 'personAccount',
  mixins: [JeecgListMixin],
  components: {
    ContractModal,
    deteailModal,
    setModal,
  },
  data() {
    return {
      description: '这是用户管理页面',
      queryParam: {
        customerType: 2,
        creditLevel: 1,
      },
      detailFlag: false,
      confirmLoading: false,
      accountNoFlag: false,
      setFlag: false,
      detailData: [], //详情数据
      dataSource: [], //列表
      dataSources: [],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: '100px',
          align: 'center',
          //   fixed: 'left',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '业务交易流水号',
          align: 'center',
          width: 200,
          dataIndex: 'enterpriseName',
        },
        {
          title: '产品名称',
          align: 'center',
          width: 200,
          dataIndex: 'orgCode',
        },

        {
          title: '业务线(产品)额度(元)',
          align: 'center',
          width: 100,
          dataIndex: 'mobilePhoneView',
        },
        {
          title: '可用额度(元)',
          align: 'center',
          width: 100,
          dataIndex: 'creditNo',
          scopedSlots: { customRender: 'actionAccount' },
        },
        {
          title: '已使用额度(元)',
          align: 'center',
          width: 100,
          dataIndex: 'creditAmount',
          // customRender: function(t, r, index) {
          //   return formatAmount((t/100).toFixed(2),2)
          // }
        },
        {
          title: '在途',
          align: 'center',
          width: 100,
          dataIndex: 'creditAmountUsed',
          // customRender: function(t, r, index) {
          //   return formatAmount((t/100).toFixed(2),2)
          // }
        },
        {
          title: '冻结金额(元)',
          align: 'center',
          width: 100,
          dataIndex: 'activitiSync',
          customRender: function (t, r, index) {
            return Number(r.creditAmount) - Number(r.creditAmountUsed) - Number(r.creditAmountFloat)
          },
          //   scopedSlots: { customRender: 'actionOpen' }
        },
        {
          title: '交易金额(元)',
          align: 'center',
          width: 100,
          dataIndex: 'creditAmountFloat',
          //  customRender: function(t, r, index) {
          //  return formatAmount((t/100).toFixed(2),2)
          // }
        },
        {
          title: '额度(增/减)',
          align: 'center',
          width: 100,
          dataIndex: 'creditStartDate',
        },
        {
          title: '业务操作',
          align: 'center',
          width: 100,
          dataIndex: 'creditEndDate',
        },
        {
          title: '附言',
          align: 'center',
          width: 200,
          dataIndex: 'createTime',
        },
        {
          title: '资金方',
          align: 'center',
          width: 200,
          dataIndex: 'updateTime',
        },
        {
          title: '发生时间',
          align: 'center',
          width: 200,
          dataIndex: 'updateTime',
        },
      ],
    //   labelCol: {
    //     xs: { span: 24 },
    //     sm: { span: 5 },
    //   },
    //   wrapperCol: {
    //     xs: { span: 24 },
    //     sm: { span: 16 },
    //   },
      url: {
        list: '/credit/admin/queryCreditAmountEnterprisePage'
      },
    }
  },
  computed: {},
  mounted() {
    // this.getModle()
  },
  methods: {
    getAvatarView: function (avatar) {
      return this.url.imgerver + '/' + avatar
    },
    handleChangePassword(username) {
      this.$refs.modalForm.show(username)
    },
    //获取列表
    getModle() {
      let formData = { params: { customerType: this.queryParam.customerType, creditLevel: 1 }, pageNo: 1, pageSize: 10 }
      this.confirmLoading = true
      queryCreditAmountEnterprisePage(formData)
        .then((res) => {
          console.log(res)
          if (res.status.statusCode == 0) {
            // this.$message.success(res.status.statusReason)
            console.log(res.result)
            this.dataSource = res.result.records
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.cancle()
        })
    },
    // 详情模板显示
    showxiangqing() {
      console.log('eee')
      this.detailFlag = true
    },
    // 额度详情
    detailAccount(record, type) {
      console.log(record, type)
      this.detailData = []
      this.detailData.push(record)
      if (type == 'accountNo') {
        this.accountNoFlag = true
      } else if (type == 'detail') {
        this.detailFlag = true
      }
      this.getDeteail()
    },
    getDeteail() {
      let formData = { customerType: this.queryParam.customerType, id: this.detailData[0].id }
      // let formData = {customerType:this.customerType}
      this.confirmLoading = true
      creditAmountDetail(formData)
        .then((res) => {
          // console.log(res.result.creditAmountTree)
          this.confirmLoading = false
          if (res.status.statusCode == 0) {
            // this.$message.success(res.status.statusReason)
            this.dataSources = []
            this.dataSources.push(res.result.creditAmountTree)
            // if (type == 'accountNo') {
            //   this.accountNoFlag = true
            // } else if (type == 'detail') {
            //   this.detailFlag = true
            // }
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    setAccount(record) {
      console.log(record)
      this.detailData = []
      this.detailData.push(record)
      this.detailData[0].customerType = 2

      this.$refs.setmodalForm.edit(record)
      this.$refs.setmodalForm.title = '设置'
    },

    cancle() {
      this.detailFlag = false
      this.accountNoFlag = false
      this.setFlag = false
    },
    queren(type) {
      this.loadData()
    },
    searchReset() {
      ;(this.queryParam = {
        customerType: 2,
        creditLevel: 1,
      }),
        this.getModle()
    },
  },
}
</script>
<style>
@import '~@assets/less/common.less';
.scoped-person .ant-modal-footer {
  display: none;
}
</style>